CLEARFiX - xhtml, css, javascript, seo

V tomto článku bych chtěl vysvětlit co je potřeba k tomu, aby si kodér mohl nastylovat vlastní vzhled bubliny, ve které se zobrazují informace po kliknutí na ikonku na mapě, pro názornost, ukážu příklad na nově spuštěném webu www.zetor.cz, kde v kontaktech naleznete, po kliknutí na záložku „Jak k nám“, google mapu. Když si kliknete na jednu z ikon, umístěných na mapě, tak zjistíte, že použitý vzhled je trochu jiný, a upravený.

Je zbytečné, abych zde opět sáhodlouze popisoval, jak vše udělat, a popisoval krok po kroku, proto sem hodím pouze odkaz na příklady, na kterých je pěkně vidět, že stačí pouze připojit do dokumentu jeden Javascriptový soubor, a poté už si můžete bublinu stylovat dle Vaší libosti. Pokud Vám nebude něco jasné nebo budete mít s něčím problém, tak buď se zkuste podívat do zdrojových kódů na www.zetor.cz a nebo napište do komentářů, pokud budu vědět, rád poradím

Vůbec nevím jak je tento princip účinný nebo jak moc googlu doopravdy pomáhám, ale jsem naučený, že první co musí být v kodu je text samotné stránky, a poté např. hlavička, levý sloupce / pravý sloupec, patička (někdy tento způsob nepoužiji 100% kvůli hlavičce a problematickému sepisování).

Typický příklad rozložení stránky:

HTML kód by v normálním případě vypadal:

	hlavička



	levé menu


	text stránky - obsah



	patička

CSS kód:

#header{
width:960px;
height:150px;
}
#content{
width:960px;
padding:20px 0px;
}
#content #menu{
width:220px;
float:left;
}
#content #text{
width:720px;
float:right;
}
#footer{
width:960px;
height:100px;
}

Takto to napíše většina kodéru, kteří postupují blok po bloku, ale jak jsem řekl víše, mi chceme docílit toho, aby text byl na prvním místě, proto by náš kod měl vypadat:

	text stránky - obsah


	levé menu



	hlavička


	patička

Abychom docíly něčeho podobného, tak css kod budeme muste trochu poladit:

#header{
width:960px;
height:150px;
/* timto dostaneme hlavicku opet nahoru, ale cela stranka pote musi byt
obalena jeste jednim divem, ktery bude mit sirku 960px, a
nastaven position:relative */
position:absolute;
top:0px;
left:0px;
}
#content{
width:960px;
padding:170px 0px 20px 0px; /* zvysil se padding + 150px */
}
#content #menu{
width:220px;
float:left;
}
#content #text{
width:720px;
float:right;
}
#footer{
width:960px;
height:100px;
}

Nevím zda ještě musím nějak kod dál okecávat změny jsem okomentoval v CSS, takže to bude asi všem hned jasné co se udělalo, jediné co se musí ještě do HTML přidat je jeden DIV, který bude celou stránku obalovat, ale ten tam bude každý mít už předtím, takže jediné co se musí nastavit je position:relative, ke kterému se poté bude pozicovat absolutně #header.
I kdyby to stále nebylo někomu dost jasné, tak tuto techniku jsem nedávno použil na stránce www.pohony-menice.cz.
Komentáře jsou Vám otevřené, takže se nebojte napsat svoje zkušenosti, techniky, účinnost tohoto zápisu

Typický problém začínajícího kodéra je ten, že se snaží dát jednomu prvku, např. DIVu, šířku, výšku, vnitřní odsazení, okraj a vnější odsazení naraz, neboli nastaví např.:

div{
width:300px;
height:300px;
padding:10px 15px;
margin:10px 20px;
}

tomuto nastavení se říká BOX model a pro názornost jak vypadá:

Na wikipedii je k nalezení obrázek na stránce Internet Explorer box model bug, kde je pěkně ukázáno jak si W3C představuje interpretaci a jak ho Internet Explorer zobrazuje, typickým příkladem je, že webdesigner používá pro testování stránky Mozilla Firefox a v tom přece vše jede jak má, ale pokud si poté stránku zobrazí v IE tak ejhle, najednou stránka nevypadá jak má! Je pár triků jak se to dá obejtí, např. použitím jiného DOCTYPE a přepnutí IE do správného (validního) zobrazení, a nebo se naučíme používat tzv. Matrjošku, místo zbytečného řečnění, ukáži rovnou postup!
HTML:

text

CSS:

#box{
width:300px;
height:300px;
margin:10px 20px;
}
#box #in_box{
padding:10px 15px;
}

Tímto docílíme to, že se ve všech prohlížečích nastaví výška a šířka boxu na 300px, můžeme nastavit i margin, protože ten se k šířce a výšce nepřipočítává, to se ale nedá říct o paddingu, který nastavíme divu uvnitř. Tímto docílíme správnou funkčnost ve všech prohlížečích.
Doufám, že jsem tento problém vysvětlit srozumitelně pokud ne, tak buď máte otevřené komentáře pod článkem a nebo si můžete další infromace vyhledat na google

Říkáte si k čemu to může být takové „sloučení více obrázků v jeden“, ale např. facebook, youtube, amazon a určitě spousta dalších moc dobře ví. Jde v podstatě o to, že více obrázků, které vkládáme do stránky přes CSS (background:ur(xxx.gif)), můžeme sloučit do jednoho společného obrázku, a tím ulehčit stránce jednak datově ale i počtem samotných dotazů na jednotlivé obrázky na server.

Příklady sloučení

Jak už jsem zmiňoval výše, je pár známých webů, které tento systém používají:
facebook.com
youtube.com
amazon.com

jak vidíte, tak všechny obrázky (kromě těch, které používají jako opakování buď repeat-x nebo repeat-y, zálaží na pozicování obrázků), jsou v jednom souborů, tím se docílí to, že se načte jeden obrázek, ve kterém jsou všechny obrázky, které se používají na této stránce.
Touto úpravou mají dohromady menší velikost, než kdyby byl každý obrázek zvlášť a tím pádem je na server pouze jeden dotaz.

Ale jeden z největších důvodů, kvůli kterému tuto techniku začínám postupně využívat a kterou Vám dnes ukážu, jsou odkazy, tlačítka nebo prostě prvky, které se po najetí změní v jiný obrázek, pokud neuděláte to, že je dáte dohromady v jeden společný, tak se při najetí stane to, že obrázek „přeblikne“, jelikož se načítá druhý, který má vytoužený efekt a uživatel tím pozná, že najel na prvek, který něco po kliknutí udělá.

Způsob jakým tento problém řeším já je na stránce www.nafukovacilode.cz.
Takto vypadá obrázek a takto zdrojový kod:

a:link,
a:visited,
a:hover {
width:267px;
height:66px;
display:block;
text-decoration:none;
position:absolute;
right:35px;
top:37px;
background: url(../img/homePageAction-more-bg.jpg) top left no-repeat;
text-indent:-9999px;
}
a:hover {
background: url(../img/homePageAction-more-bg.jpg) bottom left no-repeat;
}

Tímto se zaručí to, že po přejetí nad odkazem Vám odkaz neproblikne tím, jak se druhý obrázek dočítá.
Doufám, že jsem aspoň pár kodérům ukázal novou techniku, která jim pomůže zdokonalit kód, pokud by jste někdo měl nějaký dotaz, nebo věděl lepší řešení tak komentáře jsou Vám otevřené

P.s: Až vyzkouším jeden nástroj, který by toto všechno měl ulehčit, tak se o něj určitě rád podělím

Dříve, než jsem vůbec tušil nebo věděl něco o Javascriptových frameworcích, tak jsem používal pro náhled obrázku a galerií Javascriptový plugin LightBox, poté LightBox 2, který běží na JS Frameworku Scriptaculous. Poté se mi do cesty připletl jQuery, a tak se mi zdálo zbytečné mít na stránce includované dva JS Frameworky, kde jeden budu používat na „fičury“ a druhý na galerii, proto jsem začal pátrat a našel jsem dva LightBox pluginy pro jQuery: ThickBox a prettyPhoto! Vítězně vyšel prettyPhoto.

Halóóó já jsem prettyPhoto

Jak už bylo zmíněno, dá se použít jak na náhled jedné fotky tak na postupne proklikávání celou galerii, jenže mimo to umí i zobrazit Youtube videa, QuickTime videa nebo externí webovou stránku. K funkci mu stačí připojit 15kB JS soubor (v komprimované podobě), 10kB CSS soubor a obrázky (další, předchozí, zavřít…).
Samotné volání se provádí přes přidání parametru rel=“" na odkaz a zaktivnění pluginu včetně základního nastavení pomocí JS:

$(document).ready(function(){
	$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});

Tímto nastavím parametr, kterým musí začínat atribut rel, v tomto případě prettyPhoto. Dále si můžete nastavit jak rychle se má animovat, jaká má být průhlednost kolem fotky, zobrazení title z odkazu…, vše najdete v kompletní dokumentaci k projektu.

Zápis do HTML potom bude vypadat takto:
Pro jednotlivé zobrazení fotky:

Pro zobrazení galerie:

Toť asi vše o prettyPhotu, kdyby jste měli jakýkoliv problém nebo se jen chtěli podělit o vlastní zkušenosti s podobnými pluginy, neváhejte mi napsat do komentářů…