Diseño Web Responsivo

Web Responsive

Latin Flash Tour

Diseño Web Responsivo

@azuleter | [email protected]

Adaptable

Diseño Web Responsivo


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 >


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 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



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 >



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


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/



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 >


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 Adaptable/Responsive Web Design/


Más vale maña que fuerza KADAZURO

Utiliza frameworks, ahorran tiempo y aprendes mucho

Mi favorito >


Retículas Flexibles + Media Queries

@azuleter | [email protected] las imágenes >


Retículas Flexibles + Media Queries

You are on a desktop machine.You are on a tablet device.You are on a smartphone like an iPhone or Android phone.

You are not on a desktop machine.You are not on a tablet device.You are not on a smartphone like an iPhone or Android phone.

@azuleter | [email protected] responsivos... >


Imágenes y Media

img, object { max-width: 100%; }

@azuleter | [email protected] consejo final>


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


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

[email protected]

Diseño Web ResponsivoPODEMOS IR EN PAZ

Gracias