HTML5 Enfoque Semantico

6,108 views

Published on

Charla en Microsoft el 18 de Marzo de 2009.
Reunión mensual de Referentes Web.

Published in: Technology
  • The presentation is absolutely fantastic. A bit long but drives the
    point home when no presenter is involved. Love the logic / magic
    slide.
    http://www.furniture101.net/
    http://www.furniture101.net/category/modern-furniture/
    http://www.furniture101.net/category/office-furniture/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5 Enfoque Semantico

  1. 1. html5 enfoque semántico { Kraszewski Maximiliano psicofxp.com
  2. 2. html5 es un paso a la web semántica. d
  3. 3. html5 es un paso a la web semántica. d
  4. 4. ¿cómo surge html5?
  5. 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. 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.
  7. 7. ¿qué es la web semántica? d
  8. 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. 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. 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
  11. 11. los nuevos elementos de html5 definen y facilitan los metadatos. d
  12. 12. ¿cuáles son los nuevos elementos?
  13. 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. 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. 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. 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. 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. 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. 19. <!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>
  20. 20. ¿está html5 listo ahora?
  21. 21. http://ishtml5readyyet.com/
  22. 22. ¿cuándo puedo comenzar a utilizarlo… realmente?
  23. 23. ¿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
  24. 24. mientras tanto…
  25. 25. • 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
  26. 26. y en el mejor de los casos…
  27. 27. y en el mejor de los casos… posh Plain Old Semantic HTML
  28. 28. ;-)
  29. 29. 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/
  30. 30. ¡gracias! Si te interesó el tema y no te dormiste: email: max@psicofxp.com twitter: @minimalart web personal: www.minimalart.org

×