SlideShare una empresa de Scribd logo
1 de 27
Descargar para leer sin conexión
Diseño web adaptativo y responsive
Renny Batista
¿Adaptivo
o Responsive?
¿Adaptivo
o Responsive?
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
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
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.
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
¿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.
¿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.
¿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.
¿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.
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.
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.
En resumen: ¡No hay necesidad
de reinventar la rueda..!
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.
¿Cuántos tipos de
frameworks
existen?
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)
S
Sólo algunos…
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.
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.
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.
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.
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.
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.
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/

Más contenido relacionado

La actualidad más candente

Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio webtomyycerr
 
Convirtiendo Historias En Guiones
Convirtiendo Historias En GuionesConvirtiendo Historias En Guiones
Convirtiendo Historias En GuionesJORGE LUIS OLAYA
 
Lista de chequeo para la evaluación de sitios web de ele bajo el enfoque comu...
Lista de chequeo para la evaluación de sitios web de ele bajo el enfoque comu...Lista de chequeo para la evaluación de sitios web de ele bajo el enfoque comu...
Lista de chequeo para la evaluación de sitios web de ele bajo el enfoque comu...Sthephanny Linares
 
Gestores de contenido
Gestores de contenidoGestores de contenido
Gestores de contenidoFabian Diaz
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño WebMarcelo Freitas
 
Lenguajes de Descripción de Arquitecturas
Lenguajes de Descripción de Arquitecturas Lenguajes de Descripción de Arquitecturas
Lenguajes de Descripción de Arquitecturas Shelisse De la Cruz
 
Tecnologia web
Tecnologia webTecnologia web
Tecnologia webMeli Vidal
 
Gestor de contenidos
Gestor de contenidosGestor de contenidos
Gestor de contenidosalarcon7a
 
Metodología DCU (Diseño centrado en el usuario))
Metodología DCU (Diseño centrado en el usuario))Metodología DCU (Diseño centrado en el usuario))
Metodología DCU (Diseño centrado en el usuario))King-eClient
 
Capitulo 19 Modelado De DiseñO
Capitulo 19 Modelado De DiseñOCapitulo 19 Modelado De DiseñO
Capitulo 19 Modelado De DiseñOMarilyn Jaramillo
 
06 tipos de licencias de software
06 tipos de licencias de software06 tipos de licencias de software
06 tipos de licencias de softwareDon Augusto
 
Guía Básica de CSS.pptx
Guía Básica de CSS.pptxGuía Básica de CSS.pptx
Guía Básica de CSS.pptxClaudiaNaveda2
 
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Micael Gallego
 
Herramientas multimedia
Herramientas multimediaHerramientas multimedia
Herramientas multimediaCarlos Yataco
 

La actualidad más candente (20)

Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
Diseño de la interfaz de usuario
Diseño de la interfaz de usuarioDiseño de la interfaz de usuario
Diseño de la interfaz de usuario
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
 
Convirtiendo Historias En Guiones
Convirtiendo Historias En GuionesConvirtiendo Historias En Guiones
Convirtiendo Historias En Guiones
 
Lista de chequeo para la evaluación de sitios web de ele bajo el enfoque comu...
Lista de chequeo para la evaluación de sitios web de ele bajo el enfoque comu...Lista de chequeo para la evaluación de sitios web de ele bajo el enfoque comu...
Lista de chequeo para la evaluación de sitios web de ele bajo el enfoque comu...
 
Gestores de contenido
Gestores de contenidoGestores de contenido
Gestores de contenido
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
 
Lenguajes de Descripción de Arquitecturas
Lenguajes de Descripción de Arquitecturas Lenguajes de Descripción de Arquitecturas
Lenguajes de Descripción de Arquitecturas
 
Páginas web
Páginas webPáginas web
Páginas web
 
Tecnologia web
Tecnologia webTecnologia web
Tecnologia web
 
Gestor de contenidos
Gestor de contenidosGestor de contenidos
Gestor de contenidos
 
Sistema operativo(recursos,interfaz)
Sistema operativo(recursos,interfaz)Sistema operativo(recursos,interfaz)
Sistema operativo(recursos,interfaz)
 
Metodología DCU (Diseño centrado en el usuario))
Metodología DCU (Diseño centrado en el usuario))Metodología DCU (Diseño centrado en el usuario))
Metodología DCU (Diseño centrado en el usuario))
 
Fases para elaborar un sitios web
Fases para elaborar un sitios webFases para elaborar un sitios web
Fases para elaborar un sitios web
 
Get & post
Get & postGet & post
Get & post
 
Capitulo 19 Modelado De DiseñO
Capitulo 19 Modelado De DiseñOCapitulo 19 Modelado De DiseñO
Capitulo 19 Modelado De DiseñO
 
06 tipos de licencias de software
06 tipos de licencias de software06 tipos de licencias de software
06 tipos de licencias de software
 
Guía Básica de CSS.pptx
Guía Básica de CSS.pptxGuía Básica de CSS.pptx
Guía Básica de CSS.pptx
 
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
 
Herramientas multimedia
Herramientas multimediaHerramientas multimedia
Herramientas multimedia
 

Destacado

Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - FormulariosRenny Batista
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Renny Batista
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIRenny Batista
 
Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasRenny Batista
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de DatosRenny Batista
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Renny Batista
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java scriptRenny Batista
 
La Ciencia en la época de Cervantes
La Ciencia en la época de CervantesLa Ciencia en la época de Cervantes
La Ciencia en la época de CervantesNombre Apellidos
 
Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Ozzy Bull
 
Excepciones
ExcepcionesExcepciones
Excepcionesrilara
 
Tema 10 excepciones
Tema 10 excepcionesTema 10 excepciones
Tema 10 excepcionesjbersosa
 

Destacado (20)

05 java excepciones
05 java excepciones05 java excepciones
05 java excepciones
 
Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - Formularios
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema II
 
Html - Tema 1
Html - Tema 1Html - Tema 1
Html - Tema 1
 
Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y Listas
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de Datos
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015
 
JQuery-Tema 1
JQuery-Tema 1JQuery-Tema 1
JQuery-Tema 1
 
03 java poo_parte_2
03 java poo_parte_203 java poo_parte_2
03 java poo_parte_2
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 
Java colecciones
Java coleccionesJava colecciones
Java colecciones
 
Css - Tema 2
Css -  Tema 2Css -  Tema 2
Css - Tema 2
 
Html - Tema 3
Html - Tema 3Html - Tema 3
Html - Tema 3
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java script
 
La Ciencia en la época de Cervantes
La Ciencia en la época de CervantesLa Ciencia en la época de Cervantes
La Ciencia en la época de Cervantes
 
Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4
 
Taller MVC
Taller MVCTaller MVC
Taller MVC
 
Excepciones
ExcepcionesExcepciones
Excepciones
 
Tema 10 excepciones
Tema 10 excepcionesTema 10 excepciones
Tema 10 excepciones
 

Similar a Diseño adaptativo y responsive

Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)Giovanni Quagliano
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveAntonRoMX
 
Expo 3:Generación Mejorandola - Responsive design
Expo 3:Generación Mejorandola - Responsive design Expo 3:Generación Mejorandola - Responsive design
Expo 3:Generación Mejorandola - Responsive design uchihacfc
 
Responsive web design
Responsive web designResponsive web design
Responsive web designG2K Hosting
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaLuis Felipe Perez
 
Larga vida al desktop - Sebastián Mantel
Larga vida al desktop - Sebastián MantelLarga vida al desktop - Sebastián Mantel
Larga vida al desktop - Sebastián Manteljotaemepereira
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoAptitud Emprendedora
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensibleCarlos Zapata
 
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaResponsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaJano Garcia
 
U2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdfU2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdfVICTORMORO11
 
Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web DesignNadal Soler
 
APPSWEBI4.0.pptx
APPSWEBI4.0.pptxAPPSWEBI4.0.pptx
APPSWEBI4.0.pptx22040086
 
c.jimenez@tic-spain.com_guiaDrupal
c.jimenez@tic-spain.com_guiaDrupalc.jimenez@tic-spain.com_guiaDrupal
c.jimenez@tic-spain.com_guiaDrupalTIC SPAIN
 

Similar a Diseño adaptativo y responsive (20)

Diseño web responsivo
Diseño web responsivoDiseño web responsivo
Diseño web responsivo
 
Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
 
Expo 3:Generación Mejorandola - Responsive design
Expo 3:Generación Mejorandola - Responsive design Expo 3:Generación Mejorandola - Responsive design
Expo 3:Generación Mejorandola - Responsive design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest Merida
 
Qué es el diseño web
Qué es el diseño webQué es el diseño web
Qué es el diseño web
 
Larga vida al desktop - Sebastián Mantel
Larga vida al desktop - Sebastián MantelLarga vida al desktop - Sebastián Mantel
Larga vida al desktop - Sebastián Mantel
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyecto
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Tema 6
Tema 6Tema 6
Tema 6
 
Clase 1 Introducción al Desarrollo Web
Clase 1 Introducción al Desarrollo WebClase 1 Introducción al Desarrollo Web
Clase 1 Introducción al Desarrollo Web
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensible
 
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaResponsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarcia
 
U2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdfU2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdf
 
Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web Design
 
APPSWEBI4.0.pptx
APPSWEBI4.0.pptxAPPSWEBI4.0.pptx
APPSWEBI4.0.pptx
 
c.jimenez@tic-spain.com_guiaDrupal
c.jimenez@tic-spain.com_guiaDrupalc.jimenez@tic-spain.com_guiaDrupal
c.jimenez@tic-spain.com_guiaDrupal
 

Último

La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxLa-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxMAURICIO329243
 
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOSCALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOSdarlingreserved
 
Descripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraDescripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraJose Sanchez
 
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxTALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxMartaChaparro1
 
Amor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAmor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAlejandrino Halire Ccahuana
 
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD EDUCATIVO.pdfdeBelnRosales2
 
Biografía del General Eloy Alfaro Delgado
Biografía del General Eloy Alfaro DelgadoBiografía del General Eloy Alfaro Delgado
Biografía del General Eloy Alfaro DelgadoJosé Luis Palma
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.monthuerta17
 
Trabajo de electricidad y electrónica 2024 10-1
Trabajo de electricidad y electrónica 2024 10-1Trabajo de electricidad y electrónica 2024 10-1
Trabajo de electricidad y electrónica 2024 10-1juandiegomunozgomez
 
NIVELES TRÓFICOS DE UN ECOSISTEMA (ecologia)
NIVELES TRÓFICOS DE UN ECOSISTEMA (ecologia)NIVELES TRÓFICOS DE UN ECOSISTEMA (ecologia)
NIVELES TRÓFICOS DE UN ECOSISTEMA (ecologia)LizNava123
 
LOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejorLOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejormrcrmnrojasgarcia
 
Explicación del Modelo de Stephen Toulmin para elaborar argumentos
Explicación del  Modelo de Stephen Toulmin para elaborar argumentosExplicación del  Modelo de Stephen Toulmin para elaborar argumentos
Explicación del Modelo de Stephen Toulmin para elaborar argumentosINESDVERA
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacionviviantorres91
 
Salvando mi mundo , mi comunidad , y mi entorno
Salvando mi mundo , mi comunidad  , y mi entornoSalvando mi mundo , mi comunidad  , y mi entorno
Salvando mi mundo , mi comunidad , y mi entornoday561sol
 
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...Martin M Flynn
 

Último (20)

La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxLa-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
 
Act#25 TDLab. Eclipse Solar 08/abril/2024
Act#25 TDLab. Eclipse Solar 08/abril/2024Act#25 TDLab. Eclipse Solar 08/abril/2024
Act#25 TDLab. Eclipse Solar 08/abril/2024
 
¿Amor o egoísmo? Esa es la cuestión.pptx
¿Amor o egoísmo? Esa es la cuestión.pptx¿Amor o egoísmo? Esa es la cuestión.pptx
¿Amor o egoísmo? Esa es la cuestión.pptx
 
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOSCALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
 
Descripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraDescripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldadura
 
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxTALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
 
Amor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdfAmor o egoísmo, esa es la cuestión por definir.pdf
Amor o egoísmo, esa es la cuestión por definir.pdf
 
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
 
Biografía del General Eloy Alfaro Delgado
Biografía del General Eloy Alfaro DelgadoBiografía del General Eloy Alfaro Delgado
Biografía del General Eloy Alfaro Delgado
 
Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.Si cuidamos el mundo, tendremos un mundo mejor.
Si cuidamos el mundo, tendremos un mundo mejor.
 
Unidad 1 | Metodología de la Investigación
Unidad 1 | Metodología de la InvestigaciónUnidad 1 | Metodología de la Investigación
Unidad 1 | Metodología de la Investigación
 
Trabajo de electricidad y electrónica 2024 10-1
Trabajo de electricidad y electrónica 2024 10-1Trabajo de electricidad y electrónica 2024 10-1
Trabajo de electricidad y electrónica 2024 10-1
 
NIVELES TRÓFICOS DE UN ECOSISTEMA (ecologia)
NIVELES TRÓFICOS DE UN ECOSISTEMA (ecologia)NIVELES TRÓFICOS DE UN ECOSISTEMA (ecologia)
NIVELES TRÓFICOS DE UN ECOSISTEMA (ecologia)
 
LOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejorLOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejor
 
Explicación del Modelo de Stephen Toulmin para elaborar argumentos
Explicación del  Modelo de Stephen Toulmin para elaborar argumentosExplicación del  Modelo de Stephen Toulmin para elaborar argumentos
Explicación del Modelo de Stephen Toulmin para elaborar argumentos
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacion
 
Salvando mi mundo , mi comunidad , y mi entorno
Salvando mi mundo , mi comunidad  , y mi entornoSalvando mi mundo , mi comunidad  , y mi entorno
Salvando mi mundo , mi comunidad , y mi entorno
 
Acuerdo segundo periodo - Grado Once.pptx
Acuerdo segundo periodo - Grado Once.pptxAcuerdo segundo periodo - Grado Once.pptx
Acuerdo segundo periodo - Grado Once.pptx
 
Acuerdo segundo periodo - Grado Sexto.pptx
Acuerdo segundo periodo - Grado Sexto.pptxAcuerdo segundo periodo - Grado Sexto.pptx
Acuerdo segundo periodo - Grado Sexto.pptx
 
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
 

Diseño adaptativo y responsive

  • 1. Diseño web adaptativo y responsive Renny Batista
  • 4.
  • 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.
  • 13.
  • 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.
  • 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)
  • 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.