Html 5
•Descargar como PPTX, PDF•
0 recomendaciones•743 vistas
Este documento resume las principales características de HTML5, incluyendo nuevas etiquetas para estructurar documentos, tipos de entrada de formularios, gráficos mediante Canvas y SVG, reproducción de audio y video, almacenamiento local y APIs asociadas para crear aplicaciones web. HTML5 define la estructura mientras que CSS3 se encarga de la presentación. El documento también discute brevemente las futuras mejoras planeadas para HTML5.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Html 5
Similar a Html 5 (20)
Más de Eventos Creativos
Más de Eventos Creativos (20)
Html 5
- 1. HTML 5 Alejandro Martín amartin@informatica64.com
- 2. Una evolución de HTML 4 y DOM2. Redefinición de las etiquetas de marcado Formalización de APIS para la ayuda al desarrollo de Aplicaciones Web W3C Working Draft 24 June 2010 http://www.w3.org/TR/html5/ ¿Qué es HTML 5?
- 3. Historia
- 4. Nuevas etiquetas y atributos HTML APIs asociadas para ayudar a crear Aplicaciones Web No todo es HTML5 Audio y Video Edición en línea Aplicaciones Offline Histórico Drag & Drop Geolocalización API 2D con Canvas Almacenamiento Local Web Workers Web Sockets API Web Socket Protocol Mensajería
- 5. Empezando con HTML5 Tipo de documento Etiquetas de HTML5
- 6. HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> HTML 5 <!DOCTYPE HTML> Un único y simple DOCTYPE
- 7. Abandonar el uso de tablas y div para la maquetación de la página. Nuevas etiquetas: Estructurar un documento HEADER SECTION ARTICLE ASIDE FOOTER NAV FIGURE DIALOG
- 8. HTML5 incluye nuevas etiquetas para identificar datos como las fechas, cantidades o realizar énfasis en palabras o textos: MARK, TIME, METER y PROGRESS También se incluyen etiquetas para la publicación y manejo de datos: DATAGRID, DETAILS y DATALIST Otras etiquetas
- 9. Nuevos tipos para la etiqueta input: HTML Forms 2.0 datetime datetime-local date month week time number range email url Nuevos atributos: required, placeholder, list
- 10. Basefont, big, center, font, s, strike, tt y u Frame, frameset y noframes acronym, applet, isindex, dir Etiquetas no soportadas
- 11. DEMO
- 12. Aplicar estilos con CSS3 Una primera impresión
- 13. HTML5 se encarga de definir la estructura del documento CSS3 define como se presenta el documento HTML5 & CSS3
- 14. Historia
- 15. Dividida en módulos en distintas fases de desarrollo Estado actual del CSS3 http://www.w3.org/Style/CSS/current-work
- 16. Colores: name, hex, hex (corto), RGB, RGBA, HSL y HSLA gradient Transformaciones de Texto text-shadow Maquetación en Columnas column-count, column-width, column-gap Múltiples fondos Background-position Algunas novedades
- 17. Borders border-radius Transiciones transition CSS3 Selectors Descendientes, Hijos, adyacentes, atributos, … CSS3 Media Queries <link rel="stylesheet" media="screen and (max-width:400px)" href="estilo1css" /> <link rel="stylesheet" media="screen and (min-width:400px) " href="estilo2.css" /> Algunas novedades
- 19. Dibujado con HTML5 CANVAS Y SVG
- 20. Creación de gráficos vectoriales bidimensionales Integrado con XHTML, DOM, CSS, XSL y SMIL (animaciones) Tipos de objetos Formas gráficas Imágenes Textos SVG (Scalable Vector Graphics)
- 21. Inclusión del gráfico SVG en el navegador Embebido en el código HTML o XHTML (<svg>) Apertura del documento SVG (*.svg) Como imagen en CSS Usando el objeto object Usando imgo embed SVG (Scalable Vector Graphics) <?xmlversion="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svgwidth="100%" height="100%" version="1.1« xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> </svg>
- 22. Nueva etiqueta HTML5 para la generación dinámica de gráficos a través de la API Canvas 2D API API para la generación de Gráficas, animaciones, juegos, etc… Aceleración por hardware en IE9 utilizando la GPU CANVAS
- 23. SVG y CANVAS
- 24. Contenido multimedia Audio y Video
- 25. Las etiquetas audio y video permiten incorporar audio y video en páginas HTML Admiten etiquetas para arrancar al inicio, ejecutarse en bucle y mostrar controles Se admiten múltiples fuentes para asegurar la visualización en todos los navegadores API para el acceso a los elementos y poder manipularlos Audio y Video
- 26. Audio y Video (Codecs)
- 27. Insertar Video en HTML5
- 28. Almacenamiento Local SessionStorage y LocalStorage
- 29. Permitir almacenar datos estructurados en el lado del cliente de forma «semejante» a las cookies HTTP Los datos se almacenan como un listado de pares clave/valor Con sessionStorage Almacenamiento durante la sesión de la página Con localStorage Almacenamiento compartido entre múltiples páginas y sesiones, restringido al dominio. Almacenamiento local
- 31. En cada actualización se adoptan nuevas características de HTML 5 WebGL: API 3D para CANVAS Acceso a dispositivos Webcam, micrófonos, almacenamiento externo API para el trabajo con audio Manipular, analizar y generar Mejoras en videos: Streaming TouchScreen … ¿FUTURO?