SlideShare una empresa de Scribd logo
1 de 15
Tendencias 2013
Maquetación en diferentes browsers y dispositivos | Responsive vs. Adaptive
TENDENCIAS
▐ Consideraciones para diferentes browsers
▐ Viabilidad en cada browser
▐ Dispositivos (mobile y tabletas)
CONSIDERACIONES PARA DIFERENTES BROWSERS
|Tradicionalmente los websites o plataformas online se verifican para los
siguientes exploradores en una pc:
Explorer (8, 9 y 10), Chrome, Firefox, Safari.
| Es indispensable definir, mediante herramientas de medición y estadísticas
(por ejemplo, Google Analytics) si también se debe verificar dicha plataforma
en Explorer 7.
Esta versión del explorador suele restringir las elecciones del tipo de desarrollo
a proponer.
| Por ejemplo, ciertas formas en el diseño (bordes redondeados, sombras
aplicadas por css) no se ven.

Por ejemplo: http://www.krikos.com.ar/facturasdemo/Home/login
CONSIDERACIONES PARA DIFERENTES BROWSERS
|Sobre Explorer 9
CONSIDERACIONES PARA DIFERENTES BROWSERS
|Sobre Explorer 7
DISPOSITIVOS: MOBILE Y TABLETAS
| Mediante las mismas herramientas de medición y estadísticas, resulta
necesario analizar las plataformas, dispositivos sobre las cuales va a ser
requerimiento replantear la plataforma.
| Para ello se debe plantear, a su vez, si la maquetación a utilizar será
Responsive o Adaptive.
Maquetación Responsive:
Este tipo de maquetación se realiza a través del uso de una grilla que permita
adaptar una misma estructura maquetada a diferentes dispositivos.
Se utiliza un solo css que divide por módulos la estructura y los adapta
a, visualización en PC, tabletas y dispositivos móviles.

Maquetación Adaptive:
Este tipo de maquetación se realiza adaptando un css para cada dispositivo
específico (con diferentes anchos y altos de pantalla).
DISPOSITIVOS: MOBILE Y TABLETAS
|Ejemplo de estructura responsive
DISPOSITIVOS: MOBILE Y TABLETAS
|Ejemplo de implementación responsive
DISPOSITIVOS: MOBILE Y TABLETAS
|Ejemplo de implementación adaptive
CASO: Provincia NET. Aplicación para geolocalización de sucursales
DISPOSITIVOS: MOBILE Y TABLETAS
|Ejemplo de implementación adaptive
CASO: Provincia NET. Aplicación para geolocalización de sucursales
DISPOSITIVOS: MOBILE Y TABLETAS
|Ejemplo de implementación adaptive
CASO: Buenas Vibras Viajes. Web mobile
DISPOSITIVOS: MOBILE Y TABLETAS
|Algunas estadísticas de usos
Referencia: Online Marketing Day, Julio de 2013
DISPOSITIVOS: MOBILE Y TABLETAS
|Algunas estadísticas de usos
Referencia: Online Marketing Day, Julio de 2013
DISPOSITIVOS: MOBILE Y TABLETAS
|Algunas estadísticas de usos
Referencia: Online Marketing Day, Julio de 2013
Luciana Monaco
Vanesa Gambirazio
www. id4you.com
Monroe 4181 PB A | CABA | Argentina

Más contenido relacionado

Similar a Tendencias de maquetacion

Dreamweaver
DreamweaverDreamweaver
Dreamweaver
cts93
 
Desarrollo fi s1
Desarrollo fi s1Desarrollo fi s1
Desarrollo fi s1
svaclaro
 
Estrategias de posicionamiento para un mundo que busca desde el móvil
Estrategias de posicionamiento para un mundo que busca desde el móvilEstrategias de posicionamiento para un mundo que busca desde el móvil
Estrategias de posicionamiento para un mundo que busca desde el móvil
SEMrush_es
 
Actividad 3
Actividad 3Actividad 3
Actividad 3
abiperza
 
Desarrollo webdispositivosmoviles
Desarrollo webdispositivosmovilesDesarrollo webdispositivosmoviles
Desarrollo webdispositivosmoviles
Abefo
 

Similar a Tendencias de maquetacion (20)

Diferencias Entre El Diseño Web Adaptativo Y Responsive
Diferencias Entre El Diseño Web Adaptativo Y Responsive
Diferencias Entre El Diseño Web Adaptativo Y Responsive
Diferencias Entre El Diseño Web Adaptativo Y Responsive
 
Joomla mobile
Joomla mobileJoomla mobile
Joomla mobile
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Desarrollo fi s1
Desarrollo fi s1Desarrollo fi s1
Desarrollo fi s1
 
9.aplicaciones web responsive gene xus
9.aplicaciones web responsive gene xus9.aplicaciones web responsive gene xus
9.aplicaciones web responsive gene xus
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Mercadotecnia movil
Mercadotecnia movilMercadotecnia movil
Mercadotecnia movil
 
Cómo construir portales para móviles y tables con Liferay 6.1
Cómo construir portales para móviles y tables con Liferay 6.1Cómo construir portales para móviles y tables con Liferay 6.1
Cómo construir portales para móviles y tables con Liferay 6.1
 
Estrategias de posicionamiento para un mundo que busca desde el móvil
Estrategias de posicionamiento para un mundo que busca desde el móvilEstrategias de posicionamiento para un mundo que busca desde el móvil
Estrategias de posicionamiento para un mundo que busca desde el móvil
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías Web
 
Actividad 3
Actividad 3Actividad 3
Actividad 3
 
Consejos Prácticos para Mejorar tu Web y Vender Más
Consejos Prácticos para Mejorar tu Web y Vender MásConsejos Prácticos para Mejorar tu Web y Vender Más
Consejos Prácticos para Mejorar tu Web y Vender Más
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
En 20 minutos ... Responsive Design
En 20 minutos ... Responsive DesignEn 20 minutos ... Responsive Design
En 20 minutos ... Responsive Design
 
Desarrollo webdispositivosmoviles
Desarrollo webdispositivosmovilesDesarrollo webdispositivosmoviles
Desarrollo webdispositivosmoviles
 
Google ad words
Google ad wordsGoogle ad words
Google ad words
 
Google ad words
Google ad wordsGoogle ad words
Google ad words
 

Más de ID4you

Reporte consolidado fundacion leer mnl2012
Reporte consolidado fundacion leer mnl2012Reporte consolidado fundacion leer mnl2012
Reporte consolidado fundacion leer mnl2012
ID4you
 
Diseño sitios 2 0- Charla UP 05-2010
Diseño sitios 2 0- Charla UP 05-2010Diseño sitios 2 0- Charla UP 05-2010
Diseño sitios 2 0- Charla UP 05-2010
ID4you
 

Más de ID4you (10)

Diseño de experiencias turísticas - campañas de promoción y posicionamiento p...
Diseño de experiencias turísticas - campañas de promoción y posicionamiento p...Diseño de experiencias turísticas - campañas de promoción y posicionamiento p...
Diseño de experiencias turísticas - campañas de promoción y posicionamiento p...
 
ID4you - Digital Agency - Servicios y Clientes
ID4you - Digital Agency -  Servicios y ClientesID4you - Digital Agency -  Servicios y Clientes
ID4you - Digital Agency - Servicios y Clientes
 
Análisis de tendencias mobile 2013
Análisis de tendencias mobile 2013Análisis de tendencias mobile 2013
Análisis de tendencias mobile 2013
 
Redes sociales mitos-y-verdades-3
Redes sociales mitos-y-verdades-3Redes sociales mitos-y-verdades-3
Redes sociales mitos-y-verdades-3
 
Reporte consolidado fundacion leer mnl2012
Reporte consolidado fundacion leer mnl2012Reporte consolidado fundacion leer mnl2012
Reporte consolidado fundacion leer mnl2012
 
Marcas: del amor al odio en un click
Marcas: del amor al odio en un clickMarcas: del amor al odio en un click
Marcas: del amor al odio en un click
 
Presentación ID4YOU 2012
Presentación ID4YOU 2012Presentación ID4YOU 2012
Presentación ID4YOU 2012
 
Diseño pymes 2 0
Diseño pymes 2 0Diseño pymes 2 0
Diseño pymes 2 0
 
Nuevos modelos de comunicacion y diseño 2 0 - universidad de belgrano
Nuevos modelos de comunicacion y diseño 2 0 - universidad de belgranoNuevos modelos de comunicacion y diseño 2 0 - universidad de belgrano
Nuevos modelos de comunicacion y diseño 2 0 - universidad de belgrano
 
Diseño sitios 2 0- Charla UP 05-2010
Diseño sitios 2 0- Charla UP 05-2010Diseño sitios 2 0- Charla UP 05-2010
Diseño sitios 2 0- Charla UP 05-2010
 

Último

GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
EdisonCondesoDelgado1
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
 
Sofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design PortfolioSofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design Portfolio
sofiospina94
 
secuencias de los figuras de cuadros y rectangulos
secuencias de los figuras de cuadros y rectangulossecuencias de los figuras de cuadros y rectangulos
secuencias de los figuras de cuadros y rectangulos
RosarioLloglla
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
irenecarmona12
 

Último (20)

Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdfTríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
 
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHEDIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
 
414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx
 
Anexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo  Nivel 3 Ficha  Lectura pptjsbdkksAnexo  Nivel 3 Ficha  Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkks
 
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdfCATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Sofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design PortfolioSofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design Portfolio
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
secuencias de los figuras de cuadros y rectangulos
secuencias de los figuras de cuadros y rectangulossecuencias de los figuras de cuadros y rectangulos
secuencias de los figuras de cuadros y rectangulos
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
 
Triptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jajaTriptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jaja
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 

Tendencias de maquetacion

  • 1. Tendencias 2013 Maquetación en diferentes browsers y dispositivos | Responsive vs. Adaptive
  • 2. TENDENCIAS ▐ Consideraciones para diferentes browsers ▐ Viabilidad en cada browser ▐ Dispositivos (mobile y tabletas)
  • 3. CONSIDERACIONES PARA DIFERENTES BROWSERS |Tradicionalmente los websites o plataformas online se verifican para los siguientes exploradores en una pc: Explorer (8, 9 y 10), Chrome, Firefox, Safari. | Es indispensable definir, mediante herramientas de medición y estadísticas (por ejemplo, Google Analytics) si también se debe verificar dicha plataforma en Explorer 7. Esta versión del explorador suele restringir las elecciones del tipo de desarrollo a proponer. | Por ejemplo, ciertas formas en el diseño (bordes redondeados, sombras aplicadas por css) no se ven. Por ejemplo: http://www.krikos.com.ar/facturasdemo/Home/login
  • 4. CONSIDERACIONES PARA DIFERENTES BROWSERS |Sobre Explorer 9
  • 5. CONSIDERACIONES PARA DIFERENTES BROWSERS |Sobre Explorer 7
  • 6. DISPOSITIVOS: MOBILE Y TABLETAS | Mediante las mismas herramientas de medición y estadísticas, resulta necesario analizar las plataformas, dispositivos sobre las cuales va a ser requerimiento replantear la plataforma. | Para ello se debe plantear, a su vez, si la maquetación a utilizar será Responsive o Adaptive. Maquetación Responsive: Este tipo de maquetación se realiza a través del uso de una grilla que permita adaptar una misma estructura maquetada a diferentes dispositivos. Se utiliza un solo css que divide por módulos la estructura y los adapta a, visualización en PC, tabletas y dispositivos móviles. Maquetación Adaptive: Este tipo de maquetación se realiza adaptando un css para cada dispositivo específico (con diferentes anchos y altos de pantalla).
  • 7. DISPOSITIVOS: MOBILE Y TABLETAS |Ejemplo de estructura responsive
  • 8. DISPOSITIVOS: MOBILE Y TABLETAS |Ejemplo de implementación responsive
  • 9. DISPOSITIVOS: MOBILE Y TABLETAS |Ejemplo de implementación adaptive CASO: Provincia NET. Aplicación para geolocalización de sucursales
  • 10. DISPOSITIVOS: MOBILE Y TABLETAS |Ejemplo de implementación adaptive CASO: Provincia NET. Aplicación para geolocalización de sucursales
  • 11. DISPOSITIVOS: MOBILE Y TABLETAS |Ejemplo de implementación adaptive CASO: Buenas Vibras Viajes. Web mobile
  • 12. DISPOSITIVOS: MOBILE Y TABLETAS |Algunas estadísticas de usos Referencia: Online Marketing Day, Julio de 2013
  • 13. DISPOSITIVOS: MOBILE Y TABLETAS |Algunas estadísticas de usos Referencia: Online Marketing Day, Julio de 2013
  • 14. DISPOSITIVOS: MOBILE Y TABLETAS |Algunas estadísticas de usos Referencia: Online Marketing Day, Julio de 2013
  • 15. Luciana Monaco Vanesa Gambirazio www. id4you.com Monroe 4181 PB A | CABA | Argentina