Intro html5
•
0 j'aime•917 vues
Se introduce a los nuevos elementos estructurales, semánticos y multimediales de HTML5
Recommandé
Contenu connexe
Similaire à Intro html5
Similaire à Intro html5 (20)
Plus de Verlaciudad
Plus de Verlaciudad (9)
Dernier
Dernier (15)
Intro html5
- 1. Explorando HTML5 FLISoL Bogotá 5 de Mayo de 2012
- 2. ¿Quien soy? Juan Pablo Botero Equipo verlaciudad.com Co-fundador Danka Colombia @jpill
- 3. Agenda Estructura de página. Marcas en la página Semántica y estructura Input en Formularios Elementos de Medios Dibujando WebGL
- 4. Estructura de Página <!DOCTYPE html> <meta charset="UTF-8" /> <section> <article> <aside> <header> <hgroup> <footer> Ejemplo=
- 5. Marcas de Página Incrustando 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>