Introducción a HTML5 y CSS3 - ArtMedia 2011

HTML5 & CSS3

Hernán Beati

@[email protected]

Hernán BeatiDesarrollador Web + 12 años

+ coautor conMaximiliano Firtman

Autor

libro:

Fundador de:

Docente en:

Web = HTMLLenguaje universal, base de la

Web

HTML 4.01 = 1999XHTML 1.0 = 2000 XHTML 1.1 = 2001

XHTML 2 = ?

HTML5

¿A qué se le llama HTML5?HTML5 (nuevas etiquetas,

marcado)

CSS3 (nuevos estilos)

APIs JavaScript (programación)

+ Otros estándares W3C (SVG, MathMl)

+ Estándares “de facto” (microformatos)

+ Experimentos de algún navegador+ + + ...

Nuevo en HTML5

Nuevas etiquetas semánticas(Google 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

Pero...¿cuál es “la” pregunta?

(que todos nos estamos haciendo con HTML5 y

CSS3)

¿Ya se puede usar!?

“Naaahh...¡si en Explorer

no anda!”

Esa duda se basa en rumores*

*(conceptos erróneos)

El principal:

Esperar que la perfección total se haga realidad un día.El “Día D” nunca existirá…

“Cuando todos los seres humanos del mundo se actualicen a X navegador...”

La diversidad de versiones y plataformas siempre existirá: sin plugins, JavaScript desactivado, resoluciones MUY diferentes.

“Cuando todos los navegadores interpreten idénticamente el 100% del estándar...”Las diferencias entre navegadores siempre

existirán, jamás hubo 2 navegadores iguales.

La evolución / innovación implementando nuevas capacidades, siempre existirá.

Siempre seguirán en uso navegadores antiguos.

“Cuando el W3C publique la especificación, ahí sí se podrá usar!”

En 2015 recién será “Recomendación”. ¿Para 2022 la habrán implementado los navegadores?

HTML: primer estándar VIVO, sin versión.

Se estandarizan las innovaciones.Lo que ya funciona nunca se quitará.

“...porque yo quiero que mis diseños se vean idénticos en todos los navegadores y en todos los dispositivos...”

¿!? Existen celulares de 128 x 160 pixeles, y plasmas de 1920 x 1200px!!

¿Y entoncescuál es la

respuesta?

¿Ya se puede usar!?

Versión abreviada:

Sí

Versión explicada:

Se puede usar

mediante técnicas

de compatibilidad

Principales técnicas:

Mejora progresiva (Progressive enhancement).

Degradación elegante (Graceful degradation).

Mejora regresiva (Regressive enhancement).

1. Mejora progresiva(Progressive enhancement)

“Después de crear una página básica, que funcione en Explorer, agreguemos funcionalidades extra para navegadores más potentes,usando selectores avanzados.”

Dave Shea (2003)

www.csszengarden.com

2. Degradación elegante(Graceful degradation)

“Diseñar para los navegadores más potentes y móviles, haciendo uso pleno de HTML5 y CSS3, asumiendo que no se va a ver idéntico.”

Degrada en sitio menos decorado o menos funcional (le “falta” algo).

Andy Clarke propone crear hoja de estilo de texto plano para Explorers viejos, y no perder tiempo en compatibilizar la estética...

(O cobrar ese tiempo aparte!)

Aplicamos nuevas etiquetas HTML5 y CSS3 para navegadores nuevos, y luego agregamos scripts para “fabricar” esa misma funcionalidad en navegadores que no la traen (funcional, o a veces característica estética).

Se les llama shims, polyfills, scripts compatibilizadores, etc.

Por ejemplo: Modernizr, Selectivizr, Yepnope.

Tercera posición:

3. Mejora Regresiva:Complementar al navegador

Aceptar diferencias entre dispositivos...

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

NO BUSCAR UNIFORMIDAD!!!

En el fondo, el concepto clave es aplicar

Diseño Adaptable(responsive design)

Supera actitudes extremas de:

-Usar sólo características CSS básicas que sean soportadas por el obsoleto Explorer 6 (recién Explorer 8 aplicó CSS 2.1 completo, 10 años!!!).

-Olvidarse completamente de navegadores anteriores y limitados, diseñando sólo para navegadores modernos (Andy Clarke…)

¿qué debo hacer para usar

HTML5 y CSS3 ya?

Entonces,

Cambiar la forma

de pensar el diseño web.

Nuestro concepto

de diseño web no puede seguir

siendo el mismo que en diseño

“gráfico”.

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!...

“...pero yo quiero que mis diseños se vean idénticos en todos los navegadores y en todos los dispositivos...”

¿!!!?

Pensar el diseño web como creación de experiencias de usuario, y no como una decoración rígida, uniformizadora, ni como un lienzo artístico.

Algo es diseño si es funcional a una meta,

EL DISEÑO NO ES ARTE

“La” pregunta del diseño web debe

ser:

¿puedo hacer las tareas que vine a

hacer al sitio?(Con cualquier dispositivo, con cualquier navegador y versión)

Deberemos explicar a clientes y jefes

que cada usuario “verá levemente

distinto”cada sitio web¡Porque es inevitable

y no tiene nada de malo!

Diseño adaptable = Responsive design

Resumiendo:(respuestas a “la” pregunta)

Sí, se puede usar HTML5 y CSS3 hoy! Aplicando técnicas de compatibilidad:

Mejora progresiva, Degradación elegante o Mejora regresiva.

Debemos aceptar la flexibilidad de la web, y cambiar nuestras expectativas de diseño.

HTML5: Primer estándar

“vivo”

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

iban aplicando

Ahora: navegadores

innovan, y W3C lo agrega al

estándarEs lo lógico...

Conclusión:

HTML5 es el estándar más consensuado de la historia!

Todos lo apoyan...

¿Objetivo de nuevas etiquetas?

Usar etiquetas con significadoGoogle debe entender cuál contenido es

importante y cuál no lo es.

Estructuras nuevasArticle: contenido fundamental,

independiente

Aside: contenido accesorio, no fundamental

Nav: barra de navegación

Section: una sección o bloque (ex DIV)

Header: introducción / orientación sobre sección

Footer: final de una sección

Hgroup: grupo de encabezados

Figure: 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

Compatibilizador para Explorer

Textos más semánticos

Mark: 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 entera

B estilo “diferente”, pero no más importante ni negrita

I cambio de entonación (en otro idioma, tecnicismos)

Strong es algo importante, aunque no se vea distinto

Cite 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

¿Aún más significado?

Extensibilidad con Microdata y

Microformatos“Google debe entender cuál contenido es

importante y cuál no lo es...”

Datos personalesOpiniones / revisionesContactosProductosEmpresasRecetasEventosVideo

http://www.google.com/support/webmasters/bin/answer.py?hl=es&answer=146897

<div class="vcard"> <img class="photo" src="http://www.sitio.com/tim.jpg" /> <strong class="fn">Tim Berners-Lee</strong> <span class="title">Director</span> del <span class="org">W3C</span> <span class="adr"> <span class="street-address">C/Ada Byron, 39</span> <span class="locality">Asturias</span>, <span class="region">España</span> <span class="postal-code">33203</span> </span>

</div>

Ver ejemplo

¿Principal dificultad de los formularios?

Validación!

Soluciones HTML5:

Nuevos tipos de input y nuevos atributos auto-validables

13 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”

Tel:

<input type="tel">

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

URL:

<input type="url">

Valida que sea una URL absoluta

Email:

<input type="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:

<input type="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

<input type="file" multiple="true">

Se usa en inputs de tipo file o email

Autocomplete

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

<input type="text" autocomplete=“off”>

Campos obligatorios

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

Autofocus

<input type="text" autofocus>

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

Placeholder

<input type="text" placeholder="Escriba su nombre">

(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">

<option label="La Nación" value="http://www.lanacion.com.ar"></option> <option label="Clarín" value="http://www.clarin.com"></option> <option label="Página 12" value="http://www.pagina12.com.ar"></option> <option label="Infobae" value="http://www.infobae.com"></option> </datalist>

No validar:

<form novalidate>

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">

<source src=“x.ogg" type="audio/ogg" /> <source src=“x.mp3" type="audio/mpeg" />

Contenido alternativo.

</audio>

Formatos soportados

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

¿Explorer? Fallback con Player .flv

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

<source src= "x.mp4" type="video/mp4" /> <source src= "x.webm" type="video/webm" /><source src= "x.ogg" type="video/ogg" />

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”.

Poster

poster="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:

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/rgbtohex.htm

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: HSLa

body{ background-color: hsla(300,130%,65%,10%);}

HSL con translucidez Alpha

Generador de Degradés

http://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.es

Media “a la antigua” En el HTML:

<link rel="stylesheet” media="screen" href=“pantalla.css">

<link rel="stylesheet” media="print" href=“impresora.css">

<link rel="stylesheet” media=“handheld" href=“algun-celular.css">

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)” >

<link href=“tableta.css" rel="stylesheet" media="only screen and (min-width: 321px) and (max-width: 768px)" >

<link href=“monitor.css" rel="stylesheet" media="screen and (min-width: 801px)">

Detectar orientación

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

<link rel="stylesheet" media="all and (orientation:landscape)"href=“horizontal.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">

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href=“ipad.css">

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href=“ipad-horizontal.css">

<link rel="stylesheet" media="all and (min-device-width: 1025px)" href=“pc.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:

<link rel="stylesheet" media=“screen" href=“celulares.css">

<link rel="stylesheet" media=“screen and (min-device-width:1024px) and (max-width:989px)" href=“pc.css">

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. Scale

transform: 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. Rotate

transform:rotate(45deg);

Positivo: sentido agujas del relojNegativo: contra reloj

3. Skew

transform: skew(5deg,-5deg);

Por separado:skewX(grados)skewY(grados)

4. Translate

transform: 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;}

Conversor agrega prefijos

http://animationfillcode.com

Soporte navegadoresy ejemplos

http://robertnyman.com/css3/

Sencha Animator (+/- Flash 3)

http://www.sencha.com/products/animator/

Adobe Wallabyhttp://labs.adobe.com/downloads/wallaby.html

Adobe Edgelabs.adobe.com/technologies/edge/

Estar pendientes de avances del

W3C:http://www.w3.org/Style/CSS/current-work

APIs de JavaScript

(son algo para programadores, solo

daremos un vistazo para saber qué posibilidades

hay)

Objetivos:

1) No depender de librerías (JQuery y similares) para funcionalidades comunes

2) Nuevas funcionalidades

1. Geolocalización

2. Multimedia: Audio, Video, Canvas

3. Trabajo offline conLocal Storage, Web Storage,

Bases de Datos locales, Application Cache.

4. File System, Historial, WebSockets, Drag and Drop,

5. Hilos (Threads): Web Workers

6. Móviles: DeviceMotion, Viewport, Gestures, Touch

Ver ejemplos:

http://www.html5demos.com

Usar técnicas de compatibilidad

también para JavaScript:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Conclusión:

Usar HTML5 y CSS3

mediante técnicasde compatibilidad

+Aplicar Diseño Adaptable

(responsive design)

HTML5 & CSS3

Hernán Beati

@[email protected]

Introducción a HTML5 y CSS3 - ArtMedia 2011

Design

Transcript of Introducción a HTML5 y CSS3 - ArtMedia 2011