joomla mobile

CONFERENCIA MAGISTRAL 2Joomla Mobile

Javier Gómez

Estrategias “mobile” para proyectos Joomla

Presentación basada en:Mobile Joomla Strategies & Techniques

Joomla Day Chicago August 11, 2012Autor: Cory Webb corywebbmedia.com

¿A quién va dirigida esta presentación?

- diseñador@s

- programador@s

- director@s de proyecto

- otros

¿¡Movilidad!?

¿Para qué?...

¡Mostrad vuestros smartphones y tablets!

- En el mundo hay 1,2 billones de usuarios web móviles

- Uso de Internet móvil en Colombia subió el 69% en 2011

- 208 million US mobile 3G subscribers in Q4 2011

LA MOVILIDAD NO ES EL FUTURO... ES ¡YA!

¿¿¿Movilidad???- Distintas dimensiones de pantalla

¿¿¿Movilidad???- Distintas dimensiones de pantalla

- Distinta interacción

¿¿¿Movilidad???- Distintas dimensiones de pantalla

- Distinta interacción

- ¿Distinta finalidad?

- Movilidad ¿para quién? y ¿para qué?

- Diseñar para terminales móviles es mucho más que ajustar unos css y el tamaño de unas imágenes... requiere estructurar el contenido para que sea accesible con independencia del dispositivo.

¿ Java, Objective C, .NET,... ?

- ¡No existe una web móvil!: ¡no existe una web para iPad, una para iPhone, una para Android y otra para escritorio... ¿y los navegadores textuales? ¿y la versión impresa? la Web es un estándar accesible para el acceso universal a contenidos estructurados.

Fuente: http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/

- Movilidad ¿para quién? y ¿para qué?

- Estrategias de movilidad ¿Qué? ¿Cómo?

– Estrategia 1: No hacer nada

– Estrategia 2: Crear una plantilla distinta para smartphones y tablets

– Estrategia 3: Aplicación móvil nativa

– Estrategia 4: Responsive Web design (diseño responsivo o adaptable)

- ¡Eiiii! ¡Que bien! No hay que hacer nada ^_^

- Tu web podrá verse en dispositivos móviles, pero ¡NO USES flash!.

- Apple ganó la batalla a Adobe

- Flash está muerto.

- ¡Larga vida a HTML5!

Estrategia 1: No hacer nada...

PROS:

- Es fácil

- Es gratis

Estrategia 1: No hacer nada...

CONTRAS:- La experiencia de usuario

no es óptima en celulares

- Posible percepción negativa de la marca

Estrategia 2: Crear una plantilla distinta para smartphones y tablets

Estrategia 2: Crear una plantilla distinta para smartphones y tablets

- TapTheme.com

- MobileJoomla.com (permite añadir un subdomino móvil)

- RocketTheme.com – Gantry Framework

- Usar un plugin para detectar el dispositivo y navegador con el que se conectan a mi página. Cambiando la plantilla en función del dispositivo.

Estrategia 2: Crear una plantilla distinta para smartphones y tablets

Y... ¿cómo sabemos que se ve bien en todo los dispositivos?

- Compra todos y cada uno de los dispositivos móviles del mercado

- Safari for Mac – User Agent Setting

- BrowserStack.com

PROS:

- Es fácil

- No es excesivamente caro

- Hay bastantes plantillas comerciales

Estrategia 2: Crear una plantilla distinta para smartphones y tablets

CONTRAS:- Más trabajo para gestionar para

la web

- Multitud de posiciones de los módulos

- Las plantillas existentes se ven “muy estándares”

- Más trabajo para hacer una imagen unificada de marca

¿Cuál es la mejor estratégia?

Depende:

• de la misión de su website

• de los hábitos de sus usuarios

• de los requisitos de su site

• del presupuesto

El responsive design o diseño adaptativo es probablemente la mejor estrategia, pero eso depende de cada circunstancia

Estrategia 3: Aplicación móvil nativa

Estrategia 3: Aplicación móvil nativa

- Sí, Joomla puede servir contenido a una aplicación móvil

- Requiere desarrollo específico de una API

- http://relaxapi.com/ - REST API para J! 1.5

- Herramientas de desarrollo:

– Appcelerator Titanium

– PhoneGap

PROS:

- Posibilidad de acceder a las herramientas del dispositivo: brújula, acelerómetro...

- Buena percepción de marca

CONTRAS:- Caro

- Raramente necesario

- Existen demasiados dispositivos en el mercado

Estrategia 3: Aplicación móvil nativa

Estrategia 4: Responsive Web design

Estrategia 4: Responsive Web design

Estrategia 4: Responsive Web design

Estrategia 4: Responsive Web design

Estrategia 4: Responsive Web design

Estrategia 4: Responsive Web design

Estrategia 4: Responsive Web design

Estrategia 4: Responsive Web design

Estrategia 4: Responsive Web design

- Usa 1 solo template

- El marcado HTML es el mismo para todos los dispositivos

- Usa Media Queries para identificar y adaptarse a las dimensiones...

Estrategia 4: Responsive Web design

/* Ventana Modal en smartphone */

@media (max-width: 480px) {

.modal {

position: absolute;

top: 10px;

left: 10px;

right: 10px;

width: auto;

margin: 0;

}

Media Queries =>

Estrategia 4: Responsive Web design

Y... ¿Cómo sabemos que se ve bien en todos los dispositivos?

- Muy fácil, tan solo tienes que cambiar el ancho del navegador...

Estrategia 4: Responsive Web design

Frameworks:

- Skeleton (http://www.getskeleton.com/)

- Foundation (http://foundation.zurb.com/)

- Less Framework (http://lessframework.com/)

Y... el maravilloso Bootstrap http://twitter.github.com/bootstrap/

Estrategia 4: Responsive Web design

- Usa 1 solo template

- El marcado HTML es el mismo para todos los dispositivos

- Usa Media Queries para identificar y adaptarse a las dimensiones

PROS:

- Consistencia entre todas las vistas

- Sólo 1 código que gestionar y fácil de testear

- Enfocado a estructurar contenido universalmente accesible

- Multitud de templates y frameworks

CONTRAS:

- Probablemente requiere un rediseñar la web en cuanto a la estructura del contenido y a la apariencia de la web

Estrategia 4: Responsive Web design

¿Dudas?