5. • Como iniciativa de WHATWG, comunidad
formada por Apple, Mozilla y Opera en 2004
¿cómo
• Como resultado de la preocupación de esta
asociación acerca del rumbo hacia XHTML de la
W3C, y su poco interés en HTML
surge • Como reemplazo de HTML 4.01 y XHTML 1.0
html5? • Como soporte para nuevos atributos de
etiquetas existentes
• Como soporte de nuevas etiquetas que
proporcionen una web más semántica.
6. • Como iniciativa de WHATWG, comunidad
formada por Apple, Mozilla y Opera en 2004
¿cómo
• Como resultado de la preocupación de esta
asociación acerca del rumbo hacia XHTML de la
W3C, y su poco interés en HTML
surge • Como reemplazo de HTML 4.01 y XHTML 1.0
html5? • Como soporte para nuevos atributos de
etiquetas existentes
• Como soporte de nuevas etiquetas que
proporcionen una web más semántica.
8. ¿qué es
la web semántica?
d
La web semántica se basa en la idea
de añadir metadatos semánticos y
ontológicos a la web. Esas
informaciones adicionales se deben
proporcionar de manera
formal, para que así sea posible
evaluarlas automáticamente por
máquinas de procesamiento.
Wikipedia
9. ¿qué es
la web semántica?
d
La web semántica se basa en la idea
de añadir metadatos semánticos y
ontológicos a la web. Esas
informaciones adicionales se deben
proporcionar de manera
formal, para que así sea posible
evaluarlas automáticamente por
máquinas de procesamiento.
Wikipedia
10. ¿qué es
la web semántica?
d
Metadatos sobre Metadatos
La web semántica se basa en la idea
Datos acerca de estructura y contenido de los
de añadir metadatos semánticos y
documentos de la web, sean
ontológicos a la web. Esas texto, imágenes, videos, audio, etc.
informaciones adicionales se deben
Los metadatos describen y enriquecen
proporcionar de manera semánticamente los datos, pues hacen más
fácil su interpretación, así como la del contexto
formal, para que así sea posible al que pertenecen.
evaluarlas automáticamente por
máquinas de procesamiento.
Wikipedia
13. • article • footer
¿cuáles
• aside • header
• audio • mark
• canvas • meter
son los
• command • nav
• datagrid • nest
nuevos
• datalist • output
• datatemplate • progress
• embed • source
elementos?
• event-source • time
• figure • video
14. <time> <p>Escribo esto el
<time datetime=quot;2009-03-17T17:35:00-05:00“>
17 de Marzo, 5:35PM
</time>
</p>
<meter>
<p>Su calificación fue de
<meter value=quot;88.7quot; min=quot;0quot; max=quot;100quot;>
B+
</meter>
</p>
15. <dialog>
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who's playing first?
<dt> Abbott
<dd> That's right.
<dt> Costello
<dd> When you pay off the first baseman
every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
16. <audio>
<audio src=“victorhugo.mp3“>
<p>...la va a tocar para Diego, ahí la
tiene Maradona, lo marcan dos, pisa la
pelota Maradona, arranca por la
derecha el genio del futbol mundial, y
deja el tercero y va a tocar para
Burruchaga...</p>
</audio>
<video> <video poster=quot;poster.jpgquot;>
<source src=quot;video.3gpquot; type=quot;video/3gppquot;
media=quot;handheldquot;>
<source src=quot;video.mp4quot; type=quot;video/mp4quot;>
</video>
17. html 4.01 / xhtml 1
<div id=“header”>
<div id=“nav”>
<div class=“article”>
<div id=
d
“sidebar”>
<div class=“section”>
<div id=“footer”>
18. html 5
html 4.01 / xhtml 1
<div id=“header”> <header>
<div id=“nav”> <nav>
<div class=“article”> <article>
<div id= <aside>
d d
“sidebar”>
<div class=“section”> <section>
<div id=“footer”> <footer>
19.
20. <!DOCTYPE HTML>
<html>
<head>
<meta charset=quot;utf-8quot;>
<title>HTML5</title>
<link href=quot;style.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot;>
</head>
<body>
<header>
<h1>Ejemplo de HTML5</h1>
</header>
<nav>Enlace 1 | Enlace 2 | Enlace 3 | Enlace 4</nav>
<article>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.[…]
</section>
</article>
<aside>
Lorem Ipsum is simply dummy text of the printing industry.[…]
</aside>
<footer>Copyright 2009</footer>
</body>
divless
</html>
24. ¿cuándo
• Cuando se alcance un amplio
puedo comenzar
soporte de los navegadores
a utilizarlo…
• Cuando las nuevas etiquetas
realmente?
realmente tengan peso para los
buscadores
26. • Aprovechar las etiquetas existentes
en [X]HTML actual
mientras • Agregar folksonomias
• Utilizar componentes existentes:
tanto… XML, RDF, OWL y microformatos
• Brindar y hacer uso webservices
para ganar interoperabilidad
30. recursos
bibliografía y
WHATWG Community http://www.whatwg.org/
HTML 5 differences from HTML 4 http://www.w3.org/TR/2009/WD-html5-diff-20090212/
HTML 5 Reference http://www.w3schools.com/tags/html5.asp
A preview of HTML 5 http://www.alistapart.com/articles/previewofhtml5
New elements in HTML 5 http://www.ibm.com/developerworks/library/x-html5/
Looking into HTML 5 http://christopherschmitt.com/2009/03/09/looking-into-html5/
La web semántica hoy http://www.wshoy.sidar.org
HTML5 Validator http://html5.validator.nu/
A web developer guide to HTML 5 http://dev.w3.org/html5/html-author/
HTML vs XHTML http://wiki.whatwg.org/wiki/HTML_vs._XHTML
Semantics in HTML 5 http://www.alistapart.com/articles/semanticsinhtml5
Charla sobre Web Semántica de la Tana Ligato en Barcamp 2007
http://www.slideshare.net/Tana/web-semantica-tana-barcamp
HTML5, XHTML2 and the future of the web
http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web/
Nuevos tipos de enlaces para el HTML5
http://www.anieto2k.com/2008/01/08/nuevos-tipos-de-enlaces-para-el-html5/
Web semántica y sus principales características
http://www.maestrosdelweb.com/editorial/web-semantica-y-sus-principales-caracteristicas/
31. ¡gracias!
Si te interesó el tema y no te dormiste:
email: max@psicofxp.com
twitter: @minimalart
web personal: www.minimalart.org