Bez HTML5/CSS3 to nejde

3,184 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,184
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
37
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×