Intro html5

1,615 views

Published on

Se introduce a los nuevos elementos estructurales, semánticos y multimediales de HTML5

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Intro html5

  1. 1. Explorando HTML5FLISoL Bogotá5 de Mayo de 2012
  2. 2. ¿Quien soy?Juan Pablo BoteroEquipo verlaciudad.comCo-fundador Danka Colombia@jpill
  3. 3. AgendaEstructura de página.Marcas en la páginaSemántica y estructuraInput en FormulariosElementos de MediosDibujandoWebGL
  4. 4. Estructura de Página<!DOCTYPE html><meta charset="UTF-8" /><section><article><aside><header><hgroup><footer>Ejemplo=
  5. 5. Marcas de PáginaIncrustando contenido externo en una página<iframe><embed><area>Ejemplo=
  6. 6. Estructura y Semántica Datos en un contexto Semántico en un formato interpretable● En HTML5 se introduce nuevos elementos.● Semántica personalizada con microdatos.● Definido a partir de vocabulario.● Ejemplo: ● Se desea crear los microdatos que definen un Usuario. ● Se define sus propiedades en un vocabulario de microdatos.
  7. 7. Estructura y Semántica Se define un Elemento con cinco propiedades:● Nombre <p>Nombre:<span itemprop=”nombre”>Juan</span></p>● Apellido <p>Apellido:<span itemprop=apellido”>López</span></p>● Foto <p>Foto:<img itemprop=”foto” src=”foto.jpg”</span></p>● Número identificación. <p>NI:<span itemprop=”nid”>00.00.00</span></p>
  8. 8. Formularios Nuevos input Type:● <input type="email" />● <input type="url" />● <input type="number"/>● <input type="file" /> Ejemplo=
  9. 9. Multimedia <video> <audio>● controls● autoplay● tamaño● preload● poster
  10. 10. Dibujando<canvas id=lienzo><script> var doc = document.getElementById(lienzo); var ctx = doc.getContext(2d); ctx.fillStyle = rgb(0, 255, 0); ctx.fillRect(10, 20, 50, 50);</script>
  11. 11. WebGLDevelopers MozillaChromium Experiments
  12. 12. GraciasJuan Pablo Boteroverlaciudad.comjuan.botero@verlaciudad.com@verlaciudad@jpill

×