Jak se dělá fansite?
Napsal: Petronom 18. 3. 2011 20:00
V tomto článku bych s Vámi chtěl projít všemi fázemi, které bylo nutné absolvovat, aby mohlo vzniknout to, co teď před sebou vidíte a na co klikáte. Předem upozorňuji především slečny, které TeraPortal.cz navštěvují, že v tomto článku se na to chci podívat z technické stránky (a někdy půjdu opravdu do detailů).
Proč článek vlastně píšu? Prvním důvodem je, že si chci sám sumarizovat, čím vším web prošel. Druhý důvod je čistě praktický - chci se podělit o své zkušenosti, vypíchnout (doufám) zajímavé věci a třetím důvodem je, že rád píšu "omáčku". Co myslím omáčkou? Jednoduše spousta textu, který nezabíhá až tak do detailů, ale spíše chce pokrýt co největší oblast.
Pokud jste se dostali až tady, pak Vás tedy znovu vítám, tentokrát však už u samotné části, která se bude zabývat nadpisem článku. Takže osnova článku je následující:
- Příprava na tvorbu webu (aneb když se o něčem jen mluví, ale nic se nedělá)
- Grafika (aneb ta barva je tak černá, že mám strach ze vzniku černé díry)
- Kódování (aneb když nedodržuje standardy IE, proč bychom museli my)
- Debugování (aneb to není chyba, ale "featura")
Osnova výše nám (tedy spíše mě) pomůže, abychom se v článku neztratili. Tento článek bude nejspíš tím nejdelším, co jste si na TeraPortal.cz mohli přečíst (ale nebojte, budou v něm obrázky!). Ale jak říkají Vznešení Elfové v TERA: "Na tohle bude vzpomínáno." Tedy, alespoň doufám.
1. Příprava na tvorbu webu
Tvorbu nového webu jsem měl naplánováno už dlouho. Tak dlouho, že jsem zapomněl na dny, kdy tomu tak nebylo. Někteří z Vás si možná řeknou: "Však to nebylo tak zlé.", a další možná: "Starý web byl STOKRÁT lepší, STOKRÁT!" Slovo stokrát tam nechám, ale zasadím ho do jiného kontextu: "Starý web byl stokrát předělaný." Co to znamená? Že když jsem před rokem připravoval TeraPortal.cz na spuštění, byly mé znalosti mnohem sporadičtější. Starý web byl vybudován na volné šabloně, kterou jsem z dnešního pohledu velice nešikovně upravoval, a chyby se kupily. Ty jsem se pak plátoval, řekněme, po "microsoftsku". Takže jedna chyba plátovala další, web se nepěkně rozrůstal - tím nemyslím návštěvnost, to je pěkný druh rozrůstaní, ale ve smyslu "nenažranosti".
To byl první důvod, proč vytvořit nový web. Druhým důvodem bylo využití prostoru a ergonomika. Světlý vzhled prostě není vhodný na herní portál. Hráči hrají v noci, hrají dlouho a hrají rádi. A poslední co chtějí, je, být při čtení článku osvíceni tisíci malými body. A v neposlední řadě je tady ten prokletý prostor. Dva sloupce, obrovské logo a malé menu není zrovna to, co Vás obohatí. Web musí být plný informací (které jsou samozřejmě logicky rozčleněné) - a toto starý web rozhodně neplnil. Prostor mě děsil, děsil mě tolik, že jsem ho chtěl zaplnit blikajícími poníky…ne, dobře, tak zlé to nebylo.
V té době (řekněme asi 5 měsíců zpět) jsem začal plánovat nový web. Ovšem když se plán nerealizuje, tak může být sebevíc skvělý, ale nic z něj není. Toto je častým problémem nejen ve světě informatiky, ale také ve světě restauračních zařízení, kde má každý stovky skvělých nápadů, avšak skutek utek. Někdy v prosinci jsem se tedy rozhodl začít s tvorbou webu…ech..no víte - Vánoce, Silvestr a ze začátku ledna byl únor a ze začátku února byl konec měsíce. Můj plán, spustit web do 19. března (tedy prvního výročí TeraPortal.cz), byl vážně ohrožen. Ve skutečnosti jsem nevěřil, že ho budu schopen realizovat. Přišly tedy na řadu pětiletky, v mém případě "týdnovky" a plán bylo nutné plnit minimálně na 120%.
2. Grafika
Cíl byl tedy jasný. Během tří týdnů vytvořit funkční web, který pojede ve všech pěti nejrozšířenějších prohlížečích (Internet Explorer, Mozilla Firefox, Chrome, Safari, Opera), bude mít tři základy typy podstránek (respektive variant), bude rychlý, svěží a hlavně využitý ve smyslu prostoru. První týden grafika -> druhý týden kódování -> třetí týden debugování. Šibeniční čas.
Započalo se tedy s grafikou. Jako hlavní program na spojení samotného designu jsem vybral Adobe Photoshop 7. "Sedm? To sis vybral jako za základní program?!", ptáte se? Ano, legální verzi Adobe Photoshop 7 z roku 2002. Věřím, že některým z Vás se teď museli rozklepat jejich složky s názvem "Torrent" a to nemluvím o složce "Programy", která pravděpodobně explodovala. Tady je prostě pádný argument -> pokud něco myslíte vážně a chcete to legálně provozovat, musíte tomu podřídit vše. A osobně si myslím, že Photoshop 7 na určitou oblast webdesignu bohatě stačí (au, přestaňte házet to kamení!).
Na namalování několika prvků jsem použil CorelDRAW X5 a jako skvělý program na určování barev program se stejným jménem - Barvy. K vytvoření wireframu program Evolus Pencil.
Jak jsem již výše rozvedl, bylo jasné, že web bude muset být poskládán zcela jinak. Vytvořil jsem si tedy wireframe (neboli skicu webu). Wireframe je skvělý v tom, že si vytvoříte opravdu jednoduchý model webu, kde jsou jeho nejdůležitější prvky a při samotném vývoji to velice zrychluje práci.
Takto vypadal výsledný wireframe webu.
Vytvořením wireframu jsem si ucelil osnovu, které se budu držet. Avšak jen osnovu základní, spousta věcí se potom během vývoje měnila.
Barvy
U barev jsem se rozhodl pro mou oblíbenou tmavou #131313, dále pak v kombinaci se žlutou. Žlutá je totiž barvou, která nejlépe kontrastuje s černou. Ano, právě z tohoto důvodu mnoho webů sází (a jistě ještě mnoho vsadí) na tuto kombinaci. Samozřejmě jako třetí a poslední hlavní barvu jsem zvolil bílou (ne sněhobílou, ale #eeeeee, protože našedlá je lepší pro čtení).
Hlavička webu
Logo, menu a dva panely vpravo. Nejdůležitější články uplynulého týdne, nejnovější komentáře a nejpopulárnější články. Spousta informací, ale ne tolik, abyste se v nich ztratili. Původně bylo zamýšleno místo článků populárních mít články nejnovější. Nicméně to jsme nakonec s w4rezzem zavrhli kvůli tomu, že posledních šest článků je vidět na úvodní stránce (přičemž dva hned při zobrazení stránky - při běžném rozlišení) a je to tedy zbytečné.
Dále bylo zapotřebí vytvořit nové logo. Toto byla část, které jsem se v prvním týdnu obával asi nejvíce. Kdo už někdy vytvářel logo, ví, že to je něco, co zabere opravdu hodně času. Zkoušel jsem mnoho různých kombinací, nakonec jsem se však rozhodl pro běžné psané logo, trochu upravil font, písmeno O vyplnil a nechal vypuknout. Osobně jsem s výsledkem spokojen, co by na to řekli někteří z profesionálů, kteří se zabývají logotypem, raději nechám do jiného článku.
Nové logo webu.
Tělo webu
Tělo webu bylo nutné navrhnout pro tři typy zobrazení:
Základní - tedy dva sloupce po stranách a obsah uvnitř. Tento vzhled je na titulní straně.
Pravý sloupec - tedy jeden sloupec vlevo a pravý sloupec sloučený s obsahem. Tento vzhled je použit téměř vždy, když kliknete na článek.
Bez sloupců - tedy levý i pravý sloupec sloučený s obsahem. Tento vzhled používáme, když je zapotřebí maximálního prostoru stránek. Momentálně jen u Mapy světa.
U všech tří typů jsem měl na mysli to, co mě trápilo u starého webu - tedy plýtvání s prostorem v tělu webu. Ironie, že? Na jedné straně prázdná hlavička, na druhé nedostatek místa v tělu webu. Sloupce jsem proto navrhl tak, aby byli co nejtenčí (samozřejmě s ohledem na optické rozdělení webu) a měl tak více místa pro text v obsahu. Abych nezapomněl, samotná šířka těla je 960px. Hodnoty v tomto rozmezí jsou doporučovány především kvůli netbookům a momentálně i tabletům, které začínají ve velkém obsazovat trh (a samozřejmě i starým monitorům). Pamatujte, horizontální posuvník na slušný web nepatří. Návštěvník jej nečeká a může ho to tedy pořádně zmást. Na širší stránky si budeme muset ještě nějakou dobu počkat. Nad tělo webu jsem ještě přichytil ikonky YouTube a Facebooku. Jednoduché a efektní. O rozložení menu a položek v něm si řekneme v poslední části.
Patička webu
Musím přiznat, že ta mi dala opravdu zabrat. Přemýšlel jsem nad různými typy, nakonec jsem se však rozhodl pro celistvý web. Rozdělený pouze mezerami mezi panely.
Pozadí
Pozadí, prvek, který Vás udeří do obličeje jako první. Zvažoval jsem přechody, čisté barvy, kombinace obojího a bylo to tak zlé, že jsem sledoval YouTube a podle velmi zarostlého motorkáře se učil sprejovat nýty. Tedy v mém případě nakreslit v Corelu. Nýty se povedly, ale jejich implementace byla žalostná.
Ukázka částí pozadí a náhled na horní panel (články týdne). Ne, takto by to nešlo.
Bylo rozhodnuto - žádné přechody, žádné podivné barvy a žádní motorkáři…tedy, žádné nýty. Přešlo se na kombinaci vesničky při úpatí skály a skupiny dobrodruhů v tajemném dungeonu. U tohoto však bylo nutné zajistit kvalitu / velikost. Přece jen obrázek s rozlišením 1920 x 874 zabere mnohem více než kousek textury. Zde jsem se však rozhodl pro maximální kvalitu s tím, že pak bude třeba pracovat mnohem úsporněji. Žijeme sice v roce 2011, ale stále musíme brát ohled na uživatele, kteří chytají wifi z bytu souseda.
3. Kódování
Započal druhý týden a to týden, kterého jsem se obával nejvíce. Ono je pěkné si něco namalovat, o něčem mluvit, ale realizace je vždycky to, kde se dělí děti od mužů, v našem případě uživatelé blogu od tvůrců webů.
Jako první jsem si jasně určil, čeho a jak chci dosáhnout. Starý web byl stavěn na volném templatu, který byl následně přepracován. Z čehož vyplývá, že o polovině věcí nemáte tušení. Tentokrát jsem se proto rozhodl vytvořit template od začátku.
Rozřezání webu
Web je samozřejmě prvně nutné rozřezat na menší části, a to tak, aby to mělo nějakou logiku. S hlavičkou webu nebyl žádný problém, je z větší části tvořena divy, které jsou vyplňovány jednoduchou 1px texturou.
Obrázky Facebooku a YouTube jsem měl původně kvůli úspornosti rozřezány na dvě půlky, avšak při najetí myší a následném povysunutí nahoru se logicky načítaly a tvořilo to nepěkný efekt -> nakonec je to tedy jen jeden obrázek, který se načte hned po příchodu na stránky.
Při tvorbě webu někdy vznikají zajímavé situace…kde má ten "člověk", proboha, zbytek meče?
Tady podotýkám, že kódování hlavičky webu bylo v této chvíli jen z pohledu HTML + CSS. PHP + JavaScript přijdou s příchodem druhého hrdiny dne, w4rezze, ale to až za chvíli.
Tělo webu
Nutno říci, že s hlavičkou skončila všechna sranda a vyvstal jeden z větších problému - a to jak vykreslovat tělo.
Vykreslovat každý sloupec zvlášť? Jak vykreslovat obsah, aby dokázal při změně sloupců efektivně fungovat? Jak to udělat tak, aby to bylo co nejmenší? Zde jsem přišel s poměrně efektivním řešením.
Jak jsme si již říkali dříve, web může mít tři stavy:
- levý sloupec : obsah : pravý sloupec
- levý sloupec : obsah
- obsah
Rozhodl jsem se, že u všech stavů použiji jeden obrázek. Jeden, který najednou vykreslí vše.
Jak vidíte, tato základní čára vykresluje najednou všechny sloupce. Takové čáry používá web tři (pro tři stavy webu). Nejlepší na tomto řešení je, že čára má velikost nula-nula-nic a najednou vykreslí celé tělo webu.
Avšak, každé plus má své mínus. Některé možná už napadlo, co je tím mínusem. Jak říct čáře, tady už skonči a nevykresluj dále?
Jak zajistit, aby čára přestala vykreslovat a neudělala sloupec až do vrchu webu?
Nutno říci, že toto řešení mě napadlo, když jsem čistil nadbytečný kód. Ze zvyku jsem si tam vytvořil blok pro top (tedy div, který obvykle dávám nad obsahovou část stránky). Samozřejmě jsem žádný "top" nepotřeboval, ale zvyk je železná košile. A v té chvíli mě napadlo elegantní řešení -> tomu se říká PHP.
Jednoduše: zjišťuji, jaký sloupec je zobrazen a podle toho do divů "top" a "footer" zobrazuji jednoduchý proužek. Tento proužek zajistí uříznutí toho, co do celého těla vykreslí čára. Elegantní řešení? To už nechám na Vás.
Jak jsem říkal, musím zjišťovat, jaký sloupec je zobrazen. Proč? Jelikož u každého stavu je potřeba daný "top" a "footer“ trochu upravit:
Řešení je jednoduché, prostě se vytvoří tři "topy" a tři "footery" (vždy jeden a jeden na stránku), a ty se pak načítají dle aktuálního stavu.
Dobře, teď jsme zaběhli trochu moc do podrobností, je to však jeden z důležitých prvků, o kterém jsem se chtěl zmínit a poměrně zajímavé řešení, když chcete udělat minimalistický web (ve smyslu velikosti).
Patička
Nakódování patičky bylo po nakódování těla již záležitost chvíle. Zde jediná věc, co jsem zvažoval, byla, zda patičku přilepit na spodní stranu prohlížeče, či pod ní vložit mírné odsazení. Nakonec jsem odsazení nezvolil z toho důvodu, že by se odkryl kousek spodního pozadí, kde je patrné prolínání dvou obrázků (toto jsem nezmínil, ale je to celkem očividné - pozadí vesnice a výzkumníků jsou dva obrázky s prolnutím do sebe).
Dole je patrný nepěkný přechod.
Tak, v této chvíli bylo hotové "špinavé" kódování. Do toho samozřejmě nepatří nějaké pozicování nadpisů, definování font-family atd. V této chvíli jsem se vrátil na začátek (do hlavičky) a bylo nutné vyplnit ty smutně koukající bloky vpravo.
Bridge mezi Joomlou a Disqus
V této chvíli přichází do hry w4rezz (předtím převážně konzultant). Bylo nutné připravit bridge (neboli přemostění mezi dvěma systémy) - Joomlou a Disqus. Blok nahoře je zajišťován modulem coin-slider, který je volně dostupný ke stažení. Pěkně připravený modul, jenž s drobnými úpravami funguje velmi efektivně.
Avšak "Populární články" a "Poslední komentáře" bylo třeba naprogramovat. Systém Disqus sice poskytuje svým uživatelům jistý výstup pro jejich stránky, ale je to naprosto nevhodné. Celé je to už předpřipravené, nastylované. Tedy nic, co bychom mohli použít.
W4rezz tedy připravil dva PHP soubory (jeden pro populární články, druhý pro nejnovější komentáře), ve kterých probíhá následující:
- Čerpáme data z Disqus (aktuální komentáře jsou v cache menší dobu než populární články, neboť doba, která je zapotřebí pro změnu popularity je poměrně dlouhá, nový komentář se musí zobrazit ihned).
- Data upravujeme pro použití.
- Je vytvořeno pole, ve kterém je anglický výraz x český výraz a přepisujeme například minutes = minuty atd.
- Data následně načítáme na web.
Následně jsme řešili, jak zobrazovat tyto informace. Udělat přepínač? Rozdělit blok na dvě půlky a na každý z nich zobrazovat jeden modul?
Ne, zvolili jsme to nejlepší možné řešení. Pomocí knihovny jQuery přepínáme mezi těmito dvěma moduly v intervalu cca 5 sekund, přičemž když na něj najedete myší, tak se Vám nepřepne - ve chvíli, kdy s myší odjedete a je dosažen časový limit, tak se modul po pár milisekundové prodlevě přepne. Vyvstal však problém, kterého jste si někdy mohli všimnout na starém webu. Disqus je pro Joomlu navržen tak, že se načítá skoro jako první, a dokud se nenačte, tak zastaví načítání zbytku stránky. Co to znamená? Obrovský lag, nenačtení základních formátovacích prvků a divné problikávání. Nakonec jsme to vyřešili tak, že jsme modul mírně upravili a ještě ho dali na konec stránky, takže se načítá jako poslední.
Tak, a základ webu byl hotov. Následovalo kódování nadpisů, bloků atd. Nicméně tímto se nechci zabývat. Vypíchnu z toho však pár zajímavých poznatků (na některé z nich jsem přišel už dříve):
- IE neumí dobře pracovat s font-weight, pokud je zadáno číselně. Nejlepší je zadávat přímo hodnotu normal, bold (na bolder zapomeňte, IE to vykreslí zcela jinak, než jiné prohlížeče).
- Opera špatně vykresluje font Helveticu (zobrazí ji ve zcela jiné velikosti než jiné prohlížeče).
- Pokud něco odsazujete a daný prvek - od kterého odsazujete - má nastaven rámeček, tak Mozilla počítá i tento rámeček. Ostatní prohlížeče ne.
- Všechny prohlížeče ignorují div, který má nastavenou velikost 0,0 (toto například používá Toplist u svého měření), IE však ne. Prvek Vám odsadí o výchozí hodnotu.
- U IE pozor, aby byl background-attachment deklarován až po definování pozadí. IE jej jinak ignoruje.
Noscript
Jak jsem říkal, chci v tomto článku vypíchnout především zajímavé věcí (kdybych popisoval celou přípravu webu, nestačilo by mi 20 stran). Jednou z věcí, na kterou dnes lidé celkem zapomínají, je noscript, tedy to, kdy má návštěvník vypnutý JavaScript. Toto jsme vyřešili tak, že se v hlavičce objeví průhledný proužek s upozorněním. Samozřejmostí je také skrytí modulů, které by se bez JS chovali podivně.
Rozhodli jsme se pro nenásilné varování.
Po nakódování jsme společně s w4rezzem sloučili spoustu CSS stylů, odebrali zbytečné načítaní pluginů, aktualizovali ty stávající (obrázek už Vám nebude v případě použití Chrome AdBlock místo zvětšení mizet do černé díry). Také jsem přišli na pár zajímavých věcí. Například, že hudební přehrávač, který na stránkách používáme, co 100ms prochází celou stránku - přesunuli jsme jej tedy do kategorie Hudba, aby zbytečně nevytěžoval celé stránky.
V průměru tedy stránky mají POUZE 2MB! A to s šesti články (samozřejmě velikost úvodní strany se může mírně měnit v závislosti na tom, jak velký je úvodní obrázek článku).
4. Debugování
Nadešel poslední týden, jehož tématem bylo debugování. Po náročném předchozím týdnu to bylo sice mnohem méně uvažování, ale mnohem více práce. Bylo potřeba projít stránky, podívat se do článků, kde nesedí obrázky a následně je opravit. Proč? Stávající pozadí bylo bílé, takže se neřešil rámeček v případě, že byl obrázek bílý (splynul s pozadím), avšak to už teď očividně nešlo.
Takto nemohli obrázky v hlavních sekcích zůstat. Bylo nutné je ořezat.
Také byl nejvyšší čas se rozhodnout, jak přeskládat menu. Nakonec jsem zcela zrušil podkategorie a zavedl pro každou oblast vlastní menu.
Starý web vlevo a nový vpravo.
Ubraly se také pluginy, reklama z Xzone se přesunula na druhou stranu. Ptáte se, proč jsme menu také z části nepřesunuli doprava? Protože kdybyste četli článek nebo se pohybovali po webu, bylo by nutné, abyste se vrátili na titulní stranu, abyste menu vpravo viděli. Což je poměrně nepraktické.
A samozřejmě se debugovalo. Odstranila se spousta chyb, a to jak v kompatibilitě mezi prohlížeči, tak chyby v grafice atd. Musím uznat, že nakonec vyvstaly problémy, které bych sám nečekal, ale nebylo jich tolik, jak jsem se obával. Uvedu jeden zajímavý problém, na který jsme narazili naprostou náhodou a s pomocí jednoho z návštěvníků TeraPortal.cz:
Jednoduše, do bloku s nejnovějšími komentáři jsme načítali data, a najednou jsme zjistili, že nám jeden komentář zcela rozhodil styl. Jak? Prostě to někdo šíleně přehnal s enterem, a každé slovo "od-entroval", takže se protáhlo na xx řádků a PHP script ho tedy ořízl správně (podle délky), ale prostě ho vypsal pod sebou. Toto samozřejmě vyřešila jednoduchá úprava kódu, ale pěkně to ukazuje neočekávané problémy, které mohou vyvstat.
Hromadná úprava článků
Posledním bodem byla hromadná úprava článků. Kupříkladu toto logo En Masse:
Logo En Masse na starém webu.
Je jasné, že na starém webu nevadilo, ale na novém by mělo hrozný rámeček. Jasně, toto se dá jednoduše vyřešit, prostě se přepíše obrázek ve složce…ale já se jej rozhodl nahradit tímto obrázkem (již poměrně známý rámeček, který na TeraPortal.cz používáme):
Logo En Masse na novém webu.
A teď jak u všech článků změnit velikost obrázku (musí se změnit šířka a výška všech obrázků tohoto typu na web, aby nebyl obrázek deformovaný). A takových obrázků byla spousta, které pravidelně používáme a byla potřeba je změnit (kupříkladu Frogster atd.). Nakonec jsme se rozhodli stáhnout databázi, pomocí PSPadu a regulérních výrazů všechny najednou přepsat. U tohoto se opět potvrdilo, jak je PSPad mocný. Ani desetitisíce řádků jej nezpomalí a jede pořád plynule.
Poslední fáze - příprava na přesun
A blíží se konec mého článku (přiznávám, že jsem to s délkou přehnal a pokud se někdo dostal až tady, tak mu patří moje poklona).
Od začátku jsem řešil, jak web jednoduše přesunout. První plán byl, že web jen dočasně odstavím, nahraji nový template a moduly ručně upravím…jak naivní. Jak jsme pokračovali ve vývoji nového webu, bylo více než jasné, že než bych vše ve staré Joomle nastavil, přepsal a upravil, tak uběhne další týden. Druhý plán, který jsem nakonec vybral, bylo stáhnout celý obsah webu, pak ho jednoduše ve složce www-nove přesunout na web, a pak složky jen přepsat:
www - > www-stare
www-nove -> www
Nicméně dočasná odstávka je samozřejmost. Jedná se o tak velkou změnu (navíc přechod z testovací subdomény na doménu prvního řádu), že se musí vše prověřit.
Tak, jsme na konci, nový web jede a vypadá, že ještě dlouho pojede. Doufám, že Vám můj článek alespoň něco dal. Třeba jednou budete spouštět vlastní webový portál a vzpomenete si na něco, co jsem zde popsal.
S pozdravem,
Petr "Petronom" Freiberg
zcela vypsaný administrátor TeraPortal.cz