Al tema.

Para enviar ficheros al kindle disponemos de dos vías:

• Inalámbricamente (por wifi o 3g, según el dispositivo). Enviando los ficheros a una dirección asociada con el dispositivo que amazon te asigna y como arte de birli-birloque, aparece en tu dispositivo. Pagando un euro (0.90€) por mega de transferencia, claro.
• Alambricamente. Osea, por USB :) Conectas el dispositivo, copias el ebook y ya puedes disfrutar de el. Esta vez, gratis.

Pero.. ¿cómo puedo saber que dirección tengo asignada a mi dispositivo Kindle?. Lo puedes en la web de Amazon, pero está un poco escondido.

Aquí una explicación gráfica:

Haz click para ver la explicación en detalle

Aquí la explicación paso a paso sin grafiquitos ni flechitas:

• Te identificas con tu cuenta de Amazon.
• Vas a “tu cuenta” o “your Account”
• En la parte de abajo hay un cuadro con el nombre “Digital Content” o algo parecido en castellano.Entras a la sección “Manage your kindle”
• En la página verás un menú lateral. Tienes que ir a la opción “Personal Document Settings” En la página verás una dirección asociada a tu dispositivo.

Pues esa es la dirección a la que tienes que enviar por email tus ficheros para acceder a ellos desde tu Kindle.

Si los ficheros están en un formato distinto de .mobi, .prc o el formato nativo del Kindle .azw tienes que poner en el asunto del mensaje  “convert” para que Amazon lo convierta automáticamente.

Si quieres ahorrarte unos centimillos, puedes enviar el mensaje a la misma cuenta pero añadiendo el subdominio “free” a la dirección de correo. La dirección quedaría así: si amazon te ha asociado “pericodelospalotes@kindle.com”, si le envías un fichero a la dirección “pericodelospalotes@free.kindle.com”, Amazon te devolverá un enlace para descargar el fichero convertido directamente en tu ordenador, sin pasar por su red ya sea por wifi o 3g. 

Fácil pero sinceramente, un poco escondido. Amazon preferirá que pases por caja pagando un precio más elevado por los libros del kindle que por lo de papel ( la bio de Steve Jobs, por ejemplo)  en lugar de “convertirlos” de otras fuentes.

Mientras que muchos usuarios son rehacios o no se atreven a instalar un simple programa en su ordenador “Oye..como me instalo eso..”, “me va a entrar un virus si me pongo esto otro?..”, otros han encontrado en el móvil un aparato que no les impone ninguna barrera, fácil de manejar y con miles de aplicaciones y juegos gratis o a precios ridículos. Esa facilidad de uso unido a la ubiquidad y movilidad de los smartphones han conseguido que no echemos de menos el ordenador. Sólo hay que ver las estadísticas del artículo de gigaom.com en que dan algunas cifras de acceso desde dispositivos móviles y se comple la tendencia de crecimiento de los dispositivos móviles (smartphones, tablets, etc..) como principal vía de acceso de los usuarios: “It’s becoming a mobile-first world”

Todos los dispositivos móviles suman un 54% de acceso

55% de acceso desde móviles a twitter y un 33% a Facebook

¿Que podemos hacer ante esta tendencia? Lo primero, mirar las estadísticas de acceso a tu web:

• ¿Se cumple esta tendencia en mi sector?
• El contenido que hay publicado, ¿se puede ver desde un dispositivo móvil? (adios adobe flash adiooooos)

Puede ser que todo esto no se refleje en tus estadísticas, o  ”para cuatro gatos que acceden a la web desde móvil no merece la pena el esfuerzo”, pero piénsalo mejor. Levanta la vista y fíjate en el entorno, en toda esa gente mirando un aparatito que emite luz entre sus manos y que al realizar una búsqueda, lo hacen con ese aparato. Cuando les envían un enlace por email, lo abren en ese aparato. Cuando ven una dirección en el periódico (los pocos que lo siguen leyendo), lo consultan en ese dispositivo.

La situación está cambiando y no va a parar. Paseáte por las grandes superficies, vete a la zona de smartphonesy tablets. Fíjate en el perfil de clientes, de que hablan, cotillea leñe!: una señora comprándole un ipad a su padre anciano para que pueda leer el periódico en frances todos los días, unos padres comprándole un smartphone a su hijo para accede a tuenti por sacar buenas notas, una señora que lo quiere para enviar todos los mensajes que quiera a su hijo por whatsup… No son cuatro gatos.. son todos!

Ahora vuelve a mirar tu web y piensa si se ajusta a lo que toda esa gente va estar usando.

Enlaces:

• Gigaom.com: It’s becoming a mobile-first world
  Vía  ”Internet ya es un espacio móvil, no es un vaticinio, lo es desde la Navidad recién pasada” de Eduardo Arriagada 
• Meeker Says Majority Of Pandora’s And Twitter’s Traffic Is Mobile; Square Transactions Grew 20,000%

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:

• Introducción a jQuery Mobile (I)
• Introducción a jQuery Mobile (II)

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)

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:

• A list Apart: Responsive Web Design
• Genbetadev: Diseños web sensibles (Responsive Web Design)
• Smashingmagazine: Responsive Web Design: What It Is and How To Use It
• Hugo Manila. Presentación de Hugo Manila “Hand per device” en noteandpoit.com

Aunque el uso de los códigos QR se usan hace tiempo (en Asia su uso es bastante común), es ahora, con el crecimiento de los smartphones cuando se empiezan a ver más estretegias y campañas que aprovechan estos código.

Los códigos QR pueden guardar mucha información (como guardar partidas enteras de ajedrez), pero el uso más común es como enlace directo a una landing page de campaña o promoción, evitando tener que escribir la url y lanzándonos directamente a la web en la que se nos ofrecen descuentoso promociones, etc…

En el sector turístico lo solemos ver aplicado en monumentos y puntos neurálgicos de la ciudad en los que simplemente con apuntar el móvil con el programa apropiado, se nos abre el navegador con una página informativa sobre el monumento, edificio emblemático, obra, etc…

Problemas de usabilidad al aplicar códigos QR

Si lo miramos desde la perspectiva de usabilidad, hemos convertido un entorno urbano en un interfaz en el que, mediante un dispositivo con cámara, podemos “hacer click” en ciertos botones “códigos QR” con el que accedemos a información ampliada. Eso, que en principio puede parecer muy bonito y fácil, puede traernos los mismos problemas de usabilidad que un mal desarrollo en la web.

• ¿Qué voy a encontrar detrás de un código QR? ¿Queda claro el contenido que se va a mostrar?
• ¿Que programas hay que utilizar para acceder a la información de los códigos?. ¿El usuario lo tiene instalado?
• Si alguien no tiene el programa lector de códigos QR ¿hay una url alternativa?

En muchas campañas que estoy viendo basadas en código QR, alguno de estos pasos no se ha tenido en cuenta.

¿Qué voy a encontrar detrás de un código QR?

Hace poco aparecieron unos códigos QR pegados por Alicante sin más explicación. Me imagino que alguna mente creativa pensaría “… Ponemos sólo el código, que la gente se pregunte que es usando el factor sorpresa y que apunten sus móviles para ver nuestra….” No se que como sigue la historia por que si veo un código QR por la calle no voy como loco a ver que hay detrás. Tendría que hacer lo siguiente: Ver tu código, sacar mi móvil, abrir el programa para leer códigos QR, apuntar (en este caso algunos estaban pegados casi en el suelo) y ohhh.. sorpresa!.. Venga ya! Dame alguna pista leñe. Contexto. Que tipo de información me va proporcionar. Si está en un monumento, esta claro. Si aparece en un flyer de un restaurante, está claro. Si está en una pared..

¿Que programas hay que utilizar para acceder a la información de los códigos?.

Aunque los early adopters sepan de memoria que programas de su smartphone leen códigos QR, la mayoría no sabe ni que son (el 58% en Estados Unidos, aquí muchos menos) Aunque quede feo, se debe indicar con que programas se pueden leer los códigos (según plataforma). La frase de “el que ve el código QR ya sabe para es” claramente es de alguien que no tiene ni idea de cómo usa la gente la tecnología y en lugar de ver como solucionar un problema, prefiere eliminar lo que no se ajusta con su realidad. Lo que nos llevaría al siguiente punto…

Si alguien no tiene el programa lector de códigos QR ¿hay una url alternativa?

Si lo único que hace el código QR es abrir una dirección web, ¿por que no ponen  una dirección alternativa usando un acortador de urls? Acortadores como Google Url Shortener nos acortan la url y crear un código QR para ella. Aparte de poner el código QR, debajo de el se puede poner perfectamente la url acortada, dando la posibilidad a cualquier persona con acceso a internet a ver la información. Personalmente, escribo una dirección en menos tiempo del que me toma abrir un progrma apuntar con la cámara y esperar a que se ejecute el navegador.

¿Y si usan una blackberry?. ¿y con un nokia sin cámara pero con conexión a internet?. ¿Y si el turista no tiene acceso con móvil pero sin en su hotel y quiere apuntar una dirección para usarla después? Puede  que un futuro, si una tecnología basada en Realidad Aumentada y geolocalización no lo remplaza, no haga falta indicar una url alternativa, pero a día de hoy, si le muestras una ulr acortada casi todo el mundo sabe que hacer con ella. Con un código QR.. pues no tanta. Cuesta poco incluirlo y probablemente la campaña añada un buen número de accesos.

Pero ver los códigos QR como un simple acceso a una url es muy limitado. Se pueden hacer cosas muy chulas y hay agencias que se están especializando en trabajar estrategias usando códigos QR y web móvil, como Selenus QR code, de Valencia. En los videos se su canal de youtube podréis ver varias usos para clientes basados en códigos QR:

Para cerrar os dejo esta interesante infografía sobre el uso de los códigos QR  de Lab42.com:

Enlaces:

Códigos QR en la Wikipedia

Augmented Reality Kills The QR Code Star

Selenus QR Codes

Scanapalooza: QR Codes

No quería poner nada hasta ver por dónde respiraba la nueva red social de Google. Después de más de una semana de uso ( y gracias a la invitación de Francisco y Jesus de Goltratec ) ,ver como la gente empieza triplicar los contenidos que mueve en redes sociales (facebook, twitter y ahora Google +), la verdad es que me siento cómodo en ella. Más cómodo que en Facebook.

Para los que no sepan de que va el tema (raro si estás en las redes sociales), Google+ es la nueva red social que ha creado Google que mezcla conceptos de Facebook y de twitter. Algo entre un Facebook con datos más publicos o un twitter con esteróides.

Un detalle que pude no tener mucha importancia pero que es un ejemplo de que parte es la que Google quiere destacar, es la información que puedes adjuntar a tu perfil. Y es la que marca la diferencia del tipo de perfil que va a usar una plataforma u otra.

Los datos que te permite incluir facebook en la información de tu perfil como qué música me gusta, libros que leo, películas o una serie de campos que tengo o vacíos, sinceramente, me importan un pimiento. La gente no es tan plana. No me dice nada, o más bién, nada de valor. Sin embargo, ¿que encontramos en Google+? Aparte de la básica como descripción, trabajo, etc.. podemos añadir las redes sociales a las que perteneces, tus enlaces en delicious, compartidos en Google reader, twitter, blogs, etc… Esa información si me parece interesante. No me digas lo que te gusta, ¡demuéstramelo!

Lo malo de ir a rebufo de la competencia es que a la hora de salir a la calle tienes que cumplir unos requisitos que tu competencia (en este caso facebook o twitter), han ido perfilando con el tiempo y que la gente ya da por básicas en la plataforma: El acceso a su API ¿que aún no tiene páginas de empresa? No pasa nada, ya incluirá google places o cualquier cosa que se le ocurra.

Os dejo unos enlaces con información sobre Google Plus para pillándole la gracia a la plataforma, que al ritmo al que está creciendo, le va a hacer pupita tanto a google como a Facebook. Aunque hay sitios para todas, no tenemos tanto tiempo y al final, el tiempo que dedicas a una se lo vas a quitar a otra.

• Google Plus: La nueva red social de Google en el blog de Grupo Skala. Un buen recopilatorio que se han currado mis compañeros @Kisuxa10 y @belmontedavid
• Todo lo que quiso saber sobre Google+ y no se atrevió a preguntar… en el blog Tus apis por mi cookies. Un post lleno de enlaces para tirarte una semana leyendo :)
• I’m a technical lead on the Google+ team. Ask me anything. Un de los desarrolladores que han trabajo en Google+ responde a las preguntas en la web AnyAsq
• How Google+ could become an essential business tool en The Next Web sobre los usos empresariales de Google+

Le falta integración con Google Reader, api para la creación de apis y programas de acceso para la gestión de la plataforma, etc… Pero acaba de salir. Y fuerte.

Como se suele decir, Google+ ha venido para quedarse.

Enlaces:

• Web de Hector Delgado. Ilustrador y diseñador y creador de la ilustración que abre el post. Gracias por dejarme publicar tu dibujillo, majete :)
• Google +
• Blog Tus apis por mis Cookies
• Goltratec

Via notcot.com: Great behind-the-scenes look at the craftsmanship and making of Leica lenses in the production facilities of Leica Camera AG

Hace unos meses publiqué un pequeño post sobre la webapp para fallas que desarrollamos para el Portal de Turismo de la Comunitat Valenciana. Ahora le toca el turno a su proyecto gemelo: la Guía Móvil para las Hogueras de Alicante (hogueras.comunitatvalenciana.com)

Para las Fallas de valencia estaba previsto una versión de la guía adaptada para Facebook que al final, por tiempos, tuvimos que recortar en el proyecto final. Aprovechando que ya teníamos mucho trabajo hecho para las fallas, hemos podido meter una pequeña aplicación para facebook de la guía.

Como las dos guías (la de hogueras y la de fallas) comparten muchas características, esto es lo que publiqué en el anterior post:

¿que información le resultará útil a alguien en la calle, en las Hogueras de Alicante y con un smartphone en la mano?

• Información sobre las Hogueras de Alicante (información general, consejos, etc…).
• Listar las Hogueras con su localización usando mapas (Google Maps en este caso).
• Agenda de eventos geolocalizada.
• Poder verse de forma optimizada desde un iPhone/Android/Smartphone.

La información debía ser útil tanto a turistas como a la gente de Alicante. Un detalle importante a tener cuenta es que las fotos no iba a estar disponibles hasta “La Plantà”

Y la parte técnica:

Con los elementos sobre la mesa (requisitos técnicos, elementos a incluir, interfaz, etc..) podemos tomar decisiones sobre las herramientas y tecnología a utilizar:

• WordPress como CMS por la agilidad a la hora de gestionar contenidos y el amplio ecosistema de utilidades y plugins para el uso con móviles.
• jQuery Mobile como framework javascript para la adaptación del interfaz para móviles.
• Google maps para la geolocalización de las hogueras y eventos.

Usar WordPress nos da  acceso a una inmensa cantidad de plugins con los que poder dar salida a cada necesidad de la webapp. De todos lo que utilizamos, estos son los más importantes:

• Mobile pack o WPtap Mobile Detector. para asignar el theme movil cuando se acceda desde móvil
• GeoMashup. Para la implementación de Google Maps a las fichas
• Magic Fields. Para la personalización de campos en las fichas de las hogueras y agenda
• qTranslate. Para gestionar los idiomas (castellano e inglés) qTranslate no me gusta usarlo en proyectos en el que importe el seo, pero en este proyecto era algo secundario.
• Theme Test Drive. Para mostrar de forma pública un theme y en el simulador una versión móvil adaptada para escritorio o facebook.

Con todo esto tenemos la versión optimizada para móviles, pero ¿y la versión de Facebook?.
Para crear la app que actualmente está funcionando como pestaña en la web de la Comunitat Valenciana, los pasos serían los siguientes:

• Crear una app nueva en Facebook
• Diseñar un theme nuevo para WordPress ya que va funcionar con la misma configuración a nivel permalinks, nombre de las páginas, etc…
• Usar el selector de theme “theme test drive” para utilizar uno u otro en base al diseño a mostrar: facebook, escritorio, movil, etc…
• Optimizar el diseño para que los contenidos se muestren correctamente en un ancho de 520px y siguiendo las pautas de diseño para pestañas en Facebook

App en Facebook funcionando en la pestaña de la Comunitat Valenciana

Ejemplo de ficha de Hoguera en Facebook

En otro post explicaré más a fondo los pasos para crear la app y usar los contenidos de WordPress.

Las fotos de que hay publicadas son las del día de la plantà y muchas de ellas no estaban terminadas o se ven gruas y camiones. En la versión que hicimos para las fallas sólo se mostraba una foto pero para la versión de hogueras tuvimos que hacer cambios para mostrar más fotos por ficha.

Podéis ver las fotos de las hogueras de categoría especial que hemos hecho para la web app de hogueras en mi cuenta de flickr. Las hice en 3 horas contrareloj para que tenerlas disponibles al día siguiente de la plantà.

Set en Flickr de las fotos para la web app

Set en Flickr Hogueras Alicante 2011

Podéis acceder a la web y los distintos enlaces (QR, página en Facebook, etc..) en el subdominio hogueras.comunitatvalenciana.com

¿En que plataforma planteo mi desarrollo?. ¿que métodos de monetización son los más adecuados?. ¿por que tipo de aplicaciones paga más el usuario? ¿que vías de promoción son las más efectivas? Como marca, ¿cual debe ser mi estrategia?…

IOS. Increible la relación entre dispositivos y mercado de apps

Lo social, rompiendo al ahora de promocionarse

Mobile web más dificil que ios, blackberry y android?uhmmm

Juegos y productividad, los más descargados

Nokia, Samsung y Lg, siempre en la tabla

Estas son algunas gráficas del informe. El informe en PDF lo podéis descargar en la web de Visiomobile:   Developer Economics 2011. How developers and brands are making money in the mobile app economy

Via: intomobile Developer Economics 2011: 67% of developers currently using Android and 59% using iOS

Si otras veces he comentado el proceso que hemos seguido en la agencia para crear un juego en Facebook (La Mascletá, Valencia Racing Team, La Tomatina, etc…), esta vez, para variar un poco, voy a explicar el proceso para crear la Guía móvil de Fallas de Valencia (Iphone, Android, etc..).

La Guía Móvil de Fallas de Valencia funciona en el subdominio fallas.comunitatvalenciana.com Si no se accede desde un móvil se mostrará una página informativa con una breve descripción, código QR y acceso a un simulador para ver los contenidos desde el navegador si no tienes un móvil a mano. El simulador se encuentra en fallas.comunitatvalenciana.com/simulador (no es compatible con IE, hay que usar Chrome, Firefox o Safari)

Simulador móvil vía web

El desarrollo de una web de esta temática, al tener una vida muy corta (su utilidad se limita unas fechas muy concretas), tiene que implementarse de la forma más ágil posible.

Lo primero a tener en cuenta, el contexto:  ¿que información le resultará útil a alguien en la calle, en las Fallas de Valencia y con un smartphone en la mano?

• Información sobre las Fallas de Valencia (información general, consejos, etc…).
• Listar las fallas con su localización usando mapas (Google Maps en este caso).
• Agenda de eventos geolocalizada.
• Poder verse de forma optimizada desde un iPhone/Android/Smartphone.

La información debía ser útil tanto a turistas como a la gente de Valencia. Un detalle importante a tener cuenta es que las fotos no iba a estar disponibles hasta “La Plantà” (el dia que montan las fallas en la calle), por lo que había que empezar usando los bocetos hasta tener las fotos “reales” de cada falla. Este pequeño detalle hacía necesario un gestor de contenidos (¿cuando no se necesita?) y que resultó más imprescindible aún ya que fueron unas fallas pasadas por agua y hasta un día antes de la noche de la “quema”

Cuando ya teníamos claros los elementos a incluir en nuestra webapp, empezamos con bocetos, mockups, etc..

Primeros bocetos de la Guía Móvil Fallas de Valencia

Los bocetos pasados a limpio con Balsamiq Mockups

Con los elementos sobre la mesa (requisitos técnicos, elementos a incluir, interfaz, etc..) podemos tomar decisiones sobre las herramientas y tecnología a utilizar:

• WordPress como CMS por la agilidad a la hora de gestionar contenidos y el amplio ecosistema de utilidades y plugins para el uso con móviles.
• jQuery Mobile como framework javascript para la adaptación del interfaz para móviles.
• Google maps para la geolocalización de las fallas y eventos.

Usar WordPress nos da  acceso a una inmensa cantidad de plugins con los que poder dar salida a cada necesidad de la webapp. De todos lo que utilizamos, estos son los más importantes:

• Mobile pack o WPtap Mobile Detector. para asignar el theme movil cuando se acceda desde móvil
• GeoMashup. Para la implementación de Google Maps a las fichas
• Magic Fields. Para la personalización de campos en las fichas de las hogueras y agenda
• qTranslate. Para gestionar los idiomas (castellano e inglés) qTranslate no me gusta usarlo en proyectos en el que importe el seo, pero en este proyecto era algo secundario.
• Theme Test Drive. Para mostrar de forma pública un theme y en el simulador una versión móvil adaptada para escritorio o facebook.

El diseño del theme se creó a partir de cero utilizando la librería jQuery Mobile. Aunque el desarrollo para móviles puede parecer más sencillo al disponer de menos elementos, hay que tener en cuenta la fragmentación de los dispositivos móviles y las distintas características de cada navegador. Muchas de las transiciones o efectos de jQuery Mobile funcionan de forma diferente en iPhone o en Android, limitacion del ancho de banda, etc…

Inicio con selección de idiomas y guardado en pantalla inicio

Página de inicio

Descripción de la Falla y subsecciones

Sección Guía con pestañas

Mapa de Fallas y Agenda geolocalizados

Los pormenores de todo desarrollo dan para 3 o 4 posts, así que lo voy a dejar aquí :)

La guía se puede probar en el simulador de la web pero lo mejor para verla de forma completa es usar un iPhone o teléfono con Android y visitar la guía:

http://fallas.comunitatvalenciana.com

Si tenéis alguna duda, ya sabéis dónde estoy ;)

A los que trabajamos con wordpress nos encanta ir guardando trucos y tutoriales por que sabemos que, tarde o temprano, nos van a sacar de un apuro. Unos los guardas en delicious, otros en marcadores, otros te los envías por correo y al final, en la vorágine del día día, se pierden… como lágrimas en la lluvia :)

Para evitar tener que ir de un lado a otro, voy a meter aquí los que más uso así los tengo a mano. Ya hice algo parecido con el post “Me guardo aqui la solución en WordPress a-: No tienes autorización para acceder a esta página “ que a fuerza de buscar una y otro vez lo mismo cuando me aparecía el error, publiqué un post y sabía en infonomada lo iba a localizar rápidamente :)

El único orden que van a seguir es que me todos me resultan útiles.

Plugins

Theme Test drive

Es el primer plugin que activo. Con Theme Test Drive podemos hacer que los visitantes vean un theme y nosotros , al estar logeados, otro distinto. Puedes activarlo por niveles (que solo lo vean de los editores hacia arriba, sólo lo administradores y los demás otro, etc…).

Se puede usar para todo: dejar un página con enlaces mientras modificas el theme, usar la versión para móviles al estar logeado mientras desarrollar sin depender del selector ni modificando el user agent, crear un simulador de la versión móvil para los usuario de escritorio (el simulador de fallas.comunitatvalenciana.com funciona con así), etc..

Plugin Theme Test Drive: http://www.prelovac.com/vladimir/wordpress-plugins/theme-test-drive

Magicfields

Desde la versión 3.0 de wordpress podemos crear Custom Post Types, que no son más que “tipos de contenido” a los que podemos añadir nuevos campos como Teléfono, dirección, nombre de lo que sea, etc… Antes lo podíamos hacer de varias formas: añadiendo los campos personalizados en cada post, creando un pequeño plugin que mostrara los campos en el post (lo mismo de antes pero más sencillo) o usando un plugin que se encargaba de todo como Magic Fields (es un fork de Flutter) o ahora, Custom post type ui Por agilidad sigo usando Magic Fields y en algunos casos, me trabajo los custom types a mano. Pero me da bastante pereza..con lo fácil que es usar Magic Fields.

Un buen tutorial para cear tus propios Custom Post Types: Create your first WordPress Custom Post Type de Carsonified Plugin Magic Fields: http://magicfields.org/ Plugin Custom post Type Ui: http://wordpress.org/extend/plugins/custom-post-type-ui/

Mobile Pack

Cuando creas un versión de la web adaptada para móviles, necesitas un switcher, un detector que le muestre navegador de escritorio la versión normal y al móvil una optimizada para ese dispositivo. El plugin que más me ha gustado (aunque tiene un montón de opciones que no utilizo) es mobile pack. El plugin te permite seleccionar un theme para la versión móvil detectando el navegador o por subdominio (m.tudominio.com). Otro plugin interesante es WPtap , con el también podremos enviar a otras página en base al tipo de navegador.

Plugin Mobile Pack: http://wordpress.org/extend/plugins/wordpress-mobile-pack/ Plugin WPtap: http://www.wptap.com/index.php/plugin/

GeoMashup

Si quieres crear mapas con todos tus posts y trastear con google maps, te recomiendo GeoMashp. Con GeoMashup puedes geolocalizar tus posts (o páginas) y mostrar mapas por categorías, por tags.. vamos por lo que se te ocurra. La página de documentación es bastante completa, pero como siempre, te tocará hacer muchas cosas a mano :)

Plugin GeoMashup: http://code.google.com/p/wordpress-geo-mashup/ ¿Ya está?. Si queréis más plugins, probad en estos listados:

Essential Plugins for Every WordPress Installation

20 Incredibly Useful WordPress Plugins

Top 20 Plugins To Extend WordPress CMS Capabilities

10 of the best WordPress contact form plugins to choose from
(este último un poco antiguo, pero sigue siendo útil)

Trucos y Hacks

¿Y esos códigos que utilizas una y otra vez?. Aquí van algunos:

Como añadir un Custom Menú a tu theme.

No todos los themes vienen preparados para gestionar menús. Con un simple código en el fichero functions.php y otro en el theme, puedes utilizar todo el poder de wordpress (y sencillez) para crear menús y reordenar las secciones como quieras. Primero: añadir a tu fichero functions.php (si no lo existe lo creas en la carpeta de tu theme) el siguiente código:

add_action(‘init’, ‘register_custom_menu’);

function register_custom_menu() {
register_nav_menu(‘custom_menu’, __(‘Custom Menu’));
}

Segundo paso: añadir el código correspondiente en tu theme:

<?php wp_nav_menu(array(‘menu’ => ‘custom_menu’)); ?>

Cuando tu theme soporte añadir menús, ya puedes usar este tutorial que te explica de forma sencilla como añadir enlaces: Custom Menus en WordPress Esta es la forma más sencilla :)

Os recomiendo el post de Thinkvitamin Getting Started with WordPress Custom Menus

Usar un fichero single.php en base a la categoría

A la hora de crear themes, podemos asignar distintos diseños a las categorías usando los ficheros category-ID.php (siendo ID el id de la categoría o su nombre). Si no existen, wordpress usa category.php, pero si coincide el id o nombre con algún fichero, wordpress lo usará. Y con single.php, ¿pasa lo mismo?. No, sólo cuando usas Custom Post Type puedes usar single-TIPOPOST.php En realidad, no hace falta crear un tipo de contenido. Con un simple código añadido a functions.php pudes usar el ID de la categoría en el nombre del fichero para usar distintos ficheros single.php por cateogoría (uno para noticias, otro para agenda, otra para ficha, etc…)

Tienes que añadir a tu fichero functions.php el siguiente código:

add_filter(‘single_template’, create_function(‘$t’, ‘foreach( (array) get_the_category() as $cat ) { if ( file_exists(TEMPLATEPATH . “/single-{$cat->term_id}.php”) ) return TEMPLATEPATH . “/single-{$cat->term_id}.php”; } return $t;’ ));

Me parece algo tan básico que puede ser que ya lo hayan implementado en las últimas versiones. De hecho, lo tengo de un post bastante antiguo, pero a mi siempre me funciona :)

Post original: WordPress Single Post Templates Tengo otro por ahi que modifica como se “pinta” la galería, otro que escala, etc… estos dos los uso siempre. Al igual que con los plugins, hay muchos listados con trucos y código bastante útil. Aquí van más listados:

En castellano, imprescindible ayudawordpress.com

25+ Extremely Useful Tricks for the WordPress Functions File

55+ Most Wanted WordPress Tips, Tricks, and Hacks

wpbeginner.com

Top 10 WordPress Hacks of All Time

10 Useful RSS-Tricks and Hacks For WordPress (para trastear con rss)

CatWhoCode Blog con trucos y códigos para wordpress. Imprescindible

WpRecipes. Otro blog con trucos, plugins, etc…

El ecosistema de wordpress es inmenso y si tienes un problema o necesitas un plugin que haga algo en concreto, seguro que hay alguien ha pasado por lo mismo y lo ha solucionado.

Foto: http://www.killmydaynow.com/2010/04/animal-humor-pictures-part-5.html

Me gustaría compartir con vosotros dos intersantes artículos sobre desarrollo web: Course: Design for Startups, de Paul Stamatiou y Are Your Development Skills Hindering Your Design Work?

En Crash Course: Design for Startups, Paul Stamatiou (desarrollador web de San Francisco), nos cuenta todo el proceso que sigue a la hora de crear una web y por el camino nos va dando consejos: (es una traducción libre para que os  leais el artículo)

• Lo primero a tener en cuenta es tu audiencia: Quién, Qué, Dónde, Cuando y Por Qué
• Toma un pantallazo de tu web o diseño y hazlo 3 veces más pequeño. ¿Puedes ver el titular principal o los botones de llamada a la acción? No?. ¡Pues hazlos más grandes!
• Utiliza algún programa para organizar tus capturas de interfaces que te gustan o detalles gráficos que quieres tener a mano. Sé organizado.
• Examina sitios con distinta estructura y valora que es lo que quieres destacar de tu web
• Empieza a bocetar los esquemas de tu web ya sea a boli, lápiz, un programa de mockups o directamente con photoshop (o gimp, no vamos a pelearnos)
• Haz 2 o 3 estructuras simples, no más de 20 minutos y empieza el diseño.
• Empieza el diseño en escala de grises para ver la distribución sin que interfiera el color.
• No dejes de experimentar con colores y tipografía hasta el final.
• Empieza a aplicar una sencilla guía de estilo y patrones para usar en todo el sitio: botoneras secundarias, elementos comunes, páginas de formularios, contacto, login, etc…
• Testéala con gente de tu entorno y aplica los cambios.

Esta claro que “cada maestrillo tiene su librillo”, pero aparte de mostrarnos su forma de trabajar, nos regala un completo listado de lecturas y recursos relacionados con el diseño.

Ahora, a leer Crash Course: Design for Startups en su página personal paulstamatiou.com

El segundo artículo es Are Your Development Skills Hindering Your Design Work? (¿Tus conocimientos como desarrollador está dificultando tus diseños?)

En un mundo ideal, el diseñador diseñaría, el programador programaría y el cliente pagaría :) En una empresa “pequeña”, uno tiene que hacer de todo un poco y como freelance, ni os cuento: html, css, javascript, php, wordpress, drupal.. y lo que venga.

En el artículo, Jeff da un repaso a distintas situaciones en las que los conocimientos técnicos son una ventaja y otras en las que no, con apartados como: ¿Cuanto “controlas” de CSS&HTML? o Diseñar para gestores de contenido

Saber que posibilidades nos ofrece CSS3&HTML es imprescindible, y en el desarrollo para móviles aún más. La mayoría de smartphones soporta css3, con lo que podemos ahorrarnos bastante photoshop y utilizar degradados, bordes redondeados, sombras, transparencias, diseñar textos con “golpe”, giros, etc.. En el caso de los navegadores de escritorio, seguimos tiendo la limitación de nuestro amigo IE, por lo que nos podemos ir olvidandonos de estas propiedades :(

En algunos casos esta falta de conocimientos técnicos limita a lo que puedes “atreverte” (lo he visto en muchos diseñadores de papel que han empezado a hacer webs) o en caso contrario, el conocimiento técnico te hace caer en una espiral de “perfeccionismo” o adaptación que te podrías ahorrar si no lo supieras hacer :)

No recuerdo cómo he llegado a estos artículos, pero han pasado a engordar mi listado rss de blogs y clasificados como “imprescindibles”

Enlaces:

• Crash Course: Design for Startups
• Are Your Development Skills Hindering Your Design Work?
• 5 Photoshop & CSS Tricks for Killer Web Designs

“Un hombre no puede bañarse dos veces en el mismo rio. Pues la segunda vez, el rio ya no es el mismo. Como tampoco lo es el hombre” Las puertas de Anubis (cita de Heráclito)

Hace 3 años empezé mis andaduras en Grupo Skala gracias a Javier Jimenez (internetyturismo.com), pero da la sensación de que ha pasado una eternidad: cambios de personal, estructura, jerarquías,etc…, pero ya no sólo por un tema de gestión interna, sino que ha cambiado todo el sector y la estructura de las agencias. Mi compañero Gabriel hace unos días también lo mencionaba en su blog: Crisis y Cambio

Comentabamos estos cambios con Jesus Lopez (ex-compañero) y su compañero de la UA Juan Montserrat quien nos confirmó que al explicar la estructura de las agencias de publicidad a sus alumnos, les advertía que esos datos a día de hoy no podían ser correctos (tampoco incorrectos). Todo ha cambiado y estoy seguro que el cambio es beneficioso. Siempre lo son.

En la oficina solemos ponernos charlas de fondo en lugar de música (cuando se puede) y de las más recientes, quiero compartir la de Fernando de la Rosa en el Iniciador de Barcelona en la que habla de ROI, cambios en las agencias de publicidad, marketing online, etc… (a @gabicuesta y a mi nos encantó ) Fernando de la Rosa en el Iniciador de Barcelona

Hay dos tipos de personas.. las que esperan que todo vuelva a ser como antes y las demás. No seas de las primeras :)

Como ya comenté por Twitter a principios de mes me robaron el iPhone 4.

Mira que soy cuidadoso con el móvil (que si carcasa, que si pantalla hacia abajo para que no le caiga nada..) pero un pedazo de desgraciados amables amigos de lo ajeno me lo quitaron del bolsillo de la chaqueta mientras esta estaba colgada en el respaldo de una silla.

Llamadme maniático, pero aunque estaba muy contento con el aparato, no me gastaría dos veces el dinero en él.

¿Que opciones quedan?. La verdad, ultimamente están saliendo al mercado dispositivos con unas características que si no espabila Apple con el iPhone, le van a comer más terreno del que le gustaría.

Samsung está haciendo movimientos muy intersantes: Galaxy S, Tablet Galaxy TAB.. y ahora ha dado un golpe en la mesa con el Galaxy S II y unas características que asustan:

• Pantalla de 4.3 super Amoled
• Cpu dual core a 1Ghz
• Cámara de Mega pixels
• Grabación de video a 1080p
• Diseño extrafino
• Chip NFC (para pagos y autentificaciones)

Ahora queda ver a que precio lo ponen los operadores :)

Parezco el más pequeñico de la mesa, pero es un efecto óptico :(

Como muchos sabréis, actualmente trabajo en Grupo Skala, agencia especializada en marketing turístico de Alicante. El último en unirse a nuestro equipo  es todo un crack del SEO y la analítica: Javier Gosende.

Javier va a encargarse del SEO del 3º portal turístico de España: Comunitatvalenciana.com

Para los que no le conozcáis, un breve resumen:

A lo largo de su trayectoria profesional Javier Gosende ha realizado trabajos de consultoría y posicionamiento de portales web de grandes empresas internacionales como Portal de Empresas y Profesionales de Microsoft, el portal de turismo Spain.info, Navactiva, Desarrollo Web, Winred, Webtaller y el ICEMD, entre otras. Además Gosende fue socio fundador de la consultora Human Level Communications. Es co-autor junto a Fernando Maciá de uno de los libros de referencia sobre SEO en castellano: Marketing Online 2010. Estrategias para ganer clientes en internet

Ver post en el blog de Grupo Skala

Mi compañero Gabriel Cuesta le ha hecho una pequeña entrevista:

Un experto en SEO, SEM y analítica del que esperamos aprender todo lo que podamos :)

Enlaces:

• Grupo Skala comienza su colaboración con Javier Gosende – Blog Grupo Skala
• Javier Gosende. Experto en SEO, SEM y analítica
• Libro Marketing Online 2010. Estrategias para ganer clientes en internet