Html5 - Traum oder Wirklichkeit
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Html5 - Traum oder Wirklichkeit

on

  • 2,301 views

 

Statistics

Views

Total Views
2,301
Views on SlideShare
2,296
Embed Views
5

Actions

Likes
1
Downloads
10
Comments
0

2 Embeds 5

https://twitter.com 4
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 - Traum oder Wirklichkeit Presentation Transcript

  • 1. HTML5 –Traum oder Wirklichkeit Vincent Hildebrandt hildebrandt@emotion-touch.com
  • 2. Agenda• Kurzvorstellung• Einleitung• Was ist HTML5?• Wozu HTML5?• Beispiele• Wozu noch Apps?
  • 3. Kurzvorstellung
  • 4. 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, KinectRandnotiz: „Ich bin ein Berliner.“
  • 5. 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
  • 6. Einleitung
  • 7. Internetnutzer weltweit• Etwa 2 Mrd. Menschen weltweit nutzen das Internet Anzahl der Internetnutzer weltweit (in Mio.) 2500 1967 2000 1500 1000 500 361 39,6 0 Nutzer 1995 Nutzer 2000 Nutzer 2010
  • 8. 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.)
  • 9. Smartphone Nutzung• Smartphone-Nutzung nimmt zu (4 Mrd. Mobiltelefone weltweit) Anteil Smartphones bei Mobiltelefonen weltweit 1.080.000.000 Mobiltelefone weltweit Smartphones weltweit 3.000.000.000
  • 10. 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
  • 11. Smartphone Verteilung• Laut Gartner dominiert (2010) Symbian• Bei Neuverkäufen sieht es glücklicherweise anders aus (Kopf an Kopf, Android und iPhone) Verteilung Smartphones weltweitandere Systeme 5,0% Microsoft 5,0% iOS 15,0% Blackberry 17,5% Android 17,5% Symbian 40,0% 0,0% 5,0% 10,0% 15,0% 20,0% 25,0% 30,0% 35,0% 40,0% 45,0%
  • 12. Und wo ist das Problem?
  • 13. 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
  • 14. App Statistik• Verwendung von Apps Anzahl Apps in den Stores700.000600.000 580.000 500.000500.000400.000300.000200.000 140.000100.000 50.000 0 iPhone Apps iPad Apps Android Market Windows Phone Marketplace
  • 15. 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 …
  • 16. Zum Glück gibt es eine Lösung!!
  • 17. Die Lösung aller Probleme
  • 18. Oder doch nicht?
  • 19. 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!)
  • 20. 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.
  • 21. 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
  • 22. 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)
  • 23. 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
  • 24. 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!
  • 25. 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
  • 26. 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
  • 27. 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.
  • 28. Änderungen im Markupvon 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“>
  • 29. 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!
  • 30. 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…
  • 31. Beispiel Semantische Tags• Statt: <div id=“header“> <div id=“nav“> <div id=“article“> <div id=“sidebar“> <div id=“footer“>
  • 32. Beispiel Semantische Tags• Nun: <header> <nav> <section> <aside> <article> <footer>
  • 33. DEMOBeispiel: HTML5 Struktur
  • 34. 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.)
  • 35. 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?
  • 36. Unterschiedliche Browser?SafariAndroid BrowserwebOS BrowserInternet ExplorerFirefox (mobile)Opera (mobile)Bada BrowserChrome für AndroidUnd alle auch noch mit unterschiedlichen Versionen…
  • 37. Kurze Beispiele
  • 38. 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>
  • 39. 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&uuml;berschrift HTML5 Demo</h1> <p>Und hier kommt schlauer Demo-Inhalt</p> </section> <footer>&copy; by HTML 5 Footer MDC 2012</footer> </body>
  • 40. 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;}
  • 41. Alternativlösung<div id=„header“><header> Hier der Header-Bereich</header></div>• Mischen von HTML5-Elementen und Divs. Sinn: Suchmaschinen beachten neue Elemente
  • 42. 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 }}
  • 43. Weitere Beispiele
  • 44. Web StorageWeb Storage API speichert Name / Wert Paare auf demClient, analog zu Cookies, ohne diese immer zum Serverzurück zu schicken
  • 45. HTML5 VideoDie Möglichkeit ohne Plugins Videos zu integrieren(verschiedene Videoformate für verschiedene mobileBrowser) – Steuerung über Javascript möglich
  • 46. HTML5 FormulareZahlreiche neue Attribute und Input-Felder sowie weitereMöglichkeiten für Validierung, Feld-Vorbelegung.Input Types: email, url, number, range, day, month, year,datetime, date, week, timeBei Smartphones (sofern unterstützt) wird dieentsprechende Tastatur eingeblendetBrowser die kein HTML5 können zeigen input type=„text“als Fallback
  • 47. 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.
  • 48. CSS3 Media QueriesCSS3 MQ bieten die Möglichkeit z.B. anhand desBildschirmformats das CSS-Styling anzupassen und so fürverschiedene Bildschirmgrößen zu optimieren.
  • 49. CSS3 Mediaqueries - BeispielHintergrundfarbe 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>
  • 50. DEMOBeispiel: CSS3 Mediaqueries
  • 51. 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>
  • 52. 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>
  • 53. Noch nicht nativ genug!
  • 54. 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
  • 55. 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)
  • 56. 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
  • 57. HTML5 als App?• Verschiedene Möglichkeiten • PhoneGap • Sencha Touch • jQuery mobile • Nativer App Rahmen + HTML Website
  • 58. 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.
  • 59. 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 WebMatrixDownload:http://www.microsoft.com/web/webmatrix/Es funktioniert jeder Text-Editor (macht nur keinen Spaß!)
  • 60. Hilfreiche LinksSpezifikationen:http://dev.w3.org/html5/spec/Overview.htmlhttp://www.w3.org/Style/CSS/current-work.en.htmlhttp://www.modernizr.com/docs/http://code.google.com/p/css3-mediaqueries-js/http://caniuse.com/http://html5please.us/
  • 61. Fragen?Vincent Hildebrandthildebrandt@emotion-touch.comSocialTwitter: @vincent_hwww.facebook.com/vincent.hildebrandt
  • 62. Dieses Dokument ist urheberrechtlich geschützt. Jede Verwendung,Weitergabe oder Verwertung, auch in Teilen, ohne die Zustimmung deremotion touch GmbH ist unzulässig. Die Inhalte dieses Dokuments sindvertraulich zu behandeln. Die Weitergabe von Informationen oder Inhalten anDritte ist unzulässig.