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

Po dokončení a předání webu si většina zákazníků v dnešní době položí otázku, kterou si nenechájí jen pro sebe a zeptejí se i nás (Vás)!? A co SEO? Mám na stránce SEO? Funguje mi SEO? Nastavili jste SEO? Nebo otázky podobného ražení. Pokud se chceme zákazníka zbavit a nechceme mu vysvětlit co to SEO je a že nejde jen tak zapnout, tak mu pošleme zapnutí sea (kde si ho může sám zapnout a jednou týdně si zkontrolovat, zda ho má zapnuté ) a nebo si prostě otevřeme pár stránek ke kontrole základních parametrů stránky, díky kterým si ověříme, zda jsme na něco nezapomněli.

SEO nástroje

První nástroj najdete na adrese seo.webber.cz, kontroluje zdrojový kod, použití nadpisů, vyplněné základní meta tagy a pár dodatečných informací o stránce. Nemá cenu dál tuto stránku popisovat, každý si může zkusit co vše Vám řekne.

Další nástroj najdete na adrese seo-servis.cz, zde se dozvíte jednak všechny věci, které uměla předchozí stránka, ale navíc dokáže zjistit klíčová slova na stránce, pozice na daná klíčová slova ve vyhledávačích, sílů webu a zpětné odkazy.

Předposlední SEO nástroj najdete na adrese www.nastroje-seo.eu, podobné fuknce jako předchozí nástroj, navíc se můžete zaregistrovat a s delším časovým odstupem sledovat, Vaše umístění a změnu ve vyhledávačích.

Poslední nástroj najdete na adrese www.serp.cz, opět spoustu věcí, které uměli předchozí nástroje , ale navíc umí pěkné srovnání daných klíčových slov v různých vyhledávačích, spíše jen pro sledování a uspokojování sama sebe tím, jak stránka pokračuje nahoru (4 z 5 ředitelů firem doporučují papírové kapesníčky)

SEO statistiky

Mezi první statistiku, nebo spíše stránku, kterou by jste měli sem tam zkontrolovat a používat patří Google Webmaster Tools, po ověření Vašeho webu, začne vyhodnocovat vyhledávaná slova, klíčová slova, nefunkční stránky a podobné statistiky o které by jste se měli zajímat a občas kontrolovat.

Google Analytics, po přidání měřícího kódu do Vašich stránek, Vám změří většinu pohybu uživatelů, nevím zda má cenu zde popisovat jaká nastavení a jaká kouzla se dají s Analytics dělat, takovýchto informací najdete na stránkách mnoho, pokud by byl ale zájem, můžu pár svých postřehů a zkušeností přihodit

Pokud by Vám ani tyto informace nestačily, tak si za nějaký peníz můžete koupit službu, která Vám zmapuje přesné klikání uživatelů na Vaší stránce a vytvoří tzv. Heat Mapu, díky které zjistíte přesně jak se na Vaší stránce uživatelé chovají, co používají, co je naopak nezajímá. Jen podotknu, že je to jeden z mnoha nástrojů, který toto umí.

SEO aplikace

Použití množného čísla je zde asi zbytečné, protože jedinou opravdu použitelnou aplikací, která se týká SEO, je Links Manager, pokud prodáváte / kupujete / vyměňujete odkazy, popřípadě jste vlastníkem více domén a chcete mít o všem přehled, tak přesně pro Vás je tato aplikace určená, jednoduchým způsobem si ověříte funkčnost všech nakoupených nebo vyměněných odkazů, zkontrolujete si kdy Vám expiruje, popřípadě kdy na Vaší stránce bude expirovat něčí reklama. Určitě stojí za vyzkoušení, a pokud chcete mít přehled tak se nedá jinak než doporučit.

SEO odkazy

Nemá cenu abych sem dával všechny odkazy, když si ty, které mě zajímají bookuju na svůj profil na adrese www.bookmarky.cz/users/R4ms3S. Budu rád pokud mi doporučíte v komentářích nějaké další zajímavé odkazy. Díky.

Pro zjednodušení práce kodéra, webdesignera, správce webu, nebo prostě člověka, který se rád zabývá webovými stránkami, se můžou určitě hodit některé addony, které používám.

Firebug

Základní addon, bez kterého se žádný kodér nemůže v dnešní době obejít se jmenuje Firebug! Po nainstalování a spuštění se před Vámi objeví program, přes který můžete procházet samotné HTML, CSS, Javascripty. Navíc má zabudovanou konzoli pro ladění a nacházení chyb v JS, nebo menší aplikaci Síť, přes kterou si změříte rychlost generování HTML, JS a stahování obrázků ze serveru, včetně datové náročnosti celé stránky… Firbug toho umí mnohem více, a proto si bez něj už nedokážu představit práci a ladění stránek.

Web Developer

Web developer slouží k rychlému vypnutí Javascriptu, stylů, obrázků, vytažení hesla uloženého na formuláři, validaci stránky, práci s cookie… Je to nepodstradatelný pomocník, který každý webdesigner musí mít.
BTW díky Michalovi, že mi ho připomněl, jinak bych na jeden z nejdůležitěších addonů zapomněl

HTML Validator

HTML Validátor je nepostradatelná věc, díky které okamžítě víte, zda stránku děláte validní (ideální např, při kontrolování a procházení jednotlivých stránek, které jsou pro Vás klíčové), po nainstalování si doporučuji nastavit v možnostech Algoritmus na SGML parser, popravdě nevím proč, ale bylo mi to tak ze strany programatorů doporučeno ale pomocí w3c validátoru si můžete otestovat, že stejné „nastavení“ používá i w3c validátor. Ještě podotknu, že všechny chyby se zobrazí ve zdrojovém kódu, takže pokud si dáte CTRL+U (zobrazení zdrojového kódu), tak se Vám v přehledné tabulce zobrazí všechny chyby, jejich řešení a každá se Vám v samotném zdrojovém kódu zvýrazní.

ColorZilla

Určitě už jste řešily problém, že jste chtěli z nějakého obrázku vzít tu a tu barvu, popřípadě jí trochu doladit a hodit si jí do stránky, většina lidí to řeší Photoshopem nebo podobným programem, ale pro Firefoxa existuje addon s názvem ColorZilla, po nainstalování se Vám přidá dolů do status baru okýnko s kapátkem a pomocí něj si můžete vybrat jakoukoliv barvu z webové stránky, včetně doladění výsledné barvy v Paletě barev, samozřejmně i tento addon toho umí mnohem více

Window Resizer

Window Resizer slouží k jednoduchému otestování fuknčnosti webové stránky v různých rozlišeních, můžete si tak snadno ověřit, jak se bude stránka chovat a vypadat i na menších rozlišeních než používáte.

IE Tab

Pro rychlé otestování fuknčnosti stránky v Interner Exploreru, používám addon IE Tab, který jednoduchým kliknutím přepne vykreslování stránky, jako kdyby jste zobrazovali stránku v IE.

Závěrem

Toto jsou asi všechny důležité addony, které používám, pokud znáte nějaký, který zde chybí, a mohl by se také ostatním hodit, tak neváhejte a napište do komentářů. Díky.

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