HTML5 - Enfoque semántico

Presentación sobre las nuevas etiquetas semánticas de HTML5
Realizado en Microsoft Argentina

Transcript

1. { html enfoque semántico 5 MaxKraszewski      @minimalart  
2. d   html5 es un paso a la web semántica. “
3. d   html5 es un paso a la web semántica. “
4. ¿cómo surge html5?
5. ¿cómo surge html5? { •   Como  inicia6va  de  WHATWG,  comunidad   formada  por  Apple,  Mozilla  y  Opera  en  2004   •   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   •   Como  reemplazo  de  HTML  4.01  y  XHTML  1.0   •   Como  soporte  para  nuevos  atributos  de   e6quetas  existentes   •   Como  soporte  de  nuevas  e6quetas  que   proporcionen  una  web  más  semán6ca.    
6. ¿cómo surge html5? { •   Como  inicia6va  de  WHATWG,  comunidad   formada  por  Apple,  Mozilla  y  Opera  en  2004   •   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   •   Como  reemplazo  de  HTML  4.01  y  XHTML  1.0   •   Como  soporte  para  nuevos  atributos  de   e6quetas  existentes   •   Como  soporte  de  nuevas  e6quetas  que   proporcionen  una  web  más  semán6ca.    
7. d   ¿qué es la web semántica?
8. d   ¿qué es la web semántica? { La  web  semán6ca  se  basa  en  la  idea   de  añadir  metadatos  semán6cos  y   ontológicos  a  la  web.  Esas   informaciones  adicionales  se  deben   proporcionar  de  manera  formal,   para  que  así  sea  posible  evaluarlas   automá6camente  por  máquinas  de   procesamiento.  Wikipedia  
9. d   ¿qué es la web semántica? La  web  semán6ca  se  basa  en  la  idea   de  añadir  metadatos  semán6cos  y   ontológicos  a  la  web.  Esas   informaciones  adicionales  se  deben   proporcionar  de  manera  formal,   para  que  así  sea  posible  evaluarlas   automá6camente  por  máquinas  de   procesamiento.  Wikipedia   {
10. d   ¿qué es la web semántica? La  web  semán6ca  se  basa  en  la  idea   de  añadir  metadatos  semán6cos  y   ontológicos  a  la  web.  Esas   informaciones  adicionales  se  deben   proporcionar  de  manera  formal,   para  que  así  sea  posible  evaluarlas   automá6camente  por  máquinas  de   procesamiento.  Wikipedia   Metadatos  sobre  Metadatos     Datos acerca de estructura y contenido de los documentos de la web, sean texto, imágenes, videos, audio, etc. Los metadatos describen y enriquecen semánticamente los datos, pues hacen más fácil su interpretación, así como la del contexto al que pertenecen.   {
11. d   los nuevos elementos de html5 definen y facilitan los metadatos. “
12. ¿cuáles son los nuevos elementos?
13. ¿cuáles son los nuevos elementos? { •   ar6cle   •   aside   •   audio   •   canvas   •   command   •   datagrid   •   datalist   •   datatemplate   •   embed   •   event-­‐source   •   figure   •   footer   •   header   •   mark   •   meter   •   nav   •   nest   •   output   •   progress   •   source   •   6me   •   video  
14. <6me>   <p>Escribo esto el <time datetime="2009-03-17T17:35:00-05:00“> 17 de Marzo, 5:35PM </time> </p> <meter>   <p>Su calificación fue de <meter value="88.7" min="0" max="100"> 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="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.mp4" type="video/mp4"> </ video>
17. <div id=“header”> <div id=“nav”> d   <div class=“article”> <div class=“section”> <div id= “sidebar”> <div id=“footer”> html 4.01 / xhtml 1
18. <header> <nav> d   <article> <section> <aside> <footer> html 5 <div id=“header”> <div id=“nav”> d   <div class=“article”> <div class=“section”> <div id= “sidebar”> <div id=“footer”> html 4.01 / xhtml 1
20. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5</title> <link href="style.css" rel="stylesheet" type="text/css"> </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> </html> divless  
21. ¿está html5 listo ahora?
22. hYp://ishtml5readyyet.com/  
23. ¿cuándo puedo comenzar a utilizarlo… realmente?
24. ¿cuándo puedo comenzar a utilizarlo… realmente? { •   Cuando  se  alcance  un  amplio   soporte  de  los  navegadores     •   Cuando  las  nuevas  e6quetas   realmente  tengan  peso  para  los   buscadores  
25. mientras tanto…
26. mientras tanto… { •   Aprovechar  las  e6quetas  existentes   en  [X]HTML  actual   •   Agregar  folksonomias   •   U6lizar  componentes  existentes:   XML,  RDF,  OWL  y  microformatos   •   Brindar  y  hacer  uso  webservices   para  ganar  interoperabilidad  
27. y en el mejor de los casos…
28. y en el mejor de los casos… posh   Plain  Old  Seman,c  HTML  
29. ;-)
30. bibliografía y recursos WHATWG  Community  hYp://www.whatwg.org/   HTML  5  differences  from  HTML  4  hYp://www.w3.org/TR/2009/WD-­‐html5-­‐diff-­‐20090212/   HTML  5  Reference  hYp://www.w3schools.com/tags/html5.asp   A  preview  of  HTML  5  hYp://www.alistapart.com/ar6cles/previewoftml5   New  elements  in  HTML  5  hYp://www.ibm.com/developerworks/library/x-­‐html5/   Looking  into  HTML  5  hYp://christopherschmiY.com/2009/03/09/looking-­‐into-­‐html5/   La  web  semán6ca  hoy  hYp://www.wshoy.sidar.org   HTML5  Validator  hYp://html5.validator.nu/   A  web  developer  guide  to  HTML  5  hYp://dev.w3.org/html5/html-­‐author/   HTML  vs  XHTML  hYp://wiki.whatwg.org/wiki/HTML_vs._XHTML   Seman6cs  in  HTML  5  hYp://www.alistapart.com/ar6cles/seman6csinhtml5   Charla  sobre  Web  Semán6ca  de  la  Tana  Ligato  en  Barcamp  2007     hYp://www.slideshare.net/Tana/web-­‐seman6ca-­‐tana-­‐barcamp   HTML5,  XHTML2  and  the  future  of  the  web     hYp://www.digital-­‐web.com/ar6cles/html5_xhtml2_and_the_future_of_the_web/   Nuevos  6pos  de  enlaces  para  el  HTML5   hYp://www.anieto2k.com/2008/01/08/nuevos-­‐6pos-­‐de-­‐enlaces-­‐para-­‐el-­‐html5/   Web  semán6ca  y  sus  principales  caracterís6cas     hYp://www.maestrosdelweb.com/editorial/web-­‐seman6ca-­‐y-­‐sus-­‐principales-­‐caracteris6cas/        
31. ¡ gracias! Si  te  interesó  el  tema  y  no  te  dormiste:     email:  max@minimalart.org   twiYer:  @minimalart     web  personal:  minimalart.org