{"id":3674,"date":"2014-11-10T09:00:39","date_gmt":"2014-11-10T08:00:39","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=3674"},"modified":"2014-10-19T13:27:21","modified_gmt":"2014-10-19T11:27:21","slug":"html5-introduccion","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2014\/11\/10\/html5-introduccion\/","title":{"rendered":"HTML5: introducci\u00f3n"},"content":{"rendered":"<p>[kml_flashembed movie=&#8221;http:\/\/www.youtube.com\/v\/DdXBcoaFPro&#8221; width=&#8221;560&#8243; height=&#8221;315&#8243; wmode=&#8221;transparent&#8221; \/]<\/p>\n<p>Transcripci\u00f3n:<\/p>\n<p>Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a ayudar con tus primeros pasos con el lenguaje de etiquetado HTML5.<\/p>\n<p>En el v\u00eddeo \u201cHistoria de HTML\u201d, te expliqu\u00e9 la evoluci\u00f3n del lenguaje de marcado o etiquetado HTML, el lenguaje con el que se crean las p\u00e1ginas web desde que Tim Berners-Lee cre\u00f3 la primera p\u00e1gina web a finales de 1990 en el CERN.<\/p>\n<p>Recuerda que despu\u00e9s de HTML4, el W3C, el organismo que desarrolla los est\u00e1ndares de la Web inici\u00f3 el desarrollo de XHTML. Sin embargo, unos a\u00f1os despu\u00e9s, el W3C cancel\u00f3 el desarroll\u00f3 de XHTML y se uni\u00f3 a un grupo independiente de desarrolladores web con el objetivo de desarrollar HTML5.<\/p>\n<p>Mucha gente tiene una gran confusi\u00f3n con HTML5, se piensa que es algo totalmente distinto a HTML4 y XHTML. Y no es as\u00ed.<\/p>\n<p>Fij\u00e9monos en este gr\u00e1fico: cada rect\u00e1ngulo representa una etiqueta de HTML 4.<\/p>\n<p>En HTML5, algunas de las etiquetas han desaparecido porque se han quedado viejas y ya no se deben emplear.<\/p>\n<p>Otras etiquetas han variado un poco su funcionamiento o incluyen atributos nuevos.<\/p>\n<p>Y por \u00faltimo, se han a\u00f1adido etiquetas y atributos nuevos. Pero como podemos ver, la mayor parte de HTML5 sigue siendo lo mismo que ya exist\u00eda en HTML4.<\/p>\n<p>Por ejemplo, si consultamos una referencia de las etiquetas de HTML5, como \u00e9sta que existe en W3Schools, veremos que hay etiquetas como frame, frameset o noframes que aparecen marcadas como \u201cno soportadas en HTML5\u201d, ya no se deben emplear.<\/p>\n<p>Tambi\u00e9n hay etiquetas como header, keygen, main, mark, menuitem, meter y nav que aparecen marcadas como etiquetas nuevas de HTML5.<\/p>\n<p>En el momento de grabar este v\u00eddeo, HTML5 todav\u00eda sigue en desarrollo.<\/p>\n<p>La \u00faltima versi\u00f3n publicada tiene fecha del 16 de septiembre de 2014 y posee el estado de \u201crecomendaci\u00f3n propuesta\u201d, lo que significa que es ya casi la versi\u00f3n final.<\/p>\n<p>\u00bfCu\u00e1ndo se espera que est\u00e9 terminado HTML5?<\/p>\n<p>El W3C tiene publicado un plan u hoja de ruta en el que se explica el proceso de estandarizaci\u00f3n de HTML5. Seg\u00fan este plan, se espera que HTML5 adopte el estado de recomendaci\u00f3n durante el \u00faltimo cuatrimestre del a\u00f1o 2014.<\/p>\n<p>El W3C no para, y aunque no est\u00e9 finalizado HTML5, ya est\u00e1 trabajando en la pr\u00f3xima versi\u00f3n, la versi\u00f3n 5.1.<\/p>\n<p>HTML 5.0 ser\u00e1 una especificaci\u00f3n oficial a finales del a\u00f1o 2014, y la versi\u00f3n 5.1 a finales del a\u00f1o 2016.<\/p>\n<p>Aunque todav\u00eda no est\u00e9 terminada su especificaci\u00f3n, ya puedes empezar a usar HTML5, aunque con mucho cuidado.<\/p>\n<p>\u00bfPor qu\u00e9 con cuidado?<\/p>\n<p>Porque no todos los navegadores admiten las nuevas caracter\u00edsticas de HTML5.<\/p>\n<p>Existen varios sitios web en los que se puede comprobar la compatibilidad de los navegadores con HTML5.<\/p>\n<p>Por ejemplo, en HTML5Test, el test indica que la versi\u00f3n 37 de Google Chrome, la \u00faltima versi\u00f3n en el momento de grabar este v\u00eddeo, obtiene 512 puntos de compatibilidad de un m\u00e1ximo de 555 puntos, lo cual est\u00e1 muy bien.<\/p>\n<p>Sin embargo, Internet Explorer 11 obtiene un pobre resultado, s\u00f3lo 365 puntos del m\u00e1ximo de 555, un resultado muy muy muy malo.<\/p>\n<p>En HTML5Test tambi\u00e9n es posible encontrar una comparativa de distintos navegadores.<\/p>\n<p>Tambi\u00e9n existe el sitio web Can I use?, en el que se puede consultar la compatibilidad de las novedades de HTML5 y CSS3 con los distintos navegadores.<\/p>\n<p>Por ejemplo, el nuevo control input type date tiene como prop\u00f3sito visualizar un calendario para que el usuario pueda seleccionar una fecha.<\/p>\n<p>Seg\u00fan Can I use?, este control s\u00f3lo se puede emplear en Google Chrome y Opera, pero no funciona en Internet Explorer, Firefox y Safari. Me estoy refiriendo a las versiones de estos navegadores de escritorio, de ordenador.<\/p>\n<p>\u00bfLo podemos verificar?<\/p>\n<p>S\u00ed, por ejemplo en el sitio web \u201cThe Current State of HTML5 Forms\u201d podemos verificar el funcionamiento de los nuevos controles de los formularios.<\/p>\n<p>Efectivamente, el control de tipo date se visualiza correctamente en Google Chrome, pero en Mozilla Firefox se visualiza simplemente como un cuadro de texto, igual que en Internet Explorer.<\/p>\n<p>Para empezar a aprender HTML5 puedes consultar documentaci\u00f3n sobre HTML5 o sobre las versiones anteriores de HTML 4 o XHTML 1. Te conviene conocerlas todas, y las diferencias que hay entre unas y otras, porque ah\u00ed fuera, en Internet, te vas a encontrar de todo. Para ser un buen profesional del desarrollo web necesitas conocer las tres versiones.<\/p>\n<p>De todo ello te hablo en el v\u00eddeo \u201c\u00bfCu\u00e1l es el mejor: HTML, XHTML, HTML5?\u201d.<\/p>\n<p>Una vez que ya conozcas las versiones anteriores de HTML, ya puedes pasar a aprender HTML5. Existen muy buenos recursos para ello.<\/p>\n<p>El primero que te recomiendo es \u201cDive into HTML5\u201d, de Mark Pilgrim. Este sitio web se comenz\u00f3 a desarrollar en el a\u00f1o 2009 y no se actualiza desde el 2011, pero en HTML5Doctor existe una copia que s\u00ed que se intenta actualizar con las \u00faltimas novedades del lenguaje.<\/p>\n<p>Tambi\u00e9n te recomiendo que consultes el sitio web W3Schools, que contiene tanto un tutorial como una referencia de todas las etiquetas de HTML5.<\/p>\n<p>Y por supuesto, tambi\u00e9n puedes consultar el resto de v\u00eddeos del curso iDESWEB.<\/p>\n<p>Ya para terminar, me gustar\u00eda recordarte algunos de los sitios web en los que puedes encontrar m\u00e1s informaci\u00f3n sobre m\u00ed y sobre mi trabajo, y dos formas de contactar conmigo, a trav\u00e9s de mi correo electr\u00f3nico sergio.lujan@ua.es y a trav\u00e9s de mi cuenta en Twitter @sergiolujanmora.<\/p>\n<p>Recuerda que este v\u00eddeo forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d que est\u00e1 disponible en la direcci\u00f3n idesweb.es.<\/p>\n<p>Muchas gracias por tu atenci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[kml_flashembed movie=&#8221;http:\/\/www.youtube.com\/v\/DdXBcoaFPro&#8221; width=&#8221;560&#8243; height=&#8221;315&#8243; wmode=&#8221;transparent&#8221; \/] Transcripci\u00f3n: Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a ayudar con tus primeros &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/blogs.ua.es\/pi\/2014\/11\/10\/html5-introduccion\/\"> <span class=\"screen-reader-text\">HTML5: introducci\u00f3n<\/span> Leer M\u00e1s  &raquo;<\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[26926,160020,411],"class_list":["post-3674","post","type-post","status-publish","format-standard","hentry","category-general","tag-html5","tag-idesweb","tag-video"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/comments?post=3674"}],"version-history":[{"count":1,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3674\/revisions"}],"predecessor-version":[{"id":3675,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3674\/revisions\/3675"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=3674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=3674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=3674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}