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

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.

Reklama: Vzhůru do lepší práce

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

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, dědičnost, specifičnost v kontextu CSS.
  • Jednotky (např. px, em, rem, procenta, cm, atd.): jejich klady, zápory a možné scénáře použití.
  • Prakticky použitelné CSS selektory.

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

  • [nové] Jaké jsou: jádra prohlížečů a jednotlivé prohlížeče v českém a světovém prostředí včetně mobilních.
  • [nové] Fungování prohlížeče: preloader; blokující JS/CSS.
  • Rychlost načítání: základní metody: datový objem stránky, requesty, CSS sprity.
  • [nové] Pokročilá rychlost načítání: Critical Rendering Path; znalost principů lazyloadingu, podmíněné načítání, problému latence mobilních sítí. (školení)

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 emaily… Jejich specifika a rozdíl v používaných nástrojích a přístupech.

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

Typografie

  • 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 Musiolovi a Martinu Staňkovi.

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

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích Responzivní design, Nástroje, CSS, HTML, Rychlost načítání, Frontend frameworky, Prohlížeče.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

NN Group: Jak vylepšit formulářové prvky pro vložení datumu?

9. 2. 2017 na blogu

Stručné shrnutí článku. Jak vylepšit input type=date z pohledu uživatelského.

Veřejná školení

Dnešní webová kodéřina

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 23. února.

9. března Responzivní design
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč