Download Diapos de la Unidad 4 - Responsive Web Design

Unidad 4
Scripts + Metodología
Objetivos:
-Incorporar scripts que vuelvan adaptables
distintos elementos de páginas web (videos,
slides, mapas, tablas).
-Conocer una Metodología para tomar decisiones
durante el proceso de diseño.
Videos líquidos
Fitvids.js
http://fitvidsjs.com/
Ejercicio para el hogar
- Copiar el código del demo de fitvids y aplicarlo
en una página propia.
Video a distintos bit rates
Plugin Infinite HD app – Octoshape
Usado por Vorterix (caro, pero excelente)
Slider responsive
http://responsiveslides.com/
Ejercicio
- Descargar los demos del slider responsive e
insertarlo en una página, configurando algunas
variantes.
Mapas adaptables
Alto fijo:
<iframe width="90%" height="350"
frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="http://maps.google.com/maps?ie=UTF8&amp;...etc
...">
</iframe>
Alto variable:
http://niklausgerber.com/blog/responsive-google-or-bingmaps/
Tablas adaptables
Ambos extremos
son un problema
Scroll por filas
http://dbushell.com/2012/01/05/responsive-tables-2/
Tarea para el hogar
- Insertar una tabla adaptable usando la técnica
de scroll por filas.
Un proceso de diseño
Mi metodología responsive:
bocetar desde PC para abajo
1) Hacer wireframes para PC más grande
2) Reacomodar quitando flotados de
bloques para sitio mediano (Tabletas).
3) Reacomodar quitando flotados para
versión chica (celulares)
Mi metodología responsive
1. Bocetar de mayor a menor
a) Hacer wireframes para PC más grande
b) Quitar flotados para pantalla mediana (tablets).
c) Quitar flotados para versión chica (celulares)
2. Codificar de menor a mayor
a) Codificar celular primero (HTML tendrá
ese orden).
b) Codificar para tabletas segundo (agregar
contenedores y media query).
c) Codificar para PC al final (más
contenedores y media queries).
3. Medir espacios mínimos y
máximos para fotos, texto, etc.
a) Crear imágenes a esos tamaños.
b) Dar medida a los textos sabiendo el
espacio a ocupar.
c) Adaptar navegación y scripts para
elementos extra.
4. Aplicar colores, imágenes
decorativas, iconos, etc.
a) ...y testear, testear y testear!
Conclusión
- Ya sabemos técnicas para adaptar: tipografías,
layouts, imágenes y backgrounds, navegación,
videos, tablas, mapas, slides.
- Conceptos viewport, Mobile First, legibilidad,
operabilidad (navegación) y una metodología.
El progreso, no la perfección
Hace unos años, un cliente, hablando de su sitio web, dijo:
“No te preocupes por hacer que mi sitio web
sea perfecto. Solamente trabajá en lo que HOY
es mejor. Si constantemente estamos haciendo
lo que HOY es mejor, vamos en la dirección
correcta”.
¿Preguntas?
¡Muchas gracias!