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…

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

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

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

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

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

A la hora de facilitar el acceso a la información de un destino turístico desde dispositivos móviles (iPhone, Android, etc..), nos podemos encontrar con el siguiente dilema: ¿creamos una versión de la web optimizada para móviles en HTML5 o una aplicación nativa que corra en el dispositivo?

Mucha gente se hace esta pregunta, pero antes, hay que tener claro que le vamos a pedir a la aplicación: ¿Que quiero que haga la aplicación? ¿Va a tener información general geolocalizada? ¿realidad aumentada? ¿Se puede usar sin conexión?

Viendo muchas de las aplicaciones en la categoría “Turismo”  disponibles en la App Store o el Market de Android, el 95% de ellas podría ser una web app:

• Aprovechan poco o nada el acceso a las características nativas del teléfono (cámara, giroscopios, almacenamiento de datos, etc…)
• No se puede utilizar sin conexión (¿para que descargarla entonces?)
• Y lo peor.. un número de instalaciones casi marginal. (lo del número lo podemos saber en el market de android por que la App Store no te indica las instalaciones ni de forma estimativa)

Si a los problemas anteriores unimos la diversidad de plataformas disponibles ( iOS, Android, Blackberry, Symbian y sus distintas versiones..), la respuesta está clara: salvo que uses Realidad Aumentada u otra tecnología que no soporte el navegador, la mejor manera de facilitar el acceso a la información es creando una webapp en HTML5 y de paso nos saltamos las  peculiaridades o limitaciones de los Market y aprovechamos todo el tráfico que la web principal nos puede traer para que la versión para móvil sea verdaderamente útil.

Algunas ventajas de usar una Web App:

• Acceso universal: Se puede acceder desde iPhone, Android, Blackberry y con algunos retoques, symbian en sus versiones antiguas.Mientras más recursos se le dediquen, más compatibilidad con otros dispositivos.
• Disponibilidad de frameworks que nos van a proporcionar el “look and Feel” de una aplicación nativa: Transiciones, efectos visuales, popups, etc..
• Actualizaciones inexistentes. No hace falta subir la última versiuón al market ni que el usuario tenga que descargar nada: la versión disponible online siempre es el última.
• SEO y Analítica. Estamos hablando de una web, por lo que todos los conocimientos y técnicas SEO también las podemos aplicar en nuestra webapp.

…pero una aplicaciones nativa también tiene sus ventajas:

• Rendimiento. Al ejecutarse de forma nativa podemos optimizar la respuesta a la interacción del usuario.
• Acceso a todos los recursos nativos del dispositivo: cámara, giroscopios, almacenamiento, integración con otras apps, etc.. (HTML5 también puede acceder a los recursos)
• Look and Feel nativo del dispositivo.
• Acceso a la información offline. En HTML5 ya podemos acceder a datos offline, pero es un poco más complicado

Si navegamos por la App Store o Market de Android, casi todas las apps de este tipo siguen la misma estructura:

• Noticias
• Guías
• Fotografías
• Monumentos y directorios geolocalizados

¿Podemos hacer todo ello sin necesidad acceso a los recursos nativos del dispositivo? Creo que si :) (incluso twitter ha creado una webapp en HTML5 de su plataforma)

Si, una versión web optimizada para móviles no es tan “cool” como una aplicación en el market. Pero chico, con 50-100 instalaciones o 500-1000, creo que a muchos “lo cool” les ha salido un poco caro. Cualquier versión móvil, por muy mala que sea, consigue más tráfico.

Que los smartphones dispongan de un navegador que soporta HTML5 nos da la posibilidad de usar muchas de las características a las que antes sólo se tenía acceso desde una aplicación nativa. Sólo hay que poner sobre la balanza las ventajas e inconvenientes de cada opción.

Os dejo un video de la conferencia Google I/O 2011: HTML5 versus Android: Apps or Web for Mobile Development? en la que se muestran de forma muy clara los recursos del dispositivo a los podemos acceder desde HTML5:

Algunos enlaces:

• Native App vs. Web App: Which Is Better for Mobile Commerce?
• HTML5: The Next Internet Goldrush
• Coping with Over Four Hundred Devices: How Netflix Uses HTML5 to Deliver Amazing User Interfaces

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

Cuando una agencia de publicidad subcontrataba el desarrollo web por que “ese no es nuestro negocio”, estaban cavando un poco más y preparando su propia tumba. Detras de muchos de esos “outsourcing” no había más que comodidad: ¿Por que otra empresa podía desarrollar el trabajo por un precio que para tí no era asumible?. Quién lo estaba haciendo mal, ¿el o tú?

Si alguien dice que su empresa “hace xxxx o zzzzz”, la siguiente pregunta es lógica: ¿lo haceis vosotros o subcontratais?

- …Si, también hacemos aplicaciones en Facebook..

- ¡Qué interesante! ¿Que aplicaciones habéis hecho?

- Bueno… hemos creado una página..y tenemos un proveedor que…

- Ahhh…

Si estas al final de la cadena (cliente) no importa, pero si estas en el medio, es vital saber las habilidades y conocimientos de tu proveedor. Muchas agencias olvidaban que no son más que una empresa de servicios, y  si el mercado te pide servicios que no puedes desarrollar y tienes que contratarlos fuera, temporalmente puedes capear la situación, pero a la larga,  no ha funcionado. Sólo hay que ver la cantidad de agencias que en Alicante se han quedado bajo mínimos o simplemente, han desaparecido.

Al subcontratar te llevas un dinero por la gestión, algo que no está nada mal, pero… ¿quién ha aprendido a hacer el trabajo? La agencia que subcontrata no, desde luego. En contraposición vemos como los “proveedores” que hacían el “trabajo sucio” y que ahora tienen el conocimiento de cómo se hacen las cosas, en época de crisis, son los que mejor están soportando el tirón. Y quedándose con los clientes.

En un mundo en el que todos queremos saltarnos pasos para abaratar costes y la competencia está dos clicks de distancia, los intermediarios que no aportan ningún valor a la cadena tienden a desaparecer.

Cuando quieres afinar un mecanismo, las ruedas que no giran, frenan.

..Tras unos años en el mundo del desarrollo de software, acostumbrado a proyectos gestionados en cascada y con roles con responsabilidad determinada, en un proyecto con un proveedor de outsourcing comienzo a oír la palabra “Scrum”. Nos encontrábamos embarcados en un proyecto “bicicleta”, se habían recortado funcionalidades para poder entrar en costes, pero el lado comercial era un coladero de funcionalidades con poca comunicación con la parte técnica. La parte técnica  era la que estaba involucrada en el proyecto junto con el proveedor. La toma de decisiones con el cliente llegaban a la parte técnica del proyecto con “Es que hay que hacer esto porque se lo hemos dicho al cliente…”

Aunque el acceso a los jefes de proyecto y de área era muy lineal, al final a la hora de exigir responsabilidades cada uno se mantenía en su escalón aunque aguantábamos la carga general conjuntamente. Estábamos obcecados en tener un control excesivo del proyecto, notábamos falta de control y comunicación. El intentar cerrar el acuerdo con el cliente a base de contratos, el recurrir a la oferta y al contrato con el cliente para defender batallas internas de responsabilidades de la perdida que estaba generando el proyecto se estaba convirtiendo en algo frecuente y con ello la sensación de entrar a la oficina con la coraza puesta dispuesto a luchar con el que se ponga por delante.

Al final el proyecto salió, a base de horas, esfuerzos personales y negociaciones con el cliente. Aunque no era el responsable de números, estaba claro que ese proyecto fue una perdida para la empresa….

Ver todo el artículo “Haz de Scrum parte de tu vida”

Más artículos sobre Scrum en su blog pensandoenred.com

En mi blog he citado varias veces a Eduardo, no por que me caiga bién (no lo conozco) ni use ninguna de sus desarrollos a diario, sin por que entre tanto humo y vendedor 2.0 muchos pierden el norte y desvarían, sin embargo en sus artículos encuentras mucho trabajo y sentido común. Os dejo una de las perlas de Eduardo Manchón:

…Los viejecitos que se pasan el día mirando obras en la calle no se conviertien en arquitectos y aún menos en albañiles, por horas que pasen allí mirando y preguntando. Igualmente para montar un proyecto web hace falta saber programar o al menos tener un socio (ni asalariado ni freelance) totalmente involucrado que programe….
…Una cabeza pensante justifica su trabajo dando vueltas y más vueltas a las cosas y generando PPTs de manera infinita. Sin embargo este trabajo es inútil, no produce nada y es contraproducente, en Internet las ideas se desarrollan en vivo y online, no sobre una ppt ni en la cabeza de nadie. Las cabezas pensantes en la mayoría de los casos se creen honestamente lo que dicen, simplemente no tienen ni idea de como funcionan las cosas en el mundo de la start-ups de Internet porque nunca han hecho un proyecto….

La idea es sencilla: Un proyecto web se arranca escribiendo líneas de código….

Como desarrollador web, creo que está clara mi alineación con respecto a estos artículo, pero estoy seguro de que con los ejemplos que expone Carlos Blanco en su charla de Iniciador de Las Palmas tendreis otra visión de como se pueden hacer las cosas. En el tercer video una asistente le dice que para hacer todo lo que cuenta hace falta contratar a gente, tener recursos, etc.. y el le comenta que no hace falta, que se pueden llegar a acuerdos por porcentaje, etc… La charla merece la pena:

Iniciador Las Palmas con Carlos Blanco Parte 1-3

Ver Iniciador Las Palmas con Carlos Blanco Parte 2-3
Ver Iniciador Las Palmas con Carlos Blanco Parte 3-3

Unos hablan de innovación, otros de “copiar” cosas que ya funcionan y llevarlas otros mercados, etc… pero al final todo se resume en negocio, negocio y negocio.

Completo artículo en tripwiremagazine sobre herramientas para hacer  wireframes:

15 Best Wireframing Tools for Designers | tripwire magazine.

Si esto de los wireframes os suena a chino, os recomiendo el artículo de Olga Carrera en Usable&Accesible: wireframes y para ver como trabajan los demás, la web I Love Wireframes y su grupo en Flickr

Foto de The Octothorpe

Mascletá Fallera es un sencillo juego en el que puedes crear tu propia Mascetà Fallera, colocando distintos petardos hasta conseguir una mini mascletá a la que se asignará una puntuación que puedes publicar en tu muro de Facebook.

Este proyecto es el primero que hacemos desde Grupo Skala en Facebook. Mi compañero Gabriel Cuesta ha publicado varios juegos y aplicaciones en Facebook, por lo que toda la dinámica de obtener datos y publicar en el muro lo teníamos controlado. Podeis ver su charla sobre creación de aplicaciones en Facebook en Tucamon.

El proyecto empezó con una limitación: el tiempo. Las fiestas se nos echaban encima y había que apretar, asi que toda la fase de concepto artístico nos lo pasamos por el forro.

Al tener claro como iba a ser el juego, Gabriel Cuesta empezó la programación en flash mientras yo trabajaba la parte visual y Oscar creaba los petardos en 3d, los animaba y editaba los sonidos.

Version preliminar para programar la interacción

Viendo que la cosa no chirriaba, aplicamos la técnica de programación PPY!: PásameloPeroYa!

A los pocos días ya teníamos un prototipo bastante funcional que había que ir limando. En ese momento nos atacó la proporción 80/20: el 20% final del trabajo ocupa el 80% del tiempo. Cualquier persona que ha visto una obra lo conoce: “pero si está terminado el edificio!, ya han levantado la estructura”. No amigo no, el alicatado se come casi todo el tiempo. Y nos quedaba el alicatado.

Elementos finales en la aplicación

Cuando la aplicación era más o menos funcional se empezó la parte de integración en Facebook: publicación en el muro, grabar datos de cada mascetà, botones para ver de nuevo la mascletà, crear pantallas especiales para ver las mascetàs publicadas, rankings, etc… Y engranar todo para que no falle.

Integrandola con el muro de Facebook

Compartiendo la aplicación en Twitter

La verdad es que nos hemos divertido bastante en el todo el proceso, con encendidas discusiones sobre el sonido de los petardos, usabilidad, procesos, etc…

Como homenaje, los créditos de los que hemos participado en crear la nuestra pequeña Mascletà Virtual :)

• Gabriel Cuesta: Programación Flash y Facebook (su post sobre la mascletà)
• Pablo Angeletti: Interfaz y grafismo (este de aquí soy yo mismo)
• Óscar Navarro: Sonido y gráficos 3D y animaciones
• Carlos Pro: Ilustración del Señor Pirotécnic
• Gustavo Valbuena: Concepto y dirección
• Raúl Abad: Marketing Online
• Laura Hernández: Testeo

El equipo de nuevas tecnologías de Grupo skala

Como guinda, la persona que habla en las instrucciones soy yo. Voy a tener que ponerme las pilas en hablar para los tutoriales por no quedó muy fino :)

Ahora, a jugar unas partiditas a la Mascletà Fallera, a ver cuantos punticos haceis

No se por que, pero siempre que vengo a un evento a Barcelona es en el Citylab de Cornella.

Nos hemos escapado este fin de semana Gabriel Cuesta y yo a la drupal camp en Barcelona, pero esta vez nos ha enviado Grupo Skala (muchas gracias!)

Las conferencias estan separadas en 4 sesiones a la vez y casi todas son interesantes…es complicado elegir. Lo hemos solucionado asistiendo a las mas interesante y viendo por streaming las demás. Si, para volverse locos

Lo mejor es el ambiente, lleno de gente con los mismos intereses, lleno de profesionales y gente interesante.

Se esta hablando de comercio electrónico (con ubercart ofrecida por @pcambra de neurotic.com), de realidad aumentada (por la gente de investic.net), de seo en drupal (por el koredeola, el autor del modulo superseo.. muy buena), y unit testing e integración

En la página oficial estan todas las sesiones y las podeis ver en streaming.

Vamos, que lo estamos pasando pipa y encima aprendiendo un montón ¿que mas se puede pedir?

Si quereis seguir lo que se cuece por twitter, sólo teneis que buscar con twitts con el hasthtab #drupalcampspain o mis comentarios en twitter.com/infonomada