Vylepšenia Blogu

Každá webstránka (ako je známe) má svoj HTML kód, ktorý v konečnom dôsledku formátuje celý obsah stránok. Tento kód normálne nevidíme, kým si ho nenecháme zobraziť. Rovnako je to aj v prípade blog-u. HTML kód formátuje vzhľad, no neurčuje kde presne majú ktoré objekty byť. Tu to presne určuje CSS štýl, ktorý "prikazuje" všetkým objektom v HTML, ako sa majú správať.

Tieto veci sa nastavujú v takzvaných hlavičkách stránky.

<title>BLOG.SK (vylepsenia.blog.pravda.sk) - prvý slovenský blogovací systém</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/> <meta name="keywords" content="blog, weblog, slovak, slovenský, denník, denníček"/> <meta name="description" content="BLOG.SK - prvý slovenský blogovací systém"/> <meta name="ICBM" content="48.1686, 17.0503"/> <meta name="DC.title" content="BLOG.SK - share your mind"/> <link rel="shortcut icon" href="http://www.blog.sk/favicon.ico" type="image/x-icon"/> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/xml.html"/>

Tieto hlavičky nám hovoria o tom, ako sa stránka volá (názov - TITLE), kto je ich autorom, kedy boli vytvorené, aké kľúčové slová dané stránky obsahujú a aj nejaký ten ďalší popis. Tieto údaje využívajú hlavne vyhľadávače typu google, altavista, yahoo, msn a pod.

Ďalšie vlastnosti, ktoré sa v hlavičke stránky nastavujú sú relatívne odkazy na rôzne doplnky v podobe JavaScriptov, CSS štýlov, ikoniek a podobne. Nižšie máte možnosť vidieť aké CSS sú naťahované do stránky blogu, pričom si vysvetlíme každý jeden CSS štýl a aj to, prečo sú v takom poradí v akom sú.

<style type="text/css" media="print"> @import "css/print.css?css="; </style> <style type="text/css" media="handheld"> @import "css/handheld.css?css="; </style> <style type="text/css" media="screen, tv, projection"> @import "css/style.css?css="; </style> <!--[if lte IE 7]> <style type="text/css" media="screen, tv, projection"> @import "css/IE7.css?css="; </style> <![endif]--> <!--[if lte IE 6]> <style type="text/css" media="screen, tv, projection"> @import "css/IE6.css?css="; </style> <![endif]--> <!--[if lte IE 5]> <style type="text/css" media="screen, tv, projection"> @import "css/IE5.css?css="; </style> <![endif]-->  

Pri nastavovaní CSS štýlov musíme dbať na to, aby sme vedeli, ktorý štýl čo ovplyvní. Ako môžete vidieť v HTML kóde, ktorý je vyššie, štýly ktoré sú volané sú do stránky "virtuálne" naimportované, takže sa dajú rozširovať a upravovať. Každý CSS štýl pri svojom volaní má pritom určené, o aký druh CSS štýlu ide a ktorú časť vlastne bude ovplyvňovať. Presnejšie mám na mysli typ média, kde sa CSS aplikuje.

Poznáme hneď niekoľko médií - print, screen, tv, projector, handheld a v neposlednej rade aural.

Aby ste ale porozumeli viac. Médium print ovplyvňuje vzhľad na vytlačenej stránke. Screen, tv a projector ovplyvňujú hlavne monitory a projektory. Handheld ovplyvňuje mobilné telefóny a prístroje s malými monitormi, či monochromatickými zobrazovačmi. Posledný aural ovplyvňuje hlavne textové výstupy, ktoré sú v komprimované do syntetizovaného hlasu. Tie sa na Slovensku moc nepoužívajú, čo je smola, pretože v spoločnosti kde pracujem, sme už niečo takéto aplikovali, no pre jedného talianského klienta.

Na blog.sk sa rozhodli, že najprv sa zadefinuje štýl pre vytlačenú verziu stránky. Čiste teoreticky v tejto časti môžete pekne určit to, že sa nemusí zobraziť žiadna navigácia, hlavička stránky ani nič podobné. Ak nepočítam prvky, ktoré sa blog.sk rozhodol nechať nezmeniteľné (čo sa samozrejme dá tiež obísť).

Ďaľšie CSS ktoré sa importuje je CSS, ktoré ovplyvňuje monochromatické a malé obrazovky (aj niektoré mobily). Následne sa načíta základný štýl (style.css), po ňom nasledujú zaujímavé "argumenty", ktoré ovplyvňujú rozhodovanie prehliadačov.

Ak prídete na stránku z Internet Exploreru 7, načíta sa Vám ešte aj css IE7.css, ak z verzie nižšej ako 7, to jest 6, načíta sa Vám IE6.css a ak nebodaj z IE 5, tak IE5.css.

To, čo obsahujú jednotlivé CSS si povieme v ďalších článkoch.