Juan Gayá Vilar. Producción y Dirección Multimedia. 4t CAV

Transcripción

1 HTML 5 Juan Gayá Vilar Producción y Dirección Multimedia 4t CAV 1

2 Indice Página 1: Portada Página 2: Índice Página 3: Introducción HTML5 Página 4: Nuevas etiquetas y elementos: <section< Página 5: Nuevas etiquetas y elementos: <section> Página 6: Nuevas etiquetas y elementos: <nav> Página 7: Nuevas etiquetas y elementos: <aside> Página 8: Nuevas etiquetas y elementos: <article> Página 9: Nuevas etiquetas y elementos: <header>, <embed>, <audio> y <video> Página 10: Nuevas etiquetas y elementos: <audio> y <video> Página 11: Nuevas etiquetas y elementos: <canvas>, Novedades generales de HTML5 Página 12: Novedades generales de HTML5 2

3 HTML 5 Introducción El HTML5 (HyperTextMarckupLanguage, version5) es una nueva versión del lenguaje de la World Wide Web. Establece una serie de nuevos elementos y atributos que hoy en día están empleando las páginas web más modernas. La principal función es corregir los problemas con los que se han ido encontrando los usuarios durante los últimos años y rediseñar el código actualizándolo a las nuevas necesidades que demanda la web hoy en día. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml). 1 2 Esta es la primera vez que HTML y XHTML se han desarrollado a la vez. Este nuevo lenguaje se encuentra en periodo de prueba, aunque aún así muchos empresarios ya están empezando a introducir en sus páginas web esta nueva versión del código, debido a las grandes mejoras y avances que ofrece. Por este motivo se recomienda actualizar los navegadores a la versión más actual para poder disfrutar de todo su potencial. En este trabajo he decidido centrarme principalmente en las nuevas etiquetas que propone este nuevo lenguaje, y en los ajustes que han hecho en algunas que ya existían. El principal motivo es que el apartado de las etiquetas me ha parecido el más interesante y considero que es el que me puede aportar más cosas para mi proyecto final de carrera Ahora bien también incluiré al final brevemente el resto de novedades. 3

4 Nuevas etiquetas y elementos HTML5 introduce una serie de nuevos elementos y atributos que reflejan el uso típico en los sitios web modernos. Algunos de ellos son sustitutos para los usos comunes del bloque genérico (<div>) y elementos en línea (<span>). Algunos ejemplos son : <section></section>: En las versiones anteriores los elementos se dividían en dos categorías: inline y block. En la nueva especificación del lenguaje, se usa una jerarquía mucho más amplia dividiéndose estos en un mayor número de categorías. El elemento section representa una sección genérica de un documento o aplicación. En este contexto, es una agrupación temática del contenido, típicamente con un encabezado. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy favorable para el buen posicionamiento web. Por ejemplo un documento HTML utilizando los elementos h1 a h6: <h1>grupo1</h1> <h2>integrantes</h2> <p>sigue todos los posts de nuestros integrantes en Grupo1</p> <h3>javier Jimenez</h3> <p>ingeniero industrial</p> <h3>jorge Torres</h3> <p>ingeniero Técnico</p> <h3>carlos Gonzalez</h3> <p>ingeniero Aeronáutico</p> <small>los integrantes son hombres </small> 4

5 Esto genera la siguiente esquema: Grupo 1 _ Integrantes _ Javier Jiménez _ Jorge Torres _ Carlos González Esto funciona bien, todo contenido que aparece después de un elemento hx está asociado a dicho elemento. Pero, que pasa con el elemento small?. Debe ser asociado con todo el documento, pero el navegador no tiene forma de saber eso. No existe una manera de definir que el elemento small debe asociarse al documento completo y no al encabezado Carlos Gonzalez. El nuevo contenido de sección de HTML5 ofrece la posibilidad explícita de marcar donde empieza y donde acaba un contenido específico: <h1>grupo1</h1> <section> <h2>editores</h2> <p>sigue todos los posts de nuestros integrantes del grupo1</p> <h3>javier Jimenez</h3> <p>ingeniero industrila</p> <h3>jorge Torres</h3> <p>ingeniero técnico p> <h3>carlos González</h3> <p>ingeniero aeronáutico</p> </section> <small>los integrantes son hombres</small> 5

6 Dentro de los modelos de contenido también cabe destacar el elemento hgroup que sirve para las ocasiones en las que se pretende utilizar un elemento de título o cabecera pero sin que altere el esquema del documento <hgroup> <h1>grupo1</h1> <h2>ingeniero industrial</h2> </hgroup> En este caso el h2 es un slogan del primer h1 y no se tiene en cuenta para el esquema del documento. Dentro de un elemento hgroup, solo el primer encabezado contribuye a construir el esquema del documento y no tiene por qué ser necesariamente un h1 puede ser cualquier otro nivel. En conclusión los cambios introducidos por la nueva especificación del lenguaje proveen a los diseñadores y diseñadoras de una poderosa herramienta con la que comenzar a escribir documentos web más lógicos y semánticos. Se creado una herramienta con la que se podra crear contenido de calidad y mejorar la forma en la que escribimos y entendemos la web. <nav></nav> : El elemento nav permite definir un elemento de navegación de la página web, como puede ser el menú principal o el menú. Representa una sección de una página que es un link a otras páginas o a partes dentro de la página: una sección con links de navegación. No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten en bloques principales de la navegación son apropiadas para ser utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>. 6

7 Un ejemplo de uso de esta etiqueta es: <nav> <ul> <li><a href="/accesibilidad/">accesibilidad</a></li> <li><a href="/html/">html</a></li> <li><a href="/javascript/">javascript</a></li> <li><a href="/css/">css</a></li> </ul> </nav> Las principales ventajas que ofrece este elemento son que: Permite identificar de una forma clara los elementos de navegación que tiene una página web, por lo que las tecnologías de apoyo como los lectores de pantalla lo pueden detectar y ofrecer al usuario cuando lo necesite. Proporciona un método explícito de especificar cuáles son los elementos de navegación de un sitio web y de una página web. Un lector de pantalla puede tener un comando (atajo de teclado) para acceder directamente a los elementos de navegación de una página, igual que tiene un comando para mostrar la lista de enlaces o la lista de encabezados de una página. Un agente de usuario en un dispositivo con una pantalla pequeña (por ejemplo, un teléfono), puede mostrar los elementos de navegación de forma independiente o cuando el usuario pulse una tecla del dispositivo. El elemento <nav> puede funcionar como un <div> a todos los efectos. Ya no es necesario escribir <div id="menu"> o <div id="navigation">. <nav> tiene 3 letras como<div>, así que no se puede decir que haya que escribir más. <aside></aside>: Representa una sección de la página que abarca un contenido relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se 7

8 considere separado del contenido principal de la página. Un ejemplo del empleo de esta etiqueta sería la siguiente caja de publicidad: <aside style="background: #DEDEDE; color:steelblue; float:right; width:220px; padding: 20px; border: 1px solid #CCCCCC"> <span style="font-weight:bold"> Necesitas una web?</span><br/> Nosotros te la diseñamos! </aside> <hgroup> <h1>diseño de formularios con CSS y HTML</h1> <h2>artículo creado el 9/05/07</h2> </hgroup> <p>en este artículo, veremos la variedad de caminos con los cuales podemos hacer formularios atractivos para nuestros sitios y servicios web usando sencillamente CSS. Los formularios son parte importantes, pero poco elegantes, de muchos sitios. CSS hace más fácil la creación de formularios atractivos rápidamente, porque una vez que se ha desarrollado un diseño lo podemos reproducir en cada formulario del sitio.</p> <article></article>: El elemento de artículo representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido. Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artículos que en principio son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se podrían representar con <article>. Un ejemplo del empleo de esta etiqueta sería el siguiente: <article> <h3>netscape is dead</h3> <p><a href=" of support for Netscape web browsers</a>. AOL has a long history on the internet, being one of the first people online., perhaps the largest of which was the 1999 acquisition of Communications Corporation. Netscape was known to many as the thought leader in web browsing, and had developed a number of complementary pieces of software that allowed for a rich suite of internet tools.</p> </article> 8

9 <header></header>: El elemento header define la introducción de un documento o sección, normalmente mediante la inclusión de etiquetas de título (h1-h6 o el elemento hgroup). No obstante, también puede ser utilizada para delimitar la tabla de una sección de contenidos, un formulario de búsqueda o logos de cierta importancia. Un ejemplo del empleo de esta etiqueta sería el siguiente. <header> <h1>the most important heading on this page</h1> </header> <article> <header> <h1>title of this article</h1> </header> <p>...lorem Ipsum dolor set amet...</p> </article>.<embed>: Se emplea para contenido incrustado que necesita plugins como el Flash. Es un elemento que ya reconocen los navegadores, pero ahora al formar parte de un estándar, no habrá conflicto con <object>. <footer></footer>: El elemento <footer> representa el pié de una sección, con información acerca de la página/sección quepoco tiene que ver con el contenido de la página, como el autor, el copyright o el año. <audio> y <video>: Esta nueva etiqueta permitirá incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Es una de las novedades más importantes e interesantes en este HTML5, ya que permite reproducir y controlas vídeos y audio sin necesidad de plugins como el de Flash. El comportamiento de estos elementos multimedia será como el de cualquier elemento nativo, y permitirá insertar en un video, enlaces o imágenes. Además supone un ahorro de tiempo y de quebraderos de cabeza para el programador. 9

10 La manera antigua de reproducir un video con el HTML antiguo sería la siguiente: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " width="425" height="344" codebase=" ab#version=6,0,40,0"> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value=" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src=" allowscriptaccess="always" allowfullscreen="true"> </embed> </object> La forma de visualizar un video en una página web, actualmente es similar a la que muestro en este código. Pasa por el elemento <object /> que nos permite especificar otro <embed /> que nos permite incrustar una película flash en nuestro página. Semánticamente, estamos hablando de un objeto (<object />) embebido en la página (<embed />), pero no nos dice que se trata de un video ya que este código, sirve para incrustar juegos flash, galerías, etc, Con HTML5: <video width="640" height="360" src=" controls autobuffer> <p> Try this page in Safari 4! Or you can <a href=" the video</a> instead.</p> </video> Además de quedar más claro que este contenido es un contenido de formato video nos permite informar una alternativa a los usuarios que no estén visualizando la aplicación con un navegador con esta capacidad. Posibilitando descargar el video para que el usuario lo descargue y lo visualice con su reproductor predeterminado. <canvas>: Este es un elemento complejo que permite que se generen gráficos al hacer dibujos en su interior. Es utilizado en Google Maps y en un futuro permitirá a los desarrolladores crear aplicaciones muy interesantes. 10

11 Un ejemplo del empleo de esta etiqueta sería el siguiente: <canvas id="mycanvas"></canvas> <script type="text/javascript"> var canvas=document.getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); ctx.fillstyle='#ff0000'; ctx.fillrect(0,0,80,100); </script> Novedades generales del HTML5 Las principales novedades que aporta el huevo HTML 5 respecto al antiguo son: 1. Nuevas mejoras en los formularios: El principal elemento para la introducción de datos sigue siendo el input, pero tiene muchísimos más atributos y con muchos tipos de entradas. El principal atributo del sistema de entrada de datos es el type. Hasta ahora los valores más habituales eran hidden o text que básicamente eran textos alfanuméricos, pero ahora eso ha cambiado, y la lista de tipos es bastante grande, hay aproximadamente unos 25 que incorporan nuevos datos entre los que se incluyen (search, , password, date, number, color etc) 2. Nuevos visores: el MathMl (Aplicación XML que sirve para anotaciones matemáticas y para capturar su estructura y contenido. Su objetivo es integrar fórmulas matemáticas en la World Wide Web y en otros documentos.) El SVG (significa Scalable Vector Graphics y es un formato que permite realizar gráficos vectoriales escalables) 3. Novedades de la web semántica: Añade etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time( fecha del contenido), link rel= (tipo de contenido que se enlaza). Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualización, se orientan a buscadores. 11

12 4. Nuevos APIs: El api son el conjunto de protocolos y herramientas que permiten crear una aplicación de software. Un buen API hace que sea más fácil desarrollar un programa. Las principales innovaciones son: API para hacer Drag & Drop. Mediante eventos. API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local. API de Geoposicionamiento para dispositivos que lo soporten. API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL. WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C. WebWorkers. Hilos de ejecución en paralelo. ESTÁNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, Memoria, puertos USB, cámaras, micrófonos muy interesante pero con numerosas salvedades de seguridad. 12