Download CURSO HTML 5 / CSS 3...
CURSO HTML 5 / CSS 3 Abril 2014
Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
HTML 5 / CSS 3
1/73
ÍNDICE:
HTML 5.................................................................................................................................................................. 3 PARTE 1: NOVEDADES .................................................................................................................................... 3 1. DECLARACIÓN Y CODIFICACIÓN ...................................................................................................... 4 2. ELEMENTOS ESTRUCTURALES .......................................................................................................... 5 3. OTROS ELEMENTOS ............................................................................................................................ 12 4. FORMULARIOS...................................................................................................................................... 14 4. AUDIO Y VIDEO .................................................................................................................................... 20 5. CANVAS.................................................................................................................................................. 23 7. API’s......................................................................................................................................................... 26 PARTE 2: SOPORTE ........................................................................................................................................ 28 1. SOPORTE EN NAVEGADORES ........................................................................................................... 29 2. MÁS RECURSOS .................................................................................................................................... 30 CSS 3..................................................................................................................................................................... 31 PARTE 1: INTRODUCCIÓN CSS 3 ................................................................................................................. 31 1. INTRODUCCIÓN:................................................................................................................................... 32 PARTE 2: NOVEDADES .................................................................................................................................. 34 1. BORDES REDONDEADOS.................................................................................................................... 35 2. IMÁGENES EN BORDES....................................................................................................................... 37 3. AJUSTES DE LOS BORDES .................................................................................................................. 39 4. MÚLTIPLES IMÁGENES EN EL FONDO ............................................................................................ 40 5. SOMBRAS EN BLOQUES...................................................................................................................... 41 6. SOMBRAS EN TEXTOS......................................................................................................................... 42 7. CONTORNO DE TEXTO........................................................................................................................ 43 8. CONTORNO DE BLOQUES .................................................................................................................. 44 9. TIPOGRAFÍAS PERSONALIZADAS .................................................................................................... 45 10. RGBA ..................................................................................................................................................... 46 11. HSLA...................................................................................................................................................... 48 12. COLUMNAS MÚLTIPLES ................................................................................................................... 49 13. TAMAÑO DE BLOQUE ....................................................................................................................... 50 14. REDIMENSIONAMIENTO DE BLOQUE ........................................................................................... 51 15. GRADIENTES ....................................................................................................................................... 52 16. REFLEJOS y MÁSCARAS.................................................................................................................... 54 17. FILTROS ................................................................................................................................................ 57 18. TRANSFORMACIONES 2D................................................................................................................. 58 19. TRANSFORMACIONES 3D................................................................................................................. 60 20. TRANSICIONES ................................................................................................................................... 61 21. KEYFRAMES ........................................................................................................................................ 63 22. MEDIA QUERY .................................................................................................................................... 65 PARTE 3: SELECTORES.................................................................................................................................. 66 1. LISTA DE SELECTORES....................................................................................................................... 67 Parte 4: SOPORTE Y RECURSOS ................................................................................................................... 69 1. SOPORTE ................................................................................................................................................ 70 2. RECURSOS ÚTILES ............................................................................................................................... 71 3. BONUS..................................................................................................................................................... 73
HTML 5 / CSS 3
2/73
HTML 5
PARTE 1: NOVEDADES
HTML 5 / CSS 3
3/73
1. DECLARACIÓN Y CODIFICACIÓN El doctype se reduce a la mínima expresión:
Lo mismo con la codificación de caracteres:
Por lo tanto, si en nuestra plantilla base antes usábamos: XHTML 1.0 Hola
Ahora lo vamos a reducir a: HTML5 Hola
HTML 5 / CSS 3
4/73
2. ELEMENTOS ESTRUCTURALES Hasta ahora, utilizábamos el elemento para agrupar diversos bloques información y aplicar propiedades CSS. Sin embargo, estos bloques no tenían ningún significado semántico. Con los nuevos elementos estructurales de HTML 5, vamos a poder sustituir la mayor parte de los elementos y dotar a nuestro documento de una estructura semántica adecuada. Antes (“divitis”, en muchos casos, aguda):
Ahora (utilizaremos los elementos estructurales , cuando sea oportuno, para dar sentido y significado a los contenidos):
HTML 5 / CSS 3
5/73
ARTICLE: El elemento representa una composición autónoma en un documento, página, aplicación o sitio web, con intención de poder ser reutilizado (por ejemplo, en un RSS). Puede utilizarse en un artículo de un foro, revista, artículo de periódico, entrada (post) de un blog, comentario escrito por un usuario, widget interactivo o gadget e incluso en cualquier otro elemento independiente de contenido. Cuando existen elementos anidados, los elementos interiores estarían relacionados con los exteriores (p.e un que contenga un artículo de un blog, contendrá también para los comentarios de un usuario). Antes: Apúntate al curso de CSS 3 y HTML 5 […contenido del post…]
Ahora: Apúntate al curso de CSS 3 y HTML 5 […contenido del post…]
SECTION: El elemento representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido, habitualmente con un encabezado. Se recomienda usar en vez de cuando tenga sentido sindicar los contenidos del elemento. El elemento no es un elemento contenedor genérico. Si sólo se necesita el elemento para aplicar estilos, entonces se deberá utilizar el elemento .
Antes: [listado de las 5 noticias más recientes] [listado de los 5 eventos más recientes] [listado de las 5 entrevistas más recientes]
HTML 5 / CSS 3
6/73
Ahora: [listado de las 5 noticias más recientes] [listado de los 5 eventos más recientes] [listado de las 5 entrevistas más recientes]
HEADER: El elemento representa un grupo introductorio de información o también puede usarse para agrupar ayudas de navegación. En principio está pensado para que se incluya el encabezado de sección (- o ), pero no es obligatorio. También puede usarse para agrupar la tabla de contenidos de una sección, un formulario de búsqueda o logotipos relevantes. El elemento no crea una nueva sección
Antes: Nombre Empresa [menú idiomas, auxiliar...]
Ahora: Nombre Empresa [menú idiomas, auxiliar...]
FOOTER: El elemento representa el pie de la sección de contenido predecesora más cercana, o la sección del contenido raiz. Normalmente, el elemento contiene información acerca de su sección, como el autor, enlaces a documentos relacionados, licencias, etc. También es posible incluir la información que habitualmente se incluye en el elemento (información de contacto del autor o editor, por ejemplo). El elemento no tiene por que aparecer en el final de la sección.
HTML 5 / CSS 3
7/73
Cuando el elemento contiene secciones enteras, éstas representan apéndices, índices, acuerdos de licencias y otro contenido similar. El elemento no crea una nueva sección.
Antes: Copyright.. ./ imagen... / texto....
Ahora: Copyright... /
imagen... /
texto....
NAV: El elemento representa una sección de la página que contiene enlaces de navegación a zonas de la misma página o a otras páginas. No todos los grupos de enlaces de una página tienen que implementarse con el elemento . Sólo aquellas secciones que contengan los bloques principales de navegación. En el caso de los típicos enlaces del “menú auxiliar” (portada, aviso legal, etc…), con el elemento sería suficiente (aunque podemos utilizar además, ). Algunos agentes de usuario (como los lectores de pantalla, por ejemplo), omitirán la lectura de los elementos en una primera lectura (como si hubiéramos implementado un salto1 de contenido).
Antes: quiénes somos servicios noticias
Ahora: quiénes somos servicios noticias
1
http://www.webaim.org/techniques/skipnav/
HTML 5 / CSS 3
8/73
ASIDE: El elemento representa una sección de la página cuyo contenido está relacionado tangencialmente con el contenido que tiene a su alrededor, pero se considera contenido independiente, adicional. Se puede usar para implementar barras laterales, publicidad, elementos con efectos tipográficos (como las citas) No es adecuado utilizarlo para estructurar contenido explicativo, porque forma parte del contenido principal.
Antes: [... diferentes bloques de publicidad...]
Ahora: [... diferentes bloques de publicidad...]
FIGURE / FIGCAPTION: El elemento permite asociar contenido embebido (diagramas, ilustraciones, fotos, video, audio, citas…) con un texto. El elemento se utilizará para implementar el texto asociado al contenido embebido.
Antes: Pie de foto
Ahora: Pie de foto
HTML 5 / CSS 3
9/73
TIME: El elemento representa una fecha/hora2 en base al calendario Gregoriano. (El elemento desapareció3 de la especificación en octubre de 20114 y volvió al mes siguiente5) En la especificación HTML 5 se contemplan diferentes maneras6 de implementar las fechas/horas.
Antes: Apúntate al curso de CSS 3 y HTML 5 26 de abril de 2012 [...contenido del post...]
Ahora: Apúntate al curso de CSS 3 y HTML 5 26 de abril de 2010 [...contenido del post...]
PICTURE: El elemento 7 es de reciente creación y tiene como objetivo dar una solución al Responsive Design de las imágenes. Aún está en desarrollo y el soporte es prácticamente nulo: Texto Accessible Alternativo
Y mediante el atributo srcset8 (también de nueva creación), es posible discriminar las imágenes en base a la densidad de píxel (retina): 2 3 4 5 6
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element http://www.iandevlin.com/blog/2011/10/html5/on-the-disappearance-of-html5 http://www.brucelawson.co.uk/2011/goodbye-html5-time-hello-data/ http://www.brucelawson.co.uk/2011/the-return-of-time/ http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-
time-string 7
http://www.w3.org/TR/html-picture-element/
HTML 5 / CSS 3
10/73
Texto Accessible Alternativo
EJEMPLO GLOBAL: Página en HTML 49 vs. Página en HTML 510
8 9 10
http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ http://diveintohtml5.info/examples/blog-original.html http://diveintohtml5.info/examples/blog-html5.html
HTML 5 / CSS 3
11/73
3. OTROS ELEMENTOS Algunos elementos son nuevos y otros se han reutilizado, dejando atrás su función como elemento de presentación para convertirse en elementos semánticos11 12.
b El elemento representa un fragmento de texto que se resalta por ser importante en relación al contenido: palabras clave de un documento, nombres de productos en una revisión del mismo, o cualquier otro fragmento de texto que se represente en negrita en modo escrito. Caracoles Lentos Los Caracoles Lentos son un nuevo producto de la empresa alimenticia....
i El elemento representa un fragmento de texto en voz alternativa o contenido que se presenta con itálica en modo escrito: palabras en otro idioma (utilizando el atributo lang), términos técnicos y taxonómicos, notación musical, pensamientos, cambios en el estado de ánimo, referencia a contenido escrito a mano... Es recomendable utilizar clases para indicar el significado que se le quiere dar al elemento en cada caso (de este modo se demuestra que no se está utilizando como elemento de diseño): Ayer probé un plato de escargots, caracoles de la familia de los Helix aspersa.
small El elemento se utilizará para el contenido llamado comúnmente de "letra pequeña" (avisos legales y similares) y para comentarios adicionales a un texto (no confundirlo con el elemento ). En definitiva, para aquellos contenidos que en modo escrito se representan con letra más pequeña.
Creative Commons Attribution Share-alike license
El diseño está basado en la plantilla Keko de Mkels (http://www.mkels.com/demo/)
11 12
http://html5doctor.com/i-b-em-strong-element/ http://html5doctor.com/small-hr-element/
HTML 5 / CSS 3
12/73
hr El elemento representa una separación temática entre contenidos.
Otros elementos Debido a que todavía no hay un borrador definitivo sobre la especificación HTML 5, multitud de nuevos elementos están continuamente apareciendo y desapareciendo de la especificación. Siempre podemos consultar el Glosario13 de HTML 5. : representa un contenido remarcado14 que es relevante para el usuario. : marca un texto como información adicional. : representa un comando que el usuario puede ejecutar. : permite la inserción de anotaciones para lenguajes asiáticos.
13 14
http://html5doctor.com/glossary/ http://html5doctor.com/draw-attention-with-mark/
HTML 5 / CSS 3
13/73
4. FORMULARIOS HTML 5 aumenta los tipos de campos de formulario15 y ofrece nuevas funcionalidades16.
input: email: Dirección de e-mail.
url: Dirección URL.
tel: Número telefónico
15 16
http://diveintohtml5.info/forms.html http://miketaylr.com/pres/html5/forms2.html
HTML 5 / CSS 3
14/73
number: Aumenta o añade un número, mediante botones:
range: Selecciona un valor dentro del rango especificado:
datetime /time / date / month / week: Selección de Fecha, hora, día, mes o semana concreto en un calendario:
color: Provee mecanismos para que el usuario inserte un color RGB
HTML 5 / CSS 3
15/73
search: Campo de buscador.
datalist Se carga una lista de opciones asociadas a un campo input y permite un autocompletado del texto que escribe el usuario, si éste se encuentra en la lista de opciones que ofrecemos17:
También es posible visualizar una etiqueta asociada a cada valor:
Las opciones pueden guardarse en un archivo xml y enlazar el elemento a dicho archivo18.
multiple: Para los campos de tipo archivo, será posible seleccionar más de un archivo de una vez:
Para ofrecer un método alternativo a navegadores que no soporten este atributo, se puede utilizar un script js, como el jQuery Multiple File Upload Plugin 19
output El campo output se utiliza para representar el resultado de una operación (por ejemplo, una multiplicación de 2 campos, cálculo de edad20, etc... mediante javascript)
17 18 19 20
http://dev.opera.com/articles/view/an-html5-style-google-suggest/ http://html5.org/demos/dev.opera.com/article-examples.html http://www.fyneworks.com/jquery/multiple-file-upload/ http://www.pageresource.com/html5/output-tutorial/
HTML 5 / CSS 3
16/73
keygen Crea una pareja de Clave Pública y Clave Privada21. La clave privada se encripta y se almacena en la base de datos local de contraseñas. La clave pública se envía con el formulario.
progress y meter Estos dos elementos son similares y se utilizan para representar un progreso. Normalmente progress representa una barra de progresos, para indicar el porcentaje completado de una tarea, mientras que meter es un indicador genérico22.
Nuevos Atributos Min y Max Determina el valor máximo y mínimo que puede tener un campo (tal y como hemos visto en los input de tipo number y range):
Step Indica el incremento entre un valor y el siguiente:
placeholder Permite incluir un texto a modo de ayuda para rellenar un campo de formulario:
La diferencia entre placeholder y el atributo value (que utilizábamos anteriormente), es que no existe valor por defecto en el campo y cuando el usuario gane el foco de este campo, el texto desaparece. El atributo placeholder no debe usarse como alternativa al elemento Cada uno tiene una misión diferente.
autofocus Permite forzar al navegador a que sitúe el foco en un campo de formulario determinado, de manera nativa (sin necesidad de utilizar javascript):
21 22
http://wufoo.com/html5/elements/4-keygen.html http://html5doctor.com/measure-up-with-the-meter-tag/
HTML 5 / CSS 3
17/73
autocomplete Se utiliza para activar o desactivar el autocompletado de un formulario o de un campo concreto:
spellcheck23 Activa o desactiva la propiedad de revisión ortográfica en un contenido editable: textarea o un input type="text":
Validación de formularios24 25 Además de las validaciones que proporcionan por sí mismos los campos y atributos vistos hasta ahora, existen 3 atributos extra para la validación de un formulario:
required Con el objetivo de facilitar la validación del formulario, el atributo required obliga a rellenar el campo al que se aplica el atributo.
Este atributo sólo se puede aplicar a los campos de tipo text, search, url, telephone, email, password, date pickers, number, checkbox, radio, y file.
novalidate Este atributo especifica que un formulario o un campo input no se debe validar cuando se ejecute el formulario. E-mail:
Este atributo sólo se puede aplicar a: form, text, search, url, telephone, email, password, date pickers, range, y color.
23 24 25
http://blog.whatwg.org/the-road-to-html-5-spellchecking http://www.alistapart.com/d/forward-thinking-form-validation/enhanced.html http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/
HTML 5 / CSS 3
18/73
pattern Podemos crear un patrón de entrada de datos, basado en expresiones regulares, para un campo determinado, con el fin de que sea el propio navegador quien realice la validación de ese campo, en base al patrón definido, sin necesidad de utilizar una validación javascript:
Este atributo sólo se puede aplicar a los campos de tipo text, search, url, telephone, email y password.
accept El atributo accept se utiliza para limitar el formato de los archivos válidos en un input type=”file”, en base a su MIME type (audio/*, video/*, image/*...):
CSS aplicable a los nuevos campos/atributos Podremos aplicar CSS a los campos de formulario en función del valor de sus atributos, por ejemplo: input[type=submit] { ... } input:required { ... } input:disabled { ... } input:checked + label { ... } input:read-only { ... } input[type=text]:focus:valid { ... } input[type=email]:focus:invalid { ... } input[type=number]:focus:in-range { ... } input[type=number]:focus:out-of-range { ... }
O ir más allá y hacer filtros26...
26
http://tympanus.net/Tutorials/CSS3FilterFunctionality/
HTML 5 / CSS 3
19/73
4. AUDIO Y VIDEO Con HTML 5 es posible insertar audio27 y video28 de forma nativa 29, sin depender de plugins de ningún tipo (flash, silverlight…) 30: Antes:
Ahora: Alternativa para navegadores sin soporte: Descarga audio
Atributos: En el reproductor de audio/video podemos utilizar los siguientes atributos:
src La URL del contenido de audio/video (puede reemplazarse por source).
autoplay (true|false): Indica si el archivo debe reproducirse automáticamente o no.
loop (true|false): Indica si el archivo debe volverse a reproducir una vez llegado a su fin. 27 28 29 30
http://html5doctor.com/native-audio-in-the-browser/ http://html5doctor.com/the-video-element/ http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/ http://www.youtube.com/html5
HTML 5 / CSS 3
20/73
preload (none|metadata|auto): Indica si el archivo debe pre-cargarse o no. La diferencia entre metadata y auto es que metadata sólo pre-carga el archivo y con auto, será el navegador quien decida si pre-carga todo el archivo. Antes de este atributo, se utilizaba el atributo autobuffer. Para mayor compatibilidad, es recomendable usar ambos atributos conjuntamente (autobuffer y preload).
controls: Indica si se deben mostrar los controles de reproducción o no.
source Debido al problema de soporte de formatos entre los diferentes navegadores, es recomendable ofrecer el contenido en diferentes formatos. Para indicarle al navegador cuáles son, prescindiremos del atributo src (ya que sólo puede enlazar con un único archivo) y lo reemplazaremos por varias instancias del atributo source (tantas como formatos dispongamos):
poster Si el video no se carga por alguna razón, podemos establecer una imagen estática (un fotograma del video) que se muestre en ese caso.
Controles personalizados: Es posible programar y diseñar nuestros propios controles personalizados para el reproductor de audio/video.
HTML 5 / CSS 3
21/73
Para ello, será necesario programarlo con javascript, utilizando los atributos y métodos habilitados para tal efecto31 32, o bien utilizar alguna librería ya creada33.
Accesibilidad en los elementos Audio y Video: Aunque estemos hablando de un soporte nativo de audio y video por parte de los navegadores, sin ningún plugin externo aparte, los problemas de accesibilidad ligados al propio contenido multimedia siguen estando presentes, además de los problemas derivados de los controles del reproductor. Además de dar la correspondiente alternativa textual al contenido de audio/video, será necesario que el archivo no se reproduzca automáticamente y los controles puedan ser activados no sólo con el ratón, sino también con teclado o con cualquier otro dispositivo de entrada 34 35.
Soporte de video: Inicialmente36, la idea era que todos los navegadores soportaran tanto Ogg Theora como H.264, pero: Ogg es open source y libre de licencia. H.264 está patentado por MPEG. Google lanzó WebM37 en 2010, un nuevo formato38, con el que empezó otra guerra de formatos39 40. Pero la guerra parece que llegaba a su fin. En marzo de 2012, Mozilla anunció41 que finalmente iba a dar soporte al formato H.264 en futuras versiones de Firefox.
Soporte de audio: En el caso de Audio, nos encontramos hasta 4 formatos diferentes, con un soporte muy pobre por parte de los navegadores.
31 32 33 34 35 36 37 38 39 40 41
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/ http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/ http://mooplay.challet.eu/ http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/ http://www.brucelawson.co.uk/2009/accessibility-of-html5-video-and-audio-elements/ http://www.historiasdequeso.com/2009/06/sobre-youtube-html5-h264-y-theora.html http://www.webmproject.org/ http://www.anieto2k.com/2010/05/19/webm-el-codec-de-video-open-source-de-google/ http://www.anexom.es/servicios-en-la-red/videos-online/la-guerra-del-video-en-html5-h-264-ogg-theora-y-webm-i/ http://www.anexom.es/servicios-en-la-red/videos-online/la-guerra-del-video-en-html5-h-264-ogg-theora-y-webm-y-ii/ http://blog.lizardwrangler.com/2012/03/18/video-user-experience-and-our-mission/
HTML 5 / CSS 3
22/73
5. CANVAS El elemento 42 es un mapa de bits que puede usarse para renderizar gráficos, juegos, o cualquier otra imagen visual, en tiempo real.
Es un "lienzo en blanco" sobre el que podemos dibujar lo que queramos, e interactuar con él (mediante javascript).
function dibuja() { var b_canvas = document.getElementById("canvas-prueba"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } Dibuja!
API 2D Relleno, borde y líneas básicas: Relleno: fillStyle Borde: strokeStyle Grosor de las líneas/bordes: lineWidth Rectángulos rellenos: fillRect Rectángulos vacíos (sólo borde): strokeRect Limpiar una parte de canvas: clearRect
42
http://diveintohtml5.info/canvas.html
HTML 5 / CSS 3
23/73
context.fillStyle = '#abc'; context.strokeStyle = '#000'; context.lineWidth = 2; //x,y,width,height context.fillRect (0, 0, 70, 40); context.strokeRect(50,10, 50, 35); context.clearRect (30,25, 30, 10);
Paths (caminos): Gracias a la propiedad Paths, podemos dibujar formas personalizadas. Primero dibujaremos el contorno y estableceremos los atributos de relleno y borde. Después, declararemos el comienzo del camino con beginPath() y procederemos a definirlo. Una vez finalizado, tendremos que aplicar el relleno y borde definido y cerrar el camino con closePath(). context.fillStyle = '#abc'; context.strokeStyle = '#000'; context.lineWidth = 2; context.beginPath(); // Coordenadas (x,y) context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath();
Inserción de imágenes: Podemos insertar imágenes en el canvas mediante la propiedad drawImage y varios argumentos: Imagen básica: fuente de la imagen y coordenadas X,Y para situarla en canvas. Imagen media: los 3 argumentos de la imagen básica, más la anchura y altura de la imagen. Imagen avanzada: los 5 argumentos anteriores y 4 más: coordenadas X,Y, altura y anchura dentro de la imagen. De este modo, podemos recortar dinámicamente la imagen y mostrar únicamente la porción que deseemos en el canvas.
HTML 5 / CSS 3
24/73
// Básica: imagen, coord canvas. x , coord canvas. y). context.drawImage(img_elem, dx, dy); // Media: imagen, coord canvas. x , coord canvas. y, width, height. context.drawImage(img_elem, dx, dy, dw, dh); // Avanzada: imagen, coord. imagen x , coord. imagen y, width imagen, height imagen, coord canvas. x , coord canvas. y, width, height. context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);
Otras posibilidades: No hay límites para el elemento canvas, podemos insertar texto43, pintar44, manipular elementos... Las posibilidades son infinitas!! 45 46 47 48 49 50
43 44 45 46 47 48 49 50
http://dev.opera.com/articles/view/html-5-canvas-the-basics/ http://dev.opera.com/articles/view/html5-canvas-painting/ http://www.phpguru.org/static/html5-canvas-examples http://craftymind.com/factory/html5video/CanvasVideo.html http://mugtug.com/sketchpad/ http://alteredqualia.com/canvasmol/ http://www.kesiev.com/akihabara/ http://9elements.com/io/projects/html5/canvas/
HTML 5 / CSS 3
25/73
7. API’s Geolocalización La geolocalización consiste en averiguar en qué lugar del mundo nos encontramos exactamente (mediante la dirección IP, conexión de red inalámbrica, torre de señal móvil, GPS, etc.). HTML está desarrollando una API para que podamos detectar desde el navegador51 la posición exacta. Por ejemplo:
function get_location() { navigator.geolocation.getCurrentPosition(funcion); }
Drag&Drop Permite arrastrar y agarrar elementos en una página web. En combinación con Javascript, podremos darle diferentes utilidades52 53, como por ejemplo, un carrito de la compra54, una ordenación de contenido55, etc56.
Almacenamiento (local, sesión y base de datos) Mediante los nuevos sistemas de almacenamiento de HTML 5, vamos a poder almacenar información en el navegador. Las cookies, que actualmente utilizamos, están pensadas para almacenar una información escasa y los navegadores las envían al servidor cada vez que se recarga la página, por lo que se consume tiempo y ancho de banda extras.
51 52 53 54 55 56
http://diveintohtml5.info/detect.html#geolocation http://decafbad.com/2009/07/drag-and-drop/api-demos.html http://ljouanneau.com/lab/html5/demodragdrop.html http://nettutsplus.s3.amazonaws.com/64_html5dragdrop/demo/index.html http://decafbad.com/2009/07/drag-and-drop/outline.html http://web.ontuts.com/tutoriales/drag-drop-en-html-5/
HTML 5 / CSS 3
26/73
Por lo tanto, se necesita un nuevo sistema para poder almacenar gran cantidad de información y que el intercambio de esta información entre el navegador y el servidor sea rápida y eficaz. Existen 3 tipos de almacenamiento57: Local: para almacenar datos (sólo pares clave/valor) en la máquina del usuario. Los datos almacenados son únicos al dominio (preferencias). Sesión: para almacenar datos (sólo pares clave/valor) únicamente válidos durante la sesión (carritos de la compra o estado de aplicación). Base de datos: para almacenar datos relacionales ofreciendo una API de base de datos SQL, con todo lo que ello implica.
Con el tipo de almacenamiento adecuado, podremos desarrollar nuestras aplicaciones fácilmente. Algunos casos de uso son presentaciones58, juegos59, etc..
57 58 59
http://theproc.es/2010/4/16/18070/almacenamiento-con-html5:-almacenamiento-local http://slides.html5rocks.com http://chrome.angrybirds.com/
HTML 5 / CSS 3
27/73
PARTE 2: SOPORTE
HTML 5 / CSS 3
28/73
1. SOPORTE EN NAVEGADORES Los navegadores que aún no soportan HTML 5 van a necesitar una ayuda para que rendericen correctamente los elementos.
Detección de soporte HTML 5 * Modernizr60: librería JavaScript con licencia MIT que detecta la compatibilidad de nuestro navegador con HTML5 y CSS3 Detección de soporte para autofocus61, por ejemplo. También podemos conocer si nuestro navegador actual62 soporta HTML 5
Declaración CSS: /* Declarando elementos HTML 5 */ article,aside,canvas,details,figcaption,figure,footer,header,hgro up,menu,nav,section,summary{ display: block; }
Para IE: * HTML5 Shiv 63 64
* IE Print Protector65 (sólo para impresión) * IE Canvas66
60 61 62 63 64 65 66
http://www.modernizr.com/ http://diveintohtml5.info/detect.html#input-autofocus http://html5test.com/ http://code.google.com/p/html5shiv/ http://remysharp.com/2009/01/07/html5-enabling-script/ http://www.iecss.com/print-protector/ http://code.google.com/p/explorercanvas/
HTML 5 / CSS 3
29/73
2. MÁS RECURSOS Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Tablas de soporte: http://html5please.us/ http://caniuse.com/ http://www.fmbip.com/litmus http://html5test.com/ http://miketaylr.com/code/input-type-attr.html
Enlaces indispensables: http://dev.opera.com/articles/tags/html5/ https://developer.mozilla.org/en/HTML/HTML5 http://wufoo.com/html5/ http://html5demos.com/ http://www.pageresource.com/html5tutorials.html http://diveintohtml5.info http://html5doctor.com http://www.w3conversions.com/resources.html (prácticamente están todos los recursos unificados)
HTML 5 / CSS 3
30/73
CSS 3
PARTE 1: INTRODUCCIÓN CSS 3
HTML 5 / CSS 3
31/73
1. INTRODUCCIÓN: Tras 10 años sin evolución alguna en la especificación CSS67, el W3C ha puesto en marcha la nueva especificación CSS3. • • •
Diciembre 1996: CSS 1 Mayo 1998: CSS 2 Septiembre 2009: CSS 2.1
Esta nueva especificación engloba la práctica totalidad de la especificación CSS 2, pero añade nuevas propiedades.
Estado actual de la especificación CSS 3: Para evitar que la nueva especificación se demore en exceso, CSS 3 se ha dividido en diversos módulos68 (p.e.):
Cada módulo tiene sus propios editores y su propio ritmo, por lo que algunos módulos ya han pasado a ser candidatos a recomendación, y otros acaban de empezar a trabajar:
67 68
http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/current-work
HTML 5 / CSS 3
32/73
Soporte actual: Cada motor de renderizado está adoptando las nuevas propiedades a su ritmo. Antes de dar soporte completo, cada motor implementa una versión "beta" de dicha propiedad. La implementación por CSS se realiza utilizando unos prefijos69 específicos (en función de cada motor de renderizado) delante de la propiedad CSS 3 a utilizar: prefix organization -ms-, mso- Microsoft -mozMozilla -o-, -xv- Opera Software -khtmlKDE -webkit- Apple -rimResearch In Motion
Soporte actual en los navegadores: •
Web Design Checklist70
•
Can I Use?71
•
Readiness72
Generadores automáticos generales: •
CSS3 Generator73
•
CSS3 Click Chart74
•
CSS3 Maker75
Edición en tiempo real
69 70 71 72 73 74 75 76 77 78
•
Dabblet76 y CSS3 please77
•
JSFiddle78
http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords http://www.findmebyip.com/litmus/ http://caniuse.com/ http://html5readiness.com/ http://www.css3generator.com/ http://www.impressivewebs.com/css3-click-chart/ http://www.css3maker.com/ http://dabblet.com/ http://css3please.com/ http://jsfiddle.net/
HTML 5 / CSS 3
33/73
PARTE 2: NOVEDADES
HTML 5 / CSS 3
34/73
1. BORDES REDONDEADOS Podemos cambiar la apariencia de nuestros bordes, de cuadrados a redondeados. Se puede configurar el radio de la curvatura con el mismo valor para todos los lados del borde, o bien configurar uno diferente para cada lado, de manera individual: border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
También podemos unificar las propiedades (en el sentido de las agujas de reloj): border-radius: 10px 20px 30px 60px;
Propiedades temporales: -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius -moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
HTML 5 / CSS 3
35/73
Ejemplo 1:
#esquinas-redondeadas{ border:2px solid #F00; border-radius:6px; }
Ejemplo 2:
Forma unificada: #esquinas-redondeadas-desiguales{ border:2px solid #F00; border- radius: 0px 25px 50px 100px; }
O la forma compleja: #esquinas-redondeadas-desiguales{ border:2px solid #F00; border-top-left-radius: 0px; border-top-right-radius: 25px; border-bottom-right-radius: 50px; border-bottom-left-radius: 100px; }
HTML 5 / CSS 3
36/73
2. IMÁGENES EN BORDES Podemos utilizar imágenes para crear el borde de un elemento border-image border-top-image border-right-image border-bottom-image border-left-image border-corner-image border-top-left-image border-top-right-image border-bottom-left-image border-bottom-right-image
Y decidir si queremos que se repita la imagen o bien se estire, mediante las propiedades round y stretch.
Ejemplo 1:
#borde-imagen{ border:15px solid orange; border-image: url(border.png) 27 27 27 27 round round; HTML 5 / CSS 3
37/73
}
Ejemplo 2:
#borde-imagen2{ border:15px solid orange; border-image: url(border.png) 27 27 27 27 stretch stretch; }
También podemos utilizar generadores79 automáticos80.
79 80
http://border-image.com/ http://mentadreams.com/o/css3_border/
HTML 5 / CSS 3
38/73
3. AJUSTES DE LOS BORDES Podemos configurar el modo en que se repetirá la imagen de los bordes: border-fit border-fit-length border-fit-width
border-fit-length determina la longitud de la imagen en los 4 lados: border-fit-length border-top-fit-length border-right-fit-length border-bottom-fit-length border-left-fit-length
mientras que border-fit-width determina la anchura: border-fit-width border-top-fit-width border-right-fit-width border-bottom-fit-width border-left-fit-width
Los valores de estas propiedades pueden ser: clip, repeat, scale, stretch, overwrite, overflow, space
También tenemos la propiedad border-corner-fit que determina la configuración de las imágenes en las esquinas.
HTML 5 / CSS 3
39/73
4. MÚLTIPLES IMÁGENES EN EL FONDO Hasta ahora, sólo podíamos utilizar una única imagen como fondo de un elemento. Pero con CSS 3, ya podemos utilizar varias imágenes como fondo del mismo elemento: background: url(img) url(img) url(img) url(img)
top left no-repeat, top right no-repeat, bottom left no-repeat, bottom right no-repeat;
Ejemplo:
#multi-fondo{ background: url(quote_open.gif) no-repeat top left, url(quote_close.gif) no-repeat bottom right; }
HTML 5 / CSS 3
40/73
5. SOMBRAS EN BLOQUES Para aplicar una sombra a un bloque, configuraremos el color, longitud horizontal y vertical, así como el radio de desenfoque de la sombra.
Ejemplo:
#bloque-sombra{ box-shadow:10px 25px 5px #333; }
Podemos usar generadores81 automáticos82para que nos sea más cómoda la implementación.
81 82
http://www.layerstyles.org/builder.html http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
HTML 5 / CSS 3
41/73
6. SOMBRAS EN TEXTOS De la misma forma que podemos hacer sombras en los bloques, también vamos a poder aplicárselas a los textos:
También podremos aplicar varias sombras al mismo elemento
Ejemplo 1:
h2{ text-shadow: 1px 5px 2px #F00; }
Ejemplo 2:
h2{ text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; }
También podemos usar un Generador Automático83
83
http://westciv.com/tools/shadows/
HTML 5 / CSS 3
42/73
7. CONTORNO DE TEXTO Nota: a día de hoy, es una característica propietaria. No se recomienda su uso. Podemos modificar un texto para que aparezca con un borde. A este borde le podremos cambiar el color, grosor e incluso el relleno del texto (sobrescribiendo el color de texto que podría estar establecido previamente). text-fill-color: text-stroke: text-stroke-color: text-stroke-width:
Ejemplo:
#bloque-stroke h2 { text-fill-color: #ccc; text-stroke: #123456 2px; /* abreviado*/ /* completo:*/ /* text-stroke-color: #123456; text-stroke-width: 2px; */ }
También podemos usar un Generador Automático84
84
http://westciv.com/tools/textStroke/index.html
HTML 5 / CSS 3
43/73
8. CONTORNO DE BLOQUES El contorno de un elemento es similar al borde, con la diferencia de que no interfiere en el modelo de caja. Por defecto, el contorno empieza justo por fuera del límite del borde, pero se puede ajustar a más distancia: outline: outline-color: outline-style: outline-width: outline-offset:
Ejemplo 1:
#outline{ border:2px solid #F00; outline:5px dashed #333; }
Ejemplo 2:
#outline2{ border:2px solid #F00; outline:5px dashed #333; outline-offset: 10px; }
HTML 5 / CSS 3
44/73
9. TIPOGRAFÍAS PERSONALIZADAS A partir de ahora vamos a poder utilizar la tipografía85 que queramos en nuestras páginas (aunque el usuario no la tenga instalada en su dispositivo). Para ello, primero tendremos que declarar la tipografía que vamos a utilizar, indicar dónde se encuentra y el formato de dicha fuente: @font-face { font-family:'Adventpro'; src: url(adventpro-Re.otf) format('opentype'); }
Y después, ya estamos listos para utilizarla en cualquier elemento (como si fuera una tipografía común): h1{ font-family: 'Adventpro', Helvetica, Sans-Serif;
}
También podemos utilizar un generador automático86, sobre todo para la compatibilidad entre diferentes navegadores87.
Nota: Cuidado con las licencias de las tipografías. Antes de incluir una tipografía (que cualquier usuario va a poder descargar y usar posteriormente en su dispositivo), tendremos que asegurarnos de que su licencia nos permite incrustarla en una página web.
Repositorio de Fuentes de uso gratuito en web Google Font Directory88 y The League of Moveable Type89.
85 86 87 88 89
http://perishablepress.com/press/2010/04/14/visual-walkthrough-font-face-css/ http://www.fontsquirrel.com/fontface/generator http://webdesignerwall.com/general/font-face-solutions-suggestions http://www.google.com/webfonts http://www.theleagueofmoveabletype.com/
HTML 5 / CSS 3
45/73
10. RGBA Además de indicar el color en formato RGB (en vez de hexadecimal), también podremos modificar la opacidad del elemento:
Los tres primeros valores indican la cantidad de Rojo, Verde y Azul de nuestro color. El 4º valor, Alpha, indica el nivel de transparencia. Debe estar entre 0 y 1 (0 = transparente / 1 = opaco). El color RGBA se puede utilizar en fondos, colores de primer plano, bordes, etc. También podemos modificar la opacidad de un elemento, aunque definamos el color en hexadecimal. Bastaría con utilizar la propiedad opacity.
Ejemplo 1:
#bloque-transparencia-rgb{ background:#FFF url(fondo2.gif); } #bloque-transparencia-rgb p{ margin:10px; padding: 15px; font-weight:bold; background: rgba(200, 54, 54, 0.5); }
HTML 5 / CSS 3
46/73
Ejemplo 2:
#bloque-transparencia-rgb-bordes{ background:#FFF url(fondo2.gif); } #bloque-transparencia-rgb-bordes p{ margin:10px; padding: 15px; font-weight:bold; border:20px solid rgba(200, 54, 54, 0.5); }
Ejemplo 3:
#bloque-transparencia{ background:#FFF url(fondo.gif); } #bloque-transparencia p{ color:#333; opacity: 0.8; }
HTML 5 / CSS 3
47/73
11. HSLA Otra manera de indicar el color es mediante las propiedades de Tono (Hue), Saturación (Saturation) y Luminosidad (Lightness). También se puede indicar la opacidad (Alpha), en el último valor: background: hsla(H,S,L,A);
Ejemplo:
#bloque-hsla{ background:#FFF url(fondo.gif); } #bloque-hsla p { margin:10px; padding: 15px; background: hsla(207,38%,47%,.8); }
HTML 5 / CSS 3
48/73
12. COLUMNAS MÚLTIPLES A partir de ahora, podemos visualizar un texto en columnas90. Además del nº de columnas que queramos configurar, podemos indicar la separación entre ellas, dibujar una línea en esa separación y hasta el tamaño de cada columna: column-count: column-width: column-gap: column-rule:
Ejemplo:
#bloque-columnas{ column-count: 3; column-gap: 20px; column-rule: 1px solid #00000; }
90
http://www.alistapart.com/articles/css3multicolumn
HTML 5 / CSS 3
49/73
13. TAMAÑO DE BLOQUE Podemos conseguir que un bloque no renderice siguiendo el modelo de caja. Por lo tanto, el tamaño del bloque permanecerá inalterable aunque implementemos bordes y/o márgenes. box-sizing: border-box;
Para que vuelva a renderizar siguiendo el modelo de caja: box-sizing: content-box;
HTML 5 / CSS 3
50/73
14. REDIMENSIONAMIENTO DE BLOQUE Para aquellos bloques donde aparezca una barra de desplazamiento, podemos configurar la posibilidad de que el usuario redimensione el bloque según sus necesidades: resize: both / horizontal / vertical;
Es aconsejable implementar una altura y anchura máximas, para que el redimensionamiento del usuario tenga unos límites.
Ejemplo:
-> #resize{ width:200px; height:100px; overflow:auto; resize: both; }
HTML 5 / CSS 3
51/73
15. GRADIENTES Podemos generar fondos con gradientes, sin necesidad de utilizar imágenes de fondo. Podremos configurar múltiples91 combinaciones92 de colores, tamaños, direcciones...
Webkit: -webkit-gradient(, [, ]?, [, ]? [, ]*)
Mozilla: -moz-linear-gradient( [ || ,]? , [, ]* )
Ejemplo 1:
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); background: -moz-linear-gradient(top, red, blue);
91 92
http://www.the-art-of-web.com/css/linear-gradients/ http://www.the-art-of-web.com/css/radial-gradients/
HTML 5 / CSS 3
52/73
Ejemplo 2:
#gradiente{ background: -webkit-gradient(linear,left bottom,right top,colorstop(0.44, rgb(140,199,73)),color-stop(0.72, rgb(173,24,168))); background:-moz-linear-gradient(left bottom,rgb(140,199,73) 44%,rgb(173,24,168) 72%); }
También podemos utilizar varios93 generadores94 automáticos95, muy útiles para que sean compatibles con todos los navegadores que tienen soporte96 y no sólo generar gradientes, al uso: podemos crear patrones97 e incluso generar el patrón partiendo de una imagen concreta98.
93 94 95 96 97 98
http://westciv.com/tools/gradients/ http://gradients.glrzad.com/ http://colorzilla.com/gradient-editor/ http://leaverou.me/demos/cssgradientsplease/ http://leaverou.me/css3patterns/ http://gradient-scanner.com/
HTML 5 / CSS 3
53/73
16. REFLEJOS y MÁSCARAS Nota: a día de hoy, son características propietarias. No se recomienda su uso. REFLEJOS Podemos conseguir que nuestro contenido se refleje, modificando diferentes parámetros: dirección, tamaño, opacidad, etc... box-reflect:
: puede llevar los siguientes valores: above, below, left, right. : longitud o porcentaje que especifica la distancia del reflejo desde el borde al bloque original. Si se omite, su valor es 0. Combinaremos el reflejo con un gradiente para conseguir el efecto deseado99.
Ejemplo 1:
#bloque-reflejo img{ box-reflect: below 2px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.4,transparent),to(white)); }
99
http://designshack.net/articles/css/mastering-css-reflections-in-webkit/
HTML 5 / CSS 3
54/73
Ejemplo 2:
#bloque-reflejo-texto h2{ box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3))); }
MÁSCARAS Podemos utilizar una imagen para crear una máscara sobre un contenido, con diferentes parámetros: mask (background) mask-box-image (border-image) mask-attachment (background-attachment) mask-clip (background-clip) mask-origin (background-origin) mask-image (background-image) mask-repeat (background-repeat) mask-composite (background-composite)
También podemos combinar las máscaras con los gradientes100.
Ejemplo 1:
+
=
#bloque-mask img{ mask-box-image: url(mascara.gif); }
100
http://www.webkit.org/blog/181/css-masks/
HTML 5 / CSS 3
55/73
Ejemplo 2:
+
=
#bloque-mask2 img{ mask-box-image: url(black-mask.png) 75 stretch; }
Ejemplo 3:
#bloque-mask3 img{ border-radius: 10px; mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); }
HTML 5 / CSS 3
56/73
17. FILTROS Los filtros nos permiten manipular tanto elementos html como imágenes en varios aspectos: La sintaxis base es: filter: filter(value);
Desenfoque: blur(px) Brillo: brightness(valor) – de 0 a 1 Saturación: saturate(%) Tono girado: hue-rotate(deg) Contraste: contrast(%) -más de 100% añade contrasteInvertir: invert(%) Escala de grises: grayscale(%) Sepia: sepia(%) Opacidad: opacity(%) Sombra: drop-shadow(shadow)
SVG: Usamos un elemento que contenga el estilo con el svg que queramos utilizar como filtro: ... Después aplicamos ese elemento al elemento que queremos aplicar el filtro: div {filter: url(#contenedor-svg); }
Además podremos combinar varios filtros a la vez: div {filter: grayscale(100%) sepia(100%); }
Se puede utilizar un generado automático101.
101
http://html5-demos.appspot.com/static/css/filters/index.html
HTML 5 / CSS 3
57/73
18. TRANSFORMACIONES 2D Podemos usar diferentes transformaciones sobre un elemento (bloque y/o texto): rotaciones, escalado, desplazamiento y sesgado. Lo mejor es que podemos combinarlas entre sí: transform: transform: transform: transform:
rotate(deg); translate(x, y); scale(x, y); skew(deg, deg);
Ejemplo 1:
#menu li{ transform: rotate(-5deg); }
HTML 5 / CSS 3
58/73
Ejemplo 2:
#menu li{ transform: rotate(-5deg); } #menu li a{ transform: rotate(5deg); }
Ejemplo 3:
-> #transformacion2{ transform: skew(45deg, 5deg); }
MATRIX Sirve para combinar varias transformaciones de una forma más eficaz, controlando los valores de forma matemática102: #transformacion{ transform: matrix(4.922, -0.944, 0.589, 3.944, 44.889, 70.000); }
Podemos utilizar generadores automáticos103 104
Iconos, formas Estas transformaciones nos permiten simular105 imágenes106 sencillas107 108, simplemente con código css109.
102 103 104
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/ http://www.useragentman.com/matrix/ http://meyerweb.com/eric/tools/matrix/
HTML 5 / CSS 3
59/73
19. TRANSFORMACIONES 3D La mayor parte de las transformaciones 2D tiene su versión 3D. translate3d(x, y, z) translateZ(z) scale3d(sx, sy, sz) scaleZ(sz) rotateX(value) rotateY(value) rotate3d(x, y, z) matrix3d(…) perspective(value)
Para el caso de una matriz, los valores aumentan por lo que lo lógico es utilizar un generador automático110. Algunos ejemplos aclaratorios: 111 112 113 114
105 106 107 108 109 110 111 112 113 114
http://css3shapes.com/ http://pictos.drewwilson.com/ http://nicolasgallagher.com/pure-css-gui-icons/demo/ http://rathersplendid.net/home/pure-css-icons http://www.imgtocss.com/ http://cssglue.com/matrix https://www.webkit.org/blog/386/3d-transforms/ http://desandro.github.io/3dtransforms/ http://css-tricks.com/almanac/properties/p/perspective/ http://css-tricks.com/almanac/properties/p/perspective-origin/
HTML 5 / CSS 3
60/73
20. TRANSICIONES Las transiciones nos permiten cambiar propiedades CSS de un elemento durante una duración determinada: cambio de color, de posición, de opacidad… cualquier cosa que se nos ocurra. También se pueden combinar entre sí. Las transiciones necesitan 4 atributos: propiedad, duración y tipo de transición y demora.
Propiedad: Se puede aplicar la transición a una única propiedad (p.e. background) o bien a todas las propiedades de un elemento (all). transition-property: nom_propiedad;
Duración: Tenemos que indicar cuantos segundos dura la transición. transition-duration: duración;
Demora (opcional): Si queremos que la transición no empiece inmediatamente, podemos implementar una demora. transition-delay: demora;
Tipos de Transiciones: Siguen el patrón de las Curvas de Bezier115 Valores posibles116: default, linear, ease-in, ease-out, ease-in-out, cubic-bezier (estableciendo nosotros los valores). transition-timing-function: tipo_transición;
Forma abreviada: Es más útil indicar todas las propiedades de transiciones en una única declaración: transition: nom_propiedad duración tipo_transición retraso;
Ejemplo 1: transición de color: Inicialmente, nuestro bloque tiene un color de fondo. Al realizar un :hover sobre el bloque, éste cambiará de color. Pero este cambio no se realizará instantáneamente, sino que tardará 2 segundos. 115 116
http://www.netzgesta.de/dev/cubic-bezier-timing-function.html http://www.the-art-of-web.com/css/timing-function/
HTML 5 / CSS 3
61/73
#bloque-transicion-1{ background:#CCC; -webkit-transition: background 2s linear; } #bloque-transicion-1:hover{ background:#333; }
Ejemplo 2: transición de movimiento: Inicialmente, nuestro bloque está en una determinada posición. Al realizar un :hover sobre el bloque, éste cambiará de posición. El cambio se realizará en 2 segundos. #bloque-transicion-2{ -webkit-transition: left 2s linear; } #bloque-transicion-2:hover{ left:200px; }
También podemos utilizar generadores117 automáticos118.
117 118
http://matthewlein.com/ceaser/ http://westciv.com/tools/transforms/index.html
HTML 5 / CSS 3
62/73
21. KEYFRAMES Las transformaciones/animaciones básicas que hemos visto, sólo permiten animar un elemento con un determinado tipo de transición. Podemos añadir más complejidad, juntando varias transiciones en un mismo elemento119, incluso interactuando varios elementos entre sí120. Para ello crearemos nuestra propia animación121, a la cual invocaremos desde un elemento.
Declaración e invocación: @keyframes MiAnimacion { 0% { opacity: 0; } 100% { opacity: 1; } } #bloque { animation: MiAnimacion 5s infinite; }
Si queremos que la animación tenga las mismas propiedades al inicio y al final, podemos agrupar los % en una misma declaración:: @keyframes MiAnimacion { 0%, 100% { font-size: 10px; } 50% { font-size: 12px; } }
Propiedades animation-name: MiAnimacion; animation-duration: 4s; animation-iteration-count: 10; animation-direction: alternate; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 2s;
timing-function duration & delay duration-count fill-mode animation-direction
119 120 121
ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) Xs / Xms X forwards, backwards, both, none normal, alternate
http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/ http://www.standardista.com/forms/animation.html#slide1 https://developer.mozilla.org/en/css/css_animations
HTML 5 / CSS 3
63/73
Podemos también escribir las propiedades resumidas. El orden no importa a excepción de la duración y el retraso. El primer tiempo será siempre el de la duración y el segundo, el del retraso: animation: MiAnimacion 5s 1s 2 alternate backwards
Es posible combinar transformaciones con animaciones: @keyframes MiAnimacion { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
Uno de los usos principales de las animaciones sencillas va a ser la creación de banners122 animados123.
Animaciones Múltiples Podemos crear animaciones múltiples, si separamos las invocaciones por comas: .bloque { animation: MiAnimacion 2s infinite, MiOtraAnimacion 1s; }
122 123
http://tympanus.net/Tutorials/AnimatedWebBanners/index.html http://www.red-team-design.com/wp-content/uploads/2011/12/css3-animated-header-demo.html
HTML 5 / CSS 3
64/73
22. MEDIA QUERY Debido a la multitud de dispositivos desde los que accedemos a internet, las posibles dimensiones de la pantalla donde el usuario visualiza una web se han disparado. De ahí que haya nacido el concepto de Responsive Web Design. Para que la una web se adapte a cada uno de los dispositivos, CSS3 permite comprobar las dimensiones de pantalla y cargar una css específica en función del tamaño124. También podremos comprobar si el dispositivo está en horizontal o en vertical, luminosidad, densidad de color, etc.
Ejemplo: @media screen and (max-width: 980px) { #paginawrap { width: 95%; } #contenido { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } }
Podemos ver varios125 ejemplos126 así como una galería127 de páginas web que utilizan media querys.
124 125 126 127
http://webdesignerwall.com/tutorials/adaptive-responsive-design-with-css3-media-queries http://stunningcss3.com/code/bakery/ http://w3conversions.com/sandbox/css3/transition/multibackground-bug.html http://mediaqueri.es/
HTML 5 / CSS 3
65/73
PARTE 3: SELECTORES
HTML 5 / CSS 3
66/73
1. LISTA DE SELECTORES * E – Elemento * att – Atributo * val – Valor * n – Cualquier número entero. Sintaxis E [att^='val']
Descripción Selecciona todos los elementos que inicien con un valor especificado. Ejemplo: a[href='http://miweb.com'] Seleccionará todos los enlaces hacia miweb.com Selecciona todos los elementos que terminen con un valor especificado.
E[att$='val'] Ejemplo: a[href$='.rar'] Seleccionará todos los enlaces de archivos rar.
E[att*='val']
E:root
Selecciona todos los elementos que contenga, indiferente a su ubicación, un valor especificado. Ejemplo: a[href*='tag'] Seleccionará todos los enlaces que contengan la palabra "tag". Selecciona el elemento raíz de un documento. En HTML, el elemento raíz es siempre
Selecciona el enésimo hijo de su elemento padre. Ejemplo: p a:nth-child(2) E:nth-child(n) seleccionará el segundo enlace de un párrafo.
E:nth-lastchild(n)
E:nth-oftype(n)
E:nth-last-oftype(n)
E:last-child
Selecciona el enésimo hijo de su elemento padre empezando a constar del último al primero. Ejemplo: p a:nth-last-child(2) seleccionará el penúltimo enlace de un párrafo. Selecciona el enésimo elemento de su tipo. Ejemplo: p img:nth-of-type(1) seleccionará la primer imagen en un párrafo. Selecciona el enésimo elemento de su tipo, empezando a constar del último al primero. Ejemplo: p img:nth-last-of-type(1) seleccionará la última imagen en un párrafo. Selecciona el último hijo de un elemento. Ejemplo: .post p:last-child seleccionará el último párrafo dentro de un elemento con clase "post". Selecciona el primer elemento de su tipo en el elemento padre.
E:first-of-type
Ejemplo: .post img:first-of-type seleccionará la primer imagen dentro en un elemento con clase "post".
E:last-of-type Selecciona el último elemento de su tipo en el elemento padre.
HTML 5 / CSS 3
67/73
Ejemplo: .post img:last-of-type seleccionará la última imagen dentro en un elemento con clase "post". Selecciona el único elemento hijo de un elemento padre. E:only-child
E:only-of-type
E:empty E:target E:enabled
E:disabled
Ejemplo: ul li:only-child seleccionará el elemento una de lista, cuando la lista solo contenga un elemento. Selecciona el único elemento de cierto tipo. Ejemplo: .post img:only-of-type seleccionará las imágenes presentes en los elementos .post con solo una imagen. Selecciona los elementos web que no tienen elementos hijos. Ejemplo: ul:empty seleccionará todas las listas no numeradas sin elementos. Selecciona los elementos que tienen como destino una URL . Selecciona elementos (de formularios) con valor enabled (habilitado). Ejemplo: input[type="text"]:enabled seleccionará los campos de tipo texto que están habilitados. Selecciona elementos (de formularios) con valor disabled (deshabilitado). Ejemplo: input[type="text"]:disabled seleccionará los campos de tipo texto que están deshabilitados. Selecciona elementos (de formularios) con valor checked (seleccionado).
E:checked Ejemplo: input:checked seleccionará los campos que estén seleccionados. Selecciona los elementos que han sido seleccionados/resaltados por el usuario. Las propiedades aplicables son color, background, cursor y outline. E::selection Ejemplo: ::selection ubicara el texto que haya sido seleccionado/resaltado (con el cursor del mouse) por el autor. Selecciona todo los elementos que no sean un selector indicado (s) dentro de un elemento web. E:not(s) Ejemplo: .post:not(img) seleccionará todos los elementos que no sean imágenes y estén dentro del elemento web con clase "post". Selecciona cualquier elemento F que esté precedido por el elemento F
E ~ F
CSS 3 Specifity128
128
http://www.standardista.com/css3/css-specificity/
HTML 5 / CSS 3
68/73
Parte 4: SOPORTE Y RECURSOS
HTML 5 / CSS 3
69/73
1. SOPORTE Prefijos de vendedores por Javascript: CSS prefixer129
Mejorar el soporte en navegadores: •
CSS3 Pie130
•
CSS SandPaper131
•
Selectivizr132
•
JQuery Extended Selectors133
•
JQuery Animate Enhaced134
•
CSS3 MediaQueries135
•
Normalize136
•
HTML5 Boilerplate137
Detectar si existe o no soporte
129 130 131 132 133 134 135 136 137 138 139
•
Modernizr138
•
Yepnope139
http://cssprefixer.appspot.com/ http://css3pie.com/ http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ http://selectivizr.com/ https://github.com/keithclark/JQuery-Extended-Selectors http://playground.benbarnett.net/jquery-animate-enhanced/ http://code.google.com/p/css3-mediaqueries-js/ http://necolas.github.com/normalize.css/ http://html5boilerplate.com/ http://www.modernizr.com/ http://yepnopejs.com/
HTML 5 / CSS 3
70/73
2. RECURSOS ÚTILES Herramientas útiles: • • • • •
Resize my browser: redimensionar el navegador140 Responsive design Test: visualización de una web en diferentes tamaños141 iOS Media Query Previewer: visualización de una web en iOS142 Support Details: conocer al detalle las características de Sistema Operativo, Navegador, etc... de un equpo.143 Tamaño de las barras del navegador144
Varios • • •
Text-align:centaur;145 ¿Se tiene que ver una web exactamente igual en cada navegador? 146 ¿La experiencia de uso debe ser exactamente igual en cada navegador?147
Ejemplos • • • • • • • •
Planetario148 Sistema Solar149 Teclado150 Con Canvas parte 1151 y parte 2152 Gráfica 3D153 Vinilos154 Spotlight155 Selección (NSFW)156
Ejemplos (animaciones) • • • • 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
Gravedad157 Meninas 3D158 co*ke159 Futurama160 http://resizemybrowser.com/ http://mattkersley.com/responsive/ http://markboultondesign.com/tools/index.html http://www.supportdetails.com/ http://howtallaremytoolbars.com/ http://textaligncentaur.com/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/ http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/ http://mozillademos.org/demos/planetarium/demo.html http://neography.com/journal/our-solar-system-in-css3/ http://dl.dropbox.com/u/921159/Keyboard/page.html http://www.effectgames.com/demos/canvascycle/ http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html http://www.marcofolio.net/css/wicked_css3_3d_bar_chart.html http://www.zurb.com/playground/sliding-vinyl http://svay.com/experiences/css3-spotlight/ http://fichtre.net/yop.html http://mrdoob.com/projects/chromeexperiments/google_gravity/ http://www.romancortes.com/blog/css-3d-meninas/ http://www.romancortes.com/blog/pure-css-co*ke-can/ http://www.cssplay.co.uk/menu/css3-animation.html
HTML 5 / CSS 3
71/73
• • • • •
Super Mario161 Star Wars intro162 Star Wars AT-AT163 Spiderman164 The man from Hollywood165
Ejemplos (juegos) • • •
•
Pacman 166 Mario Bros167 Memory168 Ajedrez169
Ejemplos (tipografías) • •
Back to the future170 Posters parte 1171 y parte 2172
Ejemplos (imágenes) • • •
Imágenes parte 1173 y parte 2174 Rueda de color175 Taza de café176
Y más ejemplos (recopilación) •
Demos parte 1177, parte 2178 y parte 3179
Último apunte: sobre las características propietarias180
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
http://cordobo.com/1662-pure-css-animated-3d-super-mario-icon/ http://www.gesteves.com/experiments/starwars.html http://anthonycalzadilla.com/css3-ATAT/index.html http://www.optimum7.com/css3-man/ http://lab.tylergaw.com/themanfromhollywood/ http://worldsbiggestpacman.com/ http://arcade.rawrbitrary.com/mario/ http://media.miekd.com/css3memory/ http://designindevelopment.com/css/css3-chess-board/ http://code.garron.us/css/BTTF_logo/ http://graphicpush.com/css3-poster-with-no-images http://neography.com/experiment/type1/ http://coding.smashingmagazine.com/2010/07/12/css3-design-contest-results/ http://www.queness.com/post/4023/18-brilliant-pure-css-drawings http://crysodenkirk.com/blog/2010/07/color-wheels-with-only-css3-and-primary-colors/ http://gabri.me/htmlcss/2010/css3-gradients-coffee-cup/ http://speckyboy.com/2010/05/21/10-mind-blowing-experimental-css3-techniques-and-demos/ http://webdesignerwall.com/trends/47-amazing-css3-animation-demos http://www.socialblogr.com/2010/03/80-html5javascriptcss3svg-experiments.html http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/
HTML 5 / CSS 3
72/73
3. BONUS Todo el material del curso y más recursos en:
http://www.antxoa.com/formación
Preguntas, sugerencias, etc. Ainhoa Iglesias [emailprotected] Twitter: @antxoa7 Linkedin: http://www.linkedin.com/in/ainhoaiglesias
Agradecimientos: Bayu.es181 … …por Calabacín el Aventurero, el vegetal más intrépido182 (que también aprende HTML 5 y CSS 3)
¡¡Muchas gracias por vuestra asistencia y hasta la próxima!!
181 182
http://www.bayu.es/ http://calabacin.bayu.es/
HTML 5 / CSS 3
73/73
![[PDF] CURSO HTML 5 / CSS 3 - Free Download PDF (2024)](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/h8AAvMB+NzmkbcAAAAASUVORK5CYII=)