Intro html5
12
Click here to load reader
-
Upload
verlaciudad -
Category
Technology
-
view
1.247 -
download
1
description
Se introduce a los nuevos elementos estructurales, semánticos y multimediales de HTML5
Transcript of Intro html5
Explorando HTML5
FLISoL Bogotá 5 de Mayo de 2012
¿Quien soy?
Juan Pablo Botero Equipo verlaciudad.comCo-fundador Danka Colombia@jpill
Agenda
Estructura 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ágina
Incrustando 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>
WebGL
Developers Mozilla
Chromium Experiments
