SlideShare ist ein Scribd-Unternehmen logo
1 von 16
HTML 5
       Erster Einblick, H. Mittendorfer
                 http://www.whatwg.org/
P. Kröner: „HTML 5- Webseiten Innovativ und zukunftssicher
HTML 5

•   Stammt nicht vom W3C, sondern von der whatwg
    (www.whatwg.org)

•   W3C Working Draft 11 October 2012

•   HTML 5 ist XHTML und mehr

•   Kümmert sich um Vieles, was bisher nicht Sache
    von HTML war.
Video einbetten




 http://www.whatwg.org/demos/2008-sept/video/video.html
Proprietär versus Standard
<Video>
Scenario: Embedding a video


  <video src="firefox.ogg" controls></video>


To make it autoplay:


  <video src="firefox.ogg" controls autoplay></video>


Remove controls and add script:


  <script> var video = document.getElementsByTagName('video')[0]; </script>
  <p>
   <input type=button value="&#x25FC;" onclick="video.pause();">
   <input type=button value="&#x25B6;" onclick="video.play();">
  </p>




http://www.whatwg.org/demos/2008-sept/
Drag and Drop




http://www.whatwg.org/demos/2008-sept/dnd/dnd.html
CANVAS




http://www.whatwg.org/demos/2008-sept/color/color.html
Spiele mit Canvas




http://www.chip.de/artikel/HTML5-Das-Web-von-morgen-4_41539553.html
Lokales Speichern




http://www.whatwg.org/demos/2008-sept/editor/editor.html
<form>
Scenario: A text editor that stores the user's files client-side.
  Start with a simple text editor:
    <form name=editor>
     <p><textarea name=data></textarea></p>
    </form>


  Then add Open and Save buttons:
    <p>
     <label>Filename: <input name=filename></label>
     <input type=button value="Open" onclick="doOpen()">
     <input type=button value="Save" onclick="doSave()">
    </p>
  Saving:
    <script>
     function doSave() {
          var filename = document.forms.editor.filename.value;
          var data = document.forms.editor.data.value;
          localStorage.setItem('file-' + filename, data);
     }
    </script>
Validator



http://html5.validator.nu/
Plain HTML5
Wiederbelebt
 aber rein semantisch
• <b> Hervorhebung (statt <strong>)
• <i> Namen und Begriffe (statt <span>)
• <hr> Inhaltlicher Bruch, stärker als Absatz

• Das CSS formatiert und sonst keiner!
Rausgeschmissen

•   <acronym> dafür <abbr>

•   <applet> dafür <object>

•   <dir> dafür <ul>

•   ersatzlos: <frame>, <frameset>, <noframes>, <big>,
    <font>, <center>, <strike>, .. (alle
    Präsentationselemente)

•   aber wieder hineinurgiert: <iframe>
Der <div> lebt noch, aber es gibt neue,
     strukturbildende Elemente

•   <section>

•   <header>, <footer>

•   <nav>

•   <aside>

•   <article>

•   <hgroup>
Und ganz neu..
• <time>
• <mark>
• <figure>, <figcaption>
• <video> <audio>
• <canvas>
• <ruby>, <rp>, <rt>

Weitere ähnliche Inhalte

Ähnlich wie Html5 einführung

HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5Torsten Landsiedel
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenJens Klein
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrYves Hoppe
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondUlrich Krause
 
Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Sebastian Adler
 
OSMC 2014: Business Prozessmonitoring mit BPView | Rene Koch
OSMC 2014: Business Prozessmonitoring mit BPView | Rene KochOSMC 2014: Business Prozessmonitoring mit BPView | Rene Koch
OSMC 2014: Business Prozessmonitoring mit BPView | Rene KochNETWAYS
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy Bosch
 
jQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidjQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidPeter Schuhmann
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notesdominion
 
REST mit APEX 18.1
REST mit APEX 18.1REST mit APEX 18.1
REST mit APEX 18.1Oliver Lemm
 
FMK2013: FileMaker und Kerio Connect by Bernhard Schulz - schubec GmbH und Ca...
FMK2013: FileMaker und Kerio Connect by Bernhard Schulz - schubec GmbH und Ca...FMK2013: FileMaker und Kerio Connect by Bernhard Schulz - schubec GmbH und Ca...
FMK2013: FileMaker und Kerio Connect by Bernhard Schulz - schubec GmbH und Ca...Verein FM Konferenz
 
DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDNUG e.V.
 
Javascript done right
Javascript done rightJavascript done right
Javascript done rightDirk Ginader
 

Ähnlich wie Html5 einführung (20)

HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)
 
OSMC 2014: Business Prozessmonitoring mit BPView | Rene Koch
OSMC 2014: Business Prozessmonitoring mit BPView | Rene KochOSMC 2014: Business Prozessmonitoring mit BPView | Rene Koch
OSMC 2014: Business Prozessmonitoring mit BPView | Rene Koch
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
 
jQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidjQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/Fluid
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
REST mit APEX 18.1
REST mit APEX 18.1REST mit APEX 18.1
REST mit APEX 18.1
 
FMK2013: FileMaker und Kerio Connect by Bernhard Schulz - schubec GmbH und Ca...
FMK2013: FileMaker und Kerio Connect by Bernhard Schulz - schubec GmbH und Ca...FMK2013: FileMaker und Kerio Connect by Bernhard Schulz - schubec GmbH und Ca...
FMK2013: FileMaker und Kerio Connect by Bernhard Schulz - schubec GmbH und Ca...
 
DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdf
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 

Mehr von Hans Mittendorfer (20)

Ki 2
Ki 2Ki 2
Ki 2
 
WhatsAppverschlüsselung
WhatsAppverschlüsselungWhatsAppverschlüsselung
WhatsAppverschlüsselung
 
Kryptographie
KryptographieKryptographie
Kryptographie
 
Ki
KiKi
Ki
 
Ki
KiKi
Ki
 
Meatdaten
MeatdatenMeatdaten
Meatdaten
 
Semiotik iii
Semiotik iiiSemiotik iii
Semiotik iii
 
Grenzen der Kryptographie
Grenzen der KryptographieGrenzen der Kryptographie
Grenzen der Kryptographie
 
Unternehmeskommunikation
UnternehmeskommunikationUnternehmeskommunikation
Unternehmeskommunikation
 
Sicherheit webkommunikation
Sicherheit webkommunikationSicherheit webkommunikation
Sicherheit webkommunikation
 
Lernblogs ii
Lernblogs iiLernblogs ii
Lernblogs ii
 
Webwissenschaften
WebwissenschaftenWebwissenschaften
Webwissenschaften
 
Semiotik ii
Semiotik iiSemiotik ii
Semiotik ii
 
Weblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitungWeblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitung
 
Grosse zukunft des_buches_2
Grosse zukunft des_buches_2Grosse zukunft des_buches_2
Grosse zukunft des_buches_2
 
Semiotik
SemiotikSemiotik
Semiotik
 
Qr code
Qr codeQr code
Qr code
 
Menschliche kommunikation
Menschliche kommunikationMenschliche kommunikation
Menschliche kommunikation
 
Watzlawick 1
Watzlawick 1Watzlawick 1
Watzlawick 1
 
Webkommunikation
WebkommunikationWebkommunikation
Webkommunikation
 

Html5 einführung

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n