Responsive Design, Introducción

1.032 visualizaciones

Publicado el

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

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.032
En SlideShare
0
De insertados
0
Número de insertados
1
Acciones
Compartido
0
Descargas
32
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Responsive Design, Introducción

  1. 1. Curso de Desarrollo Webdomingo, 9 de diciembre de 12
  2. 2. Curso de Desarrollo Webdomingo, 9 de diciembre de 12
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. <h1>Inspiraciones y Ejemplos</h1> <h2>Desarrollos para inspirarse</h2> www.woodlandsrealtypros.com www.decoracionpdi.com www.mediaqueri.esdomingo, 9 de diciembre de 12
  16. 16. Let´s play a gamedomingo, 9 de diciembre de 12

×