Der Speaker.
• Boris Fründt
• Senior Web Developer
• Jung von Matt/next
• bondt.me
• @bondt
2
Donnerstag, 5. April 2012
Slide 3
Slide 3 text
Die Agenda.
• Die Abgrenzung.
• Die Herausforderungen.
• Der Begriff HTML5.
• Der Stand der Entwicklung.
• Die Lösungsansätze.
• Das Fazit.
• Der Ausblick.
3
Donnerstag, 5. April 2012
Slide 4
Slide 4 text
Die Abgrenzung.
Nativ Hybrid Web
4
Donnerstag, 5. April 2012
Slide 5
Slide 5 text
Die Abgrenzung.
Nativ Hybrid Web
5
Donnerstag, 5. April 2012
Slide 6
Slide 6 text
Die Herausforderungen.
6
Donnerstag, 5. April 2012
Slide 7
Slide 7 text
• Viele verschiedene Geräte.
• Unterschiedliche Display-Größen.
• Variierende Fähigkeiten.
• „Native-App-Experience“.
• Geschwindigkeitsdefizite.
• Schwieriges Testing und Debugging.
Die Herausforderungen.
7
Donnerstag, 5. April 2012
Slide 8
Slide 8 text
Der Begriff HTML5.
Quelle: https://github.com/SirPepe/SpecGraph/raw/master/graph_w.png
8
Donnerstag, 5. April 2012
Slide 9
Slide 9 text
Der Begriff HTML5 -
Semantik.
• , ,
• ,
• ,
• , ,
9
Donnerstag, 5. April 2012
Slide 10
Slide 10 text
Der Begriff HTML5 -
Formulare.
Android
type=“text“
Android
type=“number“
iOS
type=“email“
iOS
type=“tel“
10
Donnerstag, 5. April 2012
Slide 11
Slide 11 text
Der Begriff HTML5 -
Formulare.
• Attribut „required“
• Attribut „placeholder“
• CSS Selector :invalid, :valid
11
Donnerstag, 5. April 2012
Slide 12
Slide 12 text
Der Begriff HTML5 -
Audio & Video.
Alternativer Inhalt.
Alternativer Inhalt.
12
Donnerstag, 5. April 2012
Slide 13
Slide 13 text
Der Begriff HTML5 -
Styles & Animationen.
• CSS3!
• Rounded Corners, Gradients, Drop
Shadows, etc.
• Transitions, Transformations, Animations.
• 3D Transformationen.
13
Donnerstag, 5. April 2012
Slide 14
Slide 14 text
Der Begriff HTML5 -
Styles & Animationen.
#box1 {
! margin-left: 0;
! -webkit-transition: margin-left .5s ease-in-out;
}
#box1.active {
margin-left: 95%;
}
14
Donnerstag, 5. April 2012
Der Begriff HTML5 -
Geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
17
Donnerstag, 5. April 2012
Slide 18
Slide 18 text
Der Begriff HTML5 -
Offline.
• App Cache
• Local storage, Indexed DB, WebSQL DB
• History API
18
Donnerstag, 5. April 2012
Slide 19
Slide 19 text
Der Begriff HTML5 -
Device Orientation.
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
Quelle des Bildes: http://dev.w3.org/geo/api/spec-source-orientation.html
19
Donnerstag, 5. April 2012
Slide 20
Slide 20 text
Der Begriff HTML5 -
Canvas.
• Simple API zum Zeichnen.
• Zugriff auf Bild- und Video-Informationen.
• Pixel-Manipulationen.
• Niedrige Performance auf mobilen Geräten.
20
Donnerstag, 5. April 2012
Slide 21
Slide 21 text
Der Begriff HTML5 -
Canvas.
21
Donnerstag, 5. April 2012
Slide 22
Slide 22 text
Der Begriff HTML5 -
SVG.
• Basiert auf XML.
• Erstellung von simplen Objekten & Pfaden.
• Einbindung von Bildern & Texten.
• Möglich sind Styles, Transformationen,
Animationen und Filter.
• http://raphaeljs.com/
22
Donnerstag, 5. April 2012
Slide 23
Slide 23 text
Der Begriff HTML5 -
WebGL.
• OpenGL für Browser.
• 3D-Objekte im Browser.
• Zukunftsmusik für mobile Geräte.
23
Donnerstag, 5. April 2012
Slide 24
Slide 24 text
Der Stand der Entwicklung -
Desktop vs. Mobile.
Quelle: Morgan Stanley Research, 2010
24
Donnerstag, 5. April 2012
Slide 25
Slide 25 text
Der Stand der Entwicklung -
Features vs. Devices.
Quelle: http://mobilehtml5.org/
25
Donnerstag, 5. April 2012
Slide 26
Slide 26 text
Die Lösungsansätze -
Polyfills.
„A polyfill, or polyfiller, is a piece of code (or plugin) that
provides the technology that you, the developer, expect the
browser to provide natively. Flattening the API landscape if
you will.“
Remy Sharp
26
Donnerstag, 5. April 2012
Slide 27
Slide 27 text
Die Lösungsansätze -
Polyfills.
• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
27
Donnerstag, 5. April 2012
Slide 28
Slide 28 text
Die Lösungsansätze -
Polyfills.
• http://html5please.com/
28
Donnerstag, 5. April 2012
Slide 29
Slide 29 text
Die Lösungsansätze -
CSS Media Queries.
• @media (min-device-width: 640px) { ... }
• @media screen and (device-aspect-ratio: 16/9) { ... }
• @media (orientation:portrait) { ... }
•
Quelle der Grafik: http://www.adobe.com/devnet/html5/articles/css3-basics.html
29
Donnerstag, 5. April 2012
Slide 30
Slide 30 text
Die Lösungsansätze -
Mobile Meta Tags.
•
•
•
•
30
Donnerstag, 5. April 2012
Die Lösungsansätze -
Tools & Helfer.
• HTML5 Boilerplate
• modernizr
• jQuery + jQuery Mobile
• iScroll
32
Donnerstag, 5. April 2012
Slide 33
Slide 33 text
Die Lösungsansätze -
Tools & Helfer: HTML5 Boilerplate.
• Sammlung von Best Practices
• professionelles HTML/CSS/JS-Template
• http://de.html5boilerplate.com/
• http://html5boilerplate.com/mobile
33
Donnerstag, 5. April 2012
Slide 34
Slide 34 text
Die Lösungsansätze -
Tools & Helfer: modernizr.
• Open-Source JS Library
• Feature Detection
• Hilft bei Progressive Enhancement
• http://www.modernizr.com/
34
Donnerstag, 5. April 2012
Slide 35
Slide 35 text
Die Lösungsansätze -
Tools & Helfer: jQuery Mobile.
• Web Framework - optimiert für viele mobilen Geräte.
• Basiert auf jQuery.
• Bietet viele nützliche Features.
• Einfacher Start in die mobile Entwicklung-
• Sehr gut dokumentiert.
• http://jquerymobile.com/
• http://jquerymobile.com/themeroller/
35
Donnerstag, 5. April 2012
Slide 36
Slide 36 text
Die Lösungsansätze -
Tools & Helfer: iScroll.
• JS Bibliothek für Cross Browser
„Scroll-Inside-Verhalten“
• http://cubiq.org/iscroll-4
36
Donnerstag, 5. April 2012
Slide 37
Slide 37 text
Die Lösungsansätze -
Testing & Debugging.
• Remote Debugging mit Weinre / Adobe Shadow.
37
Donnerstag, 5. April 2012
Slide 38
Slide 38 text
Das Fazit.
• Mobile Web Apps haben Nachteile.
• ABER - sie bieten auch viele Vorteile.
• Entwicklung hat große Reichweite.
• geringere Entwicklungskosten.
• keine Updates notwendig.
• „Native-App-Experience“ kann (nahezu)
erreicht werden.
38
Donnerstag, 5. April 2012
Slide 39
Slide 39 text
• Viele verschiedene Geräte.
• Unterschiedliche Display-Größen.
• Variierende Fähigkeiten.
• „Native-App-Experience“.
• Geschwindigkeitsdefizite.
• Schwieriges Testing und Debugging.
Die Herausforderungen.
39
Donnerstag, 5. April 2012
Slide 40
Slide 40 text
Das Fazit.
• Mobile Web Apps haben Nachteile.
• ABER - sie bieten auch viele Vorteile.
• Entwicklung hat große Reichweite.
• Geringere Entwicklungskosten.
• Keine Updates notwendig.
• „Native-App-Experience“ kann (nahezu)
erreicht werden.
40
Donnerstag, 5. April 2012
Slide 41
Slide 41 text
Der Ausblick.
• Höhere Geräte-Performance.
• Schnellere Verbindungen.
• Bessere Tools.
• Mobile Device APIs: Camera, Battery
Status, Contacts, Messaging, Network
Information API, etc.
41
Donnerstag, 5. April 2012
Slide 42
Slide 42 text
Vielen Dank!
• Fragen?
42
Donnerstag, 5. April 2012