Taller HTML5 y CSS3
55
WebConfLatino webconflatino.com Taller HTML5 & CSS3
-
Upload
roberto-brve -
Category
Documents
-
view
1.464 -
download
16
description
Presentación del Taller de HTML5 y CSS3 que se impartió en WebConfLatino 2010, en Tegucigalpa, Honduras
Transcript of Taller HTML5 y CSS3
WebConfLatino
webconflatino.com
Taller HTML5 & CSS3
HTML5Es 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
http://bit.ly/html5taller
pueden bajar los ejemplos de esta presentación acá
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 NuevoElementos 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><br> <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
<!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 }
modernizr
Colores
#FF0000#00FF00#0000FF
RGBHexadecimal
Colores CSS
rgb(255,0,0)rgb(0,255,0)rgb(0,0,255)
rgba(255,0,255,0.5)
RGB
150 nombres de Colores
whiteblackorangegray
silvergreenred
http://www.w3schools.com/css/css_colornames.asp
Canvas
Fo r m a s B á s i c a s P a t h s ( L i n e a s ) C o l o re s E s t i l o s d e L i n e a G r a d i e n t e s E s t a d o s ( s ave y re s t o re ) A n i m a c i o n e s E ve n t o s c o n M o u s e
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
ejemplo: arc.htm
arc(x, y, radio, angInicial, angFinal, anticlockwise)
angulos en Radianes
var radians = (Math.PI/180)*degrees
360 grados = Math.PI*2180 grados = Math.PI
Canvas: Estilos
lineWidth = valuelineCap = typelineJoin = typemiterLimit = value
ejemplo: estilos.htm
Canvas: Estilos
ejemplo: estilos2.htm
lineCap: butt, round, square
lineJoin: round, bevel, meter
Canvas: GradientescreateLinearGradient(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: GradientesaddColorStop(posición, color)
posición 0.0 - 1.0
ejemplo: gradientes.htm
lineargradient = ctx.createLinearGradient(0,0,150,150);lineargradient.addColorStop(0,'white');lineargradient.addColorStop(1,'black');
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
translate(x,y)
ejemplos: translate.htm, translate2.htm, rotate.htm
rotate(x,y)
transformaciones del origen del canvas
scale(x,y)
Animaciones
• Ciclo
• Borrar Canvas
• Volver a Dibujar nuevo posición
Animaciones//llama a dibuja cada 100mssetInterval(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 automaticoautobuffer precarga
controls visibleswidth, height
loop ciclopreload
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-radiusborder-top-right-radiusborder-bottom-left-radiusborder-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: Sombrasbox-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 xy: eje yl : largocolor: #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
EnlacesFuentes
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/
Utilhttp://slides.html5rocks.com/
http://fixounet.free.fr/avidemux/http://www.modernizr.com/
http://www.dafont.com
