Your SlideShare is downloading. ×
HTML5 por Gustavo Vilchez
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 por Gustavo Vilchez

264
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
264
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 y el Futuro de la Web Gustavo Christian Vilchez MallquiSites.google.com/site/tavovilchezmallqui
  • 2. Qué es HTML5? Estándar abierto y accesible Elementos nuevos Web Semántica API’s de desarrollo Retrocompatible Nueva filosofía de trabajo Impulsado por los grandes y pequeños
  • 3. Qué es HTML5?
  • 4. Trabaja sobre… Firefox 3.5+ Chrome 3.0+ Safari 3.1+ Pero siempre es importante hacer Opera 10.5+ pruebas de validación IE 9.0+ dicen… http://html5test.com/ iPhone iPod Touch iPad Android OS
  • 5. Tipo de Documento Tipo de Documento <!DOCTYPE html> Lenguaje del Documento <html lang="ES"> Codificación del Documento <meta charset="UTF-8"> Enlaces a CSS, Favicon y RSS <link rel="stylesheet" href="estilos.css"> <script src=jquery.js></script>
  • 6. Estructura Mínima de un Documento <!DOCTYPE html> <html lang="ES"> <head> <title>Este es un ejemplo de HTML5</title> <meta charset="UTF-8"> <link rel="stylesheet" href="estilo.css"> </head> <body> Este es el cuerpo de la página, donde irá todo el contenido. </body> </html>
  • 7. Estructura Semántica
  • 8. Antes
  • 9. Ahora
  • 10. Elementos Semánticos<header> El elemento header debe utilizarse para marcar la cabecerade una página (contiene el logotipo del sitio, una imagen, un cuadro debúsqueda etc).El elemento header puede estar anidado en otras secciones de la página(es decir que no solo se utiliza para la cabecera de la página).<nav> El elemento nav representa una parte de una página que enlazaa otras páginas o partes dentro de la página. Es una sección con enlacesde navegación.No todos los grupos de enlaces en una página deben ser agrupados enun elemento nav. únicamente las secciones que consisten en bloques denavegación más importantes son adecuados para el elemento denavegación.
  • 11. Elementos Semánticos<section> El elemento section representa un documento genérico o dela sección de aplicación. Una sección, en este contexto, es unaagrupación temática de los contenidos. Puede ser un capítulo, unasección de un capítulo o básicamente cualquier cosa que incluya supropio encabezado.Una página de inicio de un sitio Web puede ser dividida en seccionespara una introducción, noticias, información de contacto etc.<footer> El elemento footer se utiliza para indicar el pié de la página ode una sección. Un pie de página contiene información general acerca desu sección el autor, enlaces a documentos relacionados, datos dederechos de autor etc.
  • 12. Elementos Semánticos<aside> El elemento aside representa una nota, un consejo, unaexplicación. Esta área son representados a menudo como barraslaterales en la revistas impresa.El elemento puede ser utilizado para efectos de atracción, como lascomillas tipográficas o barras laterales, para la publicidad, por grupos deelementos de navegación, y por otro contenido que se considera porseparado del contenido principal de la página.<article> El elemento article representa una entrada independiente enun blog, revista, periódico etc.Cuando se anidan los elementos article, los artículos internos estánrelacionados con el contenido del artículo exterior. Por ejemplo, unaentrada de blog en un sitio que acepta comentarios, el elemento articleprincipal agrupa el artículo propiamente dicho y otro bloque articleanidado con los comentarios de los usuario.
  • 13. Distribución Semántica SECTION HEADER NAVNAV ARTICLE ARTICLE VIDEO FIGURE FIGURE HEADER ASIDE SECTION FOOTER
  • 14. Controles de Formularios
  • 15. Nuevos Controles de Formularios - Input  Telephone  Url  Email  Password  Datetime  Date  Month  Week  Number  Range  Color
  • 16. Nuevos Controles de FormulariosPuedes ver una relación oficial del borrador del estándar en: http://dev.w3.org/html5/spec/ www.whatwg.org/specs/web-apps/current- work/multipage/
  • 17. Nuevos Controles de Formularios
  • 18. Nuevos Controles de Formularios
  • 19. Controles Editables
  • 20. Atributos de Controles Editables contenteditable Hace elementos HTML editable. Puede tener 3 valores: true, false é inherit. designmode Hace editable un documento completo elemento. Puede tomar 2 valores: ON ú OFF. designmode Habilita la corrección ortográfica. Funciona en Firefox y hay que descargar los diccionarios. Puede tomar 2 valores: True o False.
  • 21. Audio y Video
  • 22. Atributos de <video> autoplay Para que el video se reproduzca automáticamente. Puede tener valor TRUE o FALSE. controls Para que se muestre barra de control debajo del video. height Altura del video. width Ancho del video. loop El video se reproduce de manera repetitiva. poster Imagen si el video no está disponible. preload Controla si el video es precargado. Puede tener 3 valores: none, metadata ó auto. src Indica la url del video.
  • 23. Formato de <video> IMPORTANTE A la fecha los navegadores comerciales sólo soportan el formato de video Vorbis OGG y MP4.
  • 24. Formato de <video> - Antes<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425"height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <paramname="allowscriptaccess" value="always" /> <param name="src"value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <paramname="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344"src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
  • 25. Formato de <video> - AhoraCON HTML5<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer></video>
  • 26. Frameworks para Videohttp://www.html5video.org/kaltura-html5/http://sublimevideo.net/
  • 27. Que más puedes hacer con HTML5http://www.thewildernessdowntown.com/http://www.jolicloud.com/producthttp://wordmark.it/http://www.phoboslab.org/ztype/http://www.nikebetterworld.com/http://www.klowdz.com/http://www.effectgames.com/demos/canvascycle/Y muchas cosas más…..te animas???
  • 28. Algunos editores HTML5ALOHADREAMWEAVER CS5MAQETTAMACFLUXBLUEGRIFFONZEN….y otros más…