Breve introducción a Responsive Design (Diseño Responsivo) para el curso de Desarrollo Web, impartido por el I.S.C Juan Manuel Padilla Carmona en UNIVAC. Cuernavaca Morelos, México. Noviembre 2012

1. Curso de Desarrollo Web
domingo, 9 de diciembre de 12

2. Curso de Desarrollo Web
domingo, 9 de diciembre de 12

3. <h1>Agenda</h1>
<ol class=”agendaCSS”>
<li>Introducción</li>
<li>Compatibilidad y Beneficios</li>
<li>Recomendaciones</li>
<li>Viewports</li>
<li>Media Queries</li>
<li>Inspiraciones y Ejemplos</li>
</ol>
domingo, 9 de diciembre de 12

4. <h1>Introducción</h1>
<h2>¿Qué es Responsive Desgin</h2>
<p>El diseño web adaptativo o adaptable (en inglés, Responsive Web
Design) es una técnica de diseño y desarrollo web que mediante el uso
de estructuras e imágenes fluidas, así como de media-queries en la hoja
de estilo CSS, consigue adaptar el sitio web al entorno del usuario.</p>
<span class=”fuenteDefinicion”> Wikipedia </span>
domingo, 9 de diciembre de 12

5. <h1>Introducción</h1>
<h2>One Web</h2>
<p>La W3C, como parte de sus buenas prácticas para la Web Móvil
postula que:</p>
<ul class=”RDPustulaciones”>
<li>La representación de un recurso identificado por un URI debe
proporcionar informaciónespecífica y temáticamente similares con un
formato adecuado para su contexto. Tal orientación y formato puede
tener lugar en cualquier dispositivo de consumo entre la fuente y el
usuario final.</li>
domingo, 9 de diciembre de 12

6. <h1>Introducción</h1>
<li>El acceso a un URI de diferentes dispositivos o ubicaciones
diferentes deben resultar en información temática similar, pero también
puede resultar en la apariencia y contenido específico que es
diferente</li>
<li>El usuario debería tener la opción de acceder a la misma
información sea cual sea el dispositivo utilizado en cualquier
ambiente.</li>
</ul>
domingo, 9 de diciembre de 12

7. <h1>Compatibilidad y Beneficios</h1>
<h2>Compatibilidades</h2>
<ul>
<li>Compatible con las ultimas versión de la gran mayoría de
navegadores.</li>
<li>No compatible con IE 6, 7 y 8 (solución con Respond.js). </li>
<li>Compatible con la gran variante de navegadores web móviles para
smarthphone´s disponibles. </li>
</ul>
domingo, 9 de diciembre de 12

8. <h1>Compatibilidad y Beneficios</h1>
<h2>Beneficios</h2>
<ul class=”RDBeneficios”>
<li>Código ligero.</li>
<li>Una web para diferentes dispositivos.</li>
<li>Fácil de entener.</li>
<li>Mejor experiencia de navegación y usabilidad para el usuario.</li>
<li>Ahorro de tiempo y dinero.</li>
<li>Mejor calidad en los desarrollos.</li>
<li>Muchos otros muy buenos...</li>
</ul>
domingo, 9 de diciembre de 12

9. <h1>Recomendaciones</h1>
<h2>Consejos y cosas buenas</h2>
<ul class=”RDRecomendaciones”>
<li>Apoyarse en el uso de plantillas ya desarrolladas.</li>
<li>Utilizar diseños fluidos apoyados en “Grids”.</li>
<li>Manejar medidas en porcentajes y no en pixeles u otra unidad de
medida fija.</li>
<li>Uso de Imágenes flexibles.</li>
<li>Utilizar viewport.</li>
</ul>
domingo, 9 de diciembre de 12

10. <h1>Viewports</h1>
<h2>¿Qué es viewport?</h2>
<p>Viewport es el espacio visible de la pantalla del dispositivo desde
donde el usuario consume la información.</p>
<p>Fue introducida por Apple y apoyada en su uso para que los sitios web
se mostraran con una mejor calidad en los dispositivos móviles.</p>
domingo, 9 de diciembre de 12

11. <h1>Viewports</h1>
<meta name="viewport" content="user-scalable=no, width=device-width,
initial-scale=1, maximum-scale=1>
<h2>Elementos del viewport</h2>
user-scalable: Permite indicar al navegador si el usuario puede escalar
(maximizar, minimizar) la pantalla.
width: Ancho del área visible en pixeles o la variable que se le será asignada.
initial-scale: Escala inicial del contenido.
maximum-scale, minimum-scale: Escala máxima y mínima que podrá
conciderarse para mostrar el contenido, comenzará en 0.1.
domingo, 9 de diciembre de 12

12. <h1>Media Queries</h1>
<h2>¿Qué son los Media Queries?</h2>
<p>Los media queries son una forma de alterar el diseño del sitio web
dependiento la resolución del despositivo desde donde se consume el
contenido, dandole la capacidad de adaptarse a las pantallas.</p>
domingo, 9 de diciembre de 12

13. <h1>Media Queries</h1>
@media only screen and (min-device-width : 320px) and (max-device-
width : 480px)
<h2>Elementos de un media querie</h2>
screen: Medida actual de la pantalla donde se visualiza el contenido.
min-device-width, max-device-width: Medida mínima y máxima
(respectivamente) de la pantalla donde se deberá aplicar el estilo.
domingo, 9 de diciembre de 12

14. <h1>Media Queries</h1>
<h2>Ejercicio, Definición de
Media Queries</h2>
<p> Definir los media queries para las
siguientes pantallas de tabletas. </p>
domingo, 9 de diciembre de 12

15. <h1>Inspiraciones y Ejemplos</h1>
<h2>Desarrollos para inspirarse</h2>
www.woodlandsrealtypros.com
www.decoracionpdi.com
www.mediaqueri.es
domingo, 9 de diciembre de 12

16. Let´s play a game
domingo, 9 de diciembre de 12