CLEARFiX - xhtml, css, javascript, seo

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

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.

Uživatelé jsou zvyklý, že v sekci kontakty najdou buď odkaz na mapu (mapy.cz, maps.google.com) a nebo přímo mapu do stránek vloženou. V tomto příspěvku budu řešit právě mapy vložené do stránek, použité od maps.google.com.

Použití API od google

Použití mapy do stránek od google najdete na samostatné stránce Google Maps API, kde najdete od generování vlastního kódu pro vaší stránku, přes příklady použití až po referenční příručku. Toto je jen na úvod pro neznalé, teď přejdu k jádru pudla

Kódování a jazykové verze

Ať už se jedná o špatné kodování vašich stránek nebo jazykové mutace a nebo pro Váš dobrý pocit. Tak si můžete nastavit „natvrdo“ jakým jazykem se má mapa vypisovat. Pro vložení mapy do stránek musíme prvně zavolat javascript:

kde XXXXXXXXXX je Váš vygenerovaný API klíč. Pokud vložíte tento script do stránek, tak by se podle nastavení jazyka prohlížeče měl nastavit i jazyk mapy, ale můžeme google o tom přesvědčit tím, že přidáme parametr &hl= za API klíč, pokud tedy chceme, aby mapa byla automaticky v českém jazyce, tak přidáme &hl=cs, anglická verze &hl=en, německá verze &hl=de, atd.
Výsledný kód pro českou verzi:

Závěrem

Doporučuji tedy toto použít např. při ladění jazykové mutace a ukazování funkčnosti zákazníkovi, díky tomuto parametru zaručíte to, aby se vždy zobrazila v daném jazyce. Pokud o google mapách nic nevíte nebo se chcete dozvědět více věcí, tak napište do komentářů.