Responsive web design

661 views

Published on

Brownbag de responsive web design

Version interactiva (RECOMENDADA):
http://facundoferrero.com.ar/presentacion/RWD/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
661
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. RESPONSIVEWEBDESIGN AGOSTO2013
  2. 2. TEMARIO Media queries para adaptabilidad de sitios. Tipos de media queries Uso de herramientas del navegador para debuggear. Herramientas para blueprints/ diseño responsives. Frameworks para modelado responsive. Ejemplos de Herramientas para deteccion en el servidor
  3. 3. 1INTERNET
  4. 4. Review (http://www.mobilexweb.com/blog/google-glass-browser- html5-responsive-web-design)
  5. 5. NOSÓLODISPOSITIVOS... ...también contextos dentro de la página Demo (http://localhost:81/experimentos/test.html)
  6. 6. CSS-MEDIAQUERIES Permite definir una visualización selectiva según la pantalla/viewport/media del dispositivo que está viendo el sitio Si el dispositivo cumple la regla de estilo, se aplica (simplemente true o false) Soporta conectores lógicos "and" "not" y "," (or)
  7. 7. MEDIAS(DISPOSITIVOS)ENHTML4: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ MEDIASCSS2: CSS2 define la misma lista, pero ‘aural’ es deprecado y agrega ‘embossed’, ‘speech’ y ‘all’
  8. 8. EJEMPLO <LINKREL="STYLESHEET"TYPE="TEXT/CSS"MEDIA="SCREEN"HREF="SANS-SERIF.CSS"> <LINKREL="STYLESHEET"TYPE="TEXT/CSS"MEDIA="PRINT"HREF="SERIF.CSS"> DENTRODELAHOJADEESTILO,SEPUEDEDEFINIR UNESTILOSELECTIVOPARAUNAPANTALLA @MEDIASCREEN{ *{FONT-FAMILY:SANS-SERIF} } @MEDIAALLAND(MIN-WIDTH:500PX){…} @MEDIA(MIN-WIDTH:500PX){…} /*(HACENLOMISMO)*/
  9. 9. MEDIAQUERIESENHTML5YCSS3: Es el mismo comportamiento, simplemente agrega más valores posibles width / height (con prefijos opcionales "min-" y "max-") aplicables a display/viewport Example: media="screen and (min-width:500px)" device-width/device-height("min-" y "max-") ancho/alto de PANTALLA/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 del display/viewport Example: media="screen and (aspect-ratio:16/9)" device-aspect-ratio: ("min-" and "max-") Ídem pero con la relación ancho/alto del dispositivo
  10. 10. CSS3MEDIAQUERIES(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 el dispositivo puede soportar. monochrome: ("min-" and "max-") bits por pixel buffer monocromo. Example: media="screen and (monochrome:2)" resolution:(dpi or dpcm) ("min-" and "max-")densidad del display/papel. Example: media="print and (resolution:300dpi)" scan:("progressive" and "interlace") método de escaneo del display de tv Example: media="tv and (scan:interlace)" grid:("1" ó "0") si el dispositivo de salida es una grilla o mapa de bits "1" para grid, and "0" cualquier otro. Example: media="handheld and (grid:1)"
  11. 11. ÚTILYCÓMODO...NO? ...NO
  12. 12. HERRAMIENTASPARADEBUGGEAR Nativas del navegador plugins (montones y para todos gustos) Ejemplo para demo (http://www.responsivewebdesign.co.uk/)
  13. 13. ENTONCES...YAPUEDOHACERSITIOSRESPONSIVE!!! ...YSÍ... ...PERO...
  14. 14. HERRAMIENTASPARABLUEPRINTS/DISEÑO RESPONSIVES
  15. 15. FRAMEWORKS Bootstrap (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/)
  16. 16. HERRAMIENTAS Ej 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)
  17. 17. ESTRATEGIADEDISEÑO ¿QUÉTARGETTIENEMISITIO?
  18. 18. 1°PROTOTIPAR ELCONTENIDOESLOMÁSIMPORTANTE!!! Casper (http://net.tutsplus.com/tutorials/javascript- ajax/responsive-screenshots-with-casper/) (herramienta para prototipar)
  19. 19. GRACEFULDEGRADATION Desktop first Enfocado a los navegadores más potentes en los dispositivos más nuevos. Ej HTML5 video ⇔ Object/SWF WebGL ⇔ Canvas2D Reemplazar una animación (por ej, canvas) con gif
  20. 20. PROGRESSIVEENHANCEMENT Mobile first Enfocado a llegar a mayor cantidad de usuarios (evitar segmentación de mercado) Una buena estrategia es detectar qué soporta cada dispositivo y ofrecer características ascendentes (aplicable tambíen a GD)
  21. 21. CUÁLESLAMEJORESTRATEGIA? ....es muy artesanal
  22. 22. COMPATIBILIDAD ¿COMOASEGURARNOSQUENUESTRAESTRATEGIADE DISEÑOVAAFUNCIONAR?
  23. 23. SIYATENGOMIPROTOTIPODISEÑADO...¿QUEPUEDE PASAR? Desktop: IE 6,7 y 8! 9, 10 soportan media queries 11 AUTOACTUALIZABLE (como chrome, FF opera,etc) Mobile: ANDROID BROWSER!!!
  24. 24. JS can 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
  25. 25. JS POLYFILLS/SHIMS Respond (https://github.com/scottjehl/Respond) Intenta completar elementos que no están presentes de un navegador Balanceado, pero puede agregar elementos que no voy a usar Masonry (http://masonry.desandro.com/) orientado al diseño de página (Muy MUY completo) Polyfills recomendados por Modernizr (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- Browser-Polyfills)
  26. 26. MODERNIZR con 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 }
  27. 27. DETECCIÓNENELSERVIDOR Es bueno, malo y también feo
  28. 28. CÓMO? Detección mediante User Agent Comunidad que mantiene un repositorio/BBDD con características de dispositivos Se agrega un string a la configuración o código que se conecta al repositorio Hay implementaciones online o repositorios locales estáticos actualizables
  29. 29. FRAMEWORKS Deviceatlas (https://deviceatlas.com/) WURFL (http://www.scientiamobile.com/) 51 Degrees (http://51degrees.mobi/) Apache mobile filter (http://www.apachemobilefilter.org/)
  30. 30. DETECCIONES BÁSICAS Navegador es mobile es tablet es touch AVANZADAS/ESPECÍFICAS soporta SVG version de HTML soporta JS Lista completa (apache) (http://fiftyone.apachemobilefilter.org/)
  31. 31. MÁSÚTILES/USADAS Capability Type Description ux_full_desktop Boolean True if the device is a full desktop web browser is_wireless_device Boolean Specifically a mobile phone, PDA, and tablet are considered wireless devices, while a desktop PC or laptop are not.
  32. 32. MÁSÚTILES/USADAS(CONT) Capability Type Description is_tablet Boolean True if a device is generally considered a tablet. brand_name String The brand of the device (ex: HTC). model_name String The model of the device (ex: Incredible). device_os String (ex: Android, IOS,Bada). device_os_version String ...
  33. 33. 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);
  34. 34. 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; } }
  35. 35. PUNTOSCLAVE El enfoque primario está en mobile
  36. 36. PERFORMANCEVSSIMPLICIDADDEDISEÑ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/)
  37. 37. PREGUNTAS? facundo.a.ferrero@accenture.com @facundo_ferrero

×