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.

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

• Prakticky použitelné HTML5 značky a strukturální elementy. Jejich významy podle specifikace.
• Teorie: outline (osnova) dokumentu; rozdíl HTML4, XHTML, HTML5.
• Formuláře: HTML4 formuláře.
• [nové] HTML5 formuláře: použitelné HTML5 typy a atributy (email, tel, url, placeholder); <input required> a HTML5 validace v prohlížeči. (školení)

• 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, revert a vlastnost 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 selektory a pseudotří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

• [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

• Obecné pojmy: vektory, bitmapy, komprese, alfaprůhlednost, nástroje pro optimalizaci.
• Rozdíly mezi JPG, GIF, PNG, WebP, SVG(svg.md).
• [nové] Responzivní obrázky: srcset a sizes, <picture>. (školení)

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

• [nové] Skutečné animační nástroje: CSS animace, vlastnosti animation a transition; SVG animace.
• Emulace animací v Javascriptu/jQuery.
• Principy animací.

2. pracovní postupy

Responzivní design

• [nové] Základní principy: fluidní layout, fluidní média, Media Queries, Container Queries, breakpointy.
• [nové] Implementace: Mobile First; UX na mobilech; rychlost načítání.

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

• K čemu je to dobré. Progressive Enhancement vs. Gracefull Degradation .
• [nové] Pojmy polyfill, fallback.
• [nové] Detekce vlastností prohlížečů: proč je výhodnější než detekce prohlížeče, detekce zařízení nebo browser hacks (1, 2); Modernizr; backend - WURFL atd.
• Verze stránky bez CSS a bez Javascriptu

Frontend architektura

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

Efektivita

• [nové] CSS preprocesory (školení)
• [nové] Automatizace: Grunt, Gulp, Bower, Yeoman. (školení)
• [nové] Frontend frameworky: Bootstrap (školení), Foundation
• [nové] Efektivita v Photoshopu: CSSHat, Enigma…

Verzování

• Základy verzování s gitem. (Kniha)
• Hosting a kolaborativní vývoj přes Github, Bitbucket a další.

Testování

• Funkční testování výsledného produktu - ručně nebo automaticky, Selenium a podobně.
• [nové] Testování na reálných mobilních zařízeních, starších prohlížečích. Cloud testing přes Browserstack a podobně.

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

• Zákon o ochraně osobních údajů.
• Licencování software: MIT, Apache, GPL, Public Domain a obsahu pomocí CreativeCommons.

Google Analytics a Search Console

• Nastavení Google Analytics: základní nastavení cílů; ukládání událostí; měření konverzí a jejich hodnot; nástroje pro vývojáře.
• Google Search Console: přidání webu a monitoring problémů.

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.