Sylke Gruhnwald, NZZ, Are Journalist Becoming Journalysts? 12 June
HTML5 Update [Vortrag bei der NZZ]
-
Upload
namics -
Category
Technology
-
view
1.319 -
download
3
description
Transcript of HTML5 Update [Vortrag bei der NZZ]
![Page 1: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/1.jpg)
Danke für die Einladung. NZZ.HTML5 Update. Namics.
Jürg Stuker. CEO. Partner.Thomas Junghans. Frontend Engineer.
25. August 2011
![Page 2: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/2.jpg)
Namics.
Google stellt Google Apps auf HTML5 um...
25. August 2011
2 HTML5 Update. Internet Briefing Recycled.
![Page 3: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/3.jpg)
Namics.
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
Grenzen zwischen App und Native schwinden bei Google (insb. auf mobile Devices; “Denkhaltung” aber auch teilweise 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.
![Page 4: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/4.jpg)
Namics.
http://plus.google.com (auf iPad, Update Geste)
25. August 2011
4 HTML5 Update. Internet Briefing Recycled.
![Page 5: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/5.jpg)
Namics.
http://read.amazon.com
25. August 2011
5 HTML5 Update. Internet Briefing Recycled.
![Page 6: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/6.jpg)
![Page 7: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/7.jpg)
Namics.25. August 2011
7 HTML5 Update. Internet Briefing Recycled.
![Page 8: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/8.jpg)
25. August 2011
8
![Page 9: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/9.jpg)
Namics.
Bei Internet-Technologie heisst das eher...
The ones that win are the ones that ship.
25. August 2011
9 HTML5 Update. Internet Briefing Recycled.
![Page 10: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/10.jpg)
Namics.
Der Firefox kann es schon!
25. August 2011
10 HTML5 Update. Internet Briefing Recycled.
http://www.findmebyip.com/litmus
![Page 11: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/11.jpg)
Namics.
Wie viele Versionen von Firefox sehen Sie?
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%
Quelle: Schweizer Website, 1,6 Mio. Besuche, Anfang Juni 2011
ca. 10’000 Besuche/Tag
![Page 12: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/12.jpg)
Namics.
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
![Page 13: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/13.jpg)
Namics.
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, Anfang Juni 2011
![Page 14: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/14.jpg)
Namics.
Weshalb 2,6% HTML5?
Rückwärtskompatibel!
ausser... aktueller Code ist nicht valide
ausser... aktueller Code ist nicht standardkonform (“gegen” Browser entwickelt)
für die Mutigen unter uns (“kein Gewinn”)
ALT: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
NEU: <!DOCTYPE html>
neue Funktionalitäten sind auch ohne HTML5 möglich z.B. http://timetable.search.ch/, http://read.amazon.com
25. August 2011
14 HTML5 Update. Internet Briefing Recycled.
![Page 15: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/15.jpg)
Namics.
Oder ein bisschen überlegter: Was nun?
25. August 2011
15 HTML5 Update. Internet Briefing Recycled.
spricht für HTML5 spricht gegen HTML5
bestehendes HTML validiert Vielfalt an Browsern
Zielsystem sind (leistungsfähige) Mobilgeräte
eingesetzte Werkzeuge
Funktionalität (braucht nicht zwingend HTML5)
zuliefernde Systeme
effizienterer Umsetzung des Designs (insb. CSS3)
fehlende Erfahrung
“state of the art”, schnelle/moderne Browser
zusätzliche Investition (v.a. bei bestehenden Systemen)
![Page 16: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/16.jpg)
Namics.
Und hier noch eine “Firmenherausforderung”...
HTML[5] ist ein lebender Standard...
25. August 2011
16 HTML5 Update. Internet Briefing Recycled.
![Page 17: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/17.jpg)
Namics.
HTML5 - Walkthrough
HTML5 Update. Internet Briefing Recycled. 25. August 2011
17
![Page 18: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/18.jpg)
Namics.
Mein Fokus für heute
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.
![Page 19: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/19.jpg)
Namics.
Geolocation
Jetzt und heute nutzen – Mobilanwendungen!
Code: http://html5demos.com/geo
25. August 2011
19 HTML5 Update. Internet Briefing Recycled.
![Page 20: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/20.jpg)
Namics.
Video Support (1 von 2)
Jetzt und heute nutzen!
25. August 2011
20 HTML5 Update. Internet Briefing Recycled.
![Page 21: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/21.jpg)
Namics.
Video Support (2 von 2)
Leider nur die Hälfte der Wahrheit: Der Browser muss Audio/Video-Dekompression kennen (zus. zu Format)
Lösung 1
spezialisierte Dienstleister wie http://vimeo.com/, http://youtube.com/ oder http://xtendx.com/ nutzen
Lösung 2 (drei Versionen und Flash-Fallback)
WebM (VP8 + Vorbis Audio)
MP4 Container (H.264 baseline Video + AAC “low complexity” Audio)
OGG Container (Theora Video + Vorbis Audio)
Code: http://diveintohtml5.org/video.html
25. August 2011
21 HTML5 Update. Internet Briefing Recycled.
![Page 22: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/22.jpg)
Namics.
Web Storage (1 von 2)
Riesige Chance und Grundlage für Webanwendungen
....aber neues Paradigma mit technischen Hürden
25. August 2011
22 HTML5 Update. Internet Briefing Recycled.
![Page 23: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/23.jpg)
Namics.
Web Storage (2 von 2)
Webentwickler “macht” Client/Server-Anwendung
Datensicherheit/-schutz
Online/Offline-Detektion und deren Usability
mehrere Datenmodelle (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.
![Page 24: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/24.jpg)
Namics.
Web Sockets (JavaScript API)
Löst ein riesige Herausforderung der Webentwicklung: Bidirektionale Kommunikation zwischen Client/Server
eigentlich “nur” eine JavaScript API
http://dev.w3.org/html5/websockets/
Webentwickler “macht” Client/Server-Anwendung
Sicherheitsbedenken machen der API grad das Leben schwer: 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.
![Page 25: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/25.jpg)
Namics.
PushState (JavaScript API)
Einsetzen
korrekter Einsatz gut überlegen, funktionierende Degradation
Lösung für das (mit Fragement Identifier bekämpfte) Status-Problem von Websites die XHR nutzen
Lösung für “Suchmaschinenproblem”
code.google.com/web/ajaxcrawling/docs/getting-started.html
Eine gute Website
lässt sich in jedem Zustand bookmarken
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.
![Page 26: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/26.jpg)
Namics.
Web Forms (1 von 2)
Jetzt und heute nutzen!
Code: http://diveintohtml5.org/forms.html
25. August 2011
26 HTML5 Update. Internet Briefing Recycled.
Quelle: http://slides.html5rocks.com/#form-types-mobile
![Page 27: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/27.jpg)
Namics.
Web Forms (2 von 2)
...noch besser auf Mobilgeräten
25. August 2011
27 HTML5 Update. Internet Briefing Recycled.
Quelle: http://slides.html5rocks.com/#form-types-mobile
![Page 28: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/28.jpg)
Namics.
Drag and Drop (JavaScript API)
Jetzt und heute nutzen!
Technisch gibt es schönere Ansätze: http://twitter.com/#!/Hixie/status/4075253361
Code: http://html5doctor.com/native-drag-and-drop/
25. August 2011
28 HTML5 Update. Internet Briefing Recycled.
![Page 29: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/29.jpg)
Namics.
Semantik (1 von 3)
Richtig und die Zukunft des Webs!
Zwei Dimensionen
strukturierende Tags
Mikroformate
Aber wer nutzt den “zusätzlichen Zucker”?
kein einziger Browser
Suchmaschinen resp. Google für “Rich Snippets” (ohne Versprechen und in einzelnen Fällen)
- http://www.google.com/webmasters/tools/richsnippets
25. August 2011
29 HTML5 Update. Internet Briefing Recycled.
![Page 30: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/30.jpg)
Namics.
Semantik – Tags (2 von 3)
Code: http://diveintohtml5.org/semantics.html#new-elements
25. August 2011
30 HTML5 Update. Internet Briefing Recycled.
![Page 31: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/31.jpg)
Namics.
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
zur Zeit als Grundlage fü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.
![Page 32: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/32.jpg)
Namics.
Canvas
Sehr vielversprechend aber noch blutig
Code: http://diveintohtml5.org/canvas.html
25. August 2011
32 HTML5 Update. Internet Briefing Recycled.
![Page 33: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/33.jpg)
Namics.
Abschluss
25. August 2011
33 HTML5 Update. Internet Briefing Recycled.
![Page 34: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/34.jpg)
Namics.
Features und Ihre Marktreife
Die Matrix
Marktreife
Innovation
einsetzbar
experimentell
gering hoch
Video(Audio)
Wichtigkeit
html5
Geolocation
Canvas
Drag‘n‘Drop
Forms
Web Storage
HTML5 Update. Internet Briefing Recycled. 25. August 2011
34
Semantik *)
Web Sockets
*) Google Rich Snippets: Go!
PushState
![Page 35: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/35.jpg)
Namics.
Kurze Antwort
Für moderne Mobilgeräte nur HTML5!
25. August 2011
35 HTML5 Update. Internet Briefing Recycled.
![Page 36: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/36.jpg)
Namics.
Kurze Antwort (in lang)
“Mobile First” entwickeln!
25. August 2011
36 HTML5 Update. Internet Briefing Recycled.
![Page 37: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/37.jpg)
Namics.
Browserkompatibilität(Juni 2011, 1.6 Mio Besuche, Schweizer Website)
25. August 2011
37 HTML5 Update. Internet Briefing Recycled.
![Page 38: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/38.jpg)
Namics.
Browserkompatibilität: Die Entwicklung ist wichtig
25. August 2011
38 HTML5 Update. Internet Briefing Recycled.
Quelle: search.ch
![Page 39: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/39.jpg)
Namics.
Zusammenfassung
Auch wenn es niemand hören will: Unser Kunde ist (auch) die technische Ausrüstung unserer Users
in der Schweiz zunehmend konfortabel, aber beispielsweise IE6 in China >30%
Desktop
es spricht nichts gegen HTML5...... aber auch (noch) nicht sehr viel dafür
neue Funktionen gezielt einsetzen (und eine gute Degradation anbieten)
Mobile
HTML5 rulez!
HTML5 Update. Internet Briefing Recycled. 25. August 2011
39
![Page 40: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/40.jpg)
Namics.
Weiterführende Informationen (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.
![Page 41: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/41.jpg)
Namics.
Weiterführende Informationen (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.
![Page 42: HTML5 Update [Vortrag bei der NZZ]](https://reader033.fdocuments.net/reader033/viewer/2022061222/548beab5b47959ec0a8b4748/html5/thumbnails/42.jpg)
Namics.
Danke für Eure Aufmerksamkeit!
HTML5 Update. Internet Briefing Recycled. 25. August 2011
42