HTML5 ist ein weites Feld und ein Buzzword par excellence. Und wie das so ist, wissen die wenigsten, die mit dem Begriff um sich werfen, überhaupt darüber Bescheid. Die Präsentation gibt daher einen Einblick darüber wie, was, wo und warum HTML5 überhaupt so toll ist.

1. HTML5 FÜR EINSTEIGER
...oder für Kunden, Projektmanager und Designer
Daniel Haller
Wiesbaden, 9.8.2012
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 1

2. Internet im Umbruch
Herausforderungen
Lösungen
Web-Stack
HTML5 Beispiel-Specs
Showtime
Production-ready?
Fazit
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 2

3. © S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 3

4. NEUE DEVICES, NEUE SOFTWARE
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 4

5. INTERNET IN DEN „NULLER“-JAHREN
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 5

6. DIE „POST-PC ÄRA“: NEUE GERÄTE
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 6

7. DIE „POST-PC ÄRA“: NEUE OS, NEUE BROWSER
Desktop
Mobile
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 7

8. WEB-APPS & RICH INTERNET APPS
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 8

9. „KONVENTIONELLE“ WEBSITE
. (Überwiegend) Seitenbasierend
. Content steht im Vordergrund
. „Statisch“
. Ggf. mit Verlängerung ins Mobile
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 9

10. WEB-APPS & RICH INTERNET APPLICATIONS
. Applikationscharakter
. An Desktop-Apps angelehnt
. Zustände anstelle von Seiten
. Komplexe Architektur
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 10

11. WEB-APPS & RICH INTERNET APPLICATIONS
. Content auf verschiedenen
Plattformen und Devices
. Zentrale Server-Infrastruktur
. APIs zur Anbindung der Clients
notwendig
. eigenes Ökosystem mit
Erweiterungen (Chrome, Facebook,
eBay, etc.)
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 11

12. WELCHE HERAUSFORDERUNGEN ERGEBEN SICH?
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 12

13. WELCHE HERAUSFORDERUNGEN ERGEBEN SICH?
. Nutzungskontext: Unterwegs, am Schreibtisch, auf der
Couch, im Auto, etc.
. Design/UI: Auflösungen von 3“ – 28“
. Bedienkonzepte: Maus vs. Touch/Gesten vs. Sensoren
. Mobile Aspekte: Akkulaufzeiten, Netzverfügbarkeit,
Hardwareleistung, usw.
. Testing: große Anzahl an Devices/Plattformen und
Browsern
. Zielgrupppen: Stärkere Fragmentierung als bisher
. Technik: „Breites Spezialwissen“ erforderlich, hohe
Komplexität
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 13

14. ROCKET SCIENCE? FAST.
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 14

15. DIE LÖSUNG: „NEUE“ TECHNOLOGIEN, „NEUE“ KONZEPTE
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 15

16. DIE CHANCEN
HTML5 Flash Apps
+ • sehr hohe Reichweite • Gute Gestaltungsmöglichkeiten • hoher Freiheitsgrad bei der
• geringe Einstiegshürden • Plugin auf dem Desktop weit Umsetzung
(kein Download, keine verbreitet • beste UX
Installation, keine Plugins) • Konsistentes Verhalten des • Zugriff auf
• einfache Distribution per Plugins in unterschiedlichen Gerätefunktionen
Browser Browsern (z.B. Videos) • Offline nutzbar
• Einfache Aktualisierungen • „Gereifte“, fertige Technologie
• SuMa-freundlich, Barrierearm
- • UX/UI-Einschränkungen durch • Nicht verfügbar für iOS • Vertrieb nur über Stores
den Browser • Indizierung durch Suchmaschinen möglich, langwierige
• Inkonsistent implementierte problematisch Updatezyklen
Standards bedingen hohe • Umständliche Anbindung an CM- • Pro Plattform dedizierte
Testingaufwände Systeme App notwendig
• (Fast) nur online verwendbar • Spezialisierte Entwickler
notwendig
HTML5 verschiebt die Grenzen von HTML in Richtung Flash und nativen Apps.
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 16

17. HAUPTVORTEIL: PLATTFORMUNABHÄNGIGKEIT
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 17

18. PLATTFORMUNABHÄNGIGKEIT
HTML5 ist der kleinste gemeinsame Nenner auf
allen Plattformen.
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 18

19. PLATTFORMUNABHÄNGIGKEIT
Quelle: http://labs.almerblank.com
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 19

20. PLATTFORMUNABHÄNGIGKEIT
HTML5 bedient effizient alle Desktop- und
Mobile-Browser unter Windows, iOS, Android,
MacOS, Safari, Chrome, auf Tablets, etc.
• sehr hohe Reichweite
• vergleichsweise moderate Kosten.
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 20

21. PLATTFORMABHÄNGIGKEIT
Gegenbeispiel:
Dedizierte Apps für iPhone (iOS), Android, Windows Phone, iPad (iOS)
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 21

22. DER HTML5-STACK
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 22

23. HTML5 bezeichnet zwar einen Standard, wird oft aber unscharf
als Überbegriff für bestimmte Technologien und Konzepte genutzt
(„Web-Stack“)
Dokumenten-Struktur, Semantik, (JS-)APIs
Präsentation/Design, Typografie, Animationen
JS-Frameworks, Funktionalität, Animationen
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 23

24. HISTORIE
. 2002: W3C entwickelt XHTML-Standard als Nachfolger für HTML4
. 2004: Entwicklung verläuft problematisch, WHATWG veröffentlicht deshalb eigenen Vorschlag als
Nachfolger: HTML5
. 2007: Gemeinsame Arbeit von WHATWG und W3C an HTML5, bis heute ca. 10 Drafts der Spezifikation
. 2009: Last Call WHATWG
. 2011: Last Call W3C
. 2014: Offizielle Verabschiedung als W3C Recommendation
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 24

25. BESTANDTEILE DER HTML5-SPEZIFIKATION
. Die HTML5-Specs umfassen viele
Funktionalitäten mit eigenen APIs
. HTML5 ist nur ein Teil des Web-
Stacks (HTML, CSS, JS)
Quelle: Peter Kröner
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 25

26. BEISPIELE ZU DEN HTML5-SPECS
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 26

27. BESTANDTEILE DER HTML5-SPECS
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 27

28. HTML5 CANVAS
Das Canvas-Element stellt eine Art „Leinwand“
dar, auf die per Javascript beliebige Inhalte
programmiert werden können.
Quelle: http://html5doctor.com
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 28

29. HTML5 CANVAS
Das Canvas-Element stellt eine Art „Leinwand“
dar, auf die per Javascript beliebige Inhalte
programmiert werden können.
Quelle: http://www.nihilogic.dk/labs/mariokart
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 29

30. BESTANDTEILE DER HTML5-SPECS
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 30

31. HTML5 GEOLOCATION
Über die Geolocation-API kann ein Browser
Standortinformationen vom Gerät abfragen
(was bisher nativen Apps vorbehalten war).
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 31

32. HTML5 GEOLOCATION
Über die Geolocation-API kann ein Browser
Standortinformationen vom Gerät abfragen (was
bisher nativen Apps vorbehalten war), z.B. für
browserbasierende (!) Navigation.
Quelle: http://instantnavi.com
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 32

33. BESTANDTEILE DER HTML5-SPECS
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 33

34. HTML5 AUDIO/VIDEO
Audio/Video-Dateien können direkt im Browser
abgespielt werden, Flash ist (theoretisch) nicht
mehr notwendig. Allerdings benötigt beinahe
jeder Browser ein anderes Videoformat.
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 34

35. VIDEO
Audio/Video-Dateien können direkt im Browser
abgespielt werden, Flash ist (theoretisch) nicht
mehr notwendig. Allerdings benötigt beinahe
jeder Browser ein anderes Videoformat.
. Video
. JS-API
Quelle: http://www.apple.com/html5/showcase/video/
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 35

36. BESTANDTEILE DER HTML5-SPECS
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 36

37. CSS3 MEDIAQUERIES
Stylesheets lassen sich in Abhängigkeit von der Auflösung
laden („Responsive Design“).
Quelle: http://colly.com
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 37

38. BESTANDTEILE DER HTML5-SPECS
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 38

39. CSS3 ANIMATIONEN
Ähnlich wie Flash beherrscht CSS3 auch
Animationen.
Quelle: http://www.impressivewebs.com/demo-files/css3-animated-scene
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 39

40. CSS3 ANIMATIONEN
Ähnlich wie Flash beherrscht CSS3 auch
Animationen.
Quelle:
http://neography.com/experiment/circles/solarsystem
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 40

41. SHOWTIME
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 41

42. MOOG SYNTHESIZER
. Web Fonts
. CSS3 Transitions/Animations
. Web Audio API
In Aktion:
http://www.google.com/doodles/robert-moogs-78th-birthday
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 42

43. RUBIKS CUBE
. Canvas
. Touch Events
. Mediaqueries
. CSS3 Transitions
. WebGL
In Aktion:
https://developer.mozilla.org/en-US/demos/detail/rubiks-cube/launch
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 43

44. TOUCHSTYLE WEB-APP
. Sencha Touch JS-Framework
. Touch Event Handling
. CSS3 Transitions
. Localstorage
In Aktion:
http://touchstyle.mobi/app/
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 44

45. HTML5 – PRODUCTION-READY?
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 45

46. . (Noch) sehr heterogene
Implementierung der Bestandteile
von HTML5 in den Browsern
. Aber: Für die meisten Browser
existieren (JS-/Flash-basierende)
Fallbacks oder Konzepte zur
graceful Degradation
. Fallbacks erhöhen
selbstverständlich den Aufwand
Quelle: http://caniuse.com
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 46

47. FAZIT
TRENNER
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 47

48. FAZIT
. sehr viel Beratungsleistung erforderlich
. Komplexitätsgrad steigt rapide an, für Kunden und Dienstleister
. Umdenken erforderlich (wir machen nicht nur „einfach eine Website“)
. Wir stecken mitten im Umbruch
. HTML5 kann und soll mit Hilfe der passenden Fallbacks bereits verwendet werden
. HTML5 erfordert Detailwissen und Spezialisierung
. HTML5 bringt technische Aspekte in die Gestaltung
. HTML5 macht das Frontend sehr viel komplexer
. HTML5 ist die Zukunft.
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 48

49. WIR SIND BEREIT FÜR HTML5.
S&V-TECHNIK.
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 49

50. VIELEN DANK.
© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 50