DevDay 2016 HTML5 – eine REvolution für Entwickler

1
DevDay 2016
HTML5 – eine REvolution für Entwickler
2
Die Herausforderung
Lösung A1
Werkzeug A
Lösung A2
Lösung A3
Wunsch
Lösung B1
Werkzeug B
Lösung B2
3
Die Herausforderung (Beispiel)
Schlagen
Nagel &
Hammer
Handbohrer
Loch in der
Wand
Bohren
Bohrmaschine
Bohrinsel
stumpfer
Löffel
Aushöhlen
Wassertropfen
4
Die Herausforderung (in HTML)
Java-Applet
Browsergame
Flash
Silverlight
5
Wer bestimmt, wie es funktioniert?
Flash
JavaApplet
Silverlight
• ActionScript
• Java
• .NET
???
API
???
6
Webpage-Anatomie
WIE?
WAS?
HTML
CSS
API
API
Webpage
WOHIN?
JavaScript
7
HTML5
WIE?
WAS?
Audio / Video
Canvas
Geolocation
HTML
CSS
API
API
Webpage
WOHIN?
JavaScript
8
Demo: Der Baum (ohne HTML)
9
Demo: HTML5 Video-Tag
<video src="file.mp4">
http://www.w3schools.com/tags/tag_video.asp
http://www.w3schools.com/tags/ref_av_dom.asp
10
Demo: Canvas
Spass:
https://www.freeriderhd.com/
Referenz:
http://www.w3schools.com/tags/ref_canvas.asp
Vereinfachung mit jQuery:
http://projects.calebevans.me/jcanvas/
11
Demo mit Stolpersteinen: GeoLocation
Einführung:
http://diveintohtml5.info/geolocation.html
Error-Handling:
https://developer.mozilla.org/en-US/docs/
Web/API/Geolocation/getCurrentPosition
12
Zusammenfassung
 «Neue» HTML5-Elemente bieten standardisierte Funktionalitäten,
jedoch nicht identisches Aussehen
 Standardisierte APIs für den Zugriff via JavaScript sind da,
die Tücken bei der Implementation liegen in der Umsetzung pro Browser
 Es lohnt sich mit Frameworks zu arbeiten.
13
Weitere Fragen, Anregungen… Aufträge?
Alex Kereszturi
[email protected]