Weitere ähnliche Inhalte Ähnlich wie HTML5 für Einsteiger, Designer und Projektmanager (20) Mehr von Daniel Haller (7) HTML5 für Einsteiger, Designer und Projektmanager1. 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
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
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
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
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
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
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
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
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
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
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