HTML5 FÜR EINSTEIGER   ...oder für Kunden, Projektmanager und Designer   Daniel Haller   Wiesbaden, 9.8.2012© S&V         ...
Internet im Umbruch        Herausforderungen        Lösungen        Web-Stack        HTML5 Beispiel-Specs        Showtime ...
© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   3
NEUE DEVICES, NEUE SOFTWARE    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   4
INTERNET IN DEN „NULLER“-JAHREN© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   5
DIE „POST-PC ÄRA“: NEUE GERÄTE© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   6
DIE „POST-PC ÄRA“: NEUE OS, NEUE BROWSER        Desktop        Mobile© S&V             SCHOLZ&VOLKMER | HTML5 | DANIEL HAL...
WEB-APPS & RICH INTERNET APPS    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   8
„KONVENTIONELLE“ WEBSITE                                                 .    (Überwiegend) Seitenbasierend               ...
WEB-APPS & RICH INTERNET APPLICATIONS                                                 .    Applikationscharakter          ...
WEB-APPS & RICH INTERNET APPLICATIONS                                                 .    Content auf verschiedenen      ...
WELCHE HERAUSFORDERUNGEN ERGEBEN SICH?    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   12
WELCHE HERAUSFORDERUNGEN ERGEBEN SICH?        .  Nutzungskontext: Unterwegs, am Schreibtisch, auf der           Couch, im ...
ROCKET SCIENCE? FAST.© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   14
DIE LÖSUNG: „NEUE“ TECHNOLOGIEN, „NEUE“ KONZEPTE    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   15
DIE CHANCEN        HTML5                                            Flash                                     Apps  +     ...
HAUPTVORTEIL: PLATTFORMUNABHÄNGIGKEIT    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   17
PLATTFORMUNABHÄNGIGKEIT                                                 HTML5 ist der kleinste gemeinsame Nenner auf      ...
PLATTFORMUNABHÄNGIGKEIT                      Quelle: http://labs.almerblank.com© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HAL...
PLATTFORMUNABHÄNGIGKEIT                                                        HTML5 bedient effizient alle Desktop- und  ...
PLATTFORMABHÄNGIGKEIT                  Gegenbeispiel:                  Dedizierte Apps für iPhone (iOS), Android, Windows ...
DER HTML5-STACK    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   22
HTML5 bezeichnet zwar einen Standard, wird oft aber unscharf                                                 als Überbegri...
HISTORIE   .  2002: W3C entwickelt XHTML-Standard als Nachfolger für HTML4   .  2004: Entwicklung verläuft problematisch, ...
BESTANDTEILE DER HTML5-SPEZIFIKATION                                                            .    Die HTML5-Specs umfas...
BEISPIELE ZU DEN HTML5-SPECS    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   26
BESTANDTEILE DER HTML5-SPECS© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   27
HTML5 CANVAS                                                               Das Canvas-Element stellt eine Art „Leinwand“  ...
HTML5 CANVAS                                                          Das Canvas-Element stellt eine Art „Leinwand“       ...
BESTANDTEILE DER HTML5-SPECS© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   30
HTML5 GEOLOCATION                                                 Über die Geolocation-API kann ein Browser               ...
HTML5 GEOLOCATION                                                                            Über die Geolocation-API kann...
BESTANDTEILE DER HTML5-SPECS© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   33
HTML5 AUDIO/VIDEO                                                 Audio/Video-Dateien können direkt im Browser            ...
VIDEO                                                             Audio/Video-Dateien können direkt im Browser            ...
BESTANDTEILE DER HTML5-SPECS© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   36
CSS3 MEDIAQUERIES                                                 Stylesheets lassen sich in Abhängigkeit von der Auflösun...
BESTANDTEILE DER HTML5-SPECS© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   38
CSS3 ANIMATIONEN                                                               Ähnlich wie Flash beherrscht CSS3 auch     ...
CSS3 ANIMATIONEN                                                    Ähnlich wie Flash beherrscht CSS3 auch                ...
SHOWTIME    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   41
MOOG SYNTHESIZER                                                         .    Web Fonts                                   ...
RUBIKS CUBE                                                                    .    Canvas                                ...
TOUCHSTYLE WEB-APP        .    Sencha Touch JS-Framework        .    Touch Event Handling        .    CSS3 Transitions    ...
HTML5 – PRODUCTION-READY?    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   45
.    (Noch) sehr heterogene                                                      Implementierung der Bestandteile         ...
FAZIT    TRENNER© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   47
FAZIT  .     sehr viel Beratungsleistung erforderlich  .     Komplexitätsgrad steigt rapide an, für Kunden und Dienstleist...
WIR SIND BEREIT FÜR HTML5.S&V-TECHNIK.© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   49
VIELEN DANK.© S&V   SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER   09082012   50
Upcoming SlideShare
Loading in...5
×

HTML5 für Einsteiger, Designer und Projektmanager

1,127

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,127
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 für Einsteiger, Designer und Projektmanager"

  1. 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. 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. 3. © S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 3
  4. 4. NEUE DEVICES, NEUE SOFTWARE TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 4
  5. 5. INTERNET IN DEN „NULLER“-JAHREN© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 5
  6. 6. DIE „POST-PC ÄRA“: NEUE GERÄTE© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 6
  7. 7. DIE „POST-PC ÄRA“: NEUE OS, NEUE BROWSER Desktop Mobile© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 7
  8. 8. WEB-APPS & RICH INTERNET APPS TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 8
  9. 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. 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. 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. 12. WELCHE HERAUSFORDERUNGEN ERGEBEN SICH? TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 12
  13. 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. 14. ROCKET SCIENCE? FAST.© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 14
  15. 15. DIE LÖSUNG: „NEUE“ TECHNOLOGIEN, „NEUE“ KONZEPTE TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 15
  16. 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. 17. HAUPTVORTEIL: PLATTFORMUNABHÄNGIGKEIT TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 17
  18. 18. PLATTFORMUNABHÄNGIGKEIT HTML5 ist der kleinste gemeinsame Nenner auf allen Plattformen.© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 18
  19. 19. PLATTFORMUNABHÄNGIGKEIT Quelle: http://labs.almerblank.com© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 19
  20. 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. 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. 22. DER HTML5-STACK TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 22
  23. 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. 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. 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. 26. BEISPIELE ZU DEN HTML5-SPECS TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 26
  27. 27. BESTANDTEILE DER HTML5-SPECS© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 27
  28. 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. 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. 30. BESTANDTEILE DER HTML5-SPECS© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 30
  31. 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. 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. 33. BESTANDTEILE DER HTML5-SPECS© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 33
  34. 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. 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. 36. BESTANDTEILE DER HTML5-SPECS© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 36
  37. 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. 38. BESTANDTEILE DER HTML5-SPECS© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 38
  39. 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. 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. 41. SHOWTIME TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 41
  42. 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. 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. 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. 45. HTML5 – PRODUCTION-READY? TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 45
  46. 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. 47. FAZIT TRENNER© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 47
  48. 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. 49. WIR SIND BEREIT FÜR HTML5.S&V-TECHNIK.© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 49
  50. 50. VIELEN DANK.© S&V SCHOLZ&VOLKMER | HTML5 | DANIEL HALLER 09082012 50

×