Plantilla de Adobe para empezar con jQuery Mobile
Si queréis empezar a trastear con jQueryMobile, Adobe dispone de una plantilla muy sencilla que se puede descargar desde su artículo “Customizable starter design for jQuery Mobile” La plantilla está basada en multipágina y te puedes hacer una idea de los elementos mínimos que debe tener una página. Si unimos la plantilla a que Dreamwever CS5.5 tiene soporte para jQueryMobile e incluso puedes hacer proyectos para PhoneGap, es un buen punto de partida para empezar a desarrollar nuestra web adaptada para móviles.
jQuery Mobile es un framework para desarrollo de aplicaciones y sitios web optimizados para smartphones y tablets, intentando agilizar el desarrollo y ofreciendo muchas características y comportamientos predefinidos: listados, transición entre página, cargas ajax, navegación multipágina (varias páginas en un sólo fichero) y con soporte para muchas plataformas: iPhone, Android, BlackBerry, Windows Phone, etc...
El artículo de Adobe es muy básico, pero la plantilla tiene todo lo necesario para empezar: librería javascript, css, imágenes y fichero html. Podéis ver el ejemplo online o descargarla
Si queréis profundizar en jQuery Mobile y buscáis recursos en castellano, la gente de Facultia ha publicado unos tutoriales sobre esta librería/framework muy interesantes:
La plantilla la encontraréis al final del artículo de Adobe, no voy a poner el enlace directamente :)
Enlaces:
- Customizable starter design for jQuery Mobile
- Ejemplo de adobe online y descarga del ejemplo
- Artículo Introducción a jQuery Mobile (I) y Introducción a jQuery Mobile (II)
Cómo descargar pdfs en Scribd sin pagar la suscripción mensual
Scribd es un servicio online en el que puedes subir presentaciones, documentos, libros, etc… Muchos usuarios incluso suben libros enteros (no escritos por ellos, vamos), dándote la opción el servicio de ver el documento online o descargarlo en formato PDF.
Aunque el servicio te da la posibilidad de descargar el documento o presentación en formato PDF, en algunos documentos te pide que un registro mensual de 9€.
Cuando ya había decidido que para el uso que le doy no me apetecía pagar esos 9€, accedí a el documento para leerlo online con el iPad y me sorprendí al comprobar que en la versión iPad no pide ese “peaje” mensual, así que la solución era fácil: descargarl el PDF desde el iPad.
En realidad no hace falta tener ni un iPhone, ni iPad ni teléfono android para descargarlo, con el propio navegador y trasteando un poco se puden descargar los documentos PDF “engañando” al servicio haciéndole pensar que navegamos desde cualquiera de estos dispositivos.
¿Cómo hacemos esto?. Con un simple extensión para Firefox como “User Agent Switcher” podéis cambiar este dato del navegador, que no son más que unos parámetros que le pasa el navegador al servidor web y con el que el sistema nos muestra la versión más apropiada para nuestro dispositivo.
En este ejemplo vamos a ver como el documento “Cómo resolver el cubo de Rubik” de Alvaro Ibáñez (alvy en Microsiervos) nos pide la suscripción pero la podemos evitar cambiando el “User Agent” por iphone, por lo que podemos descargarlo sin problemas y sin pagar, mejor aún :-)
1- Intentamos descargar el fichero PDF desde el botón de descarga, y hasta aquí todo bien…
2- Al confirmar la descarga nos pide la suscripción mensual de €.. norrrrr:
Instalamos el complemento para Firefox “USER AGENT SWITCHER”
Reiniciamos y aparece un submenú en “Herramientas” en el que le podemos indicarle al navegador como se tiene que identificar con el servidor. Seleccionamos “iPhone”o “iPad”
Si visitáis la dirección anterior, en lugar de mostrarse la versión de escritorio se verá la optimizada para iPhone o iPad y con el botón “Download”, pero esta vez, no te pide los 9€
¡Ahora da gusto descargarlo! :-D
Un truco muy sencillo y que te permite descargar cualquier documento y gracias a este truco, ya se resolver el cubo sin mirar la chuleta. En versión larga, pero la sensación de triunfo al conseguirlo por primera vez no me la quita nadie :-)
Enlaces:
- Extensión “User Agent Switcher” para firefox (también hay extensiones para otros navegadores)
- Cómo resolver el cubo de rubik en microsiervos y el enlace directo al documento en Scribd.com
Curso en Elche de “Gestión de redes sociales en la empresa”
Ya han publicado la web con toda la información sobre el “Curso de gestión de redes sociales en la empresa” (Community Manager) que se va ofrecer en el Parque Científico de la Universidad Miguel Hernández de Elche y en el que voy a participar como docente en la última fase del Módulo Avanzado (Mobile Marketing) gracias a la invitación de @franciscopaez
El curso consta de dos módulos de 7o horas cada uno. El profesorado es muy variado y se tocan conocimientos que no se ven en otros cursos mucho más genéricos y que me parecen imprescindibles a la hora de gestionar la presencia online de las empresas. Ya no vale con “tienes que tener una página en facebook” o “crea tu cuenta en twitter“. El sector, por suerte, se está profesionalizando y necesita profesionales con conocimiento en muchas areas (marketing, analítica, seo, programación, etc…), muy flexibles y capaces de adaptarse a cualquier tipo de situación.
Os dejo el temario de los cursos para que os hagáis una idea de las areas que se van a tocar y de la calidad de los docentes :)
Curso de Introducción al Community Manager
- Introducción a las redes sociales en la empresa: Francisco Páez
- Plan Estratégico de Social Media y herramientas Productividad personal 2.0: Francisco Páez
- Twiiter Básico: José Llinares
- Facebook Básico: Juan Merodio
- Posicionamiento en los buscadores SEO Básico: Aleyda Solis
- Blog Marketing y redes sociales: Franck Scipion
- Email Marketing: Franck Scipion
- Analítica Web Básica: Gemma Muñoz
- Reputación Online en redes sociales: Victor Puig
- El día a día del community Manager: Javier Esteban
- Aspectos Legales en Internet y las redes Sociales: Amedeo Maturo
Curso Avanzado de Community Manager
- Facebook Avanzado: Gabriel Cuesta
- Video Marketing y Youtube: Miguel Sánchez de León
- Twitter Avanzado: José Llinares
- Geomarketing y Social Commerce: Gerson Beltrán
- Retorno en el Social Media: Juan Sobejano
- Posicionamiento en Buscadores (SEO avanzado): Aleyda Solis
- Reputación Online avanzada: Victor Puig
- Analítica Web avanzada: Gemma Muñoz
- Campañas Google Adwords SEM: Francisco Lopez
- Usabilidad/Conversión Web: Ricardo Tayar
- Mobile Marketing: Pablo Angelleti
Los cursos empezarán el 24 de noviembre, repartidos en 14 clases de 5 horas cada uno los Jueves y Viernes de 16 a 21 horas en el Parque Científico de la Universidad Miguel Hernández en Elche
Enlaces:
Enlaces interesantes 13 octubre
Enlaces interesantes 13 octubre
- HTML5 y sus implicaciones SEO –
- 14. “Como hemos rodado el Videoclip del verano 2011″ « Camaradiez –
- Cómo se hacían los videojuegos en los años ochenta | –
- Launchlist – Your one stop website checklist! – Lista de detalles a comprobar antes de lanzar tu website
- Official Usability, UX & UI Guidelines From Companies | Usability Geek –
- 10 consejos para trabajar en remoto « Pensando en Red –
- Mobile Web and App Development Testing and Emulation Tools – Speckyboy Design Magazine –
- 10 Essential Toolkits for iPad Wireframing –
Diseñando para dispositivos móviles: Responsive Web Design y Hand per Device
Una de las tendencias en el diseño web para dispositivos móviles (smartphones, tablets, etc…) es el “Responsive Design” o “Diseños webs sensibles”, que no es más que la respuesta a la gran fragmentación de dispositivos, cada uno con una resolución y características de pantalla propias.
Como indican el artículo de genbetadev, el “Responsive Design” es una forma de diseñar las webs usando diseños flexibles que se adaptan a los dispostivos, incluso cambiando la distribución de los elementos usando técnicas de diseños fluidos (tamaños de los objetos proporcionales), mediaquerys (carga de css según característica del dispositivo) y adaptación del tamaño de las imágenes. Se busca realizar diseños que se adapten tanto a una pantalla de escritorio, portatil, smartphone y tablets. Una labor que me antoja casi imposible. Como con muchos diseños fluidos te das cuenta de que para que se vea “decente” a todos los tamaños, no se a ver bien en ninguno.
Usar “Responsive Web Design” en una horquilla tan grande de dispositivos es demasiado complicado y olvidamos que no se trata solamente de un cambio de diseño por dispositivo sino que cada uno de ellos se usa de forma diferente y se le da usos diferentes. Ahí dónde nos va a ayudar un concepto tan sencillo como el “Hand por Device” o “Manos por dispositivo”, haciendo subgrupos en os que si podremos aplicar técnicas de “Responsive design”.
Hugo Manilla habla del concepto “Hand per Device” en su presentación: HANDS PER DEVICE. An Alternative approach to optimizing web content delivery and interaction for multiple plataforms (descarga en PDF)
El concepto es sencillo: segmentar los tipos de dispositivos por “manos necesarias para controlarlo”, por lo que al final nos quedaría 4 grandes grupos:
- Ordenadores Personales: de sobremesa, portátiles, netbooks, etc…
- Tablets: iPads, tablets androids, etc…
- Smartphones: Androids, iPhones, etc…
- Set Top boxes: televisores con conexión a internet, apples Tv, etc…
Cada uno de los grupos tiene en común la forma en que controlamos el dispositivo: teclado y ratón en el caso de los ordenadores de sobremesa, pantallas táctiles en tablets y smartphones pero con distinto tipo de pantallas y mando a distancia y pantallas grandes, usando mínimo scroll.
Son 4 grupos muy diferenciados en los que varía mucho el tipo de tecnología que podemos utilizar, por lo que una adaptación solamente basada en CSS y diseño fluido se queda corta, siendo necesarios desarrollos un poco más complejos pero en los que podemos aprovechar el tipo de uso y navegación de cada dispositivo y así crear experiencias de usuario más ricas para cada uno de ellos.
Enlaces:
Soy Pablo Angeletti y estoy especializado en el diseño web y desarrollo de webapps para móviles. En infonomada.com hablo de todo lo que me interesa: internet, diseño, usabilidad, programación, gadgets, tecnología móvil, redes sociales...
Sígueme en twitter: @angeletti
