diseño web responsivo
DESCRIPTION
Presentación en Latin Flash Tour 2011. Los elementos generales para crear diseño web Responsivo.TRANSCRIPT
Diseño Web Responsivo
@azuleter | [email protected]
CONCEPTOS
¿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 | [email protected]
Diseño Web ResponsivoCONCEPTOS
Las posibilidades
¿Por dónde empiezo? >
navegabilidad
interactividad usabilidad
arquitectura de información
interacción de medios
audioplanificación
texto
imagen
video
...
Conceptos
navegador
smarthphone
tablets
Explorer
Firefox Chrome
Safari
android
iphone
blackberry
...
Medios
Flash
HTML
HTML5Css
Css3
jquery
javascript
php
php
...
Construcción
@azuleter | [email protected] viene la parte del compromiso social >
Diseño Web ResponsivoCONCEPTOS
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
@azuleter | [email protected]
Diseño Web ResponsivoCONCEPTOS
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 | [email protected]
Diseño Web ResponsivoCONCEPTOS
Personajes
¿Cómo se llama? | ¿Qué hace? | ¿Cuáles son su hábitos? | ¿Cómo resuelve su vida digital? | ...
¿Qué usan estos personajes? >
Brittany Spock Shane
http://toonseries.blogspot.com
@azuleter | [email protected]
Diseño Web ResponsivoMEDIOS
El acceso desde diferentes medios
Hoy debemos crear diseño web que se adapte a todos los medios
Y el mercado de smartphone crece y crece >
http://foundation.zurb.com/
@azuleter | [email protected]
Diseño Web ResponsivoMEDIOS
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 | [email protected]
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 >
Diseño Web ResponsivoMEDIOS
Diseño Web Adaptable/Responsive Web Design/
@azuleter | [email protected]
Más vale maña que fuerza KADAZURO
Utiliza frameworks, ahorran tiempo y aprendes mucho
Mi favorito >
Diseño Web ResponsivoMEDIOS
Retículas Flexibles + Media Queries
@azuleter | [email protected] las imágenes >
Diseño Web ResponsivoMEDIOS
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>
@azuleter | [email protected] responsivos... >
Diseño Web ResponsivoMEDIOS
Imágenes y Media
img, object { max-width: 100%; }
@azuleter | [email protected] consejo final>
Diseño Web ResponsivoMEDIOS
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
@azuleter | [email protected] el final... >
Diseño Web ResponsivoCONSTRUCCIÓN
El desarrollo y el valor de mi trabajo
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%
Alcance
Recursos($) Tiempo
Triángulo de administración de proyecto
@azuleter | [email protected]... >
Diseño Web ResponsivoDE LA EXPERIENCIA
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
@azuleter | [email protected]
El contenido precede al diseño. Éste, en la
ausencia de contenido, no es diseño, es
simple decoración.
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/
Carmen López
@azuleter
Diseño Web ResponsivoPODEMOS IR EN PAZ
Gracias