HTML5 Enfoque Semantico

html5
enfoque semántico

{ Kraszewski
Maximiliano
psicofxp.com

html5 es un paso
a la web semántica.
d

• 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.

¿qué es
la web semántica?

d

¿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

¿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

los nuevos elementos de html5
definen y facilitan los metadatos.
d

¿cuáles
son los

nuevos
elementos?

• 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

<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>

<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>

<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>

html 4.01 / xhtml 1
<div id=“header”>

<div id=“nav”>

<div class=“article”>

<div id=
d
“sidebar”>
<div class=“section”>

<div id=“footer”>

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>

<!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>

¿cuándo
puedo comenzar
a utilizarlo…
realmente?

¿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

• 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

y en el mejor de los casos…

posh
Plain Old Semantic HTML

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/

¡gracias!

Si te interesó el tema y no te dormiste:

email: max@psicofxp.com
twitter: @minimalart
web personal: www.minimalart.org

HTML5 Enfoque Semantico

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (18)

Similar a HTML5 Enfoque Semantico

Similar a HTML5 Enfoque Semantico (20)

Más de Max Kraszewski

Más de Max Kraszewski (7)

Último

Último (10)

HTML5 Enfoque Semantico