Conferencia HTML5 y CSS3 por Alexandra García Milan

HTML (Hypertext Markup Lenguage)

CSS (Cascading Style Sheets)

NOVEDADES HTML 5

MEJOR ESTRUCTURA

<aside>

VIDEO & AUDIO

autoplay autobuffer width controls <Video> poster height loop

VIDEO Demo: http://html5demos.com/video

•  Texto de advertencia •  Agregando etiquetas source •  Combinar con Flash

SIN CODEC DE VIDEO Y AUDIO

OGG Vorbis (Audio) POLÉMICA OGGTheora (Video)

APPLE H.264

OPERA Y MOZILLA H.264 OGGTheora

GOOGLE OGGTheora y H.264 VP8

autobuffer autoplay <Audio> controls loop Demo: http://01audiovideo.free.fr/ogg/1vs0_JuniorGroove.ogg

INTERACCIÓN CON LA ETIQUETA VIDEO & AUDIO

•  Etiqueta <device> <device type=“media”/> •  Acceso del video de la webcam / audio del mic

•  Mostrando el video al propio usuario

•  Grabando video / audio

•  Enviar y recibir imágenes

CANVAS

Ejemplos http://www.ernestdelgado.com/public-‐tests/canvasphoto/demo/canvas.html http://html9ive.appspot.com/static/draw.html http://html5demos.com/canvas-‐grad http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html http://www.feedtank.com/labs/html_canvas/

http://www.ﬁndmebyip.com/#target-selector

CODIFICACIÓN

!DOCTYPE

HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">

HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> HTML 5 <!DOCTYPE html>

ELEMENTO RAIZ

HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> HTML 5 <html lang="en">

CODIFICACIÓN

HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML 5 <meta charset="utf-8"/>

HTML 4.01 <link rel="stylesheet" type="text/css" href="style-original.css"/>

HTML 4.01 <link rel="stylesheet" type="text/css" href="style-original.css"/> HTML 5 <link rel="stylesheet" href="style-original.css"/>

Más control sobre la forma

NOVEDADES CSS3

BORDER

- webkit-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;" - moz-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  border-color - border: 8px solid #000;"

-‐webkit-‐border-‐image: url(images/border.png) 27 repeat; -‐moz-‐border-‐image: url(images/border.png) 27 repeat; border-image

-‐webkit-‐border-‐radius: 5px; -‐moz-‐border-‐radius: 5px; border-radius -‐webkit-‐border-‐radius:0px 5px 0px 5px; -‐moz-‐border-‐radius:0px 5px 0px 5px;

-‐moz-‐box-‐shadow:3px 3px 6px #888888; -‐webkit-‐box-‐shadow:3px 3px 6px #888888; box-shadow

BACKGROUNDS

background-‐origin: border-‐box; background-‐origin: padding-‐box; padding-box boder-box <background-origin> background-‐origin: content-‐box; content-box

background-‐color:#456; border: 10px dashed #ABC; -‐moz-‐background-‐clip: border; -‐webkit-‐background-‐clip: border; boder <background-clip> padding -‐moz-‐background-‐clip: padding; -‐webkit-‐background-‐clip: padding;

-‐moz-‐background-‐size: 100% 50%; -‐moz-‐background-‐size: 50% 100%; -‐o-‐background-‐size: 100% 50%; -‐o-‐background-‐size: 50% 100%; -‐webkit-‐background-‐size: 100% 50%; -‐webkit-‐background-‐size: 50% 100%; contain (eventual) height <background-size> width auto (eventual) -‐moz-‐background-‐size: contain; cover (eventual) -‐moz-‐background-‐size: cover;

MULTIPLES BACKGROUNDS

HTML 4 CSS 2 #fondo1{ <div id="fondo1"> background-‐image: url(fondo1.gif); <div id="fondo2"> width: 300px; <div id="fondo3"> } #fondo2{ …. background-‐image: url(fondo2.png); ... background-‐repeat: no-‐repeat; </div> background-‐position: bottom right; </div> } #fondo3{ </div> background-‐image: url(fondo3.png); background-‐repeat: no-‐repeat; background-‐position: center; }

HTML 5 CSS3 #fondos{ <div id="fondos"> texto de un único elemento background: url(fondo3.png) bottom right no-‐repeat, ... url(fondo2.png) center no-‐repeat, url(fondo1.gif) center repeat; </div> width: 300px; }

Color:#f00; opacity:1.0; opacity Color:#f00; opacity:1.0; Valores entre: - 0 (transparente) - 1 (opaco)

HTML 4 HTML 5 - HLS: color (hue, sturation, lightness) - RGB: color (red, gren, blue) - CMYK: color (cyan, magenta, yellow, black) - Hexadecimal: color (#abcdef) - HLSA: color (hue, sturation, lightness, alpha) - DeHinición: color (white, red, black) - RGBA: color (red, gren, blue, alpha)

distancia vertical distancia horizontal text-‐shadow: 10px 10px 10px #333; text-shadow desenfoque color-sombra

text-‐over9low:ellipsis ; text-overflow

LAYOUT

-‐moz-‐column-‐width: 13em; -‐webkit-‐column-‐width: 13em; -‐moz-‐column-‐gap: 1em; -‐webkit-‐column-‐gap: 1em; column-‐width moz-‐column-‐count: 3; -‐webkit-‐column-‐count: 3; column-‐gap Layout column-‐count

@font-face { font-family: Gentium; src: url(http://site/fonts/Gentium.ttf); } @font-face p { font-family: Gentium; }

TRANSFORMATION

Matrix 3D Perspective Rotate 3D 3D TRANSFORMATION Scale 3D Translate 3D

PREFIJOS CROSS-BROWSING

-moz-box-shadow -webkit-box-shadow -o-box-shadow -ms-box-shadow

RECURSO SHTML 5 Frameworks basados en CSS3 y HTML5 http://52framework.com/ Páginas web realizadas en HTML5 http://html5gallery.com/ Demostraciones del uso de HTML 5 a través de múltiples ejemplos. http://html5demos.com/ CSS 3 Compatibilidad de los navegadores: http://www.ﬁndmebyip.com/litmus/#target-selector Te muestra ejemplos de CSS3 http://css3please.com/ Te genera el código y te pone con que navegador es compatible: http://css3generator.com/ Blog Especializado: http://www.css3.info/ Otro blog con gran catidad de información y recursos de calidad sobre CSS3. http://www.css3.com/

REFERENCIAS HTML 5 http://www.neoteo.com/html-5-y-el-futuro-de-internet-16399.neoPáginas web realizadas en HTML5 http://www.elwebmaster.com/actualidad/html-5-%C2%BFque-novedades-trae-la-nueva-version-de-este- lenguaje http://www.moio.org/blog/?p=125 http://www.ﬁndmebyip.com/#target-selector http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 http://www.conceptopixel.com/cdigos-de-css3-mas-propiedades-que-quiz-no-conocas-y-que-te-facilitaran-la-vida http://vagabundia.blogspot.com/2010/02/las-etiquetas-audio-y-video.html http://www.geeksdesdelau.com/2009/07/las-novedades-mas-importantes-de-html-5/ http://www.programacionweb.net/articulos/articulo/?num=762 http://www.craigward.net/

REFERNCIAS CSS 3 http://www.moio.org/blog/?p=125 http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 http://www.maestrosdelweb.com/editorial/css-3-mas-social-que-nunca/ http://theproc.es/2010/1/29/12237/manual-sobre-lo-nuevo-en-css-3 http://vagabundia.blogspot.com/2010/05/la-propiedad-background-clip.html https://developer.mozilla.org/en/CSS/-moz-background-origin http://www.css3.info/preview/background-size/ http://serenomoreno.com/2010/01/font-face-incrustar-tipograﬁas-en-una-pagina-web/

http://www.adwa.es	347
http://crea-t.net	271
http://disenowebhtml5.wikispaces.com	110
http://www.slideshare.net	44
http://goweb.cl	17
http://www.tucamon.es	13
http://www.crea-t.net	4
http://www.taaza.com	2
http://campusvirtual.duoc.cl	2
http://localhost	2

Conferencia HTML5 y CSS3 por Alexandra García Milan

by Andrés Karp on May 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 812

Statistics

Conferencia HTML5 y CSS3 por Alexandra García Milan — Presentation Transcript