CLEARFiX - xhtml, css, javascript, seo

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ářů…

Projekty, které používají google maps api, a jedou už delší dobu, poznáte podle toho, že mají starou verzi ovládacích prvků a tlačítek:

A v javascriptu, který volá mapu najdete podobné dva řádky:

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

A přitom zavolání si nového vzhledu, který používá google na svých mapách, je přitom tak jednoduché!
Stačí tyto dva řádky smazat a nahradit je těmito:

var customUI = map.getDefaultUI();
customUI.controls.scalecontrol = false;
map.setUI(customUI);

Tímto se načte vzhled, který je podstatně hezčí, no posuďte sami:

Dnes jen kratičký článek o jednoduché úpravě a změně Vašich google map

Pokud kódujete stránky pod DOCTYPEm strict, tak asi víte, že už nelze, bez chybové hlášky validátoru, vložit do tagu A parametr target. Řešení je mnoho, ale já používám jedno, které se mi líbí.
Kódéři to obchází tím, že na tag A dají místo parametru target, parametr onclick, ve kterém mají něco takového:

google

Jenže já na většině webů používám výborný Javascript Framework jQuery kvůli galeriím, sliderům, různým „hejbátkám“, „udělátkám“, atd… (pokud nevíte co je jQuery, nebo jak se používá, tak si napište do komentářů, rád sepíšu nějaký článek pro ůvod )
A právě jQuery, umí spoustu věcí ulehčit a zjednodušit, např zde na blogu používám to, že si odkaz, který se má zobrazit v novém okně, označím class=“blank“, jednak mu změním vzhled, že mu přidám ikonku otevření do nového okna, a jednak na něm zavolám javascriptovou funkci, která mi zaručí otevření do nového okna. Dost bylo řečí, příklad by to měl vysvětlit.
HTML:

google

Javascript:

$('.blank').click(function(){
	window.open($(this).attr("href"));
	return false;
});

Většině to bude asi hned jasné, ale komu ne tak vysvětlím.
Po kliknutí na odkaz, který má class=“blank“, se zavolá fuknce $(’.blank’).click(function(), která si vytáhne z odkazu, na který jsem kliknul (this), atribut href (attr(“href“)), a zavolá typické javascriptové window.open, ještě musím zavolat return false, tím zabráním otevření odkazu ve stejném okně. Snad jsem to vysvětlit srozumitelně kdyby ne, opět tu máte komentáře, kde se můžete podělit o připomínky, náměty, nebo lepší řešení. Díky.

Většina kodérů pokud na stránce použije Javascript (dále JS), tak už se nestará o ty, kteří JS mají vypnutý. Na svých webech (jako je např. tento blog) mě to také nezajímá nebo neřeším to do takových extrémů, protože počítám s tím, že moji návštěvníci mají JS zapnutý, ale na webech, které tvoří portfolio naší firmy a jsou pýchou naších referencí, se o uživatelé, kteří mají JS vypnutý starám!

Zvláštní CSS

První věc, kterou se snažím základní prvky ošetřit, je vlastní CSS styl. Takový styl sepíšu vždy až při finalizování samotného webu, kdy ladím právě tyto věci. Pro připojení speciálního CSS, které se bude načítat pouze pokud má uživatel JS zapnutý, používám tento kód, který umístím do hlavičky webu:

Tímto si načtu do zdrojového kódu CSS styl s názvem styles_js.css, ve kterém jsou speciální styly pro zobrazení různých JS fičur.
Pokud tedy např. použiju na webu slider, kterým budu listovat tam a zpět, tak bez JS tento script nebude fungovat, proto do hlavního stylu, ve kterém mám sepsaný celý web např. styles.css, dám tento slider display:none a naopak v souboru slider_js.css dám display:block a tím zaručím správnou funkčnost i pro ty co nemají zapnutý JS.

Odkaz ve kterém je javascript:void(0)

Typický příklad, kdy někdo dělá nějaký script nad odkazem a na něm volá např. onclickem nějakou funkci a aby nemusel ošetřovat odkaz, tak dá do pamateru href=“javascript:void(0)“ tímto udělá to, že při kliknutí na odkaz se nic neudělá, typický příklad:

alert ahoj světe

Toto je opravdu jednoduchý příklad, kde při zapnutém JS se při kliknutí na odkaz zobrazí vyskakovací okno, kde bude napsáno ahoj světe, při vypnutém JS se půjde na stránku alert.html, kde se dozvíme stejnou věc, ale v době internetových prohlížečů se záložkami a zvykem uživatelů je používat se mi tento způsob zdá opravdu příšerný, protože při zapnutém JS a snaha zobrazit stránku do nového okna se nám neudělá nic, a přitom řešení je jednoduché:

ahoj světe

Tímto si uživatel může „vybrat“, buď si klikne a zobrazí se mu vyskakovací okno ahoj světe a nebo si bude chtít zobrazit odkaz do nového okna a tím se mu zobrazí stránka alert.html.

Tyto příklady berte jen jako ukázku, nic jednoduššího mě nenapadlo! Chtěl jsem jen poukázat na základní problémy, na které kodéři zapomínají

V tomto příspěvku budu hlavně odkazovat na zajímavé taháky, které se můžou hodit webdesignerovi, pro rychlé nakouknutí do dané problematiky.

HTML 5

Antonio Lupetti alias Woork připravil přehlednou tabulku s HTML 5 tagy, můžete si dokonce vybrat mezi bílou nebo černou verzí

CSS

Dave Child udělal přehledný tahák pro CSS styly, dokonce ho aktualizoval a proto jsou u něj ke stažení dvě verze, novější V2 a starší V1.

Javascript

Dave Child udělal přehledný tahák pro Javascript.

jQuery

Antonio Lupetti alias Woork udělal přehledný tahák pro jQuery.
G. Scott Olson udělal také tahák pro jQuery

PHP

Dave Child udělal přehledný tahák pro PHP, také ve dvou verzích, aktualizovaná V2 nebo starší V1.

Regulární výrazy

Další co Dave Child udělal jsou regulární výrazy, také ve dvou verzích, novější V2 nebo starší V1.

mod_rewrite

Poslední co jsem našel od Dave Child je tahák pro mod_rewrite, opět ve dvou verzích, novější V2 nebo starší V1.

SEO

Danny Dover na serveru SEOmoz.org publikoval skvělý tahák o SEO.