HTML5 · HTML5 Curso de introducción al diseño Web – 1 Introducción al diseño web José Sáez Contenido
Curso HTML5
31
HTML 5 Ing. Marko castillo Peña www.markocastillo.com
Transcript of Curso HTML5
HTML 5Ing. Marko castillo Peñawww.markocastillo.com
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?
Historia
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
Empezando con HTML5
Tipo de documentoEtiquetas de HTML5
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
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
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
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
Basefont, big, center, font, s, strike, tt y u
Frame, frameset y noframes
acronym, applet, isindex, dir
Etiquetas no soportadas
DEMO
Aplicar estilos con CSS3
Una primera impresión
HTML5 se encarga de definir la estructura del documento
CSS3 define como se presenta el documento
HTML5 & CSS3
Historia
Dividida en módulos en distintas fases de desarrollo
Estado actual del CSS3
http://www.w3.org/Style/CSS/current-work
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
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
Maquetación con CSS3
Dibujado con HTML5CANVAS Y SVG
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)
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 img o embed
SVG (Scalable Vector Graphics)
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="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>
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
SVG y CANVAS
Contenido multimedia
Audio y Video
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
Audio y Video (Codecs)
Insertar Video en HTML5
Almacenamiento Local
SessionStorage y LocalStorage
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
Almacenamiento local
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?
