joomla mobile
Post on 16-Dec-2014
573 Views
Preview:
DESCRIPTION
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?
top related