HTML5 y CSS3: cómo sacarles partido hoy Jose Florido Madrid Martes 22 Septiembre 2009 www.frontdays.com
Objetivo del curso Mostrar el potencial de los nuevos estándares, así como de los navegadores web de nueva generación y su uso hoy en día, logrando mantener nuestras páginas web compatibles con navegadores menos avanzados.
HTML 5
Primera parte: HTML5 Historia Características Novedades APIs Ejercicio práctico: creación de una página con HTML5
HTML5 y CSS3: cómo sacarles partido partido hoy hoy HTML 5 Historia de HTML 5
Historia de HTML5 HTML4 1998
Historia de HTML5 XHTML1 2000
Historia de HTML5 XHTML2 2002
Historia de HTML5 XForms 2003
Historia de HTML5 WHATG 2004
Historia de HTML5 HTML5 2007
Historia de HTML5 Hoy día, las aplicacione web necesitan: Reproducir video y audio Acceso a recursos: webcam, micrófono, etc Trabajar offline 3D Geolocalización Mejores subidas de ficheros Drag and drop Complejos elementos de interacción con formularios
Historia de HTML5 2022? Final Draft en Octubre 2009 Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4 Google Wave iphone
HTML5 y CSS3: cómo sacarles partido partido hoy hoy HTML 5 Principales características
HTML5: Principales características Compatibilidad Evolución, no revolución
HTML5: Principales características Utilidad Resolver problemas reales
HTML5: Principales características Interoperabilidad Definir el comportamiento de los UA Gestión de errores
HTML5: Principales características Acceso universal Independencia del medio, i18n, accesible
HTML5 y CSS3: cómo sacarles partido partido hoy hoy HTML 5 Novedades
HTML5: Novedades Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
HTML5: Novedades Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
HTML5: Novedades Doctype <!DOCTYPE html> :-)
HTML5: Novedades Tipos de contenido Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
HTML5: Novedades Metadata content define la presentación o el comportamiento del resto del documento, o relaciones del documento con otros documentos. base, command, link, meta, noscript, script, style, title
HTML5: Novedades Flow content la mayoría de los elementos usados en el cuerpo de un documento son de tipo flow. a, abbr address, article aside, audio, dialog, div, fieldset, figure, footer, form, h1, h2, img, nav, p, script, section, select, small, span, strong, table, textarea, time, video,...
HTML5: Novedades Sectioning content elementos que crean nuevas secciones en el documento article, aside, nav, section
HTML5: Novedades Heading content elementos que definen la cabecera de una sección h1, h2, h3, h4, h5, h6, hgroup
HTML5: Novedades Phrasing content texto del documento junto con elementos que marcan el texto, dentro de un párrafo a, b, string, span, small, time, em,...
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
HTML5: Novedades Interactive content elementos destinados a interacción con el usuario a, audio, button, details, embed, iframe, img, input, keygen, label,menu, object, select, textarea, video
HTML5: Novedades Nuevos elementos Elementos estructurales Canvas Video Audio
HTML5: Novedades Elementos estructurales I section representa una sección 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 página.
HTML5: Novedades Elementos estructurales II hgroup representa el encabezado de una sección. Agrupa varios elementos h1 - h6. header representa la cabecera de un documento o sección. footer representa el pie de una sección y puede contener información sobre el autor, copyright, etc.
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>
HTML5: Novedades Elementos estructurales III nav representa una sección del documento que contiene navegación dialog usado para marcar una conversación figure usado para asociar una description textual o subtítulos a algún elemento embedido, como vídeos o imágenes.
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>
HTML5: Novedades Nuevos elementos canvas crea un lienzo donde es posible crear gráficos u otras imágenes visuales al vuelo, mediante scripting.
HTML5: Novedades Canvas - accesibilidad Contenido alternativo <canvas id="a_canvas" width="400" height="300"> <p>ops! No canvas support, bad browser!</p> </canvas> Problemas de accesibilidad
HTML5: Novedades Canvas - soporte Soporte extenso por parte de navegadores * IE utilizando la librería excanvas.js
HTML5: Novedades Canvas - aplicaciones Efectos y transformaciones (Demo) Animaciones (Demo) Tipografías (Cufón)
HTML5: Novedades Nuevos elementos video un método único para insertar video en la web.
HTML5: Novedades Video - atributos <video src="http://www.test.com/video.wmv"> your browser does not support the video tag </video> Atributos poster autobuffer autoplay loop controls
HTML5: Novedades Video - formato / codecs Ogg Theora (Chrome, Firefox, Opera) H.264 (Chrome, Safari)
HTML5: Novedades Video - soporte Soportado por las últimas versiones de casi todos los navegadores, excepto IE
HTML5: Novedades Video - degradación grácil <video controls> <source src="zombie.ogg" type="video/ogg"/> <source src="zombie.mp4" type="video/mp4"/> <embed src="http://blip.tv/play/ayglzbmu8hw" type="application/x-shockwave-flash" width="500" height="396" allowscriptaccess="always" allowfullscreen="true"/> </video>
HTML5: Novedades Nuevos elementos audio un método único para insertar audio en la web.
HTML5: Novedades Audio - atributos <audio src="http://www.test.com/video.wmv" controls></audio> Atributos autobuffer autoplay loop controls
HTML5: Novedades Audio - demo HTML5 Audio player
HTML5: Novedades Audio - soporte Soportado por las últimas versiones de casi todos los navegadores, excepto IE
HTML5: Novedades Nuevos reglas para el código En HTML4 / XHTML1: <li> <p><a href="http://www.google.com">ir a google.com</a></p> <a href="http://www.google.com"><img src="" alt="logo de Google" /></a> </li>
HTML5: Novedades Nuevos reglas para el código En HTML5: <li> <a href="http://www.google.com"> <p>ir a google.com</p> <img src="" alt="logo de Google" /> </a> </li>
HTML5: Novedades Elementos que desaparecen basefont big center font s strike tt u frame frameset noframes acronym applet isindex dir
HTML5: Novedades Forms Opera 10 demo
HTML5 y CSS3: cómo sacarles partido partido hoy hoy HTML 5 APIs
HTML5: APIs APIs en navegadores getelementsbyclassname queryselector Almacenamiento de datos en el cliente, por sesión y persistente Mensajes entre documentos Drag-and-drop
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>
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>
HTML5: APIs Almacenamiento de datos en el cliente, por sesión y persistente Aplicaciones web offline Menor latencia Mejor rendimiento Mayor privacidad Safari Notes demo
HTML5: APIs Mensajes entre documentos Cross-domain Sin necesidad de configuración postmessage() John Resig s messaging demo
HTML5: APIs Drag-and-drop Drag and drop nativo del sistema Arrastrar objetos al navegador y entre ventanas del navegador Drag-and-drop demo 280 slides video demo
HTML5: Ejercicio Estructura
HTML5: Ejercicio HTML4
HTML5: Ejercicio HTML5
CSS 3
Segunda parte: CSS3 Historia Selectores Módulos y nuevas propiedades Ejercicio práctico: aplicación de CSS3 a una página
HTML5 y CSS3: cómo sacarles partido partido hoy hoy CSS 3 Historia de CSS 3
Historia de CSS3 CSS1 1996
Historia de CSS3 CSS2 1998
Historia de CSS3 CSS3 2000 (WD)
Historia de CSS3 CSS2.1 2002 (WD)
CSS3: Principios Compatibilidad Hacia delante y hacia atrás
CSS3: Principios Complementariedad Cambiar CSS si cambiar HTML
CSS3: Principios Independencia De plataforma y de dispositivo
CSS3: Principios Simplicidad, flexibilidad, riqueza Sencillo y potente
CSS3: Principios Accesibilidad Posibilitar acceso universal
HTML5 y CSS3: cómo sacarles partido partido hoy hoy CSS 3 Selectores
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, :first-line, :first-letter comodín: div * p
CSS3: Selectores Selectores en CSS2 selector universal (*): blockquote * {... } de atributo: a[href="http://www.google.com/"] {... } más pseudo-clases: :first-child, :hover, :focus, :active, :lang, :before, :after de hijos: div > p {... } de hermanos: h1 + h2 {... }
CSS3: Selectores Selectores en CSS1 y CSS2 body > ol > li p
CSS3: Selectores Selectores en CSS1 y CSS2 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.
CSS3: Selectores Selectores en CSS1 y CSS2 p > * > em
CSS3: Selectores Selectores en CSS1 y CSS2 p > * > em - Selecciona cualquier elemento em que es hijo de cualquier elemento que es hijo de un elemento p.
CSS3: Selectores Selectores en CSS1 y CSS2 a[title~="mail"]
CSS3: Selectores Selectores en CSS1 y CSS2 a[title~="mail"] - Selecciona cualquier elemento a con un atributo title que contiene la palabra Mail.
CSS3: Selectores Selectores en CSS3 I nuevos selectores de atributo: comienzo del atributo a[href^="ftp:"] {... } final del atributo a[href$=".edu"] {... } cualquier cadena contenido img[src*="photos"] {... }
CSS3: Selectores Selectores en CSS3 II nuevas pseudo-clases: :enabled, :disabled, :checked Permiten cambiar la apariencia de los inputs de formulario, según su estado. No soportadas en IE7 ni en IE8
HTML5 y CSS3: cómo sacarles partido partido hoy hoy CSS 3 Módulos
CSS3: Módulos Algunos otros módulos de CSS3 Colores Modelo de caja Fondos y bordes Tipografía y efectos de texto Layout multicolumna Animaciones y transiciones
CSS3: Colores Colores en CSS2 Hexadecimal - #RRGGBB Hexadecimal, shorthand - #RGB RGB- rgb(red, green, blue) Nombres de colores - white, red, black, etc.
CSS3: Colores Nuevos formatos de colores en CSS3 HLS - hsl(hue, saturation, lightness) CMYK - cmyk(cyan, magenta, yellow, black) HLSA - hlsa(hue, saturation, lightness, alpha) RGBA - rgba(red, green, blue, alpha)
CSS3: Colores Formato HLS Intensidad, luz y saturación Sencillo de manipular Existente en programas de edición de imágenes, como Adobe Photoshop Adecuado para crear paletas de colores: sólo tienes que elegir el color básico y no sus variantes claras/oscuras
CSS3: Colores Formato CMYK Cyan, magenta, amarillo y negro Formato muy bien conocido por los diseñadores Nos permite definir cómo nuestros colores serán impresos
CSS3: Colores Formatos RGBA y HSLA Añaden un cuarto parámetro: alpha El canal alpha define la transparencia del color, va de 0 (totalmente transparente) a 1 (totalmente opaco) La adición del canal alpha ofrece muchas nuevas posibilidades a los diseñadores visuales.
CSS3: Colores Si no hay soporte RGBA background-color: rgb(0%, 0%, 100%); background-color: rgba(0%, 0%, 100%, 0.5);
CSS3: Colores RGBA y HSLA vs OPACITY Opacity es una propiedad de CSS3 que modifica la transparencia de todo el elemento. Por ejemplo un párrafo con opacity: 0.5 tendría su fondo semitrans, pero también su contenido (texto) El canal alpha nos permite modificar la transparencia del color de fondo del elemento, con lo que el contenido del elemento no se vería afectado.
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 Ningún navegador soporta aún CMYK
CSS3: Modelo de caja Modelo de caja IE box model W3C box model Nueva propiedad: box-sizing: content-box / border-box Soportado en FF 1.1, Safari 3, IE 8, Opera 9.5
CSS3: Fondos y bordes Fondos y bordes Degradados Bordes redondeados Sombras Imágenes de borde Imágenes de fondo
CSS3: Fondos y bordes 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.
CSS3: Fondos y bordes 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
CSS3: Fondos y bordes Sombras (de caja) box-shadow: 10px 10px 5px #888;
CSS3: Fondos y bordes Imágenes de borde border-image: border-corner-image:
CSS3: Fondos y bordes Imágenes de fondo Tamaño -o-background-size, -webkit-background-size, -khtml-background-size, -moz-background-size Múltiples imágenes de fondo background: url(img1.gif) top left no-repeat, url(img2.gif) bottom left no-repeat; Soportado por Safari
CSS3: Layout multicolumna Layout multicolumna Número de columnas Separacón entre columnas Bordes separadores -moz-column-count -moz-column-width -moz-column-gap -webkit-column-count -webkit-column-width -webkit-column-gap
CSS3: Tipografía y efectos de texto Tipografía y efectos de texto Sombras en texto Uso de tipografías (@font-face)
Muchas gracias por venir!
Los mejores cursos en desarrollo frontend impartidos por los mejores profesionales www.frontdays.com