"Responsive Web Design, Mobile First y
Progressive Enhancement en acción"


www.leolanese.com

@leolaneseltd

19/20 Mayo, 2012

Slides: www.leolanese.com/jsconf

Design is not just what it looks like and feels like. Design is how it works. – Steve Jobs

- Quién soy?

Leo Lanese. Web Developer

- Qué hago ?

EUROPEAN TOUR!

- Sobre que hablaremos?

Hablaremos sobre unas nuevas ideas, y como estas cambiarán el modo en que trabajamos

@leolaneseltd

Que es la Web? 
    
    Web en Terminal (Ej. lynx)
    
    
    Web Telefonos Mobiles
    
    
    Tablet Web & Laptop Web
    
    
    Web en Desktop
    
    
    Web en TV
    
    
    Web en autos, Web en la cocina, Web el anteojos ... !

✓

✓

✓

✓

✓

✓

http://www.flickr.com/photos/11136492@N02/3721448864

Muy pronto cualquier cosa podrá estar conectada a la Web.

La pregunta es: Como desarrollaremos para todos los dispositivos y plataformas que existen y que vendran? conected http://www.flickr.com/photos/fdecomite/5912303770
Actualmente tenemos diferentes 'teams' creando diferentes Web Sites para diferentes dispositivos conectados a la Web

a más dispositivos.. más recursos y tiempo ...


realmente necesitamos un cambio!

lock
YAY! La revolución de la Web Unica!

Pensemos en una única web!


Una Web capaz de fluir a través de todas las plataformas, dispositivos y marcas existentes y por venir


Solo una Web, un proyecto y un team desarrollándolo

hippy http://www.flickr.com/photos/misterno/5787984204
Responsive Web Design es la nueva revolución que cambia todo, eliminando la necesidad de diferentes diseños y fases de desarrollo para cada nuevo dispositivo del mercado hippycar http://www.flickr.com/photos/misterno/5787434179/

No hay diferentes Webs!

SOLO HAY UNA UNICA WEB!



"Web sites sera una de las muchas interfaces que usaremos para interactuar con el servicio",- @yiibu

http://www.flickr.com/photos/generalnoir/391009102
Responsive Web Design
Los Componentes son:

1- Un flexible layout basado
en cuadrículas (flexible grid)


Ej: Unidades relativas para el tamaño de los fonts


Ej: 960px Redes flexibles

2- Imágenes y media flexibles


Ej: max-width Flexible imagenes ... es un hack?


Ej: BBC News responsive images (C/S size)


Ej: W3C propuesta Responsive images (C size)

tetris

3- media queries


Ej: media queries


Ej: media queries aplicadas

Ordenando las media queries ... SMALL, MEDIUM, LARGE ...

...los términos 'mobile' y 'tablet' son tan amplios que son de poca ayuda para la describir de lo que estamos tratando de hacer",-@beep


"...si queremos estar más preparados para el futuro Responsive Design, necesitaremos dejar de pensar en términos como '320px', '480px', '768px' o lo que sea...",- @RWD

size http://www.flickr.com/photos/meetrajesh/6972883401/
Responsive Web Desing es un gran comienzo. Pero necesitamos de Mobile First y Progressive enhancement también greece
Mobile First es 'Contenido Primero' MF
Pronto el 'CONTENIDO' estará en todos lados, los nuevos dispositivos estaran conectados, nuestro contenido necesitará ser líquido y listo para entenderlos...

"Ten tu contenido listo para ir a cualquier lugar porque va a ir a todas partes",- @brad_frost

http://www.flickr.com/photos/rosh/246187583/
El Contenido necesita ser líquido, como el agua, y media-queries podria ser considerada como los bordes que lo contienen tetris
Cuando el agua fluye dentro de grandes o pequeñas partes del rio, se adapta instantáneamente a la forma y el tamaño de su entorno

tetris
Vacía tu mente, se amorfo, moldeable
como el agua.
Bruce_Lee and @DrummerHead tetris

Pensemos entonces en agua ... no tiene forma ... ahora congelemos la idea y hagamos algunos cubitos ! tetris
'Progressive Enhancement' ó Mejora Progresiva

Trabajamos con tecnologias de vanguardia que cambian constantemente

PE nos da la posibilidad de detectar las capacidades del entorno y adaptarnos progresivamente

'Progressive Enhancement' genera 'Progressive user-experiences'

http://www.flickr.com/photos/ntr23/187248039
Con 'Progressive Enhancement' trabajaremos con el desde el core núcleo y luego iremos agregando capa sobre capa, basándonos en las capacidades detectadas para optimizar la expericencia final de usuario ó "final user-experience" http://www.flickr.com/photos/theilr/4229575296/
'Feature detection' nos da la posibilidad de ser indiferentes al entorno y el contenido automaticamente incrementa ó disminuye la 'user-experience' basándose el las capacidades del dispositivo
El resultado final serán apariencias 'similares' pero no 'identicas' del mismo contenido en diferentes entornos

Ej: border IE and WebKit

http://www.flickr.com/photos/treehouse1977/496088319/
En lugar usar tiempo en 'pixel-perfect' hagámoslo 'feature-detection' y 'proportional-perfect' http://www.flickr.com/photos/lonelycoo/3313530719/
Como detectamos las capacidades de nuestro entorno

jQuery hasClass jQuery hasClass


pure js matchMedia pure js matchMedia


CSS media queries CSS media queries

Modernizr al rescate!

Trabajar con fallbacks ó el Modo de emulación (polyfills)

CHROME 18

    
<html class="js flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation
            postmessage websqldatabase indexeddb hashchange history
            draganddrop websockets rgba hsla multiplebgs backgroundsize
            borderimage borderradius boxshadow textshadow opacity
            cssanimations csscolumns cssgradients cssreflections csstransforms
            csstransforms3d csstransitions fontface generatedcontent video
            audio localstorage sessionstorage webworkers applicationcache
            svg inlinesvg smil svgclippaths cookies cssresize cssscrollbar
            no-devicemotion deviceorientation fullscreen json">

IE 8

    
<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage
            no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets
            rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow
            no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients
            no-cssreflections csstransforms no-csstransforms3d no-csstransitions
            fontface generatedcontent video audio localstorage sessionstorage no-webworkers
            no-applicationcache no-svg inlinesvg smil svgclippaths">
    

    Mzr
Finalmente pongamos esto en acción!

js or not js?

capacidades del dispositivos html5test ringmark canIuse

Modernizr svg fallback .svg

yepNope + Modernizr yepNope + Modernizr

Pollyfills a la carta www.html5please.com

Caso de estudio: bostonglobe.com (2010) bostonglobe.com (NOW)

"Muchas gracias!"



19/20 Mayo, 2012

Slides: www.leolanese.com/jsconf

No vemos en: Edinburgh, Scotland JS Conference 2012


Follow me at: @leolaneseltd


Gracias a www.flickr.com y los genios artistas por las fotos. www.creativecommons.org