Html5 - Traum oder Wirklichkeit

transcript

HTML5 –

Traum oder Wirklichkeit Vincent Hildebrandt

hildebrandt@emotion-touch.com

Agenda

• Kurzvorstellung

• Einleitung

• Was ist HTML5?

• Wozu HTML5?

• Beispiele

• Wozu noch Apps?

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.“

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: mail@emotion-touch.com

Einleitung

Internetnutzer weltweit

• Etwa 2 Mrd. Menschen weltweit nutzen das Internet

Nutzer 1995 Nutzer 2000 Nutzer 2010

Anzahl der Internetnutzer weltweit (in Mio.)

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.)

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

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

Smartphone Verteilung

0,0% 5,0% 10,0% 15,0% 20,0% 25,0% 30,0% 35,0% 40,0% 45,0%

Symbian

Android

Blackberry

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)

Und wo ist das Problem?

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

App Statistik

• Verwendung von Apps

500.000

140.000

580.000

50.000

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

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 …

Zum Glück gibt es eine Lösung!!

Die Lösung aller Probleme

Oder doch nicht?

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!)

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

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

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)

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

• Was einst DHTML (HTML+CSS+JS) war, ist nun HTML5

(HTML+CSS+JS)

-> Nicht ganz, denn es gibt natürlich eine CSS3-

Spezifikation

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!

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

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

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)

Änderungen im Markup

von HTML4 / XHTML zu HTML5

• Groß- und Kleinschreibung bei Tags funktioniert

• Tags abschließen oder geöffnet lassen funktioniert

• Attribute einfach oder in der XHTML-Notation funktioniert

<video src=“v.mp4“ controls> oder

• Weglassen von „type“ funktioniert

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!

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…

Beispiel Semantische Tags

• Statt:

Beispiel Semantische Tags

• Nun:

Beispiel: HTML5 Struktur

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.)

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?

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…

Kurze Beispiele

Aufbau einer einfachen HTML5 Seite

<!DOCTYPE html>

<head>

</head>

<body>

<p>Hallo Welt!</p>

</body>

</html>

Weitere Elemente

<body>

<header>HTML 5 Header</header>

<li><a href="#">Seite 1</a></li>

</nav>

<h1>Hauptüberschrift HTML5 Demo</h1>

<p>Und hier kommt schlauer Demo-Inhalt</p>

</section>

<footer>© by HTML 5 Footer MDC 2012</footer>

</body>

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;

Alternativlösung

Hier der Header-Bereich

</header></div>

• Mischen von HTML5-Elementen und Divs.

Sinn: Suchmaschinen beachten neue Elemente

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

Weitere Beispiele

Web Storage

Web Storage API speichert Name / Wert Paare auf dem

Client, analog zu Cookies, ohne diese immer zum Server

zurück zu schicken

HTML5 Video

Die Möglichkeit ohne Plugins Videos zu integrieren

(verschiedene Videoformate für verschiedene mobile

Browser) – Steuerung über Javascript möglich

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

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

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.

CSS3 Mediaqueries - Beispiel

Hintergrundfarbe ist abhängig von Ausrichtung

(orientation)

@media screen and (orientation: portrait) {

body { background-color: #f00; }

@media screen and (orientation: landscape) {

body { background-color: #00f; }

</style>

Beispiel: CSS3 Mediaqueries

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>,

Und wie nun Mobil?

<head>

media="all and (max-device-width: 480px)“

href=“styles/smartphone.css" />

initial-scale=1,

maximum-scale=1,

user-scalable=no" />

</head>

Noch nicht nativ genug!

Web-Clip (iOS)

Möglichkeit eine Website als Web-Clip anzulegen:

content="yes" />

Öffnet die App ohne Browser-Elemente in einem sog.

Web-Clip

Web-Clip (iOS)

• Ähnlich wie das sog. favicon am Desktop Rechner

href="images/apple-touch-icon.png" />

Ohne Glanzeffekt von Apple:

href="images/apple-touch-icon.png" />

Größe: 57x57 (andere Größen funktionieren ebenso)

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

HTML5 als App?

• Verschiedene Möglichkeiten

• PhoneGap

• Sencha Touch

• jQuery mobile

• Nativer App Rahmen + HTML Website

• 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.

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ß!)

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/

Fragen?

Vincent Hildebrandt

hildebrandt@emotion-touch.com

Social

Twitter: @vincent_h

www.facebook.com/vincent.hildebrandt

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.

Html5 - Traum oder Wirklichkeit

Documents