HTML5 Update [Vortrag bei der NZZ]

Danke für die Einladung. NZZ.HTML5 Update. Namics. Jürg Stuker. CEO. Partner. Thomas Junghans. Frontend Engineer. 25. August 2011

Google stellt Google Apps auf HTML5 um... 25. August 2011 2 HTML5 Update. Internet Briefing Recycled.

Google stellt Google Apps auf HTML5 um As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. http://googledocs.blogspot.com/2011/06/our-plans-to-support-modern-browsers.html Grenzenzwischen App und Native schwindenbei Google (insb. auf mobile Devices; “Denkhaltung” aberauchteilweise von Apple “erwirkt”) Bsp. http://plus.google.com auf Mobile/Tablet Bsp. http://gmail.com auf Mobile/Tablet 25. August 2011 3 HTML5 Update. Internet Briefing Recycled.

http://plus.google.com (auf iPad, Update Geste) 25. August 2011 4 HTML5 Update. Internet Briefing Recycled.

http://read.amazon.com 25. August 2011 5 HTML5 Update. Internet Briefing Recycled.

HTML5 Update. Internet Briefing Recycled. 25. August 2011 7

Bei Internet-Technologieheisst das eher... The ones that win are the ones that ship. 25. August 2011 9 HTML5 Update. Internet Briefing Recycled.

Der Firefox kannesschon! 25. August 2011 10 HTML5 Update. Internet Briefing Recycled. http://www.findmebyip.com/litmus

WievieleVersionen von Firefox sehenSie? Firefox (4.0.1) 14.46% Firefox (3.6.17) 4.87% Firefox (3.6.13) 1.02% Firefox (4) 0.60% Firefox (3.5.19) 0.56% Firefox (3.6.16) 0.47% Firefox (3.6.3) 0.39% Firefox (3.6.8) 0.29% Firefox (3.6) 0.28% Firefox (3.6.10) 0.27% Firefox (3.6.15) 0.26% Firefox (3.0.19) 0.23% 25. August 2011 11 HTML5 Update. Internet Briefing Recycled. Firefox (3.6.12) 0.21% Firefox (3.6.6) 0.16% Firefox (5) 0.12% Firefox (3.6.2) 0.09% Firefox (3.5.3) 0.08% Firefox (3.5.5) 0.08% Firefox (3.5.7) 0.07% Firefox (3.5.16) 0.06% Firefox (Andere) 4.11% ca. 10’000 Besuche/Tag Quelle: Schweizer Website, 1,6 Mio. Besuche, AnfangJuni 2011

Und was kann “der Firefox” genau Am Beispiel der Canvas Test Suite (nur 2D) 25. August 2011 12 HTML5 Update. Internet Briefing Recycled. http://philip.html5.org/tests/canvas/suite/tests/results.html

Häufigkeit von Doctypes (CH Domänen, Juni 2011) 25. August 2011 13 HTML5 Update. Internet Briefing Recycled. Quelle: search.ch Big Crawl, 500’000 Schweizer Website, AnfangJuni 2011

Weshalb 2,6% HTML5? Rückwärtskompatibel! ausser... aktueller Code istnichtvalide ausser... aktueller Code istnichtstandardkonform (“gegen” Browser entwickelt) für die Mutigenunteruns (“keinGewinn”) ALT: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> NEU: <!DOCTYPE html> neueFunktionalitätensindauchohne HTML5 möglichz.B. http://timetable.search.ch/, http://read.amazon.com 25. August 2011 14 HTML5 Update. Internet Briefing Recycled.

Oder einbisschenüberlegter: Was nun? 25. August 2011 15 HTML5 Update. Internet Briefing Recycled.

Und hiernocheine“Firmenherausforderung”... HTML[5] isteinlebender Standard... 25. August 2011 16 HTML5 Update. Internet Briefing Recycled.

HTML5 - Walkthrough HTML5 Update. Internet Briefing Recycled. 25. August 2011 17

Mein Fokusfürheute Geolocation Video Support Web Storage Web Sockets Push State Web Forms Drag and Drop Semantik Canvas 25. August 2011 18 HTML5 Update. Internet Briefing Recycled.

Geolocation Jetzt und heutenutzen– Mobilanwendungen! Code: http://html5demos.com/geo 25. August 2011 19 HTML5 Update. Internet Briefing Recycled.

Video Support (1 von 2) Jetzt und heutenutzen! 25. August 2011 20 HTML5 Update. Internet Briefing Recycled.

Video Support(2 von 2) Leidernur die Hälfte der Wahrheit: Der Browser muss Audio/Video-Dekompressionkennen (zus. zu Format) Lösung 1 spezialisierteDienstleisterwie http://vimeo.com/, http://youtube.com/ oder http://xtendx.com/ nutzen Lösung 2 (dreiVersionenund Flash-Fallback) WebM (VP8 + Vorbis Audio) MP4 Container (H.264 baseline Video + AAC “low complexity” Audio) OGG Container (TheoraVideo + Vorbis Audio) Code: http://diveintohtml5.org/video.html 25. August 2011 21 HTML5 Update. Internet Briefing Recycled.

Web Storage (1 von 2) Riesige Chance und GrundlagefürWebanwendungen ....aberneuesParadigmamittechnischenHürden 25. August 2011 22 HTML5 Update. Internet Briefing Recycled.

Web Storage (2 von 2) Webentwickler “macht” Client/Server-Anwendung Datensicherheit/-schutz Online/Offline-Detektion und deren Usability mehrereDatenmodelle (browserabhängig) Key/Value-Paare (Default meist 5 MB) Web SQL-Database: http://dev.w3.org/html5/webdatabase/ ... Code: http://www.html5rocks.com/tutorials/offline/whats-offline/ http://diveintohtml5.org/storage.html 25. August 2011 23 HTML5 Update. Internet Briefing Recycled.

Web Sockets (JavaScript API) LösteinriesigeHerausforderung der Webentwicklung: BidirektionaleKommunikationzwischenClient/Server eigentlich “nur” eine JavaScript API http://dev.w3.org/html5/websockets/ Webentwickler “macht” Client/Server-Anwendung Sicherheitsbedenkenmachender API grad das Lebenschwer: In Opera und Firefox per Default deaktiviert http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html Code: http://html5demos.com/web-socket, http://websocket.org/ 25. August 2011 24 HTML5 Update. Internet Briefing Recycled.

PushState (JavaScript API) Einsetzen korrekterEinsatz gut überlegen, funktionierende Degradation Lösungfür das (mitFragement Identifier bekämpfte) Status-Problem von Websites die XHR nutzen Lösungfür “Suchmaschinenproblem” code.google.com/web/ajaxcrawling/docs/getting-started.html Einegute Website lässtsich in jedemZustandbookmarken unterstützt den Back Button (des Browsers) Code: http://diveintohtml5.org/history.html, inkl. Fallback: https://github.com/balupton/History.js/ 25. August 2011 25 HTML5 Update. Internet Briefing Recycled.

Web Forms (1 von 2) Jetzt und heutenutzen! Code: http://diveintohtml5.org/forms.html 25. August 2011 26 HTML5 Update. Internet Briefing Recycled. Quelle: http://slides.html5rocks.com/#form-types-mobile

Web Forms (2 von 2) ...nochbesser auf Mobilgeräten 25. August 2011 27 HTML5 Update. Internet Briefing Recycled. Quelle: http://slides.html5rocks.com/#form-types-mobile

Drag and Drop (JavaScript API) Jetzt und heutenutzen! TechnischgibtesschönereAnsätze: http://twitter.com/#!/Hixie/status/4075253361 Code: http://html5doctor.com/native-drag-and-drop/ 25. August 2011 28 HTML5 Update. Internet Briefing Recycled.

Semantik (1 von 3) Richtig und die Zukunft des Webs! ZweiDimensionen strukturierende Tags Mikroformate Aberwernutzt den “zusätzlichenZucker”? keineinziger Browser Suchmaschinenresp. Google für “Rich Snippets” (ohneVersprechen und in einzelnenFällen) http://www.google.com/webmasters/tools/richsnippets 25. August 2011 29 HTML5 Update. Internet Briefing Recycled.

Semantik– Tags (2 von 3) Code: http://diveintohtml5.org/semantics.html#new-elements 25. August 2011 30 HTML5 Update. Internet Briefing Recycled.

Semantik– Mikroformate (3 von 3) http://microformats.org/ Today [June 2, 2011] we’re announcing schema.org, a new initiative from Google, Bing and Yahoo! http://googlewebmastercentral.blogspot.com/2011/06/introducing-schemaorg-search-engines.html zurZeitalsGrundlagefür Rich Snippets für: People, Reviews, Products, Events und Recipes Code: http://schema.org/ und http://diveintohtml5.org/extensibility.html 25. August 2011 31 HTML5 Update. Internet Briefing Recycled.

Canvas Sehrvielversprechendabernochblutig Code: http://diveintohtml5.org/canvas.html 25. August 2011 32 HTML5 Update. Internet Briefing Recycled.

Abschluss 25. August 2011 33 HTML5 Update. Internet Briefing Recycled.

Features und Ihre Marktreife Die Matrix einsetzbar Geolocation Video(Audio) Forms Drag‘n‘Drop PushState html5 Web Storage Marktreife Canvas Web Sockets Semantik *) *) Google Rich Snippets: Go! experimentell Innovation gering hoch Wichtigkeit HTML5 Update. Internet Briefing Recycled. 25. August 2011 34

KurzeAntwort FürmoderneMobilgerätenur HTML5! 25. August 2011 35 HTML5 Update. Internet Briefing Recycled.

KurzeAntwort (in lang) “Mobile First” entwickeln! 25. August 2011 36 HTML5 Update. Internet Briefing Recycled.

Browserkompatibilität(Juni 2011, 1.6 Mio Besuche, Schweizer Website) 25. August 2011 37 HTML5 Update. Internet Briefing Recycled.

Browserkompatibilität: Die Entwicklungistwichtig 25. August 2011 38 HTML5 Update. Internet Briefing Recycled. Quelle: search.ch

Zusammenfassung Auchwennesniemandhören will: Unser Kundeist (auch) die technischeAusrüstungunsererUsers in der Schweizzunehmendkonfortabel, aberbeispielsweise IE6 in China >30% Desktop essprichtnichtsgegen HTML5...... aberauch (noch) nichtsehrvieldafür neueFunktionengezielteinsetzen (und einegute Degradation anbieten) Mobile HTML5 rulez! HTML5 Update. Internet Briefing Recycled. 25. August 2011 39

WeiterführendeInformationen (1/2) Specs http://www.whatwg.org/ und http://blog.whatwg.org/ http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.w3.org/TR/html5/ Tutorials http://diveintohtml5.org/ http://apirocks.com/html5/ http://www.w3schools.com/html5/ 25. August 2011 40 HTML5 Update. Internet Briefing Recycled.

WeiterführendeInformationen (2/2) Kompatibilität http://caniuse.com/ http://www.findmebyip.com/litmus http://html5test.com/ Demos http://www.html5rocks.com/ http://html5demos.com/ Tools http://www.modernizr.com/ http://html5boilerplate.com/ http://software.hixie.ch/utilities/js/live-dom-viewer/ 25. August 2011 41 HTML5 Update. Internet Briefing Recycled.

Danke für Eure Aufmerksamkeit! juerg.stuker@namics.com thomas.junghans@namics.com HTML5 Update. Internet Briefing Recycled. 25. August 2011 42

HTML5 Update [Vortrag bei der NZZ]

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (8)

Similaire à HTML5 Update [Vortrag bei der NZZ]

Similaire à HTML5 Update [Vortrag bei der NZZ] (20)

Plus de Namics – A Merkle Company

Plus de Namics – A Merkle Company (20)

HTML5 Update [Vortrag bei der NZZ]

Notes de l'éditeur