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

ejemplo: css3radius.htm

CSS3: Opera
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius

ejemplo: css3radius.htm

CSS3: Webkit
-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius

ejemplo: css3radius.htm

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

Sign up to vote on this title
UsefulNot useful