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.

Bez HTML5/CSS3 to nejde

3,429 views

Published on

  • Be the first to comment

Bez HTML5/CSS3 to nejde

  1. 1. BezHTML5/CSS3 to nejde
  2. 2. Program ★ HTML5 strukturální elementy ★ HTML5 značky, audio, video ★ Fallback, polyfill ★ HTML5 formuláře a canvas ★ CSS3 základy ★ Prefixy, progressive enhancement ★ CSS3 transforms, animace, media queries
  3. 3. H ML5
  4. 4. HTML5 elementy <article>, <section>, <nav>, …Pokročilejší strukturování HTML dokumentu
  5. 5. HTML5 elementy <article>, <section>, <nav>, …Jenže… V MSIE8- jen javascriptem
  6. 6. HTML5 elementy <article>, <section>, <nav>, …Jenže… V přístupnosti vyhraje WAI ARIA
  7. 7. HTML5 elementy <article>, <section>, <nav>, … ★ V MSIE8- jen javascriptem ★ Přístupnost dobře řeší WAI-ARIA ★ Outline možná nakonec nebude v HTML5 ★ Skončí jako XHTML Strict?
  8. 8. HTML5 elementy <article>, <section>, <nav>, … Nepoužív ejte ★ V MSIE8- jen javascriptem ★ Přístupnost dobře řeší WAI-ARIA ★ Outline možná nakonec nebude v HTML5 ★ Skončí jako XHTML Strict?
  9. 9. Pr axPr e e ax Praxe ax e Pr a xe Pr Pr Pr ax ax e e Praxe
  10. 10. Program ★ HTML5 strukturální elementy ★ HTML5 značky, audio, video ★ Fallback, polyfill ★ HTML5 formuláře a canvas ★ CSS3 základy ★ Prefixy, progressive enhancement ★ CSS3 transforms, animace, media queries
  11. 11. HTML5 značkováníBlbuvzdornost a zjednodušení ★ <!DOCTYPE html> zapíná striktní režim ★ Kódování <meta charset="utf-8"> ★ Velká i malá písmena ★ <br> i <br /> ★ <p> , <li> a další netřeba uzavírat ★ <a> může obalit i blok ★ Přednastavený type=”” — <link rel=”stylesheet” href=”index.css”> <script src=”script.js”></script>
  12. 12. HTML5 audio a video <audio>, <video>Mobily: nutná náhrada flashe ★ Tablety a mobily: nutná náhrada Flashe ★ MP3 pro audio ★ h.264/mp4 pro video ★ Flash fallback přehrávače: http://mediaelementjs.com/ http://www.jplayer.org/
  13. 13. HTML5 audio a video <audio>, <video>vernyzustanu.cz Autoři: 2fresh.cz
  14. 14. Program ★ HTML5 strukturální elementy ★ HTML5 značky, audio, video ★ Fallback, polyfill ★ HTML5 formuláře a canvas ★ CSS3 základy ★ Prefixy, progressive enhancement ★ CSS3 transforms, animace, media queries
  15. 15. FallbackGenialita HTML a CSS — ignorace neznámého
  16. 16. FallbackGenialita HTML a CSS — ignorace neznámého
  17. 17. PolyfillJS knihovna co zapne podporu nových vlastností
  18. 18. PolyfillJS knihovna co zapne podporu nových vlastností https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
  19. 19. Neumí to všechny prohlížeče?Nevadí! Máme polyfilly, fallback avylepšené pracovní postupy.
  20. 20. Program ★ HTML5 strukturální elementy ★ HTML5 značky, audio, video ★ Fallback, polyfill ★ HTML5 formuláře a canvas ★ CSS3 základy ★ Prefixy, progressive enhancement ★ CSS3 transforms, animace, media queries
  21. 21. HTML5 formulářové elementyMoc pomáhají na mobilech a tabletech http://www.456bereastreet.com/lab/html5-input-types/
  22. 22. HTML5 CanvasProgramátorské Malování Peity Tipped http://benpickles.github.com/peity/ http://projects.nickstakenburg.com/tipped
  23. 23. HTML5 CanvasPokročilé programátorské Malování Cut The Rope PaintbrushJS http://www.cuttherope.ie/ http://mezzoblue.github.com/PaintbrushJS/demo/
  24. 24. Program ★ HTML5 strukturální elementy ★ HTML5 značky, audio, video ★ Fallback, polyfill ★ HTML5 formuláře a canvas ★ CSS3 základy ★ Prefixy, progressive enhancement ★ CSS3 transforms, animace, media queries
  25. 25. CSS3 kulaté rohy, stíny, barevné přechody, RGBa Samá grafika? Samá bitmapa? http://m.scuk.cz
  26. 26. CSS3 kulaté rohy, stíny, barevné přechody, RGBa Jen 4 ⨉ bitmapa
  27. 27. CSS3 font-face a webové fontyStandard ve zobrazování vlastních písem od IE4
  28. 28. CSS3 font-face a webové fontyStandard ve zobrazování vlastních písem od IE4
  29. 29. CSS3 font-face a webové fonty http://icomoon.io/Font ikony
  30. 30. CSS3 font-face a webové fontysugarblogfilm.com Autoři: Pospolu a Superkodéři
  31. 31. Program ★ HTML5 strukturální elementy ★ HTML5 značky, audio, video ★ Fallback, polyfill ★ HTML5 formuláře a canvas ★ CSS3 základy ★ Prefixy, progressive enhancement ★ CSS3 transforms, animace, media queries
  32. 32. PrefixyBolehlav CSS3 kódera http://css3please.com/
  33. 33. PrefixyBolehlav CSS3 kódera — preprocesory http://lesscss.org/ http://lesshat.com/
  34. 34. Progressive enhancementPostupné vrstvení technologie http://responsivedesign.ca/blog/progressive-enhancement-a-technique-for-building-future-friendly-websites
  35. 35. Progressive enhancementModernizr http://modernizr.com/
  36. 36. Program ★ HTML5 strukturální elementy ★ HTML5 značky, audio, video ★ Fallback, polyfill ★ HTML5 formuláře a canvas ★ CSS3 základy ★ Prefixy, progressive enhancement ★ CSS3 transforms, animace, media queries
  37. 37. CSS3 transformacePosun, zvětšení, zkosení, rotace … http://cssdeck.com/labs/vk5fv49n/0 http://www.vzhurudolu.cz/css3/?p=transforms
  38. 38. CSS3 transformacewebshotter.com Autoři: Agilio
  39. 39. CSS3 transition, animationJednoduché i komplexnější animace http://cssdeck.com/labs/f2lznma2 http://www.vzhurudolu.cz/css3/?p=transitions
  40. 40. CSS3 transition, animationarounded.com Autoři: iMakers
  41. 41. CSS3 media queriesPodmínky s parametrem média http://www.vzhurudolu.cz/projects/snowkidz-mobile-demo/responsive/
  42. 42. CSS3 media queriesvzhurudolu.cz
  43. 43. HTML5 je webová technologie budoucnosti.
  44. 44. HTML5 je webová technologie budoucnosti. Současn Máme po osti! lyfilly, f progressi allback a ve enhan cement.
  45. 45. Díky! Máte otázky?Školení + konzultace: vzhurudolu.cz/martin Novinky: twitter.com/machal

×