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.

• Subtle Patterns | Free textures for your next web project –
• 10 Websites to Download Free Fonts: | Concept Dezain –
• “Desnudando” a Google con infografías : Marketing Directo –
• Cortometraje "La Entrevista" NotodoFilmFest.com / Home / Ficha / 31150 – Cortometraje "la entrevista" sobre la realidad laboral en España
• Crear una empresa en 3 horas por 71 euros | Desencadenado –
• Psicoanálisis de la fotografía | Cultura | EL PAÍS –
• Guide to Website Navigation Design Patterns –
• 5 Signs of a Great User Experience –

Itunes se  está convertido en una fuente imprescindible de tutoriales y cursos de programación para dispositivos móviles. Con una simple búsqueda “iphone development” hay cursos para entretenerte una vida entera.

A los conocidos cursos de Stanford “iPad and Iphone development” , “Advanced iPhone Development” del Madison College  podemos añadir el nuevo “Developing iPad Applications for Visualization and Insight” de la universidad Carnegie Mellon

Podéis ver más información sobre el curso en hci-ipad.org

En castellano tenemos el conocido podcast que habla de programación en Cocoa (osx, iphone, etc..) 85% Cocoa, de José A. Lobat

Será por tutoriales…

• Guide to Website Navigation Design Patterns –
• 5 Signs of a Great User Experience –
• Addictive UX: Why Pinterest Is So Dang Amazing | Design Shack –
• Improve The User Experience By Tracking Errors – Smashing UX Design | Smashing UX Design –
• HTML5 Please – Use the new and shiny responsibly – Que puedes utilizar, compatibilidad, etc… Imprescindible
• Face detection in images using PHP –
• JQ.Mobi Is A Mobile-Optimized HTML5 Rewrite Of the JQuery Framework –
• Site Shows Of The Future Of Responsive Design –

Cada vez hay que tener en cuenta más disciplinas a la hora de desarrollar una web (lenguajes, frameworks, css3, html5, responsible design, desarrollo móvil…), pero también disponemos de mucho más material gratuito para aprender y poder avanzar en cualquier disciplina por nuestra cuenta.

En tripwiremagazine han recopilado 35 ebooks gratis sobre diseño y desarrollo web  y que abarcan desde  creatividad, uso de tipografías hasta el gestión con CMS:

35 Useful and Free E-books for Web Designers

Otra web imprescindible es OpenLibra, sección de ebooks libres de EtnasSoft en la que también van recopilando todo el material libre sobre desarrollo y programación web: OpenLibra de EtnasSoft

En la página oficial de Android han publicado una guía de diseño de aplicaciones para Android muy completa: Android Design

• Principios de diseño para Android
• Diseño UI
• Patrones de diseño
• Tipografía (pobre comparándola con el ipad o iphone)
• Barras de navegación
• Diseño de iconos
• Resoluciones
• Tamaños mínimos a la hora de diseñar botones
• Tabs
• Listados
• Scrolls

Así como enlaces a la documentación del SDK, tutoriales, etc… Buen punto de partida a la hora de diseñar y crear aplicaciones para Android.

Cómo usamos nuestras tablets

Sencilla infografía sobre el uso que le damos a las tablets, número de usuarios, etc… How we use our tablets (Infographic)

Cómo testear aplicaciones para móviles sin arruinarte :)

Tanto si desarrollas webapps como aplicaciones nativas para móviles, necesitas testearlas en el mayor número de dispositivos. En este post, Brad Frost reune conesejos y recursos para no perdernos entre tantos dispositivos: Test on Real Mobile Devices without Breaking the Bank

De postre, Resources to Hack Design

Post de Jamie Davidson (jamie-davidson.com) con muchos recursos sobre diseño web, css3, layouts, patrones de diseño, tipografía en el diseño web, iconos y bancos de imágenes, galerías, tutoriales: Resources to Hack Design

Con esto creo que tenéis para ir tirando el fin de semana :)

Interesantísimo el informe de Nngroup sobre usabilidad en aplicaciones y webs optmizadas para iPad:

Usability of iPad Apps and Websites: 2 Reports With Research Findings

En el informe analizan aplicaciones de noticias, de compras, las comparan con las webapps, uso de los gestos, tamaño de los elementos de interacción, diseños de listados, comportamientos.

Un informe imprescindible. Y gratis :)

Enlaces:

• Usability of iPad Apps and Websites
• Otros informes de Nngroup

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%

• Kevinjohn Gallagher .com :: Responsive Design is Irresponsible « « KevinjohnGallagher.com –
• Desarrollo en Android | sgoliver.net blog –
• Reparar un Monitor de Ordenador por Menos de 1 euro | BlogSOStenible··· – – – ··· – – – ··· – – – ··· – – – ··· «Otras» noticias, y «otra» forma de pensar… –
• WordPress Essentials: The Definitive Guide To WordPress Hooks –
• Joaquin Sevilla Moróder: Tipos de empleo, piratas y escritoras –
• Orientation to Android Training | Android Developers –
• 10 great Google Analytics walkthroughs | Econsultancy –
• Best Web Metrics / KPIs for a Small, Medium or Large Sized Business –

• Claves para el éxito en social media: estrategia, formación y herramientas adecuadas | Blog de Marketing Online de Tristán Elósegui –
• 40 Beautiful Free HTML5 & CSS3 Templates –
• Useful WordPress Tricks to be Like a Pro – Truquillos para ser una ninja de wordpress :)
• Una docena de tipografías de redes sociales | una docena de –
• 40+ Useful and Fresh jQuery Plugins –
• Dieter Rams: ten principles for good design –
• Remembrance Day 2011: Haunting pictures of the Great War’s battlefields | Mail Online – Paisajes actuales de batallas en la Segunda Guerra mundial
• Asynchronous UIs – the future of web user interfaces –

Tenía ganas de aplicar media queries en algún proyecto, pero como la montaña no venía a mahoma, mahoma va a la montaña. Osea, que necesitaba algún ejemplo en que practicar y se me ocurrió hacer un lector de tweets (que original!) para el iPad a modo de web app.

También quería practicar un poco de jQuery ya que aparte de tocarlo para modificar galerías, sliders e interacciones sencillas, no había tenido la oportunidad de encontrarme con problemas que solucionar, que es como se aprenden las cosas: a base de golpes.

¿Para que sirve tweeTablet?  Ahora mismo, para poco salvo para haber practicado con media queries, css3, diseño de interfaz para el ipad y aprender un poco de jQuery.

Podéis jugar con en ejemplo en: www.tweetablet.com (desde iPad)

El funcionamiento es sencillo:

• Entras a tweeTablet.com desde el iPad (Desde el firefox peta por todos lados. En chrome un poco menos)
• Buscas una palabra, hashtag o por cercanía mediante geolocalización.
• Arrastras los usuarios que quieres seguir más de cerca a la pestaña lateral
• Y ya está, por que no hace nada más :)

Técnicas aplicadas en el ejemplo:

Media queries.

No son más que unas condiciones que se aplican a los css para que use unos css u otros en base al tamaño del viewport, orientación, etc… En el caso de la barra de herramienta,  cambia de orientación a  horizontal al usar la app en vertical o a vertical al usarla en apaisado. Buscaba la mayor superficie útil en la aplicación, ya que entre barra de direcciones, pestaña y barra de herramienta, se comía mucho espacio. Ahora sólo encaja bien en iPad, pero al principio también lo hacía en el BqVerne de 7″ y 800*600, pero por unos errors y simplificar el código, lo quité. Total, tampoco funcionaba el Drag&Drop

jQuery

En otros proyectos como la guía móvil para las Fallas de Valencia o guía móvil para las Hogueras de Alicante, había usado jqueryMobile como framework, pero las líneas gráficas no me encajaban con el diseño que quería para el iPad, así que no lo usé esta vez. En lugar de eso fuí añadiendo distintos plugins a jQuery para conseguir lo que necesitaba y de paso intentaba comprender como usar jQuery de verdad. Lo mejor en este caso sería usar un framework que ya ofrezca toda empaquetado (y compatible!) como SensaTouch o buscar otro framework más adecuado, pero quería hacerlo por la vía puzzle :). También quería aprender como se trataban los datos por json, formatearlos, guardar cookies, utilizar drag and drop, scrolls táctiles, etc… La forma de obtener los tweets es la más básica, sin autentificación ni nada. Por eso no puedes reponder ni seguir ni hacer las tipicas operaciones de un cliente de twitter.

Diseño UI para el iPad

El iPad es mucho más goloso que los móviles a la hora de diseñar: más pantalla, interfaz táctil, etc…  El diseño en parrilla o galería me sirve para poder seguir hashtags en eventos, cotillear lo que va diciendo de una palabra, etc… A veces es complicado seguir algunos hashtags por la cantidad de tweets y no quería estar haciendo scroll continuamente, así que de esta forma le puedes echar un ojo. Salvo los logos e iconos, los demás efectos los he aplicado con css3, que permite liberar a photoshop de la mayoría de trabajo: sombras, bordes redondeados, degradados, etc…

Como se ve en el video, no se puede llamar ni beta ni alfa, es.. mega-hiper-super alpha :D

Unas pantallas de ejemplo:

Posicion vertical y barra de herrmientas arriba

Si la orientación es apaisada, la barra se mueve a la izquierda para ganar espacio

Pestaña para arrastar a los usuarios que quieres seguir de cerca

Sombras y degradados con css3

Pantalla general en apaisado con la pestaña desplegada

Problemas.

• Al avanzar me di cuenta de que había un gran error. Por querer que las capas “fluyeran” y la pestaña empujara a la galería pasando de filas de 3 items a filas de 2, se cargó el sistema que parecía tan funcional de Pinchar y arrastrar. Al arrastrar no pasa por encima de la pestaña, lo hace por debajo. Glups!
• El scroll no tiene aceleración. Esto es por que chocan el pichar y arrastrar con el scroll. El sistema no sabe que quiero hacer. He intentado anular el scroll cuando intento arrastar, pero no me sale bien. Todo deja de funcionar..el drag y el scroll. Necesito practicar más :)
• La pestaña no funciona si lo usas como una App móvil de facebook. Al fina del video se ve lo que pasa. Se queda un poco pillado. Puedes probarlo buscando “tweetablet” desde la app de facebook para ipad.
• Si giras el dispositivo con la pestaña abierta, se va todo al traste. Otra cosa a mejorar.
• No funciona en Android. Bueno, he conseguido que vea bien en mi bq Verne de 7″, pero el drag no va. quizás en otro dispositivo funciona, pero no lo he podido probar. Tengo que ir al Corte Ingles y probarlo en su zona de betatesters :)
• Al principio guardaba los preferidos con cookies, pero lo anulé. Lo tengo que volver a aplicar.

Sin la necesidad de scroll el sistema funcionaría mejor. El sistema de arrastar y soltar sobra la zona de “preferidos” lo podéis aplicar en muchas entornos: eligiendo ropa, zapatos, gadgets, seleccionando fotos, etc… y el iPad es un dispositivo que se presta a ello, el gesto de arrastar es natural en él.

Recursos

El ejemplo que me sirvió de referencia fue este tutorial: A jQuery Twitter Ticker Usé la forma que obtener tweets y lo adapté para el sistema que quería montar. Con eso, un poco de media queries, otro poco de css3, unas librerías jquery y listos. En un par de tardecitas está hecho. Lo que más tarda, como siempre, son los ajustes visuales.

Un buen punto de partida para entender las media queries es el artículo de A list Apart: Responsive Design

Ahora, a seguir practicando jQuery.

• Pagination Gallery: Examples And Good Practices – Smashing Magazine –
• The Anatomy of an Effective Homepage –
• aaron hobson || c i n e m a s c a p e s – Galería de fotos tomadas por el coche de Google Street View
• What Is User Experience Design? Overview, Tools And Resources – Smashing UX Design –
• 75 libros gratis para descargar sobre Social Media y Redes Sociales | Social BlaBla –
• Un viaje con Richard Stallman (esa persona) « Ricardo Galli, de software libre –
• iOS Fonts – Tipografía disponible en el iphone y ipad
• 10+ Jquery File Upload Plugins for web developers –

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)

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

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:

• Curso de gestión de redes sociales en la empresa
• Profesorado del curso