Responsive Design

En el pasado nos acostumbramos a realizar dos páginas web si queríamos lanzar un proyecto web para todo el público, una para desktops y otra para móviles lo cual hacia que el contenido estuviera duplicado en la web y tener el subdominio m.tudominio.com por sí deseabas entrar desde un móvil.Pero ese era el pasado, en donde el mundo era cruel e insensible con los desarrolladores y el diseño se pensaba pixel by pixel, es decir que lo que te mandaban en fireworks debía quedar totalmente igual en la web, ni un pixel más, ni un pixel menos.Y es así como llega CSS3 junto a unos amigos llamados media querys y una filosofía de layouts fluidos al cual @leonidasesteban define responsivear.Si deseas hacer responsive design primero debes conseguir un diseñador que te cree los diseños enfocados a ser fluidos y para todo público, luego debes olvidar que los pixeles deben ser exactos y pasar al concepto en donde el tamaño de cada cosa siempre va a varía según el espacio que dispongas de pantalla.Definamos conceptosLayouts fluidos o diseño fluido: los layouts fluidos es la forma en la que sin importar el tamaño de tu navegador todos sus bloques, divs, imágenes, sections, articles, nav, etc. Se acomodaran conforme al tamaño de navegador que manejemos y se deberá ver bien en todo momento.Viewport: este lo utilizamos para que nuestra web tome como tamaño el tamaño del navegador, esto evitará que se pueda hacer zoom en navegadores y nos ayudara a que cuando entremos desde un móvil los layouts fluidos se acomoden según la pantalla.Media query: es la forma de hacer consultas sobre la resolución de pantalla en donde se esta mostrando la pagina así podemos colocar propiedades especificas para cada pantalla y acomodar la experiencia de usuario a tal punto que sea lo mas agradable para este.Responsive Design: Es como llamamos el unir las 3 herramientas anteriores para lograr una experiencia agradable en nuestra web sin importar el dispositivo en la que se mire.Filosofía ResponsiveCuando tu entras en el mundo de diseños fluidos y dejas de hacer diseños pixel by pixel, es cuando debes cambiar tu forma de pensar y dejar de mirar el dispositivo sino el tamaño de donde se muestran todas las cosas, ahora debes empezar por lo móvil y llegar al desktop teniendo en cuenta que actualmente el mercado latino americano y España tienen un 25% de uso los móviles en la web en donde buscan resultados inmediatos y locales en cambio cuando navegas desde un laptop o un desktop tienes una navegación mucho mas casual y aleatorio.Cuando entiendes esto y tu jefe deja de decir que es mentira, es cuando puedes hacer un bonito y bello responsive que iremos profundizando en la semana de clases, por ahora ten claro estos conceptos y estudia para nuestras semanas de clases :D.EmpecemosPara empezar a Responsivear como diría @LeonidasEsteban.Primero debemos colocar la siguiente linea en el html de la pagina que debemos responsivear. La cual desactivara el pinch to zoom en moviles y el navegador tomara el tamaño del navegador.Luego de esto podemos crear nuestro archivo stylus en donde tendremos el siguiente código:@media screen and (min-width:768px) #contenido #nota float right font-size 1em height auto width 20% #nota:hover height auto .item display inline-block vertical-align top width 30% .titulo_item a font-size 0.9em font-weight normal@media screen and (min-width:1280px) #contenido .item width 20%Para colocar propiedades a la pagina cuando este en tamaño de 768px colocamos el @media screen and (min-weight:768px) (Este es el media query del cual hablábamos y todo lo que este acá adentro se aplicara cuando la pagina adopte los 768px o mayor a este.Ahora vemos que hay un @meida screen and (min-weight:1280px) y cuando el navegador tenga tamaño de 1280px se cumplirá el contenido del anterior media query ya que cumple la condición de la medida y también se cumplirá lo que tenga esta query.Ahora puedes jugar con tamaños mínimos o máximos de pantalla y darles propiedades especiales y empezar a responsivear!, espero te inspires :)

Responsive Design

Bienvenidos

Fundamentos

Aprender a programar es fácil

Conoce el ecosistema, capacidades y semántica básica en HTML5

¿Qué es un frontend?

Diferencias entre Backend y Frontend

Soporte HTML5 en navegadores viejos y nuevas capacidades de Javascript

HTML, CSS básico y uso de selectores

Estructura y etiquetas en HTML

Introducción a CSS

Selectores en CSS

Atributos del Selector

Selectores de Atributo

Sesión de preguntas y respuestas

Metodología BEM en HTML5 y CSS3

Float vs Display

Unidades de medida

Metodología BEM

Pseudo selectores

Sesión de preguntas y respuestas

CSS y workflow profesional

Progressive Enhancement

Fuentes y tipografías web

Responsive Media Queries

Imagenes Responsive y Retina

Preprocesadores CSS y SASS

Herramientas

Básicos del Diseño Web

Bienvenido al diseño web moderno

¿Qué es HTML, CSS y Javascript?

La importancia de agrupar tus archivos en carpetas

Primeros pasos en la semántica de HTML5

Empezando con CSS3 y selectores

Diseña para todos los navegadores con Normalize

Modula tu código CSS con Suit

CSS orientado a objetos

Repositorio del Proyecto: Portafolio.la

Sesión de Preguntas y Respuestas

Modelos de caja, Pseudoclases y Tipografía

Modelos de caja: Display

Modelos de caja: Position

Tipografía

Maquetación de Portafolio.la en una hora

Pseudoclases y pseudoelementos

Shortcuts de Sublime Text 2

Cinco tips con mobile first

Responsive Design

Icomoon: usar íconos como fuentes

Resumen: Git, position, iconfonts y responsive design

Sesión de Preguntas y Respuestas

Tomar examen