Downloaded 38 times
Bez HTML5/CSS3 to nejde
- 1. Bez HTML5/CSS3 tonejde
- 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.
- 4. HTML5 elementy <article>,<section>, <nav>, … Pokročilejší strukturování HTML dokumentu
- 5. HTML5 elementy <article>,<section>, <nav>, … Jenže… V MSIE8- jen javascriptem
- 6. HTML5 elementy <article>,<section>, <nav>, … Jenže… V přístupnosti vyhraje WAI ARIA
- 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. 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. Pr ax Pr e e ax Praxe ax e Pr a xe Pr Pr Pr ax ax e e Praxe
- 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. HTML5 značkování Blbuvzdornost azjednoduš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. HTML5 audio avideo <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. HTML5 audio avideo <audio>, <video> vernyzustanu.cz Autoři: 2fresh.cz
- 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. Fallback Genialita HTML aCSS — ignorace neznámého
- 16. Fallback Genialita HTML aCSS — ignorace neznámého
- 17. Polyfill JS knihovna cozapne podporu nových vlastností
- 18. Polyfill JS knihovna cozapne podporu nových vlastností https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
- 19. Neumí to všechnyprohlížeče? Nevadí! Máme polyfilly, fallback a vylepšené pracovní postupy.
- 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. HTML5 formulářové elementy Mocpomáhají na mobilech a tabletech http://www.456bereastreet.com/lab/html5-input-types/
- 22. HTML5 Canvas Programátorské Malování Peity Tipped http://benpickles.github.com/peity/ http://projects.nickstakenburg.com/tipped
- 23. HTML5 Canvas Pokročilé programátorskéMalování Cut The Rope PaintbrushJS http://www.cuttherope.ie/ http://mezzoblue.github.com/PaintbrushJS/demo/
- 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. CSS3 kulaté rohy,stíny, barevné přechody, RGBa Samá grafika? Samá bitmapa? http://m.scuk.cz
- 26. CSS3 kulaté rohy,stíny, barevné přechody, RGBa Jen 4 ⨉ bitmapa
- 27. CSS3 font-face awebové fonty Standard ve zobrazování vlastních písem od IE4
- 28. CSS3 font-face awebové fonty Standard ve zobrazování vlastních písem od IE4
- 29. CSS3 font-face awebové fonty http://icomoon.io/ Font ikony
- 30. CSS3 font-face awebové fonty sugarblogfilm.com Autoři: Pospolu a Superkodéři
- 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. Prefixy Bolehlav CSS3 kódera http://css3please.com/
- 33. Prefixy Bolehlav CSS3 kódera— preprocesory http://lesscss.org/ http://lesshat.com/
- 34. Progressive enhancement Postupné vrstvenítechnologie http://responsivedesign.ca/blog/progressive-enhancement-a-technique-for-building-future-friendly-websites
- 35. Progressive enhancement Modernizr http://modernizr.com/
- 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. CSS3 transformace Posun, zvětšení,zkosení, rotace … http://cssdeck.com/labs/vk5fv49n/0 http://www.vzhurudolu.cz/css3/?p=transforms
- 38. CSS3 transformace webshotter.com Autoři: Agilio
- 39. CSS3 transition, animation Jednoduchéi komplexnější animace http://cssdeck.com/labs/f2lznma2 http://www.vzhurudolu.cz/css3/?p=transitions
- 40. CSS3 transition, animation arounded.com Autoři: iMakers
- 41. CSS3 media queries Podmínkys parametrem média http://www.vzhurudolu.cz/projects/snowkidz-mobile-demo/responsive/
- 42.
- 43. HTML5 je webovátechnologie budoucnosti.
- 44. HTML5 je webovátechnologie budoucnosti. Současn Máme po osti! lyfilly, f progressi allback a ve enhan cement.
- 45. Díky! Máte otázky? Školení + konzultace: vzhurudolu.cz/martin Novinky: twitter.com/machal