Rebuild A 2004 Flash Website for 2018

I 1999 bygget jeg mitt første nettsted ved hjelp av Web Studio 1.0. Web Studio var et grafisk brukergrensesnitt. Det var mulig å skape en ny destinasjonsside og dra og slipp elementer inn i den. Jeg satte opp et gratis domene og hosting med geocities og voila! Jeg hadde et nettsted. Raskt frem til 2004, jeg ønsket å gå videre og så, som mange andre, jeg satte meg for å bygge et band nettsted.

• 12 Vanlige JavaScript-spørsmål besvart
[1. 3]

Mye har endret seg siden da. I denne artikkelen skal jeg ta en tur ned Memory Lane og gjenskape det samme nettstedet for nettet i dag.

Få filene for denne opplæringen.



Så, la oss starte! Først av, generelt hvert nytt prosjekt for meg starter med MKD etterfulgt av G Init. For de av dere som kjenner meg, på et tidspunkt, har jeg sannsynligvis nevnt dotfiler til deg. Dotfiles er filer som bare begynner med en prikk (det tok meg en overraskende lang tid å faktisk gjøre den tilkoblingen!) Og de kan brukes til en rekke formål. To av mine favorittdotfiler er .Aliasas og .funksjoner. La meg utdype ...

I Bash er det mulig å opprette en ny katalog ved hjelp av kommandoen MKDIR, så etter at du må endre katalog-CDen i katalogen som du nettopp har opprettet. Bruke koden jeg har i min. Fil, det er nå mulig å kjøre MKD. Dette vil ikke bare skape den nye katalogen, men har også endret seg i den katalogen også. Dette kan virke overkill først, men jeg elsker disse mikrovinstene. Over tid, spesielt hvis du kjører disse kommandoene flere ganger om dagen, legger de snart til mye lagret tid.

 # Opprett en ny katalog og skriv inn den
Funksjon MKD () {
    MKDIR -P "$ @" & amp; & amp; CD "$ _";
} 

Den neste kommandoen, hvis du er kjent med GIT, er bare GIT-init, som vil gjøre det mulig for oss å versjon kontrollen prosjektet. Jeg bruker git mye, selv for shoppinglister! Så heller enn å måtte skrive ut git hver gang, legger du til alias g = "git" til. Aliases igjen er en fin, liten tidsbesparende for meg.

I disse dager er det en mengde forskjellige rammer og teknologier. For dette prosjektet vil jeg holde ting enkelt. Jeg skal bruke HTML, CSS og om nødvendig et sprinkle av JavaScript. Først opp, la oss lage den grunnleggende HTML-oppslaget. Men vent! La oss stoppe og tenke i et minutt.



Noen ganger kan utviklere, selv inkludert, være super-begeistret for et prosjekt og ønsker å bli sprekk umiddelbart og gå rett for tastaturet for å skrive kode. Men jeg finner dette er ofte ikke den beste tilnærmingen. Jeg elsker å få en oversikt over prosjektet først. Ved å gjøre dette og ha en mye klarere syn på prosjektet som helhet, finner jeg det mulig for mye bedre beslutningsprosesser. For eksempel, hvis jeg dived rett inn i koden, kan jeg støte på et problem som jeg da måtte gå tilbake og refactor. Det er noen forskjellige resultater med denne tilnærmingen. Først kan det være at jeg må slette koden helt og starte igjen; For det andre, hvis du fortsetter på denne måten, kan jeg ende opp med "Spaghetti-koden" som gjør det vanskelig i fremtiden for å oppdatere, feilsøke og resultere i resultatført tap; Tredje, noen ganger fungerer det bra, og du ender med bedre kode, men jeg vil ha en tendens til å si at første og andre utfall er langt mer vanlige.

Dette prosjektet er ganske lite; Den har noen få sider: Hjem, Nyheter, Gigs, Media, Album, Lenker og Vanlige deler Blant disse sidene: Header, Navigasjon, Typografi Innhold, Lister, Bilder, Videoer. Når du opprinnelig bygger flash-området i 2004, var det mye mer enkle når det gjelder testing. Nettstedet ble bygget i Flash, for Flash på en stasjonær datamaskin med mus og tastatur. I disse dager er mobil- og tavle Internett-bruk mer vanlig enn på en stasjonær datamaskin, og denne trenden fortsetter å stige.

For å gjøre dette til en bedre opplevelse for den som ser på nettstedet, skal jeg ta hensyn til noen få ting i begynnelsen av prosjektet og bruke en mobil første strategi. For å gjøre det, og igjen, før du skriver noen kode, skal jeg komme ut en god gammeldags penn og papir. Først skriver jeg ut sitemapet; Ved å gjøre det er det noen viktige områder jeg tror kan forbedres. For eksempel besto mitt opprinnelige nettsted av forskjellige sider for hver av bandets album. På den tiden hadde de tre album og passet pent i navigasjonen. Nå har de mye mer og potensielt mer å komme, så jeg har i tankene mine tenker på måter å gjøre nettstedet mer fremtidige bevis (en oldie, men en godhet er Dan Cederholms Bulletproof webdesign ).

Nå har jeg en grov ide i hodet mitt på sitemap og sider, neste opp er å skape noen low-fi-wireframes. Fra tidligere erfaring med å bygge mange responsive steder, kommer Mobile med interessante designutfordringer, nemlig hvordan du lager en navigering, men gjør det fortsatt mulig å vise hovedinnholdet på nettstedet. Jeg skal gå sammen med designutfallet vi har alle vokst til å elske / hate: Burger-menyen tilnærming. Imidlertid skal jeg legge til litt vri. Det opprinnelige kunstverket brukte fugler, så i stedet for det vanlige burger-menyikonet, jeg skal bruke fuglekunstverk som vil aktivere menyen og åpne og lukke vingene som en måte å indikere om menyen er aktiv eller ikke.



Ting i mitt sinn begynner nå å ta form, med en ide om hvordan folk vil kunne navigere rundt på nettstedet. Jeg skal nå tenke på hvordan sidene selv kan se ut. Fra og med hjemmesiden er det ganske enkelt, med typografisk innhold. Neste, nyheter - igjen typografisk innhold, potensielt bilder og deretter en slags navigering for å se eldre innlegg. GIGS - en liste over kommende konserter med lenker til kjøp av billetter. For media, ser tilbake på forrige side, hadde jeg "bilder" og "videoer" som to forskjellige seksjoner, men her tror jeg det er rom for forbedring og å konsolidere som "media". Album, AH, YES ALBUMS - Nå er det her hvor du gjør denne typen ting lønner seg. Du ser, albumsiden har typografi og et bilde, og kommer til å trenge en slags navigering for å se eldre innlegg. Høres kjent ut? Høres mye som den samme strukturen som nyhetssiden! Å ha denne toppnivåoversikten kan jeg se på og tenke på ting på en mer granulær, komponent, noen kan til og med si Atomic Design nivå, hvis du er kjent med arbeidet med Brad Frost.

Nå har jeg en ide om hvordan nettstedet skal fungere på mindre enheter og gjenbrukbare elementer, det er på tide å gjenta prosessen med større enheter. Siden nettstedet er ganske enkelt, og med wireframes som allerede er opprettet for mobil, ser jeg de større enhetene som er ganske like - bortsett fra nå har vi litt ekstra rom, så vi kan utvide innholdsområdene og også inkludere en sidegavigering.

Side navigasjonen er biten av nettstedet som fra offset er jeg mest spent på. Ta inspirasjon fra bandets opprinnelige kunstverk, jeg bygde navigasjonen som en tre silhuett med blader. Hvert blad var en knapp som knyttet til en annen side på nettstedet. Også, som du rullet inn og svevet bort fra bladet, ville bladet animere, fallende til bakken. Flash var flott på dette; Det ble kalt tweening. Du kan sette et element på en keyframe i grensesnittet på tidslinjen, opprett en annen keyframe videre langs tidslinjen og legge til en bane for elementet som skal følges. Ta ting litt lenger, varierende stiene, varigheten og hastigheten til de fallende bladene, jeg endte med noe jeg var veldig fornøyd med.

Men nå bruker vi ikke Flash, så hvordan gjør vi dette? Ganske ofte hopper jeg til Codepen eller JS Bin. For de av dere som ikke er klar over, er Codepen og JS Bin online-tjenester som gjør at du raskt kan kode og lagre. Jeg har en tendens til å se Codepen som mer Design LED, og ​​JS Bin mer JavaScript fokusert. For dette prosjektet skal jeg bruke kodepen for å skape treavigasjon av noen grunner. Først vil jeg begynne å bygge opp den viktigste mobilversjonen av nettstedet, og faktisk ved å gjøre dette, hvis ting var tid kritisk, kunne jeg ende opp med en MVP. Selv om det er forbedringer på nettstedet som kan gjøres ved å legge til den fine bladnavigasjonen og animasjonen, vil dette ta lengre tid å produsere. En fordel ved å arbeide i Codepen for trefavigasjonen betyr at den er isolert fra hovedstedet og kodebasen. Hvis ting blir vanskelig med å fullføre det, kan jeg redde hvor jeg er på, fortsett med hovedsiden, og kom tilbake til navigasjonen. Noen ganger finner jeg at jeg i å gå bort fra et problem, eller til og med sove på det, kan mitt underbevissthet fortsette å tenke på det. Så når du kommer tilbake til problemet, presenterer en løsning seg selv.

Svgs! Jeg elsker SVGs. Tidligere i Flash trakk jeg ut bladets eiendeler i Illustrator. Utrolig hadde jeg fortsatt en fungerende CD med det opprinnelige kunstverket og var i stand til å åpne den. Disse dagene bruker jeg skisse og det gjorde en god jobb med å åpne opp filen. Jeg har nå bladets eiendeler helt klar til å bli eksportert som SVGs. Hvorfor svgs? Det er mange grunner. Hvis vi skulle bruke en JPG, eller GIF på en Retina-enhet, måtte vi også levere større eiendeler, ellers ville de se uskarpt. Også med SVGs, kan vi bruke CSS. Dette er flott, og lar oss bare endre fargen på SVG med litt CSS i stedet for å lage en annen bildeaktiv. Dette betyr at det er lettere å vedlikeholde, og som en bonus er det også mer utøvende. Hvis du ikke er kjent med SVGs, vil jeg anbefale å lese på dem og det utrolige arbeidet fra min gode venn, Sara Soueidan. .



Med tre- og bladets eiendeler nå på plass, er den endelige tingen å legge til animasjonen. Det er noen få tilnærminger jeg kunne ta med dette. Man ville være å være sant til den originale Flash Path Tween jeg gjorde. Dette ville bety replikere stiene og bruke SVG og deretter potensielt ytterligere SVG arbeid med stier og animatemotion. Jeg liker lik denne ideen fra et nostalgisk synspunkt, men CSS har kommet mye gjennom årene, og vi har nå forvandlet og oversett til vår disposisjon, så dette kan være en annen tilnærming. Ta ting et skritt videre, vi kunne til og med legge til noe JavaScript som ville randomisere de fallende bladene.

Begge alternativene høres bra ut, men jeg svinger mot den mer CSS-ledede ruten. Her er en annen fordel ved å bruke kodepen, jeg kan raskt gå og prøve en tilnærming. Hvis det viser seg at det er mer komplisert enn jeg opprinnelig trodde, eller det føles ikke riktig, kan jeg prøve en annen tilnærming med liten tid bortkastet. Faktisk viste dette seg for å være en god idé! Jeg ser fortsatt på alternativer for dette - vennligst referer til prosjektet på GitHub for det endelige resultatet.

Med Tree Navigation nå sortert, vendte jeg tilbake til den mobile første tilnærmingen, og bygdet navigasjonen. Hvis du er kjent med Sass, har du mer enn sannsynlig oppstått variabler. Men visste du variabler nå tilgjengelig i CSS? De har ganske anstendig nettleserstøtte I Chrome, Edge, Safari og Samsung Internet også! Som jeg prøver å holde til grunnleggende CSS og unngå behovet for eventuelle ekstra avhengigheter, er dette gode nyheter. Så hvordan skulle vi implementere dette? På toppen av stilarket erklærer jeg mine variabler:

: Root {
  - Grey: #CCC;
  --red: # fb0f0c;
  --Grid-størrelse: 10px;
} 

Nå som de er erklært, kan jeg ringe dem, så for eksempel å sette kroppens bakgrunnsfarge ville se slik ut:

 Kropp {
  Bakgrunn: Var (- grå);
} 

Ta dette et skritt videre og for å hjelpe med nettjustering, hvit plass, vertikal rytme, du har kanskje lagt merke til at jeg også har definert en rutenettstørrelsesvariabel. Variabler fungerer veldig bra med Calc, og det ser litt noe ut som dette:

 // Standardvariabel som brukes, utganger 10px.
Padding-Top: Var (- Gitterstørrelse);

// Legge til beregning for å multiplisere variabelenheten med 2, utganger 20px.
Padding-bunn: Calc (Var (- Gitterstørrelse) * 2); 

Med de mobile navigasjonsstilene er fullført, la oss takle funksjonaliteten for å gjemme seg og vise den. For Bytt-knappen bruker vi en etikettkode, og i Nav-taggen legger vi til en inngang:

& lt; header class = "header" & gt;
  & lt; h1 class = "header_title" & gt; band website & lt; / h1 & gt;
  & lt; h2 class = "header_currentpage" & gt; home & lt; / h2 & gt;
  & lt; Label for = "MobileNaV_Toggle" Class = "MobileNaV_Toggle" & gt; Toggle & LT; / Label & GT;
& lt; / header & gt;

& lt; nav klasse = "mobilenav" & gt;
  & lt; input type = "avkrysningsboks" id = "mobilenav_toggle" role = "knappen" & gt;
  & lt; ul klasse = "mobilenav_list" & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; / lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; news & lt; / a>
    & lt; li class = "mobilenav_listitem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; kontakt & lt; / a & gt;
  lt; / ul & gt;
& lt; / Nav & gt; 

Ved hjelp av følgende CSS kan vi vise og skjule navigasjonsmenyen; Fordi vi vil ha etiketten i toppteksten, kan vi bruke ~ aka tilde eller (U + 007E), så det fungerer mens de ikke umiddelbart lykkes av det første elementet.

 #mobilenav_toggle [type = avkrysningsboks] {
  Display: Ingen;
}

#mobilenav_toggle [type = avkrysningsboks]: sjekket ~ .mobilenav_list {
  Skjerm: blokk;
} 

Med mobilnavigasjonen er det på tide å implementere noen Responsivt webdesign . Legge i hovedinnholdet for nettstedet, og deretter ved hjelp av den responsive utsikten i Chrome Developer-verktøy, kan jeg øke visningsportbredden til jeg føler at det er nok plass til å tilstrekkelig holde trærnavigasjonen. Dette ender med å være på 600px, og for dette kan vi bruke en medieforespørsel:

 .trenav {
  Display: Ingen;
}

@media skjerm og (min bredde: 600px) {
  .trenav {
    Skjerm: blokk;
  }
} 

Nesten der! Endelig for Tree Navigation å sitte ved siden av hovedinnholdsområdet, skal jeg gjøre bruk av FlexBox:

 .Container {
  Skjerm: Flex;
}

.trenav {
  Display: Ingen;
  Min-Bredde: 140px;
} 

Nå tar Tree Navigation opp 100% høyde, med innholdet som gjør det samme og sitter til høyre for det. Dette betyr at uansett hvor lenge innholdet blir, vil det aldri strømme under trærnavigasjonen. Hvis du vil vite mer om FlexBox, vil jeg anbefale å sjekke ut flexbox.io. av den ene og eneste Wes BOS. Det er mye det kan gjøre!



Det er alt jeg har tid til for øyeblikket, men det er fortsatt mange ting vi kunne gjøre for å gjøre dette prosjektet enda bedre. Hvis du har spørsmål, eller likte artikkelen, vær så snill å si hei på Twitter eller gjennom. min side , eller send meg en trekkforespørsel på GitHub!

Denne artikkelen ble opprinnelig publisert i utgave 304 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 304 her eller Abonner her .

Relaterte artikler:

• 5 tips for super-rask CSS
• Animer SVG med JavaScript
• Forstå CSS-displayegenskapen
[1. 3]