Web ebConf Conf Latino Latino webconflatino.com
Taller HTML5 & CSS3
HTML5 Es la nueva generación de HTML le sigue a HTML 4.01, XHTML 1.1 Multipla Mult iplatafo taforma rma Linux Linux,, Wind Windows, ows, 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 > > <meta charset=" charset="utf-8 utf-8"> ">
> Mi Pagina web > <script type=" type="text/javascript text/javascript"> "> > > > > . Contenido . >
Lo Nuevo Elementos Semanticos
>
>
>
> y mas
Canvas para dibujar Elementos Video y Audio Almacenamiento Local y Uso Offline Geolocalización Drag Drop Microdata Web Sockets
Elementos Semánticos > componente de una pagina, articulo, usado en syndication, rss > seccion generica de documento, grupos de contenidos mark> marcado como referencia > representa hora > sección que enlaza a otras paginas, navegación
ejemplo: html51.htm
Microdata 12 Calle 1 Ave < Tegucigalpa , FM 3322 Honduras
Detección de Com atibilidad Modernizr www.modernizr.com
modernizr <meta charset="utf-8"> Mi Pagina web <script src= src="modernizr.min.js "modernizr.min.js "> > >
modernizr if (Modernizr.canvas) { // Codido Del Canvas } else { // Su Navegador No Soporta Canvas }
Colores
RGB Hexadecimal
#FF FF0000 0000 #00FF #00 FF00 00 #0000FF #0000 FF
Colores CSS
RGB rgb(255,0,0) rgb(255 ,0,0) rgb(0,255 rgb(0, 255,0) ,0) rgb(0,0,255 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 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 a v e y re re s t o r e ) Animaciones Eventos con Mouse
Canvas
Canvas var canvas = document.getElementById(' document .getElementById(' tutorial tutorial'); '); var contexto = canvas canvas.getContext(' .getContext('2d 2d '); ');
>
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=" type="application/javascript application/javascript "> function draw() { var canvas = document document.getElementById(" .getElementById(" tutorial tutorial"); "); if (canvas (canvas.getContext) .getContext) { var ctx = canvas canvas.getContext("2d"); .getContext("2d"); ctx.fillStyle = "rgb(255,65,1) ctx. "rgb(255,65,1)"; "; ctx. ctx .fillRect fillRect(1, (1, 1, 200, 200); } } > ejemplo: canvas0.htm
Canvas:: Lin Canvas Lineas eas (Pat (Path) h) beginPath(); strokeStyle = '#FF0000 ' #FF0000'; '; lineWidth = 4; moveTo(150 moveTo( 150, ,200 200); ); lineTo(200 lineTo( 200, ,150 150); ); lineTo(250 lineTo( 250, ,200 200); ); stroke(); // fill();
ejemplo: lines1.htm
Canvas: arc arc( arc (x, y, radio radio, , angInicial angInicial, , angFinal angFinal, , anticlockwise anticlockwise) )
angulos en Radianes var radians = (Math.PI/180)*deg (Math.PI/180)*degrees rees 360 grados = Math.PI*2 180 grados = Math.PI
ejemplo: arc.htm
Canvas: Estilos lineWidth = value = value lineCap = type lineJoin = type miterLimit = value = value
ejemplo: estilos.htm
Canvas: Estilos lineCap: butt, round, square
lineJoin: round, bevel, meter
ejemplo: estilos2.htm
Canvas: Gradientes createLinearGradient(x1,y1,x2,y2) createLinearGradient (x1,y1,x2,y2) createRadialGradient(x1,y1,r1,x2,y2,r2) createRadialGradient (x1,y1,r1,x2,y2,r2) addColorStop(posició addColorStop (posición, n, color) posición 0.0 - 1.0
ejemplo: gradientes.htm
Canvas: Gradientes addColorStop(posició addColorStop (posición, n, color) posición 0.0 - 1.0
lineargradient = ctx ctx.createLinearGradient(0,0,150,150); .createLinearGradient(0,0,150,150); lineargradient .addColorStop(0,' white white'); '); lineargradient .addColorStop(1,' black'); black ');
ejemplo: gradientes.htm
Canvas: Imágenes var lago = new Image(); lago.src lago .src = 'lago.jpg 'lago.jpg'; '; ctx.drawImage(lago ctx.drawImage( lago, , 10,10);
ejemplo: image1.htm
Canvas: Imágenes var lago = document document.getElementById(' .getElementById('lago lago'); '); ctx.drawImage( ctx .drawImage(lago lago, , 10,10);
ejemplo: image2.htm
Canvas: Canv as: Est Estad ados os save() save() restore() restore ()
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor,globalCompositeOperation properties.
ejemplo: restore.htm
Canvas Canv as:: Tran ransfo sform rmaci acione oness transformaciones del origen del canvas translate(x,y) translate (x,y) rotate(x,y) rotate (x,y) scale(x,y) scale (x,y)
Animaciones • Ciclo • Borrar Canvas nuevo o posición pos ición • Volver a Dibujar nuev
Animaciones //llama a dibuja cada 100ms setInterval( setInterval (dibuja dibuja,100); ,100);
function dibuja dibuja(){ (){ // Codigo Borrar // Dibujar }
ejemplo: restore.htm
Video
Que aprenderemos Codecs de Video Agregar video a tu sitio web Usar los controle controless Audio
Codecs De Video H.264 (patenta (patentado, do, MPEG LA) VP8 (open source, google) Theora (open source)
Encoders Ogg Firefogg.org H.264 Handbrake.fr VP8,Theora ffmpeg.org
”> >
ejemplo: video1.htm
”> Su navegador navegador no soporta HTML5 >
> > autoplay toca automatico autobuffer precarga controls visibles width,, height width loop ciclo preload poster:: imagen hasta 1er frame poster
ejemplo: video2.htm
vorbis"'>
type='video/ogg; codecs="theora, vorbis"'> type='video/ogg; vorbis"'>
mp4a.40.2"'> >
Codecs de Audio MPEG-1 Audio La Layer yer 3 (MP3) AAC (Advanc AAC (Advanced ed Audio Coding) Apple iTunes Vorbis (Libre, Linux
”> >
ejemplo: audio.htm
CSS3 • Esquinas redondas • Sombra • Gradientes • Fonts
CSS3: CSS3: Round Round Corners Corners -moz-border-radius: 10px; /* firefox */ -moz-border-radius: -khtml-border-radius: 10px; /* konqueror */ -webkit-border-radius:: 10px; /* safari-chrome */ -webkit-border-radius border-radius:: 10px; /*algunos*/ border-radius
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; color; -webkit-box-shadow:x -webkit-box-shadow: x y l color; color; -moz-box-shadow:x -moz-box-shadow: x y l color; color; text-shadow: x y l color; color; x: ej ejee x y: eje y l : largo color:: #FF00AA color
CSS3: Stroke -webkit-text-stroke: -webkit-text-stroke : 3px #FF00AA;
Solo Webkit y Opera
CSS3: CSS 3: Gradient Gradientes es Webk ebkit it
-webkit-gradient (tipo,desdeAng tipo,desdeAng,hastaAng,desd ,hastaAng,desdecolor, ecolor, hasta color, color-stop(opa, color)) color) )
background: -webkit-gradient (linear linear, , left top, top , left bottom , from (red ), to( ), blue), color-stop blue), color-stop(0.5, (0.5, white white)); ));
ejemplo: css3gradientes.htm
CSS3: Gradien Gradientes tes Mozill Mozillaa -moz-linear-gradient( punto,stop, stop, [,stop]* ) punto,stop,
background: moz-linear-gradient (top moz-linear-gradient top, , #FFF, #000);
CSS3: Radial -webkit-gradient(radial, -webkit-gradient (radial, 65 65, 10, 52 92, 80, ...stops
CSS3 Fonts @font-face { font-family font-family: : Cupcake Cupcake; ; src: url('cupcake.ttf 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 Enl aces Fuentes http://dev.opera.com/articles/vie http://dev .opera.com/articles/view/html5-ca w/html5-canvas-painting/ nvas-painting/ http://www.canvasdemos.com/ http://www.canvasdemos.co m/ https://developer.mozilla.org Ejemplos http://desandro.com/articles/opera-logo-css/ http://desandro.com/articles/ope ra-logo-css/ http://html5gallery.com/ http://www.apple.com/htm l5/
Util http://slides.html5rocks.com/ http://fixounet.free.fr/avidemux/ http://fixounet.free.fr/avidem ux/ http://www.modernizr.com/ http://www.modernizr.co m/ http://www.dafont.com http://ww w.dafont.com
Gracias [email protected] twitter.com/rbreve