1
Wo steht HTML5 Überblick, Möglichkeiten, Zukunft
(ohne Anspruch auf Vollständigkeit) Sven Brencher
Wie ich zu Webentwicklung stehe
Entwickler vs. Unternehmer
2
Yeah Flexbox!
ROI?
Wie kann man HTML5 betrachten?
3
n HTML5 http://www.w3.org/TR/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 http://www.w3.org/standards/techs/css#w3c_all
n (Funktion: 83 JavaScript APIs http://www.w3.org/standards/techs/js#w3c_all )
...also sicher nicht als ein ganzes! (und so wird es auch in Einzelteilen weiter entwickelt)
http
://w
ww
.w3.
org/
htm
l/log
o/
Ü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 http://www.w3.org/standards/semanticweb/data
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 http://www.google.com/webdesigner/
n Adobe Edge Tools p http://html.adobe.com/edge/
4
„In einigen Jahren kann man sich wieder auf Inhalte und Design konzentrieren und nicht mehr nur auf Browserprobleme“
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
5
http://html5boilerplate.com/
http://caniuse.com/
http://modernizr.com/
http://html5please.com/
Browser Entwicklung 2008 bis 2013 6
http://html5readiness.com
Browser Statistik 2014
Chrome Firefox 5+
Safari 5-‐7 IE 9
IE 10 IE 8 und ältere
Schweiz Quelle: http://gs.statcounter.com/ Nur maximal 4-5% der Browser haben teilweise Schwierigkeiten mit nativem HTML5. Eine genauere Betrachtung nach Branchen kann sinnvoll sein.
7
Browser Statistik Schweiz 2009 bis 2013 8
Browser Statistik Weltweit 2010 - 2013 9
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)
n Was immer besser wird: p WebGL und Canvas
http://www.chromeexperiments.com/ und http://www.createjs.com/
p SVG http://snapsvg.io/
10
https://support.google.com/webmasters/answer/99170?hl=en&ref_topic=1088472
div
section header
footer
article figure
aside nav
figcaption time
details
mark summary
CSS3 Zukunft – Webdesigners Wonderland n Was Sie heute bequem einsetzen können
p Designfunktionen: Schatten, runde Ecken, Transparenzen, Webschriften uvm. http://www.svenbrencher.de/blog/html5-und-css3-uebersicht/ http://css-tricks.com/ http://css3pie.com/
n Was in Zukunft kommt p Flexbox – Responsive Dream
http://philipwalton.github.io/solved-by-flexbox/ p Effekte: Blend Modes, Shapes, Regions
(chrome://flags (Enable „Experimental Web Platform features“) http://html.adobe.com/webplatform/showcase/
n Jetzt aber Beispiele p Shapes, Regions, Balanced Text, WebGL:
http://adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src/
p Regions, Viewport Units: http://adobe-webplatform.github.io/Demo-for-National-Geographic-Orphan-Elephants/
p Shapes, Regions:http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland/
p Canvas Blend Modes, Masks, Clip Paths, Transforms, Shapes, Regions, Web Speech API, Leap Motion Controller: http://adobe-webplatform.github.io/Demo-for-Food-Network-Cupcakes/src/
11
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 www.svenbrencher.de n twitter.com/svenbrencher
12
Mehr Links für Webdeveloper n http://www.google.de/webdesigner/ n http://www.html5rocks.com/en/ n http://html5bookmarks.com/ n http://www.microsoft.com/web/ n http://docs.webplatform.org/wiki/Main_Page n http://testthewebforward.org/
13