Rebuild A 2004 Flash-website voor 2018

In 1999 bouwde ik mijn eerste website met behulp van Web Studio 1.0. Webstudio was een grafische gebruikersinterface. Het was mogelijk om een ​​nieuwe te maken bestemmingspagina en sleep het elementen erin. Ik heb vervolgens een gratis domein en hosting opgezet met geocities en voila! Ik had een website. Snel vooruit naar 2004 wilde ik verder gaan en dus, net als vele anderen, ging ik naar een bandwebsite.

• 12 Common JavaScript-vragen beantwoord

Veel is sindsdien veranderd. In dit artikel ga ik een trip-down Memory Lane nemen en vandaag dezelfde site voor het web recreëren.

Download de bestanden voor deze tutorial.

Dus laten we beginnen! Ten eerste begint, over het algemeen elk nieuw project voor mij met MKD gevolgd door G init. Voor degenen onder u die mij kennen, heb ik op een gegeven moment de dotfiles jegens u genoemd. DotFiles zijn bestanden die gewoon beginnen met een punt (het kostte me een verrassend lange tijd om die verbinding daadwerkelijk te maken!) En ze kunnen voor een aantal doeleinden worden gebruikt. Twee van mijn favoriete dotfiles zijn .aliasas en .functions. Laat me uitgebreid ...

In Bash is het mogelijk om een ​​nieuwe map te maken met behulp van de opdracht MKDIR en daarna moet u de map-cd in de map wijzigen die u zojuist hebt gemaakt. Met behulp van de code die ik in mijn .functions-bestand heb, is het nu mogelijk om MKD te draaien. Dit maakt niet alleen de nieuwe map, maar is ook ook veranderd in die map. Dit lijkt in het begin overkill, maar ik hou van deze micro-overwinningen. In de loop van de tijd, vooral als deze opdrachten meerdere keren per dag uitvoeren, tellen ze al snel aan met veel opgeslagen tijd.

 # Maak een nieuwe map en voer het in
Functie MKD () {
    MKDIR -P "$ @" & AMP; & AMP; CD "$ _";
} 

De volgende opdracht, als u bekend bent met Git, is gewoon Git Init, die ons in staat zal stellen om het project te besturen. Ik gebruik Git veel, zelfs voor boodschappenlijsten! Dus in plaats van elke keer op Git te moeten typen, is het toevoegen van alias g = "git" aan .aliasses opnieuw een leuke, kleine tijd spaarder voor mij.

Tegenwoordig is er een overvloed aan verschillende kaders en technologieën. Voor dit project wil ik dingen eenvoudig houden. Ik ga HTML, CSS gebruiken en indien nodig een strooi van JavaScript. Laten we eerst de standaard HTML-markering maken. Maar wacht! Laten we stoppen en na een minuut denken.

Soms kunnen ontwikkelaars, zelf inbegrepen, super-enthousiast zijn over een project en willen onmiddellijk kraken en rechtdoor gaan voor het toetsenbord om code te schrijven. Ik vind echter dat dit vaak niet de beste aanpak is. Ik ben dol op een overzicht in gedachten van het project eerst. Door dit te doen en een veel duidelijkere visie van het project als geheel te hebben, vind ik dat het veel betere besluitvorming mogelijk maakt. Als ik bijvoorbeeld rechtstreeks in de code gedoken, zou ik een kwestie kunnen tegenkomen die ik toen moet teruggaan en refactor. Er zijn een paar verschillende uitkomsten met deze aanpak. Ten eerste kan het zijn dat ik de code volledig moet verwijderen en opnieuw start; Ten tweede, als ik op deze manier doorgaat, kan ik eindigen met 'spaghetti-code' die het in de toekomst moeilijk maken om bij te werken, debuggen en resulteren in prestatieverlies; Ten derde werkt het soms goed en eindigt je met betere code, maar ik zou de neiging hebben om te zeggen dat de eerste en tweede uitkomsten veel vaker zijn.

Dit project is vrij klein; Het heeft een paar pagina's: Home, Nieuws, Gigs, Media, Albums, Links en Common Onderdelen tussen deze pagina's: Header, Navigatie, Typografie Inhoud, Lijsten, Afbeeldingen, Video's. Wanneer u in 2004 oorspronkelijk de Flash-site bouwt, waren de dingen veel eenvoudiger in termen van testen. De site is ingebouwd in Flash, voor Flash op een desktopcomputer met een muis en een toetsenbord. Tegenwoordig komt mobiel en tablet-internetgebruik vaker voor dan op een desktopcomputer, en deze trend blijft stijgen.

Om dit een betere ervaring te maken voor wie de site biedt, ga ik aan het begin van het project een paar dingen in rekening brengen en een mobiele eerste strategie gebruiken. Om dit te doen, en nogmaals, voordat ik een code schrijf, ga ik een goede ouderwetse pen en papier uit. Ten eerste schrijf ik de sitemap uit; Daarbij zijn er enkele belangrijke gebieden die ik denk dat kan worden verbeterd. Mijn originele site bestond bijvoorbeeld uit verschillende pagina's voor elk van de albums van de band. Op het moment dat ze drie albums hadden en zo mooi in de navigatie passen. Nu hebben ze veel meer en potentieel meer om te komen, dus ik denk al in mijn gedachten over manieren om de site meer toekomstig bewijs te maken (een oudie, maar een goodie is Dan Cederholm's Bulletproof Web Design ​

Nu heb ik een ruw idee in mijn hoofd van de sitemap en pagina's, het volgende is om een ​​aantal low-fi draadframes te maken. Van eerdere ervaringen die vele responsieve sites bouwen, wordt mobiel geleverd met interessante ontwerpuitdagingen, namelijk hoe een navigatie te maken, maar stelt mensen nog steeds in staat om de hoofdinhoud van de site te bekijken. Ik ga meegaan met het designuitkomst dat we allemaal zijn gegroeid om lief te hebben / haten: de hamburgermenu-aanpak. Ik ga echter een kleine draai toevoegen. De oorspronkelijke kunstwerk gebruikte vogels, dus in plaats van het standaard Burger-menu-pictogram, ga ik vogel-illustraties gebruiken die het menu activeren en de vleugels openen en sluiten als een manier om aan te geven of het menu actief is of niet.

Dingen in mijn gedachten beginnen nu vorm te krijgen, met een idee van hoe mensen rond de site kunnen navigeren. Ik ga nu nadenken over hoe de pagina's zelf kunnen kijken. Beginnend met de startpagina is het vrij eenvoudig, met typografie-inhoud. VOLGENDE NIEUWS - Typografie-inhoud, potentieel afbeeldingen en vervolgens een soort navigatie om oudere berichten te bekijken. Gigs - een lijst met aankomende optredens met links om tickets te kopen. Voor media, terugkijkend op de vorige site, had ik 'afbeeldingen' en 'video's' als twee verschillende secties, maar hier denk ik dat er ruimte is voor verbetering en om als 'media' te consolideren. Albums, ah, ja albums - nu is dit waar dit soort dingen uitziet. Zie je, de pagina Albums heeft typografie en een afbeelding en heeft een soort navigatie nodig om oudere berichten te bekijken. Klinkt bekend? Klinkt veel op dezelfde structuur als de nieuwspagina! Met dit topniveau-overzicht kan ik dingen bekijken en denken over een meer korrelig, component, sommige kunnen zelfs zeggen atoomontwerp Niveau, als je bekend bent met het werk van Brad Frost.

Nu heb ik een idee van hoe de site gaat werken aan kleinere apparaten en herbruikbare elementen, het is tijd om het proces met grotere apparaten te herhalen. Omdat de site vrij eenvoudig is, en met de Wireframes die al voor mobiel is gemaakt, zie ik dat de grotere apparaten vrij gelijkaardig zijn - behalve nu hebben we wat extra kamer, zodat we de inhoudsgebieden kunnen verruimen en ook een zijvaartnavigatie omvatten.

De zijvaart is het bit van de site dat van de offset waar ik het meest enthousiast over ben. Inhulling van de originele kunstwerken van de band bouwde ik de navigatie als een boomsilhouet met bladeren. Elk blad was een knop die gekoppeld is aan een andere pagina van de site. Ook, terwijl je naar binnen scrolde en zweefde van het blad, zou het blad animeren, op de grond vallen. Flash was geweldig in dit; Het heette tweening. U kunt een element in één keyframe in de interface op de tijdlijn instellen, een ander keyframe verder langs de tijdlijn maken en een pad toevoegen voor het volgende element. Dingen een beetje verder nemen, variëren van de paden, duur en snelheid van de vallende bladeren, ik eindigde met iets waar ik erg tevreden mee was.

Maar nu gebruiken we geen flash, dus hoe doen we dit? Heel vaak spring ik naar Codepen of JS Bin. Voor degenen onder u die niet op de hoogte zijn, zijn COCEEPEN en JS-bin online services waarmee u snel codeert en opslaan. Ik heb de neiging om Codepen te zien als meer ontwerp-LED, en JS Bin meer JavaScript gericht. Voor dit project zal ik COCEIPEN gebruiken om de boomnavigatie om een ​​paar redenen te maken. Ten eerste wil ik beginnen met het opbouwen van de belangrijkste mobiele versie van de site, en in feite door dit te doen, als dingen tijd kritisch waren, zou ik kunnen eindigen met een MVP. Hoewel er verbeteringen zijn aan de site die kan worden gemaakt door de Nice Leaf-navigatie en -animatie toe te voegen, duurt dit langer om te produceren. Een voordeel van het werken in Codepen voor de boomnavigatie betekent dat het wordt geïsoleerd van de hoofdsite- en codebasis. Als dingen lastig worden met het voltooien ervan, kan ik redden waar ik bij ben, ga door met de hoofdsite-build en kom dan terug naar de navigatie. Soms vind ik dat in het weggaan van een probleem, of zelfs erop slapen, mijn onderbewustzijn kan erover voortduren. Dan bij terugkeer naar het probleem, presenteert een oplossing zichzelf.

Svgs! Ik hou van Svgs. Eerder in Flash trok ik het bladactiva in Illustrator. Verbazingwekkend genoeg had ik nog steeds een werkende CD met het originele kunstwerk en kon het openen. Tegenwoordig gebruik ik Sketch en deed het geweldig om het bestand te openen. Ik heb nu het bladactiva klaar om als SVGS te worden geëxporteerd. Waarom svgs? Er zijn veel redenen. Als we een JPG zouden gebruiken, of GIF op een Retina-apparaat, moeten we ook grotere activa leveren, anders zien ze er wazig uit. Ook, met SVGS, kunnen we CSS gebruiken. Dit is geweldig en laat ons eenvoudig de kleur van de SVG veranderen met een beetje CSS in plaats van een ander beeldwinst te maken. Dit betekent dat het gemakkelijker is om te onderhouden, en als een bonus is het ook meer performant. Als je niet bekend bent met SVGS, zou ik het ten zeerste aanbevelen om ze op te lezen en het ongelooflijke werk van mijn goede vriend, Sara Soueidan ​

Met de Tree- en Leaf-activa is nu op zijn plaats, het laatste ding om toe te voegen is de animatie. Er zijn een paar benaderingen die ik hiermee kon nemen. Men zou zijn om trouw te blijven aan het originele Flash Path Tween dat ik deed. Dit zou betekenen dat het repliceert de paden en het gebruik van SVG en dan potentieel verder SVG werkt met paden en animatemotie. Ik vind dit idee van een nostalgisch oogpunt, maar CSS is door de jaren heen op veel gekomen en we hebben nu transformatie en vertalen tot onze beschikking, dus dit kan een andere aanpak zijn. Het nemen van dingen een stap verder, we konden zelfs een javascript toevoegen die de vallende bladeren willekeurig zijn.

Beide opties klinken goed, maar ik zwaai naar de meer CSS-LED-route. Hier is een ander voordeel van het gebruik van Codepen, ik kan snel gaan en één aanpak uitproberen. Als het blijkt dat het ingewikkelder is dan ik oorspronkelijk dacht, of het niet goed voelt, kan ik een andere aanpak proberen met weinig tijd verspild. In feite bleek dit een geweldig idee! Ik kijk nog steeds naar opties voor dit - raadpleeg het project op GitHub voor het eindresultaat.

Met de Nu Sorted Tree Navigation, keerde ik terug naar de Mobile First-aanpak en bouwde ik de navigatie op. Als je bekend bent met Sass, heb je meer dan waarschijnlijk variabelen ondervonden. Maar wist u dat variabelen nu beschikbaar zijn in CSS? Zij hebben Mooie fatsoenlijke browserondersteuning In Chrome, Edge, Safari en Samsung Internet ook! Als ik probeer te houden aan de basis CSS en vermijd de behoefte aan extra afhankelijkheden, dit is geweldig nieuws. Dus hoe zouden we dit implementeren? Aan de bovenkant van het stijlblad verklaar ik mijn variabelen:

: Root {
  --Grijs: #CCC;
  --red: # fb0f0c;
  --Grid-formaat: 10px;
} 

Nu ze worden verklaard, kan ik ze noemen, dus bijvoorbeeld het instellen van de achtergrondkleur van het lichaam zou er als volgt uitzien:

 lichaam {
  Achtergrond: var (- grijs);
} 

Als u dit een stap verder neemt en om te helpen met rasteruitlijning, witte ruimte, verticaal ritme, heeft u mogelijk gemerkt dat ik ook een rastergrootte variabele heeft gedefinieerd. Variabelen werken buitengewoon goed met Calc en dat ziet er een beetje zo uit:

 // Standaardvariabele wordt gebruikt, voert 10px uit.
PADING-TOP: VAR (- RAD-SIZE);

// calber toevoegen om de variabele eenheid met 2 te vermenigvuldigen, voert 20px uit.
PADING-bodem: CALP (VAR (- GROOTTE) * 2); 

Met de mobiele navigatieglijsten compleet, laten we de functionaliteit aanpakken om hem te verbergen en te laten zien. Voor de knop Toggle passen we een label-tag toe, vervolgens in de NAV-tag zullen we een invoer toevoegen:

& LT; Header-klasse = "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 voor = "Mobilenav_toggle" Class = "Mobilenav_toggle" & GT; Toggle & LT; / Label & GT;
& LT; / Header & GT;

& LT; NAV-klasse = "MOBILENAV" & GT;
  & lt; invoer type = "selectievakje" ID = "MOBILENAV_Toggle" rol = "knop" & GT;
  & LT; UL-klasse = "MOBILENAV_LIST" & GT;
    & LT; LI CLASS = "MOBILENAV_LISTMITEM" & GT; & LT; een klasse = "MOBILENAV_LISTMLINK" HREF = "#" & GT; HOME & LT; / A & GT; & LT; / LI & GT;
    & LT; LI-klasse = "MOBILENAV_LISTMITEM" & GT; & LT; een klasse = "MOBILENAV_LISTMLINK" HREF = "#" & GT; OVER & LT; / A & GT; & LT; / LI & GT;
    & LT; LI-klasse = "Mobilenav_Listitem" & GT; & LT; een klasse = "Mobilenav_ListInlink" Href = "#" & GT; Portfolio & LT; / A & GT; & LT; / LI & GT;
    & LT; LI-klasse = "MOBILENAV_LISTMITEM" & GT; & LT; een klasse = "Mobilenav_listitemlink" Href = "#" & GT; Nieuws & LT; / A & GT; & LT; / LI & GT;
    & LT; LI-klasse = "MOBILENAV_LISTMITEM" & GT; & LT; een klasse = "MOBILENAV_LISTMLINK" HREF = "#" & GT; CONTACT & LT; / A & GT; & LT; / LI & GT;
  & LT; / UL & GT;
& LT; / NAV & GT; 

Met behulp van de volgende CSS kunnen we het navigatiemenu tonen en verbergen; Omdat we het label in de kop willen, kunnen we ~ aka tilde of (U + 007E) gebruiken, dus het werkt terwijl het niet onmiddellijk is geslaagd door het eerste element.

 #Mobilenav_toggle [Type = Checkbox] {
  Geen weergeven;
​

#Mobilenav_toggle [Type = Checkbox]: CONTROLEERD ~ MOBILENAV_LIST {
  Weergave: blok;
} 

Met de mobiele navigatie voltooid, is het tijd om wat te implementeren Responsive Web Design ​Toevoegen aan de hoofdinhoud voor de site, dan met behulp van de responsieve weergave in Chrome-ontwikkelaarstools, kan ik de viewportbreedte verhogen totdat ik het gevoel heb dat er voldoende ruimte is om de boomnavigatie adequaat vast te houden. Dit is terecht bij 600 px, en hiervoor kunnen we een mediacy-query gebruiken:

 .TREENAV {
  Geen weergeven;
​

@media-scherm en (min-breedte: 600px) {
  .treenav {
    Weergave: blok;
  ​
} 

Bijna daar! Eindelijk voor de boomnavigatie om naast het hoofdinhoudsgebied te zitten, ga ik gebruik maken van Flexbox:

 .Container {
  Display: Flex;
​

.treenav {
  Geen weergeven;
  min-breedte: 140px;
} 

Nu neemt de boomnavigatie 100% hoogte in, met de inhoud die hetzelfde doet en aan de rechterkant zit. Dit betekent dat het niet uitmaakt hoe lang de inhoud wordt, het nooit onder de boomnavigatie zal stromen. Als je meer wilt weten over FlexBox, zou ik aanraden om uit te zoeken flexbox.io door degene en alleen Wes Bos. Er is veel het kan doen!

Dat is alles waar ik op tijd voor heb, maar er zijn nog steeds genoeg dingen die we konden doen om dit project nog beter te maken. Als u vragen heeft, of het artikel leuk vond, zeg alsjeblieft hallo op Twitter of door mijn website , of stuur me een pull-aanvraag op GitHub!

Dit artikel is oorspronkelijk gepubliceerd in kwestie 304 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop nummer 304 hier of Abonneer hier ​

Gerelateerde artikelen:

• 5 tips voor supersnelle CSS
• Animate SVG met JavaScript
• Informatie over het CSS-scherm onroerend goed