• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html 5
 

Html 5

on

  • 2,428 views

Charla impartida por Alejandro Martín de Informatica 64 en el evento BlogCamp! que tuvo lugar en El Escorial los días 22, 23 y 24 de Septiembre.

Charla impartida por Alejandro Martín de Informatica 64 en el evento BlogCamp! que tuvo lugar en El Escorial los días 22, 23 y 24 de Septiembre.

Statistics

Views

Total Views
2,428
Views on SlideShare
2,428
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html 5 Html 5 Presentation Transcript

    • HTML 5
      Alejandro Martín
      amartin@informatica64.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 documento
      Etiquetas 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 HTML5
      CANVAS 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 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>
    • 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?