Michael Jendryschik 26. Mai 2009 Websemantik Die nächsten Schritte
 
 
<h1>Dokumente</h1> <p>» Das  ist ein wichtiges Dokument«, sagen wir gern zu Verträgen, Geschäftsbriefen, Zeugnissen oder b...
Kontaktdaten?   Buchrezensionen?   Termine?   CD-Sammlungen?   Tagebücher?   Rezepte?   Dialoge?   Kochbücher?   Bildergal...
Feinstrukturierung <div id=&quot;header&quot;> <!-- Kopfzeile --> </div> <div id=&quot;nav&quot;> <!-- Navigation --> </di...
Mikroformate <address  class=&quot;vcard&quot; >   <span class=&quot;adr&quot;>   <span class=&quot;fn&quot;> itemis AG </...
Skripting
WAI-ARIA (teilweise) <input type=&quot;text&quot; name=&quot;email&quot;   aria-required=&quot;true&quot;  />
Neue Standards braucht das Land! …  und zwei davon stelle ich jetzt vor.
 
»Das Semantische Web ist eine Erweiterung des    herkömmlichen Webs, in der Informationen mit    eindeutigen Bedeutungen v...
Formale Sprache zur Beschreibung von Eigenschaften beliebiger Daten in einer Form, die sowohl Menschen als auch Maschinen ...
Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«.
Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. sprachlich formal Subjekt Das ...
Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. sprachlich formal Subjekt Das ...
Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. <rdf:RDF xmlns:rdf=&quot;http:...
RDFa <ul><li>RDFa  nutzt Attribute, um (X)HTML-Dokumente mit RDF anzureichern
Seit Mitte 2004 Teil des W3C Arbeitsentwurfs »XHTML 2.0«
April 2007: XHTML+RDFa 1.0 </li></ul>
RDFa <ul><li>XHTML 1.0
@content @href @rel @rev @src
XHTML 2.0 Metainformation Attributes Module
@about @datatype @property @resource @typeof </li></ul>
RDFa Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objek...
RDFa <span xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; about=&quot;urn:isbn:3-8273-2739-3&quot; property=&quot;d...
RDFa <span xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; about=&quot;urn:isbn:3-8273-2739-3&quot; property=&quot;d...
Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren.
Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. <p>Johann Wolfgang von Goethe wurde am 2...
Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. sprachlich formal Subjekt Johann Wolfgan...
Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. sprachlich formal Subjekt Johann Wolfgan...
Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. <p about=&quot;http://dbpedia.org/page/J...
 
Web Applications 1.0 <ul><li>Mitte 2004: Erster Entwurf
Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML </li></ul>
Web Applications 1.0  HTML5 <ul><li>Mitte 2004: Erster Entwurf
Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML
Januar 2008: W3C veröffentlicht den ersten Arbeitsentwurf von HTML5
Juni 2008: Zweiter Arbeitsentwurf mit Integration von Web Forms 2.0
Mai 2009: Aktueller W3C-Arbeitsentwurf </li></ul>
Eine Sprache, mehrere Ausprägungen <ul><li>Definition eines abstrakten Dokumentmodells: HTML5-DOM
Derzeit zwei Serialisierungen: </li><ul><li>HTML-Syntax: HTML5
XML-Syntax: XHTML5 </li></ul></ul>
XHTML 1.0 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
HTML5 <!DOCTYPE html> <html> <head> <meta charset=&quot;UTF-8&quot;> <title>Kochbar</title> </head> <body> <p>Absatz </bod...
HTML5 <!DOCTYPE html> <html  xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;de&quot; > <head> <meta charset=&qu...
XHTML5 <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <h...
XHTML5 <!DOCTYPE html> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;de&quot;> <head> <meta charset=&quo...
Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mar...
Neue Elemente article   aside  audio bb canvas command datagrid datalist details dialog embed figure  footer header  keyge...
Elemente zur Strukturierung Quelle: http://www.alistapart.com/articles/previewofhtml5
Elemente zur Strukturierung Quelle: http://www.alistapart.com/articles/previewofhtml5
Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed  figure  footer header keygen m...
Elementunterschriften: Das Element  figure <div class=&quot;illustration&quot;> <img src=&quot;/images/opera95.png&quot; a...
Elementunterschriften: Das Element  figure <div id=&quot;lst2&quot;> <div class=&quot;caption&quot;>Listing 2: Header hori...
Neue Elemente article aside audio bb canvas command datagrid datalist details  dialog  embed figure footer header keygen m...
Dialoge: Das Element  dialog <dialog>  <dt>Einige Handwerksbursche:</dt> <dd>Warum denn dort hinaus?</dd> <dt>Andre:</dt> ...
Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mar...
Angabe eines begrenzten Maß: Das Element  meter <meter min=&quot;0&quot; max=&quot;10&quot;>7</meter> <meter>70%</meter> <...
 
Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mar...
Fortschrittsbalken: Das Element  progress <section> <h2>Task Progress</h2> <p>Progress:  <progress> <span id=&quot;p&quot;...
Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen  ma...
Markierung: Das Element  mark <p>Am Ende der markierten Deklaration fehlt das Semikolon:</p> <pre><code>mark { color: blac...
 
Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mar...
Datums- und Zeitangaben: Das Element  time <p>Der  <time datetime=&quot;2009-05-10&quot;> Muttertag </time>  ist ein Feier...
Erweitertes  a -Element <a href=&quot;http://www.itemis.de/20405&quot;> <h2>Was macht Eclipse attraktiv für den Embedded-M...
Web Forms 2.0
 
Pflichtfelder und Autofocus <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; />
Pflichtfelder und Autofocus <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; /> ...
Datumsangaben <input   name=&quot;date&quot; id=&quot;date&quot; size=&quot;30&quot; type=&quot;text&quot;   value=&quot;z...
Datumsangaben <input   name=&quot;date&quot; id=&quot;date&quot; size=&quot;30&quot; type=&quot;text&quot;   value=&quot;z...
Zeitangaben <select name=&quot;time&quot; id=&quot;time&quot;> <option>bitte wählen...</option> <option>12:00</option> <op...
Zeitangaben <select name=&quot;time&quot; id=&quot;time&quot;> <option>bitte wählen...</option> <option>12:00</option> <op...
Schieberegler <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> ...
Schieberegler <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> ...
Liste mit Vorschlägen <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</...
Liste mit Vorschlägen <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</...
 
HTML5 Microdata <ul><li>Editor's Draft vom 11. Mai 2009
Neue Attribute:  @item @itemprop @subject </li></ul>
Nächste SlideShare
Wird geladen in …5
×

Websemantik: Die nächsten Schritte

2.302 Aufrufe

Veröffentlicht am

Es ist noch ein weiter Weg hin zum Semantic Web, so wie das W3C es sich vorstellt. Kleine Schritte gehen können wir heute mit Mikroformaten, RDFa und den erweiterten Möglichkeiten von (X)HTML 5. Dieser Vortrag auf der webinale 09 zeigt praktische Beispiele und den Nutzen der Anwendung dieser Techniken und wagt einen Blick in die nahe Zukunft.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.302
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
277
Aktionen
Geteilt
0
Downloads
15
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Websemantik: Die nächsten Schritte

  1. 1. Michael Jendryschik 26. Mai 2009 Websemantik Die nächsten Schritte
  2. 4. <h1>Dokumente</h1> <p>» Das ist ein wichtiges Dokument«, sagen wir gern zu Verträgen, Geschäftsbriefen, Zeugnissen oder beglaubigten Schriftstücken. Wir alle kennen den Begriff »Word-Dokument«, Webentwickler sprechen von »HTML-Dokumenten«. Aber was sind Dokumente eigentlich?</p>
  3. 5. Kontaktdaten? Buchrezensionen? Termine? CD-Sammlungen? Tagebücher? Rezepte? Dialoge? Kochbücher? Bildergalerien? Bibliographische Daten? Geodaten? Copyright und Lizenzen? Mietverträge? Gebrauchsanleitungen? ...
  4. 6. Feinstrukturierung <div id=&quot;header&quot;> <!-- Kopfzeile --> </div> <div id=&quot;nav&quot;> <!-- Navigation --> </div> <div id=&quot;main&quot;> <div id=&quot;sidebar&quot;> <!-- Randspalte --> </div> <div id=&quot;content&quot;> <div class=&quot;section&quot;> <!-- Abschnitt --> </div> <div class=&quot;section&quot;> <!-- Abschnitt --> </div> </div> <div id=&quot;footer&quot;> <!-- Fußzeile --> </div> </div>
  5. 7. Mikroformate <address class=&quot;vcard&quot; > <span class=&quot;adr&quot;> <span class=&quot;fn&quot;> itemis AG </span> <br /> <span class=&quot;street-address&quot;> Am Brambusch 15–24 </span> <br /> <span class=&quot;postal-code&quot;> 44536 </span> <span class=&quot;locality&quot;> Lünen </span> </span> <br /><br /> Telefon: <span class=&quot;tel&quot;> +49 231 9860-210 </span> <br /> <span class=&quot;tel&quot;> <span class=&quot;type&quot;> Fax </span> : <span class=&quot;value&quot;> +49 231 9860-211 </span> </span> <br /><br /> E-Mail: <a href=&quot;mailto:info@itemis.de&quot; class=&quot;email&quot; >info@itemis.de</a> </address>
  6. 8. Skripting
  7. 9. WAI-ARIA (teilweise) <input type=&quot;text&quot; name=&quot;email&quot; aria-required=&quot;true&quot; />
  8. 10. Neue Standards braucht das Land! … und zwei davon stelle ich jetzt vor.
  9. 12. »Das Semantische Web ist eine Erweiterung des herkömmlichen Webs, in der Informationen mit eindeutigen Bedeutungen versehen werden, um die Arbeit zwischen Mensch und Maschine zu erleichtern.« Tim Berners-Lee
  10. 13. Formale Sprache zur Beschreibung von Eigenschaften beliebiger Daten in einer Form, die sowohl Menschen als auch Maschinen lesen und verstehen können.
  11. 14. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«.
  12. 15. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. sprachlich formal Subjekt Das Buch mit der ISBN 3-8273-2739-3 urn:isbn:3-8273-2739-3 Prädikat hat den Titel http://purl.org/dc/elements/1.1/title Objekt Einführung in XHTML, CSS und Webdesign Einführung in XHTML, CSS und Webdesign
  13. 16. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. sprachlich formal Subjekt Das Buch mit der ISBN 3-8273-2739-3 urn:isbn:3-8273-2739-3 Prädikat hat den Titel http://purl.org/dc/elements/1.1/title Objekt Einführung in XHTML, CSS und Webdesign Einführung in XHTML, CSS und Webdesign
  14. 17. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«. <rdf:RDF xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot; xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; > <rdf:Description rdf:about=&quot;urn:isbn:3-8273-2739-3&quot;> <dc:title>Einführung in XHTML, CSS und Webdesign</dc:title> </rdf:Description> </rdf:RDF>
  15. 18. RDFa <ul><li>RDFa nutzt Attribute, um (X)HTML-Dokumente mit RDF anzureichern
  16. 19. Seit Mitte 2004 Teil des W3C Arbeitsentwurfs »XHTML 2.0«
  17. 20. April 2007: XHTML+RDFa 1.0 </li></ul>
  18. 21. RDFa <ul><li>XHTML 1.0
  19. 22. @content @href @rel @rev @src
  20. 23. XHTML 2.0 Metainformation Attributes Module
  21. 24. @about @datatype @property @resource @typeof </li></ul>
  22. 25. RDFa Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objekt @about @rel @rev @resource @href @src
  23. 26. RDFa <span xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; about=&quot;urn:isbn:3-8273-2739-3&quot; property=&quot;dc:title&quot; content=&quot;Einführung in XHTML, CSS und Webdesign&quot; /> Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objekt @about @rel @rev @resource @href @src
  24. 27. RDFa <span xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; about=&quot;urn:isbn:3-8273-2739-3&quot; property=&quot;dc:title&quot; >Einführung in XHTML, CSS und Webdesign</span> Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objekt @about @rel @rev @resource @href @src
  25. 28. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren.
  26. 29. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. <p>Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren.</p>
  27. 30. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. sprachlich formal Subjekt Johann Wolfgang von Goethe http://dbpedia.org/page/Johann_Wolfgang_von_Goethe Prädikat wurde geboren am http://dbpedia.org/property/dateOfBirth Objekt 28. August 1749 1749-08-28
  28. 31. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. sprachlich formal Subjekt Johann Wolfgang von Goethe http://dbpedia.org/page/Johann_Wolfgang_von_Goethe Prädikat wurde geboren am http://dbpedia.org/property/dateOfBirth Objekt 28. August 1749 1749-08-28 sprachlich formal Subjekt Johann Wolfgang von Goethe http://dbpedia.org/page/Johann_Wolfgang_von_Goethe Prädikat wurde geboren in http://dbpedia.org/property/birthPlace Objekt Frankfurt am Main http://dbpedia.org/page/Frankfurt_am_Main
  29. 32. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren. <p about=&quot;http://dbpedia.org/page/Johann_Wolfgang_von_Goethe&quot; xmlns:dbp=&quot;http://dbpedia.org/property/&quot; xmlns:xsd=&quot;http://www.w3.org/2001/XMLSchema&quot; > Johann Wolfgang von Goethe wurde am <span property=&quot;dbp:dateOfBirth&quot; datatype=&quot;xsd:date&quot; content=&quot;1749-08-28&quot;> 28. August 1749 </span> in <span rel=&quot;dbp:birthPlace&quot; resource=&quot;http://dbpedia.org/page/Frankfurt_am_Main&quot;> Frankfurt am Main </span> geboren. </p>
  30. 34. Web Applications 1.0 <ul><li>Mitte 2004: Erster Entwurf
  31. 35. Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML </li></ul>
  32. 36. Web Applications 1.0 HTML5 <ul><li>Mitte 2004: Erster Entwurf
  33. 37. Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML
  34. 38. Januar 2008: W3C veröffentlicht den ersten Arbeitsentwurf von HTML5
  35. 39. Juni 2008: Zweiter Arbeitsentwurf mit Integration von Web Forms 2.0
  36. 40. Mai 2009: Aktueller W3C-Arbeitsentwurf </li></ul>
  37. 41. Eine Sprache, mehrere Ausprägungen <ul><li>Definition eines abstrakten Dokumentmodells: HTML5-DOM
  38. 42. Derzeit zwei Serialisierungen: </li><ul><li>HTML-Syntax: HTML5
  39. 43. XML-Syntax: XHTML5 </li></ul></ul>
  40. 44. XHTML 1.0 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;de&quot; lang=&quot;de&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>Kochbar</title> </head> <body> <p>Absatz</p> </body> </html>
  41. 45. HTML5 <!DOCTYPE html> <html> <head> <meta charset=&quot;UTF-8&quot;> <title>Kochbar</title> </head> <body> <p>Absatz </body> </html>
  42. 46. HTML5 <!DOCTYPE html> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;de&quot; > <head> <meta charset=&quot;UTF-8&quot; / > <title>Kochbar</title> </head> <body> <p>Absatz </p> </body> </html>
  43. 47. XHTML5 <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Kochbar</title> </head> <body> <p>Absatz</p> </body> </html>
  44. 48. XHTML5 <!DOCTYPE html> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;de&quot;> <head> <meta charset=&quot;UTF-8&quot; /> <title>Kochbar</title> </head> <body> <p>Absatz</p> </body> </html>
  45. 49. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video
  46. 50. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video
  47. 51. Elemente zur Strukturierung Quelle: http://www.alistapart.com/articles/previewofhtml5
  48. 52. Elemente zur Strukturierung Quelle: http://www.alistapart.com/articles/previewofhtml5
  49. 53. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video
  50. 54. Elementunterschriften: Das Element figure <div class=&quot;illustration&quot;> <img src=&quot;/images/opera95.png&quot; alt=&quot;&quot; width=&quot;400&quot; height=&quot;300&quot; /> <span class=&quot;caption&quot;>Opera 9.5</span> </div> <figure> <img src=&quot;/images/opera95.png&quot; alt=&quot;&quot; width=&quot;400&quot; height=&quot;300&quot; /> <legend> Opera 9.5 </legend> </figure>
  51. 55. Elementunterschriften: Das Element figure <div id=&quot;lst2&quot;> <div class=&quot;caption&quot;>Listing 2: Header horizontal zentrieren</div> <pre><code>div#header { margin: 0 auto; width: 75%; }</code></pre> </div> <figure id=&quot;lst2&quot;> <legend> Listing 2: Header horizontal zentrieren </legend> <pre><code>div#header { margin: 0 auto; width: 75%; }</code></pre> </figure>
  52. 56. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video
  53. 57. Dialoge: Das Element dialog <dialog> <dt>Einige Handwerksbursche:</dt> <dd>Warum denn dort hinaus?</dd> <dt>Andre:</dt> <dd>Wir gehn hinaus aufs Jägerhaus.</dd> <dt>Die Ersten:</dt> <dd>Wir aber wollen nach der Mühle wandern.</dd> <dt>Ein Handwerksbursch:</dt> <dd>Ich rat euch, nach dem Wasserhof zu gehn.</dd> </dialog>
  54. 58. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video
  55. 59. Angabe eines begrenzten Maß: Das Element meter <meter min=&quot;0&quot; max=&quot;10&quot;>7</meter> <meter>70%</meter> <meter min=&quot;0&quot; max=&quot;10&quot; value=&quot;7&quot; title=&quot;Sterne&quot;></meter>
  56. 61. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video
  57. 62. Fortschrittsbalken: Das Element progress <section> <h2>Task Progress</h2> <p>Progress: <progress> <span id=&quot;p&quot;>0</span>% </progress> </p> <script> var progressBar = document.getElementById('p'); function updateProgress(newValue) { progressBar.textContent = newValue; } </script> </section>
  58. 63. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video
  59. 64. Markierung: Das Element mark <p>Am Ende der markierten Deklaration fehlt das Semikolon:</p> <pre><code>mark { color: black; <mark> background-color: yellow </mark> font-weight: bold; }</code></pre>
  60. 66. Neue Elemente article aside audio bb canvas command datagrid datalist details dialog embed figure footer header keygen mark meter nav output progress rp rt ruby section time video
  61. 67. Datums- und Zeitangaben: Das Element time <p>Der <time datetime=&quot;2009-05-10&quot;> Muttertag </time> ist ein Feiertag zu Ehren der Mutter und der Mutterschaft.</p> <p>Die Veranstaltung beginnt um <time> 18:30 </time> Uhr.</p>
  62. 68. Erweitertes a -Element <a href=&quot;http://www.itemis.de/20405&quot;> <h2>Was macht Eclipse attraktiv für den Embedded-Markt?</h2> <p>Was bietet Eclipse, wie schafft man durchgängige Werkzeugketten auf Basis der offenen Tool-Technologie und warum wurde itemis als Top Arbeitgeber 2009 ausgezeichnet?</p> <p>itemis-Vorstand Wolfgang Neuhaus im Gespräch.</p> </a>
  63. 69. Web Forms 2.0
  64. 71. Pflichtfelder und Autofocus <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; />
  65. 72. Pflichtfelder und Autofocus <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; /> <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; required=&quot;required&quot; autofocus=&quot;autofocus&quot; />
  66. 73. Datumsangaben <input name=&quot;date&quot; id=&quot;date&quot; size=&quot;30&quot; type=&quot;text&quot; value=&quot;zum Beispiel 24.12.2008&quot; onblur=&quot;if(this.value == '') this.value='zum Beispiel 24.12.2008'&quot; onfocus=&quot;if(this.value == 'zum Beispiel 24.12.2008') this.value=''&quot; />
  67. 74. Datumsangaben <input name=&quot;date&quot; id=&quot;date&quot; size=&quot;30&quot; type=&quot;text&quot; value=&quot;zum Beispiel 24.12.2008&quot; onblur=&quot;if(this.value == '') this.value='zum Beispiel 24.12.2008'&quot; onfocus=&quot;if(this.value == 'zum Beispiel 24.12.2008') this.value=''&quot; /> <input name=&quot;date&quot; id=&quot;date&quot; type=&quot;date&quot; required=&quot;required&quot; />
  68. 75. Zeitangaben <select name=&quot;time&quot; id=&quot;time&quot;> <option>bitte wählen...</option> <option>12:00</option> <option>12:30</option> <!-- Weitere Angaben --> <option>23:30</option> </select>
  69. 76. Zeitangaben <select name=&quot;time&quot; id=&quot;time&quot;> <option>bitte wählen...</option> <option>12:00</option> <option>12:30</option> <!-- Weitere Angaben --> <option>23:30</option> </select> <input name=&quot;time&quot; id=&quot;time&quot; type=&quot;time&quot; min=&quot;12:00&quot; max=&quot;23:30&quot; step=&quot;1800&quot; required=&quot;required&quot; />
  70. 77. Schieberegler <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </select>
  71. 78. Schieberegler <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </select> <input name=&quot;persons&quot; id=&quot;persons&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;80&quot; value=&quot;0&quot; oninput=&quot;document.getElementsByTagName('span')[0].textContent = value&quot; /> <span></span>
  72. 79. Liste mit Vorschlägen <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </select>
  73. 80. Liste mit Vorschlägen <select name=&quot;persons&quot; id=&quot;persons&quot;> <option selected=&quot;selected&quot;>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </select> <input name=&quot;persons&quot; id=&quot;persons&quot; list=&quot;plist&quot; required=&quot;required&quot; /> <datalist id=&quot;plist&quot;> <option>1–2</option> <option>3–5</option> <option>6–10</option> <option>10–15</option> <option>mehr als 15</option> </datalist>
  74. 82. HTML5 Microdata <ul><li>Editor's Draft vom 11. Mai 2009
  75. 83. Neue Attribute: @item @itemprop @subject </li></ul>
  76. 84. Beispiel <span>Einführung in XHTML, CSS und Webdesign</span>
  77. 85. Beispiel <span>Einführung in XHTML, CSS und Webdesign</span> <span item=&quot;urn:isbn:3-8273-2739-3&quot; itemprob=&quot;http://purl.org/dc/elements/1.1/title&quot; >Einführung in XHTML, CSS und Webdesign</span>
  78. 86. Veranstaltung <div> <h3> <a href=&quot;http://createordie.de/webinale/session/?seid=10215&quot;> Websemantik: Die nächsten Schritte</a> </h3> <p class=&quot;meta&quot;> <time datetime=&quot;2009-05-26&quot;>26. Mai 2009</time>, <span>Berliner Congress Center, Berlin</span> </p> </div>
  79. 87. Veranstaltung (Microdata) <div item=&quot;vevent&quot; > <h3 itemprop=&quot;summary&quot; > <a href=&quot;http://createordie.de/webinale/session/?seid=10215&quot; itemprop=&quot;url&quot; >Websemantik: Die nächsten Schritte</a> </h3> <p class=&quot;meta&quot;> <time itemprop=&quot;dtstart&quot; datetime=&quot;2009-05-26&quot;>26. Mai 2009</time>, <span itemprop=&quot;location&quot; >Berliner Congress Center, Berlin</span> </p> </div>
  80. 89. Kontakt <address> itemis AG<br /> Am Brambusch 15–24<br /> 44536 Lünen<br /> <br /> Telefon: +49 231 9860-210<br /> Fax +49 231 9860-211<br /> <br /> E-Mail: <a href=&quot;mailto:info@itemis.de&quot;>info@itemis.de</a> </address>
  81. 90. Kontakt (Microformat) <address class=&quot;vcard&quot; > <span class=&quot;fn&quot;> itemis AG </span> <br /> <span class=&quot;adr&quot;> <span class=&quot;street-address&quot;> Am Brambusch 15–24 </span> <br /> <span class=&quot;postal-code&quot;> 44536 </span> <span class=&quot;locality&quot;> Lünen </span> </span> <br /><br /> Telefon: <span class=&quot;tel&quot;> +49 231 9860-210 </span> <br /> <span class=&quot;tel&quot;> <span class=&quot;type&quot;> Fax </span> : <span class=&quot;value&quot;> +49 231 9860-211 </span> </span> <br /><br /> E-Mail: <a href=&quot;mailto:info@itemis.de&quot; class=&quot;email&quot; >info@itemis.de</a> </address>
  82. 91. Kontakt (RDFa) <address xmlns:vCard=&quot;http://www.w3.org/2001/vcard-rdf/3.0#&quot; about=&quot;http://www.itemis.de/&quot; > <span property=&quot;vCard:FN&quot;> itemis AG </span> <br /> <span property=&quot;vCard:ADR&quot;> <span property=&quot;vCard:Street&quot;> Am Brambusch 15–24 </span> <br /> <span property=&quot;vCard:Postal-code&quot;> 44536 </span> <span property=&quot;vCard:Locality&quot;> Lünen </span> </span> <br /><br /> Telefon: <span class=&quot;vCard:TEL&quot;> +49 231 9860-210 </span> <br /> <span property=&quot;vCard:TEL&quot;> <span property=&quot;vCard:Type&quot;> Fax </span> : <span property=&quot;vCard:Value&quot;> +49 231 9860-211 </span> </span> <br /><br /> E-Mail: <a href=&quot;mailto:info@itemis.de&quot; rel=&quot;vCard:EMAIL&quot; >info@itemis.de</a> </address>
  83. 92. Kontakt (Microdata) <address item=&quot;vcard&quot; > <span itemprop=&quot;fn&quot;> itemis AG </span> <br /> <span itemprop=&quot;adr&quot; item=&quot;item&quot;> <span itemprop=&quot;street-address&quot;> Am Brambusch 15–24 </span> <br /> <span itemprop=&quot;postal-code&quot;> 44536 </span> <span itemprop=&quot;locality&quot;> Lünen </span> </span> <br /><br /> Telefon: <span itemprop=&quot;tel&quot;> +49 231 9860-210 </span> <br /> <span itemprop=&quot;tel&quot; item=&quot;item&quot;> <span itemprop=&quot;type&quot;> Fax </span> : <span itemprop=&quot;value&quot;> +49 231 9860-211 </span> </span> <br /><br /> E-Mail: <a href=&quot;mailto:info@itemis.de&quot; itemprop=&quot;email&quot; >info@itemis.de</a> </address>
  84. 93. Michael Jendryschik [email_address] 26. Mai 2008 Diskussion
  85. 94. Weiterführende Ressourcen <ul><li>RDF Primer (W3C Recommendation): http://www.w3.org/TR/REC-rdf-syntax/
  86. 95. RDFa Primer (W3C Working Group Note): http://www.w3.org/TR/xhtml-rdfa-primer/
  87. 96. Representing vCard Objects in RDF/XML (W3C Note): http://www.w3.org/TR/vcard-rdf
  88. 97. Eingebettete Semantik: Webseiten mit RDFa anreichern. Webstandards-Magazin, Ausgabe 01/2009, S. 48–54 </li></ul>
  89. 98. Weiterführende Ressourcen <ul><li>HTML 5 (W3C Last Editor's Draft): http://dev.w3.org/html5/spec/Overview.html
  90. 99. HTML 5 differences from HTML 4 (W3C Working Draft): http://www.w3.org/TR/html5-diff/
  91. 100. HTML5: http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse-ueberblick/
  92. 101. New elements in HTML 5: http://www.ibm.com/developerworks/library/x-html5/
  93. 102. Wikipedia: Comparison of layout engines (HTML 5): http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5 )
  94. 103. XHTML wird zu Grabe getragen : http://molily.de/weblog/xhtml-ist-out </li></ul>
  95. 104. Bildnachweis <ul><li>Folie 2: http://www.hiphopstore.ch/images/semantik_album.jpg
  96. 105. Folie 5: http://upload.wikimedia.org/wikipedia/commons/2/2d/Marokko_W%C3%BCste_02.JPG
  97. 106. Seite 6–9: http://bilder.afterbuy.de/images/50195/60609.jpg
  98. 107. Seite 12: http://upload.wikimedia.org/wikipedia/commons/4/43/Spider_web_Luc_Viatour.jpg
  99. 108. Seite 23: http://www.kunstkreiseutin.de/FOTOS/tischbein---goethe-gross.jpg
  100. 109. Seite 57: http://www.bischofshofen.sbg.at/jpg/formulare_bauamt/formular_kopie.jpg </li></ul>

×