Ako vznikal layout pre Rhapsody

Teraz trošku technickejšie a odhalím niekoľko mojich zdrojov odkiaľ som čerpal aj pre tých, ktorí by radi vnikli do tvorby stránok. Predpokladám ale mierny nával chuti, pretože toto nie je žiadny step by step návod.

Layout

Prešiel som si niekoľko hotových layoutov pre trojstĺpcovú sadzbu, nebudem uvádzať všetky tie notoricky známe zdroje:
– určite tam patril pixyho návrh, ktorý mi ale nevyhovel tým, že stredný stĺpec bol v dokumente až za ľavým a zameral sa viac na vyrovnanie výšky stĺpcov (fintami cez obrázky patričnej farby),
– Vít Dlouhý takisto anoncoval ďalšie návrhy, ktoré zohľadňovali NN4. S nimi som chvíľku koketoval a potom som to vzdal a vlastne sa vrátil k tomu, ktorý je použítý teraz,
– ďalšia zo skúmaných bola pracovne nazvaná zelená sadzba z Position Everything, ktorú som vylúčil pre jej komplexnosť a náročnosť pri zjednodušovaní layoutu pre moje potreby. Nevyzerá zle a kóderi maľujúci layouty pre neweblogové stránky ju radi použijú,
– nakoniec som sa po exkurzií po konkurenčných návrhoch vrátil k sadzbe do layoutu FlexibleLayout.
Celý tento layout je zložený okrem samotného dokumentu z troch CSS súborov:
screen.css obsahuje len vloženie ďalších dvoch CSS,
ie.css je špeciálne (IE hackom) vkladaný predpis zohľadňujúci špecifiká obstarožnejšieho ale veľmi rozšíreného prehliadača Microsoft Internet Explorer,
layout.css je základná kostra pozícií jednotlivých prvkov Header, všetky tri stĺpce, Footer. Kód obsahuje pomerne veľa IE hackov a ďalšich barličiek pre rôzne ďalšie prehliadače. Všetko je zamerané na čiastočné eliminovanie chybnej interpretácie box modelu IE a absenciu resp. iné správanie sa pri interpretácií min-height a max-height. Tak či onak, v IE sa layout správa mierne inak ako v preferovanom Geckovom prehliadači. V obstarožnej Opere dokonca nedôjde k načítaniu stránky, rozhodol som sa, že s tým sa zaoberať nebudem (kto má Operu, iste má aj na to ju upgradnuť),
design.css je výber a doplnok definícií elementov, ktoré už pracujú so vzhľadom (proste farbičky, písma, okraje..).
Prvou väčšou úpravou, veľmi jednoduchou bolo zneviditeľnenie Header. Na príslušné miesto som vložil display:none. Textová hlavička teda v šablóne existuje. Samotné logo stránky som riešil na inom mieste (v ľavom stĺpci). Nie je to používané riešenie, no je to uspokojivé. Nakoniec som sa nesnažil vniesť do šablóny aj variantu zapnutý CSS, vypnuté obrázky – zdalo sa mi to samoúčelné vzhľadom na to, že by v tom prípade čitateľ prišiel len o dva dekoračné obrázky.
Väčším orieškom však bolo manipulovanie so šírkami stĺpcov, tu som to už málinko vzdával vzhľadom na použité hacky. Nakoniec som dosiahol zväčšenie šírky ľavého stĺpca na potrebnú hodnotu.

Design

Premaľovanie layoutu je viacmenej hračka a tu musím doporučiť opäť pixyho knižku, ktorú som síce neotvoril ale jej absorbovanie naozaj pomáha.
Odstraňoval som použité margin a padding, vyhadzoval border. Menil som farbičky pozadia, písma atď.
Rozhodol som sa dosiahnuť DVA obrázky staticky držiace sa viewportu (okna prehliadača) a v prehliadačoch mimo IE je to dokonané. Kto o tom trošku vie, tak si pamätá, že pri definovaní stojaceho pozadia v prvku BODY to funguje aj v IE. Avšak vo vnorených prvkoch sa už stojace pozadie (logo) rôzne prekrývalo (nech sa prepadnú do pekiel bordery) s vyššie stojacimi prvkami. Tak či onak, logo v IE pláva s rolujúcim sa textom. Bohužiaľ ale je to vysoko prijateľné a nenarúša to stránku do nepozerateľného mišmašu.

Prvky blogu v šablóne

Skúmaním obsahu stránky a želaním majiteľky bolo rozlíšiť skvosty (vybrané vlastné články) a odkazy na iné stránky (blogroll). Po menších úvahách som sa rozhodol pre dynamické menu, nevyberal som dlho. Kryogenix som anoncoval v súvislosti s peknými priehľadnými tooltipmi a pamätal som si na dobre spracované rolovacie menu v časti experimenty s prehliadačom.
Do ľavého stĺpca som umiestnil na pozadie logo, pod ním je súvisle písaný text s odkazmi na potrebné veci, ktoré na stránke weblogu musia byť. Do pravého stĺpca je plánované motto a do pozornosti vytiahnuté kategórie.

Dynamické menu

Pomerne obšírna stať o dynamickom menu skrýva veľmi jednoducho aplikovateľné rolovacie menu podľa mojich potrieb.
Do menu som zaradil tri položky: odkazy, skvosty a mesačné archívy.
Toto menu sa skladá z dvoch súborov:
javascriptová knižnica
definícia vzhľadu v CSS súbore
Ten druhý súbor som upravil podľa mojich potrieb a použil som jednoduchý trik pre dosiahnutie priehľadnosti v Mozille a IE. Každý z nich má svoj proprietárny príkaz avšak navzájom sa nebijú.
Obsah menu je definovaný jednoduchými zoznamami (UL, LI) a pôvodne bol umiestnený na začiatku stredného stĺpca. Nakoniec som sa rozhodol tento kus kódu umiestniť na koniec stĺpca a jeho polohu určiť cez position:absolute. Aspoň v mnou testovaných prehliadačoch to funguje obstojne a bez javascriptu a CSS to nestraší na začiatku dokumentu.
Na začiatku ma mierne deprimovalo zobrazenie všetkých menu počas načítavania stránky, ale poriešil som to brutálnou silou a do kódu som vložil display:none. A som spokojný. XHTML kričí ranou pod pás ;-)

Prepínanie vzhľadu javascriptom

Keďže hostingom je systém bloguje.cz nepočítal som s podporou PHP prepínača a použil som javascript. Snažil som sa zverejniť stránku v tvare, ktorý umožní prepínaním CSS šablón hlavne meniť veľkosť písma a kontrast.
Prepínač je tvorený jednou javascriptovou knižnicou, v ktorej sa len prepíše počet šablón. V kóde dokumentu sa vhodne umiestnia linky na alternatívny vzhľad a prepínatká (anchory).

Všetok tento bordel ako šablóna bloguje.cz

O šablónach bloguje.cz si musíte prečítať sami, nie som tutorial.
Od počiatku som však všetky komponenty stránky vytváral, menil a vyberal s ohľadom na implementáciu ako šablóna pre tento redakčný systém.
V terajšej podobne som samotnými prostriedkami tohto systému nebol schopný uložiť súbory s javascriptami a pomocnými CSS šablónami, takže sú prevádzkované mimo priestor bloguje.cz. Vyriešim to ale buransky a poprosím prevádzkovateľa o ručné nahranie týchto linkovaných súborov.
Nepoužil som teda žiadne extrémne a nemožné triky, systém bloguje.cz ma takmer neobmedzil do nemožnosti potrebné a nutné veci realizovať.

Zhrnutie snehu

Výsledkom práce je teda blog Rhapsody na bloguje.cz.
Dlhšie anoncovanie redesignu Rhapsody je na blogu Každý bloguje, kde uvítam vaše hodnotenie konkrétnej implementácie a účasť v ankete.
Pod týmto príspevkom prosím hlavne o komentáre k samotnej práci, zdrojom atď bez priamej súvislosti k blogu Rhapsody.
Považujte túto implementáciu ako moje vlastníctvo a vlastníctvo autorov ďalších strán, ktorých časti kódu resp. celé knižnice som použil. Pokiaľ chcete čerpať inšpiráciu akoukoľvek formou, všetky možné zásahy do práv autorov vopred konzultujte a požaduje sa súhlas zúčastnených strán.
Pokiaľ použijete ktorúkoľvek časť zo samotnej implementácie alebo tohto príspevku ako zdroj pre tvorbu ďalších diel, prosím o rešpektovanie môjho želania s tým výslovne súhlasiť. Počítajte s tým, že komerčné využitie možno považovať za hrubšie narušenie práv zúčastnených strán.
V prípade, že chcete spolupracovať na komerčnej tvorbe stránok aj pri nepriamom využití tohto textu a implementácie stránky, prosím bezpodmienečne ma kontaktujte (kontakt nájdete na tejto stránke).
Zverejnenie tohto textu považujte za dostatočné prihlásenie sa k autorstvu relevantných častí stránky. Nie je možné teda argumentovať neznalosťou.
Aj keď vyššie uvedený text znie hrozivo, ak sa chcete pre svoju osobnú, neziskovú stránku inšpirovať (nie kopírovať), proste mi napíšte. Iste by som však nebol rád, keby sa po svete vynorili identické kópie stránky vrátane grafiky – preto som napísal aj tento príspevok.