SlideShare ist ein Scribd-Unternehmen logo
1 von 20
HTML ist tot
HTML ist tot




           Lang lebe HTML


Ein grober Überblick über HTML 5
HTML ist tot, lang lebe HTML
• zuerst konnte man nur HTML nutzen

• seit XHTML großer Boom

• mit ersten Entwürfen von HTML 5 Fixierung darauf
HTML ist tot, lang lebe HTML
• zuerst konnte man nur HTML nutzen

• seit XHTML großer Boom

• mit ersten Entwürfen von HTML 5 Fixierung darauf

Aber warum?
Aber warum?


    Weil es


              ist!
So, fertig.

Danke für die Aufmerksamkeit.
So, fertig.

 Danke für die Aufmerksamkeit.


Kleiner Scherz zwischendurch ;-)
Routenplaner


               Geschichte von HTML


        Warum HTML 5?



                           Neue Features


                                     Zukunftsmusik?




                                               Fragestunde
Geschichte von HTML
 1989   HTML von Tim Berners-Lee am CERN festgelegt
 1990
 1991
 1992   HTML            (Urversion, rein textorientiert)
 1993   HTML            (fetter, kursiver Text und Bildintegration)
        HTML+           (nie veröffentlicht)
 1994
 1995   HTML 2.0
        HTML 3.0        (schon vor Veröffentlichung veraltet)
 1996
 1997   HTML 3.2        (Tabellen, Textfluss um Bilder, Einbindung von Applets)
        HTML 4.0        (Stylesheets, Skripte, Frames, Typisierung)
 1998
 1999   HTML 4.01
 2000   XHTML 1.0       (Neuformulierung mit XML)
 2001   XHTML 1.1       (strikte Version, keine Typisierung mehr)
 2002
 2003
 2004
 2005
 2006   XHTML 2.0       (Working Draft)
 2007
 2008   HTML 5          (Working Draft)
 2009
Warum HTML 5?
Warum HTML 5?

Weil es COOL ist!
Warum HTML 5?

Weil es COOL ist!

• semantisch    (spezielle Elemente/Attribute für spezielle Aufgaben)

• kompatibel    (zu HTML und XHTML)

• einfach       (allgemeines Vokabular für HTML 5, XHTML 5 und DOM 5)

• umfangreich   (viele neue Elemente/Attribute)

• Web 2.0       (Spezifikation geht über HTML hinaus)
Neue Features

Ziele

• soll vorhandene Spezifikationen (HTML 4.01, XHTML 1.0 und DOM 2 HTML) ersetzen

• entwickelt sich aus HTML 4.01

    • muss als HTML, XHTML und DOM verwendet werden können

    • Fehlerüberprüfungswerkzeug für HTML (Validator)

    • DOM muss Programmierschnittstellen zur dynamischen Arbeit bieten

• Schnittstellen für Arbeit mit Multimediainhalten
Neue Features

HTML 5

• SGML-Anwendung
• eigene Syntax, die sich an SGML orientiert
     • orientiert sich an aktuellen Implementierungen in Browsern
     • theoretisch kann HTML 5 heute schon verarbeitet werden

XHTML 5

• XML-Format mit Kompromissen
    • kein Einfluss vom W3C an XML
    • selbstschließende Tags sind erlaubt

DOM 5

• Entwicklung vom DOM geprägt
• DOM wird angepasst und erweitert
• HTML-Elemente sollen dem XHTML-Namensraum angehören
Neue Features

Strukturierende Elemente

article, aside, dialog, figure, footer, header, nav, section

Elemente zur Datendarstellung

audio, embed, mark, meter, source, time, video

Anwendungselemente

canvas, progress

Formulare

• neue Typen (E-Mail, Webadressen, Zeitangaben, …)
• Pflichtfelder
• Templates
• Datenlisten
Neue Features

Umdefinierte Elemente

i, b, em, hr, small, strong

Wieder erlaubte Attribute

• start (bei ol-Elementen)
• value (bei li-Elementen)

Neue DOM-Methoden

• Methoden zur Steuerung von audio und video
• getElementsByClassName()
Neue Features

Entfernte Elemente

• acronym (stattdessen nur noch abbr)
• big
• tt
• noscript (bei XHTML-Auslieferung)
Zukunftsmusik?
Nein, denn

• Browser können schon große Teile von HTML 5

  2 3 3.5    6 7 8    9 9.5 10    3 3.1 4

                  67 %
• neue Features werden mit jeder neuen Browserversion implementiert

• mit Tricks kann man HTML 5 auch ab IE 6 nutzen

• Entwicklung wird stark vorangetrieben

• große Websites unterstützen HTML 5
Fragestunde




                                            So, fertig*

                              Danke für die Aufmerksamkeit.




* Und diesmal bin ich wirklich fertig ;-)
Quellen & Bildnachweis
Quellen
Wikipedia                 http://de.wikipedia.org/wiki/HTML_5
Smashing Magazine         http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
Webmasterpro.de           http://www.webmasterpro.de/coding/article/html5.html

Bildnachweise
How to spend an afternoon                       http://www.flickr.com/photos/apocalust/3371826665/
landing WIP2.                                   http://www.flickr.com/photos/apocalust/2861930070/
Early Interpretations Series 1.1                http://www.flickr.com/photos/pulpolux/394084802/
Éole Airlines                                   http://www.flickr.com/photos/eole/3215868087/
Future and the past                             http://www.flickr.com/photos/januszbc/319792933/
me is the coolest bear on da planet!            http://www.flickr.com/photos/southpaw2305/3734033897/
J5 series groupshot                             http://www.flickr.com/photos/donsolo/2195033782/
future tech training/play area for the public   http://www.flickr.com/photos/shifted/2342416812/
More on the Whole Simon Blint Fiasco            http://www.flickr.com/photos/thomashawk/2751554048/

Weitere ähnliche Inhalte

Andere mochten auch

Como crear una diapositiva con power point 2010
Como crear una diapositiva con power point 2010Como crear una diapositiva con power point 2010
Como crear una diapositiva con power point 2010jcardenasperdomo
 
Cuentos jose pablo juarez lopez
Cuentos jose pablo juarez lopezCuentos jose pablo juarez lopez
Cuentos jose pablo juarez lopezjuarezpablo
 
Beeld project Duits - Kong King
Beeld project Duits - Kong KingBeeld project Duits - Kong King
Beeld project Duits - Kong Kinglotte.verhoeven
 
Angola implementación en campo
Angola implementación en campoAngola implementación en campo
Angola implementación en campocaucasaludmental
 
Investigacion de la ciencia
Investigacion de la cienciaInvestigacion de la ciencia
Investigacion de la cienciaGerardo Andres
 
Parcial final
Parcial final Parcial final
Parcial final 8632995
 
Ensayo critico-final
Ensayo critico-finalEnsayo critico-final
Ensayo critico-finalMyzoreJahLove
 
Reconstruccion de un Craneo de Homínido
Reconstruccion de un Craneo de HomínidoReconstruccion de un Craneo de Homínido
Reconstruccion de un Craneo de Homínidodonmiguelangel
 
Bienvenido a power point
Bienvenido a power pointBienvenido a power point
Bienvenido a power pointMarjhoryLP
 
Itinerario Nueva Zelanda - FDA
Itinerario Nueva Zelanda - FDAItinerario Nueva Zelanda - FDA
Itinerario Nueva Zelanda - FDAVisita Teror
 
Tecnologia arias diapositivas
Tecnologia arias diapositivasTecnologia arias diapositivas
Tecnologia arias diapositivasmafelu100
 
Taking decissions about shared Info in Office365
Taking decissions about shared Info in Office365Taking decissions about shared Info in Office365
Taking decissions about shared Info in Office365Alberto Pascual
 
Tipos de aprendizaje
Tipos de aprendizajeTipos de aprendizaje
Tipos de aprendizajeginarua123
 
Alexander Gorbach. CuBe Matrix. Evaluation des Kundenverhaltens am Point of Sale
Alexander Gorbach. CuBe Matrix. Evaluation des Kundenverhaltens am Point of SaleAlexander Gorbach. CuBe Matrix. Evaluation des Kundenverhaltens am Point of Sale
Alexander Gorbach. CuBe Matrix. Evaluation des Kundenverhaltens am Point of Salealexgorbach
 

Andere mochten auch (17)

Como crear una diapositiva con power point 2010
Como crear una diapositiva con power point 2010Como crear una diapositiva con power point 2010
Como crear una diapositiva con power point 2010
 
Cuentos jose pablo juarez lopez
Cuentos jose pablo juarez lopezCuentos jose pablo juarez lopez
Cuentos jose pablo juarez lopez
 
Emprendedor antioqueño
Emprendedor antioqueñoEmprendedor antioqueño
Emprendedor antioqueño
 
Beeld project Duits - Kong King
Beeld project Duits - Kong KingBeeld project Duits - Kong King
Beeld project Duits - Kong King
 
Angola implementación en campo
Angola implementación en campoAngola implementación en campo
Angola implementación en campo
 
Investigacion de la ciencia
Investigacion de la cienciaInvestigacion de la ciencia
Investigacion de la ciencia
 
Parcial final
Parcial final Parcial final
Parcial final
 
Ensayo critico-final
Ensayo critico-finalEnsayo critico-final
Ensayo critico-final
 
Mexico y cuba
Mexico y cubaMexico y cuba
Mexico y cuba
 
redactar ensayo
redactar ensayoredactar ensayo
redactar ensayo
 
Reconstruccion de un Craneo de Homínido
Reconstruccion de un Craneo de HomínidoReconstruccion de un Craneo de Homínido
Reconstruccion de un Craneo de Homínido
 
Bienvenido a power point
Bienvenido a power pointBienvenido a power point
Bienvenido a power point
 
Itinerario Nueva Zelanda - FDA
Itinerario Nueva Zelanda - FDAItinerario Nueva Zelanda - FDA
Itinerario Nueva Zelanda - FDA
 
Tecnologia arias diapositivas
Tecnologia arias diapositivasTecnologia arias diapositivas
Tecnologia arias diapositivas
 
Taking decissions about shared Info in Office365
Taking decissions about shared Info in Office365Taking decissions about shared Info in Office365
Taking decissions about shared Info in Office365
 
Tipos de aprendizaje
Tipos de aprendizajeTipos de aprendizaje
Tipos de aprendizaje
 
Alexander Gorbach. CuBe Matrix. Evaluation des Kundenverhaltens am Point of Sale
Alexander Gorbach. CuBe Matrix. Evaluation des Kundenverhaltens am Point of SaleAlexander Gorbach. CuBe Matrix. Evaluation des Kundenverhaltens am Point of Sale
Alexander Gorbach. CuBe Matrix. Evaluation des Kundenverhaltens am Point of Sale
 

Ähnlich wie HTML ist tot, lang lebe HTML

Symfony2 Workshop PHP Summit 2013
Symfony2 Workshop PHP Summit 2013Symfony2 Workshop PHP Summit 2013
Symfony2 Workshop PHP Summit 2013Timo Haberkern
 
PHP Summit 2013 Twig Workshop
PHP Summit 2013 Twig WorkshopPHP Summit 2013 Twig Workshop
PHP Summit 2013 Twig WorkshopTimo Haberkern
 
Joomlaplatform deutsch
Joomlaplatform deutschJoomlaplatform deutsch
Joomlaplatform deutschRobert Deutz
 
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate RelationshipsICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate RelationshipsChristoph Adler
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Perl Renaissance Reloaded
Perl Renaissance ReloadedPerl Renaissance Reloaded
Perl Renaissance ReloadedGregor Goldbach
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnTipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnViktor Vogel
 
Einführung und Grobüberblick über TYPO3 4.7
Einführung und Grobüberblick  über TYPO3 4.7Einführung und Grobüberblick  über TYPO3 4.7
Einführung und Grobüberblick über TYPO3 4.7Steffen Ritter
 
Drupal für Entwickler
Drupal für EntwicklerDrupal für Entwickler
Drupal für EntwicklerAmazee Labs
 

Ähnlich wie HTML ist tot, lang lebe HTML (15)

HTML5
HTML5HTML5
HTML5
 
HTML und CSS
HTML und CSSHTML und CSS
HTML und CSS
 
Symfony2 Workshop PHP Summit 2013
Symfony2 Workshop PHP Summit 2013Symfony2 Workshop PHP Summit 2013
Symfony2 Workshop PHP Summit 2013
 
PHP Summit 2013 Twig Workshop
PHP Summit 2013 Twig WorkshopPHP Summit 2013 Twig Workshop
PHP Summit 2013 Twig Workshop
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
 
Joomlaplatform deutsch
Joomlaplatform deutschJoomlaplatform deutsch
Joomlaplatform deutsch
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate RelationshipsICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Perl Renaissance Reloaded
Perl Renaissance ReloadedPerl Renaissance Reloaded
Perl Renaissance Reloaded
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnTipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
 
Einführung und Grobüberblick über TYPO3 4.7
Einführung und Grobüberblick  über TYPO3 4.7Einführung und Grobüberblick  über TYPO3 4.7
Einführung und Grobüberblick über TYPO3 4.7
 
Drupal für Entwickler
Drupal für EntwicklerDrupal für Entwickler
Drupal für Entwickler
 

HTML ist tot, lang lebe HTML

  • 2. HTML ist tot Lang lebe HTML Ein grober Überblick über HTML 5
  • 3. HTML ist tot, lang lebe HTML • zuerst konnte man nur HTML nutzen • seit XHTML großer Boom • mit ersten Entwürfen von HTML 5 Fixierung darauf
  • 4. HTML ist tot, lang lebe HTML • zuerst konnte man nur HTML nutzen • seit XHTML großer Boom • mit ersten Entwürfen von HTML 5 Fixierung darauf Aber warum?
  • 5. Aber warum? Weil es ist!
  • 6. So, fertig. Danke für die Aufmerksamkeit.
  • 7. So, fertig. Danke für die Aufmerksamkeit. Kleiner Scherz zwischendurch ;-)
  • 8. Routenplaner Geschichte von HTML Warum HTML 5? Neue Features Zukunftsmusik? Fragestunde
  • 9. Geschichte von HTML 1989 HTML von Tim Berners-Lee am CERN festgelegt 1990 1991 1992 HTML (Urversion, rein textorientiert) 1993 HTML (fetter, kursiver Text und Bildintegration) HTML+ (nie veröffentlicht) 1994 1995 HTML 2.0 HTML 3.0 (schon vor Veröffentlichung veraltet) 1996 1997 HTML 3.2 (Tabellen, Textfluss um Bilder, Einbindung von Applets) HTML 4.0 (Stylesheets, Skripte, Frames, Typisierung) 1998 1999 HTML 4.01 2000 XHTML 1.0 (Neuformulierung mit XML) 2001 XHTML 1.1 (strikte Version, keine Typisierung mehr) 2002 2003 2004 2005 2006 XHTML 2.0 (Working Draft) 2007 2008 HTML 5 (Working Draft) 2009
  • 11. Warum HTML 5? Weil es COOL ist!
  • 12. Warum HTML 5? Weil es COOL ist! • semantisch (spezielle Elemente/Attribute für spezielle Aufgaben) • kompatibel (zu HTML und XHTML) • einfach (allgemeines Vokabular für HTML 5, XHTML 5 und DOM 5) • umfangreich (viele neue Elemente/Attribute) • Web 2.0 (Spezifikation geht über HTML hinaus)
  • 13. Neue Features Ziele • soll vorhandene Spezifikationen (HTML 4.01, XHTML 1.0 und DOM 2 HTML) ersetzen • entwickelt sich aus HTML 4.01 • muss als HTML, XHTML und DOM verwendet werden können • Fehlerüberprüfungswerkzeug für HTML (Validator) • DOM muss Programmierschnittstellen zur dynamischen Arbeit bieten • Schnittstellen für Arbeit mit Multimediainhalten
  • 14. Neue Features HTML 5 • SGML-Anwendung • eigene Syntax, die sich an SGML orientiert • orientiert sich an aktuellen Implementierungen in Browsern • theoretisch kann HTML 5 heute schon verarbeitet werden XHTML 5 • XML-Format mit Kompromissen • kein Einfluss vom W3C an XML • selbstschließende Tags sind erlaubt DOM 5 • Entwicklung vom DOM geprägt • DOM wird angepasst und erweitert • HTML-Elemente sollen dem XHTML-Namensraum angehören
  • 15. Neue Features Strukturierende Elemente article, aside, dialog, figure, footer, header, nav, section Elemente zur Datendarstellung audio, embed, mark, meter, source, time, video Anwendungselemente canvas, progress Formulare • neue Typen (E-Mail, Webadressen, Zeitangaben, …) • Pflichtfelder • Templates • Datenlisten
  • 16. Neue Features Umdefinierte Elemente i, b, em, hr, small, strong Wieder erlaubte Attribute • start (bei ol-Elementen) • value (bei li-Elementen) Neue DOM-Methoden • Methoden zur Steuerung von audio und video • getElementsByClassName()
  • 17. Neue Features Entfernte Elemente • acronym (stattdessen nur noch abbr) • big • tt • noscript (bei XHTML-Auslieferung)
  • 18. Zukunftsmusik? Nein, denn • Browser können schon große Teile von HTML 5 2 3 3.5 6 7 8 9 9.5 10 3 3.1 4 67 % • neue Features werden mit jeder neuen Browserversion implementiert • mit Tricks kann man HTML 5 auch ab IE 6 nutzen • Entwicklung wird stark vorangetrieben • große Websites unterstützen HTML 5
  • 19. Fragestunde So, fertig* Danke für die Aufmerksamkeit. * Und diesmal bin ich wirklich fertig ;-)
  • 20. Quellen & Bildnachweis Quellen Wikipedia http://de.wikipedia.org/wiki/HTML_5 Smashing Magazine http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/ Webmasterpro.de http://www.webmasterpro.de/coding/article/html5.html Bildnachweise How to spend an afternoon http://www.flickr.com/photos/apocalust/3371826665/ landing WIP2. http://www.flickr.com/photos/apocalust/2861930070/ Early Interpretations Series 1.1 http://www.flickr.com/photos/pulpolux/394084802/ Éole Airlines http://www.flickr.com/photos/eole/3215868087/ Future and the past http://www.flickr.com/photos/januszbc/319792933/ me is the coolest bear on da planet! http://www.flickr.com/photos/southpaw2305/3734033897/ J5 series groupshot http://www.flickr.com/photos/donsolo/2195033782/ future tech training/play area for the public http://www.flickr.com/photos/shifted/2342416812/ More on the Whole Simon Blint Fiasco http://www.flickr.com/photos/thomashawk/2751554048/