RESPONSIVE WEB DESIGNAGOSTO 2013

TEMARIOMedia queries para adaptabilidad de sitios.Tipos de media queriesUso de herramientas del navegador para debuggear.Herramientas para blueprints/ diseño responsives.Frameworks para modelado responsive.Ejemplos de Herramientas para deteccion en el servidor

1 INTERNET

Review (http://www.mobilexweb.com/blog/google-glass-browser-

html5-responsive-web-design)

NO SÓLO DISPOSITIVOS......también contextos dentro de la páginaDemo (http://localhost:81/experimentos/test.html)

CSS - MEDIA QUERIESPermite definir una visualización selectiva según lapantalla/viewport/media del dispositivo que está viendo el sitioSi el dispositivo cumple la regla de estilo, se aplica (simplementetrue o false)Soporta conectores lógicos "and" "not" y "," (or)

MEDIAS (DISPOSITIVOS) EN HTML4:

‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’MEDIAS CSS2:

CSS2 define la misma lista, pero ‘aural’ es deprecado y agrega‘embossed’, ‘speech’ y ‘all’

EJEMPLO

<LINK REL="STYLESHEET" TYPE="TEXT/CSS" MEDIA="SCREEN" HREF="SANS-SERIF.CSS">

<LINK REL="STYLESHEET" TYPE="TEXT/CSS" MEDIA="PRINT" HREF="SERIF.CSS">

DENTRO DE LA HOJA DE ESTILO, SE PUEDE DEFINIRUN ESTILO SELECTIVO PARA UNA PANTALLA

@MEDIA SCREEN {

* { FONT-FAMILY: SANS-SERIF }

}

@MEDIA ALL AND (MIN-WIDTH:500PX) { … }

@MEDIA (MIN-WIDTH:500PX) { … } /*(HACEN LO MISMO)*/

MEDIA QUERIES EN HTML5 Y CSS3:Es el mismo comportamiento, simplemente agrega más valores posibles

width / height (con prefijos opcionales "min-" y "max-") aplicablesa display/viewport Example: media="screen and (min-width:500px)"device-width/device-height("min-" y "max-") ancho/alto dePANTALLA/PAPEL. Example: media="screen and (device-height:500px)"orientation: "portrait" or "landscape" Example: media="all and (orientation: landscape)"aspect-ratio: ("min-" and "max-") Relación entre ancho y alto deldisplay/viewport Example: media="screen and (aspect-ratio:16/9)"device-aspect-ratio: ("min-" and "max-") Ídem pero con la relaciónancho/alto del dispositivo

CSS3 MEDIA QUERIES (CONT)

color: "min-" and "max-" :bits por color del display. Example: media="screen and (color:3)"color-index: ("min-" and "max-") número de colores que eldispositivo puede soportar.monochrome: ("min-" and "max-") bits por pixel buffermonocromo. Example: media="screen and (monochrome:2)"resolution:(dpi or dpcm) ("min-" and "max-")densidad deldisplay/papel. Example: media="print and (resolution:300dpi)"scan:("progressive" and "interlace") método de escaneo del displayde tv Example: media="tv and (scan:interlace)"grid:("1" ó "0") si el dispositivo de salida es una grilla o mapa debits "1" para grid, and "0" cualquier otro. Example: media="handheld and (grid:1)"

ÚTIL Y CÓMODO...NO?

...NO

HERRAMIENTAS PARA DEBUGGEAR

Nativas del navegadorplugins (montones y para todos gustos) Ejemplo para demo

(http://www.responsivewebdesign.co.uk/)

ENTONCES... YA PUEDO HACER SITIOS RESPONSIVE!!!

...Y SÍ...

...PERO...

HERRAMIENTAS PARA BLUEPRINTS/ DISEÑORESPONSIVES

FRAMEWORKSBootstrap (http://twitter.github.io/bootstrap/getting-started.html)

Foundation (./foundation-4.2.3/)

Skeleton (http://www.getskeleton.com/)

html5kickstart (http://www.99lime.com/elements/)

html5boilerplate (http://html5boilerplate.com/)

responsify.it (http://responsify.it/)

HERRAMIENTASEj de blueprint

(http://tympanus.net/Blueprints/ResponsiveMultiColumnForm/)

webflow (beta, pero muy prometedor) (http://www.webflow.com/) demo

(http://playground.webflow.com/)

froont (http://froont.com)

ESTRATEGIA DE DISEÑO¿QUÉ TARGET TIENE MI SITIO?

1° PROTOTIPAR

EL CONTENIDO ES LO MÁS IMPORTANTE!!!

Casper (http://net.tutsplus.com/tutorials/javascript-

ajax/responsive-screenshots-with-casper/) (herramienta paraprototipar)

GRACEFUL DEGRADATIONDesktop firstEnfocado a los navegadores más potentes en los dispositivos másnuevos. EjHTML5 video ⇔ Object/SWFWebGL ⇔ Canvas2DReemplazar una animación (por ej, canvas) con gif

PROGRESSIVE ENHANCEMENTMobile firstEnfocado a llegar a mayor cantidad de usuarios (evitarsegmentación de mercado)Una buena estrategia es detectar qué soporta cada dispositivo yofrecer características ascendentes (aplicable tambíen a GD)

CUÁL ES LA MEJOR ESTRATEGIA?

....es muy artesanal

COMPATIBILIDAD

¿COMO ASEGURARNOS QUE NUESTRA ESTRATEGIA DEDISEÑO VA A FUNCIONAR?

SI YA TENGO MI PROTOTIPO DISEÑADO... ¿QUE PUEDEPASAR?

Desktop: IE 6,7 y 8! 9, 10 soportan media queries 11 AUTOACTUALIZABLE (como chrome, FF opera,etc)

Mobile: ANDROID BROWSER!!!

JScan I use (http://caniuse.com/#feat=css-mediaqueries)

DETECCIÓN

Modernizr (http://modernizr.com/)

Liviano, recomendado para 3g (OJO CON LO QUE SE DETECTA) Simplemente se agrega un .JS Se consulta por la feature que queremos agregar/testear

JSPOLYFILLS/SHIMS

Respond (https://github.com/scottjehl/Respond) Intentacompletar elementos que no están presentes de un navegador Balanceado, pero puede agregar elementos que no voy a usarMasonry (http://masonry.desandro.com/) orientado al diseño depágina (Muy MUY completo)Polyfills recomendados por Modernizr

(https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-

Browser-Polyfills)

MODERNIZRcon la misma noción de las media queries

/*COMO UN EVENTO ASOCIADO AL CARGAR*/

Modernizr.load({ test: Modernizr.geolocation,

yep : 'geo.js', nope: 'geo-polyfill.js'

});

/*COMO CONDICIONAL EXPLICITO*/

if (Modernizr.geolocation) { //magia

}

DETECCIÓN EN EL SERVIDOR

Es bueno, malo y también feo

CÓMO?

Detección mediante User AgentComunidad que mantiene un repositorio/BBDD con característicasde dispositivosSe agrega un string a la configuración o código que se conecta alrepositorioHay implementaciones online o repositorios locales estáticosactualizables

FRAMEWORKSDeviceatlas (https://deviceatlas.com/)

WURFL (http://www.scientiamobile.com/)

51 Degrees (http://51degrees.mobi/)

Apache mobile filter (http://www.apachemobilefilter.org/)

DETECCIONESBÁSICAS

Navegadores mobilees tabletes touch

AVANZADAS/ESPECÍFICAS

soporta SVGversion de HTMLsoporta JS Lista completa (apache) (http://fiftyone.apachemobilefilter.org/)

MÁS ÚTILES/USADAS

Capability Type Description

ux_full_desktop BooleanTrue if the device is a fulldesktop web browser

is_wireless_device Boolean

Specifically a mobile phone,PDA, and tablet are considered

wireless devices, while a desktopPC or laptop are not.

MÁS ÚTILES/USADAS (CONT)

Capability Type Description

is_tablet BooleanTrue if a device is generally

considered a tablet.

brand_name StringThe brand of the device (ex:

HTC).

model_name StringThe model of the device (ex:

Incredible).

device_os String (ex: Android, IOS,Bada).

device_os_version String ...

WURFL (C#)

public interface IDevice{

String Id { get; } String UserAgent { get; }

String NormalizedUserAgent { get; } String GetCapability(String name);

IDevice GetDeviceRoot(); IDevice GetFallbackDevice();

String GetMatcher(); String GetMethod();

IDictionary GetCapabilities();}

var is_tablet = device.GetCapability("is_tablet");var deviceInfo = GetDeviceForRequest(userAgent, MatchMode.Accuracy);

CONFIGURACIÓN

public class Global : HttpApplication{

public const String WurflManagerCacheKey = "__WurflManager"; public const String WurflDataFilePath = "~/App_Data/wurfl.zip"; public const String WurflPatchFilePath = "~/App_Data/web_browsers_patch.xml";

private void Application_Start(Object sender, EventArgs e)

{ var wurflDataFile = HttpContext.Current.Server.MapPath(WurflDataFilePath); var wurflPatchFile = HttpContext.Current.Server.MapPath(WurflPatchFilePath);

var configurer = new InMemoryConfigurer() .MainFile(wurflDataFile) .PatchFile(wurflPatchFile);

//SE PUEDE METER EN WEB.CONFIG, previa registración del tag <section name="wurfl">... var manager = WURFLManagerBuilder.Build(configurer);

HttpContext.Current.Cache[WurflManagerCacheKey] = manager;}}

PUNTOS CLAVE

El enfoque primario está en mobile

PERFORMANCE VS SIMPLICIDAD DE DISEÑO

Responsive images:Picture (http://responsiveimages.org/demos/on-a-

grid/index.html)

srcset (http://www.w3.org/html/wg/drafts/srcset/w3c-

srcset/#attr-img-srcset) (webkit ...beta?)Responsive Text (http://www.frankieroberto.com/responsive_text/)

Responsive Font (http://simplefocus.com/flowtype/)

PREGUNTAS?

facundo.a.ferrero@accenture.com

@facundo_ferrero