Rebuild A 2004 Flash Webové stránky pro rok 2018

V roce 1999 jsem postavil své první webové stránky pomocí webového studia 1.0. Web Studio bylo grafické uživatelské rozhraní. Bylo možné vytvořit nový přistávací stránka a přetáhněte do něj prvky. Pak jsem nastavil volnou doménu a hostování s Geocity a voila! Měl jsem webové stránky. Rychle dopředu na rok 2004, chtěl jsem jít dál a tak, stejně jako mnoho dalších, jsem vyrazil vybudovat webové stránky kapely.

• 12 Odpovězené otázky běžného JavaScriptu

Od té doby se hodně změnilo. V tomto článku budu mít výletní paměťový pruh a znovu vytvořit stejné místo pro web dnes.

Získejte soubory pro tento tutoriál.

Začněme! Za prvé, obecně každý nový projekt pro mě začíná MKD následovaný G INIT. Pro ty z vás, kteří mě zná, v určitém okamžiku jsem vám pravděpodobně zmínil Dotfiles. Dotfiles jsou soubory, které prostě začínají s tečkou (to mi trvalo překvapivě dlouho, než to, že toto spojení!) A mohou být použity pro řadu účelů. Dva z mých nejoblíbenějších dotfiles jsou .aliasas a .Functions. Dovolte mi vypracovat ...

V Bash, je možné vytvořit nový adresář pomocí příkazu Mkdir pak poté, co budete muset změnit CD adresář do adresáře, který jste právě vytvořili. Pomocí kódu mám v souboru mého .Functions, je nyní možné spustit MKD. To nejenže vytvoří nový adresář, ale také se změnil do tohoto adresáře. To se může zdát přehnané zpočátku, ale miluji tyto mikro vyhrát. Postupem času, zejména pokud běží tyto příkazy několikrát denně, brzy přidají do spousty uloženého času.

 # Vytvořte nový adresář a zadejte jej
Funkce MKD () {
    mkdir -p "$ @" & amp; CD "$ _";
} 

Dalším příkazem, pokud jste obeznámeni s Git, je prostě git init, který nám umožní verzi ovládat projekt. Používám git hodně, dokonce i pro nákupy! Takže spíše než muset pokaždé napsat git, přidání alias g = "git" do .aliases znovu je pěkný, malý časový spořič pro mě.

V těchto dnech je zde pleť různých rámců a technologií. Pro tento projekt chci udržet věci jednoduché. Použiji HTML, CSS a v případě potřeby posypeme JavaScript. První nahoru, pojďme vytvořit základní html markup. Ale počkej! Zastavujme se a myslím na minutu.

Někdy vývojáři, v ceně, může být super-vzrušený o projektu a chtít okamžitě prasknout a jít rovnou pro klávesnici napsat kód. Zjistil jsem však, že to často není nejlepší přístup. Nejprve rád získáte přehled o projektu. Tímto způsobem a mít mnohem jasnější vize projektu jako celku, to umožňuje mnohem lepší rozhodování. Například, pokud jsem se ponořil přímo do kódu, mohu se setkat s problémem, který bych se musel vrátit a refactor. Tam je několik různých výsledků s tímto přístupem. Za prvé, to by mohlo být, že musím kód odstranit úplně a začít znovu; Za druhé, pokud pokračujete v této módě, mohu skončit s "spaghetti kódem", což je v budoucnu obtížné aktualizovat, ladění a výsledkem ztráty výkonnosti; Za třetí, někdy to funguje dobře a skončíte s lepším kódem, ale mám tendenci říkat první a druhé výsledky jsou mnohem běžnější.

Tento projekt je poměrně malý; Má několik stran: domů, zprávy, koncerty, média, alba, odkazy a běžné díly mezi těmito stránkami: záhlaví, navigace, typografie, seznamy, obrázky, videa. Když původně budování flash web v roce 2004, věci byly mnohem jednoduché, pokud jde o testování. Místo bylo vestavěné v blesku, pro blesk na stolním počítači s myší a klávesnicí. Tyto dny, mobilní a tabletové internetové použití je častější než na stolním počítači, a tento trend pokračuje v růstu.

Aby bylo dosaženo lepšího zážitku pro ten, kdo vidí místo, budu mít na začátku projektu několik věcí a používat mobilní první strategii. Abych to udělal, a znovu, před psaní nějakého kódu se dostanu ven z dobré staromódní pero a papír. Za prvé, napíšu Sitemap; Tímto způsobem jsou některé klíčové oblasti, které si myslím, že lze zlepšit. Moje původní stránky se například skládaly z různých stránek pro každou z alb kapely. V době, kdy měli tři alba a tak pěkně zapadají do navigace. Teď mají mnohem více a potenciálně více přijít, takže už v mé mysli přemýšlím o způsobech, jak dělat stránky budoucí důkaz (oldie, ale Goodie je Dan Cederholm Bulletproof designu ).

Teď mám hrubý nápad v hlavě Sitemapu a stránek, dalším je vytvořit některé nízkofi drátěry. Od předchozích zkušeností s výstavbou mnoha citlivých stránek, mobilní pochází se zajímavými výzvami designu, a to, jak vytvořit navigaci, ale stále umožňuje lidem zobrazit hlavní obsah stránky. Jdu spolu s výsledkem designu, které jsme všichni pěstovali k lásce / nenávisti: přístup burger menu. Nicméně, přidám trochu twist. Originální umělecká díla používají ptáky, tak spíše než standardní ikona menu burger, budu používat kresbu ptáků, která aktivuje menu a otevírají se a zavře jeho křídla jako způsob, jak indikovat, zda je menu aktivní nebo ne.

Věci v mé mysli se nyní začínají formovat, s myšlenkou toho, jak budou lidé moci navigovat kolem webu. Teď přemýšlím o tom, jak se samotné stránky mohou vypadat. Počínaje domovskou stránkou je to poměrně jednoduché, s obsahem typografie. Dále novinky - Opět typografie obsah, potenciálně obrazy a pak nějaký druh navigace zobrazit starší příspěvky. Gigs - seznam nadcházejících koncertů s odkazy na nákup vstupenek. Pro média, ohlédnutí na předchozí stránku jsem měl "obrazy" a "videa" jako dva různé sekce, ale tady si myslím, že je zde prostor pro zlepšení a konsolidovat jako "média". Alba, Ah, Ano Albums - Teď je to místo, kde to dělá tento druh věci vyplatí. Vidíte, alba strana má typografii a obraz a bude potřebovat nějaký druh navigace pro zobrazení starších příspěvků. Zní povědomě? Zní to hodně jako stejná struktura jako novinová stránka! Mít tento přehled nejvyšší úrovně se můžu podívat na a myslet na věci na granulovanější, komponentu, někteří mohli dokonce říci atomový design úroveň, pokud jste obeznámeni s prací Brad Frost.

Teď mám představu o tom, jak bude web pracovat na menších zařízeních a opakovaně použitelných prvcích, je čas opakovat proces s většími zařízeními. Vzhledem k tomu, že místo je poměrně jednoduchý, a s již vytvořenými dráty, které jsou již vytvořeny pro mobilní, vidím větší zařízení, která jsou poměrně podobná - kromě teď máme nějakou místnost, takže můžeme rozšířit obsahové oblasti a také zahrnovat boční navigaci.

Boční navigace je trochu místa, které z posunu, jsem nadšený. Přijímání inspirace z původní kresby kapely, postavil jsem navigaci jako silueta stromu s listy. Každý list byl tlačítko, které je spojeno s jinou stránkou webu. Také, jak jste se posouvali a vznášel se od listu, list by animoval, pádu na zem. Flash byl na tom skvělý; To bylo nazýváno Tweening. Můžete nastavit prvek na jednom klíčovém snímku v rozhraní na časové ose, vytvořit další klíčový snímek podél časové osy a přidat cestu pro prvek, který chcete sledovat. Vzal věci o něco dále, mění se cesty, trvání a rychlost padající listí, skončil jsem s něčím, co jsem byl velmi spokojen.

Ale teď nepoužíváme blesk, takže jak to děláme? Docela často skákám na Codepen nebo JS Bin. Pro ty z vás, kteří nejsou vědomi, Codepen a JS Bin jsou online služby, které vám umožní rychle kódovat a ušetřit. Mám tendenci vidět Codepen jako více designu LED a JS Bin více JavaScript zaměřen. Pro tento projekt budu používat Codepen, abych vytvořil navigaci stromu na několik důvodů. Za prvé, chci začít budovat hlavní mobilní verzi stránek, a ve skutečnosti tím, že to děláte, kdyby to bylo časově kritické, mohu skončit s MVP. I když existují vylepšení místa, která by mohla být provedena přidáním pěkné navigace a animace, to bude trvat déle. Výhodou práce v kodepenu pro navigaci stromu znamená, že je izolován z hlavní stránky a základní základny. Pokud se věci dostanou s dokončením, jsem schopen zachránit tam, kde jsem na, pokračujte s hlavními stránkami stavět, a pak se vrátit k navigaci. Někdy to zjistím, že v odchodu z problému, nebo dokonce spát na tom, moje podvědomí může pokračovat v přemýšlení o tom. Pak se při návratu do problému, řešení představuje řešení.

Svgs! Miluji SVGS. Dříve v blesku jsem vypracoval majetek listů v aplikaci Illustrator. Překvapivě jsem stále měl pracovní CD s původními kresbou a byl schopen ho otevřít. Tyto dny používám skica a to udělal skvělou práci otevření souboru. Teď mám aktiva listu, která je připravena být exportována jako SVGS. Proč SVGS? Existuje mnoho důvodů. Kdybychom měli používat JPG nebo GIF na zařízení sítnice, musíme také dodávat větší aktiva, jinak by vypadali rozmazané. Také se SVGS můžeme použít CSS. To je skvělé a umožňuje nám jednoduše změnit barvu SVG s použitím trochu CSS, spíše než musí vytvořit další image aktiva. To znamená, že je snazší udržet, a jako bonus je to také více performantu. Pokud nejste obeznámeni se SVGS, doporučuji pro ně přečíst a neuvěřitelnou práci z mého dobrého přítele, Sara Soueidan. .

S stromem a listovým aktivem je nyní na místě, poslední věc přidat je animace. Existuje několik přístupů, které bych s tím mohl vzít. Člověk by bylo zůstat věrný původní flash cestu Tween, který jsem udělal. To by znamenalo replikující cesty a používat SVG a pak potenciálně další SVG práce s cestami a animatemotionem. Stejně jako tato myšlenka z nostalgického hlediska, ale CSS přišel hodně v průběhu let a nyní se máme transformovat a překládat k dispozici, takže by to mohlo být další přístup. Přijmout věci o krok dále, mohli bychom dokonce přidat nějaký JavaScript, který by náhodně pomohl padající listy.

Obě možnosti zvuk dobře, ale kymácející se k další trase LED CSS. Zde je další výhoda použití Codepen, můžu rychle jít a vyzkoušet jeden přístup. Pokud se ukázalo, že je to složitější, než jsem si původně pomyslel, nebo se necítí dobře, můžu vyzkoušet jiný přístup s malým časem. Ve skutečnosti to ukázalo být skvělý nápad! Stále se dívám na možnosti pro tento účel - viz projekt GitHub pro konečný výsledek.

S strom navigace nyní seřazoval, otočil jsem se zpět do mobilního prvního přístupu, budování navigace. Pokud jste obeznámeni s Sass, jste více než pravděpodobně setkávali s proměnnými. Věděli jste, že proměnné jsou nyní k dispozici v CSS? Oni mají Docela slušná podpora prohlížeče V Chrome, Edge, Safari a Samsung Internet také! Když se snažím udržet základní CSS a vyhnout se potřebě pro všechny další závislosti, to je skvělá zpráva. Tak jak bychom to realizovali? V horní části stylu deklaruji své proměnné:

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

Teď, když jsou prohláseni, mohu jim zavolat, takže například nastavení barvy pozadí těla bude vypadat takto:

 Tělo {
  Pozadí: var (šedý);
} 

Přijetí tohoto kroku dále a pomoci s vyrovnáním sítí, bílým prostorem, vertikálním rytmem, možná si všiml, že jsem také definoval proměnnou velikosti mřížky. Proměnné fungují extrémně dobře s Calc a to vypadá trochu něco takového:

 // standardní proměnná používaná, výstupy 10px.
Padding-top: var (- velikost mřížky);

// Přidání Calc na vynásobení proměnné jednotky 2, výstupy 20px.
Polstrování-dno: Calc (var (- velikost mřížky) * 2); 

S mobilními navigačními styly kompletní, pojďme řešit funkčnost pro skrytí a zobrazení. Pro přepínání použijeme značku štítku, pak v značce NAV přidáme vstup:

& lt; třída záhlaví = "záhlaví" & gt;
  & lt, h1 třída = "header_title" & gt; pásma webové stránky & lt; / h1 & gt;
  & lt; h2 třída = "header_currentPage" & gt; home & lt; / h2 & gt;
  & lt, label pro = "mobilenav_toggle" třída = "mobilenav_toggle" & gt; přepínání & lt; / label & gt;
& lt; / záhlaví & gt;

Třída Nav = "Mobilenav" & gt;
  & lt, vstup typu = "zaškrtávací políčko" id = "mobileenav_toggle" role = "tlačítko" & gt;
  & lt; ul třídy = "mobilenav_list" & gt;
    & lt, li třída = "mobilenav_listitem" & gt; & lt; a třída = "mobilenav_listitemlink" href = "#" & gt; home & lt; / a & gt; & lt; / li & gt;
    & lt; li třída = "mobilenav_listuTem" & gt; & lt; třída = "mobilenav_listitemlink" href = "#" & gt; asi 

Pomocí následujících CSS můžeme zobrazit a skrýt navigační nabídku; Protože chceme štítek v záhlaví, můžeme použít ~ aka Tildde nebo (U + 007e), takže to funguje, a to proto, že nebude okamžitě uspět prvním prvkem.

 #mobilenav_toggle [typ = zaškrtávací políčko] {
  Displej: Žádný;
}

#mobilenav_toggle [typ = zaškrtávací políčko]: Zkontrolováno ~ .mobilenav_list {
  Displej: blok;
} 

S mobilní navigací kompletní, je čas implementovat některé Reagovat web design . Přidání hlavního obsahu pro web, pak s použitím citlivé zobrazení v Chrome Developer Tools, jsem schopen zvýšit šířku výřezu, dokud nebudu mít pocit, že je dostatek prostoru dostatečně držet navigaci stromu. To skončí v 600px, a pro to můžeme použít mediální dotaz:

 .treenav {
  Displej: Žádný;
}

Obrazovka @Media a (Min-šířka: 600px) {
  .treenav {
    Displej: blok;
  }
} 

Téměř tam! Konečně pro navigaci stromu sedět vedle hlavní oblasti obsahu, budu používat FlexBox:

 .container {
  Displej: Flex;
}

.treenav {
  Displej: Žádný;
  Min-šířka: 140px;
} 

Nyní stromová navigace zabírá 100% výška, přičemž obsah dělá to samé a sedí na to. To znamená, že bez ohledu na to, jak dlouho se obsah stane, nikdy nebude proudit pod navigací stromu. Pokud se chcete dozvědět více o FlexBoxu, doporučuji odhlásit Flexbox.io. Jediným a pouze WES BOS. Je to hodně, co to může udělat!

To je vše, co mám v tuto chvíli čas, ale stále existuje spousta věcí, které bychom mohli udělat, aby tento projekt ještě lépe. Máte-li jakékoli dotazy, nebo se líbil článku, řekněte prosím Ahoj na Twitteru nebo přes moje stránka Nebo mi pošlete požadavek na pull na GitHub!

Tento článek byl původně publikován v čísle 304 síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Koupit problém 304 zde nebo Přihlásit se zde .

Související články:

• 5 tipů pro super-rychlé css
• Animate SVG s JavaScriptem
• Pochopení vlastnosti CSS Display