Html 5
Descargar como PPTX, PDF0 recomendaciones746 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.
Html 5
- 2. Una evolución de HTML 4 y DOM2.Redefinición de las etiquetas de marcadoFormalización de APIS para la ayuda al desarrollo de Aplicaciones WebW3C Working Draft 24 June 2010http://www.w3.org/TR/html5/¿Qué es HTML 5?
- 3. Historia
- 4. Nuevas etiquetas y atributos HTMLAPIs asociadas para ayudar a crear Aplicaciones WebNo todo es HTML5Audio y Video Edición en líneaAplicaciones OfflineHistóricoDrag & DropGeolocalizaciónAPI 2D con CanvasAlmacenamiento LocalWeb WorkersWeb Sockets APIWeb Socket ProtocolMensajería
- 5. Empezando con HTML5Tipo de documentoEtiquetas 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 documentoHEADERSECTIONARTICLEASIDEFOOTERNAVFIGUREDIALOG
- 8. HTML5 incluye nuevas etiquetas para identificar datos como las fechas, cantidades o realizar énfasis en palabras o textos: MARK, TIME, METER y PROGRESSTambién se incluyen etiquetas para la publicación y manejo de datos:DATAGRID, DETAILS y DATALISTOtras etiquetas
- 9. Nuevos tipos para la etiqueta input:HTML Forms 2.0datetimedatetime-localdatemonthweektimenumberrangeemailurlNuevos atributos:required, placeholder, list
- 10. Basefont, big, center, font, s, strike, tt y uFrame, frameset y noframesacronym, applet, isindex, dirEtiquetas no soportadas
- 11. DEMO
- 12. Aplicar estilos con CSS3Una primera impresión
- 13. HTML5 se encarga de definir la estructura del documentoCSS3 define como se presenta el documentoHTML5 & CSS3
- 14. Historia
- 15. Dividida en módulos en distintas fases de desarrolloEstado actual del CSS3http://www.w3.org/Style/CSS/current-work
- 16. Colores:name, hex, hex (corto), RGB, RGBA, HSL y HSLA gradientTransformaciones de Textotext-shadowMaquetación en Columnas column-count, column-width, column-gapMúltiples fondosBackground-positionAlgunas novedades
- 17. Bordersborder-radiusTransicionestransitionCSS3 SelectorsDescendientes, 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 HTML5CANVAS Y SVG
- 20. Creación de gráficos vectoriales bidimensionalesIntegrado con XHTML, DOM, CSS, XSL y SMIL (animaciones)Tipos de objetosFormas gráficasImágenesTextosSVG (Scalable Vector Graphics)
- 21. Inclusión del gráfico SVG en el navegadorEmbebido en el código HTML o XHTML (<svg>)Apertura del documento SVG (*.svg)Como imagen en CSSUsando el objeto objectUsando imgo embedSVG (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 APIAPI para la generación de Gráficas, animaciones, juegos, etc…Aceleración por hardware en IE9 utilizando la GPUCANVAS
- 23. SVG y CANVAS
- 24. Contenido multimediaAudio y Video
- 25. Las etiquetas audio y video permiten incorporar audio y video en páginas HTMLAdmiten etiquetas para arrancar al inicio, ejecutarse en bucle y mostrar controlesSe admiten múltiples fuentes para asegurar la visualización en todos los navegadoresAPI para el acceso a los elementos y poder manipularlosAudio y Video
- 26. Audio y Video (Codecs)
- 27. Insertar Video en HTML5
- 28. Almacenamiento LocalSessionStorage y LocalStorage
- 29. Permitir almacenar datos estructurados en el lado del cliente de forma «semejante» a las cookies HTTPLos datos se almacenan como un listado de pares clave/valorCon sessionStorageAlmacenamiento durante la sesión de la páginaCon localStorageAlmacenamiento 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 5WebGL: API 3D para CANVASAcceso a dispositivosWebcam, micrófonos, almacenamiento externoAPI para el trabajo con audioManipular, analizar y generarMejoras en videos: StreamingTouchScreen…¿FUTURO?