Desarrolla la web del futuro: HTML5, CSS3 y Responsive Web Design

Desarrolla la web del futuro Víctor Rodríguez Lledó Miguel Ángel
Arroyo Ortega

<!DOCTYPE html> Desarrolla la web del futuro presente

Contenidos •HTML5 •CSS3 •Responsive Web Design

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

<!DOCTYPE html>

HTML5 • Historia • Semántica • Formularios • Audio y
vídeo • Canvas • Oﬄine • Almacenamiento local

No es HTML5 •Geolocalización •Websockets •WebGL

Historia

Historia HTML 2.0 HTML 4.01 XHTML 1.0/1.1 WHATWG HTML5 W3C
XHTML 2 W3C HTML 5 HTML5

Semántica

No es la posición, es el contenido

Semántica •header •nav •footer •article •section •hgroup •aside...

Una cura para la “divitis”

Semántica •b •i •small •strong

Outline El esquema de HTML5

Microformatos

Formularios •Semántica • search • tel • url • email
• date, datetime, time, month , week • number

Formularios •Interacción • range • progress • meter •Javascript es
el presente

Formularios •Atributos • placeholder • required • autocomplete • autofocus
•Datalist

Data Attributes

Audio y vídeo

Audio <audio controls preload=”auto” loop autoplay> <source src=”rey-pollo-frito.mp3” /> <source
src=”rey-pollo-frito.ogg” /> <object type=”application/x-shoc...> <param name=”movie” player=.... /> <a href=”rey-pollo-frito.mp3”>Descargar gratis</a> </object> </audio>

No todo es perfecto...

Vídeo <video controls preload=”auto” width=”360” height=”240” poster=”alessandra-ambrossio.jpg”> <source src=”desfile-victoria-secret.mp4” />
<source src=” desfile-victoria-secret.ogg” /> <object type=”application/x-shoc...> <param name=”movie” player=.... /> <a href=”desfile-victoria-secret.mp4”>Internet is for porn</a> </object> </video>

Formatos de vídeo •La regla: • OGG (o WebM en
el futuro) • H.264

http://chalk.37signals.com https://github.com/javisantana/whitebrd.me

Almacenamiento local

Almacenamiento local •Cookies •Web storage • Session • Local •Bases
de datos SQL

Almacenamiento local var charlaWebmasterJaen = { author: 'Miguel Ángel y
Víctor', description: 'Charla de HTML5 y CSS3', date: '12/12/2011' }; // almacenamos nuestro objeto sessionStorage.setItem('charlaWebmasterJaen', JSON.stringify(charlaWebmasterJaen)); // y después lo recuperamos var charlaWebmasterJaen = JSON.parse(session.getItem('charlaWebmasterJaen'));

Oﬄine •No connection, no problem •Cache manifest

Cache manifest CACHE MANIFEST CACHE: index.html cronometro-charlas.js estilos.css FALLBACK: hora-servidor.js
fallback-hora-servidor.js NETWORK: *

Workers & Sockets •No es HTML5 •Workers son “hilos” •Sockets:
comunicación continua con el servidor

Geolocalización

Geolocalización •No es HTML5 •GPS (sobre todo en móviles) •WiFi
+ IP •Siempre pide permiso del usuario •API sencilla (en Javascript)

Geolocalización getCurrentPosition(); watchPosition();

Utilidades •HTML5 Shiv •Modernizr •HTML5 Boilerplate y HTML5 Mobile Boilerplate

I CSS3

Esta vez es Photoshop...

CSS3 •No más bordes redondeados con Photoshop •No más sombras
con Photoshop

CSS3: lo básico •Colores rgba •Sombras •Border-radius •Border-image •Degradados •Múltiples
backgrounds •Tipografía

CSS3 input[type=”button”] { background-color: rgba(0, 0, 0, 0.6); font-size: 12px;
transition: all 0.5 ease; } input[type=”button”]:hover { background-color: red; font-size: 15px; }

“Typography is 95% of web design” Fuente: Information Architects

CSS3: un pasito más •Transiciones •Transformaciones •Animaciones

CSS3 Vendor-driven Vendor-pre xes hell (pero tenemos una solución)

I SASS

SASS = CSS +

SASS • Mixins • Variables • Estilos anidados • Herencia
• Funciones prede nidas

SASS $azulete: #369; header { margin-top: 10px; h1 { color:
darken($azulete, 10%); } }

SASS @mixin cabeceras($margen:10px) { margin: $margen; h1 { color: saturate(pink,
50%); } } header { @include cabeceras(20px); }

SASS •Dos sabores: SCSS y SASS •Genera CSS válido •LESS
es otra alternativa

Bourbon Pushing the limits

https://github.com/thoughtbot/bourbon http://compass-style.org

Un gran poder conlleva una gran responsabilidad

Responsive Web Design •¿Qué es? •Ethan Marcotte •Diferentes dispositivos, diferentes
experiencias

dowebsitesneedtolookexactlythesameineverybrowser.com Fuente: David Shea - FOWD 2011

Responsive Web Design •foo.com/mobile/article/123

Responsive Web Design •Media queries = estilos condicionados por el
dispositivo

Responsive Web Design @media screen and (min-width: 600px) and (max-width:
900px) { ... } <link rel="stylesheet" media="only screen and (-webkit-min- device-pixel-ratio: 2)" href="iphone4.css" /> <link rel="stylesheet" media="only screen and (orientation:landscape)" href="landscape.css">

50% Oct 2011 Oct 2010 Oct 2012? 2011 Data Source:
http://gs.statcounter.com Fuente: David Shea - FOWD 2011 Hoy por hoy

Hoy por hoy http://www. ndmebyip.com/litmus/

“An escalator can never break; it can only become stairs.”
Mitch Hedberg - Comedian Vía: http://slidesha.re/t24H

Websites ≠ Webapps

Recursos • delicious.com/webmasterjaen • twitter.com/webmasterjaen/developers

Recursos abookapart.com

Let’s rock! El futuro está en el browser

La AWJA os necesita :-)

Síguenos en Twitter @maxcosworth @vlledo @webmasterjaen

Desarrolla la web del futuro: HTML5, CSS3 y Responsive Web Design

Desarrolla la web del futuro: HTML5, CSS3 y Responsive Web Design

Other Decks in Programming

Featured

Transcript