joomla mobile
DESCRIPTION
Conferencia dictada por Javier Gómez Corio sobre el tema de la movilidad y cómo Joomla! lo ha asumido. Participación de alto interés, para quienes se orientan al mercado de los teléfonos celulares.TRANSCRIPT
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?