Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Jose Florido
Madrid Martes 22 Septiembre 2009
FRONTDAYS
www.frontdays.com
FRONTDAYS
Objetivo del curso Mostrar el potencial de los nuevos estndares, as como de los navegadores web de nueva generacin y su uso hoy en da, logrando mantener nuestras pginas web compatibles con navegadores menos avanzados.
FRONTDAYS FRONTDAYS
HTML 5
FRONTDAYS
HTML5 CSS3: cmo sacarles partido HTML5yyCSS3: cmo sacarles partido hoy hoy
FRONTDAYS FRONTDAYS
FRONTDAYS
Historia de HTML5
HTML4
1998
FRONTDAYS
Historia de HTML5
XHTML1
2000
FRONTDAYS
Historia de HTML5
XHTML2
2002
FRONTDAYS
Historia de HTML5
XForms
2003
FRONTDAYS
Historia de HTML5
WHATG
2004
FRONTDAYS
Historia de HTML5
HTML5
2007
FRONTDAYS
Reproducir video y audio Acceso a recursos: webcam, micrfono, etc Trabajar oine 3D Geolocalizacin Mejores subidas de cheros Drag and drop Complejos elementos de interaccin con formularios
FRONTDAYS
Final Draft en Octubre 2009 Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4 Google Wave iPhone
HTML5 CSS3: cmo sacarles partido HTML5yyCSS3: cmo sacarles partido hoy hoy
FRONTDAYS FRONTDAYS
FRONTDAYS
FRONTDAYS
FRONTDAYS
FRONTDAYS
HTML5 CSS3: cmo sacarles partido HTML5yyCSS3: cmo sacarles partido hoy hoy
FRONTDAYS FRONTDAYS
HTML 5 Novedades
FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html> :-)
FRONTDAYS
HTML5: Novedades
Tipos de contenido
Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
FRONTDAYS
HTML5: Novedades
Metadata content
dene la presentacin o el comportamiento del resto del documento, o relaciones del documento con otros documentos. base, command, link, meta, noscript, script, style, title
FRONTDAYS
HTML5: Novedades
Flow content
la mayora de los elementos usados en el cuerpo de un documento son de tipo ow. a, abbr address, article aside, audio, dialog, div, eldset, gure, footer, form, h1, h2, img, nav, p, script, section, select, small, span, strong, table, textarea, time, video,...
FRONTDAYS
HTML5: Novedades
Sectioning content
elementos que crean nuevas secciones en el documento article, aside, nav, section
FRONTDAYS
HTML5: Novedades
Heading content
elementos que denen la cabecera de una seccin h1, h2, h3, h4, h5, h6, hgroup
FRONTDAYS
HTML5: Novedades
Phrasing content
texto del documento junto con elementos que marcan el texto, dentro de un prrafo a, b, string, span, small, time, em,...
FRONTDAYS
HTML5: Novedades
Embedded content
elementos que importan otro recurso o contenido de otro vocabulario dentro del documento audio, canvas, embed, iframe, img, math, object, svg, video
FRONTDAYS
HTML5: Novedades
Interactive content
elementos destinados a interaccin con el usuario a, audio, button, details, embed, iframe, img, input, keygen, label,menu, object, select, textarea, video
FRONTDAYS
HTML5: Novedades
Nuevos elementos
FRONTDAYS
HTML5: Novedades
Elementos estructurales I
section representa una seccin del documento. Junto con h1, h2,..., h6 indica la estructura del documento. article representa una pieza de contenido independiente dentro de un documento. aside representa una pieza de contenido que esta menos relacionada con el resto de la pgina.
FRONTDAYS
HTML5: Novedades
Elementos estructurales II
hgroup representa el encabezado de una seccin. Agrupa varios elementos h1 - h6. header representa la cabecera de un documento o seccin. footer representa el pie de una seccin y puede contener informacin sobre el autor, copyright, etc.
FRONTDAYS
HTML5: Novedades
<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>
FRONTDAYS
HTML5: Novedades
FRONTDAYS
HTML5: Novedades
<body> <header> <h1>Web page</h1> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Articles</a></li> <li><a href="today.html">Today</a></li> <li><a href="successes.html">Successes</a></li> </ul> </nav> </header> <article> <p>...page content would be here...</p> </article> <footer> <p>Copyright 2006 The Example Company</p> <p><a href="about.html">About</a> <a href="policy.html">Privacy Policy</a> <a href="contact.html">Contact Us</a></p> </footer> </body>
FRONTDAYS
HTML5: Novedades
Nuevos elementos
canvas crea un lienzo donde es posible crear grcos u otras imgenes visuales al vuelo, mediante scripting.
FRONTDAYS
Problemas de accesibilidad
FRONTDAYS
FRONTDAYS
HTML5: Novedades Canvas - aplicaciones Efectos y transformaciones (Demo) Animaciones (Demo) Tipografas (Cufn)
FRONTDAYS
HTML5: Novedades
Nuevos elementos
video un mtodo nico para insertar video en la web.
FRONTDAYS
Atributos
poster autobuer autoplay loop controls
FRONTDAYS
FRONTDAYS
HTML5: Novedades Video - soporte Soportado por las ltimas versiones de casi todos los navegadores, excepto IE
FRONTDAYS
FRONTDAYS
HTML5: Novedades
Nuevos elementos
audio un mtodo nico para insertar audio en la web.
FRONTDAYS
Atributos
autobuer autoplay loop controls
FRONTDAYS
FRONTDAYS
HTML5: Novedades Audio - soporte Soportado por las ltimas versiones de casi todos los navegadores, excepto IE
FRONTDAYS
HTML5: Novedades
FRONTDAYS
HTML5: Novedades
FRONTDAYS
HTML5: Novedades
FRONTDAYS
HTML5: Novedades
Forms
Opera 10 demo
HTML5 CSS3: cmo sacarles partido HTML5yyCSS3: cmo sacarles partido hoy hoy
FRONTDAYS FRONTDAYS
HTML 5 APIs
FRONTDAYS
HTML5: APIs
APIs en navegadores
getElementsByClassName querySelector Almacenamiento de datos en el cliente, por sesin y persistente Mensajes entre documentos Drag-and-drop
FRONTDAYS
HTML5: APIs
getElementsByClassName(abrir)
<li id="uno"> <p>Link 1</p> <a href="#" class="abrir">Abrir link 1</a> </li> <li id="dos"> <p>Link 2</p> <a href="#" class="abrir">Abrir link 2</a> </li> <li id="tres"> <p>Link 3</p> <a href="#" class="abrir">Abrir link 3</a> </li>
FRONTDAYS
HTML5: APIs
querySelector(#dos .abrir)
<li id="uno"> <p>Link 1</p> <a href="#" class="abrir">Abrir link 1</a> </li> <li id="dos"> <p>Link 2</p> <a href="#" class="abrir">Abrir link 2</a> </li> <li id="tres"> <p>Link 3</p> <a href="#" class="abrir">Abrir link 3</a> </li>
FRONTDAYS
FRONTDAYS
FRONTDAYS
FRONTDAYS
FRONTDAYS
FRONTDAYS
FRONTDAYS FRONTDAYS
CSS 3
FRONTDAYS
HTML5 CSS3: cmo sacarles partido HTML5yyCSS3: cmo sacarles partido hoy hoy
FRONTDAYS FRONTDAYS
FRONTDAYS
Historia de CSS3
CSS1
1996
FRONTDAYS
Historia de CSS3
CSS2
1998
FRONTDAYS
Historia de CSS3
CSS3
2000 (WD)
FRONTDAYS
Historia de CSS3
CSS2.1
2002 (WD)
FRONTDAYS
CSS3: Principios
FRONTDAYS
CSS3: Principios
FRONTDAYS
CSS3: Principios
FRONTDAYS
CSS3: Principios
FRONTDAYS
CSS3: Principios
HTML5 CSS3: cmo sacarles partido HTML5yyCSS3: cmo sacarles partido hoy hoy
FRONTDAYS FRONTDAYS
CSS 3 Selectores
FRONTDAYS
CSS3: Selectores
Selectores en CSS1
de elemento: h1 { color: red; } de clase: h1.alert { color: red; } de ID: #alert { color: red; } descendientes y contextuales: h1 em { color: red; } pseudo-clases: a:link, a:visited, a:active, :rst-line, :rst-letter comodn: div * p
FRONTDAYS
CSS3: Selectores
Selectores en CSS2
selector universal (*): blockquote * { ... } de atributo: a[href="http://www.google.com/"] { ... } ms pseudo-clases: :rst-child, :hover, :focus, :active, :lang, :before, :after de hijos: div > p { ... } de hermanos: h1 + h2 { ... }
FRONTDAYS
CSS3: Selectores
FRONTDAYS
CSS3: Selectores
body > ol > li p - Selecciona cualquier elemento p que es descendiente de un elemento li que es hijo de un elemento ol que es hijo de un elemento body.
FRONTDAYS
CSS3: Selectores
p > * > em
FRONTDAYS
CSS3: Selectores
p > * > em - Selecciona cualquier elemento em que es hijo de cualquier elemento que es hijo de un elemento p.
FRONTDAYS
CSS3: Selectores
a[title~="Mail"]
FRONTDAYS
CSS3: Selectores
a[title~="Mail"] - Selecciona cualquier elemento a con un atributo title que contiene la palabra Mail.
FRONTDAYS
CSS3: Selectores
Selectores en CSS3 I
nuevos selectores de atributo: comienzo del atributo a[href^="ftp:"] { ... } nal del atributo a[href$=".edu"] { ... } cualquier cadena contenido img[src*="photos"] { ... }
FRONTDAYS
CSS3: Selectores
Selectores en CSS3 II
nuevas pseudo-clases: :enabled, :disabled, :checked Permiten cambiar la apariencia de los inputs de formulario, segn su estado. No soportadas en IE7 ni en IE8
HTML5 CSS3: cmo sacarles partido HTML5yyCSS3: cmo sacarles partido hoy hoy
FRONTDAYS FRONTDAYS
CSS 3 Mdulos
FRONTDAYS
CSS3: Mdulos
Colores Modelo de caja Fondos y bordes Tipografa y efectos de texto Layout multicolumna Animaciones y transiciones
FRONTDAYS
CSS3: Colores
Colores en CSS2
Hexadecimal - #RRGGBB Hexadecimal, shorthand - #RGB RGB- rgb(red, green, blue) Nombres de colores - white, red, black, etc.
FRONTDAYS
CSS3: Colores
HLS - hsl(hue, saturation, lightness) CMYK - cmyk(cyan, magenta, yellow, black) HLSA - hlsa(hue, saturation, lightness, alpha) RGBA - rgba(red, green, blue, alpha)
FRONTDAYS
CSS3: Colores
Formato HLS
Intensidad, luz y saturacin Sencillo de manipular Existente en programas de edicin de imgenes, como Adobe Photoshop Adecuado para crear paletas de colores: slo tienes que elegir el color bsico y no sus variantes claras/oscuras
FRONTDAYS
CSS3: Colores
Formato CMYK
Cyan, magenta, amarillo y negro Formato muy bien conocido por los diseadores Nos permite denir cmo nuestros colores sern impresos
FRONTDAYS
CSS3: Colores
Aaden un cuarto parmetro: alpha El canal alpha dene la transparencia del color, va de 0 (totalmente transparente) a 1 (totalmente opaco) La adicin del canal alpha ofrece muchas nuevas posibilidades a los diseadores visuales.
FRONTDAYS
CSS3: Colores
FRONTDAYS
CSS3: Colores
Opacity es una propiedad de CSS3 que modica la transparencia de todo el elemento. Por ejemplo un prrafo con opacity: 0.5 tendra su fondo semitrans, pero tambin su contenido (texto) El canal alpha nos permite modicar la transparencia del color de fondo del elemento, con lo que el contenido del elemento no se vera afectado.
FRONTDAYS
CSS3: Colores
Soporte en navegadores
Las ltimas versiones de Safari, Opera, Firefox y Chrome soportan HSL, HSLA y RGBA IE no soporta ninguno de los nuevos formatos Ningn navegador soporta an CMYK
FRONTDAYS
Modelo de caja
IE box model W3C box model Nueva propiedad: box-sizing: content-box / border-box
FRONTDAYS
Fondos y bordes
FRONTDAYS
Degradados
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#d0d0d0), to(#ffffff)); background: -moz-linear-gradient(20% center, 30% center, from(blue), to (yellow)) no-repeat; Soportado por Safari y firefox.
FRONTDAYS
Bordes redondeados
-moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
FRONTDAYS
FRONTDAYS
Imgenes de borde
border-image: border-corner-image:
FRONTDAYS
Imgenes de fondo
Tamao
-o-background-size, -webkit-background-size, -khtml-background-size, -moz-background-size
FRONTDAYS
Layout multicolumna
FRONTDAYS
FRONTDAYS
Los mejores cursos en desarrollo frontend impartidos por los mejores profesionales
www.frontdays.com