Prezentace aktuálních trendů v HTML5 a CSS3 podle knihy Hardboiled Web Design od Andy Clarke http://hardboiledwebdesign.com/.

1. Hardboiled Web Design Martin Hložek CreativeIndustriesWire

2. Představení Pracuji jako HTML kodér ve společnosti CIWire Kódování (resp. tvorbě webových stránek se věnuji přibližně 10 let) 10 let (od roku 2001) tu máme IE6 a při tvorbě stránek na něj stále myslíme

3. Rok 2003 Končí éra jen Interner Exploreru 2. browser wars MozillaFirefox Opera Safari Google Chrome

4. Co má za úkol kodér? Nainstalovat si běžně používané prohlížeče IE6, IE7, IE8, IE9 Firefox 3.6, Firefox 4 Opera 11 Safari 5 Google Chrome 10 … a rozřezat grafiku tak, aby stránka vypadala ve všech prohlížečích stejně

5. Je tohle opravdu cíl? zbytečně se omezujeme kvůli zpětné kompatibilitě čas věnovaný ladění pro IE6 (a jiné) můžeme využít hodnotněji jak budeme v budoucnu ladit pro mobilní prohlížeče, iPad a další?(nyní cca 15 různých prohlížečů na mobilních zařízení a každý je originál)

6. Hardboiled Web Design autorem publikace Andy Clarke co znamená Hardboiled? literární styl, nejčastěji děj s detektivní zápletkou typický „hardboiled detektiv“ je vystaven nebezpečí, násilí, a aby mohl vyšetřit případ musí často i překročit zákon(má toho spoustu společného s kodérem :-)

7. Aktuální stav klient je zvyklý, že dostane statický grafický návrh (PSD, JPG, PNG…) očekává, že výsledná webová stránka se bude 1:1 podobat grafickému návrhu bez ohledu na prohlížeč a zařízení dowebsitesneedtolookexactlythesameineverybrowser.com?

8. Stránka nemusí vypadat všude stejně,ale… musí zůstat zachován obsah a funkčnost design se nesmí rozpadnout UX odpovídá možnostem zařízení nebo prohlížeče v ideálním případě naplno využívá jeho potenciál  co dnešní prohlížeče umí?

9. Hardboiled HTML HTML 5 je za dveřmi nové elementy – použití zatím problematickénav, footer, header, section, aside, article, figure nové formulářové prvky řadu z nich lze používat už dnes input type=email, type=url, type=tel… na iPhone zjednodušuje zadávání údajů Mikroformáty – nejznámější vCard, hCalendar

10. CSS3 Spoustu věcí lze používat už dnes To, co nefunguje, obvykle degraduje bez újmy na použitelnosti

11. Web fonts Fungují ve všech běžně používaných prohlížečích fontsquirrel- @font-face Generator super nástroj! nahrajete fonty, automaticky se zkonvertují do potřebných formátů, vygeneruje se CSSko a je hotovo (TTF, OTF, EOT, SVG, WOFF) problémy s antialiasingem (alternativa Cufon) licencování

12. Text shadows pěkný efekt s malou námahou bez problémů v moderních prohlížečích pokud není podporováno pouze chybí stín (žádný problém) h2 {text-shadow: 0 2px 3px rgba(0,0,0,0.8)} x,y offset, blur, barva a průhlednost

13. Zaoblené rohy všude kromě IE (IE9 už umí) pokud není podporováno degraduje na ostré rohy pro starší Firefox a Webkit je nutné přidat vendor prefix div { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; }

14. Přechody (gradients) problematická podpora jiný zápis pro každý prohlížeč „upovídaný“ zápis příslib do budoucna

15. Spousta dalších věcí! CSS3 multiplebackgrounds CSS3 transforms translate, scale, rotate… CSS3 transitions Media queries

16. Nemá smysl čekat Nemá smysl čekat, až bude vše podporováno všemi prohlížeči Nové verze prohlížečů vychází v kratších intervalech – reagují na to, co se používá, implementují nové věci Roste počet uživatelů mobilních prohlížečů

17. Kódování mě baví a proto vzniklo fafarago.cz