HTML5 & CSS3

HTML5 & CSS3Hernán Beati

@hernan_beatihernan@saberweb.com.ar

Nuevo en HTML5

Nuevas etiquetas semánticas(Navegadores debe entender los

contenidos)

Video, audio y animación sin plugins

(Acceso universal: cualquier dispositivo, cualquier navegador, cualquier versión)

Nuevos elementos de formularios

(Más usabilidad y menor uso de JavaScript)

Nuevo en CSS3Usar cualquier tipografía

Efectos decorativos: sombras, RGBa, bordes redondeados, gradientes,

(menor uso de imágenes)

Movimientos: transformaciones, transiciones, animaciones

(menor uso de JavaScript)

Diseño adaptable: Media Queries

Selectores más precisos(menor uso de marcado innecesario)

Nuevo en ScriptsAnimaciones con Canvas

Drag & Drop

Geolocalización del usuario

Trabajo offline (cache de aplicaciones)Web Storage (session y local)

File System API (archivos enteros)

Bases de datos del lado del cliente

Web sockets (actualización en vivo, tipo Ajax)

Hilos (threads) Web Workers

Aceptar diferencias entre dispositivos...

...pero también aceptar diferencias entre navegadores y sus versiones.

En el fondo, el concepto clave es aplicar

Diseño Adaptable(responsive design)

La web es <---flexible--->(múltiples dispositivos, múltiples navegadores)

La web es MUY flexible:(¿Para cuál resolución diseñar? Para TODAS!!)

Y más!...

Antes: W3C definía reglas, que luego los navegadores

iban aplicando

Estructuras nuevasArticle: contenido fundamental,

independienteAside: contenido accesorio, no

fundamental Nav: barra de navegaciónSection: una sección o bloque (ex DIV)Header: introducción / orientación sobre

secciónFooter: final de una secciónHgroup: grupo de encabezadosFigure: contenido relacionado (imagen,

video, audio, canvas, gráficos, tablas estadísticas, etc.)

Figcaption: leyenda de un elemento Figure

Ejemplos:Antes:<div

id=“wrapper”></div><div

id=“noticia”></div><div

id=“banners”></div><div

id=“header”></div><div

id=“footer”></div><div id=“nav”></div><div id=“foto”>

<img src=“x” /><p>Esta foto habla de...</p></div>

Ahora:<section></section><article></article><aside></aside><header></header><footer></footer><nav></nav><figure>

<img src=“x” /><figcaption><p>Esta foto habla de...</p></figcaption></figure>

Secciones explícitas

ArticleAsideNavSection

1. Article

Es el contenido importante de cada página

Puede haber uno, o varios por página Ver ejemplo

2. Aside

Es información secundaria, que podría no estar.

Ej.: Barras laterales, banners.Ver ejemplo

3. Nav

Una barra de navegación.

Puede haber una, o varias por página

Ver ejemplo

4. Section

Una sección explícita.

Puede haber una, o varias por página

Ver ejemplo

4.a Section = “parte de...” Puede haber una o más sections dentro de un article: <article>

<section>Datos del Autor</section>

<section>Comentarios</section></article>

Ver ejemplo

4.b Section = “contenedor de...” Una section puede tener articles dentro (¡con sections dentro!): <section>

<article>Noticia de hoy</article>

<article>Noticia de ayer</article></article>

Ver ejemplo

Headers & Footers Pertenecen a secciones (article, aside, nav y section) además del body.

Ver ejemplo

FigureNo es solo para fotos (diagramas, SVG, MathML, listas de código) que puedan ser referenciados (apéndice, índice, etc.) <figure> <figcaption>Bla</figcaption> <img src="logo.jpg" /></figure>

Ver ejemplo

Textos más semánticosMark: resultados resaltados (en vez de span, em o strong)

Time: Hora, Fecha, o ambas cosas

Meter: Medidas dentro de una escala

Progress: Medidas dinámicas, cambiantes

<Etiquetas> que cambiaronA puede envolver varias cosas (bloques)Address pertenece a una sección, no solo a la

página enteraB estilo “diferente”, pero no más importante ni

negritaI cambio de entonación (en otro idioma,

tecnicismos)Strong es algo importante, aunque no se vea

distintoCite ahora es para “título” de la obra citada, no

para “autor”Hr cambio de tema entre párrafos (Ej.: viñeta entre

estrofas)Small es la letra chica de los contratos, términos

legales

nuevos type:

search, tel, url, email, number, range, datetime, datetime-local, date, month, week, time, color

Search:<input type="search">

-Botón “x” para “limpiar”-No permite saltos de línea-Degrada en “text”

-Puede incluir espacios o guiones-Degrada en “text”-Por ahora, es solo semántica

Valida que sea una URL absoluta

Email:

Verifica que la casilla sea válida.

Puede llevar el atributo multiple y en ese caso acepta varias casillas separadas por comas.

Number: <input type="number" min="0" max="100" step="10" value="50">

Formato: -12345.678e+90(puede ser negativo, usa punto para decimales, e para exponente, mássigno y potencia)

Range: <input type="range"min="0" max="100" step="10" value="50">

Usar si no importa la precisión del número, sino la usabilidad.

Date: <input type="date">

Puede llevar min, max (rango permitido) y step (por default, de a 1 día)Formato: 2011-09-19

Datetime:

Fecha y hora en formato UTC:2011-05-19T10:55:59.001-03:00

Month: <input type="month">

-Mismos atributos que Date (min, max, step)-Formato: 2011-05-¿vencimiento de tarjeta de crédito?

Week:<input type="week">

Mismos atributos que Date (min, max, step)Formato: 2011-W17

Time: <input type="time" min="11:30" max="23:30" step="600">

Mismos atributos que date.

Formato: 11:59 Formato con segundos (opcionales): 11:59:59

Color: <input type="color">

Opera 11+

Atributos nuevos

Multiple

Se usa en inputs de tipo file o email

Autocomplete

<input type="text" autocomplete=“on”> (por default)

Campos obligatorios<form> <input type="email" id="casilla" required> <input type="submit" value="Subscribirse"></form>

Autofocus

(a un solo campo, o solo tomará el último)

Placeholder

(tener en cuenta que el placeholder se esconde si hay autofocus)

Pattern<label> Nro. de Tarjeta de Crédito:<input pattern="[0-9]{13,16}"></label>

Datalist (auto-suggest)<input type="url" name="diario" list="sugerencias"> <datalist id="sugerencias">

No validar:

Para usar validación propia(con JavaScript)

Compatibilizar formulariospara navegadores viejos

https://github.com/ryanseddon/H5F

Multimedia HTML5:

Audio, video y animaciones

Audio<audio controls="controls">

Contenido alternativo.

</audio>

Formatos soportados

.mp3 - Chrome y Safari.ogg - Firefox y Opera

¿Explorer? Fallback con Player .flv

Video<video controls="controls" preload="auto">

Contenido alternativo.

</video>

Formatos soportados

.mp4 – Chrome 6, Safari 5, Explorer 9

.ogg y WebM – Chrome, Firefox y Opera

¿Explorer viejo? Fallback con .flv

Valores de Preloadpreload="none" (no descarga nada)

preload="metadata" (no baja el video, pero sí sus metadatos -tamaño, etc.-)

preload="auto" (lo baja por adelantado)preload="" (igual a auto, lo baja)

Si no es declarado, cada navegador decide, aunque especificación dice que debe aplicar “metadata”.

Posterposter="imagen_inicial.jpg“

Imagen que se ve antes de dar play

Video con fallbackhttp://camendesign.com/code/video_for_everybody

Animaciones “a la HTML5” (sin Flash)

3 tecnologías:

1) Canvas (bitmap)2) SVG (vectorial) -poco soporte-3) CSS3 Animations

Ejemplos de Canvas

http://agent8ball.com/

http://www.s5-style.com/

Libros sobre Canvas

Asegurar soporte:

http://excanvas.sourceforge.net

Referencias oficiales de HTML5:

Versión aprobada (vieja):http://www.w3.org/TR/html5/

Versión borrador “vivo”:

http://dev.w3.org/html5/markup/Overview.html

Versión del WHATWG:http://www.whatwg.org/html

Hacemos un break!

Y seguimos con:

Posibilidades de CSS3

Nuevas posibilidades

estéticas

Textos: Fuentes, columnas, wrap.

Colores: transparencia, degradé. Elementos decorativos: bordes,

sombras de cajas y de textos, efectos 3D, fondos

múltiples.

1. Tipografías con @font-face

@font-face{ font-family:Mifuente; src: fuente.woff; }

#titulos{ font-family: Mifuente, arial, helvetica, sans-serif; }

@font-face {font-family: 'Mega'; /* Nombre a usar */

src: url('mega.eot'); /* Compat. c/IE 9 */

src: url('mega.eot?#iefix') format('embedded-opentype'), /* IE 6-8 */

url('mega.woff') format('woff'), /* resto */

url('mega.ttf') format('truetype'), /* Safari, Android, iOS */

url('mega.svg#MegalopolisExtraRegular') format('svg'); /* iOS versiones viejas */}

Columnas column-count: Cuántas column-width: Ancho column-gap: Huecocolumn-rule: Rayita

.tres_columnas{ column-count: 3; column-width: 120px; column-gap: 24px;column-rule: 1px solid #999; }

2. Colores en CSS3

RGBa HSL HSLa Degradés Transparencias

Translucidez RGBa body{ background-color:rgb(100,20,40); /* Fallback sólido */

background-color:rgba(100,20,40,0.5);}

A diferencia de opacity, no se hereda!

RGBa(0,0,0,0) es transparente total

¿Y Explorer?Comentarios Condicionales: <!--[if IE]> <link rel= “stylesheet”

href= “hojaexplorer.css”><![endif]-->

Dentro de hojaexplorer.css:

.translucido { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); /* mismo valor de inicio y fin / zoom: 1; }

Formato startColorstr

AARRGGBBAA = Alpha, 00 transparente, FF

sólidoRR = Red

GG = GreenBB = Blue

Conversor RGB a Hexadecimal:http://www.javascripter.net/faq/rgbtohe

Tono, saturación, brillo: HSL body{ background-color: hsl(360,100%,20%);}

Valor de Tono: 0 a 360 (0 rojo, 120 verde, 240 azul, 360 rojo)

Conversor para fallback:http://serennu.com/colour/hsltorgb.php

Tono, saturación, brillo + Translucidez: HSLabody{ background-color: hsla(300,130%,65%,10%);}

HSL con translucidez Alpha

Generador de Degradéshttp://gradients.glrzad.com

Bordes redondeados

#algo { border-radius:10px;

Border-image#algo{border-image: url("borde.png") 12 repeat round; }

Ejemplo de border-image http://www.w3.org/TR/css3-background/#border-images

Ejemplo de Box-shadow

.sombra {box-shadow: 10px 10px 5px #999;}

Sombra en Explorer

.sombra { zoom: 1; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);}

Text-shadow

.sombra { text-shadow: 10px 10px 5px #999;}

Media queries(consultas sobre el medio)

Detectan características de un dispositivo, para aplicarle distintos estilos

http://www.w3.org/TR/css3-mediaqueries

http://mediaqueri.

Media “a la antigua” En el HTML:

Media dentro de CSS @media screen { h1 { font-size: 2em; } }

Característicasdetectables

width, height, device-width, device-height,orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

Condiciones (Queries): <link href=“celular.css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 320px)” >

Detectar orientación <link rel="stylesheet" media="all and (orientation:portrait)" href=“vertical.css">

Detección de tamaño

@media screen and (min-width: 400px) and (max-width: 2900px) { /* solo leerán esto en PCs */}

iPhone, iPad y PC<link rel="stylesheet" media="all and (max-device-width: 480px)" href=“iphone.css">

Criterio antiguo (actual!):

Sitio PC+ media queries = Sitio móvil??????

La ausencia de detecciónde Media Queries debe ser el primer filtro!

Mejor:

Sitio Móvil+ media queries = Sitio PC(Progressive enhancement)

Móvil primero:

Compatibilidad para navegadores viejos:http://code.google.com/p/css3-mediaqueries-js

TODOS los fallbacks:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Transformaciones, transiciones y

animaciones con CSS3

Transformación = “estática”, cambia valor

de una propiedad

Transición = “dinámica”, cambia entre

dos estados

Animación = “serie de” transiciones, con timing

Transformaciones

Funciones posibles de transform:

1. scale2. rotate3. skew4. translate5. matrix

1. Scaletransform: scale(1.5);/* Aumenta 50% ambos sentidos */

transform:scale(1.5,0.5);/* Aumenta 50% horizontal y reduce 50% vertical */

Escalar en Explorer <9

zoom: 1; /* Siempre al principio, para activar hasLayout */

/* Ahora sí, reducimos o ampliamos */zoom: 1.5; /* Aumenta tamaño */

2. Rotatetransform:rotate(45deg);

Positivo: sentido agujas del relojNegativo: contra reloj

3. Skewtransform: skew(5deg,-5deg);

Por separado:skewX(grados)skewY(grados)

4. Translatetransform: translate(30px,10px);

Por separado:translateX(distancia)translateY(distancia)

Transiciones

Cambio de valor de una propiedad en un tiempo

Ejemplo:

a { color: white; background: red;}

a:hover {color: yellow; background: blue;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;

Propiedades por separado

transition-property: Propiedad(es) CSS a ser animadas.

transition-duration: En segundos. Por defecto el valor es 0.

transition-timing-function: Define ease (por defecto), linear, ease-in, ease-out y ease-in-out.

transition-delay: Pausa antes de iniciar animación.

Editor online de timing de transiciones:

http://matthewlein.com/ceaser/

Comparación de timings:http://www.the-art-of-web.com/css/timing-function/

Valores de timing por defecto:http://www.w3.org/TR/css3-transitions/

Animaciones solo con CSS!

Referencia oficial del W3C:http://dev.w3.org/csswg/css3-

animations/

Pasos:1. Defino keyframes (similar a “capa” en Flash)

2. Relaciono con objeto y defino propiedades

1. Defino keyframes:

@-webkit-keyframes nombre { 0% {

transform:funcion(valor); }

20% { transform:funcion(valor);

100% { transform:funcion(valor);

2. Relaciono con objeto y defino propiedades:#objeto { -webkit-animation-name: nombre; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out;}

HTML5 & CSS3

Documents

Transcript of HTML5 & CSS3

¿Cómo crear tu web con HTML5 y CSS3?

Conoce HTML5 y CSS3

Html5 y Css3

¿Cómo crear una web con HTML5 y CSS3?

Libro de Html5 y Css3

El gran libro de html5 css3 y javascript

CURSO : HTML5 AVANZADO CON CSS3 PRE – …CURSO : HTML5 AVANZADO CON CSS3 DURACIÓN : 32 Horas / 16 Sesiones PRE – REQUISITO : Diagramación HTML5 con Dreamweaver NUEVAS CARACTERÍSTICAS

HTML5, CSS3 y JavaScript 17 24 OK

Introducción a HTML5 & CSS3

Diseñando la web móvil con HTML5 y CSS3

Ejemplos de sitios con HTML5 + CSS3 + jQuery

Html5 y css3: Introducción y aplicación desde hoy

Html5, css3 y js

Introducción a HTML5 y CSS3 AWGR

Introducción a HTML5 y CSS3

Web design responsivo e adaptativo - HTML5/CSS3

Html5, css3, java script

HTML5 & CSS3 - Escuela Web · HTML5 & CSS3 BÁSICO-SEMÁNTICA DURACIÓN 20 HRS MCO-000609-175-0013 Escuela Web Design Dedicados al Diseño Editorial y Desarrollo Web. TEMARIO CSS3

HTML5, CSS3 y móviles

Diseño web CON HTML5 yCSS3 · 1. diseÑo web con html5 y css3 diseÑo web con html5 y css3 + de ...