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.

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…

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 :)

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.

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

Utilizando estas propiedades te puedes ahorrar photoshop para casi todos los efectos visutales “2.0″ ya que el propio navegador ya los soporta: bordes redondeados, opacidad, sombras, degradados, etc… con las ventajas de carga en los dispositivos móviles y en agilidad de el desarrollo:

Visto en Oneextrapixel: Quick look into css3 propierties

Al conectar el monitor me he encontrado con dos problemas: que el Macbook detectara el monitor y funcionara a 1920×1080 e intentar aprovechar la ventajas de un monitor panorámico.

La primera no fué tan fácil, de hecho estaba pensando cambiarlo por otro más pequeño ya que sólo funcionaba a 1400 o 1290 de ancho. Después de leer y leer consultas, vi que mucha gente se hacía la misma pregunta: Cual es la resolución máxima que sale por la VGA de un Macbook?.

En las respuestas se habla de utilidades, chipsets de los diferentes macbooks, etc… pero no encontré una respuesta clara.

Pero..se me había olvidado hacer lo más básico, reiniciar la Ram de Parámetros:

• Reiniciar
• Rápidamente, pulsar a la vez comando+alt+p+r (reinicia la ram de parámetros..como la bios vaya)
• El ordenador hará el sonido de reniciar pero tienes que mantener las teclas pulsadas hasta que el sistema lo haga unas 2-3 veces.
• Levanta los dedos y deja que el sistema se inicio de forma normal

Ahora ya detecta el monitor a su su resolución máxima (1920×1080)!

Una vez tenemos el monitor funcionando correctamente, tenemos otro problema: ¿cómo podemos aprovechar toda la superficie útil del monitor?

Hay programas que si aprovechan las características de estos monitores: editores de vídeo, retoque de fotografía, etc… pero en la mayoría de programas desaprovechamos casi el 30% de la pantalla.

Para ello podemos utilizar programas como SizeUp en OS X o si usas windows, WinSplit Revolution. Seguro que hay otros. Si conocéis alguno, dejadme un comentario para que lo pruebe y amplíe el post.

Con estos programas se crearán unas zonas “calientes” a las que las ventanas se ajustarán y podremos separar el monitor en varias secciones.

Ejemplos de uso: un navegador en la izquierda y un editor de texto en la derecha, un navegador en la izquierda y el editor de código al otro lado, una charla en un lado y un excel en el otro, etc….

Las ventanas se pueden ajustar por cercanía o usando un atajo de teclado. Podrías ahorrarte el uso de las aplicaciones y mover a mano las ventanas hasta que encajen como tu quieres, pero usándolas ahorramos tiempo y no nos limita de ninguna forma ya que podemos seguir ampliando las ventanas a pantalla completa si lo necesitamos.
SizeUp para OSX

WinSpli Revolution:

Enlaces:

• Winsplit Revolution (para windows)
• Sizeup (para OS X)

Cuando Josep me comentó que iba a montar unos cursos en Elche, acepté sin pensarlo. Hemos coincidido laboralmente con algún cliente y por suerte, es de las personas ( y agencias) a las que precede su profesionalidad.

Los cursos-talleres van a extenderse durante Junio – Julio:

• Desarrollo de juegos y aplicaciones interactivas multiplataforma (PC, Mac, web, iOS, Android) con Unity3D.
  Sábado 10 septiembre. Jordi Linares
• Buen diseño es buen negocio: diseñar para el mejor e-commerce. Sábado 18 junio. Javier Cañada
• De la imagen fija a la web adaptable: Técnicas de maquetación avanzadas. Sábado 25 junio. Sergio Ruiz
• Descubriendo Ruby on Rails. Sábado 2 julio Paco Benavent
• Analítica Web: El arte de medir. Sábado 23 julio. Gemma Muñoz
• Crea tu página en Facebook usando WordPress. Sábado 16 julio. Pablo Angeletti

Si pudiera me apuntaría a todos:) Menos al mío, que ya se lo que me va a contar ese Angeletti

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

http://www.flickr.com/photos/hellvetica/3339981706/

Estoy ordenando mis cuentas en distintos servicios sociales y una de las primeras ha sido la cuenta de twitter @infonomada. Ir creando cuentas con el nombre “infonomada” para asociarlos con el blog tenía gracia en un mundo anterior al boom de las redes sociales. Ahora todo es diferente y usar un pseudónimo es muy de los 90′s, de la época del IRC :)
Por esta razón voy a empezar a usar mi cuenta de twitter @angeletti de forma personal (e intensiva), dejando mi cuenta actual @infonomada para temas relacionados con el blog.

Lo que más me preocupaba del paso era mantener mis listas, gente a la que sigo y en último lugar, mis followers y para ello he seguido estos pasos (por si os sirve la experiencia):

• Entras en tu cuenta de twitter  en un navegador (vamos a llamarle Navegador A) con la cuenta (en este caso, @infonomada)
• Abres otro navegador o Google Crome con una ventana “incognito” en la que puedas estar logueado en otra cuenta (Navegador B para los amigos)
• Te identificas en la otra cuenta, en este caso, @angeletti
• Vuelves al otro navegador (navegador A) con la primera cuenta (@infonomada) y cambias el nombre por otro libre..por ejemplo @infonomadaBAK y guardas el cambio (te pedirá el password)
• Rápidamente cambias al navegador B y cambias el usuario por del navegador A . En mi caso cambié @angeletti, que estaba ya en mi poder pero no usaba, por @infonomada.
• Vuelves al navegador A y en cambias el usuario @infonomadaBAK al otro usuario, que en mi caso era @angeletti

¿Con esto que hemos conseguido?. Que toda la configuración que tenía en @infonomada ahora la tenga en @angeletti y al contrario. Hemos pasado @infonomada a @angeletti y la anterior de @angeletti a @infonomada :)

Ahora, para seguir mis twitts, la nueva cuenta es @angeletti
¿Eso quiere decir que @infonomada no la voy a usar?. No, de hecho muchos de los twitts también los canalizaré por esta cuenta, pero la que más voy a usar a es la relacionada con mi nombre :)

Sígueme en twitter.com/angeletti

Foto: http://www.flickr.com/photos/hellvetica/3339981706/