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