Download - Html5 - Traum oder Wirklichkeit
![Page 2: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/2.jpg)
Agenda
• Kurzvorstellung
• Einleitung
• Was ist HTML5?
• Wozu HTML5?
• Beispiele
• Wozu noch Apps?
![Page 3: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/3.jpg)
Kurzvorstellung
![Page 4: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/4.jpg)
Kurzvorstellung
• Vincent Hildebrandt
• Entwicklung, Beratung, Konzeption mobiler Lösungen
• Seit Mai 2011 bei emotion touch GmbH – aktuelles
Projektumefeld: mobile Web, iOS, Android,
Windows Phone, Windows 8, Kinect
Randnotiz: „Ich bin ein Berliner.“
![Page 5: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/5.jpg)
In eigener Sache
• Wir suchen Junior- und Senior-Entwickler (m/w):
• iOS
• Android
• Windows Phone 7 und Windows Phone 8
• Windows 8
• Alternative Programmiersprachenkenntnisse und wir
kümmern uns um die nötige Weiterbildung
• Standort: Berlin / Mitte
• Bei Interesse Lebenslauf an: [email protected]
![Page 6: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/6.jpg)
Einleitung
![Page 7: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/7.jpg)
Internetnutzer weltweit
• Etwa 2 Mrd. Menschen weltweit nutzen das Internet
39,6
361
1967
0
500
1000
1500
2000
2500
Nutzer 1995 Nutzer 2000 Nutzer 2010
Anzahl der Internetnutzer weltweit (in Mio.)
![Page 8: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/8.jpg)
Arten von Mobiltelefonen
• Wer hat alles ein Mobiltelefon? Wer hat alles noch ein
Festnetztelefon?
• Mobiltelefontypen
• Einfache Telefone (Anrufe, SMS)
• Feature Phones (Kamera, Messaging, ggf. einfache
Apps, rudimentäre Browser)
• Smart Phone (GPS, Kamera, Videoaufzeichnung,
Internetzugang mit HTML5 Browser, E-Mail-
Programm uvm.)
![Page 9: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/9.jpg)
Smartphone Nutzung
• Smartphone-Nutzung nimmt zu (4 Mrd. Mobiltelefone
weltweit)
3.000.000.000
1.080.000.000
Anteil Smartphones bei Mobiltelefonen weltweit
Mobiltelefone weltweit
Smartphones weltweit
![Page 10: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/10.jpg)
Mobile Web
• Durch Verbreitung der Smartphones: Nutzung des
mobilen Internet nimmt zu
• Gartner Inc. Research prognostiziert in einer Studie aus
dem Jahre 2009, dass 2013 mehr Menschen über
mobile Geräte das Internet nutzen werden, als am
heimischen PC. (Quelle: Wikipedia)
• Eine weitere Studie besagt, dass 2015 der Traffic im
Internet über mobile Geräte den von Desktop-Rechnern
übersteigt
![Page 11: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/11.jpg)
Smartphone Verteilung
40,0%
17,5%
17,5%
15,0%
5,0%
5,0%
0,0% 5,0% 10,0% 15,0% 20,0% 25,0% 30,0% 35,0% 40,0% 45,0%
Symbian
Android
Blackberry
iOS
Microsoft
andere Systeme
Verteilung Smartphones weltweit
• Laut Gartner dominiert (2010) Symbian
• Bei Neuverkäufen sieht es glücklicherweise anders
aus (Kopf an Kopf, Android und iPhone)
![Page 12: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/12.jpg)
Und wo ist das Problem?
![Page 13: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/13.jpg)
Unterschiedliche Plattformen und Systeme
• Menschen surfen zunehmend mobil
• Websites funktionieren grundsätzlich auf aktuellen
Smartphones (mal gut, mal schlecht, mal gar nicht)
• Standard-Website: Usability Problem!
• Verwendung von Apps, statt Websites
![Page 14: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/14.jpg)
App Statistik
• Verwendung von Apps
500.000
140.000
580.000
50.000
0
100.000
200.000
300.000
400.000
500.000
600.000
700.000
iPhone Apps iPad Apps Android Market Windows Phone Marketplace
Anzahl Apps in den Stores
![Page 15: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/15.jpg)
Verschiedene Standards
• Nicht alles läuft auf allen Smartphones
• Flash / mobile Flash (iOS, Android, Symbian…)
(Entwicklung von mobile Flash wurde von Adobe
eingestellt)
• HTML4, XHTML, DHTML…
• HTML5
• OGV, MP4, AVI …
![Page 16: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/16.jpg)
Zum Glück gibt es eine Lösung!!
![Page 17: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/17.jpg)
Die Lösung aller Probleme
![Page 18: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/18.jpg)
Oder doch nicht?
![Page 19: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/19.jpg)
Eine kurze Geschichte der Zeit
• Seit 1999 eine immer schneller voranschreitende
Entwicklung von HTML & CSS
• Von HTML 4.01 zu XHTML
• XHTML verlangte saubere Quelltexte (durch XML-
Notation)
• Entwicklung hin zum semantischen Web
(Suchmaschinen und Screenreader profitieren!)
![Page 20: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/20.jpg)
Die Entwicklung geht langsam weiter
• Entwicklung von XHTML 2.0, um HTML noch weiter zu
optimieren.
• Verschiedene Browserhersteller gründeten die Web
Hypertext Application Technology Working Group
(WHATWG), um eigene Standards zu entwickeln: Web
Forms 2.0 und Web Apps 1.0 als Erweiterungen von
HTML.
![Page 21: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/21.jpg)
WHATWG und W3C gemeinsam!
• Da klar war, dass es keine zwei unterschiedlichen
Standards geben kann, verabschiedete sich das W3C
von XHTML 2.0
• Seit ca. 5 Jahren arbeiten das W3C und die WHATWG
gemeinsam am neuen Standard HTML5
• Von der WHATWG als „HTML Living Standard“
bezeichnet, soll zeigen, dass an HTML gearbeitet wird,
nicht an einer Nachfolge von HTML4 -> Keine weitere
Version
![Page 22: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/22.jpg)
Was ist HTML5?
• Neues Buzzword?
• Nachfolger von HTML4 (und XHTML)
• Neue HTML-Elemente (bestimmte werden weggelassen,
z.B. <frameset>)
• HTML5 als Zusammenfassung von HTML und
Randbereichen:
HTML5, CSS3 und Javascript, um den Funktionsumfang
voll auszuschöpfen (z.B. Local Storage, Canvas,
Geolocation)
![Page 23: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/23.jpg)
DHTML oder DHTML5?
• Bisher (HTML 4, XHTML) strikte Trennung von HTML als
Auszeichnungssprache und CSS sowie JS innerhalb der
Specs.
• In der HTML5 Spezifikation auch Beschreibung von
Javascript APIs und CSS => keine strikte Trennung
mehr
• Was einst DHTML (HTML+CSS+JS) war, ist nun HTML5
(HTML+CSS+JS)
-> Nicht ganz, denn es gibt natürlich eine CSS3-
Spezifikation
![Page 24: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/24.jpg)
Entwicklung von HTML5
• HTML5 ist „nur“ ein Draft, d.h.:
• An HTML5 wird permanent weiterentwickelt, es
kommen neue Elemente hinzu, andere fliegen raus
(z.B. time-Element)
• Verschiedene Browser sind unterschiedlich aktuell
• Kein Browser implementiert bereits alle Tags /
Attribute, Funktionalitäten
• HTML5 ist mit Vorsicht einzusetzen!
![Page 25: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/25.jpg)
Wann kann man HTML5 nutzen?
• Die folgenden Angaben sind wie immer ohne Gewähr…
• 2008 hat die gemeinsame Arbeit von W3C und
WHATWG an HTML5 (erster „Working Draft“) begonnen
• Bis 2014 will das W3C HTML5 als Empfehlung
veröffentlichen
• D.h. 2022 können wir HTML5 endlich nutzen (nur Spaß!)
• Unser Vorteil: Unterstützung bei Smartphones ist OOB
gegeben
![Page 26: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/26.jpg)
Was genau bringt HTML5?
• HTML5 bringt:
• Semantische Elemente (statt <div> gibt es
<header><footer><nav> usw.)
• Einbettung von Audio und Video ohne Plugins (Aber:
Codec-Problem)
• Grafikerstellung im Client (Canvas) für 2D- und 3D-
Elemente
• HTML5 Formulare / browserseitige Validierung
![Page 27: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/27.jpg)
Was bringt HTML5 noch?
• Offline Funktionalität: App-Cache, LocalStorage
• Geo Location (Ortungsfunktionalität über den Browser)
• CSS3 Mediaqueries (Eigenschafts-Abhängige
Stilvorgaben)
• WebSockets (13.02. Realtime Webapps und NFC)
uvm.
![Page 28: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/28.jpg)
Änderungen im Markup
von HTML4 / XHTML zu HTML5
• Groß- und Kleinschreibung bei Tags funktioniert
<html>, <HTML>, <HTml>, <HtMl>
• Tags abschließen oder geöffnet lassen funktioniert
<meta charset=“utf-8“ /> oder <meta charset=“utf-8“>
• Attribute einfach oder in der XHTML-Notation funktioniert
<video src=“v.mp4“ controls> oder
<video src=“v.mp4“ controls=“controls“>
• Weglassen von „type“ funktioniert
<script> und nicht mehr <script type=„text/javascript“>
![Page 29: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/29.jpg)
Ergo HTML5 ist die letzte Version
• HTML5 erlaubt sämtliche in HTML 4.01 und XHTML
enthaltenen Elemente. Hiervon wurden zwar einige
wegdefiniert, sie funktionieren in den Browsern aber
weiterhin (Abwärtskompatibilität).
• HTML5 ist folglich die letzte Version, da es die Menge
aller Elemente erlaubt (alle vergangenen und alle
zukünftigen).
<!DOCTYPE html6> o.ä. funktioniert nicht!
![Page 30: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/30.jpg)
Und was noch?
• Weniger Markup im Header (einfacher Doctype):
Statt: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Nur: <!DOCTYPE HTML>
Später im Beispiel mehr…
![Page 31: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/31.jpg)
Beispiel Semantische Tags
• Statt:
<div id=“header“>
<div id=“nav“>
<div id=“footer“>
<div id=“article“> <div id=“sidebar“>
![Page 32: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/32.jpg)
Beispiel Semantische Tags
• Nun:
<header>
<nav>
<footer>
<section> <aside>
<article>
![Page 33: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/33.jpg)
DEMO
Beispiel: HTML5 Struktur
![Page 34: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/34.jpg)
Gestalten fürs Mobile Web
• Unterschiede beim Gestalten und Konzipieren mobiler
Websites im Gegensatz zu normalen Websites:
• Bildschirmgröße
• Änderungen zwischen Hoch- und Querformat
• Hohe Auflösung (Retina-Display)
• Eingabegeräte
• HTML5 Unterstützung
• Keine Plugins / ActiveX (Flash, Java, usw.)
![Page 35: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/35.jpg)
Und wo ist das Problem?
• Mobile Web hat ähnliche Probleme wie Desktop Web:
• Unterschiedliche Auflösungen
• Unterschiedliche Bandbreiten (LTE, UMTS, GPRS)
• Bessere Bilder = Höhere Dateigröße
• Unterschiedliche Browser (und Standards)
• Nutzerverhalten ist oft anders (aber nicht so oft wie man
denkt?)
• iPhone-Couch-Surfer?
![Page 36: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/36.jpg)
Unterschiedliche Browser?
Safari
Android Browser
webOS Browser
Internet Explorer
Firefox (mobile)
Opera (mobile)
Bada Browser
Chrome für Android
Und alle auch noch mit unterschiedlichen Versionen…
![Page 37: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/37.jpg)
Kurze Beispiele
![Page 38: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/38.jpg)
Aufbau einer einfachen HTML5 Seite
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo at MDC2012</title>
</head>
<body>
<p>Hallo Welt!</p>
</body>
</html>
![Page 39: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/39.jpg)
Weitere Elemente
<body>
<header>HTML 5 Header</header>
<nav>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
</ul>
</nav>
<section>
<h1>Hauptüberschrift HTML5 Demo</h1>
<p>Und hier kommt schlauer Demo-Inhalt</p>
</section>
<footer>© by HTML 5 Footer MDC 2012</footer>
</body>
![Page 40: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/40.jpg)
Und weil das nicht jeder kann…
Lösungsmöglichkeiten für Browser ohne Unterstützung
(z.B. IE): <script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("footer");
</script>
Beispiel Firefox: header, nav, section, footer {
display: block;
}
![Page 41: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/41.jpg)
Alternativlösung
<div id=„header“><header>
Hier der Header-Bereich
</header></div>
• Mischen von HTML5-Elementen und Divs.
Sinn: Suchmaschinen beachten neue Elemente
![Page 42: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/42.jpg)
Und weil keiner alles kann…
Modernizr (http://www.modernizr.com/docs)
if(Modernizr.video){
//browser supports HTML5 Video note the Modernizr.video.*
//apis return "maybe", "probably" or an empty string
if(Modernizr.video.webm){
//browser supports the WebM codec
}
else if(Modernizr.video.ogg){
//browser supports the Ogg Theora codec
}
else if(Modernizr.video.h264){
//browser supports h264 codec
}
}
![Page 43: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/43.jpg)
Weitere Beispiele
![Page 44: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/44.jpg)
Web Storage
Web Storage API speichert Name / Wert Paare auf dem
Client, analog zu Cookies, ohne diese immer zum Server
zurück zu schicken
![Page 45: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/45.jpg)
HTML5 Video
Die Möglichkeit ohne Plugins Videos zu integrieren
(verschiedene Videoformate für verschiedene mobile
Browser) – Steuerung über Javascript möglich
![Page 46: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/46.jpg)
HTML5 Formulare
Zahlreiche neue Attribute und Input-Felder sowie weitere
Möglichkeiten für Validierung, Feld-Vorbelegung.
Input Types: email, url, number, range, day, month, year,
datetime, date, week, time
Bei Smartphones (sofern unterstützt) wird die
entsprechende Tastatur eingeblendet
Browser die kein HTML5 können zeigen input type=„text“
als Fallback
![Page 47: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/47.jpg)
CSS3 Media Queries
• Nicht nur medienabhängige Einbindung, sondern auch
abhängig vom Merkmal des Mediums
• Beispiele für Medien: braille, screen, print, tv
• Beispiele für Merkmale: width, min-width, max-width,
height, device-width, min-resolution, resolution, color
usw.
![Page 48: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/48.jpg)
CSS3 Media Queries
CSS3 MQ bieten die Möglichkeit z.B. anhand des
Bildschirmformats das CSS-Styling anzupassen und so für
verschiedene Bildschirmgrößen zu optimieren.
![Page 49: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/49.jpg)
CSS3 Mediaqueries - Beispiel
Hintergrundfarbe ist abhängig von Ausrichtung
(orientation)
<style type="text/css">
@media screen and (orientation: portrait) {
body { background-color: #f00; }
}
@media screen and (orientation: landscape) {
body { background-color: #00f; }
}
</style>
![Page 50: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/50.jpg)
DEMO
Beispiel: CSS3 Mediaqueries
![Page 51: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/51.jpg)
Und noch mehr?
<article>, <aside>, <audio>,
<canvas>, <command>, <datalist>,
<details>, <dialog>, <embed>,
<figure>, <footer>, <header>,
<hgroup>, <keygen>, <mark>,
<meter>, <nav>, <output>,
<ruby>, <rt>, <rp>, <section>,
<source>, <video>
![Page 52: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/52.jpg)
Und wie nun Mobil?
<head>
<meta charset="utf-8" />
<title>HTML5 Demo at MDC2012</title>
<link rel="stylesheet" type="text/css"
media="all and (max-device-width: 480px)“
href=“styles/smartphone.css" />
<meta name="viewport" content="width=device-width,
initial-scale=1,
maximum-scale=1,
user-scalable=no" />
</head>
![Page 53: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/53.jpg)
Noch nicht nativ genug!
![Page 54: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/54.jpg)
Web-Clip (iOS)
Möglichkeit eine Website als Web-Clip anzulegen:
<meta name="apple-mobile-web-app-capable"
content="yes" />
Öffnet die App ohne Browser-Elemente in einem sog.
Web-Clip
![Page 55: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/55.jpg)
Web-Clip (iOS)
• Ähnlich wie das sog. favicon am Desktop Rechner
<link rel="apple-touch-icon"
href="images/apple-touch-icon.png" />
Ohne Glanzeffekt von Apple:
<link rel=""apple-touch-icon-precomposed"
href="images/apple-touch-icon.png" />
Größe: 57x57 (andere Größen funktionieren ebenso)
![Page 56: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/56.jpg)
Und wozu jetzt noch Apps?
• Viele Funktionalitäten über HTML5 integrierbar, aber:
• Eine App ist im Store (andere Sichtbarkeit)
• Notification Services
• Kamera, Kontakte, SMS, Lage-Sensor o.ä. lassen
sich nur über Apps integrieren
• Cross-App-Aufrufe, Datei-System (z.B. iTunes-
Connectivity), native Datenbank, Parallele
Verarbeitung nur sinnvoll über Apps
![Page 57: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/57.jpg)
HTML5 als App?
• Verschiedene Möglichkeiten
• PhoneGap
• Sencha Touch
• jQuery mobile
• Nativer App Rahmen + HTML Website
![Page 58: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/58.jpg)
Fazit
• Eine funktionierende Website sollte so bleiben wie sie
ist, es gibt keine Notwendigkeit diese nach HTML5 zu
portieren, alle Browser sind abwärtskompatibel und das
sollte auch so bleiben
• Für den Einsatz bei mobilen Lösungen sind
verschiedene Ansätze interessant und der Einsatz von
HTML5 kann durchaus in Erwägung gezogen werden.
![Page 59: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/59.jpg)
Hilfreiche Programme (nur Spaß!)
• Macbook Pro, Macbook Air etc.:
Windows 7 installieren (nativ über EFI und OS X
komplett löschen – just kidding)
Microsoft WebMatrix
• Windows 7
Microsoft WebMatrix
Download:
http://www.microsoft.com/web/webmatrix/
Es funktioniert jeder Text-Editor (macht nur keinen Spaß!)
![Page 60: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/60.jpg)
Hilfreiche Links
Spezifikationen:
http://dev.w3.org/html5/spec/Overview.html
http://www.w3.org/Style/CSS/current-work.en.html
http://www.modernizr.com/docs/
http://code.google.com/p/css3-mediaqueries-js/
http://caniuse.com/
http://html5please.us/
![Page 61: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/61.jpg)
Fragen?
Vincent Hildebrandt
Social
Twitter: @vincent_h
www.facebook.com/vincent.hildebrandt
![Page 62: Html5 - Traum oder Wirklichkeit](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558a1980d8b42a91448b465b/html5/thumbnails/62.jpg)
Dieses Dokument ist urheberrechtlich geschützt. Jede Verwendung,
Weitergabe oder Verwertung, auch in Teilen, ohne die Zustimmung der
emotion touch GmbH ist unzulässig. Die Inhalte dieses Dokuments sind
vertraulich zu behandeln. Die Weitergabe von Informationen oder Inhalten an
Dritte ist unzulässig.