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.

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.

Detailně: layout v Bootstrapu 4

28. 3. 2017 v příručce

Nový systém pro tvorbu rozvržení stránky v chystané verzi Bootstrapu. Pořádně do hloubky.

Rychlost webu je záležitostí designéra

8. 3. 2017 na blogu

Cíle webových grafiků a designérů se moc nemění. Co se ale změnilo, jsou naše znalosti o významu rychlosti webu pro jeho výslednou úspěšnost.

Veřejná školení

Bootstrap pro pokročilé

Bootstrap pro pokročilé

Využijte naplno nejpopulárnější framework pro tvorbu uživatelských rozhraní bez hlubokých znalostí CSS. Příští termín: 20. dubna.

11. května Principy Javascriptu
26. září Dnešní webová kodéřina
5. října Optimalizace rychlosti načítání
19. října SVG

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č