Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Danke für die Einladung. NZZ.HTML5 Update. Namics.<br />Jürg Stuker. CEO. Partner.<br />Thomas Junghans. Frontend Engineer...
Google stellt Google Apps auf HTML5 um...<br />25. August 2011<br />2<br />HTML5 Update. Internet Briefing Recycled. <br />
Google stellt Google Apps auf HTML5 um<br />As of August 1st, we will discontinue support for the following browsers and t...
http://plus.google.com (auf iPad, Update Geste)<br />25. August 2011<br />4<br />HTML5 Update. Internet Briefing Recycled....
http://read.amazon.com<br />25. August 2011<br />5<br />HTML5 Update. Internet Briefing Recycled. <br />
HTML5 Update. Internet Briefing Recycled. <br />25. August 2011<br />7<br />
25. August 2011<br />8<br />
Bei Internet-Technologieheisst das eher...<br />The ones that win are the ones that ship.<br />25. August 2011<br />9<br /...
Der Firefox kannesschon!<br />25. August 2011<br />10<br />HTML5 Update. Internet Briefing Recycled. <br />http://www.find...
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...
Und was kann “der Firefox” genau<br />Am Beispiel der Canvas Test Suite (nur 2D)<br />25. August 2011<br />12<br />HTML5 U...
Häufigkeit von Doctypes (CH Domänen, Juni 2011)<br />25. August 2011<br />13<br />HTML5 Update. Internet Briefing Recycled...
Weshalb 2,6% HTML5?<br />Rückwärtskompatibel!<br />ausser... aktueller Code istnichtvalide<br />ausser... aktueller Code i...
Oder einbisschenüberlegter: Was nun?<br />25. August 2011<br />15<br />HTML5 Update. Internet Briefing Recycled. <br />
Und hiernocheine“Firmenherausforderung”...<br />HTML[5] isteinlebender Standard...<br />25. August 2011<br />16<br />HTML5...
HTML5 - Walkthrough<br />HTML5 Update. Internet Briefing Recycled. <br />25. August 2011<br />17<br />
Mein Fokusfürheute<br />Geolocation<br />Video Support<br />Web Storage<br />Web Sockets<br />Push State<br />Web Forms<br...
Geolocation<br />Jetzt und heutenutzen– Mobilanwendungen!<br />Code: http://html5demos.com/geo<br />25. August 2011<br />1...
Video Support (1 von 2)<br />Jetzt und heutenutzen!<br />25. August 2011<br />20<br />HTML5 Update. Internet Briefing Recy...
Video Support(2 von 2)<br />Leidernur die Hälfte der Wahrheit: Der Browser muss Audio/Video-Dekompressionkennen (zus. zu F...
Web Storage (1 von 2)<br />Riesige Chance und GrundlagefürWebanwendungen<br />....aberneuesParadigmamittechnischenHürden<b...
Web Storage (2 von 2)<br />Webentwickler “macht” Client/Server-Anwendung<br />Datensicherheit/-schutz<br />Online/Offline-...
Web Sockets (JavaScript API)<br />LösteinriesigeHerausforderung der Webentwicklung: BidirektionaleKommunikationzwischenCli...
PushState (JavaScript API)<br />Einsetzen<br />korrekterEinsatz gut überlegen, funktionierende Degradation<br />Lösungfür ...
Web Forms (1 von 2)<br />Jetzt und heutenutzen!<br />Code: http://diveintohtml5.org/forms.html<br />25. August 2011<br />2...
Web Forms (2 von 2)<br />...nochbesser auf Mobilgeräten<br />25. August 2011<br />27<br />HTML5 Update. Internet Briefing ...
Drag and Drop (JavaScript API)<br />Jetzt und heutenutzen!<br />TechnischgibtesschönereAnsätze: http://twitter.com/#!/Hixi...
Semantik (1 von 3)<br />Richtig und die Zukunft des Webs!<br />ZweiDimensionen<br />strukturierende Tags<br />Mikroformate...
Semantik– Tags (2 von 3)<br />Code: http://diveintohtml5.org/semantics.html#new-elements<br />25. August 2011<br />30<br /...
Semantik– Mikroformate (3 von 3)<br />http://microformats.org/<br />Today [June 2, 2011] we’re announcing schema.org, a ne...
Canvas<br />Sehrvielversprechendabernochblutig<br />Code: http://diveintohtml5.org/canvas.html<br />25. August 2011<br />3...
Abschluss<br />25. August 2011<br />33<br />HTML5 Update. Internet Briefing Recycled. <br />
Features und Ihre Marktreife<br />Die Matrix<br />einsetzbar<br />Geolocation<br />Video(Audio)<br />Forms<br />Drag‘n‘Dro...
KurzeAntwort<br />FürmoderneMobilgerätenur HTML5!<br />25. August 2011<br />35<br />HTML5 Update. Internet Briefing Recycl...
KurzeAntwort (in lang)<br />“Mobile First” entwickeln!<br />25. August 2011<br />36<br />HTML5 Update. Internet Briefing R...
Browserkompatibilität(Juni 2011, 1.6 Mio Besuche, Schweizer Website)<br />25. August 2011<br />37<br />HTML5 Update. Inter...
Browserkompatibilität: Die Entwicklungistwichtig<br />25. August 2011<br />38<br />HTML5 Update. Internet Briefing Recycle...
Zusammenfassung<br />Auchwennesniemandhören will: Unser Kundeist (auch) die technischeAusrüstungunsererUsers<br />in der S...
WeiterführendeInformationen (1/2)<br />Specs<br />http://www.whatwg.org/ und http://blog.whatwg.org/<br />http://www.whatw...
WeiterführendeInformationen (2/2)<br />Kompatibilität<br />http://caniuse.com/<br />http://www.findmebyip.com/litmus<br />...
Danke für Eure Aufmerksamkeit!<br />juerg.stuker@namics.com<br />thomas.junghans@namics.com<br />HTML5 Update. Internet Br...
Nächste SlideShare
Wird geladen in …5
×

HTML5 Update [Vortrag bei der NZZ]

1.828 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
  • Als Erste(r) kommentieren

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 />

×