Latin Flash Tour

Diseo Web Responsivo Adaptable

Web Responsive

@azuleter | carmen@aureacode.com

CONCEPTOS

Diseo Web Responsivo

Qu es el Diseo Web?

El diseo web es una actividad que consiste en la plani cacin, diseo e implementacin de sitios web y pginas web. Requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la informacin y la interaccin de medios como el audio, texto, imagen y vdeo. WIKIPEDIA.ORG
Las preguntas ms importantes para el diseo web son:

- Cul es la necesidad del cliente? - Quin es el usuario final?

@azuleter | carmen@aureacode.com

La base de la creacin web >

CONCEPTOS

Diseo Web Responsivo

Las posibilidades

navegabilidad interactividad video usabilidad texto interaccin de medios

Conceptos

Flash jquery php

arquitectura de informacin audio imagen planificacin

HTML

...

navegador android tablets blackberry Firefox Chrome smarthphone Safari ...

Por dnde empiezo? >

Construccin Css3

iphone Medios Explorer

HTML5

php

javascript ...

Css

@azuleter | carmen@aureacode.com

CONCEPTOS

Diseo Web Responsivo

Diseo centrado en el usuario

El Diseo Centrado en el Usuario es una losofa de diseo que tiene por objetivo la creacin de productos que resuelvan necesidades concretas de sus usuarios nales, consiguiendo la mayor satisfaccin y mejor experiencia de uso posible con el mnimo esfuerzo por su parte. WIKIPEDIA.ORG
Conocer a nuestro usuario es la parte medular de los proyectos de web

@azuleter | carmen@aureacode.com

Aqui viene la parte del compromiso social >

CONCEPTOS

Diseo Web Responsivo

Construimos para la gente

El concepto del diseo centrado en el usuario es muy simple: En cada paso del proceso de creacin 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 estpido , un usuario asi NUNCA volver a nuestro sitio o usar nuestra app.

@azuleter | carmen@aureacode.com

Tip de identificacin de usuarios >

CONCEPTOS

Diseo Web Responsivo

Personajes
http://toonseries.blogspot.com

Brittany

Spock

Shane

Cmo se llama? | Qu hace? | Cules son su hbitos? | Cmo resuelve su vida digital? | ... Qu usan estos personajes? >

@azuleter | carmen@aureacode.com

MEDIOS

Diseo Web Responsivo

El acceso desde diferentes medios

http://foundation.zurb.com/

Hoy debemos crear diseo web que se adapte a todos los medios
Y el mercado de smartphone crece y crece >

@azuleter | carmen@aureacode.com

MEDIOS

Diseo 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

@azuleter | carmen@aureacode.com

Web Responsive...all vamos >

MEDIOS

Diseo Web Responsivo

Diseo Web Adaptable/Responsive Web Design/

Responsive Web Design es una tcnica que hace que la estructura de un sitio web se adapte al ambiente en el cul es desplegado para verlo o interactuar con el.
Los ingredientes: 1. Retculas flexibles para la construccin 2. Imgenes y media flexibles, y 3. Media queries como (una) la solucin

@azuleter | carmen@aureacode.com

Todo est en el web >

MEDIOS

Diseo Web Responsivo

Retculas Flexibles + Media Queries

Ms vale maa que fuerza KADAZURO

Utiliza frameworks, ahorran tiempo y aprendes mucho

@azuleter | carmen@aureacode.com

Mi favorito >

MEDIOS

Diseo Web Responsivo

Retculas 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 | carmen@aureacode.com

Ahora las imgenes >

MEDIOS

Diseo Web Responsivo

Imgenes y Media

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

@azuleter | carmen@aureacode.com

Seamos responsivos... >

MEDIOS

Diseo Web Responsivo

Imgenes y Media

El contenido precede al diseo. ste, en la ausencia de contenido, no es diseo, es simple decoracin - Jeffrey Zeldman @zeldman
Ser Responsivos es una parte filosofia de diseo y otra ms estrategia de desarrollo. Planear los desarrollos nos ayudar a crear las experiencias de las personas que usaran nuestro diseo web. Elige los contenidos que la persona ver en la versin web y en la mvil

@azuleter | carmen@aureacode.com

Mi consejo final>

CONSTRUCCIN

Diseo Web Responsivo

El desarrollo y el valor de mi trabajo

Alcance

La frmula 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
Tringulo de administracin de proyecto

@azuleter | carmen@aureacode.com

Es el final... >

DE LA EXPERIENCIA

Diseo Web Responsivo

Tips de ejecucin
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 envale una nueva cotizacin por implementaciones SCRUM es una excelente tcnica de desarrollo de tecnologa Andar en bici es bueno para el planeta

@azuleter | carmen@aureacode.com

Gracias... >

PODEMOS IR EN PAZ

Diseo Web Responsivo

Gracias

El contenido precede al diseo. ste, en la ausencia de contenido, no es diseo, es simple decoracin. Jeffrey Zeldman @zeldman
Fuentes:

Carmen Lpez @azuleter carmen@aureacode.com

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