CLEARFiX - xhtml, css, javascript, seo

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

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í