Uppbygga en Flash-webbplats 2004 för 2018

År 1999 byggde jag min första webbplats med Web Studio 1.0. Web Studio var ett grafiskt användargränssnitt. Det var möjligt att skapa en ny landningssida och dra och släpp element i den. Jag satte upp en fri domän och värd med geocities och voila! Jag hade en webbplats. Snabbspolning till 2004 ville jag gå längre och så, som många andra, satt jag ut för att bygga en bandwebbplats.

• 12 Vanliga Javascript-frågor besvarade

Mycket har förändrats sedan dess. I den här artikeln ska jag ta en resa ner Memory Lane och återskapa på samma plats för webben idag.

Hämta filerna för denna handledning.

Så, låt oss börja! Först, i allmänhet, i allmänhet börjar varje nytt projekt för mig med MKD följt av G INIT. För de av er som känner mig, har jag förmodligen nämnt dotfiler till dig. Dotfiles är filer som helt enkelt börjar med en punkt (det tog mig en överraskande lång tid att faktiskt göra den anslutningen!) Och de kan användas för ett antal ändamål. Två av mina favorit dotfiles är .alias och .funktioner. Låt mig utarbeta ...

I bash är det möjligt att skapa en ny katalog med kommandot MKDIR sedan efter det att du måste ändra katalog CD i den katalog som du just skapat. Med koden jag har i min FUNCTIONS-fil är det nu möjligt att köra MKD. Detta kommer inte bara att skapa den nya katalogen, men har också ändrats i den katalogen. Detta kan verka överkill först, men jag älskar dessa mikrovinnor. Med tiden, speciellt om de kör dessa kommandon flera gånger om dagen, lägger de snart upp till mycket sparad tid.

 # Skapa en ny katalog och ange den
funktion mkd () {
    mkdir -p "$ @" & amp; & amp; CD "$ _";
} 

Nästa kommando, om du är bekant med Git, är helt enkelt Git init, vilket gör det möjligt för oss att version kontrollera projektet. Jag använder git mycket, även för inköpslistor! Så snarare än att behöva skriva ut git varje gång, lägga till alias g = "git" till .alier igen är en trevlig, liten tidsbesparare för mig.

Dessa dagar finns det en mängd olika ramar och tekniker. För det här projektet vill jag hålla sakerna enkla. Jag ska använda HTML, CSS och om det behövs en strö av javascript. Först upp, låt oss skapa den grundläggande HTML-markeringen. Men vänta! Låt oss stanna och tänka på en minut.

Ibland kan utvecklare, mig själv, vara super-upphetsad om ett projekt och vill få spricka omedelbart och gå rakt på tangentbordet för att skriva kod. Jag finner dock att detta ofta inte är det bästa tillvägagångssättet. Jag älskar att få en översikt i åtanke om projektet först. Genom att göra detta och ha en mycket tydligare vision av projektet som helhet, finner jag att det tillåter mycket bättre beslutsfattande. Till exempel, om jag dök rakt in i koden, kan jag stöta på ett problem som jag då skulle behöva gå tillbaka och refactor. Det finns några olika resultat med detta tillvägagångssätt. För det första kan det vara att jag måste radera koden helt och börja igen. För det andra, om det fortsätter på detta sätt, kan jag hamna med "spaghetti-kod" vilket gör det svårt i framtiden att uppdatera, felsöka och resultera i prestationsförlust. För det tredje, ibland fungerar det okej och du hamnar med bättre kod, men jag tenderar att säga att de första och andra resultaten är mycket vanligare.

Detta projekt är ganska litet; Den har några sidor: hem, nyheter, spelningar, media, album, länkar och vanliga delar bland dessa sidor: rubrik, navigering, typografiinnehåll, listor, bilder, videor. När det ursprungligen bygger flashsidan 2004, var det mycket enklare när det gäller testning. Webbplatsen byggdes i Flash, för Flash på en stationär dator med en mus och tangentbord. Dessa dagar är mobil och tablett internetanvändning vanligare än på en stationär dator, och denna trend fortsätter att stiga.

För att göra detta till en bättre upplevelse för den som ser på webbplatsen, ska jag ta hänsyn till några saker i början av projektet och använda en mobil första strategi. För att göra det, och igen, innan du skriver någon kod, kommer jag att få ut en bra gammaldags penna och papper. Först skriver jag ut sitemapet; Därför finns det några viktiga områden som jag tror kan förbättras. Till exempel bestod min ursprungliga webbplats av olika sidor för var och en av bandets album. Vid den tiden hade de tre album och så passa snyggt i navigeringen. Nu har de mycket mer och potentiellt mer att komma, så jag tänker redan på sätt att göra platsen mer framtida bevis (en oldie men en godis är dan cederholms Bulletproof webbdesign ).

Nu har jag en grov idé i mitt huvud på sitemap och sidor, nästa är att skapa några lågfi-trådlösa. Från tidigare erfarenhet av att bygga många responsiva webbplatser, kommer mobilen med intressanta designutmaningar, nämligen hur man skapar en navigering, men gör det fortfarande möjligt för människor att se huvudinnehållet på webbplatsen. Jag ska följa med designresultatet vi alla vuxit till kärlek / hat: Burger-menyn. Men jag ska lägga till en liten vridning. Det ursprungliga konstverket som använde fåglar, så snarare än standard burgermenyikonen, jag ska använda fågelkonstverk som aktiverar menyn och öppnar och stänger sina vingar som ett sätt att ange om menyn är aktiv eller inte.

Saker i mitt sinne börjar nu ta form, med en uppfattning om hur människor kommer att kunna navigera runt på platsen. Jag kommer nu att tänka på hur sidorna själva kan se ut. Från och med hemsidan är det ganska enkelt, med typografiinnehåll. Nästa, nyheter - igen typografi innehåll, potentiellt bilder och sedan någon form av navigering för att se äldre inlägg. Gigs - en lista över kommande spelningar med länkar för att köpa biljetter. För media, som tittar tillbaka på föregående webbplats, hade jag "bilder" och "videor" som två olika sektioner, men här tror jag att det finns utrymme för förbättring och att konsolidera som "media". Album, ah, ja album - nu är det här som gör den här typen av sak. Du ser, albumssidan har typografi och en bild, och kommer att behöva någon form av navigering för att se äldre inlägg. Låter bekant? Låter mycket som samma struktur som nyhetssidan! Med denna översikt över toppnivå kan jag titta på och tänka på saker på en mer granulär, komponent, vissa kan till och med säga atomdesign Nivå, om du är bekant med Arbetet med Brad Frost.

Nu har jag en uppfattning om hur webbplatsen kommer att arbeta med mindre enheter och återanvändbara element, det är dags att upprepa processen med större enheter. Eftersom webbplatsen är ganska enkel, och med de trådlösa trådarna som redan skapats för mobil, ser jag att de större enheterna är ganska lika - bortsett från nu har vi några extra rum, så vi kan bredda innehållsområdena och även innehålla en sidnavigering.

Sidan navigering är biten av den plats som från den offset jag är mest upphetsad. Med inspiration från bandets ursprungliga konstverk byggde jag navigeringen som en trädsilhouette med löv. Varje blad var en knapp som kopplade till en annan sida på webbplatsen. Också, när du rullade in och svävar bort från bladet, skulle bladet animera, som faller till marken. Flash var stor på detta; Det kallades tweening. Du kan ställa in ett element på en keyframe i gränssnittet på tidslinjen, skapa en annan nyckelram längre längs tidslinjen och lägg till en väg för elementet att följa. Att ta saker lite längre, variera vägarna, varaktigheten och hastigheten på de fallande löv, slutade jag med något jag var mycket nöjd med.

Men nu använder vi inte Flash, så hur gör vi det här? Ganska ofta hoppar jag till Codepen eller JS bin. För de av er som inte är medvetna är Codepen och JS Bin onlinetjänster som gör att du snabbt kan koda och spara. Jag tenderar att se Codepen som mer design LED, och JS bin Mer JavaScript fokuserade. För detta projekt använder jag Codepen för att skapa trädnavigering av några skäl. Först vill jag börja bygga upp den viktigaste mobilversionen av webbplatsen, och i själva verket genom att göra det, om saker var tidskritiska, kunde jag hamna med en MVP. Även om det finns förbättringar av den webbplats som kan göras genom att lägga till den fina bladnavigeringen och animationen, tar det längre tid att producera. En fördel med att arbeta i Codepen för trädnavigering innebär att den är isolerad från huvudplatsen och kodbasen. Om saker blir knepigt med att slutföra det, kan jag spara var jag är på, fortsätt med den huvudsakliga platsen, och sedan komma tillbaka till navigeringen. Ibland finner jag att det går bort från ett problem, eller till och med sover på det, kan mitt undermedvetna fortsätta att tänka på det. Därefter presenterar en lösning efter att återvända tillbaka till problemet.

SVGS! Jag älskar svgs. Tidigare i Flash tog jag ut bladets tillgångar i illustratören. Förvånansvärt hade jag fortfarande en arbets-cd med det ursprungliga konstverket och kunde öppna den. Dessa dagar använder jag skiss och det gjorde ett bra jobb att öppna filen. Jag har nu bladtillgångarna är redo att exporteras som SVGs. Varför svgs? Det finns många skäl. Om vi ​​skulle använda en jpg, eller gif på en näthinnan, skulle vi också behöva leverera större tillgångar, annars skulle de se suddiga ut. Också med SVGs kan vi använda CSS. Det här är bra och låter oss helt enkelt ändra SVGs färg med hjälp av en bit av CSS istället för att behöva skapa en annan bild tillgång. Det betyder att det är lättare att behålla, och som en bonus är det också mer prestanda. Om du inte är bekant med SVGs rekommenderar jag starkt att läsa på dem och det otroliga arbetet från min goda vän, Sara Soueidan .

Med träd och blad tillgångar nu på plats, är det sista att lägga till animationen. Det finns några tillvägagångssätt som jag kan ta med detta. Man skulle vara sant mot den ursprungliga flashvägen mellan jag gjorde. Detta skulle innebära att man kopierar banorna och använder SVG och därefter potentiellt SVG arbetar med vägar och animatemotion. Jag gillar att den här tanken från en nostalgisk synvinkel, men CSS har kommit mycket under åren, och vi har nu omvandling och översätter till vårt förfogande, så det kan vara ett annat tillvägagångssätt. Med saker ett steg längre kan vi till och med lägga till något javascript som skulle slumpmässigt de fallande bladen.

Båda alternativen låter bra, men jag svänger mot den mer CSS-LED-vägen. Här är en annan fördel med att använda Codepen, jag kan snabbt gå och prova ett tillvägagångssätt. Om det visar sig att det är mer komplicerat än jag ursprungligen trodde, eller det känns inte rätt, kan jag prova ett annat tillvägagångssätt med lite bortkastad. Faktum är att det visade sig vara en bra idé! Jag tittar fortfarande på alternativ för detta - se projektet på GitHub för det slutliga resultatet.

Med trädnavigeringen nu sorterade jag tillbaka till mobilens första tillvägagångssätt, byggde upp navigeringen. Om du är bekant med SASS, har du mer än sannolikt stött på variabler. Men visste du variabler är nu tillgängliga i CSS? De har Ganska anständigt webbläsarstöd I Chrome, Edge, Safari och Samsung Internet också! Eftersom jag försöker hålla sig till grundläggande CSS och undvika behov av några extra beroenden, är det här bra nyheter. Så hur skulle vi genomföra detta? På toppen av stilbladet förklarar jag mina variabler:

: root {
  --Grey: #ccc;
  --RED: # FB0F0C;
  - Grid-storlek: 10px;
} 

Nu när de förklaras, kan jag ringa dem, så till exempel att sätta kroppens bakgrundsfärg skulle se ut så här:

 Body {
  Bakgrund: var (- grå);
} 

Med det här ett steg längre och för att hjälpa till med nätjustering, vitt utrymme, vertikal rytm, kan du ha märkt att jag också har definierat en gallerstorlek. Variabler fungerar extremt bra med Calc och det ser lite ut så här:

 // Standardvariabel som används, utgångar 10px.
Padding-top: var (- gallerstorlek);

// Lägga till CALC för att multiplicera den variabla enheten med 2, utgångar 20px.
Padding-Bottom: Calc (var (- gallerstorlek) * 2); 

Med mobilnavigeringsstilarna färdiga, låt oss ta itu med funktionaliteten för att gömma sig och visa den. För toggle-knappen ska vi applicera en etikettmärke, sedan i NAV-taggen lägger vi till en ingång:

& lt; header class = "header" & gt;
  & lt; h1 class = "header_title" & gt; band webbplats & lt; / h1 & gt;
  & lt; h2 class = "header_currentpage" & gt; Home & LT; / H2 & GT;
  & LT; Etikett för = "MOBILNAV_TOGGLE" CLASS = "MOBILNAV_TOGGLE" & GT; Växla & LT; / Etikett & GT;
& lt; / header & gt;

& lt; navklass = "Mobilenav" & GT;
  & lt; Input Type = "Checkbox" ID = "MOBILENAV_TOGGLE" ROLL = "Knapp" & GT;
  & lt; ul klass = "MobileNav_List" & GT;
    & LT; Li Class = "Mobilenav_Listitem" & GT; & LT; en klass = "MOBILENAV_LISTITIKEMLINK" HREF = "#" & GT; / LT; ​​/ A & GT; & LT; / Li & GT;
    & LT; Li Class = "Mobilenav_Listitem" & GT; & LT; en klass = "MOBILENAV_LISTITIKEMLINK" HREF = "#" & GT; / LT; ​​/ A & GT; & LT; / Li & GT;
    & LT; Li Class = "Mobilenav_Listitem" & GT; & LT; en klass = "MOBILENAV_LISTITIKEMLINK" HREF = "#" & GT; / LT; ​​/ Li & GT;
    & LT; Li Class = "Mobilenav_Listitem" & GT; & LT; en klass = "MOBILENAV_LISTITIKEMLINK" href = "#" & gt; news & lt; / a & gt; & lt; / li & gt;
    & LT; Li Class = "MobileNav_Listitem" & GT; & LT; en klass = "MobileNav_ListItEmlink" href = "#" & gt; / lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Med hjälp av följande CSS kan vi visa och dölja navigeringsmenyn; Eftersom vi vill ha etiketten i rubriken kan vi använda ~ aka tilde eller (u + 007e) så det fungerar, samtidigt som det inte lyckas av det första elementet.

 #mobilenav_toggle [Type = Checkbox] {
  Visa: Ingen;
}

#mobilenav_toggle [Typ = Checkbox]: Kontrollerad ~ .mobilenav_list {
  Visa: Block;
} 

Med mobilnavigering komplett är det dags att implementera vissa Responsiv webbdesign . Lägga till i huvudinnehållet för webbplatsen, sedan med hjälp av den svarande vyn i Chrome Developer-verktyg, kan jag öka visningsbredden tills jag känner att det finns tillräckligt med utrymme för att hålla trädnavigeringen tillräckligt. Detta slutar att vara på 600px, och för detta kan vi använda en mediafråga:

 .Treenav {
  Visa: Ingen;
}

@Media skärm och (min-bredd: 600px) {
  .Treenav {
    Visa: Block;
  }
} 

Nästan där! Slutligen för trädnavigeringen att sitta bredvid huvudområdet, ska jag använda Flexbox:

 .Container {
  Visa: Flex;
}

.Treenav {
  Visa: Ingen;
  Minbredd: 140px;
} 

Nu tar trädnavigeringen upp 100% höjd, med innehållet som gör detsamma och sitter till höger om det. Det betyder att oavsett hur länge innehållet blir, kommer det aldrig att flöda under trädnavigeringen. Om du vill veta mer om Flexbox skulle jag rekommendera att checka ut flexbox.io av den enda Wes Bos. Det finns mycket det kan göra!

Det är allt jag har tid för just nu, men det finns fortfarande gott om saker vi kan göra för att göra detta projekt ännu bättre. Om du har några frågor, eller gillade artikeln, se hej på Twitter eller genom min sida , eller skicka mig en Pull-förfrågan på GitHub!

Denna artikel publicerades ursprungligen i utgåva 304 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp utgåva 304 här eller prenumerera här .

Relaterade artiklar:

• 5 tips för super-snabb CSS
• Animera svg med javascript
• Förstå CSS-skärmens egendom