CLEARFiX - xhtml, css, javascript, seo

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

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