Presentación en Latin Flash Tour 2011. Los elementos generales para crear diseño web Responsivo.

1. Latin Flash Tour
Diseño Web Responsivo
Adaptable
Web Responsive @azuleter | carmen@aureacode.com

2. CONCEPTOS
Diseño Web Responsivo ¿Qué es el Diseño Web?
El diseño web es una actividad que consiste en la plani cación, diseño
e implementación de sitios web y páginas web. Requiere tener en
cuenta cuestiones tales como navegabilidad, interactividad,
usabilidad, arquitectura de la información y la interacción de medios
como el audio, texto, imagen y vídeo. WIKIPEDIA.ORG
Las preguntas más importantes para el diseño web son:
- ¿Cuál es la necesidad del cliente?
- ¿Quién es el usuario final?
La base de la creación web >
@azuleter | carmen@aureacode.com

3. CONCEPTOS
Diseño Web Responsivo Las posibilidades
navegabilidad
interactividad usabilidad
interacción de medios
video Conceptos texto
arquitectura de información
audio imagen
Flash planificación navegador
... android tablets
jquery HTML
blackberry
php Construcción Css3 iphone Medios Explorer
HTML5 php Firefox Chrome
Css smarthphone Safari
javascript
... ...
¿Por dónde empiezo? >
@azuleter | carmen@aureacode.com

4. CONCEPTOS
Diseño Web Responsivo Diseño centrado en el usuario
El Diseño Centrado en el Usuario es una
losofía de diseño que tiene por
objetivo la creación de productos que
resuelvan necesidades concretas de sus
usuarios nales, consiguiendo la mayor
satisfacción y mejor experiencia de uso
posible con el mínimo esfuerzo por su
parte. WIKIPEDIA.ORG
Conocer a nuestro usuario es la parte medular
de los proyectos de web
Aqui viene la parte del compromiso social >
@azuleter | carmen@aureacode.com

5. CONCEPTOS
Diseño Web Responsivo Construimos para la gente
El concepto del diseño centrado en el usuario es muy simple: En cada
paso del proceso de creación web involucra al usuario nal.
Debe existir un compromiso por dar al usuario una experiencia positiva que haga que
permanezca en el sitio.
La experiencia de usuario debe ser coherente, intuitiva y placentera , una experiencia en
donde todo funcione como debe
Los sitios de web o aplicaciones que no trabajan en el modo que el usuario espera lo
hace sentir “estúpido” , un usuario asi NUNCA volverá a nuestro sitio o usará nuestra app.
Tip de identificación de usuarios >
@azuleter | carmen@aureacode.com

6. CONCEPTOS
Diseño Web Responsivo Personajes
http://toonseries.blogspot.com
Brittany Spock Shane
¿Cómo se llama? | ¿Qué hace? | ¿Cuáles son su hábitos? | ¿Cómo resuelve su vida digital? | ...
¿Qué usan estos personajes? >
@azuleter | carmen@aureacode.com

7. MEDIOS
Diseño Web Responsivo El acceso desde diferentes medios
http://foundation.zurb.com/
Hoy debemos crear diseño web que se adapte a todos los medios
Y el mercado de smartphone crece y crece >
@azuleter | carmen@aureacode.com

8. MEDIOS
Diseño Web Responsivo Smartphone
9 millones de personas tiene un
smartphone.
2011 - Crecimiento de un 78% en ventas de
smartphone
El smartphone se ha convertido
en el punto de contacto que tienen
las personas con el internet
Web Responsive...allá vamos >
@azuleter | carmen@aureacode.com

9. MEDIOS
Diseño Web Responsivo Diseño Web Adaptable/Responsive Web Design/
Responsive Web Design es una técnica que hace que la estructura de
un sitio web se adapte al ambiente en el cuál es desplegado para
verlo o interactuar con el.
Los ingredientes:
1. Retículas flexibles para la construcción
2. Imágenes y media flexibles, y
3. Media queries como (una) la solución
Todo está en el web >
@azuleter | carmen@aureacode.com

10. MEDIOS
Diseño Web Responsivo Retículas Flexibles + Media Queries
Más vale maña que fuerza KADAZURO
Utiliza frameworks, ahorran tiempo y aprendes mucho
Mi favorito >
@azuleter | carmen@aureacode.com

11. MEDIOS
Diseño Web Responsivo Retículas Flexibles + Media Queries
<strong class="show-on-desktops">You are on a desktop machine.</strong>
<strong class="show-on-tablets">You are on a tablet device.</strong>
<strong class="show-on-phones">You are on a smartphone like an iPhone or Android phone.</strong>
<strong class="hide-on-desktops">You are not on a desktop machine.</strong>
<strong class="hide-on-tablets">You are not on a tablet device.</strong>
<strong class="hide-on-phones">You are not on a smartphone like an iPhone or Android phone.</strong>
Ahora las imágenes >
@azuleter | carmen@aureacode.com

12. MEDIOS
Diseño Web Responsivo Imágenes y Media
img,
object {
max-width: 100%;
}
Seamos responsivos... >
@azuleter | carmen@aureacode.com

13. MEDIOS
Diseño Web Responsivo Imágenes y Media
El contenido precede al diseño. Éste, en la ausencia de contenido, no es
diseño, es simple decoración - Jeffrey Zeldman @zeldman
Ser Responsivos es una parte filosofia de diseño y otra más estrategia de desarrollo.
Planear los desarrollos nos ayudará a crear las experiencias de las personas que usaran
nuestro diseño web.
Elige los contenidos que la persona verá en la versión web y en la móvil
Mi consejo final>
@azuleter | carmen@aureacode.com

14. CONSTRUCCIÓN
Diseño Web Responsivo El desarrollo y el valor de mi trabajo
Alcance
La fórmula del desarrollo
Los expertos dicen:
Entre el 60 y 80% de proyectos de
software se exceden en esfuerzo y/o
tiempo
Los excedentes en esfuerzo
promedian entre 30 y 40%
Los excedentes en tiempo son entre
20 y 25%
Recursos
($) Tiempo
Triángulo de administración
de proyecto
Es el final... >
@azuleter | carmen@aureacode.com

15. DE LA EXPERIENCIA
Diseño Web Responsivo Tips de ejecución
Priorizar los requisitos y en base a ello hacer ciclos cortos de desarrollo .
Iniciar por las tareas de alto valor de negocio y poca complejidad de
desarrollo
Trabaja en equipo
No le digas NO al cliente, dile SI y envíale una nueva cotización por
implementaciones
SCRUM es una excelente técnica de desarrollo de tecnología
Andar en bici es bueno para el planeta
Gracias... >
@azuleter | carmen@aureacode.com

16. PODEMOS IR EN PAZ
Diseño Web Responsivo Gracias
El contenido precede al diseño. Éste, en la Carmen López
ausencia de contenido, no es diseño, es @azuleter
simple decoración. carmen@aureacode.com
Jeffrey Zeldman
@zeldman
Fuentes:
Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/
FlexSlider: http://flex.madebymufffin.com/
Fluid Images & media : http://unstoppablerobotninja.com
Media Queries: http://mediaqueri.es
Framework: http://foundation.zurb.com/
@azuleter | carmen@aureacode.com