SlideShare ist ein Scribd-Unternehmen logo
HTML5 –
Traum oder Wirklichkeit   Vincent Hildebrandt
                          hildebrandt@emotion-touch.com
Agenda

• Kurzvorstellung

• Einleitung

• Was ist HTML5?

• Wozu HTML5?

• Beispiele

• Wozu noch Apps?
Kurzvorstellung
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

                Anzahl der Internetnutzer weltweit (in Mio.)
  2500


                                                                  1967
  2000


  1500


  1000


   500                                 361

             39,6
     0
          Nutzer 1995              Nutzer 2000                 Nutzer 2010
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)   Anteil Smartphones bei Mobiltelefonen weltweit




                  1.080.000.000




                                                       Mobiltelefone weltweit
                                                       Smartphones weltweit




                                  3.000.000.000
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

• Laut Gartner dominiert (2010) Symbian

• Bei Neuverkäufen sieht es glücklicherweise anders
  aus (Kopf an Kopf, Android und iPhone)
                                       Verteilung Smartphones weltweit

andere 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%
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
                        Anzahl Apps in den Stores
700.000




600.000                                          580.000



            500.000
500.000




400.000




300.000




200.000

                         140.000


100.000
                                                                        50.000


     0
          iPhone Apps   iPad Apps             Android Market   Windows Phone Marketplace
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
  HTML.
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
  mehr

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

uvm.
Ä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“>
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:
             <div id=“header“>
               <div id=“nav“>
   <div id=“article“>   <div id=“sidebar“>




             <div id=“footer“>
Beispiel Semantische Tags

• Nun:
                     <header>
                      <nav>
         <section>              <aside>
         <article>




                     <footer>
DEMO
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>

<html lang="de">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Demo at MDC2012</title>
    </head>
    <body>
        <p>Hallo Welt!</p>
    </body>
</html>
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>
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

<div id=„header“><header>
  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
  usw.
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)


<style type="text/css">
   @media screen and (orientation: portrait) {
      body { background-color: #f00; }
   }
   @media screen and (orientation: landscape) {
      body { background-color: #00f; }
   }
</style>
DEMO
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>,
        <source>, <video>
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>
Noch nicht nativ genug!
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
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)
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
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.
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.

Weitere ähnliche Inhalte

Andere mochten auch

Modda accesorios
Modda accesoriosModda accesorios
Modda accesorios
Juan Jose Arredondo Pedraza
 
Proceso Previo para el Proceso de Venta
Proceso Previo para el Proceso de VentaProceso Previo para el Proceso de Venta
Proceso Previo para el Proceso de Venta
karina Culcay
 
Ipv6 zum Anfassen - von Johannes Hubertz
Ipv6 zum Anfassen - von  Johannes Hubertz Ipv6 zum Anfassen - von  Johannes Hubertz
Ipv6 zum Anfassen - von Johannes Hubertz
Marc Manthey
 
Focus Group
Focus GroupFocus Group
Focus Group
Edgar Tituaña
 
Fauna
FaunaFauna
Curiosidades Del Mundo
Curiosidades Del MundoCuriosidades Del Mundo
Curiosidades Del Mundo
Jorge Llosa
 
FAM-TRIP AL PARADOR DE SIGÜENZA DE UN GRUPO DE ASOCIADAS DE ASPM
FAM-TRIP AL PARADOR DE SIGÜENZA DE UN GRUPO DE ASOCIADAS DE ASPMFAM-TRIP AL PARADOR DE SIGÜENZA DE UN GRUPO DE ASOCIADAS DE ASPM
FAM-TRIP AL PARADOR DE SIGÜENZA DE UN GRUPO DE ASOCIADAS DE ASPM
ASPM
 
Praga
PragaPraga
Der spiegel 28-2013_-_nur_der_snowden_und_nsa_part
Der spiegel 28-2013_-_nur_der_snowden_und_nsa_partDer spiegel 28-2013_-_nur_der_snowden_und_nsa_part
Der spiegel 28-2013_-_nur_der_snowden_und_nsa_part
Marc Manthey
 
FRANCIA
FRANCIAFRANCIA
FRANCIA
Jorge Llosa
 
REFRANES MODERNOS
REFRANES MODERNOSREFRANES MODERNOS
REFRANES MODERNOS
Jorge Llosa
 
BOTELLAS PINTADAS DESDE ADENTRO
BOTELLAS PINTADAS DESDE ADENTROBOTELLAS PINTADAS DESDE ADENTRO
BOTELLAS PINTADAS DESDE ADENTRO
Jorge Llosa
 
Modda perfumeria
Modda perfumeriaModda perfumeria
Modda perfumeria
Juan Jose Arredondo Pedraza
 
Almuerzo del reencuentro
Almuerzo del  reencuentroAlmuerzo del  reencuentro
Almuerzo del reencuentro
Jorge Llosa
 
28. OpenNetwork Event 2013; Präsentation HS Mittweida-neue Studiengänge
28. OpenNetwork Event 2013; Präsentation HS Mittweida-neue Studiengänge28. OpenNetwork Event 2013; Präsentation HS Mittweida-neue Studiengänge
28. OpenNetwork Event 2013; Präsentation HS Mittweida-neue Studiengänge
Community MINTsax.de
 
Non-technical SEO für Redakteure - Teil 2
Non-technical SEO für Redakteure - Teil 2Non-technical SEO für Redakteure - Teil 2
Non-technical SEO für Redakteure - Teil 2
Ludwig Coenen
 
EUGENE BOUDIN
EUGENE BOUDINEUGENE BOUDIN
EUGENE BOUDIN
Jorge Llosa
 
Diciembre2013 advientoweb
Diciembre2013   advientowebDiciembre2013   advientoweb

Andere mochten auch (19)

Modda accesorios
Modda accesoriosModda accesorios
Modda accesorios
 
Proceso Previo para el Proceso de Venta
Proceso Previo para el Proceso de VentaProceso Previo para el Proceso de Venta
Proceso Previo para el Proceso de Venta
 
Ipv6 zum Anfassen - von Johannes Hubertz
Ipv6 zum Anfassen - von  Johannes Hubertz Ipv6 zum Anfassen - von  Johannes Hubertz
Ipv6 zum Anfassen - von Johannes Hubertz
 
Focus Group
Focus GroupFocus Group
Focus Group
 
Bem
BemBem
Bem
 
Fauna
FaunaFauna
Fauna
 
Curiosidades Del Mundo
Curiosidades Del MundoCuriosidades Del Mundo
Curiosidades Del Mundo
 
FAM-TRIP AL PARADOR DE SIGÜENZA DE UN GRUPO DE ASOCIADAS DE ASPM
FAM-TRIP AL PARADOR DE SIGÜENZA DE UN GRUPO DE ASOCIADAS DE ASPMFAM-TRIP AL PARADOR DE SIGÜENZA DE UN GRUPO DE ASOCIADAS DE ASPM
FAM-TRIP AL PARADOR DE SIGÜENZA DE UN GRUPO DE ASOCIADAS DE ASPM
 
Praga
PragaPraga
Praga
 
Der spiegel 28-2013_-_nur_der_snowden_und_nsa_part
Der spiegel 28-2013_-_nur_der_snowden_und_nsa_partDer spiegel 28-2013_-_nur_der_snowden_und_nsa_part
Der spiegel 28-2013_-_nur_der_snowden_und_nsa_part
 
FRANCIA
FRANCIAFRANCIA
FRANCIA
 
REFRANES MODERNOS
REFRANES MODERNOSREFRANES MODERNOS
REFRANES MODERNOS
 
BOTELLAS PINTADAS DESDE ADENTRO
BOTELLAS PINTADAS DESDE ADENTROBOTELLAS PINTADAS DESDE ADENTRO
BOTELLAS PINTADAS DESDE ADENTRO
 
Modda perfumeria
Modda perfumeriaModda perfumeria
Modda perfumeria
 
Almuerzo del reencuentro
Almuerzo del  reencuentroAlmuerzo del  reencuentro
Almuerzo del reencuentro
 
28. OpenNetwork Event 2013; Präsentation HS Mittweida-neue Studiengänge
28. OpenNetwork Event 2013; Präsentation HS Mittweida-neue Studiengänge28. OpenNetwork Event 2013; Präsentation HS Mittweida-neue Studiengänge
28. OpenNetwork Event 2013; Präsentation HS Mittweida-neue Studiengänge
 
Non-technical SEO für Redakteure - Teil 2
Non-technical SEO für Redakteure - Teil 2Non-technical SEO für Redakteure - Teil 2
Non-technical SEO für Redakteure - Teil 2
 
EUGENE BOUDIN
EUGENE BOUDINEUGENE BOUDIN
EUGENE BOUDIN
 
Diciembre2013 advientoweb
Diciembre2013   advientowebDiciembre2013   advientoweb
Diciembre2013 advientoweb
 

Ähnlich wie Html5 - Traum oder Wirklichkeit

SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
Christian Heindel
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
GFU Cyrus AG
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
Namics – A Merkle Company
 
Die Android Plattform
Die Android PlattformDie Android Plattform
Die Android Plattform
Moritz Haarmann
 
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Christian Heindel
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Peter Hecker
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
Jürg Stuker
 
Digital Media Night - Responsive Web Design
Digital Media Night - Responsive Web DesignDigital Media Night - Responsive Web Design
Digital Media Night - Responsive Web Design
Virtualtrends
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
die.agilen GmbH
 
Bibliotheks-Apps für Smartphones
Bibliotheks-Apps für SmartphonesBibliotheks-Apps für Smartphones
Bibliotheks-Apps für Smartphones
TIB Hannover
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT Group
 
Next Web & Open Standards: LIIP Vortrag Internet-Briefing
Next Web & Open Standards: LIIP Vortrag Internet-BriefingNext Web & Open Standards: LIIP Vortrag Internet-Briefing
Next Web & Open Standards: LIIP Vortrag Internet-Briefing
Walter Schärer
 
Echtzeit Klub - Apps: Mobile Bits
Echtzeit Klub - Apps: Mobile BitsEchtzeit Klub - Apps: Mobile Bits
Echtzeit Klub - Apps: Mobile Bits
deutsche-startups.de
 
W3C/DFKI Automotive Workshop
W3C/DFKI Automotive WorkshopW3C/DFKI Automotive Workshop
W3C/DFKI Automotive Workshop
Georg Rehm
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
die.agilen GmbH
 
Was folgt auf Web 2.0?
Was folgt auf Web 2.0?Was folgt auf Web 2.0?
Was folgt auf Web 2.0?
Björn Behrendt
 

Ähnlich wie Html5 - Traum oder Wirklichkeit (20)

SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
Die Android Plattform
Die Android PlattformDie Android Plattform
Die Android Plattform
 
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
Digital Media Night - Responsive Web Design
Digital Media Night - Responsive Web DesignDigital Media Night - Responsive Web Design
Digital Media Night - Responsive Web Design
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Bibliotheks-Apps für Smartphones
Bibliotheks-Apps für SmartphonesBibliotheks-Apps für Smartphones
Bibliotheks-Apps für Smartphones
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
Next Web & Open Standards: LIIP Vortrag Internet-Briefing
Next Web & Open Standards: LIIP Vortrag Internet-BriefingNext Web & Open Standards: LIIP Vortrag Internet-Briefing
Next Web & Open Standards: LIIP Vortrag Internet-Briefing
 
Echtzeit Klub - Apps: Mobile Bits
Echtzeit Klub - Apps: Mobile BitsEchtzeit Klub - Apps: Mobile Bits
Echtzeit Klub - Apps: Mobile Bits
 
W3C/DFKI Automotive Workshop
W3C/DFKI Automotive WorkshopW3C/DFKI Automotive Workshop
W3C/DFKI Automotive Workshop
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
Was folgt auf Web 2.0?
Was folgt auf Web 2.0?Was folgt auf Web 2.0?
Was folgt auf Web 2.0?
 

Html5 - Traum oder Wirklichkeit

  • 1. HTML5 – Traum oder Wirklichkeit Vincent Hildebrandt hildebrandt@emotion-touch.com
  • 2. Agenda • Kurzvorstellung • Einleitung • Was ist HTML5? • Wozu HTML5? • Beispiele • Wozu noch Apps?
  • 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, Kinect Randnotiz: „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
  • 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 weltweit andere 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 Stores 700.000 600.000 580.000 500.000 500.000 400.000 300.000 200.000 140.000 100.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
  • 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 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“>
  • 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>
  • 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? Safari Android Browser webOS Browser Internet Explorer Firefox (mobile) Opera (mobile) Bada Browser Chrome für Android Und alle auch noch mit unterschiedlichen Versionen…
  • 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 } }
  • 44. Web Storage Web Storage API speichert Name / Wert Paare auf dem Client, analog zu Cookies, ohne diese immer zum Server zurück zu schicken
  • 45. HTML5 Video Die Möglichkeit ohne Plugins Videos zu integrieren (verschiedene Videoformate für verschiedene mobile Browser) – Steuerung über Javascript möglich
  • 46. 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
  • 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 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.
  • 49. 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>
  • 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>
  • 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 WebMatrix Download: http://www.microsoft.com/web/webmatrix/ Es funktioniert jeder Text-Editor (macht nur keinen Spaß!)
  • 62. 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.