HTML5 - now or later
•
1 like•544 views
Presentation from Krakspot Tech #4 March 2011 in Polish
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to HTML5 - now or later
Similar to HTML5 - now or later (20)
HTML5 - now or later
- 1. TERAZ CZY ZA CHWILĘ?
- 2. <HTML> + Java.Script(); HTML5
- 3. <HTML> + Java.Script(); ~= HTML5
- 4. <HTML> NEW DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> .
- 5. <HTML> NEW DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <!doctype html>
- 6. <html> NEW DOCUMENT STRUCTURE <!DOCTYPE html> <meta charset="utf-8"> <title> Hello </title> <p> sunshine </p> Valid!
- 7. <HTML> NEW SEMANTIC TAGS <ARTICLE> <ASIDE> <SECTION> <hgroup> <NAV> <FOOTER> <HEADER> <figure> <figcaption> <datalist> <menu> <command> <details> <summary> <meter> <progress> + więcej
- 8. <HTML> NEW WEB FORMS <input type="text" required autofocus /> * <input type="email" PLACEHOLDER="some@email.com" /> * <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/> <input type="range" min="0" max="50" value="10" /> * Input:invalid {...}
- 9. <HTML> NEW WEB FORMS <input type="search" results="10" placeholder="Search..." /> <input type="tel" placeholder="(555) 555-5555” pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" /> <input type="color" placeholder="e.g. #bbbbbb" /> <input type="number" step="1" min="-5" max="10" value="0" /> <input type= "URL" value="http://ohmy.com" />
- 10. <HTML> NEW WEB FORMS
- 11. <HTML> NEW WEB FORMS email tel number url
- 12. <html> /jAVAsCRIPT(); NATIVE MEDIA <video controls> </video>
- 13. <html> /jAVAsCRIPT(); NATIVE MEDIA var video // video element function playPause() { if (video.paused || video.ended) { video.play(); } else { video.pause(); } } http://Video object API
- 14. <html> /jAVAsCRIPT(); NATIVE MEDIA <video controls> <source src="vid.mp4"> <source src="vid.ogG"> <object data="vid.SWF"> <param name="movie" value="vid.SWF" /> </object> </video>
- 15. <html> /jAVAsCRIPT(); NATIVE MEDIA <audio controls src="file.mp3"> <object data="file.mp3" > <embed src="file.swf"> </object> </audio>
- 16. if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } <html> /jAVAsCRIPT(); drawing <CANVAS> • Rysowanie w JS • Wykresy • Gry etc. Nessie 150 Wendigo 150 Sasquatch 300 Chupacabra 100 Yeti 50
- 17. jAVAsCRIPT(); New Events WINDOW onerror onhashchange ononline / onoffline onpagehide / onpageshow (...) HTML ELEMENTS ondrag / ondragstart / ondragend ondrop oninvalid (...)
- 18. jAVAsCRIPT(); Offline web Web Storage (cookie na sterydach) • 5 mb na DANE • Trwałe • Nie przesyłane na serwer (!) Application cache • <html manifest="/cache.manifest"> • CACHE / NETWORK / FALLBACK
- 19. jAVAsCRIPT(); Communication WebSocket • Ws:// lub wss:// • Dupleks • Bez nagłówków • Bezpieczna?
- 20. jAVAsCRIPT(); Communication Web WorkerS (wielowątkowY JS) Źródło: http://html5rocks.com
- 21. No i jeszcze... • history api • Drag & drop • Drag in • Geolocation • Microdata • ARIA attributes • Web SQL Database / IndexedDB • (...)
- 22. HTML5 TERAZ! Ale... • Zadbaj o Wsteczną zgodność... • ...I o Dobre Wersje alternatywne • Nie uzależniaj kluczowych funkcjonalności... • ...chyba, że piszesz dla konkretnej przeglądarki
- 23. Modernizr.com Detekcja funkcjonalności nie przeglądarki! function supports_canvas() { var d = document; return !!d.createElement('canvas').getContext; } if (supports_canvas) { // let's draw some shapes! } else { // no native canvas support available :( }
- 24. Dzięki piękne :) kasia@drzyzga.pl