HTML 5 - Clase 3

Universidad Nacional de Quilmes

1

¿Qué es HTML5? Es la nueva versión del lenguaje de marcado que se usa para estructurar páginas web. Este proyecto de HTML5 se inició a finales de 2003 con un grupo de trabajo que se propuso a hacer un lenguaje que llegara con un conjunto de tecnologías que permiten construir la nueva Web. No fue sino hasta 2007 que el HTML5 del W3C acepta la visión mediante la incorporación en ella del grupo de trabajo. Los principios de diseño son claros: para simplificar el uso de HTML, la formalización de las prácticas actuales, y garantizar la máxima compatibilidad con versiones anteriores.

2

¿Porqué es mejor HTML 5? ✓ Al ser el código más sencillo y simplificado, cargan más rápido las páginas en el navegador. ✓ Las páginas y los elementos que contienen, se ven perfectamente en todos los navegadores. ✓ Los plugins, widgets y botones que ofrecen los desarrolladores de las redes como Facebook, Twitter y otras, escritos en HTML 5 funcionan excelentemente, con más opciones que los clásicos en XHTML o que los iframes. 3

¿Porqué es mejor HTML 5? ✓ Es posible insertar directamente videos en las páginas sin tener que acudir a los iframes o usar la etiqueta object. ✓ HTML 5 incluye etiquetas orientadas principalmente a los buscadores, para facilitarles comprender el contenido de las páginas, lo que nos beneficia, por ejemplo: header, footer, article, nav, etc. ✓ Permite la Geolocalizacion del usuario. ✓ Otras de las razones es el empleo del microformato en las páginas web, que algunos son totalmente incompatibles con otros lenguajes por lo que no validan correctamente a no ser que se use HTML5. 4

Nuevas etiquetas de HTML 5 Todo el código HTML normal seguirá funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que hay que hacer es colocar este DOCTYPE antes de la etiqueta : Código :

Esta sección se ubica en la primera línea del archivo HTML, es decir antes de la marca html. Es importante agregar el DOCTYPE, de esta forma el navegador puede saber que estamos utilizando la especificación del HTML 5. 5

Mejor estructura Eliminando DIV innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web. 6

Infografías HTML 5

¿Por qué a tu cerebro le gustan las infografías? Las infografías interactivas le permiten ir más allá y se pueden crear usando HTML5 y JavaScript

7

Elementos Nueva semántica de elementos : Define la sección cabecera de la página : Define la sección pie de la página : Define un artículo dentro del documento : Define una sección dentro del documento : Define una sección en uno de los lados del documento.

8

Ejemplo 1 WWF The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. WWF's Panda symbol The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

9

Ejemplo 1

10

Ejemplo 2 Analicemos cómo es ésta página HTML5 Monday Times News Sports Weather News Section News Article Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.

News Article Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum. © 2014 Monday Times. All rights reserved.

11

Ejemplo 2 - Resultado

12

Ejemplo 2

¿ Cómo logramos que se vea de esa manera?

13

Estilos - Analicemos de nuevo el ejemplo body { font-family:Verdana,sans-serif;font-size:0. 8em; } header,footer,section,article { border:1px solid grey; margin:5px;margin-bottom:15px;padding:8 px; background-color:white; }

header,footer { color:white;background-color:#444;margin -bottom:5px; } section { background-color:#ddd; } nav ul { margin:0;padding:0; } nav ul li { display:inline; margin:5px; } 14

Ahora sí! Tenemos el ejemplo completo

15

Más …... Elementos

16

17

Elementos de multimedia Your browser does not support HTML5 video. Video courtesy of Big Buck Bunny. 18

Elementos de multimedia

19

Elementos multimedia: Audio

20

Script Javascript hace que las páginas html sean más dinámicas e interactivas. Hi. document.getElementById("demo").innerHTML = "Hello World!"; 21

APIs La interfaz de programación de aplicaciones, abreviada como API (del inglés: Application Programming Interface), es el conjunto de subrutinas, funciones y procedimientos (o métodos, en la programación orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción.

22

APIs La parte más interesante de HTML5 son los APIs Javascript, más que el HTML en sí Los nuevos APIs abren la puerta a cosas hasta ahora imposibles en la web (sin usar plugins) Gráficos 2D/3D Acceso al hardware: micrófono/cámara, GPS, estado de la batería,... Conectividad bidireccional en tiempo real ... Además de los estándares (W3C), otras organizaciones desarrollan nuevos APIs (p.ej. Mozilla) https://wiki.mozilla.org/WebAPI 23

Script- API ¿Què visualizamos? var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.7070268, lng: -58.2781783}, zoom: 17 }); } google.maps.event.addDomListener(window, 'load', initMap); 24

¿Qué se visualiza en ésta página? Hello World! document.getElementById("demo").style.fontSize = "40px"; 25

HTML + Estilos ¿ Quién se anima ?

26

Bibliografía Manual de HTML5 en español. Alejandro Castillo Cantón http://wiki.fundabit.gob.ve/Descargas/manuales/Manuales-de-soporte/Manual_d e_html5_en_espanol.pdf http://www.tutosytips.com/dia-1-introduccion-a-html5/ http://www.htmlya.com.ar/html5/ http://www.cristalab.com/tutoriales/introduccion-a-html5-c92171l/ https://norfipc.com/web/como-usar-html5-codigo-paginas-web-ventajas.html

27