REMUILD A 2004 Flash -verkkosivusto 2018

Vuonna 1999 rakensin ensimmäisen verkkosivuston Web Studio 1.0: n avulla. Web Studio oli graafinen käyttöliittymä. Oli mahdollista luoda uusi aloitussivu ja vedä ja pudota elementtejä siihen. Sitten perustaa vapaan verkkotunnuksen ja hosting geocities ja voila! Minulla oli verkkosivusto. Nopea eteenpäin vuoteen 2004, halusin mennä pidemmälle ja niin, kuten monet muut, päätän rakentaa bändin verkkosivusto.

• 12 Yhteinen JavaScript-kysymykset vastasivat

Paljon on muuttunut sen jälkeen. Tässä artikkelissa aion ottaa matkan muistikannalla ja luodaan sama sivusto tänään.

Hanki tiedostot Tähän opetusohjelmaan.

Joten, aloitamme! Ensinnäkin, yleensä jokainen uusi projekti, joka alkaa MKD: llä, jota seuraa g init. Niille teistä, jotka tuntevat minut, jossakin vaiheessa olen luultavasti maininnut dotfiles sinulle. Dotfiles ovat tiedostoja, jotka alkavat vain pisteellä (se vei yllättävän kauan aikaa tehdä tämä yhteys!) Ja niitä voidaan käyttää useisiin tarkoituksiin. Kaksi suosikkini dotfiles ovat .Aliasas ja .functions. Anna minun kehittää ...

Bashissa on mahdollista luoda uusi hakemisto käyttäen komentoa Mkdiria, sen jälkeen sinun on vaihdettava hakemisto-CD-levyä juuri luomasi hakemistoon. Käyttämällä koodia minulla on minun .functions-tiedostossa, se on nyt mahdollista ajaa MKD. Tämä ei ainoastaan ​​luo uutta hakemistoa, mutta myös muuttunut myös kyseiseen hakemistoon. Tämä voi aluksi ylikuormitusta, mutta rakastan näitä mikro voittaa. Ajan myötä, varsinkin jos käytät näitä komentoja useita kertoja päivässä, he lisäävät pian paljon pelastettua aikaa.

 # Luo uusi hakemisto ja anna se
Toiminto MKD () {
    mkdir -p "$ @" & amp; & amp; CD "$ _";
} 

Seuraava komento, jos olet perehtynyt git, on yksinkertaisesti git init, jonka avulla voimme ohjata projektia. Käytän git paljon, jopa ostoslistoja varten! Niin pikemminkin kuin kirjoittamatta git joka kerta, lisäämällä alias g = "git" .Aliases jälleen on mukava, pieni aika säästäjä minulle.

Näinä päivinä on erilaisia ​​kehyksiä ja teknologioita. Tämän hankkeen osalta haluan pitää asiat yksinkertaisena. Aion käyttää HTML, CSS ja tarvittaessa JavaScriptin ripottele. Ensimmäinen, luodaan perus HTML-merkintä. Mutta odota! Lopeta ja ajattele hetken.

Joskus kehittäjät, itse mukaan lukien, voi olla super-innoissaan projektista ja haluat saada halkeilua välittömästi ja mennä suoraan näppäimistölle kirjoittamaan koodia. Minusta tämä ei kuitenkaan ole usein paras lähestymistapa. Rakastan saada yleiskatsaus projektin mielessä ensin. Tekemällä tämä ja paljon selkeämpi visio hankkeesta kokonaisuutena, minusta se mahdollistaa paljon paremman päätöksenteon. Esimerkiksi jos olen siirtynyt suoraan koodiin, voisin kohdata ongelman, jonka pitäisi sitten mennä takaisin ja refactor. Tällä lähestymistavalla on muutamia eri tuloksia. Ensinnäkin voi olla, että minun on poistettava koodi kokonaan ja aloittaa uudelleen; Toiseksi, jos tämä muoti jatkuu, voin päätyä "spagetti-koodiin", mikä vaikeuttaa tulevaisuudessa päivittää, debugoida ja johtaa suorituskyvyn menetykseen; Kolmanneksi, joskus se tekee kunnossa ja päädyt parempaan koodiin, mutta olisin taipumus sanoa, että ensimmäinen ja toinen tulos ovat paljon yleisempiä.

Tämä hanke on melko pieni; Siinä on muutamia sivuja: koti, uutiset, keikat, media, albumit, linkit ja yhteiset osat näistä sivuista: otsikko, navigointi, typografia sisältö, luettelot, kuvat, videot. Kun alun perin Flash-sivuston rakentaminen vuonna 2004, asiat olivat paljon yksinkertaisempia testauksen kannalta. Sivusto on rakennettu Flash, Flash-tietokoneessa työpöydän tietokoneella hiirellä ja näppäimistöllä. Nämä päivät, mobiili- ja tabletti Internetin käyttö on yleisempi kuin työpöydän tietokoneella, ja tämä suuntaus nousee edelleen.

Jotta tämä olisi parempi kokemus siitä, kuka katselee sivustoa, aion ottaa muutamia asioita huomioon projektin alussa ja käyttää mobiiliasiallista strategiaa. Tee niin, ja uudelleen, ennen kuin kirjoitat minkä tahansa koodin, aion päästä ulos hyvän vanhanaikainen kynä ja paperi. Ensinnäkin kirjoitan sivustokartan; Tällä hetkellä on joitain keskeisiä alueita, joita mielestäni voidaan parantaa. Esimerkiksi alkuperäinen sivusto koostui eri sivuilta jokaiselle bändin albumeille. Siihen aikaan, kun heillä oli kolme albumia ja sopivat niin kauniisti navigointiin. Nyt heillä on paljon enemmän ja mahdollisesti enemmän tulemaan, joten mielessäni ajattelen tapoja, joilla sivusto saattaa tulevaisuuden todiste (Oldie, mutta Goodie on Dan Cederholmin Bulletproof Web Design ).

Nyt minulla on karkea idea sivustokartan ja sivujen päänsä, seuraavaksi on luoda joitain pienikokoisia kantoja. Aikaisemman kokemuksen rakentaa monia reagoiva sivustoja, mobiili tulee mielenkiintoinen suunnittelun haasteita, eli miten luoda navigointi, mutta silti antaa ihmisille mahdollisuus tarkastella tärkeimpien sivuston sisältöä. Aion mennä yhdessä suunnittelun lopputuloksen kanssa, olemme kaikki kasvaneet rakkauteen / vihaan: Burger-valikon lähestymistapa. Aion kuitenkin lisätä hieman kierre. Alkuperäinen taideteos käytti lintuja, niin kuin tavallinen hampurilainen valikkokuvake, aion käyttää lintutyötä, joka aktivoi valikon ja avata ja sulkea siivet keinona ilmoittaa, onko valikko aktiivinen vai ei.

Mielestäni asiat alkavat nyt muokata, ja ajatus siitä, miten ihmiset voivat navigoida sivustolla. Aion nyt ajatella, miten sivut itse voivat näyttää. Aloittamalla kotisivulta se on melko yksinkertainen, typografia sisältö. Seuraavaksi uutiset - jälleen typografia sisältö, mahdollisesti kuvat ja sitten jonkinlainen navigointi vanhojen viestien katseluun. Gigs - luettelo tulevista keikoista, joissa on linkkejä lippujen ostamiseen. Medialle, joka katselee edelliseen sivustoon, minulla oli "kuvia" ja "videoita" kahdeksi eri osuudeksi, mutta täällä mielestäni on parannuksen tilaa ja konsolidoida "media". Albumit, ah, kyllä ​​albumit - nyt tämä tekee tällaista asiaa maksaa. Näet, albumeilla on typografia ja kuva ja tarvitsee jonkinlaista navigointia nähdäksesi vanhempia viestejä. Kuulostaa tutulta? Kuulostaa paljon kuin sama rakenne kuin uutissivu! Tämän huipputason yleiskatsaus voin katsoa ja ajatella asioita enemmän rakeisemmassa, komponentissa, jotkut voisivat jopa sanoa Atomic muotoilu Taso, jos olet perehtynyt Brad Frostin työhön.

Nyt minulla on käsitys siitä, miten sivusto toimii pienemmillä laitteilla ja uudelleenkäytettävissä elementeillä, on aika toistaa prosessi suuremmilla laitteilla. Kun sivusto on melko yksinkertainen, ja matkaviivoilla on jo luotu matkapuhelimelle, näen suuremmat laitteet melko samanlaiset - toisistaan ​​nyt meillä on ylimääräinen huone, joten voimme laajentaa sisältöalueita ja myös sivun navigointi.

Sivun navigointi on sivuston bitti, joka poikkeamasta olen eniten innoissaan. Inspiraation ottaminen bändin alkuperäisestä taideteoksesta, rakensin navigointi puun siluetin lehdet. Jokainen lehti oli painike, joka liittyy sivuston eri sivulle. Myös, kuten vieritetään ja leijuu pois lehdestä, lehti animoitiin, putosi maahan. Flash oli suuri tässä; Sitä kutsuttiin Tweeningiksi. Voit asettaa elementin yhdelle avainkehykseen aikajanalla olevassa käyttöliittymässä, luo toinen avainkehys kauempana aikajanalla ja lisää polku, jota haluat seurata. Ottaen asioita hieman pidemmälle, vaihtelee polkuja, kesto ja nopeus putoavien lehtien, päädyin jotain olin erittäin tyytyväinen.

Mutta nyt emme käytä Flashia, niin miten teemme tämän? Melko usein hypätä Codepeniin tai JS Biniin. Niille teistä, jotka eivät ole tietoisia, Codepen ja JS Bin ovat verkkopalveluja, joiden avulla voit nopeasti koodia ja tallentaa. Minulla on taipumus nähdä koodipainona enemmän muotoilua, ja JS Bin Lisää JavaScript keskittynyt. Tätä hanketta voin käyttää Codepenin luomaan puun navigointi muutamia syitä. Ensinnäkin haluan aloittaa sivuston tärkein mobiiliversion ja itse asiassa tekemällä tämän, jos asiat olisivat kriittisiä, voisin päätyä MVP: hen. Vaikka sivustolla on parannuksia, jotka voitaisiin lisätä lisäämällä Nizzan lehtien navigointi ja animaatio, tämä kestää kauemmin. Puun navigointiin tarkoitetun koodien toimivuus tarkoittaa sitä eristettyä pääkohdasta ja koodia. Jos asiat hankivat sen täyttämällä sen, voin säästää, missä olen, jatka pääpaikan rakentamista ja palaa sitten navigointiin. Joskus huoman, että menossa pois ongelmasta tai jopa nukkumassa, alitajunani voi ajatella sitä. Sitten palautetaan takaisin ongelmaan, ratkaisu esittelee itsensä.

SVGS! Rakastan SVGS: tä. Aikaisemmin Flashissa piirsin Leaf-varoista Illustratorissa. Hämmästyttävän minulla oli vielä toimiva CD-levy alkuperäisen taideteoksen kanssa ja pystyi avaamaan sen. Nykyään käytän luonnos ja se teki suuren työn avaamisesta tiedoston. Minulla on nyt lehtivarat kaikki valmiiksi viedään SVGS: ksi. Miksi SVGS? On paljon syitä. Jos haluaisimme käyttää JPG: tä tai GIF verkkokalvossa, meidän on myös toimittava suurempia varoja, muuten ne näyttävät hämärtyneeltä. Myös SVGS: n kanssa voimme käyttää CSS: ää. Tämä on hienoa ja antaa meille yksinkertaisesti muuttaa SVG: n värin käyttämällä hieman CSS: ää eikä luoda toisen kuvan omaisuuden. Tämä tarkoittaa sitä, että se on helpompi ylläpitää, ja bonuksena se on myös enemmän esittävä. Jos et tunne SVGS: n, suosittelen lukemista heille ja uskomaton työ hyvä ystäväni, Sara Soueidan .

Puun ja lehtien varat nyt paikallaan, lopullinen asia lisätä on animaatio. Muutamia lähestymistapoja voin ottaa tämän kanssa. Yksi olisi pysyä totta alkuperäiseen Flash Path Tweenin. Tämä merkitsisi replication reittiä ja käyttää SVG: tä ja sitten mahdollisesti edelleen SVG-työtä polkujen ja animatemotion kanssa. Olen aivan kuten tämä idea nostalgisesta näkökulmasta, mutta CSS on tullut paljon vuosien varrella, ja meillä on nyt muuttua ja kääntää käytettävissänne, joten tämä voisi olla toinen lähestymistapa. Ottaen asioita askeleen edelleen, voisimme jopa lisätä JavaScriptin, joka satunnaisisi putoavat lehdet.

Molemmat vaihtoehdot ovat hyviä, mutta olen heiluttamassa kohti CSS-LED-reittiä. Tässä on toinen hyöty Codepenin käyttämisestä, voin nopeasti mennä ja kokeilla yhden lähestymistavan. Jos käy ilmi, että se on monimutkaisempi kuin alunperin ajattelin, tai se ei tunne oikein, voin kokeilla toista lähestymistapaa vähän aikaa hukkaan. Itse asiassa tämä osoittautui hyväksi ajatukseksi! Tarkastelen vielä vaihtoehtoja tähän - katso GitHubin projekti lopputuloksesta.

Nyt lajitellaan puun navigointi, käänsin takaisin mobiililaitteeseen, joka rakensi navigointi. Jos olet perehtynyt Sass, olet todennäköisesti todennäköisesti kohdannut muuttujia. Mutta tunnet, että muuttujat ovat nyt saatavilla CSS: ssä? Heillä on melko kunnollinen selaintuki Chrome, Edge, Safari ja Samsung Internet samoin! Kun yritän pitää perus CSS ja välttää ylimääräisten riippuvuuksien tarve, tämä on hienoja uutisia. Joten miten toteutimme tämän? Tyylilevyn yläosassa julistan muuttujat:

: Root {
  --grey: #ccc;
  --Red: # fb0f0c;
  --grid-koko: 10px;
} 

Nyt kun he julistavat, voin soittaa heille, joten esimerkiksi kehon taustaväri näyttäisi näin:

 Body {
  Taustaa: var (- harmaa);
} 

Tämän askeleen lisääminen ja auttamaan ruudukko, valkoinen tila, pystysuora rytmi, olet ehkä huomannut, että olen myös määrittänyt verkkokoko muuttujan. Muuttujat toimivat erittäin hyvin laskettuna ja joka näyttää hieman tästä:

 // Vakiomuuttuja käytetään, lähdöt 10px.
Padding-top: var (- ruudukko);

// Listerin lisääminen muuttuvan yksikön kerrottamiseksi 2: llä, lähtöä 20px.
Padding-pohja: calc (var (- ruudukko) * 2); 

Kun mobiililaitteiden tyylit ovat valmiita, selkeää toiminnallisuutta piilossa ja näyttämiseksi. Vaihtopainikkeelle käytämme etikettitunnistetta, sitten NAV-tunnisteessa lisätään tulo:

& lt; otsikkoluokka = "otsikko" & gt;
  & lt; h1 class = "Header_Title" & gt; bändi verkkosivusto & lt; / h1 & gt;
  & lt; h2 class = "Header_currentPage" & gt; koti & lt; / h2 & gt;
  & lt; etiketti = "mobilenav_toggle" class = "mobilenav_toggle" & gt; toggle & lt; / etiketti & gt;
& lt; / otsikko & gt;

& lt; navl class = "mobilenav" & gt;
  & lt; Input Type = "Valintaruutu" ID = "mobilenav_toggle" rooli = "painike" & gt;
  & lt; ul class = "mobilenav_list" & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; class = "mobilenav_listitemlink" href = "#" & gt; koti & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; noin & lt; / a & gt;
    & lt; li class = "mobilenav_listitem" & gt; a class = "mobilenav_listitemlink" href = "#" & gt; Portfolio & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listitem" & gt; a class = "mobilenav_listitemlink" href = "#" & gt; uutiset & lt; / a & gt;
    & lt; li class = "mobilenav_listitem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; yhteystieto & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Käyttämällä seuraavia CSS: ää voimme näyttää ja piilottaa navigointivalikon; Koska haluamme etiketin otsikossa, voimme käyttää ~ eli tilde tai (U + 007e), joten se toimii, kun ensimmäisessä elementillä ei ole välittömästi.

 #mobilenav_toggle [tyyppi = valintaruutu] {
  Näyttö: Ei mitään;
}

#mobilenav_toggle [tyyppi = valintaruutu]: tarkistettu ~ .mobilenav_list {
  Näyttö: Block;
} 

Kun mobiililaite on valmis, on aika toteuttaa joitakin Vastaava web-suunnittelu . Sivuston pääasiallisen sisällön lisääminen ja sitten reagoiva näkymä Chrome Developer Tools, voin lisätä näkymän leveyttä, kunnes tunnen riittävästi tilaa riittävästi puun navigointiin riittävästi. Tämä päätyy 600px: n ja tämän vuoksi voimme käyttää mediakyselyä:

 .treenav {
  Näyttö: Ei mitään;
}

@Media-näyttö ja (min-leveys: 600px) {
  .treenav {
    Näyttö: Block;
  }
} 

Melkein siellä! Lopuksi puun navigointia istua pääasiallisen sisällön alueen vieressä, aion käyttää Flexboxia:

 .container {
  Näyttö: Flex;
}

.treenav {
  Näyttö: Ei mitään;
  Min-leveys: 140px;
} 

Nyt puun navigointi vie 100% korkeuden, jonka sisältö tekee saman ja istuu sen oikeaan. Tämä tarkoittaa sitä, että riippumatta siitä, kuinka kauan sisältö tulee, se ei koskaan virtaa puun navigointia. Jos haluat tietää lisää Flexboxista, suosittelen tarkistaa flexbox.io yksi ja ainoa WES VSP. On paljon se voi tehdä!

Siinä kaikessa minulla on aikaa tällä hetkellä, mutta meillä on vielä paljon asioita, joita voisimme tehdä tämän projektin vielä paremmin. Jos sinulla on kysyttävää tai piti artikkelista, ota hello Twitterissä tai sivuni , tai lähetä minulle vetopyyntö GitHub!

Tämä artikkeli julkaistiin alun perin kohdassa 304 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 304 täältä tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

• 5 Vihjeitä Super-Fast CSS: lle
• Animate SVG JavaScript
• CSS: n näytön ominaisuus