HTML5 Enfoque Semantico

html5 enfoque semántico { Kraszewski Maximiliano psicofxp.com

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

¿cómo surge html5?

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

¿está html5 listo ahora?

http://ishtml5readyyet.com/

¿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

mientras tanto…

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

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

http://seo.nextcache.com	473
http://www.htmleando.com	215
http://minimalart.tumblr.com	44
http://www.minimalart.org	25
http://www.slideshare.net	18
http://tensores.blogspot.com	16
http://minimalart.org	14
http://nextcache.com	4
http://www.luispablos.com	3
http://www.google.com.co	3
http://www.tumblr.com	2
http://translate.googleusercontent.com	2
http://webcache.googleusercontent.com	1
http://74.125.47.132	1

HTML5 Enfoque Semantico

by Maximiliano Kraszewski on Mar 18, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

14 Embeds 821

Statistics

HTML5 Enfoque Semantico — Presentation Transcript