O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Html5

76 visualizações

Publicada em

  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Html5

  1. 1. HTML5 y el Futuro de la WebMTA – ARIMAX – TP-LINK : Diego J. Coronel Y.diegocoronel12@gmail.com
  2. 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. 3. Qué es API´s?Explicar a un cliente qué es y para qué sirve un API, luego de advertirque su necesidad o requerimiento se soluciona con un servicio web,a través de esta tecnología.API(Interfaz de Programación de Aplicaciones), su definición formalle da poca información útil a alguien que no entiende mucho deinformática. Una API es una "llave de acceso" a funciones que nospermiten hacer uso de un servicio web provisto por un tercero, dentrode una aplicación web propia, de manera segura.Ejemplo:Facebook Connect cede a través del API ciertos datos para registrarautomáticamente usuarios en otros sitios web, dándoles laposibilidad de registrarse y loguearse con sus propias cuentas deFacebook
  4. 4. Qué es HTML5?
  5. 5. Que es CSS ?En esta lección aprenderás más cosas sobreCSS y qué puede hacer por ti.CSS es el acrónimo de Cascading StyleSheets es decir: hojas de estilo en cascada.
  6. 6. ¿Qué diferencia hay entre CSS y HTML?HTML se usa para estructurar el contenido; CSS se usa paraformatear el contenido previamente estructurado.
  7. 7. ¿Qué beneficios me ofrece CSS?CSS fue toda una revolución en el mundo del diseño web.Entre los beneficios concretos de CSS encontramos:control de la presentación de muchos documentos desde unaúnica hoja de estilo;control más preciso de la presentación;aplicación de diferentes presentaciones a diferentes tipos demedios (pantalla, impresión, etc.);numerosas técnicas avanzadas y sofisticadas.
  8. 8. Trabaja sobre… Firefox 3.5+ Chrome 3.0+ Safari 3.1+ Opera 10.5+ IE 9.0+ dicen… iPhone iPod Touch iPad Android OSPero siempre es importante hacerpruebas de validaciónhttp://html5test.com/
  9. 9. 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>
  10. 10. 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 elcontenido.</body></html>
  11. 11. Estructura Semántica
  12. 12. Antes
  13. 13. Ahora
  14. 14. 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.
  15. 15. 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 secciones parauna 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.
  16. 16. Elementos Semánticos<aside> El elemento aside representa una nota, un consejo, unaexplicación. Esta área son representados a menudo como barras lateralesen 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.
  17. 17. Distribución SemánticaHEADERHEADERNAVNAV ARTICLE ARTICLE VIDEOSECTIONSECTIONASIDEFOOTERFIGURE FIGURE
  18. 18. Controles de Formularios
  19. 19. Nuevos Controles de Formularios - Input Telephone Url Email Password Datetime Date Month Week Number Range Color
  20. 20. Nuevos Controles de FormulariosPuedes ver una relación oficial del borrador delestándar en:http://dev.w3.org/html5/spec/www.whatwg.org/specs/web-apps/current-work/multipage/
  21. 21. Nuevos Controles de Formularios
  22. 22. Controles Editables
  23. 23. Atributos de Controles Editables contenteditable Hace elementos HTML editable. Puede tener 3valores: 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 Firefoxy hay que descargar los diccionarios. Puede tomar 2 valores: True oFalse.
  24. 24. Audio y Video
  25. 25. Atributos de <video> autoplay Para que el video se reproduzca automáticamente. Puedetener valor TRUE o FALSE. controls Para que se muestre barra de control debajo del video. height Altura del video. widthAncho 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.
  26. 26. Formato de <video> IMPORTANTE A la fecha los navegadores comerciales sólosoportan el formato de video Vorbis OGG y MP4.
  27. 27. 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>
  28. 28. Formato de <video> - AhoraCON HTML5<video width="640" height="360"src="http://www.youtube.com/demo/google_main.mp4"controls autobuffer></video>
  29. 29. Frameworks para Videohttp://www.html5video.org/kaltura-html5/http://sublimevideo.net/
  30. 30. 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???
  31. 31. Algunos editores HTML5ALOHADREAMWEAVER CS5MAQETTAMACFLUXBLUEGRIFFONZEN….y otros más…
  32. 32. HTML5 y el Futuro de la Web

×