Diseo web adaptativo y responsive
Ing. Richard Centeno Palomino
Adaptivo
o Responsive?
Adaptivo
o Responsive?
DISEO WEB RESPONSIVE
Hace que el contenido del sitio web se adapte por
completo a la pantalla del dispositivo a travs del cual se
visualiza, para lo cual los datos que enva la pgina web
son siempre los mismos, es decir que se reestructuran
los elementos que contiene el sitio con el fin de
optimizar el espacio disponible.
DISEO WEB ADAPTATIVO
Consiste en que dependiendo con que dispositivo
accedamos a nuestra web, as tendremos preparado un
diseo u otro, o dicho de otra manera, crearemos diseos
especficos para los distintos dispositivos que definamos
CUALES SON LAS DIFERENCIAS ENTRE DISEO ADAPTATIVO Y RESPONSIVE?
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. El
ofreciendo mayor flexibilidad en el diseo diseo del website se limita a la resolucin
en funcin de cada dispositivo de cada pantalla.
CUALES SON LAS DIFERENCIAS ENTRE DISEO ADAPTATIVO Y RESPONSIVE?
FCIL MANTENIMIENTO
Requiere mantenimiento de los diseos Se disea un solo contenido para cada
del website por separado, lo que implica resolucin de pantalla. El contenido es
ms tiempo para actualizar y mantener su simplemente formateado con el estilo
contenido. seleccionado para adaptarse a las
dimensiones de la pantalla.
CUALES SON LAS DIFERENCIAS ENTRE DISEO ADAPTATIVO Y RESPONSIVE?
IMPLEMENTAR EN WEB EXISTENTES
Los websites mviles pueden ser creados El website debe ser rediseado para
sin tener que redisear la versin de transformarlo en responsive.
escritorio.
CUALES SON LAS DIFERENCIAS ENTRE DISEO ADAPTATIVO Y RESPONSIVE?
ES UN DISEO PARA TODOS
El diseo adaptativo es una solucin para El diseo responsive es una buena
aquellos websites con un alto volumen de solucin para los websites de gran
funcionalidad compleja, donde el objetivo contenido con limitadas funcionalidades,
principal es proporcionar fcil uso para un dnde el objetivo principal es el marketing
dispositivo mvil. y comunicacin de informacin.
La palabra inglesa " framework " (infraestructura,
armazn, marco) define, en trminos generales, un
conjunto estandarizado de conceptos, prcticas y
criterios para enfocar un tipo de problemtica particular
que sirve como referencia, para enfrentar y resolver
nuevos problemas de ndole similar.
En el mundo del diseo web, un framework se define
como una estructura conformada por un
conjunto de archivos y carpetas de cdigo estndar
(HTML, CSS, scripts JS, etc.) que pueden ser utilizados
para apoyar el desarrollo de sitios web, como base para
empezar a construirlo.
En resumen: No hay necesidad
de 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:
backend y frontend. En
funcin de si el
framework es para la
capa de presentacin o
la capa de aplicacin
(lgica del negocio)
S
Slo algunos
Pure es un framework responsivo creado por yahoo que usa como
base Normalize.css. Aparte del grid responsivo, cuenta con los
elementos bsicos que componen la interfaz de usuario, como
botones, mens, etc. Es sencillo de usar y cuenta con abundante
documentacin y ejemplos en su web.
La nueva versin de este popular framework poco tiene que ver con su
predecesora. En esta ocasin se le ha dado una prioridad absoluta al diseo
responsivo, hasta el punto de que se disea primero para los dispositivos
mviles, para posteriormente ir adaptando a resoluciones mayores. Otro de
los puntos fuertes de este framework, es la gran cantidad de componentes
que incluye, como alertas, barras de progreso, dropdowns, botones etc.
Kube es un framework de corte minimalista, adaptable y responsivo,
basado en un grid flexible. Esta pensado para dejar libertad de diseo
al desarrollador por lo que contiene lo bsico, la tipografa y unos
pocos elementos, lo que deja un peso muy reducido.
Metro UI es un conjunto de estilos que proporcionan una interfaz
similar a la de Windows 8. Estos estilos, desarrollados con LESS, se
aplican a una pgina en HTML5 que tambin hace uso de Jquery. La
responsividad se basa en bootstrap css, por lo que en las
resoluciones ms pequeas se pueden apreciar ciertas similitudes.
Kickoff es un framework front-end para crear sitios escalables y
responsivos que cuenta con un mantenimiento muy activo. Basado
en la filosofa del mobile-first (los mviles primero) y creado con SASS
y Grunt, este proyecto incluye numerosos elementos ya diseados,
documentacin y ejemplos. Compatible solo de explorer 8 en
adelante.
Creado y diseado por Google, Material Design es un lenguaje de
diseo que combina los principios clsicos del diseo exitoso junto
con la innovacin y la tecnologa. El objetivo de Google consiste en
desarrollar un sistema de diseo que permite una experiencia de
usuario unificada a travs de todos sus productos en cualquier
plataforma.
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/
