En 20 minutos ... HTML5 + CSS3
17
HTML5 + CSS3 ATICA ~ 07/02/2013 Eduardo Rey Jara 01 / 17
-
Upload
seccion-de-metodologias-normalizacion-y-calidad-del-software -
Category
Documents
-
view
3.415 -
download
2
description
Nuevas funcionalidades de HTML5 y CSS3 así como buenas prácticas en el uso de estos lenguajes de marcado y presentación.
Transcript of En 20 minutos ... HTML5 + CSS3
HTML5 + CSS3
ATICA ~ 07/02/2013Eduardo Rey Jara
01 / 17
HTML5
Todavía no se trata de un standard cerrado, pero ya podemos hacer uso de la mayoría de sus novedades.
02 / 17
Novedades HTML5 (1/5)
El DOCType de la página
Únicamente hace falta poner este simple doctype al comienzo de la página.
<!DOCTYPE html>
03 / 17
Novedades HTML5 (2/5)
Nuevos elementos (1 de 2)
HTML5 es mucho más semántico que lo que estábamos acostumbrados a usar con XHTML o HTML4.
Etiquetas para cada delimitar zonas o semántica que nos dan mayor legibilidad y simpleza del código.
Nuevas etiquetas que más usaremos:
<article> <address> <aside> <footer> <header><progress> <nav> <section> <video> <audio>
04 / 17
Novedades HTML5 (2/5)
Nuevos elementos (2 de 2).
Antes y ahora.
Ejemplos prácticos:
• Antes• Ahora
05 / 17
Novedades HTML5 (3/5)
Nuevos atributos:Atributos de información extra: data-xxxPodemos añadir todos los que queramos. Especialmente pensados para comunicación con aplicaciones front-end. Evitamos pasar parámetros como input:hidden
Atributos 'role' para usabilidad wai-aria:Atributos que mejoran la usabilidad de cara a lectores de voz o para añadirle una semántica adicional a la etiqueta. La lista de roles completa bien explicada la tenemos aquí, añadiré al ejemplo unos cuantos para ver esto con claridad
Ejemplo.
06 / 17
Novedades HTML5 (4/5)
Tipos de datos en formularios:HTML5 nos permite añadir nuevos tipos de campo de formulario a nuestras aplicaciones. Tipos: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.
Con atributo required y máximos y mínimos.
Pros: Nos evita tener que añadir javascript adicional para controlar elementosContras: Cada navegador lo muestra/trata como quiere y no todos lo tienen implementados al 100%. Muchos ni al 1%
Ejemplo.
07 / 17
Novedades HTML5 (5/5)
Funcionalidades muy buenas pero sólo para algunos navegadores :(
Está más implementado en navegadores móviles, por su novedad, que en navegadores de escritorio
WebSocketsAlmacenamiento de datos en cliente (BBDD Locales y App caché).Geoposicionamiento.Funciones 3D
08 / 17
Ahora las pegas...
Tratando con nuestro amigo Internet Explorer
Aunque las nuevas versiones implementan más funcionalidad, siempre va un paso por detrás del resto de navegadores.
¿Cómo hacemos que soporte etiquetas HTML5?
¿Cómo diferenciamos si soporta o no determinados estilos y etiquetas?
Librería Modernizr
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
09 / 17
CSS3CSS3 está definido desde 2008 y ya se habla de CSS4.
¿por qué ahora? porque ahora es cuando los navegadores que nuestros usuarios tienen implementado
decentemente CSS3.
10 / 17
CSS3 – Modelo de caja
El modelo de caja no ha cambiado. El tamaño de un elemento sigue siendo su width/height más su borde más su padding.
11 / 17
CSS3
Descendiente directo en el DOM:
Selectores por atributo:
Selectores CSS3 (1/2)
#menuPrincipal ul > li > ul
elemento[atributo^="valor"] /* comienza por */ elemento[atributo$="valor"] /* termina por */ elemento[atributo*="valor"] /* contiene */
12 / 17
CSS3
Pseudo-elementos (ahora se usa :: en lugar de : ) :
Pseudo-clases:
Selectores CSS3 (2/2)
p::first-line{} /* primera línea de un elemento */ p::first-letter{} /* primera letra de un elemento */ p::before{} /* insertar datos antes */ p::after{} /* insertar datos después */ p::selection{} /* selección en un elemento */
li:nth-child(2n+1){} /* todos elementos impares de una lista */ li:nth-last-child(2n+1){} /* idem pero contando desde el final */ p:empty{} /* párrafos sin elementos HTML dentro, sólo texto */ p:first-child, p:last-child {}/* primer y último párrafo del documento */ li:nth-of-type(5) /* el 5 elemento de una lista */ li:nth-last-of-type(5) /* idem pero contando desde el final */ li:nth-last-of-type(5) /* idem pero contando desde el final */ ul:not(#menuPrincipal ul) /* las listas que no están en menu principal */
13 / 17
CSS3
Este ejemplo no tiene ni JS ni imágenes...
Utilizando CSS como alternativa a carga de imágenes.
14 / 17
CSS3
Fuentes de iconos vectoriales. Todos los iconos como texto.Ejemplo: Font AwesomeCarga de fuentes corporativas con @font-faceIncluso las podemos cargar asíncronamente con Google Web Fonts o Typekit o crear nuestra propia fuente.Efectos de bordes, sombras, cambios de color …(Usar con precaución). Podemos ver todas las opciones en CSS3Generator.comAnimaciones (transiciones)(Usar con mucha precaución)El mejor tutorial lo ha hecho Brad Shaw: http://css3.bradshawenterprises.com/transitions/
No usamos imágenes, usamos...
15 / 17
La única forma de acordarse de todo
Usando chuletas
HTML5 CheatSheet
Css3 CheatSheet
16 / 17
Gracias
17 / 17
