HTML5 - now or later

1,136 views

Published on

Presentation from Krakspot Tech #4
March 2011
in Polish

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,136
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 - now or later

  1. 1. TERAZ CZY ZA CHWILĘ?
  2. 2. <HTML>+ Java.Script(); HTML5
  3. 3. <HTML>+ Java.Script(); ~= HTML5
  4. 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. 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. 6. <html> NEW DOCUMENT STRUCTURE<!DOCTYPE html><meta charset="utf-8"><title> Hello </title><p> sunshine </p> Valid!
  7. 7. <HTML> NEW SEMANTIC TAGS<ARTICLE> <ASIDE> <SECTION> <hgroup> <NAV><FOOTER> <HEADER><figure> <figcaption><datalist> <menu> <command> <details> <summary><meter> <progress> + więcej
  8. 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. 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. 10. <HTML> NEW WEB FORMS
  11. 11. <HTML> NEW WEB FORMSemail telnumber url
  12. 12. <html> /jAVAsCRIPT(); NATIVE MEDIA<video controls> </video>
  13. 13. <html> /jAVAsCRIPT(); NATIVE MEDIAvar video // video elementfunction playPause() { if (video.paused || video.ended) { video.play(); } else { video.pause(); }}http://Video object API
  14. 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. 15. <html> /jAVAsCRIPT(); NATIVE MEDIA<audio controls src="file.mp3"> <object data="file.mp3" > <embed src="file.swf"> </object></audio>
  16. 16. if (Modernizr.canvas) { // lets 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. 17. jAVAsCRIPT(); New EventsWINDOW onerror onhashchange ononline / onoffline onpagehide / onpageshow (...)HTML ELEMENTS ondrag / ondragstart / ondragend ondrop oninvalid (...)
  18. 18. jAVAsCRIPT(); Offline webWeb 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. 19. jAVAsCRIPT(); CommunicationWebSocket• Ws:// lub wss://• Dupleks• Bez nagłówków• Bezpieczna?
  20. 20. jAVAsCRIPT(); CommunicationWeb WorkerS (wielowątkowY JS)Źródło: http://html5rocks.com
  21. 21. No i jeszcze...• history api• Drag & drop• Drag in• Geolocation• Microdata• ARIA attributes• Web SQL Database / IndexedDB• (...)
  22. 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. 23. Modernizr.comDetekcja funkcjonalności nie przeglądarki!function supports_canvas() { var d = document; return !!d.createElement(canvas).getContext;}if (supports_canvas) { // lets draw some shapes!} else { // no native canvas support available :(}
  24. 24. Dzięki piękne :) kasia@drzyzga.pl

×