Curso de Desarrollo Web
domingo, 9 de diciembre de 12
Curso de Desarrollo Web
domingo, 9 de diciembre de 12
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
Let´s play a gamedomingo, 9 de diciembre de 12
Top Related