Diseño web responsive y adaptativo utilizando frameworks css

1. Diseño web adaptativo y responsive
Renny Batista

2. ¿Adaptivo
o Responsive?

3. ¿Adaptivo
o Responsive?

5. DISEÑO WEB RESPONSIVE
El termino “responsive”
apareció por primera vez en
Mayo del 2010 en un
artículo del blog “A List
Apart” llamado Responsive
Web Design escrito por
Ethan Marcotte

6. Hace que el contenido del sitio web se adapte por
completo a la pantalla del dispositivo a través del cual se
visualiza, para lo cual los datos que envía la página web
son siempre los mismos, es decir que se reestructuran
los elementos que contiene el sitio con el fin de
optimizar el espacio disponible.
DISEÑO WEB RESPONSIVE

7. DISEÑO WEB ADAPTATIVO
La palabra “adaptive” aparece
habitualmente para referirse a
un concepto, acuñado por
Aaron Gustafson en su libro
Adaptive Web Design.

8. Consiste en que dependiendo con que dispositivo
accedamos a nuestra web, así tendremos preparado un
diseño u otro, o dicho de otra manera, crearemos diseños
específicos para los distintos dispositivos que definamos
DISEÑO WEB ADAPTATIVO

9. ¿CUALES SON LAS DIFERENCIAS ENTRE DISEÑO ADAPTATIVO Y RESPONSIVE?
EXPERIENCIA MÓVIL PERSONAL
Permite un diseño mas personalizado. Se
utilizan múltiples diseños para el website,
ofreciendo mayor flexibilidad en el diseño
en función de cada dispositivo
Utiliza un sólo diseño para adaptarlo a la
resolución de todos los dispositivos. El
diseño del website se limita a la resolución
de cada pantalla.

10. ¿CUALES SON LAS DIFERENCIAS ENTRE DISEÑO ADAPTATIVO Y RESPONSIVE?
FÁCIL MANTENIMIENTO
Requiere mantenimiento de los diseños
del website por separado, lo que implica
más tiempo para actualizar y mantener su
contenido.
Se diseña un solo contenido para cada
resolución de pantalla. El contenido es
simplemente formateado con el estilo
seleccionado para adaptarse a las
dimensiones de la pantalla.

11. ¿CUALES SON LAS DIFERENCIAS ENTRE DISEÑO ADAPTATIVO Y RESPONSIVE?
IMPLEMENTAR EN WEB EXISTENTES
Los websites móviles pueden ser creados
sin tener que rediseñar la versión de
escritorio.
El website debe ser rediseñado para
transformarlo en responsive.

12. ¿CUALES SON LAS DIFERENCIAS ENTRE DISEÑO ADAPTATIVO Y RESPONSIVE?
ES UN DISEÑO PARA TODOS
El diseño adaptativo es una solución para
aquellos websites con un alto volumen de
funcionalidad compleja, donde el objetivo
principal es proporcionar fácil uso para un
dispositivo móvil.
El diseño responsive es una buena
solución para los websites de gran
contenido con limitadas funcionalidades,
dónde el objetivo principal es el marketing
y comunicación de información.

14. La palabra inglesa "framework" (infraestructura,
armazón, marco) define, en términos generales, un
conjunto estandarizado de conceptos, prácticas y
criterios para enfocar un tipo de problemática particular
que sirve como referencia, para enfrentar y resolver
nuevos problemas de índole similar.

15. En el mundo del diseño web, un framework se define
como una es una estructura conformada por un
conjunto de archivos y carpetas de código estándar
(HTML, CSS, scripts JS, etc.) que pueden ser utilizados
para apoyar el desarrollo de sitios web, como base para
empezar a construirlo.

16. En resumen: ¡No hay necesidad
de reinventar la rueda..!

17. El objetivo de un
framework es
proporcionar una
estructura común para
que los desarrolladores
no tengan que hacerlo a
partir de cero y puedan
reutilizar el código
proporcionado.

18. ¿Cuántos tipos de
frameworks
existen?

19. Hay básicamente 2
tipos a diferenciar:
backend y frontend. En
función de si el
framework es para la
capa de presentación o
la capa de aplicación
(lógica del negocio)

20. S
Sólo algunos…

21. Pure es un framework responsivo creado por yahoo que usa como
base Normalize.css. Aparte del grid responsivo, cuenta con los
elementos básicos que componen la interfaz de usuario, como
botones, menús, etc. Es sencillo de usar y cuenta con abundante
documentación y ejemplos en su web.

22. La nueva versión de este popular framework poco tiene que ver con su
predecesora. En esta ocasión se le ha dado una prioridad absoluta al diseño
responsivo, hasta el punto de que se diseña primero para los dispositivos
móviles, 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.

23. Kube es un framework de corte minimalista, adaptable y responsivo,
basado en un grid flexible. Esta pensado para dejar libertad de diseño
al desarrollador por lo que contiene lo básico, la tipografía y unos
pocos elementos, lo que deja un peso muy reducido.

24. 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 página en HTML5 que también hace uso de Jquery. La
responsividad se basa en bootstrap css, por lo que en las
resoluciones más pequeñas se pueden apreciar ciertas similitudes.

25. Kickoff es un framework front-end para crear sitios escalables y
responsivos que cuenta con un mantenimiento muy activo. Basado
en la filosofía del mobile-first (los móviles primero) y creado con SASS
y Grunt, este proyecto incluye numerosos elementos ya diseñados,
documentación y ejemplos. Compatible solo de explorer 8 en
adelante.

26. Creado y diseñado por Google, Material Design es un lenguaje de
diseño que combina los principios clásicos del diseño exitoso junto
con la innovación y la tecnología. El objetivo de Google consiste en
desarrollar un sistema de diseño que permite una experiencia de
usuario unificada a través de todos sus productos en cualquier
plataforma.

27. 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/