Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hardboiled Web Design<br />Martin Hložek<br />CreativeIndustriesWire<br />
Představení<br />Pracuji jako HTML kodér ve společnosti CIWire<br />Kódování (resp. tvorbě webových stránek se věnuji přib...
Rok 2003<br />Končí éra jen Interner Exploreru <br />2. browser wars<br />MozillaFirefox<br />Opera<br />Safari<br />Googl...
Co má za úkol kodér?<br />Nainstalovat si běžně používané prohlížeče<br />IE6, IE7, IE8, IE9<br />Firefox 3.6, Firefox 4<b...
Je tohle opravdu cíl?<br />zbytečně se omezujeme kvůli zpětné kompatibilitě<br />čas věnovaný ladění pro IE6 (a jiné) může...
Hardboiled Web Design<br />autorem publikace Andy Clarke<br />co znamená Hardboiled?<br />literární styl, nejčastěji děj s...
Aktuální stav<br />klient je zvyklý, že dostane statický grafický návrh (PSD, JPG, PNG…)<br />očekává, že výsledná webová ...
Stránka nemusí vypadat všude stejně,ale…<br />musí zůstat zachován obsah a funkčnost<br />design se nesmí rozpadnout<br />...
Hardboiled HTML<br />HTML 5 je za dveřmi<br />nové elementy – použití zatím problematickénav, footer, header, section, asi...
CSS3<br />Spoustu věcí lze používat už dnes<br />To, co nefunguje, obvykle degraduje bez újmy na použitelnosti<br />
Web fonts<br />Fungují ve všech běžně používaných prohlížečích<br />fontsquirrel- @font-face Generator<br />super nástroj!...
Text shadows<br />pěkný efekt s malou námahou<br />bez problémů v moderních prohlížečích<br />pokud není podporováno pouze...
Zaoblené rohy<br />všude kromě IE (IE9 už umí)<br />pokud není podporováno degraduje na ostré rohy<br />pro starší Firefox...
Přechody (gradients)<br />problematická podpora<br />jiný zápis pro každý prohlížeč<br />„upovídaný“ zápis<br />příslib do...
Spousta dalších věcí!<br />CSS3 multiplebackgrounds<br />CSS3 transforms<br />translate, scale, rotate…<br />CSS3 transiti...
Nemá smysl čekat<br />Nemá smysl čekat, až bude vše podporováno všemi prohlížeči<br />Nové verze prohlížečů vychází v krat...
Kódování mě baví<br />a proto vzniklo<br />fafarago.cz<br />
Upcoming SlideShare
Loading in …5
×

Hardboiled Web Design

1,495 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Hardboiled Web Design

  1. 1. Hardboiled Web Design<br />Martin Hložek<br />CreativeIndustriesWire<br />
  2. 2. Představení<br />Pracuji jako HTML kodér ve společnosti CIWire<br />Kódování (resp. tvorbě webových stránek se věnuji přibližně 10 let)<br />10 let (od roku 2001) tu máme IE6 a při tvorbě stránek na něj stále myslíme<br />
  3. 3. Rok 2003<br />Končí éra jen Interner Exploreru <br />2. browser wars<br />MozillaFirefox<br />Opera<br />Safari<br />Google Chrome<br />
  4. 4. Co má za úkol kodér?<br />Nainstalovat si běžně používané prohlížeče<br />IE6, IE7, IE8, IE9<br />Firefox 3.6, Firefox 4<br />Opera 11<br />Safari 5<br />Google Chrome 10<br />…<br />a rozřezat grafiku tak, aby stránka vypadala ve všech prohlížečích stejně<br />
  5. 5. Je tohle opravdu cíl?<br />zbytečně se omezujeme kvůli zpětné kompatibilitě<br />čas věnovaný ladění pro IE6 (a jiné) můžeme využít hodnotněji<br />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)<br />
  6. 6. Hardboiled Web Design<br />autorem publikace Andy Clarke<br />co znamená Hardboiled?<br />literární styl, nejčastěji děj s detektivní zápletkou<br />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 :-)<br />
  7. 7. Aktuální stav<br />klient je zvyklý, že dostane statický grafický návrh (PSD, JPG, PNG…)<br />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í<br />dowebsitesneedtolookexactlythesameineverybrowser.com?<br />
  8. 8. Stránka nemusí vypadat všude stejně,ale…<br />musí zůstat zachován obsah a funkčnost<br />design se nesmí rozpadnout<br />UX odpovídá možnostem zařízení nebo prohlížeče <br />v ideálním případě naplno využívá jeho potenciál<br /> co dnešní prohlížeče umí?<br />
  9. 9. Hardboiled HTML<br />HTML 5 je za dveřmi<br />nové elementy – použití zatím problematickénav, footer, header, section, aside, article, figure<br />nové formulářové prvky<br />řadu z nich lze používat už dnes<br />input type=email, type=url, type=tel…<br />na iPhone zjednodušuje zadávání údajů<br />Mikroformáty – nejznámější vCard, hCalendar<br />
  10. 10. CSS3<br />Spoustu věcí lze používat už dnes<br />To, co nefunguje, obvykle degraduje bez újmy na použitelnosti<br />
  11. 11. Web fonts<br />Fungují ve všech běžně používaných prohlížečích<br />fontsquirrel- @font-face Generator<br />super nástroj!<br />nahrajete fonty, automaticky se zkonvertují do potřebných formátů, vygeneruje se CSSko a je hotovo (TTF, OTF, EOT, SVG, WOFF)<br />problémy s antialiasingem (alternativa Cufon)<br />licencování<br />
  12. 12. Text shadows<br />pěkný efekt s malou námahou<br />bez problémů v moderních prohlížečích<br />pokud není podporováno pouze chybí stín (žádný problém)<br />h2 {text-shadow: 0 2px 3px rgba(0,0,0,0.8)}<br />x,y offset, blur, barva a průhlednost<br />
  13. 13. Zaoblené rohy<br />všude kromě IE (IE9 už umí)<br />pokud není podporováno degraduje na ostré rohy<br />pro starší Firefox a Webkit je nutné přidat vendor prefix<br />div {<br /> -moz-border-radius:5px;<br /> -webkit-border-radius:5px;<br />border-radius: 5px;<br />}<br />
  14. 14. Přechody (gradients)<br />problematická podpora<br />jiný zápis pro každý prohlížeč<br />„upovídaný“ zápis<br />příslib do budoucna<br />
  15. 15. Spousta dalších věcí!<br />CSS3 multiplebackgrounds<br />CSS3 transforms<br />translate, scale, rotate…<br />CSS3 transitions<br />Media queries<br />
  16. 16. Nemá smysl čekat<br />Nemá smysl čekat, až bude vše podporováno všemi prohlížeči<br />Nové verze prohlížečů vychází v kratších intervalech – reagují na to, co se používá, implementují nové věci<br />Roste počet uživatelů mobilních prohlížečů<br />
  17. 17. Kódování mě baví<br />a proto vzniklo<br />fafarago.cz<br />

×