Diseo web adaptativo y responsiv

Richard Centeno
 Adaptivo
o Responsive?
 Adaptivo
o Responsive?
DISEO WEB RESPONSIVE

El termino responsive
apareci por primera vez en
Mayo del 2010 en un
artculo del blog A List
Apart llamado Responsive
Web Design escrito por
Ethan Marcotte
 DISEO WEB RESPONSIVE
Hace que el contenido del sitio web se adapte por
pleto a la pantalla del dispositivo a travs del cu
sualiza, para lo cual los datos que enva la pgina web
on siempre los mismos, es decir que se reestructura
los elementos que contiene el sitio con el fin
optimizar el espacio disponible.
DISEO WEB ADAPTATIVO
La palabra adaptive aparec
habitualmente para referirse a
un concepto, acuado por
Aaron Gustafson en su libr
Adaptive Web Design.
 DISEO WEB ADAPTATIVO
Consiste en que dependiendo con que dispositiv
accedamos a nuestra web, as tendremos preparado
seo u otro, o dicho de otra manera, crearemos dise
specficos para los distintos dispositivos que definam
LES SON LAS DIFERENCIAS ENTRE DISEO ADAPTATIVO Y RESPONS

EXPERIENCIA MVIL PERSONAL

Permite un diseo mas personalizado. Se Utiliza un slo diseo para adaptarlo a la

utilizan mltiples diseos para el website,
resolucin de todos los dispositivos. E
ofreciendo mayor flexibilidad en el diseo
diseo del website se limita a la resolucin
en funcin de cada dispositivo de cada pantalla.
LES SON LAS DIFERENCIAS ENTRE DISEO ADAPTATIVO Y RESPONS

FCIL MANTENIMIENTO

Requiere mantenimiento de los diseos Se disea un solo contenido para cada

del website por separado, lo que implicaresolucin de pantalla. El contenido es
ms tiempo para actualizar y mantener susimplemente formateado con el estilo
contenido. seleccionado para adaptarse a las
dimensiones de la pantalla.
LES SON LAS DIFERENCIAS ENTRE DISEO ADAPTATIVO Y RESPONS

IMPLEMENTAR EN WEB EXISTENTES

Los websites mviles pueden ser creadosEl website debe ser rediseado para
sin tener que redisear la versin de transformarlo en responsive.
escritorio.
LES SON LAS DIFERENCIAS ENTRE DISEO ADAPTATIVO Y RESPONS

ES UN DISEO PARA TODOS

El diseo adaptativo es una solucin paraEl diseo responsive es una buena

aquellos websites con un alto volumen de solucin para los websites de gran
funcionalidad compleja, donde el objetivocontenido con limitadas funcionalidades
principal es proporcionar fcil uso para un
dnde el objetivo principal es el marketing
dispositivo mvil. y comunicacin de informacin.
 palabra inglesa " framework " (infraestructu
mazn, marco) define, en trminos generales, un
njunto estandarizado de conceptos, prcticas
iterios para enfocar un tipo de problemtica particula
ue sirve como referencia, para enfrentar y resolve
uevos problemas de ndole similar.
En el mundo del diseo web, un framework se defin
como una estructura conformada por un
conjunto de archivos y carpetas de cdigo estnd
(HTML, CSS, scripts JS, etc.) que pueden ser utilizado
para apoyar el desarrollo de sitios web, como base pa
empezar a construirlo.
resumen: No hay necesidad
reinventar la rueda ..!
 El objetivo de un
framework es
proporcionar una
estructura comn para
que los desarrolladores
no tengan que hacerlo a
partir de cero y puedan
reutilizar el cdigo
proporcionado.
Cuntos tipos de
frameworks
existen?
 Hay bsicamente 2
tipos a diferenciar:
ackend y frontend. En
funcin de si el
framework es para la
apa de presentacin o
la capa de aplicacin
(lgica del negocio)
S

Slo algunos
e es un framework responsivo creado por yahoo que usa como
Normalize.css. Aparte del grid responsivo, cuenta con
mentos bsicos que componen la interfaz de usuario, como
nes, mens, etc. Es sencillo de usar y cuenta con abunda
mentacin y ejemplos en su web.
ueva versin de este popular framework poco tiene que ver co
ecesora. En esta ocasin se le ha dado una prioridad absoluta al dis
onsivo, hasta el punto de que se disea primero para los dispositivo
les, para posteriormente ir adaptando a resoluciones mayores. Otro
untos fuertes de este framework, es la gran cantidad de componen
ncluye, como alertas, barras de progreso, dropdowns, botones etc.
 e es un framework de corte minimalista, adaptable y respons
ado en un grid flexible. Esta pensado para dejar libertad de dis
esarrollador por lo que contiene lo bsico, la tipografa y unos
os elementos, lo que deja un peso muy reducido.
etro UI es un conjunto de estilos que proporcionan una interfa
milar a la de Windows 8. Estos estilos, desarrollados con LESS,
ican a una pgina en HTML5 que tambin hace uso de Jquery.
ponsividad se basa en bootstrap css, por lo que en
oluciones ms pequeas se pueden apreciar ciertas similitud
kof es un framework front-end para crear sitios escalable
onsivos que cuenta con un mantenimiento muy activo. Basad
a filosofa del mobile-first (los mviles primero) y creado con S
unt, este proyecto incluye numerosos elementos ya diseado
umentacin y ejemplos. Compatible solo de explorer 8
ante.
ado y diseado por Google, Material Design es un lenguaje d
o que combina los principios clsicos del diseo exitoso junt
la innovacin y la tecnologa. El objetivo de Google consiste e
arrollar un sistema de diseo que permite una experiencia
ario unificada a travs de todos sus productos en cualquie
aforma.
http://www.informatica-hoy.com.ar/mi-propio-blog/Diseno-web-Adaptativo-
Responsive-mejor.php.

http://trip2themoon.com/por-que-lo-llamas-adaptativo-cuando-quieres-decir-
responsive/

http://tunegocioenlanube.net/diseno-responsive-o-diseno-web-adaptativo/

http://www.ixistudio.com/blog/paginas-web/diseno-web-adaptativo-vs-
responsivo/