Taller HTML5-y-CSS3

WebConfLatino
webconflatino.com
Taller HTML5 & CSS3

HTML5
Es la nueva generación de HTML
le sigue a HTML 4.01, XHTML 1.1
Multiplataforma Linux, Windows, Mac
Safari, Chrome, Firefox, Opera, IE9
Aún en Desarrollo
Ejemplos
pueden bajar los ejemplos
de esta presentación acá
http://bit.ly/html5taller
Browsers
http://www.w3counter.com/globalstats.php
Esqueleto HTML 5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Mi Pagina web </title>
<script type="text/javascript">
</script>
<style>
#miestilo{
font-size:12px; color:#FFF;
}
</style>
</head>
<body>
.
Contenido
.
</body>
</html>
Lo Nuevo
Elementos Semanticos
<article> <footer> <header> <nav> y mas
Canvas para dibujar

Elementos Video y Audio
Almacenamiento Local y Uso Offline
Geolocalización
Drag Drop
Microdata
Web Sockets
Elementos Semánticos
<article> componente de una pagina,
articulo, usado en syndication, rss
<section> seccion generica de documento,

grupos de contenidos
<mark> marcado como referencia
<time> representa hora
<nav> sección que enlaza a otras

paginas, navegación
ejemplo: html51.htm
Microdata
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">12 Calle 1 Ave</span><
<span itemprop="locality">Tegucigalpa</span>,
<span itemprop="region">FM</span>
<span itemprop="postal-code">3322</span>
<span itemprop="country-name">Honduras</span>
</dd>
</dl>
Detección de
Compatibilidad
Modernizr www.modernizr.com
modernizr
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi Pagina web</title>
<script src="modernizr.min.js"></script>
</head>
<body>
</body>
</html>
modernizr
if (Modernizr.canvas) {
// Codido Del Canvas
} else {
// Su Navegador No Soporta Canvas
}
Colores
RGB
Hexadecimal
#FF0000
#00FF00
#0000FF
Colores CSS
RGB
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgba(255,0,255,0.5)
150 nombres de
Colores
white
black
orange
gray
silver
green
red
http://www.w3schools.com/css/css_colornames.asp
Canvas
Formas Básicas
Paths (Lineas)
Colores
Estilos de Linea
Gradientes
E s t a d o s ( s ave y re s t o re )
Animaciones
Eventos con Mouse
Canvas
<canvas width="400" height="400"></canvas>

Canvas
var canvas = document.getElementById('tutorial');
var contexto = canvas.getContext('2d');
<canvas width="400" height="400" id=”tutorial”>

</canvas>
Canvas:Rectangulos
Dibuja un Rectangulo:
fillRect (x, y, largo, ancho);
Dibuja un Borde de Rectangulo

strokeRect (x, y, largo, ancho);
Borra area haciendola transparente

clearRect (x, y, largo, ancho);
Canvas:Rectangulos
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("tutorial");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255,65,1)";
ctx.fillRect(1, 1, 200, 200);
}
}
</script>
ejemplo: canvas0.htm
Canvas: Lineas (Path)
beginPath();
strokeStyle = '#FF0000';
lineWidth = 4;
moveTo(150,200);
lineTo(200,150);
lineTo(250,200);
stroke();
// fill();
ejemplo: lines1.htm
Canvas: arc
arc(x, y, radio, angInicial, angFinal, anticlockwise)
angulos en Radianes
var radians = (Math.PI/180)*degrees
360 grados = Math.PI*2

180 grados = Math.PI
ejemplo: arc.htm
Canvas: Estilos
lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value
ejemplo: estilos.htm
Canvas: Estilos
lineCap: butt, round, square
lineJoin: round, bevel, meter
ejemplo: estilos2.htm
Canvas: Gradientes
createLinearGradient(x1,y1,x2,y2)
createRadialGradient(x1,y1,r1,x2,y2,r2)
addColorStop(posición, color)
posición 0.0 - 1.0
ejemplo: gradientes.htm
Canvas: Gradientes
addColorStop(posición, color)
posición 0.0 - 1.0
lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');
ejemplo: gradientes.htm
Canvas: Imágenes
var lago = new Image();

lago.src = 'lago.jpg';
ctx.drawImage(lago, 10,10);
ejemplo: image1.htm
Canvas: Imágenes
var lago = document.getElementById('lago');

ctx.drawImage(lago, 10,10);
<img src=”/images/lago.jpg” id=”lago” />
ejemplo: image2.htm
Canvas: Estados
save()
restore()
strokeStyle, fillStyle, globalAlpha,

lineWidth, lineCap, lineJoin, miterLimit,
shadowOffsetX, shadowOffsetY, shadowBlur,
shadowColor,globalCompositeOperation
properties.
ejemplo: restore.htm
Canvas: Transformaciones
transformaciones del origen del canvas
translate(x,y)
rotate(x,y)
scale(x,y)
ejemplos: translate.htm, translate2.htm, rotate.htm

Animaciones
• Ciclo
• Borrar Canvas
• Volver a Dibujar nuevo posición
Animaciones
//llama a dibuja cada 100ms
setInterval(dibuja,100);
function dibuja(){
// Codigo Borrar
// Dibujar
}
ejemplo: restore.htm
Video
Que aprenderemos
Codecs de Video
Agregar video a tu sitio web
Usar los controles
Audio
Codecs De Video
H.264 (patentado, MPEG LA)

VP8 (open source, google)
Theora (open source)
Encoders
Ogg Firefogg.org
H.264 Handbrake.fr
VP8,Theora ffmpeg.org
<video src=”miPelicula.mp4”></video>
ejemplo: video1.htm
<video src=”miPelicula.mp4”>
Su navegador no soporta HTML5
</video>
<video src=”miPelicula.mp4” controls ></video>
autoplay toca automatico

autobuffer precarga
controls visibles
width, height
loop ciclo
preload
poster: imagen hasta 1er frame
ejemplo: video2.htm
<video width="320" height="240" controls>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Codecs de Audio
MPEG-1 Audio Layer 3 (MP3)

AAC (Advanced Audio Coding) Apple
iTunes
Vorbis (Libre, Linux
<audio src=”miCancion.mp3”></audio>
ejemplo: audio.htm
CSS3
• Esquinas redondas
• Sombra
• Gradientes
• Fonts
CSS3: Round Corners
-moz-border-radius: 10px; /* firefox */

-khtml-border-radius: 10px; /* konqueror */
-webkit-border-radius: 10px; /* safari-chrome */
border-radius: 10px; /*algunos*/
ejemplo: css3radius.htm
CSS3: Mozilla
-moz-border-radius-topright
-moz-border-radius-topleft
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
CSS3: Opera
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
CSS3: Webkit
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
CSS3: Sombras
box-shadow: x y l color;
-webkit-box-shadow:x y l color;
-moz-box-shadow:x y l color;
text-shadow: x y l color;
x: eje x
y: eje y
l : largo
color: #FF00AA
ejemplo: css3shadow.htm css3textshadow.htm

CSS3: Stroke
-webkit-text-stroke: 3px #FF00AA;
Solo Webkit y Opera

CSS3: Gradientes Webkit
-webkit-gradient
(tipo,desdeAng,hastaAng,desdecolor, hasta
color, color-stop(opa, color))
background: -webkit-gradient(linear, left top, left bottom, from

(red), to(blue), color-stop(0.5, white));
ejemplo: css3gradientes.htm
CSS3: Gradientes Mozilla
-moz-linear-gradient(punto,stop, stop, [,stop]*)
background: -moz-linear-gradient(top, #FFF, #000);

CSS3: Radial
-webkit-gradient(radial, 65 65, 10, 52 92, 80, ...stops
CSS3 Fonts
@font-face { font-family: Cupcake; src: url('cupcake.ttf'); }
ejemplo: css3fonts.htm
Geo Localizacion
Detecta posicionamiento geográfico
latitud
longitud
Búsquedas personalizadas
web apps como foursquare / latitude / yelp
ejemplo: geo1.htm
Enlaces Fuentes
http://dev.opera.com/articles/view/html5-canvas-painting/
http://www.canvasdemos.com/
https://developer.mozilla.org
Ejemplos
http://desandro.com/articles/opera-logo-css/
http://html5gallery.com/
http://www.apple.com/html5/
Util
http://slides.html5rocks.com/
http://fixounet.free.fr/avidemux/
http://www.modernizr.com/
http://www.dafont.com
Gracias
rbreve@gmail.com
twitter.com/rbreve

Taller HTML5-y-CSS3

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Taller HTML5-y-CSS3

Cargado por

Copyright:

Formatos disponibles

WebConfLatino

Taller HTML5 & CSS3

le sigue a HTML 4.01, XHTML 1.1

Multiplataforma Linux, Windows, Mac

Safari, Chrome, Firefox, Opera, IE9

Canvas para dibujar

<section> seccion generica de documento,

<mark> marcado como referencia

<time> representa hora

<nav> sección que enlaza a otras

<canvas width="400" height="400"></canvas>

<canvas width="400" height="400" id=”tutorial”>

Dibuja un Borde de Rectangulo

Borra area haciendola transparente

var canvas = document.getElementById("tutorial");

var ctx = canvas.getContext("2d");

arc(x, y, radio, angInicial, angFinal, anticlockwise)

var radians = (Math.PI/180)*degrees

360 grados = Math.PI*2

lineCap: butt, round, square

lineJoin: round, bevel, meter

posición 0.0 - 1.0

posición 0.0 - 1.0

var lago = new Image();

var lago = document.getElementById('lago');

<img src=”/images/lago.jpg” id=”lago” />

strokeStyle, fillStyle, globalAlpha,

transformaciones del origen del canvas

ejemplos: translate.htm, translate2.htm, rotate.htm

H.264 (patentado, MPEG LA)

autoplay toca automatico

MPEG-1 Audio Layer 3 (MP3)

-moz-border-radius: 10px; /* firefox */

ejemplo: css3shadow.htm css3textshadow.htm

-webkit-text-stroke: 3px #FF00AA;

Solo Webkit y Opera

background: -webkit-gradient(linear, left top, left bottom, from

-moz-linear-gradient(punto,stop, stop, [,stop]*)

background: -moz-linear-gradient(top, #FFF, #000);

@font-face { font-family: Cupcake; src: url('cupcake.ttf'); }

También podría gustarte