Your SlideShare is downloading. ×
  • Like
Intro html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,201
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Explorando HTML5FLISoL Bogotá5 de Mayo de 2012
  • 2. ¿Quien soy?Juan Pablo BoteroEquipo verlaciudad.comCo-fundador Danka Colombia@jpill
  • 3. AgendaEstructura de página.Marcas en la páginaSemántica y estructuraInput en FormulariosElementos de MediosDibujandoWebGL
  • 4. Estructura de Página<!DOCTYPE html><meta charset="UTF-8" /><section><article><aside><header><hgroup><footer>Ejemplo=
  • 5. Marcas de PáginaIncrustando contenido externo en una página<iframe><embed><area>Ejemplo=
  • 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. 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. Formularios Nuevos input Type:● <input type="email" />● <input type="url" />● <input type="number"/>● <input type="file" /> Ejemplo=
  • 9. Multimedia <video> <audio>● controls● autoplay● tamaño● preload● poster
  • 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. WebGLDevelopers MozillaChromium Experiments
  • 12. GraciasJuan Pablo Boteroverlaciudad.comjuan.botero@verlaciudad.com@verlaciudad@jpill