Wo steht HTML5: Überblick, Möglichkeiten, Zukunft

0 %
100 %
Information about Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Business & Mgmt

Published on March 14, 2014

Author: digicomp

Source: slideshare.net

Description

HTML5 und CSS3 bieten neue native Funktionen und Gestaltungsoptionen für Webdesigner und Entwickler. Welche Technologien sich heute schon bedenkenlos einsetzen lassen und wie sich die Standards in der Zukunft weiterentwickeln werden, sind die Themen dieser Präsentation von Sven Brechner.

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

Sven Brencher Über mich: n  Muschelschubser n  Fischkopp n  Videoproducer n  Motion Designer n  Ex-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 2

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

Wie kann man HTML5 betrachten? 4 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://www.w3.org/html/logo/

Ü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/ 5 „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 6 http://html5boilerplate.com/ http://caniuse.com/ http://modernizr.com/ http://html5please.com/

Browser Entwicklung 2008 bis 2013 7 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. 8

Browser Statistik Schweiz 2009 bis 2013 9

Browser Statistik Weltweit 2010 - 2013 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) n  Was immer besser wird: p  WebGL und Canvas http://www.chromeexperiments.com/ und http://www.createjs.com/ p  SVG http://snapsvg.io/ 11 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/ 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

Add a comment

Related presentations

Related pages

Wo steht HTML5 - svenbrencher.de

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

Vorträge auf dem Digicomp Publishing Day 2014 | Sven ...

Wo steht HTML5 – Überblick, Möglichkeiten, Zukunft; ... Der Vortrag zu den Edge Tools und Services wurde auch aufgezeichnet und steht ... Edge, HTML5 ...
Read more

HTML lernen und die eigene Website erstellen - HTML Kurs

aktuelles HTML5 und CSS3 lernen; lernen, wie man Design erstellen kann; Onlinestellen der erstellten Website; ... Überblick über Möglichkeiten und ...
Read more

HTML5 - Was geht heute schon, was geht nicht? Der große ...

... in Zukunft für meine Arbeit HTML5 überall dort zum ... Insofern steht dem Einsatz von HTML5 so oder ... Drei Möglichkeiten, HTML5-Elemente im ...
Read more

Apps mit HTML5, CSS3 und JavaScript: Für ... - amazon.de

... Apps mit HTML5, ... Entdecken Sie die Möglichkeiten von HTML5 , ... Der Leser bekommt einen Überblick der aktuell verfügbaren Frameworks und ...
Read more

HTML5 – Crashkurs-HTML - Video-Trainings von video2brain ...

Wo HTML5 drauf steht, ... welche Möglichkeiten Ihnen HTML5 durch den Einsatz neuer ... welche praktischen Erneuerungen Ihnen CSS3 in Zukunft ...
Read more

HTML5 Überblick - Browsergame Magazin

HTML5 Überblick. 0. ... Fest steht, die Entwicklung von HTML5 ... So sind Schriften mit Schatten oder abgerundete Ecken nur ein paar neue Möglichkeiten ...
Read more