{"id":826,"date":"2012-10-31T15:09:48","date_gmt":"2012-10-31T15:09:48","guid":{"rendered":"http:\/\/www.alvantia.com\/vision-global-de-html5-2"},"modified":"2017-08-01T09:00:08","modified_gmt":"2017-08-01T08:00:08","slug":"vision-global-de-html5","status":"publish","type":"post","link":"https:\/\/www.alvantia.com\/en\/vision-global-de-html5\/","title":{"rendered":"Visi\u00f3n global de HTML5"},"content":{"rendered":"<p><strong>HTML5<\/strong> (HyperText Markup Language, versi\u00f3n 5) es la quinta revisi\u00f3n del principal lenguaje de construcci\u00f3n de p\u00e1ginas Web. Pero cuando hablamos de <strong>HTML5<\/strong> no solo hablamos del lenguaje sino de la infraestructura formada por <strong>HTM5\/CSS3<\/strong> y de las posibilidades ofrecidas por las nuevas <strong>APIs de JavaScript<\/strong>.<\/p>\n<p>El Symposium se estructur\u00f3 para intentar dar respuesta a la pregunta:\u00bfQu\u00e9 quieres Construir y c\u00f3mo?<!--more--><\/p>\n<p style=\"text-align: justify;\">La tarea de definir las especificaciones del nuevo lenguaje est\u00e1 siendo realizada por <strong>WHATWG<\/strong> y <strong>W3C<\/strong> y todav\u00eda no est\u00e1 cerrada aunque los navegadores de \u00faltima generaci\u00f3n ya lo est\u00e1n implementando, cada uno a su manera.<\/p>\n<p><a href=\"http:\/\/developers.whatwg.org\/\">http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/<\/a><br \/>\n<a href=\"http:\/\/developers.whatwg.org\/\">http:\/\/developers.whatwg.org\/<\/a><br \/>\n<a href=\"http:\/\/www.w3.org\/TR\/html5\/\">http:\/\/www.w3.org\/TR\/html5\/<\/a><\/p>\n<h4>\u00bfPor qu\u00e9 esta revisi\u00f3n tiene nombre propio y no es una revisi\u00f3n m\u00e1s del lenguaje?<\/h4>\n<p><img decoding=\"async\" class=\"mceWPmore mceItemNoResize\" title=\"M\u00e1s...\" src=\"https:\/\/www.alvantia.es\/blog\/wp-includes\/js\/tinymce\/plugins\/wordpress\/img\/trans.gif\" alt=\"\" \/><\/p>\n<p style=\"text-align: justify;\">La irrupci\u00f3n en el mercado de los nuevos dispositivos smartphone y tablets y la multitud de tama\u00f1os de pantalla y resoluciones han hecho que el viejo HTML quede obsoleto. Ha surgido con fuerza una nueva filosof\u00eda en la que prevalece que la p\u00e1gina se adapte lo mejor posible al navegador\/dispositivo frente a que se vea exactamente igual.<\/p>\n<p style=\"text-align: justify;\">En este escenario la especificaci\u00f3n de <strong>HTML5\/CSS3<\/strong> y los avances realizados en <strong>JavaScript<\/strong> est\u00e1n consiguiendo revolucionar el desarrollo de p\u00e1ginas web, hasta tal punto que dejan obsoletas y en desuso tecnolog\u00edas propietarias que hasta la fecha hab\u00edan sido referencia a la hora desarrollar webs como por ejemplo Flash.<\/p>\n<p style=\"text-align: justify;\">Centr\u00e1ndonos en las mejoras, queremos destacar las siguientes:<\/p>\n<ul style=\"text-align: justify;\">\n<li><strong>Nuevas etiquetas para mejorar la estructura sem\u00e1ntica de las p\u00e1ginas y de sus contenidos<\/strong>: header,\u00a0 footer,\u00a0 nav, article, aside, figure, mark, time, progress, figcaption, video, audio, canvas, etc.<\/li>\n<li><strong>Nuevos efectos visuales y animaciones (CSS3) :<\/strong> bordes redondeados, sombras, fondos degradados, gama de colores, bordes, fondos multiples, transiciones, mejoras en el tratamiento de las fuentes, etc.<\/li>\n<li><strong>Construcci\u00f3n y validaci\u00f3n de formularios:<\/strong>\n<ul>\n<li>Nuevos atributos (placeholder, pattern, required, list, datalist, multiple, autofocus, etc).<\/li>\n<li>Nuevos pseudoselectores (invalid, valid, required, optional, etc).<strong><br \/>\n<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul style=\"text-align: justify;\">\n<li><strong>Mejoras en los dibujos en 2D:<\/strong>\n<ul>\n<li>Canvas 2D: Dibujo de formas geom\u00e9tricas.<\/li>\n<li>SVG (Scalable Vector Graphics): Dibujo de gr\u00e1ficos vectoriales.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Mejoras en dibujos 3D:<\/strong> WebGL (Canvas 3D).<\/li>\n<li><strong>Reproducci\u00f3n de Audio:<\/strong> Permite la reproducci\u00f3n de ficheros de audio sin utilizar plugins adicionales, aunque el formato soportado depende del navegador que se utilice, por lo tanto es necesario que audio est\u00e9 disponible en varios formatos si queremos que funcione en todos los navegadores<\/li>\n<li><strong>Reproducci\u00f3n de V\u00eddeo:<\/strong> Permite la reproducci\u00f3n de ficheros de video. Al igual que para el caso de audio cada navegador da soporte a distintos formatos de almacenamiento y compresi\u00f3n.<\/li>\n<li><strong>Evoluci\u00f3n del almacenamiento de informaci\u00f3n en cliente (evoluci\u00f3n del las cookies): <\/strong>Permite almacenar informaci\u00f3n\u00a0 en el navegador de forma permanente:\n<ul>\n<li><strong>Web Storage:<\/strong>\u00a0 Almacena informaci\u00f3n con formato clave-valor.<\/li>\n<li><strong>Web SQL:<\/strong> Almacena informaci\u00f3n con la sem\u00e1ntica de SQLite.<\/li>\n<li><strong>IndexedDB:<\/strong> Almacenamiento de objetos al estilo de la BBDD NoSQL.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul style=\"text-align: justify;\">\n<li><strong>Posibilidad de manejar threads JavaScript <\/strong>(Web Workers).<\/li>\n<li><strong>Mejoras en la comunicaci\u00f3n cliente-servidor:<\/strong>\n<ul>\n<li><strong>Web Sockets: <\/strong>Facilita la comunicaci\u00f3n bidireccional con menor transmisi\u00f3n .de datos una vez establecido el canal.<\/li>\n<li><strong>Server Sent Events (SSE): <\/strong>Facilita la comunicaci\u00f3n bidireccional y los mensajes push del servidor al cliente.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Drag &amp; Drop de elementos web.<\/strong><\/li>\n<li><strong>Drag &amp; Drop de archivos desde el escritorio. <\/strong>Un ejemplo de esta funcionalidad la implementa gmail para adjuntar archivos.<\/li>\n<li><strong>Escritura en sistema de archivos desde JavaScript (FileSystem).<\/strong><\/li>\n<li><strong>Geolocalizaci\u00f3n.<\/strong><\/li>\n<li><strong>Manejo del historial de navegaci\u00f3n (History).<\/strong><\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Hay que tener en cuenta que no todos los navegadores soportan todas las mejoras que ofrecen <strong>HTML5<\/strong> y <strong>CCS3<\/strong>. Para ayudarnos en el desarrollo de la p\u00e1gina existen librer\u00edas que detectan si una caracter\u00edstica es soportada por el navegador (<strong>Modernizr<\/strong>) y otras que permiten simular el comportamiento en navegadores que no implementan dicha caracter\u00edstica (<strong>Polyfills<\/strong>).<\/p>\n<p style=\"text-align: justify;\"><strong>HTML5<\/strong> est\u00e1 siendo definiendo en la era de los dispositivos m\u00f3viles y por lo tanto se est\u00e1 adaptando a ellos. Con la ayuda de <strong>PhoneGap<\/strong> se pueden empaquetar como aplicaciones m\u00f3viles, aplicaciones\u00a0 hechas con <strong>HTML5<\/strong> y <strong>JavaScript<\/strong> y que pueden ser desplegadas en 7 plataformas distintas (iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada y Symbian). Estas aplicaciones m\u00f3viles desarrolladas con <strong>HTML5<\/strong> tienen como ventaja frente aplicaciones nativas que s\u00f3lo se desarrollan una vez y no hay que hacer una versi\u00f3n diferente para cada sistema operativo. La librer\u00eda <strong>Jquery Mobile<\/strong> permite interactuar con los dispositivos m\u00f3viles,\u00a0 capturando eventos propios de los m\u00f3viles (como la pulsaci\u00f3n y desplazamiento propio de los carruseles de fotograf\u00edas). Otras Librer\u00edas <strong>JavaScript<\/strong> permiten incluso interactuar con elementos como la c\u00e1mara.<\/p>\n<p style=\"text-align: justify;\">Por todos estos aspectos podemos considerar<strong> HTML5<\/strong> como la mejor opci\u00f3n para iniciar un nuevo desarrollo web, ya que facilita el desarrollo y ampl\u00eda las posibilidades al alcance del desarrollador.<\/p>\n<p style=\"text-align: justify;\"><em>Imagen por w3.org<\/em><\/p>\n<div class=\"clearfix\"><\/div>","protected":false},"excerpt":{"rendered":"<p>HTML5 (HyperText Markup Language, versi\u00f3n 5) es la quinta revisi\u00f3n del principal lenguaje de construcci\u00f3n de p\u00e1ginas Web. Pero cuando hablamos de HTML5 no solo hablamos del lenguaje sino de la infraestructura formada por HTM5\/CSS3 y de las posibilidades ofrecidas por las nuevas APIs de JavaScript. El Symposium se estructur\u00f3 para intentar dar respuesta a<\/p>\n<p class=\"cv-read-more-button\"><a class=\"cv-button button is-standard color-accent has-icon icon-after\" href=\"https:\/\/www.alvantia.com\/en\/vision-global-de-html5\/\">Continue Reading<i class=\"button-icon icon-right-open-big\"><\/i><\/a><\/p>\n","protected":false},"author":2,"featured_media":971,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[206,4],"tags":[159,59,160,161,162,163],"class_list":["post-826","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia-en","category-uncategorized-en","tag-css3-en","tag-dispositivos-moviles-en","tag-html5-en","tag-javascript-en","tag-jquery-en","tag-w3c-en","not-single"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/posts\/826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/comments?post=826"}],"version-history":[{"count":5,"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/posts\/826\/revisions"}],"predecessor-version":[{"id":1628,"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/posts\/826\/revisions\/1628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/media\/971"}],"wp:attachment":[{"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/media?parent=826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/categories?post=826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alvantia.com\/en\/wp-json\/wp\/v2\/tags?post=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}