SlideShare ist ein Scribd-Unternehmen logo
1 von 83
Downloaden Sie, um offline zu lesen
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 beglaubigten Schriftstücken. Wir alle kennen den Begriff »Word-Dokument«, Webentwickler sprechen von »HTML-Dokumenten«. Aber was sind Dokumente eigentlich?</p>
Kontaktdaten?   Buchrezensionen?   Termine?   CD-Sammlungen?   Tagebücher?   Rezepte?   Dialoge?   Kochbücher?   Bildergalerien?   Bibliographische Daten?   Geodaten?  Copyright und Lizenzen?  Mietverträge?   Gebrauchsanleitungen? ...
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>
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>
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 versehen werden, um    die Arbeit zwischen Mensch und Maschine zu    erleichtern.« Tim Berners-Lee
Formale Sprache zur Beschreibung von Eigenschaften beliebiger Daten in einer Form, die sowohl Menschen als auch Maschinen lesen und verstehen können.
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 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
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
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>
RDFa ,[object Object]
Seit Mitte 2004 Teil des W3C Arbeitsentwurfs »XHTML 2.0«
April 2007: XHTML+RDFa 1.0
RDFa ,[object Object]
@content @href @rel @rev @src
XHTML 2.0 Metainformation Attributes Module
@about @datatype @property @resource @typeof
RDFa Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objekt @about @rel @rev @resource @href @src
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
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
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 28. August 1749 in   Frankfurt am Main geboren.</p>
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
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
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>
 
Web Applications 1.0 ,[object Object]
Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML
Web Applications 1.0  HTML5 ,[object Object]
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
Eine Sprache, mehrere Ausprägungen ,[object Object]
Derzeit zwei Serialisierungen: ,[object Object]
XML-Syntax: XHTML5
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>
HTML5 <!DOCTYPE html> <html> <head> <meta charset=&quot;UTF-8&quot;> <title>Kochbar</title> </head> <body> <p>Absatz </body> </html>
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>
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>
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>
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
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
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 mark meter nav output progress rp rt ruby section time video
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>
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>
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
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>
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
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>
 
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
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>
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
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>
 
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
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>
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>
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; /> <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;  />
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; />
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; />
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>
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; />
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>
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>
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>
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>
 
HTML5 Microdata ,[object Object]
Neue Attribute:  @item @itemprop @subject

Weitere ähnliche Inhalte

Was ist angesagt?

I thought you were my friend!
I thought you were my friend!I thought you were my friend!
I thought you were my friend!Mario Heiderich
 
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
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notesdominion
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from ScratchStefan Fröhlich
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy Bosch
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Jens Grochtdreis
 
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerYes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerGregor Biswanger
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007jan_mindmatters
 
Emanzipiertes JavaScript und das Coming Out der Flash Community
Emanzipiertes JavaScript und das Coming Out der Flash CommunityEmanzipiertes JavaScript und das Coming Out der Flash Community
Emanzipiertes JavaScript und das Coming Out der Flash CommunityChristian Heilmann
 
Christian heilmann wie javascript die welt eroberte
Christian heilmann   wie javascript die welt eroberteChristian heilmann   wie javascript die welt eroberte
Christian heilmann wie javascript die welt eroberteChristian Heilmann
 
Schematron in der Qualitätssicherung
Schematron in der QualitätssicherungSchematron in der Qualitätssicherung
Schematron in der QualitätssicherungStefan Krause
 
Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshopphillipgroschup
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleGino Cremer
 

Was ist angesagt? (20)

I thought you were my friend!
I thought you were my friend!I thought you were my friend!
I thought you were my friend!
 
Daisy
DaisyDaisy
Daisy
 
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)
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerYes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-Entwickler
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Emanzipiertes JavaScript und das Coming Out der Flash Community
Emanzipiertes JavaScript und das Coming Out der Flash CommunityEmanzipiertes JavaScript und das Coming Out der Flash Community
Emanzipiertes JavaScript und das Coming Out der Flash Community
 
Christian heilmann wie javascript die welt eroberte
Christian heilmann   wie javascript die welt eroberteChristian heilmann   wie javascript die welt eroberte
Christian heilmann wie javascript die welt eroberte
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
PHP Sucks?!
PHP Sucks?!PHP Sucks?!
PHP Sucks?!
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Schematron in der Qualitätssicherung
Schematron in der QualitätssicherungSchematron in der Qualitätssicherung
Schematron in der Qualitätssicherung
 
Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshop
 
Web Wuermer
Web WuermerWeb Wuermer
Web Wuermer
 
HTML5
HTML5HTML5
HTML5
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
 

Andere mochten auch (20)

Jesus the great teacher spanish cb
Jesus the great teacher spanish cbJesus the great teacher spanish cb
Jesus the great teacher spanish cb
 
Es importante-la-integridad1
Es importante-la-integridad1Es importante-la-integridad1
Es importante-la-integridad1
 
MERCADO, ELECCION PUBLICA E INSTITUCIONES
MERCADO, ELECCION PUBLICA E INSTITUCIONESMERCADO, ELECCION PUBLICA E INSTITUCIONES
MERCADO, ELECCION PUBLICA E INSTITUCIONES
 
Una mamá pide un favor
Una mamá pide un favorUna mamá pide un favor
Una mamá pide un favor
 
Barbarossa goes online
Barbarossa goes onlineBarbarossa goes online
Barbarossa goes online
 
Ergebnisliste
ErgebnislisteErgebnisliste
Ergebnisliste
 
Spidle
SpidleSpidle
Spidle
 
Bolivia y suiza
Bolivia y suizaBolivia y suiza
Bolivia y suiza
 
El triste pablo pato
El triste pablo patoEl triste pablo pato
El triste pablo pato
 
Atomosymoleculas
AtomosymoleculasAtomosymoleculas
Atomosymoleculas
 
El perdon
El perdonEl perdon
El perdon
 
Familia López (de Oliver) (rama Agustín López y López)
Familia López (de Oliver) (rama Agustín López y López)Familia López (de Oliver) (rama Agustín López y López)
Familia López (de Oliver) (rama Agustín López y López)
 
Proyecto. redes sociales
Proyecto. redes socialesProyecto. redes sociales
Proyecto. redes sociales
 
Transmisión
TransmisiónTransmisión
Transmisión
 
Importancia p.a.c.i.e
Importancia p.a.c.i.eImportancia p.a.c.i.e
Importancia p.a.c.i.e
 
Caminando con-cristo
Caminando con-cristoCaminando con-cristo
Caminando con-cristo
 
Nominativ&Akkusativ
Nominativ&AkkusativNominativ&Akkusativ
Nominativ&Akkusativ
 
Spanish presentation
Spanish presentationSpanish presentation
Spanish presentation
 
Ausschreibung Beachhandballturnier TV Haibach
Ausschreibung Beachhandballturnier TV HaibachAusschreibung Beachhandballturnier TV Haibach
Ausschreibung Beachhandballturnier TV Haibach
 
Grupo 5 consejo de la judicatura 100%
Grupo 5 consejo de la judicatura 100%Grupo 5 consejo de la judicatura 100%
Grupo 5 consejo de la judicatura 100%
 

Ähnlich wie Websemantik: Die nächsten Schritte

2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XMLSteffen Schloenvoigt
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptChristian Baranowski
 
Dynamische Websites mit XML
Dynamische Websites mit XMLDynamische Websites mit XML
Dynamische Websites mit XMLStephan Schmidt
 
Grundlagen des World Wide Web
Grundlagen des World Wide WebGrundlagen des World Wide Web
Grundlagen des World Wide WebJakob .
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Noël Bossart
 
Xhtml Coding (nicht nur für Bibliotheken)
Xhtml Coding (nicht nur für Bibliotheken)Xhtml Coding (nicht nur für Bibliotheken)
Xhtml Coding (nicht nur für Bibliotheken)Luka Peters
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Datenformate und Standards
Datenformate und StandardsDatenformate und Standards
Datenformate und StandardsJakob .
 
Semantic Web und Identifikatoren
Semantic Web und IdentifikatorenSemantic Web und Identifikatoren
Semantic Web und IdentifikatorenJakob .
 
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
 
Datenformate und Standards
Datenformate und StandardsDatenformate und Standards
Datenformate und StandardsJakob .
 
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
 
Atom Publishing Protocol
Atom Publishing ProtocolAtom Publishing Protocol
Atom Publishing ProtocolRichard Metzler
 
Einführung HTML (Geschichte + Basics)
Einführung HTML (Geschichte + Basics)Einführung HTML (Geschichte + Basics)
Einführung HTML (Geschichte + Basics)guestb8fee
 
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...frankstaude
 
Web 3.0 - Wie Webseiten intelligent werden
Web 3.0 - Wie Webseiten intelligent werdenWeb 3.0 - Wie Webseiten intelligent werden
Web 3.0 - Wie Webseiten intelligent werdenAI4BD GmbH
 

Ähnlich wie Websemantik: Die nächsten Schritte (20)

2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
 
Dynamische Websites mit XML
Dynamische Websites mit XMLDynamische Websites mit XML
Dynamische Websites mit XML
 
Grundlagen des World Wide Web
Grundlagen des World Wide WebGrundlagen des World Wide Web
Grundlagen des World Wide Web
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
 
Xhtml Coding (nicht nur für Bibliotheken)
Xhtml Coding (nicht nur für Bibliotheken)Xhtml Coding (nicht nur für Bibliotheken)
Xhtml Coding (nicht nur für Bibliotheken)
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Datenformate und Standards
Datenformate und StandardsDatenformate und Standards
Datenformate und Standards
 
Semantic Web und Identifikatoren
Semantic Web und IdentifikatorenSemantic Web und Identifikatoren
Semantic Web und Identifikatoren
 
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
 
XHTML
XHTMLXHTML
XHTML
 
Datenformate und Standards
Datenformate und StandardsDatenformate und Standards
Datenformate und Standards
 
IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
 
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
 
Atom Publishing Protocol
Atom Publishing ProtocolAtom Publishing Protocol
Atom Publishing Protocol
 
Einführung HTML (Geschichte + Basics)
Einführung HTML (Geschichte + Basics)Einführung HTML (Geschichte + Basics)
Einführung HTML (Geschichte + Basics)
 
CSS: Einführung
CSS: EinführungCSS: Einführung
CSS: Einführung
 
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
 
Interaktives Web
Interaktives WebInteraktives Web
Interaktives Web
 
Web 3.0 - Wie Webseiten intelligent werden
Web 3.0 - Wie Webseiten intelligent werdenWeb 3.0 - Wie Webseiten intelligent werden
Web 3.0 - Wie Webseiten intelligent werden
 

Mehr von Michael Jendryschik

Entwicklungen in Spielen als Innovationstreiber für Usability
Entwicklungen in Spielen als Innovationstreiber für UsabilityEntwicklungen in Spielen als Innovationstreiber für Usability
Entwicklungen in Spielen als Innovationstreiber für UsabilityMichael Jendryschik
 
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...Michael Jendryschik
 
Personas im Usability Engineering
Personas im Usability EngineeringPersonas im Usability Engineering
Personas im Usability EngineeringMichael Jendryschik
 
HTML5: Einblick, Überblick, Ausblick
HTML5: Einblick, Überblick, AusblickHTML5: Einblick, Überblick, Ausblick
HTML5: Einblick, Überblick, AusblickMichael Jendryschik
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)Michael Jendryschik
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)Michael Jendryschik
 
6 Beispiele für die nützliche Anwendung von Mikroformaten
6 Beispiele für die nützliche Anwendung von Mikroformaten6 Beispiele für die nützliche Anwendung von Mikroformaten
6 Beispiele für die nützliche Anwendung von MikroformatenMichael Jendryschik
 

Mehr von Michael Jendryschik (7)

Entwicklungen in Spielen als Innovationstreiber für Usability
Entwicklungen in Spielen als Innovationstreiber für UsabilityEntwicklungen in Spielen als Innovationstreiber für Usability
Entwicklungen in Spielen als Innovationstreiber für Usability
 
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
 
Personas im Usability Engineering
Personas im Usability EngineeringPersonas im Usability Engineering
Personas im Usability Engineering
 
HTML5: Einblick, Überblick, Ausblick
HTML5: Einblick, Überblick, AusblickHTML5: Einblick, Überblick, Ausblick
HTML5: Einblick, Überblick, Ausblick
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
 
6 Beispiele für die nützliche Anwendung von Mikroformaten
6 Beispiele für die nützliche Anwendung von Mikroformaten6 Beispiele für die nützliche Anwendung von Mikroformaten
6 Beispiele für die nützliche Anwendung von Mikroformaten
 

Websemantik: Die nächsten Schritte

  • 1. Michael Jendryschik 26. Mai 2009 Websemantik Die nächsten Schritte
  • 2.  
  • 3.  
  • 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>
  • 5. Kontaktdaten? Buchrezensionen? Termine? CD-Sammlungen? Tagebücher? Rezepte? Dialoge? Kochbücher? Bildergalerien? Bibliographische Daten? Geodaten? Copyright und Lizenzen? Mietverträge? Gebrauchsanleitungen? ...
  • 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>
  • 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>
  • 9. WAI-ARIA (teilweise) <input type=&quot;text&quot; name=&quot;email&quot; aria-required=&quot;true&quot; />
  • 10. Neue Standards braucht das Land! … und zwei davon stelle ich jetzt vor.
  • 11.  
  • 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
  • 13. Formale Sprache zur Beschreibung von Eigenschaften beliebiger Daten in einer Form, die sowohl Menschen als auch Maschinen lesen und verstehen können.
  • 14. Das Buch mit der ISBN 3-8273-2739-3 hat den Titel »Einführung in XHTML, CSS und Webdesign«.
  • 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
  • 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
  • 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>
  • 18.
  • 19. Seit Mitte 2004 Teil des W3C Arbeitsentwurfs »XHTML 2.0«
  • 21.
  • 22. @content @href @rel @rev @src
  • 23. XHTML 2.0 Metainformation Attributes Module
  • 24. @about @datatype @property @resource @typeof
  • 25. RDFa Subjekt Prädikat Objekt Zeichenkette als Objekt @about @property @content (oder bestehende Zeichenkette URI als Objekt @about @rel @rev @resource @href @src
  • 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
  • 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
  • 28. Johann Wolfgang von Goethe wurde am 28. August 1749 in Frankfurt am Main geboren.
  • 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>
  • 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
  • 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
  • 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>
  • 33.  
  • 34.
  • 35. Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML
  • 36.
  • 37. Mai 2007: Startpunkt zur Diskussion und Weiterentwicklung von HTML
  • 38. Januar 2008: W3C veröffentlicht den ersten Arbeitsentwurf von HTML5
  • 39. Juni 2008: Zweiter Arbeitsentwurf mit Integration von Web Forms 2.0
  • 40. Mai 2009: Aktueller W3C-Arbeitsentwurf
  • 41.
  • 42.
  • 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>
  • 45. HTML5 <!DOCTYPE html> <html> <head> <meta charset=&quot;UTF-8&quot;> <title>Kochbar</title> </head> <body> <p>Absatz </body> </html>
  • 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>
  • 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>
  • 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>
  • 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
  • 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
  • 51. Elemente zur Strukturierung Quelle: http://www.alistapart.com/articles/previewofhtml5
  • 52. Elemente zur Strukturierung Quelle: http://www.alistapart.com/articles/previewofhtml5
  • 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
  • 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>
  • 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>
  • 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
  • 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>
  • 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
  • 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>
  • 60.  
  • 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
  • 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>
  • 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
  • 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>
  • 65.  
  • 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
  • 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>
  • 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>
  • 70.  
  • 71. Pflichtfelder und Autofocus <input name=&quot;name&quot; id=&quot;name&quot; size=&quot;30&quot; type=&quot;text&quot; />
  • 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; />
  • 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; />
  • 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; />
  • 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>
  • 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; />
  • 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>
  • 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>
  • 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>
  • 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>
  • 81.  
  • 82.
  • 83. Neue Attribute: @item @itemprop @subject
  • 84. Beispiel <span>Einführung in XHTML, CSS und Webdesign</span>
  • 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>
  • 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>
  • 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>
  • 88.  
  • 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>
  • 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>
  • 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>
  • 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>
  • 93. Michael Jendryschik [email_address] 26. Mai 2008 Diskussion
  • 94.
  • 95. RDFa Primer (W3C Working Group Note): http://www.w3.org/TR/xhtml-rdfa-primer/
  • 96. Representing vCard Objects in RDF/XML (W3C Note): http://www.w3.org/TR/vcard-rdf
  • 97. Eingebettete Semantik: Webseiten mit RDFa anreichern. Webstandards-Magazin, Ausgabe 01/2009, S. 48–54
  • 98.
  • 99. HTML 5 differences from HTML 4 (W3C Working Draft): http://www.w3.org/TR/html5-diff/
  • 101. New elements in HTML 5: http://www.ibm.com/developerworks/library/x-html5/
  • 102. Wikipedia: Comparison of layout engines (HTML 5): http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5 )
  • 103. XHTML wird zu Grabe getragen : http://molily.de/weblog/xhtml-ist-out
  • 104.
  • 105. Folie 5: http://upload.wikimedia.org/wikipedia/commons/2/2d/Marokko_W%C3%BCste_02.JPG
  • 106. Seite 6–9: http://bilder.afterbuy.de/images/50195/60609.jpg
  • 107. Seite 12: http://upload.wikimedia.org/wikipedia/commons/4/43/Spider_web_Luc_Viatour.jpg
  • 108. Seite 23: http://www.kunstkreiseutin.de/FOTOS/tischbein---goethe-gross.jpg
  • 109. Seite 57: http://www.bischofshofen.sbg.at/jpg/formulare_bauamt/formular_kopie.jpg