HTML 5 - Clase 3. Universidad Nacional de Quilmes

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HTML 5 - Clase 3. Universidad Nacional de Quilmes"

Soledad Castillo Barbero
hace 7 años
Vistas:

1 HTML 5 - Clase 3 Universidad Nacional de Quilmes 1

2 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

3 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

4 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

5 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 <html>: Código : <!DOCTYPE html> 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

6 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

7 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

8 Elementos Nueva semántica de elementos <header>: Define la sección cabecera de la página <footer>: Define la sección pie de la página <article>: Define un artículo dentro del documento <section>: Define una sección dentro del documento <aside>: Define una sección en uno de los lados del documento. 8

9 Ejemplo 1 <!DOCTYPE html> <html> <body> <section> <h1>wwf</h1> <p>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.</p> </section> <section> <h1>wwf's Panda symbol</h1> <p>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.</p> </section> </body> </html> 9

10 Ejemplo 1 10

11 Ejemplo 2 Analicemos cómo es ésta página <!DOCTYPE html> <html lang="en"> <title>html5</title> <meta charset="utf-8"> <body> <header> <h1>monday Times</h1> </header> <nav> <ul> <li>news</li> <li>sports</li> <li>weather</li> </ul> </nav> <section> <h2>news Section</h2> <article> <h2>news Article</h2> <p>ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </article> <article> <h2>news Article</h2> <p>ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </article> </section> <footer> <p> 2014 Monday Times. All rights reserved.</p> </footer> </body> </html> 11

12 Ejemplo 2 - Resultado 12

13 Ejemplo 2 Cómo logramos que se vea de esa manera? 13

14 Estilos - Analicemos de nuevo el ejemplo <style> 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; } </style> 14

15 Ahora sí! Tenemos el ejemplo completo 15

16 Más... Elementos 16

17 17

18 Elementos de multimedia <!DOCTYPE html> <html> <body> <video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <p> Video courtesy of <a href=" target="_blank">big Buck Bunny</a>. </p> </body> </html> 18

19 Elementos de multimedia 19

20 Elementos multimedia: Audio <!DOCTYPE html> <html> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio> </body> </html> 20

21 Script Javascript hace que las páginas html sean más dinámicas e interactivas. <!DOCTYPE html> <html> <body> <p id="demo">hi.</p> <script> document.getelementbyid("demo").innerhtml = "Hello World!"; </script> </body> </html> 21

22 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

23 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) 23

24 Script- API Què visualizamos? <!DOCTYPE html> <html> <head> <script src=" <script> var map; function initmap() { map = new google.maps.map(document.getelementbyid('map'), { center: {lat: , lng: }, zoom: 17 }); } google.maps.event.adddomlistener(window, 'load', initmap); </script> </head> <body> <div id="map" style="width:500px;height:380px;"></div> </body> </html> 24

25 Qué se visualiza en ésta página? <!DOCTYPE html> <html> <body> <p id="demo">hello World!</p> <script> document.getelementbyid("demo").style.fontsize = "40px"; </script> </body> </html> 25

26 HTML + Estilos Quién se anima? 26

27 Bibliografía Manual de HTML5 en español. Alejandro Castillo Cantón e_html5_en_espanol.pdf

Documentos relacionados

HTML 5 - Clase 3. Universidad Nacional de Quilmes

HTML 5 - Clase 3. Universidad Nacional de Quilmes 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