Intro html5
Upcoming SlideShare
Loading in...5
×
 

Intro html5

on

  • 1,516 views

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

Statistics

Views

Total Views
1,516
Views on SlideShare
1,110
Embed Views
406

Actions

Likes
0
Downloads
3
Comments
0

3 Embeds 406

http://jpilldev.net 379
http://localhost 14
http://verlaciudad.com 13

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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

Intro html5 Intro html5 Presentation Transcript

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