Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit)

Transkript

1 1 Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit) Sven Brencher

2 2 Wie ich zu Webentwicklung stehe Yeah Flexbox! Entwickler vs. Unternehmer ROI?

3 3 Wie kann man HTML5 betrachten? n HTML5 p Semantik: z.b. Struktur und Formulare p Multimedia: Audio und Video p Grafik: z.b. Canvas, WebGL, SVG Grafik, Webfonts p Daten: z.b. Web Storage, WebRTC p Devices: Geolocation, Orientation, Multi-Touch... n Styles: 87 CSS3 Module n (Funktion: 83 JavaScript APIs )...also sicher nicht als ein ganzes! (und so wird es auch in Einzelteilen weiter entwickelt)

4 4 Überall Baustellen also wo geht es jetzt hin? n Die W3C Dokumentationen sind für viele Bereiche (fast) fertig jetzt kann es los gehen! n HTML5 Semantik: von Dokumenten zu Daten n n Stabile Designfunktionen für Desktop, Geräte und Wearables: p Flexbox für Responsive Design p CSS Effekte p Tools für Designer und Entwickler n Google Webdesigner p n Adobe Edge Tools p In einigen Jahren kann man sich wieder auf Inhalte und Design konzentrieren und nicht mehr nur auf Browserprobleme

5 5 Schön, aber wo stehen die Browser? n Entscheidungskriterien für eine HTML5 Funktion p Vorteile (z.b. Ladezeiten, Usability) p Aktuelle Browser-Unterstützung p Entwicklungsaufwand p Aufwand für Fallback-Lösungen n Entscheidungshilfen: p Empfehlungen und Polyfills: HTML 5 Please p Browserstatus:Caniuse.com p Fallback-Test: Modernizr n Eigene Analytics verwenden: Browser Versionen der Kunden

6 6 Browser Entwicklung 2008 bis

7 7 Browser Statistik 2014 Schweiz Quelle: Nur maximal 4-5% der Browser haben teilweise Schwierigkeiten mit nativem HTML5. Eine genauere Betrachtung nach Branchen kann sinnvoll sein. Chrome Safari 5-7 IE 10 Firefox 5+ IE 9 IE 8 und ältere

8 8 Browser Statistik Schweiz 2009 bis 2013

9 9 Browser Statistik Weltweit

10 10 HTML5 Zukunft n Was Sie heute problemlos einsetzen können: p HTML5 Tags, verbesserte Semantik und RDFa (Rich Snippets) p Neue Formularfunktionen p HTML5 Video (mit Flash Fallback) answer/99170?hl=en&ref_topic= n Was immer besser wird: p WebGL und Canvas und p SVG div section nav article header footer figure figcaption time aside details mark summary

11 11 CSS3 Zukunft Webdesigners Wonderland n Was Sie heute bequem einsetzen können p Designfunktionen: Schatten, runde Ecken, Transparenzen, Webschriften uvm n Was in Zukunft kommt p Flexbox Responsive Dream p Effekte: Blend Modes, Shapes, Regions (chrome://flags (Enable Experimental Web Platform features ) n Jetzt aber Beispiele p Shapes, Regions, Balanced Text, WebGL: browser/src/ p Regions, Viewport Units: Elephants/ p Shapes, Regions: p Canvas Blend Modes, Masks, Clip Paths, Transforms, Shapes, Regions, Web Speech API, Leap Motion Controller:

12 12 Sven Brencher Über mich: n Videoproducer n Motion Designer n Webentwickler n Digicomp Trainer n Video2Brain Autor n Adobe Consultant n Adobe Certified Instructor n Premiere Pro Master Trainer n n twitter.com/svenbrencher

13 13 Mehr Links für Webdeveloper n n n n n n