HTML5 y CSS3: como sacarles partido hoy

FRONTDAYS

HTML5 y CSS3:cómo sacarles partido hoyJose FloridoMadrid · Martes 22 Septiembre 2009

www.frontdays.com

http://www.frontdays.com


HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS

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.

Objetivo del curso

FRONTDAYS

HTML 5



‣ Historia ‣ Características‣ Novedades‣ APIs‣ Ejercicio práctico: creación de una página con HTML5

Primera parte: HTML5


HTML 5Historia de HTML 5



Historia de HTML5

HTML41998


Historia de HTML5

XHTML12000


Historia de HTML5

XHTML22002


Historia de HTML5

XForms2003


Historia de HTML5

WHATG2004


Historia de HTML5

HTML52007


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


HTML 5Principales características



HTML5: Principales características

CompatibilidadEvolución, no revolución



UtilidadResolver problemas reales



InteroperabilidadDefinir el comportamiento de los UA

Gestión de errores



Acceso universalIndependencia del medio, i18n, accesible


HTML 5Novedades



HTML5: Novedades

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

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 contentdefine 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 contentla 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 contentelementos que crean nuevas secciones en el documento

article, aside, nav, section


HTML5: Novedades

Heading contentelementos que definen la cabecera de una sección

h1, h2, h3, h4, h5, h6, hgroup


HTML5: Novedades

Phrasing contenttexto del documento junto con elementos que marcan el texto, dentro de un párrafo

a, b, string, span, small, time, em,...


HTML5: Novedades

Embedded contentelementos que importan otro recurso o contenido de otro vocabulario dentro del documento

audio, canvas, embed, iframe, img, math, object, svg, video


HTML5: Novedades

Interactive contentelementos 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 Isection 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 IIhgroup 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 IIInav 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 elementoscanvas 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)

http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html

http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html

http://modern-carpentry.com/workshop/html5/waveform/

http://modern-carpentry.com/workshop/html5/waveform/

http://cufon.shoqolate.com/generate/

http://cufon.shoqolate.com/generate/


HTML5: Novedades

Nuevos elementosvideo 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

http://www.ananova.com/about/vap_windows_check.wmv



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>

http://blip.tv/play/AYGLzBmU8hw

http://blip.tv/play/AYGLzBmU8hw


HTML5: Novedades

Nuevos elementosaudio 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



http://dev.w3.org/html5/spec/Overview.html#attr-media-autobuffer

http://dev.w3.org/html5/spec/Overview.html#attr-media-autobuffer

http://dev.w3.org/html5/spec/Overview.html#attr-media-autoplay

http://dev.w3.org/html5/spec/Overview.html#attr-media-autoplay

http://dev.w3.org/html5/spec/Overview.html#attr-media-loop

http://dev.w3.org/html5/spec/Overview.html#attr-media-loop

http://dev.w3.org/html5/spec/Overview.html#attr-media-controls

http://dev.w3.org/html5/spec/Overview.html#attr-media-controls


HTML5: Novedades

Audio - demo

HTML5 Audio player

http://moztw.org/demo/audioplayer/

http://moztw.org/demo/audioplayer/


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>

http://www.google.com





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 desaparecenbasefontbigcenterfontsstrikettu frame

framesetnoframes acronymappletisindexdir


HTML5: Novedades

Forms

Opera 10 demo

http://christopherj.us/test/

http://christopherj.us/test/


HTML 5APIs



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

http://webkit.org/demos/sticky-notes/index.html

http://webkit.org/demos/sticky-notes/index.html


HTML5: APIs

Mensajes entre documentos

‣ Cross-domain

‣ Sin necesidad de configuración

‣ postMessage()

‣ John Resig´s messaging demo

http://ejohn.org/apps/message/

http://ejohn.org/apps/message/


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

http://html5demos.com/drag

http://html5demos.com/drag

http://www.youtube.com/watch?v=Tg6okHlWwv0&feature=player_embedded

http://www.youtube.com/watch?v=Tg6okHlWwv0&feature=player_embedded


HTML5: Ejercicio

Estructura


HTML5: Ejercicio

HTML4


HTML5: Ejercicio

HTML5

FRONTDAYS

CSS 3



‣ Historia ‣ Selectores‣ Módulos y nuevas propiedades‣ Ejercicio práctico: aplicación de CSS3 a una página

Segunda parte: CSS3


CSS 3Historia de CSS 3



Historia de CSS3

CSS11996


Historia de CSS3

CSS21998


Historia de CSS3

CSS32000 (WD)


Historia de CSS3

CSS2.12002 (WD)


CSS3: Principios

CompatibilidadHacia delante y hacia atrás


CSS3: Principios

ComplementariedadCambiar CSS si cambiar HTML


CSS3: Principios

IndependenciaDe plataforma y de dispositivo


CSS3: Principios

Simplicidad, flexibilidad, riquezaSencillo y potente


CSS3: Principios

AccesibilidadPosibilitar acceso universal


CSS 3Selectores



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 atributoa[href^="ftp:"] { ... }

final del atributoa[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


CSS 3Mó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



Degradadosbackground: -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.



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



Sombras (de caja)box-shadow: 10px 10px 5px #888;



Imágenes de bordeborder-image:border-corner-image:



Imágenes de fondoTamaño-o-background-size, -webkit-background-size, -khtml-background-size, -moz-background-size

Múltiples imágenes de fondobackground: 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!

FRONTDAYS

www.frontdays.com

Los mejores cursos en desarrollo frontendimpartidos por los mejores profesionales



HTML5 y CSS3: como sacarles partido hoy

Technology

Transcript of HTML5 y CSS3: como sacarles partido hoy