Martin Michálek Martin Michálek  – 29. 3. 2015

Kdo je webový kodér

Technik, který oživuje uživatelská rozhraní webové prezentace nebo webové aplikace.

Jeho doménou je webový frontend, tedy technologie v prohlížečích, ale je potřeba jej odlišit od frontend vývojáře. Ten píše frontend aplikace a daleko více se pohybuje v javascriptovém kódu. Doménou kodéra je především CSS, HTML a související technologie.

Kodér má přesah do oborů, se kterými spolupracuje na podkladech pro svou práci – UX, webová grafika. Také do oborů, kterým svou práci předává – frontend či backend programování, mírně třeba i do správy serverů.

Webovému kodérovi též můžeme říkat frontend kodér, vývojář uživatelského rozhraní (UI) nebo třeba frontendista. Dříve měla velmi podobnou náplň pozice „webmaster“, ale její používání dnes je už překonané.

Poznámky k textu

  • Z opačné strany bere potřebné znalosti výstupní checklist kodéra.
  • Následující prosím berte více jako autorův subjektivní výběr než přesnou a precizně strukturovanou osnovu pro samostudium.
  • Body v jednotlivých sekcích jsou řazeny podle důležitosti.
  • Jako [nové] jsou označeny znalosti, které přibyly v posledních cca 2-3 letech.
  • A pozor, skutečného profíka z kodéra neudělá šíře technických znalostí, ale vynikající soft-skills.

Co by měl umět webový kodér

1. technické znalosti

HTML

  • SEO: osnova dokumentu, <title>, <meta description…>.
  • [nové] Sémantické metaznačky: Facebook Open Graph a Twitter Cards; Google Schema.org a Rich Snippets; favicon a touchicon. (školení)
  • [nové] Audio a video: HTML5 formáty audia a videa, které vyžadují aktuální prohlížeče, případně Flash.
  • [nové] Canvas: principy; k čemu je dobrý.
  • [nové] Povědomí o základních HTML5 aplikačních API: local/sessionStorage; History API; Geolocation API; komunikace: WebSockets, ServerSentEvents; offline: AppCache. (školení)

CSS

  • Znalost všech prakticky použitelných vlastností ze specifikace CSS2.
  • [nové] CSS3 vlastnosti, které jsou podle CSS Working Group ve fázi W3C Recommendation (REC) nebo Proposed Recommendation (PR). (školení)
  • Stavba layoutu pomocí CSS: kategorizace podle technologických prostředků – float, inline-block, display:table, position:absolute, flexbox; kategorizace podle typu layoutu: fixní, fluidní, responzivní.
  • Kaskáda (specifičnost selektoru, důležitost a pořadí vlastností), dědičnost v kontextu CSS. Hodnoty inherit, initial, unset, revertvlastnost all.
  • Jednotky (např. px, em, rem, procenta, cm, atd.): jejich klady, zápory a možné scénáře použití.
  • Hodnoty vlastnosti display.
  • Prakticky použitelné CSS selektorypseudotřídy.

Přístupnost

  • [nové] Standard WAI-ARIA.
  • Standard WCAG 2.0. Vyhláška o přístupnosti pro weby státní správy.
  • Handicapovaní uživatelé: jejich potřeby z hlediska práce s webem; jak uživatelé ovládají zařízení a prohlížeče.
  • Přístupný kód: techniky kódování pro zpřístupnění webových stránek; oddělení struktury od vizuální prezentace; ovládání pouze z klávesnice; správné skrývání obsahu; textové alternativy; přístupnost obsahu pro vnímání více smysly; ošetření dynamických změn obsahu.
  • Co jsou asistivní technologie a jak fungují.
  • Nástroje pro testování přístupnosti: toolbary pro prohlížeče (například WAVE, Web Developer Toolbar, HeadingsMap, atd.; desktopové nástroje (například Colour Contrast Analyzer); asistivní technologie (například odečítače obrazovky pro nevidomé či zvětšovací programy pro slabozraké).

Základy Javascriptu

  • [nové] Základní vlastnosti JavaScriptu: proměnné, typy, operátory, podmínky, cykly, pole, objekty.
  • [nové] DOM: rozdíly mezi HTML zdrojem a DOM; nalezení, přidání, odebrání elementu, změna jeho vlastností v rozsahu W3Schools; události: základní DOM události a způsob jejich odchytávání.
  • AJAX a princip jeho fungování.
  • jQuery a podobné knihovny: znalost scénářů pro použití; výhody a nevýhody ve srovnání s čistým JavaScriptem; základní vlastnosti: selektory, události, ajax, použití plug-inů.

Prohlížeče

Obrázky

SVG

  • [nové] Základy pro statickou grafiku: způsoby vložení do stránky, fallbacky, vytvoření SVG, srovnání s ikonfonty.
  • [nové] Typy využití a jejich technické provedení: ilustrace, ikony, celé UI komponenty, stylování formulářů, grafy, animace, efekty textu.

Animace

2. pracovní postupy

Responzivní design

Interpretace podkladů od UX/grafika:

  • Konvenční zdroje z grafických editorů nebo převáděcí nástroje: Photoshop nebo Fireworks nebo Sketch nebo Avocode.
  • Techniky exportu podkladů a optimalizace výstupů.
  • [nové] Alternativní metody a postupy: wireframy, Style Tiles, Atomic Design a systémy komponent obecně.

Progressive enhancement

Frontend architektura

  • [nové] Systémy zápisu a organizace: OOCSS, SMACSS, BEM.
  • [nové] Modulární UI systémy, tvorba style guides.

Efektivita

Verzování

Testování

Typologie projektů

  • Prezentační stránky, microsites, webové aplikace, HTML e-maily… Jejich specifika a rozdíl v používaných nástrojích a přístupech.

3. přesahy do dalších oborů

Typografie

  • Proč je typografie důležitá
  • Základní pojmy: rodina, řez, typy písem, prostrkání, výška/šířka řádku.
  • Základní typografická pravidla a typografické neduhy na webu: uvozovky, pomlčky, jednopísmenné předložky na konci řádku.
  • Soubory s fonty: systémové fonty na platformách; zdroje webových fontů: Google Fonts, Typekit, vlastní a další.

UX, použitelnost

  • Základní procesy a důvody pro ně: uživatelský výzkum, informační architektura, prototypování, uživatelské testování, A/B testování.

Opensource redakční systémy a hotová řešení

  • Kdy je používat, jaké to má výhody a nevýhody?
  • Základní povědomí o scénářích kdy je vhodné použít WordPress, Drupal, Joomla, ZenCart…
  • Hotové šablony: povědomí o scénářích kdy je vhodné je využít.

Webové programování obecně

  • MVC frameworky: povědomí o backendových (Nette, Zend, Rails, Django…) i frontendových (Angular.js, viz školení, Ember nebo ekosystém kolem React).
  • Fungování protokolu HTTP a chybové stránky 4x a 5x.
  • LAMP architektura a její alternativy.
  • Šablonovací jazyky obecně a znalost konkrétního (Smarty, Latte, Jinja…)

Domény

  • Nastavení domény: A, AAAA, CNAME, MX záznamy.
  • Přesměrování bez adresy bez konečného /, přesměrování „bez www.“ na „s www.“

Legislativa

Google Analytics a Search Console

Původní verze textu vznikla jako draft pro popis profese pro Národní soustavu kvalifikací. Za kapitolu o přístupnosti autor děkuje Radkovi Pavlíčkovi (Poslepu.cz). Za spolupráci na kvalifikačním standardu kromě Radka i Vojtovi Outulnému a Jaroslavu Zelenému. Za podněty k draftu pak Robinu Pokornému, Tomáši MusioloviMartinu Staňkovi.

Pokud si něco v obsahu zaslouží změnu, upravte soubor na Githubu nebo tam vyplňte issue.