ݺߣ

ݺߣShare a Scribd company logo

Hardboiled Web Design

•
•
CIWire s.r.o.
CIWire s.r.o.

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

1 of 17
Hardboiled Web DesignMartin ž𲹳پԻٰܲ¾
PředstaveníPracuji jako HTML kodér ve společnosti CIWireKó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
Rok 2003Končí éra jen Interner Exploreru 2. browser warsMozillaFirefoxOperaSafariGoogle Chrome
Co má za úkol kodér?Nainstalovat si běžně používané prohlížečeIE6, IE7, IE8, IE9Firefox 3.6, Firefox 4Opera 11Safari 5Google Chrome 10…a rozřezat grafiku tak, aby stránka vypadala ve všech prohlížečích stejně
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ějijak 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)
Hardboiled Web Designautorem publikace Andy Clarkeco znamená Hardboiled?literární styl, nejčastěji děj s detektivní zápletkoutypický „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 :-)
Aktuální stavklient 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?
Stránka nemusí vypadat všude stejně,ale…musí zůstat zachován obsah a funkčnostdesign se nesmí rozpadnoutUX 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í?
Hardboiled HTMLHTML 5 je za dveřminové elementy – použití zatím problematickénav, footer, header, section, aside, article, figurenové formulářové prvkyřadu z nich lze používat už dnesinput type=email, type=url, type=tel…na iPhone zjednodušuje zadávání údajůMikroformáty – nejznámější vCard, hCalendar
CSS3Spoustu věcí lze používat už dnesTo, co nefunguje, obvykle degraduje bez újmy na použitelnosti
Web fontsFungují ve všech běžně používaných prohlížečíchfontsquirrel- @font-face Generatorsuper 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í
Text shadowspěkný efekt s malou námahoubez problémů v moderních prohlížečíchpokud 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
Zaoblené rohyvšude kromě IE (IE9 už umí)pokud není podporováno degraduje na ostré rohypro starší Firefox a Webkit je nutné přidat vendor prefixdiv { -moz-border-radius:5px; -webkit-border-radius:5px;border-radius: 5px;}
Přechody (gradients)problematická podporajiný zápis pro každý prohlížeč„upovídaný“ zápispříslib do budoucna
Spousta dalších věcí!CSS3 multiplebackgroundsCSS3 transformstranslate, scale, rotate…CSS3 transitionsMedia queries
Nemá smysl čekatNemá smysl čekat, až bude vše podporováno všemi prohlížečiNové verze prohlížečů vychází v kratších intervalech – reagují na to, co se používá, implementují nové věciRoste počet uživatelů mobilních prohlížečů
Kódování mě bavía proto vzniklofafarago.cz

More Related Content

Hardboiled Web Design

  • 1. Hardboiled Web DesignMartin ž𲹳پԻٰܲ¾
  • 2. PředstaveníPracuji jako HTML kodér ve společnosti CIWireKó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 2003Končí éra jen Interner Exploreru 2. browser warsMozillaFirefoxOperaSafariGoogle Chrome
  • 4. Co má za úkol kodér?Nainstalovat si běžně používané prohlížečeIE6, IE7, IE8, IE9Firefox 3.6, Firefox 4Opera 11Safari 5Google 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ějijak 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 Designautorem publikace Andy Clarkeco znamená Hardboiled?literární styl, nejčastěji děj s detektivní zápletkoutypický „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í stavklient 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čnostdesign se nesmí rozpadnoutUX 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 HTMLHTML 5 je za dveřminové elementy – použití zatím problematickénav, footer, header, section, aside, article, figurenové formulářové prvkyřadu z nich lze používat už dnesinput type=email, type=url, type=tel…na iPhone zjednodušuje zadávání údajůMikroformáty – nejznámější vCard, hCalendar
  • 10. CSS3Spoustu věcí lze používat už dnesTo, co nefunguje, obvykle degraduje bez újmy na použitelnosti
  • 11. Web fontsFungují ve všech běžně používaných prohlížečíchfontsquirrel- @font-face Generatorsuper 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 shadowspěkný efekt s malou námahoubez problémů v moderních prohlížečíchpokud 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é rohyvšude kromě IE (IE9 už umí)pokud není podporováno degraduje na ostré rohypro starší Firefox a Webkit je nutné přidat vendor prefixdiv { -moz-border-radius:5px; -webkit-border-radius:5px;border-radius: 5px;}
  • 14. Přechody (gradients)problematická podporajiný zápis pro každý prohlížeč„upovídaný“ zápispříslib do budoucna
  • 15. Spousta dalších věcí!CSS3 multiplebackgroundsCSS3 transformstranslate, scale, rotate…CSS3 transitionsMedia queries
  • 16. Nemá smysl čekatNemá smysl čekat, až bude vše podporováno všemi prohlížečiNové verze prohlížečů vychází v kratších intervalech – reagují na to, co se používá, implementují nové věciRoste počet uživatelů mobilních prohlížečů
  • 17. Kódování mě bavía proto vzniklofafarago.cz