Responsive Web Design - Diseño Sensible by @janogarciaJano Garcia
No es una presentación técnica, no habrá ejemplos de código.
El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas ofrece, preguntándonos si éstas se ajustarán a las necesidades de nuestros proyectos.
Enrique Stanziola, Antonio Arias y Julieta Goldenberg (Hospital Italiano).
http://www.disenoinclusivo.org.ar/evento-2011/programa/usable-y-saludable-disenando-un-portal-personal-para-pacientes/
Responsive Web Design, ventaja, inconvenientes y recomendacionesXavi Cardet
La evolución del responsive web design. Diferenciación RWD con Web-app y aplicaciones nativas. Consejos para aplicar rwd, teniendo en cuenta el contexto de uso y los contenidos.
Responsive Web Design - Diseño Sensible by @janogarciaJano Garcia
No es una presentación técnica, no habrá ejemplos de código.
El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas ofrece, preguntándonos si éstas se ajustarán a las necesidades de nuestros proyectos.
Enrique Stanziola, Antonio Arias y Julieta Goldenberg (Hospital Italiano).
http://www.disenoinclusivo.org.ar/evento-2011/programa/usable-y-saludable-disenando-un-portal-personal-para-pacientes/
Responsive Web Design, ventaja, inconvenientes y recomendacionesXavi Cardet
La evolución del responsive web design. Diferenciación RWD con Web-app y aplicaciones nativas. Consejos para aplicar rwd, teniendo en cuenta el contexto de uso y los contenidos.
Presentación realizada en geoinquietos cantabria, sobre la web movil, especialmente aplicada al ámbito geoespacial. Se presenta el proyecto 'Surfspots móvil'
Presente y futuro del desarrollo de apps mobile y wearableSoftware Guru
Daremos un vistazo al estado actual de las herramientas, frameworks y mejores prácticas para construir aplicaciones móviles para distintas plataformas. Platicaremos sobre los avances y tendencias en cuanto a prácticas y tecnologías para desarrollo móvil, así como lo que se vislumbra para el futuro.
La audiencia podrá darse una idea de cómo es que estas tendencias y mejores prácticas están moldeando el desarrollo de aplicaciones móviles y wearable, y qué habilidades requiere desarrollar para ser competitivo ante este panorama.
Responsive, móvil o app: ¿Por dónde empezar?lMultiplica
A diario desde Multiplica nos encontramos en reuniones con clientes o en talleres o cursos con probablemente las mismas preguntas que te han llevado a empezar a leer este informe: ¿Qué presencia debemos tener en mobile?. ¿Un site móvil, un site responsive o una app?. ¿Qué potenciar o por dónde empezar?.
En esta presentación intentamos dar adecuada respuesta a tales preguntas.
Conferencia dictada por Javier Gómez Corio sobre el tema de la movilidad y cómo Joomla! lo ha asumido. Participación de alto interés, para quienes se orientan al mercado de los teléfonos celulares.
Consejos Prácticos para Mejorar tu Web y Vender MásAlojate.com
Mientras muchas empresas han ido innovando y actualizando tanto su diseño web como su usabilidad, adaptándose a los continuos cambios en el mundo online, hay otras muchas empresas cuyas webs siguen con diseños obsoletos y sin preocuparse por la usabilidad.
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesJuan Paulo Madriaza
Presentación introductoria de recomendaciones y buenas prácticas a tener en cuenta en el diseño de aplicaciones móviles. Curso a cargo del profesor Juan Paulo Madriaza - Uniacc - 2011
Pareciera ser una moda el hacer aplicaciones multiplataforma en HTML5, y eso mismo ha desprestigiado el uso de HTML5 en ellas debido al performance. Esto ha sucedido porque muchos desarrolladores no hacen un uso adecuado de esta poderosa herramienta de la manera que los dispositivos móviles lo necesitan es por ello que daremos la guía practica de cómo hacer aplicaciones multiplataforma de forma correcta y eficiente.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Martin Redigolo
Introducción en el desarrollo de interfaces (UI) y experiencia (UX) en aplicaciones (móviles). 13 puntos claves para que tanto el desarrollo como la app tenga éxito. Impartido por Martin Redigolo, diseñador y co-fundador de Startup Astronauts* y del boletín semanal de innovación en negocios, diseño y tecnología ▅▅ stuff (youstuff.me)
La tendencia informática que marcará los próximos años es el uso de dispositivos móviles. Sin embargo, el desarrollo de aplicaciones para estos dispositivos aún está marcado por la elección de una o más plataformas (Android, iOS, etc.), que obliga a duplicar esfuerzos de programación y a dejar fuera a una parte de los usuarios; pero hay un enfoque diferente: la web de siempre, sólo que actualizada para smartphones y tablets.
El taller presentará herramientas y técnicas que se pueden emplear hoy en día para el desarrollo web móvil, y los participantes desarrollarán un prototipo funcional de una aplicación. Al final, se adelantarán las iniciativas actuales de Mozilla en el mercado móvil.
Presentación realizada en geoinquietos cantabria, sobre la web movil, especialmente aplicada al ámbito geoespacial. Se presenta el proyecto 'Surfspots móvil'
Presente y futuro del desarrollo de apps mobile y wearableSoftware Guru
Daremos un vistazo al estado actual de las herramientas, frameworks y mejores prácticas para construir aplicaciones móviles para distintas plataformas. Platicaremos sobre los avances y tendencias en cuanto a prácticas y tecnologías para desarrollo móvil, así como lo que se vislumbra para el futuro.
La audiencia podrá darse una idea de cómo es que estas tendencias y mejores prácticas están moldeando el desarrollo de aplicaciones móviles y wearable, y qué habilidades requiere desarrollar para ser competitivo ante este panorama.
Responsive, móvil o app: ¿Por dónde empezar?lMultiplica
A diario desde Multiplica nos encontramos en reuniones con clientes o en talleres o cursos con probablemente las mismas preguntas que te han llevado a empezar a leer este informe: ¿Qué presencia debemos tener en mobile?. ¿Un site móvil, un site responsive o una app?. ¿Qué potenciar o por dónde empezar?.
En esta presentación intentamos dar adecuada respuesta a tales preguntas.
Conferencia dictada por Javier Gómez Corio sobre el tema de la movilidad y cómo Joomla! lo ha asumido. Participación de alto interés, para quienes se orientan al mercado de los teléfonos celulares.
Consejos Prácticos para Mejorar tu Web y Vender MásAlojate.com
Mientras muchas empresas han ido innovando y actualizando tanto su diseño web como su usabilidad, adaptándose a los continuos cambios en el mundo online, hay otras muchas empresas cuyas webs siguen con diseños obsoletos y sin preocuparse por la usabilidad.
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesJuan Paulo Madriaza
Presentación introductoria de recomendaciones y buenas prácticas a tener en cuenta en el diseño de aplicaciones móviles. Curso a cargo del profesor Juan Paulo Madriaza - Uniacc - 2011
Pareciera ser una moda el hacer aplicaciones multiplataforma en HTML5, y eso mismo ha desprestigiado el uso de HTML5 en ellas debido al performance. Esto ha sucedido porque muchos desarrolladores no hacen un uso adecuado de esta poderosa herramienta de la manera que los dispositivos móviles lo necesitan es por ello que daremos la guía practica de cómo hacer aplicaciones multiplataforma de forma correcta y eficiente.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Martin Redigolo
Introducción en el desarrollo de interfaces (UI) y experiencia (UX) en aplicaciones (móviles). 13 puntos claves para que tanto el desarrollo como la app tenga éxito. Impartido por Martin Redigolo, diseñador y co-fundador de Startup Astronauts* y del boletín semanal de innovación en negocios, diseño y tecnología ▅▅ stuff (youstuff.me)
La tendencia informática que marcará los próximos años es el uso de dispositivos móviles. Sin embargo, el desarrollo de aplicaciones para estos dispositivos aún está marcado por la elección de una o más plataformas (Android, iOS, etc.), que obliga a duplicar esfuerzos de programación y a dejar fuera a una parte de los usuarios; pero hay un enfoque diferente: la web de siempre, sólo que actualizada para smartphones y tablets.
El taller presentará herramientas y técnicas que se pueden emplear hoy en día para el desarrollo web móvil, y los participantes desarrollarán un prototipo funcional de una aplicación. Al final, se adelantarán las iniciativas actuales de Mozilla en el mercado móvil.
En este documento analizamos ciertos conceptos relacionados con la ficha 1 y 2. Y concluimos, dando el porque es importante desarrollar nuestras habilidades de pensamiento.
Sara Sofia Bedoya Montezuma.
9-1.
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Telefónica
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0xWord escrito por Ibón Reinoso ( https://mypublicinbox.com/IBhone ) con Prólogo de Chema Alonso ( https://mypublicinbox.com/ChemaAlonso ). Puedes comprarlo aquí: https://0xword.com/es/libros/233-big-data-tecnologias-para-arquitecturas-data-centric.html
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...espinozaernesto427
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta intensidad son un tipo de lámpara eléctrica de descarga de gas que produce luz por medio de un arco eléctrico entre electrodos de tungsteno alojados dentro de un tubo de alúmina o cuarzo moldeado translúcido o transparente.
lámparas más eficientes del mercado, debido a su menor consumo y por la cantidad de luz que emiten. Adquieren una vida útil de hasta 50.000 horas y no generan calor alguna. Si quieres cambiar la iluminación de tu hogar para hacerla mucho más eficiente, ¡esta es tu mejor opción!
Las nuevas lámparas de descarga de alta intensidad producen más luz visible por unidad de energía eléctrica consumida que las lámparas fluorescentes e incandescentes, ya que una mayor proporción de su radiación es luz visible, en contraste con la infrarroja. Sin embargo, la salida de lúmenes de la iluminación HID puede deteriorarse hasta en un 70% durante 10,000 horas de funcionamiento.
Muchos vehículos modernos usan bombillas HID para los principales sistemas de iluminación, aunque algunas aplicaciones ahora están pasando de bombillas HID a tecnología LED y láser.1 Modelos de lámparas van desde las típicas lámparas de 35 a 100 W de los autos, a las de más de 15 kW que se utilizan en los proyectores de cines IMAX.
Esta tecnología HID no es nueva y fue demostrada por primera vez por Francis Hauksbee en 1705. Lámpara de Nernst.
Lámpara incandescente.
Lámpara de descarga. Lámpara fluorescente. Lámpara fluorescente compacta. Lámpara de haluro metálico. Lámpara de vapor de sodio. Lámpara de vapor de mercurio. Lámpara de neón. Lámpara de deuterio. Lámpara xenón.
Lámpara LED.
Lámpara de plasma.
Flash (fotografía) Las lámparas de descarga de alta intensidad (HID) son un tipo de lámparas de descarga de gas muy utilizadas en la industria de la iluminación. Estas lámparas producen luz creando un arco eléctrico entre dos electrodos a través de un gas ionizado. Las lámparas HID son conocidas por su gran eficacia a la hora de convertir la electricidad en luz y por su larga vida útil.
A diferencia de las luces fluorescentes, que necesitan un recubrimiento de fósforo para emitir luz visible, las lámparas HID no necesitan ningún recubrimiento en el interior de sus tubos. El propio arco eléctrico emite luz visible. Sin embargo, algunas lámparas de halogenuros metálicos y muchas lámparas de vapor de mercurio tienen un recubrimiento de fósforo en el interior de la bombilla para mejorar el espectro luminoso y reproducción cromática. Las lámparas HID están disponibles en varias potencias, que van desde los 25 vatios de las lámparas de halogenuros metálicos autobalastradas y los 35 vatios de las lámparas de vapor de sodio de alta intensidad hasta los 1.000 vatios de las lámparas de vapor de mercurio y vapor de sodio de alta intensidad, e incluso hasta los 1.500 vatios de las lámparas de halogenuros metálicos.
Las lámparas HID requieren un equipo de control especial llamado balasto para funcionar
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Actualmente, y debido al desarrollo tecnológico de campos como la informática y la electrónica, la mayoría de las bases de datos están en formato digital, siendo este un componente electrónico, por tanto se ha desarrollado y se ofrece un amplio rango de soluciones al problema del almacenamiento de datos.
5. 1. ¿Qué es la Web? “ Es muy difícil suprimir las voces de mil millones de individuos...” Vinton Cerf COMUNICACION INFORMACION ECOMMERCE ELEARNING EBUSINESS OCIO
6. “ Web: herramienta fundamental para que la humanidad interactúe, usando sitios web como intermediarios.”
7.
8. Pero cambió el contexto : la masificación de los móviles convirtió en obsoletas a nuestras Webs rígidas . Porque se miniaturizan y se vuelven ilegibles y casi imposibles de navegar en móviles...
9. 2. ¿Qué es Móvil? 128 x 160px 320 x 240px 480 x 320px 800 x 480px 768 x 1024px + 1024 x 768px 1536 x 2048px + 2048 x 1536px 800 x 600px + 1200 x 824px 480 x 272px
10. ? Esto también es móvil 1024 x 600px 800 x 600px 1024 x 600px 1024 x 768px 1182 x 864px
11. O mejor... ¿qué “no” es Móvil? 800 x 600px, 1024 x 768px, 1280 x 768px, 1600 x 1200px, 1920 x 1080px, 2560 x 1600px y MAS...
12.
13.
14. Algunos datos (a Octubre de 2011) 2.095.006.005 de personas utilizan la Web “fija” (30.2% de la humanidad) 5.300.000.000 de personas tienen un celular (77% de la humanidad) 1.300.000.000 de personas ya usan Web Móvil (+18% de la humanidad) 33% de ellos, “solo” usan la Web Móvil (no usan PCs!) Fuente: http://mobithinking.com/mobile-marketing-tools
15. Más del 85% de los Celulares vendidos entre 2010 y 2011 navegan la Web Y no son iPhone... (menos del 4% son iPhone) La tendencia a futuro es clara:
17. ...y Tabletas superan a Netbooks 1er trimestre de 2011: 6,4 millones Tabletas – 8,4 millones Netbooks 2do trimestre de 2011: 13,6 millones Tabletas – 7,3 millones Netbooks Tendencia para fin de 2011: 60 millones Tabletas – 32 millones Netbooks Fuente: http://www.clarin.com/internet/tabletas-destrozan-mercado-netbooks_0_578942373.html
18. Cambió el contexto ¿Qué deberíamos replantearnos?
19. ¿Existe una web “Móvil”, independiente de “la otra”? ¿o TODA web debería estar preparada “para Móviles”... ...porque será accedida desde una diversidad de dispositivos , usados por millones de personas ?
20.
21. La intención inclusiva de un diseño se decide a nivel de objetivos del proyecto, porque condiciona cuáles casos de uso y contextos se tomarán en cuenta y cuáles NO. Y lo inclusivo obliga a lo accesible
22.
23. Entonces, la Web Móvil, ¿es inclusiva y accesible? "La accesibilidad no puede depender de los dispositivos, a menos que consideres el no tener un iPhone como una discapacidad " Martín Szyszlican
24. Si el contexto cambió , y las regulaciones todavía no (WCAG, etc.) seamos parte del cambio , y evitemos YA los problemas de accesibilidad propios del nuevo contexto , aunque no estemos “obligados” (aún) a hacerlo. (¿alguien del W3C en el público?)
25. ¿Cómo estamos creando sitios “para móviles” hoy? A. Programando Aplicaciones para cada dispositivo (caro, solo para grandes empresas, y “exclusivo”: solo se hace para “algunos” dispositivos -iPad, iPhone, Blackberry-) B. Creando una Versión Móvil de un sitio web entero “simplificado” (duplicación de esfuerzos, pobreza de resultados, uniformidad, carpeta /movil/ como “ghetto” que no permite compartir URLs) C. O no hacemos Nada , y dejamos que el usuario móvil se frustre... (¡y esto es lo mayoritario!)
26. ¿ Quién puede crear sitios web “para móviles”? A. Programadores de Aplicaciones (Objective-C, .Net, Java) B. Programadores Web (PHP y MySQL) C. Diseñadores Web (HTML5 y CSS3) ¿No hacemos nada? -> ¡OPORTUNIDAD!
27. El precio de no hacer nada... Ojo de cerradura Miniaturización Zoom constante
28.
29. ¿Cuales son los enfoques a evitar en nuestros diseños para hacer webs accesibles incluso para celulares?
30. a. El enfoque de la Inflexibilidad de ancho fijo :
31. b. El enfoque de la Inflexibilidad líquida : ? Logo cortado, columnas donde una palabra supera ancho de columna...
32. Solución: Un enfoque flexible , que considere TODAS las resoluciones y tamaños , pero...
33. ¿Es viable para nosotros hacer un diseño para cada dispositivo?
34. ¿O un solo diseño que sea flexible y se adapte? "En lugar de crear diseños desconectados , cada uno adaptado a un dispositivo o navegador, deberíamos tratarlos como facetas de la misma experiencia. En otras palabras, podemos diseñar sitios que no sólo sean más flexibles , sino que puedan adaptarse al medio donde están siendo utilizados." Ethan Marcotte
35. Sin dudas: es más viable un solo diseño que se adapte Ver ejemplo
36. Este enfoque se llama: Diseño Web “Sensible” o Responsive Web Design
37. ¿Cuáles son los elementos de un Diseño Web “Sensible” ? 1. Maqueta adaptable con Media Queries 2. Grillas flexibles 3. Imágenes adaptables
38. 1. Maqueta adaptable con Media Queries Un mismo HTML, distintas hojas CSS
39. Se trata de vincular distintas hojas de estilos: <link href=“estilo_base.css”> <link href=“celulares.css”> ...con Condiciones
40. ¿Qué condición determina “cuál” hoja CSS aplicará un navegador? El tamaño (de viewport o de pantalla ) max-width: x Ancho del Viewport mayor o igual a x min-width: x Ancho del Viewport menor o igual a x max- device -width: x Ancho de Pantalla mayor o igual a x min- device -width: x Ancho de Pantalla menor o igual a x
41. ¿Dónde defino eso?: En tres posibles lugares: 1. Dentro del código HTML: <link href=" tableta.css " rel="stylesheet" media="screen and (min-width:480px) "> En “tableta.css”, adaptamos el diseño (cambiando cantidad de columnas, ajustando tamaños).
42. También podemos crear “zonas” en un archivo CSS : @media screen and (min-width:480px) { .columnas { float: left; } } O usar @import desde una hoja maestra: @import url("tableta.css") screen and (min-width: 480px) ;
43. Veamos esto en acción: Galería de sitios que usan Media Queries http://www.mediaqueri.es
44. Pero, atención! Existen dos enfoques : 1) PC primero ← no funcionó! 2) Móvil primero ← actual
45.
46. ¿Cómo se hacía? (no lo hagan!) <link href=" pc.css " rel="stylesheet" media="all"> <link href=" movil.css " rel="stylesheet" media="screen and ( max -width:768px)"> Si el navegador del celular no reconoce media queries, solo lee “pc.css”... y se bajará fotos gigantes, maquetará columnas flotadas de pocos “milímetros” de ancho, etc. ?
47. Otro error muy común de este enfoque: Ocultar contenidos en versión móvil!! -No usar display:none ni visibility:hidden ni text-indent:-9999px Porque el contenido será transferido igual (consumiendo tiempo y cuota de transferencia)
48.
49. ¿Cómo se hace? (háganlo así!) <link href=" movil.css " rel="stylesheet" media="all"> <link href=" mas-grande.css " rel="stylesheet" media="screen and ( min -width:481px)"> Si el navegador del celular no reconoce media queries, se queda con “movil.css”, y... quedó diseñado.
55. Tenemos la oportunidad de enfocar nuestros textos Si pensamos ocultar un texto en la versión móvil, posiblemente tampoco sea tan importante en la versión “no móvil”... ¡quitémoslo!
56. Una vez marcados los textos semánticamente (con h1, h2, p, ul con li), marcamos las secciones con article, section, aside y nav. ¡Ya tenemos la versión BASE! La usarán celulares de 128px sin soporte para Media Queries, y lectores de pantalla.
58. Proceso de texto a maqueta : 1. Diseñar wireframes 2. Decorarlos en Photoshop 3. Codificar el sitio con HTML & CSS
59. Punto clave a considerar: -Pensar contenidos en franjas (secciones, bloques) ¿Puedo “ horizontalizar ” las secciones, y los bloques dentro de ellas? (pasarlos de “apilados” a “flotados”)
62. 1. Wireframes Dos por rango a cubrir (uno al mínimo y otro al máximo ancho definido)
63. Consejo: Empezar por la Home Recordar que cada uno de estos bocetos (empezando del más angosto) deberá ensancharse hasta el tamaño del siguiente ...
64. Orden de creación 1. Celulares antiguos (128px) 2. iPhone y smartphones (320px) 3. iPad y otras tabletas (480px / 768px) 4. PC (+1024px)
70. <link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)"> <link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)"> <link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)"> <link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)"> <link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)"> <link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)"> <link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)"> <link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)"> Andy Clarke: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries Antes: base.css
71.
72. Considerar el Viewport Tamaño de “ventana” del navegador En PC, es menor que la pantalla. En móvil, es mayor . Ejemplo: Safari asigna 980px de ancho y hace zoom para mostrar lo que supone una web hecha para PC (y en el 99% de los casos, acierta!)
73. ¿Solución? <meta name="viewport" content="width=device-width, initial-scale=1.0"/> Ahora, ya no lo lleva a 980px, lo deja en 320px que es el ancho del dispositivo. Referencia: http://davidbcalhoun.com/2010/viewport-metatag
74. Los iPhone 4... Los iPhone 4 miden 640 x 960px, pero a 326 dpi Sin embargo, detectan esto: <link media="only screen and ( max-device-width: 480px )" href="iphone.css" rel="stylesheet" />
75. Específico para iPhone 4: <link media="all and ( -webkit-min-device-pixel-ratio:2 )" href="iphone4.css" rel= "stylesheet" />
76. La orientación: <link rel="stylesheet" media="all and ( orientation:portrait )" href="vertical.css" /> <link rel="stylesheet" media="all and ( orientation:landscape )" href="horizontal.css" />
77. Navegadores con Media Queries Firefox 3.5 y + Google Chrome (todos) Safari 3 y + Opera 9.5 y + Internet Explorer 9 y + ¿Y los demás? -> Polyfills + “Móvil primero” ¿Y los lectores de pantalla? -> No aplica, leen HTML
78.
79.
80.
81.
82. Márgenes y paddings flexibles 1. Margen: el contexto es el ancho del elemento padre (contenedor): Ej. 24px / 900px = 0,02666 = 2,66% 2. Padding: el contexto es el ancho del elemento mismo al que lo aplico: Ej. 24px / 200px = 0,12 = 12%
83. body { font:1 em /1.5em 'Arial', sans-serif; -webkit-text-size-adjust: none; } @media screen and (max-width:800px) { body { font-size:0.8 em ; } } @media screen and (max-width:400px) { body { font-size:0.7 em ; } } Demo: http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html Tipografía, siempre en EM
84. Si en cada hoja CSS condicional, apuntamos a distintas imágenes (de distintos tamaños) , no tendremos problemas con background-image 3. Imágenes adaptables
85. Haciendo flexible la imagen dentro del rango mínimo y máximo: img, video, object { max-width:100% ; } Para Explorer 6 y 7 (en hoja aparte): img, video, object { width :100%; } (Cuidar ancho del elemento contenedor )
86. Evitar problemas en Explorer: .imagen{ background: none; /* quitamos otros */ filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src="foto. png ", sizingMethod="scale" ); }
87. Pero, ¿qué hacemos con el único src posible dentro de las etiquetas <IMG> ? No soluciona nada el “no darle ancho” a la imagen, porque entonces deberíamos crearla en Photoshop a su mayor ancho (por ej. 900px) y se transferiría entera, a pesar de mostrarla luego a 400 o 200px de ancho en pantallas chicas.
92. Configuración de .htaccess <IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On # Carpetas de fotos que no se redimensionan, una por línea: RewriteCond %{REQUEST_URI} ! fotos-intocables # Enviamos al script PHP el resto de las fotos: RewriteRule (?:jpe?g|gif|png)$ adaptive-images.php </IfModule>
93. <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> Con JavaScript Sin JavaScript Configurar $mobile_first = FALSE ANTES de links a estilos, agregar: <style> @media only screen and (max-device-width: 479px) { html { background-image:url( ai-cookie.php?maxwidth=479 ); } } @media only screen and (min-device-width: 480px) and (max-device-width: 767px) { html { background-image:url( ai-cookie.php?maxwidth=767 ); } } @media only screen and (min-device-width: 768px) and (max-device-width: 991px) { html { background-image:url( ai-cookie.php?maxwidth=991 ); } } @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) { html { background-image:url( ai-cookie.php?maxwidth=1381 ); } } @media only screen and (min-device-width: 1382px) { html { background-image:url( ai-cookie.php?maxwidth=unknown ); } } </style>
94. Bordes de imagen adaptables (en porcentajes) img{ max-width:98%; padding:1%; /* Despega 1% de cada lado, y completa el 100% */ background:#000; /* Color del borde “falso” */ }
96. Es escalable (sin pixelarse!) y degrada en imagen en Explorer <= 8 (resto de navegadores ya lo soportan) <object data=" imagen. svg " type="image/svg+xml"> <img src="imagen-b.png" alt="Texto alt" width="144" height="144" /> </object> ¿El futuro? SVG (Scalable Vector Graphics)
97. Conclusión: Es posible crear Webs Móviles (y “no móviles” también) inclusivas y accesibles, previendo diseños consistentes y compatibles con distintos dispositivos y resoluciones, usando Media Queries , grillas flexibles e imágenes adaptables .
98. Recursos: Emulador de Media Queries http://mattkersley.com/responsive/ Galería de sitios con Media Queries http://mediaqueri.es Libro de Ethan Marcotte http://www.abookapart.com/products/responsive-web-design Bryan Rieger: Rethinking Mobile Web http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu