KODÉR.BLOG

Jsi kodér? Tak mysli!

30 Nov 2011

Setkal jsem se už se spousty kodérama, nejen osobně u nás ve webProgressu, na konferencích, twitteru, ale i při procházení a zkoumání nově spouštěných webů. Při srovnání podobných nebo i zcela odlišných webů je člověku s “brandže” většinou hned jasné s jakým kodérem má tu “čest”. Bez zbytečných dalších řečí přejdu rovnou k věci, oč mi v tomto článku půjde.

Hover, akce, události

Web neděláme jen kvůli tomu, aby vypadal stejně jako na obrázku od grafika, ale i kvůli tomu, aby se mu s ním dobře uživateli pracovalo a celkově z něj měl dobrý dojem. Proto když je odkaz, tlačítko nebo cokoliv co po nejen najetí kurzorem, ale hlavně i stiskem něco dělá, tak si zaslouží minimálně “hover” stav, tak aby uživatel poznal, že po kliknutí SEM, to něco udělá. Nerad dávám příklady, už jen kvůli tomu, že nemám ve zvyku ”hanit” cizí práci, ale příklad webu, kde prostě kodér slušně řečeno selhal: http://www.ecosmetic.cz navíc schází I jakékoliv naznačení v levém sloupci a hlavním menu, že jsem v nějaké sekci, tudy cesta určitě nevede! A další věc na kterou hodně kodérů zapomíná, je přidání na tlačítko submit “cursor: pointer”, celkově pokud něco po kliknutí dělá nějakou akci, je dobré na to dát aspoň ten cursor. Ten kdo někdy sledoval méně zdatného uživatele, při používání a procházení stránek, mi dá určitě za pravdu.

Javascripty, které nejsou pro stránku potřeba

Další věc, kterou člověk najde skoro v každém zdrojovém kódu. Na titulní stránce je nádherný slider, který je tvořen přes nějaký plugin, který má dejme tomu 50KB a tento slider je pouze na titulní stránce webu, tak proč se poté stejný JS volá na všech ostatních stránkách? Nepamatuju si přesné procento lidí, kolik se z celkové návštěvnosti dostane na titulní stránku webu (tuším, že to bylo 30%... za jakoukoliv přesnější informaci budu rád), ale i kdyby to bylo podstastně víc, tak proč pro zbylé uživatele načítat script, které pro chod stránky nepotřebují? V dnešní době smartphonů, kde uživatel zadá něco do google, rovnou dostane odkaz na kontakt, produkt, článek nebo cokoliv jiného, tak proč ho zbytečně zpomalovat a načítat mu zbytečné soubory? Navíc samotné ošetření v nějakém společném JS, ve kterém jsou volání všech (například) jQuery funkcí, je přece tak snadné:

if ($('#slider').length) { /* SAMOTNE VOLANI PLUGINU */}

pokud se na stránce nenachází element s ID “slider”, tak se nic uvnitř neprovede a tím se ošetří pády způsobené nenajitím ve zdrojovém kódu samotného pluginu, který si front-end developer dokáže určitě bez problem ošetřit take, tak aby se na určité stránce nevolal :)

Javascript Vs. ne-javascript, informace se prostě zobrazit musí

Nebudu se zabývat tím kolik uživatelů má nebo nemá zapnutý javascipt (dále už jen JS) ani řešit to, proč ho mají vypnutý, ale tím nejdůležitejším, že jako kodér se musím postarat o to, že odkaz bude fungovat I bez JS. Tohle děláme totiž pro všechny ty co si odkazy zobrazují v novém panelu (např. pomocí kliknutí na kolečko) nebo pro roboty, které tak moc rádi vidíme na našich stránkách a není nic otravnějšího, než když je na odkazu cokoliv začínající na “javascript:” nebo jen “#” a všichni přece moc dobře víme co se stane po kliknutí na takovýto odkaz bez zapnutého JS. Místo dalších zbytečných řečí dám příklad, ze kterého každý pochopí, oč mi jde. Na titulní stránce Kuponetu je slider, který samozřejmně bez zapnutého JS nefunguje, ale samotná přepínací tlačítka jsou “ošetřena” tak, že po klkinutí se zapnutým JS se zobrazuje nový slide a s vypnutým JS přechází na danou stránku. Jednoduché řešení, které zaručí správnou funkčnost. A nejen robot, ale I uživatel se dostane k informacím, kterou chce.

Úpravy na stránkách a verzování souborů

Typický příklad kdy klient zavolá a chce něco změnit na stránkách. Změna se týká nejen samotného zdrojového kódu stránky, ale I CSS a JS souboru, nejlépe I se změnou obrázků, kde některé se načítají v samotném CSS a některé přímo ve stránce. Většina kodéru tuto masivní změnu pozná např. s přechodem podzim / zima, kdy se mění grafika stránek z “letní” na “zimní” vzhled. Pokud vše zapracuje a souborům a obrázkům nechá stejné názvy, tak co se stane když danou stránku navštíví uživatel, který na stránce nedávno byl, popřípadě sám klient? Většina věcí se mu asi nezmění, protože je bude mít nacachované v prohlížeči. Proto se v takovýchto případech “verzuje”. Stačí tedy donutit, aby si prohlížeč stáhnul novější verzi všech souborů a obrázků, které se měnily. U souborů jako jsou CSS a JS ho donutíme snadno, stačí přidat do URL “parametr”, používám dva: “?v=2” nebo “?02”, výsledný zápis tedy bude vypadat takto:

<link rel="stylesheet" href="/content/styles/styles.css?v=2">

Pokud se jedná např. o obrázek volaný v CSS:

background : url(../img/body-bg.png?01) center center repeat black;

Závěrem

Po dlouhé době jsem se opět dopkopal k sepsání obecně známých věcí, které přece každý zná a dodržuje. Mám jich na srdci ještě opravdu hodně, ale nechci dělat 5stránkové eseje a navíc kdoví kolik lidí vůbec tento dočetlo. Snad se vám tedy článek libil a byl přínosem a za jakékoliv sdílení nebo komentář budu rád. Díky :)

P.s: zemři Internet Explorere 6, zemři!

Sdílet:

comments powered by Disqus