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
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