Moderní web

Abychom nemuseli neustále závistivě pošilhávat do ciziny, rozhodl jsem se vcelku nedávno, dobrovolně a svobodně, vyrobit projekt, který by se měl stát přibližnou obdobou CSS galerií (jako je CSS Vault nebo CSS Beauty), ovšem s jedním základním rozdílem.

Od podobných projektů se mé internetové děcko totiž odlišuje v jedné zásadní věci – není takzvanou show jednoho muže, který může mít zcela odlišný vkus od většiny brouzdající veřejnosti, ale o výběru a hodnocení webů zařazených do této, doufám, prestižní galerie, bude rozhodovat odborná porota složená z respektovaných jmen českého webdesignu.

Rád bych všem zúčastněným, které jsem svým rozhodnutím uvrtal do mého projektu a přidělal jim tak trochu neplacené práce navíc, veřejně poděkoval. Jejich jména naleznete na Moderním webu, přičemž jsme jinak mužsky jednotvárnou komisi obohatili (na mé výslovné přání) o ženský prvek. Dvě dámy v porotě by měly zajistit, že součástí galerie nebudou jenom technicky dokonalé, ale jinak nudně hranaté a neútulné weby.

Víc se šířit nebudu, jenom doufám, že projekt Moderní web bude mít alespoň nějaký smysl. Především v tom, aby nutil amatérské (ale i profesionální) tvůrce k dosažení co největší kvality jejich produktů. Český internet si to zaslouží.

22. 2. 2005 14:34 – Trvalý odkazKomentáře (1)

Patička webu vždy dole

Už poněkolikáté se na diskusních fórech nebo v mé emailové schránce objevil následující dotaz:

„Potřebuju udělat toto pomocí css: když je stránka delši než okno prohlížeče, chová se normálně, pokud je ale kratší, natáhne se střední část a patička se „přilepí“ ke spodnímu okraji prohlážeče.. Nutno aby fungovalo jak v IE6, tak i v Opeře 7 a firefoxu, diky“

Princip je velmi jednoduchý, takže bez zbytečných okecávek vzhůru do boje. Ukáži vám, jak udržet patičku vždy dole dle výše uvedeného zadání na ukázkovém webu s pevnou šířkou (ale princip je stejný i pokud budete stavět web s plovoucí šířkou) a zároveň dokáži, že se lze obejít bez jakýchkoliv CSS hacků. Zdrojové kódy ukázek si můžete stáhnout včetně použitých obrázků.

Stylový předpis bude vypadat nějak takto:

html, body {
height: 100%;
}

K tomu není co dodat, tento trik už je dávno známý a používá se především, potřebujete-li nějaký blok vycentrovat vertikálně.

body {
font-family: Tahoma, Verdana, Arial, lucida, sans-serif;
background: #fff;
color: #000;
font-size: x-small;
text-align: center;
min-width: 760px;
line-height: 1.5;
}

html>body {
font-size: small;
}

Základní definice BODY na níž není nic divného a nepochopitelného, alespoň doufám.

#main {
width: 760px;
margin: 0 auto;
text-align: left;
background: #ebe9e9 url("main.gif") repeat-y;
min-height: 100%;
height: 100%;
position: relative;
 }

Základním principem, jak udržet patičku dole, je vložit ji absolutně do nějakého bloku, v našem případě s názvem main, kterému nastavíme relativní pozici a tím pádem zajistíme, že všechny další blokové prvky, které budeme pozicovat absolutně, se budou držet v jeho rámci. Tomuto hlavnímu bloku nastavíme výšku na 100%, ale kvůli Opeře a Mozille musíme přidat i minimální výšku (min-height), jinak by tyto moderní prohlížeče prostě nastavily výšku bloku na velikost okna prohlížeče a případný delší text by z jeho vnitřku přetékal.

 body>#main {
 height: auto;
 }

Uvedený zápis nezná Internet Explorer, čehož využijeme a zrušíme nastavení výšky height pro Mozillu a Operu. Jinak řečeno – definice height: 100% definovaná pro blok main bude platná jenom pro Internet Explorer, zatímco modernější prohlížeče nastaví jako minimální výšku 100% a height: auto zajistí, že při větším obsahu se výška bloku natáhne.

/* Opera 9.5+  malý hack  */
*|html[xmlns*=""]  #main { 
     display: table;
	 height: 100% 
} 
/* Opera 9.5+  malý hack  */
#head {
color: #fff;
background: #d0cdcd url("head.gif") no-repeat;
height: 183px;
 }

Definice hlavičky s obrázkovým pozadím nepřináší nic nového, je zde jenom do počtu.

#text {
padding: 15px 175px 85px 175px;
 }

Blokový prvek s názvem text bude plnit dvě funkce. Za prvé nám zajistí snadnější formátování obsahu a za druhé nastaví dolní výplň (padding) tak, aby text nezasahoval do patičky (protože ta bude pozicována absolutně a tím pádem bude vyjmuta z toku dokumentu). Řečeno lidsky – dolní výplň 85px nastavená pro blok text je o něco větší, než nastavená výška samotné patičky.

#footer {
width: 760px;
height: 60px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
background: #facf00 url("foot.gif") no-repeat;
text-align: center;
}

Definice patičky už je pak triviální, nastavíme jí šířku dle webu, výšku jakou potřebujeme a umístíme ji absolutně na spodní hranu nadřazeného bloku main. A to je vlastně celá věda.

Nejlépe celý princip asi pochopíte na ukázkách, které jsem pro vás připravil a které si můžete stáhnout, abyste se mohli potrápit při jejich studiu.

Aktualizováno 7. 1. 2010. Testováno pod IE 6, IE 7, IE 8, Opera 9.64, Firefox 3, Firefox 3.5, Safari 3.2, Google Chrome

Aktualizováno 26. 6. 2012. Přestože zde uvedené řešení je stále funkční, je fousaté a nemoderní. Existuje i elegantnější postup zvaný CSS Sticky Footer.

18. 2. 2005 09:56 – Trvalý odkaz

Pohled pod kapotu nové verze Internet Exploreru

Mezi zasvěcenými se už pár dní šušká, že příchod fungl nového prohlížeče z dílny giganta softwarového průmyslu je na spadnutí. Jak už to mezi novináři, bloggery a nově i nebloggery bývá, díky zvolené utajovací taktice výrobní firmy se záhy vyrojila nejen spousta fám, hypotéz, polopravd až nepravd, ale také toužebných očekávání. Díky kvalitní záškodnické práci nejmenovaného špionážního zdroje přímo od pramene, jehož zápisky mám k dispozici, budu nejspíše první (a možná také poslední), kdo vám zprostředkuje exkluzivní přístup k nezkresleným informacím a faktům, provázející vývoj toužebně očekávaného browseru.

Především je nutné poznamenat, že vzhledem k dlouhodobé sžíravé (ale také pravdivé) kritice, bylo prvotním cílem vývojářů nejen odstranit stávající bezpečnostní díry a propasti, ale zároveň žádné nové potencionální prohřešky proti bezpečnosti nevyrobit. Především tedy byli z pracovního týmu vyřazeni všichni, kteří se jmenovali Vik nebo Rod a administrativním nedopatřením také půvabná, leč výkonná sekretářka Viky, což způsobilo rozruch především v řadách zarytých feministek a potvrdilo se tak, že chlapi jsou šovinistická prasata. Což je zajímavý a neočekávaný důsledek potřebné technologické inovace.

Nepovšimnuti ale nezůstanou ani tvůrci webových stránek, kteří naříkají už bezmála celé desetiletí, a proto nepřekvapí, že vlajkovou lodí jedné z mnoha programátorských genialit bude takzvaný SOHA – softwarový hlavový airbag. Ten se automaticky aktivuje pokaždé, když v rámci výroby zdrojového kódu začne zoufalý webdesigner mlátit čelem o nevinné sklo monitoru a vzývat všechny bohy internetu včetně „Toho, který mluví ze sna“. Součástí jmenované bezpečnostní úpravy je i ekonomický rozbor, který stanoví míru finančního rizika v případném arbitrážním řízení s výrobci zobrazovacích zařízení, kteří díky delší životnosti obrazovek přijdou o nezanedbatelnou část zisků.

Další zajímavou vychytávkou bude technologie, která již nějaký ten pátek funguje v automobilovém průmyslu. Ano – tušíte správně. Jedná se o takzvané zamykání zpátečky. Něco podobného dopřejí nyní tvůrci prohlížeče i nebohému brouzdalovi internetem a to tak, že nemilosrdně, bez váhání a jednou provždy zlikvidují problematické tlačítko Zpět. Uživatel tím pádem bude mít větší pocit bezpečí, protože se už nikdy nebude moci vrátit tam, kde přišel k úhoně a pochytil nějakého toho vira nebo trojského koně. Šéf odpovědný za propagaci a marketing ale získá pocit, že definitivní odstranění často používaného tlačítka je příliš radikálním a nezvratným krokem a propašuje do už tak nepřehledné navigační lišty alespoň tlačítko nazvané Zpětné zrcátko. Tedy – vrátit se nemůžete, ale podívat se, kde jste byli, vám umožněno bude. Pokrok se zkrátka zastavit nedá.

Ačkoliv šéf vývojového týmu jakékoliv nařčení z pochybné inspirace odmítá, fakt je, že další bezpečnostní perla, kterou bude nový prohlížeč vybaven, nápadně připomíná reklamu na létající hygienické vložky s křidélky. Opravdu, díky jejich aplikaci se ženy cítí bezpečně nejen vsedě, vkleče nebo vstoje, ale i vleže s levou nohou skrčmo a pravou vzpažmo se záklonem vlevo. Nebo vpravo. Reklamní slogan Allways IE zdomácní velmi brzy a stane se populárním i mezi mužskou částí lidské populace, která do té doby vášnivě jakákoliv křidélka odmítala.

Tím samozřejmě výčet novinek nekončí, ale v rámci zachování stabilní návštěvnosti svého blábolníku jsem se rozhodl, že další informace vám budu dávkovat jenom postupně.

17. 2. 2005 21:10 – Trvalý odkazKomentáře (10)

CLASSické weby

Jistě se vám už mnohokráte stalo, že jste při procházení rozličných fór a všemožných rubrik nesoucích název „kritika webu“ narazili na weby, jimž já osobně říkám CLASSicky poDIVné. Ano, jedná se povětšinou o svěží dílka začátečníků, kteří prozatím dostatečně nepronikli do tajů CSS pozicování a na nějaký ten DIV navíc nehledí. Což jim osobně nemám za zlé, neboť i já začínal podobným způsobem.

Bohužel ale existuje i dost velké procento filutů, kteří si říkají profesionálové, a ti flikují takzvané beztabulkové CSS weby dodnes. Ale proč o tom píši. Právě dnes mě jeden z mých kolegů požádal, zda bych mu nepomohl s malým problémkem při tvorbě elektronického obchodu. Nic zlého netuše jsem předběžně souhlasil a bleskem mi byl doručen email se zdrojovými kódy. Přátelé, já se nestačil divit. Šance, že se v houštinách jejich html a css pralesa vyznám, vzala záhy za své, protože po necelých dvou minutách jsem se ve fikaně pojmenovaných classech ztratil jak Jeníček s Mařenkou. S politováním jsem tedy byl nucen kolegu odmítnout, protože jsem sice hlava chytrá a vynalézavá, ale do génia mám daleko.

Napadla mě přitom jedna hříšná myšlenka, kterou jsem si okamžitě (místo oběda) vyzkoušel. Zadání, které jsem si sám pro sebe stanovil, znělo nějak takto: Lze vyrobit slušně vypadající layout webu s použitím jednoho jediného DIVU?

Chvilku jsem zápolil s jedním grafickým designem, který mi prozatím zůstal ležet ladem. Nakonec jsem splodil tento jednoduchý CSS layout a postačil mi osamocený DIV následovaný sirotkem se jménem SPAN. Víc nebylo třeba.

Snad tato drobná ukázka poslouží všem začínajícím jako příklad, že správným využitím elementů, které nám skýtá HTML (potažmo XHTML), lze ušetřit spoustu cenných bajtíků a vyrobit kód, ve kterém se vyzná i mírně retardovaný webdesigner. A to při dodržení všech zásad přístupného webu, jak po nás žádá kupříkladu ctěný pan Špinar.

10. 2. 2005 15:17 – Trvalý odkazKomentáře (17)

Odborník žasne, zákazník se diví

S nevyžádanou poštou, čili spamem, jako odpadním produktem otevřeného prostředí internetu se jistě setkal každý z vás. Dnes a denně do mé schránky přistávají neodolatelné nabídky slibující mi šťastný a spokojený život za nepatrný až mrňavý peníz. Převážnou většinu těchto dobře míněných nabídek zachytí geniální antispamový filtr. Nečtu je a přesto jsem šťastný a spokojený. Koneckonců modré pilulky pro povzbuzení sexuálního apetytu dosud nepotřebuji, s velikostí svého mužství, ať v klidovém či pohotovostním stavu, jsme já i má družka vcelku spokojeni, tak proč si s tím lámat hlavu, že?

Jeden spamík, který kdovíjak proklouzl mým inteligentním strážcem čistoty emailové schránky, se ale týkal přímo řemesla, jemuž se věnuji, což je hlavním důvodem, proč dnešní spotík píšu. Při svých toulkách českým internetem jsem už natrefil na spoustu roztomilých hlášek, kterým webdesigneři zdůvodňovali nefunkčnost jejich geniálních výtvorů. V drtivé většině případů byl viníkem nešťastný uživatel, který používá cokoliv jiného, než tvůrcem používaný a evropskou unií schválený prohlížeč. Webdesignerská firma, kterou mám dnes tu čest vám představit ale vede můj pomyslný top ten absolutně zbytečných canců, které případného zákazníka vůbec nezajímají. Ostatně, posuďte sami. Pokud se náhodou mezi vámi najde někdo, komu se jejich prezentační web zobrazí korektně, dávám k dispozici screenshot, abyste nebyli ochuzeni o stylistickou perlu. Jinými slovy ze mě autoři vyrobili nesvéprávného idiota, který si dovolil používat poněkud nestandardní nastavení svého prohlížeče, a co více – dokonce disponuji osobním firewallem! Huh. Tímto se webdesignerské firmě co nejponíženěji omlouvám a pevně věřím, že nenajdou žádného dalšího zákazníka.

Jejich dílo je totiž klasickým důkazem faktu, že všechny řeči o přístupnosti prezentované respektovanými tvářemi českého internetu, nejsou jenom planými žvásty. Vy všichni, kteří tak či onak koketujete s webdesignerským řemeslem si prosím neberte z prezentovaného dílka inspiraci, naopak považujte jej za slepou cestu, na jejímž konci končí veškerá sranda.

10. 2. 2005 08:26 – Trvalý odkazKomentáře (8)

Nabídka blábolů

Odkazy