CLEARFiX - xhtml, css, javascript, seo

Typický problém začínajícího kodéra je ten, že se snaží dát jednomu prvku, např. DIVu, šířku, výšku, vnitřní odsazení, okraj a vnější odsazení naraz, neboli nastaví např.:

div{
width:300px;
height:300px;
padding:10px 15px;
margin:10px 20px;
}

tomuto nastavení se říká BOX model a pro názornost jak vypadá:

Na wikipedii je k nalezení obrázek na stránce Internet Explorer box model bug, kde je pěkně ukázáno jak si W3C představuje interpretaci a jak ho Internet Explorer zobrazuje, typickým příkladem je, že webdesigner používá pro testování stránky Mozilla Firefox a v tom přece vše jede jak má, ale pokud si poté stránku zobrazí v IE tak ejhle, najednou stránka nevypadá jak má! Je pár triků jak se to dá obejtí, např. použitím jiného DOCTYPE a přepnutí IE do správného (validního) zobrazení, a nebo se naučíme používat tzv. Matrjošku, místo zbytečného řečnění, ukáži rovnou postup!
HTML:

text

CSS:

#box{
width:300px;
height:300px;
margin:10px 20px;
}
#box #in_box{
padding:10px 15px;
}

Tímto docílíme to, že se ve všech prohlížečích nastaví výška a šířka boxu na 300px, můžeme nastavit i margin, protože ten se k šířce a výšce nepřipočítává, to se ale nedá říct o paddingu, který nastavíme divu uvnitř. Tímto docílíme správnou funkčnost ve všech prohlížečích.
Doufám, že jsem tento problém vysvětlit srozumitelně pokud ne, tak buď máte otevřené komentáře pod článkem a nebo si můžete další infromace vyhledat na google

Každý kdo používá nebo chce používat vlasní mapu na svých stránkách, musí si ke každému místu na mapě nalést GPS souřadnice.
Při prvním testování map na svých stránkách jsem používal „vytahování“ souřadnic z odkazu, který mi po vyhledání google nabídnul, ale tento způsob je nepřesný, a neurčí místo tak, jak bych si představoval.

Do dnes jsem používal způsob, který fungoval, ale byl složitější na ovládání a docela při větší práci zdržoval, princip spočíval v tom, že jsem si prvně vyhledal místo na mapy.cz, kliknul si na vyhledané místo, potom na GPS:

GPS souřadnice vykopíroval a vložil do maps.google.com, tím se mi udělal přepočet, a vrchní (převedné) číslo jsem zkopíroval a vložil do API na svých stránkách:

Toto jsem dělal vždy, když jsem chtěl zjisti GPS nějakého místa, až dnes mi Jindra ukázal jeden úžasný nástroj, díky kterému se vše zjednodušší

Jde v podstatě jen o to, že si vytvoříme novou záložku, do které si vložíme na místo adresy tento kousek kódu:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Po kliknutí na tuto záložku (v případě že jsem na stránce maps.google.com), se nám zobrazí GPS souřadnice středu vyhledaného místa:

Na obrázku jde krásně vidět, že stejné místo, které jsem vyhledaval předchozím způsobem, má stejné souřadnice jako zavolání na stránce této funkce. Pro ty co stále nechápou jak může něco takového fungovat, tak jde jen o to, že se na stránce zavolá javascriptová funkce, která vytáhne střed mapy, takže pokud pohnu mapou a poté teprve kliknu na záložku, tak GPS souřadnice budou jiné.

Doufám, že vám to ulehčí práci tak jako mě, pokud někdo používáte něco podobného, nebo máte svůj vlastní způsob vyhledávání GPS souřadnic, tak se neváhejte pochlubit do komentářů. Díky

Ří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.