Diseño web CON HTML5 yCSS3 · 1. diseÑo web con html5 y css3 diseÑo web con html5 y css3 + de ...
Intro html5
Click here to load reader
-
Upload
verlaciudad -
Category
Technology
-
view
1.250 -
download
1
description
Transcript of Intro html5
![Page 1: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/1.jpg)
Explorando HTML5
FLISoL Bogotá 5 de Mayo de 2012
![Page 2: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/2.jpg)
¿Quien soy?
Juan Pablo Botero Equipo verlaciudad.comCo-fundador Danka Colombia@jpill
![Page 3: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/3.jpg)
Agenda
Estructura de página.Marcas en la páginaSemántica y estructuraInput en FormulariosElementos de MediosDibujandoWebGL
![Page 4: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/4.jpg)
Estructura de Página
<!DOCTYPE html>
<meta charset="UTF-8" />
<section>
<article>
<aside>
<header>
<hgroup>
<footer>
Ejemplo=
![Page 5: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/5.jpg)
Marcas de Página
Incrustando contenido externo en una página
<iframe>
<embed>
<area>
Ejemplo=
![Page 6: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/6.jpg)
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.
![Page 7: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/7.jpg)
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>
![Page 8: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/8.jpg)
Formularios
Nuevos input Type:
● <input type="email" />● <input type="url" />● <input type="number"/>● <input type="file" />
Ejemplo=
![Page 9: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/9.jpg)
Multimedia
<video> <audio>
● controls● autoplay● tamaño● preload● poster
![Page 10: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/10.jpg)
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>
![Page 11: Intro html5](https://reader037.fdocuments.mx/reader037/viewer/2022100601/557ae396d8b42a8f648b539b/html5/thumbnails/11.jpg)
WebGL
Developers Mozilla
Chromium Experiments