HTML5 Update [Vortrag bei der NZZ]

1.708 Aufrufe

Veröffentlicht am

Ein subjektiver Zwischenstand zu HTML5 ergänzt mit Statistiken und vielen weiterführenden Links. Die herausgepickten Aspekte sind: Geolocation, Video Support, Web Storage, Web Sockets, PushState, Web Forms, Drag and Drop, Semantik und Canvas.

Veröffentlicht in: Technologie, Business
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.708
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
31
Aktionen
Geteilt
0
Downloads
15
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • DerArbeiter: HTML5DerSuperheld: CSS3http://meinfritz.de/contents/2/8/4/7/3/0/0/0/0/0/picture/122240.jpg
  • Safari 3 inkl. iOS/Android:nur H.264+AAC+MP4FFox 3.5: nurTheora+Vorbis+OggFFox 3.5:Theora+Vorbis+Ogg und WebMIE >9: Nur FlashIE 9: WebM (und H.264+AAC+MP4)
  • Tweet von Ian Hickson (19. Sept 2009): @ppk The drag-and-drop API is horrible, but it has one thing going for it: IE6 implements it, as do Safari and Firefox.
  • http://www.ie6countdown.com/
  • HTML5 Update [Vortrag bei der NZZ]

    1. 1. Danke für die Einladung. NZZ.HTML5 Update. Namics.<br />Jürg Stuker. CEO. Partner.<br />Thomas Junghans. Frontend Engineer.<br />25. August 2011<br />
    2. 2. Google stellt Google Apps auf HTML5 um...<br />25. August 2011<br />2<br />HTML5 Update. Internet Briefing Recycled. <br />
    3. 3. Google stellt Google Apps auf HTML5 um<br />As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3.<br />http://googledocs.blogspot.com/2011/06/our-plans-to-support-modern-browsers.html<br />Grenzenzwischen App und Native schwindenbei Google (insb. auf mobile Devices; “Denkhaltung” aberauchteilweise von Apple “erwirkt”)<br />Bsp. http://plus.google.com auf Mobile/Tablet<br />Bsp. http://gmail.com auf Mobile/Tablet<br />25. August 2011<br />3<br />HTML5 Update. Internet Briefing Recycled. <br />
    4. 4. http://plus.google.com (auf iPad, Update Geste)<br />25. August 2011<br />4<br />HTML5 Update. Internet Briefing Recycled. <br />
    5. 5. http://read.amazon.com<br />25. August 2011<br />5<br />HTML5 Update. Internet Briefing Recycled. <br />
    6. 6.
    7. 7. HTML5 Update. Internet Briefing Recycled. <br />25. August 2011<br />7<br />
    8. 8. 25. August 2011<br />8<br />
    9. 9. Bei Internet-Technologieheisst das eher...<br />The ones that win are the ones that ship.<br />25. August 2011<br />9<br />HTML5 Update. Internet Briefing Recycled. <br />
    10. 10. Der Firefox kannesschon!<br />25. August 2011<br />10<br />HTML5 Update. Internet Briefing Recycled. <br />http://www.findmebyip.com/litmus<br />
    11. 11. WievieleVersionen von Firefox sehenSie?<br />Firefox (4.0.1) 14.46%<br />Firefox (3.6.17) 4.87%<br />Firefox (3.6.13) 1.02%<br />Firefox (4) 0.60%<br />Firefox (3.5.19) 0.56%<br />Firefox (3.6.16) 0.47%<br />Firefox (3.6.3) 0.39%<br />Firefox (3.6.8) 0.29%<br />Firefox (3.6) 0.28%<br />Firefox (3.6.10) 0.27%<br />Firefox (3.6.15) 0.26%<br />Firefox (3.0.19) 0.23%<br />25. August 2011<br />11<br />HTML5 Update. Internet Briefing Recycled. <br />Firefox (3.6.12) 0.21%<br />Firefox (3.6.6) 0.16%<br />Firefox (5) 0.12%<br />Firefox (3.6.2) 0.09%<br />Firefox (3.5.3) 0.08%<br />Firefox (3.5.5) 0.08%<br />Firefox (3.5.7) 0.07%<br />Firefox (3.5.16) 0.06%<br />Firefox (Andere) 4.11%<br />ca. 10’000 Besuche/Tag<br />Quelle: Schweizer Website, 1,6 Mio. Besuche, AnfangJuni 2011<br />
    12. 12. Und was kann “der Firefox” genau<br />Am Beispiel der Canvas Test Suite (nur 2D)<br />25. August 2011<br />12<br />HTML5 Update. Internet Briefing Recycled. <br />http://philip.html5.org/tests/canvas/suite/tests/results.html<br />
    13. 13. Häufigkeit von Doctypes (CH Domänen, Juni 2011)<br />25. August 2011<br />13<br />HTML5 Update. Internet Briefing Recycled. <br />Quelle: search.ch Big Crawl, 500’000 Schweizer Website, AnfangJuni 2011<br />
    14. 14. Weshalb 2,6% HTML5?<br />Rückwärtskompatibel!<br />ausser... aktueller Code istnichtvalide<br />ausser... aktueller Code istnichtstandardkonform (“gegen” Browser entwickelt)<br />für die Mutigenunteruns (“keinGewinn”)<br />ALT: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <br />NEU: <!DOCTYPE html><br />neueFunktionalitätensindauchohne HTML5 möglichz.B. http://timetable.search.ch/, http://read.amazon.com<br />25. August 2011<br />14<br />HTML5 Update. Internet Briefing Recycled. <br />
    15. 15. Oder einbisschenüberlegter: Was nun?<br />25. August 2011<br />15<br />HTML5 Update. Internet Briefing Recycled. <br />
    16. 16. Und hiernocheine“Firmenherausforderung”...<br />HTML[5] isteinlebender Standard...<br />25. August 2011<br />16<br />HTML5 Update. Internet Briefing Recycled. <br />
    17. 17. HTML5 - Walkthrough<br />HTML5 Update. Internet Briefing Recycled. <br />25. August 2011<br />17<br />
    18. 18. Mein Fokusfürheute<br />Geolocation<br />Video Support<br />Web Storage<br />Web Sockets<br />Push State<br />Web Forms<br />Drag and Drop<br />Semantik<br />Canvas<br />25. August 2011<br />18<br />HTML5 Update. Internet Briefing Recycled. <br />
    19. 19. Geolocation<br />Jetzt und heutenutzen– Mobilanwendungen!<br />Code: http://html5demos.com/geo<br />25. August 2011<br />19<br />HTML5 Update. Internet Briefing Recycled. <br />
    20. 20. Video Support (1 von 2)<br />Jetzt und heutenutzen!<br />25. August 2011<br />20<br />HTML5 Update. Internet Briefing Recycled. <br />
    21. 21. Video Support(2 von 2)<br />Leidernur die Hälfte der Wahrheit: Der Browser muss Audio/Video-Dekompressionkennen (zus. zu Format)<br />Lösung 1<br />spezialisierteDienstleisterwie http://vimeo.com/, http://youtube.com/ oder http://xtendx.com/ nutzen<br />Lösung 2 (dreiVersionenund Flash-Fallback)<br />WebM (VP8 + Vorbis Audio)<br />MP4 Container (H.264 baseline Video + AAC “low complexity” Audio)<br />OGG Container (TheoraVideo + Vorbis Audio)<br />Code: http://diveintohtml5.org/video.html<br />25. August 2011<br />21<br />HTML5 Update. Internet Briefing Recycled. <br />
    22. 22. Web Storage (1 von 2)<br />Riesige Chance und GrundlagefürWebanwendungen<br />....aberneuesParadigmamittechnischenHürden<br />25. August 2011<br />22<br />HTML5 Update. Internet Briefing Recycled. <br />
    23. 23. Web Storage (2 von 2)<br />Webentwickler “macht” Client/Server-Anwendung<br />Datensicherheit/-schutz<br />Online/Offline-Detektion und deren Usability<br />mehrereDatenmodelle (browserabhängig)<br />Key/Value-Paare (Default meist 5 MB)<br />Web SQL-Database: http://dev.w3.org/html5/webdatabase/<br />...<br />Code:<br />http://www.html5rocks.com/tutorials/offline/whats-offline/<br />http://diveintohtml5.org/storage.html<br />25. August 2011<br />23<br />HTML5 Update. Internet Briefing Recycled. <br />
    24. 24. Web Sockets (JavaScript API)<br />LösteinriesigeHerausforderung der Webentwicklung: BidirektionaleKommunikationzwischenClient/Server<br />eigentlich “nur” eine JavaScript API<br />http://dev.w3.org/html5/websockets/<br />Webentwickler “macht” Client/Server-Anwendung<br />Sicherheitsbedenkenmachender API grad das Lebenschwer: In Opera und Firefox per Default deaktiviert<br />http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html<br />Code: http://html5demos.com/web-socket, http://websocket.org/<br />25. August 2011<br />24<br />HTML5 Update. Internet Briefing Recycled. <br />
    25. 25. PushState (JavaScript API)<br />Einsetzen<br />korrekterEinsatz gut überlegen, funktionierende Degradation<br />Lösungfür das (mitFragement Identifier bekämpfte) Status-Problem von Websites die XHR nutzen<br />Lösungfür “Suchmaschinenproblem”<br />code.google.com/web/ajaxcrawling/docs/getting-started.html<br />Einegute Website<br />lässtsich in jedemZustandbookmarken<br />unterstützt den Back Button (des Browsers)<br />Code: http://diveintohtml5.org/history.html, inkl. Fallback: https://github.com/balupton/History.js/<br />25. August 2011<br />25<br />HTML5 Update. Internet Briefing Recycled. <br />
    26. 26. Web Forms (1 von 2)<br />Jetzt und heutenutzen!<br />Code: http://diveintohtml5.org/forms.html<br />25. August 2011<br />26<br />HTML5 Update. Internet Briefing Recycled. <br />Quelle: http://slides.html5rocks.com/#form-types-mobile<br />
    27. 27. Web Forms (2 von 2)<br />...nochbesser auf Mobilgeräten<br />25. August 2011<br />27<br />HTML5 Update. Internet Briefing Recycled. <br />Quelle: http://slides.html5rocks.com/#form-types-mobile<br />
    28. 28. Drag and Drop (JavaScript API)<br />Jetzt und heutenutzen!<br />TechnischgibtesschönereAnsätze: http://twitter.com/#!/Hixie/status/4075253361<br />Code: http://html5doctor.com/native-drag-and-drop/<br />25. August 2011<br />28<br />HTML5 Update. Internet Briefing Recycled. <br />
    29. 29. Semantik (1 von 3)<br />Richtig und die Zukunft des Webs!<br />ZweiDimensionen<br />strukturierende Tags<br />Mikroformate<br />Aberwernutzt den “zusätzlichenZucker”?<br />keineinziger Browser<br />Suchmaschinenresp. Google für “Rich Snippets” (ohneVersprechen und in einzelnenFällen)<br />http://www.google.com/webmasters/tools/richsnippets<br />25. August 2011<br />29<br />HTML5 Update. Internet Briefing Recycled. <br />
    30. 30. Semantik– Tags (2 von 3)<br />Code: http://diveintohtml5.org/semantics.html#new-elements<br />25. August 2011<br />30<br />HTML5 Update. Internet Briefing Recycled. <br />
    31. 31. Semantik– Mikroformate (3 von 3)<br />http://microformats.org/<br />Today [June 2, 2011] we’re announcing schema.org, a new initiative from Google, Bing and Yahoo! <br />http://googlewebmastercentral.blogspot.com/2011/06/introducing-schemaorg-search-engines.html<br />zurZeitalsGrundlagefür Rich Snippets für: People, Reviews, Products, Events und Recipes<br />Code: http://schema.org/ und http://diveintohtml5.org/extensibility.html<br />25. August 2011<br />31<br />HTML5 Update. Internet Briefing Recycled. <br />
    32. 32. Canvas<br />Sehrvielversprechendabernochblutig<br />Code: http://diveintohtml5.org/canvas.html<br />25. August 2011<br />32<br />HTML5 Update. Internet Briefing Recycled. <br />
    33. 33. Abschluss<br />25. August 2011<br />33<br />HTML5 Update. Internet Briefing Recycled. <br />
    34. 34. Features und Ihre Marktreife<br />Die Matrix<br />einsetzbar<br />Geolocation<br />Video(Audio)<br />Forms<br />Drag‘n‘Drop<br />PushState<br />html5<br />Web Storage<br />Marktreife<br />Canvas<br />Web Sockets<br />Semantik *)<br />*) Google Rich Snippets: Go!<br />experimentell<br />Innovation<br />gering<br />hoch<br />Wichtigkeit<br />HTML5 Update. Internet Briefing Recycled. <br />25. August 2011<br />34<br />
    35. 35. KurzeAntwort<br />FürmoderneMobilgerätenur HTML5!<br />25. August 2011<br />35<br />HTML5 Update. Internet Briefing Recycled. <br />
    36. 36. KurzeAntwort (in lang)<br />“Mobile First” entwickeln!<br />25. August 2011<br />36<br />HTML5 Update. Internet Briefing Recycled. <br />
    37. 37. Browserkompatibilität(Juni 2011, 1.6 Mio Besuche, Schweizer Website)<br />25. August 2011<br />37<br />HTML5 Update. Internet Briefing Recycled. <br />
    38. 38. Browserkompatibilität: Die Entwicklungistwichtig<br />25. August 2011<br />38<br />HTML5 Update. Internet Briefing Recycled. <br />Quelle: search.ch<br />
    39. 39. Zusammenfassung<br />Auchwennesniemandhören will: Unser Kundeist (auch) die technischeAusrüstungunsererUsers<br />in der Schweizzunehmendkonfortabel, aberbeispielsweise IE6 in China >30%<br />Desktop<br />essprichtnichtsgegen HTML5...... aberauch (noch) nichtsehrvieldafür<br />neueFunktionengezielteinsetzen (und einegute Degradation anbieten)<br />Mobile<br />HTML5 rulez!<br />HTML5 Update. Internet Briefing Recycled. <br />25. August 2011<br />39<br />
    40. 40. WeiterführendeInformationen (1/2)<br />Specs<br />http://www.whatwg.org/ und http://blog.whatwg.org/<br />http://www.whatwg.org/specs/web-apps/current-work/multipage/<br />http://www.w3.org/TR/html5/<br />Tutorials<br />http://diveintohtml5.org/<br />http://apirocks.com/html5/<br />http://www.w3schools.com/html5/<br />25. August 2011<br />40<br />HTML5 Update. Internet Briefing Recycled. <br />
    41. 41. WeiterführendeInformationen (2/2)<br />Kompatibilität<br />http://caniuse.com/<br />http://www.findmebyip.com/litmus<br />http://html5test.com/<br />Demos<br />http://www.html5rocks.com/<br />http://html5demos.com/<br />Tools<br />http://www.modernizr.com/<br />http://html5boilerplate.com/<br />http://software.hixie.ch/utilities/js/live-dom-viewer/<br />25. August 2011<br />41<br />HTML5 Update. Internet Briefing Recycled. <br />
    42. 42. Danke für Eure Aufmerksamkeit!<br />juerg.stuker@namics.com<br />thomas.junghans@namics.com<br />HTML5 Update. Internet Briefing Recycled. <br />25. August 2011<br />42<br />

    ×