Dejé el trabajo. Necesitaba mostrar algo nuevo, cómo soy ahora, y olvidar ese portfolio que llevaba sin renovarse más 5 años. Lo más duro ya esta hecho. Después de meses queriendo rediseñar el blog y el portfolio, por fin lo he conseguido, pero aún queda mucho por andar. El siguiente paso es hacer el blog visible y adaptable a cualquier dispositivo. ¿Después de eso? Pues llenarlo de contenido interesante, tanto como de nuevos trabajos como de nuevos posts.
Entre tanto, corregir algunos bugs, completar algunas cosas que faltas y pulirlo un poco más.

Quizás al principio los artículos sean un poco fríos y no me exprese muy bien, pido paciencia, he perdido la práctica en escribir, pero todo se andará.

Idea original del blog y el portfolio

La idea original era hacer un minisite para mostrar mi portfolio y promocionarme como diseñador y buscar un nuevo puesto de trabajo. Como todos sabeis, justo antes de dejar mi trabajo ocurrió el terremoto de Tohoku y bueno, todos mis planes cambiaron un poco. La vida aquí en Tokyo se tambaleó un poco y lo principal era tener algo visible, bueno, aún así he tardado más de lo que pensaba.
El minisite, con juego incluido, está en la lista de cosas por hacer, después de buscar un nuevo trabajo. Prometo que será divertido.
Por otro lado el blog quería apartar un poco la zona personal y centrarme en diseño y en programación, no sólo para que lo lean los demás, si no para tenerlo de fácil acceso también para mi.

Problemas

Al principio era la falta de tiempo, trabajando en Japón se dispone de cero tiempo libre. Cuando empecé el diseño del blog y después a programar, empezaron los problemas: era mi primer contacto serio con wordpress y el mayor problema surgió cuando me plantee hacer el blog en varios idiomas, hay varios plugins para ello y bueno, todos tienen sus puntos negativos, y hay que adaptar todos los .php para tal situación.
Por otro lado, cuando empecé mi carrera programando para Flash una de las razones fue que no llevo nada bien tener que cambiar el código para no sé cuántos navegadores. Con Flash funciona en uno, funciona en todos. Así que empezar a tratar con floats y esas cosas otra vez fue un poco caótico, menos mal que uno tiene buenos amigos y algunos libros que también me han ayudado. Aunque para mí sigue siendo más fácil programar en ActionScript que en HTML!

Soluciones

Quería utilizar ciertas cosas que dados los tiempos que corren me parecían necesarias, como un código semántico en HTML5, utilizar los nuevos recursos del CSS3, tipografías que no sean del sistema gracias a Typekit, y un par de cosas más que se quedan en bastidores.
Pues al final fue echarle horas, aprender cosas que no sabía y probar con fallo y error. Ha sido divertido, sobre todo después de ver el resultado.

Hay algunas cosas que no me gustaría incluir en el portfolio pero que me gustaría incluir aquí para contar un poco cómo he llegado al punto donde estoy, todas y cada una de las experiencias que he tenido me han hecho tal como soy.

Bellas Artes

Estudié 5 años Bellas Artes en la Universidad de Granada, especialidad en Diseño Gráfico. Fue una gran experiencia, pero he de decir, que exceptuando algunos pocos profesores, los mejores conocimientos los obtuve de mis compañeros, de allí surgió la amistad con oneeyedman. Mi primer PC lo compré en las navidades de 1998.
Siempre me ha gustado mucho la pintura y el diseño, incluso el industrial, pero tenía cierto interés por la programación, y no fue hasta muy justo cuando me decanté por Bellas Artes. Nunca me arrepentiré.


Hace siglos que no toco nada de óleo ni de carbón, aunque hay veces que me gustaría pringarme hasta las cejas.

Kandorgraphics

Esta fue una muy buena época, trabajé unos 4 años para esta empresa. Al principio entré como diseñador web para Flash y participé en algunos trabajos como modelador 3D. Una vez más lo mejor de aquí era el ambiente y los compañeros. Antes de entrar conocía a la mayoría de ellos, eramos amigos de la Universidad, así que el ambiente era fantástico.
Puede participar en un proyecto en el que pudimos mezclar 3D y Flash, fue muy interesante, estamos hablando del 2001, hace 10 años. Utilizabamos Cult3D, ya descontinuado, con el cual podiamos rotar varios objetos dentro de Flash.

Otro gran proyecto, fue la puesta en marcha de una película de animación, sólo participé en la promoción de la película, en la que hice varios modelados.

Kandorgraphics ha seguido creciendo y ahora es una gran empresa. Aquí podeis ver una de las primeras veces que salimos en el periódico, el equipo de aquella época, muchos de ellos, a decir verdad todos menos yo, siguen allí.

Freelance

Después de aquello con la intención de moverme a Japón trabajé un año como freelance, realizando alguna página en Flash y algún proyecto privado.

Nonoloa es una tienda de productos de ropa para la cual realicé un ec-site en flash.

Preparando el cuerpo para viajar a Japón…esto es una idea que se me pasó por la cabeza y la plasmé en 3D. Renderizado con Vray bajo 3ds Max.

Japón

Estudié por dos años en la Universidad de Tokai, en la provincia de Shizuoka, después de eso me moví a Tokyo en busca de trabajo, en menos de un mes ya estaba trabajando.

Sonicjam

Sonicjam fue mi primera experiencia en Japón, fueron sólo 7 meses de trabajo allí, pero fueron muy intensos a un ritmo loco. Fue la primera vez que trabajé 37 horas seguidas sin dormir y comiendo frente al ordenador. Empecé a comprender cómo funciona el mundo japonés y cómo se diferencia del resto del mundo.

Aoi-DC

Antes de que pasara un año trabajando para Sonicjam, alguien de Aoi-DC vió mis trabajos y me ofreció un puesto en la empresa. Mi japonés mejoró notablemente y pude ver realmente cómo funcionan las empresas japonesas por dentro. Pero eso eso otra historia.

Trabajar con control de versiones debería ser parte de tu trabajo diario, si es que no lo es ya, puede ahorrarte muchos dolores de cabeza. Si eres freelance, o en tu empresa no utilizais control de versiones porque tu equipo no es muy grande, o simplemente trabajas en dos ordenadores (en casa y en el trabajo) te recomiendo trabajar bajo control de versiones y utilizar Dropbox para tenerlo accesible desde cualquiera de tus puestos de trabajo o colaborar con algún compañero.

Lo que voy a explicar aquí es como crear un repositorio en Dropbox, prescindiendo de servicios de svn de pago, y cómo trabajar con el desde Flash Builder. Puedes utilizar cualquier otro programa que tenga soporte SVN. Puedes compartir tu repositorio con otros compañeros o tenerlo todo sincronizado desde tu casa.

Herramientas

• Flash Builder
• Versions (35 euros). Puedes utilizar otro cliente, pero este es mi favorito.
• Dropbox (2,5Gb de espacio gratis)

Workflow

Crear una carpeta en Dropbox donde almacenar tus repositorios (proyectos bajo control de versiones). Esto solo lo haremos una única vez.
Crear un nuevo repositorio en esa carpeta con Versions, será digamos a lo que accederemos para sincronizar nuestro proyecto.
Hacer un “check out” a donde vayamos a trabajar localmente (fuera de Dropbox).
Trabajar sólo y únicamente en nuestra carpeta local.
Actualizar el repositorio con cada cambio importante (hacer un “commit” al repositorio)
Seguir trabajando
Si trabajamos en grupo, compartir esa carpeta mediante dropbox a nuestro grupo de trabajo.

¿Por qué no trabajamos directamente en Dropbox?
Quizás te preguntas por qué no trabajar directamente con Dropbox, ya que es como un control de versiones, si se sincroniza sola y tenemos nuestro historial de archivos y tal.
Pues no queremos hacer eso por varios motivos:
Dropbox no es un control de versiones real que podamos operar con él desde nuestro programa favorito.
En la web de dropbox tenemos un historial de archivos, pero nada más, con SVN tenemos acceso a comentarios hechos con cada cambio, comparar ficheros versiones anteriores y todo desde Flash Builder.
Aunque el motivo principal es que no querrás trabajar más de una persona en el mismo archivo sólo con Dropbox. Puede asemejarse al infierno.

Primeros pasos:

1. Creamos una carpeta en Dropbox donde almacenar todos nuestros repositorios a partir de ahora. En mi caso es Dropbox/SVN-Repositories/
Nos aseguramos que Vamos a utilizar la libreria 1.6 en las preferencias de Versions.

2. Creamos un repositorio local

Seleccionamos nuestra carpeta donde almacenaremos todos nuestros repositorios.

3. Una vez creado hacemos un “check out” del repositorio, esto es una copia local con la que trabajar. Para eso creamos una carpeta dentro de nuestro workspace que llamaremos “testSVN”, dentro de esa carpeta Dropbox va a crear nuesta copia local del repositorio con el nombre que le asignemos, en nuestro caso DEV.

Por ahora ya tenemos funcionando el repositorio y la copia local, vamos a hacer que Flash Builder empiece a trabajar con SVN.

Instalación de Subversion en tu OSX

Descarga e installa Subversion para tu OS de CollabNet

Instalacion de Subeclipse en Flash Builder

1. Seleccionamos Instalar nuevo software en el menu Help de Flash Builder (Help>Install new Software…)

2. Seleccionamos Añadir

Flash Builder esta basado en Eclipse vesion 3.6.1 “Helios”, así que segun la pagina de subeclipse tenemos que instalar la versión 1.6.x. En los campos introducimos el nombre que queramos para recordar el plugin que vamos a instalar y la suguiente url en Location: http://subclipse.tigris.org/update_1.6.x, que trabaja con Subversion 1.6.

3. Sólo vamos a seleccionar las caracteristicas necesarias.

Pulsamos siguiente, nos ofrece un resumen con la instalación que va a comenzar, pulsamos siguiente, aceptamos la licencia y despues finish. Quizás salga un aviso de seguridad, procedemos con la instalación.

Ya está todo instalado para poder trabajar con Flash Builder y subversion.

Empezando a trabajar con subversion en Flash Builder

1. Creamos un nuevo actionscript project y seleccionamos la carpeta donde ya tenemos nuestro copia local del repositorio.

2. Como podeis ver ya esta funcionando Subversion. En los ficheros y las carpetas que tienen un interrogante (?) significan que el control de versiones no sabe qué hacer con esos ficheros, así que les vamos a decir que los suba al repositorio (a nuestra carpeta de Dropbox)

3. Seleccionamos las carpetas, pulsamos botón derecho del raton y seleccionamos Team>Add to Version Control. Una vez hecho esto veremos sobre los archivos un +, que significan que son archivos que se añadirán en el próximo commit al repositorio.

En el Package Explorer seleccionamos nuestro proyecto, en el menú contextual seleccionamos Team>Commit. Con esto lo que haremos es subir nuestros archivos al repositorio.
En la siguiente pantalla, seleccionamos los archivos que queremos actualizar y haremos un comentario sobre los cambios realizados, como es nuestra primera actualizacion, escribiremos “Initial commit”.
Cuando los cambios se hayan realizado, el siguiente icono representa que los archivos estan actualizados con el repositorio.

Podemos comprobar en Versions como ya estan los archivos en el repositiorio.

Asi como comprobar el historial de commits.

Trabajar con el repositorio desde otro ordenador

1. Bueno, ya tenemos un ordenador funcionando, por casualidades de la vida tengo que trabajar desde el portatil, asi que quiero configurar mi proyecto tambien en ese ordenador.
File>Import>Other y seleccionamos dentro de la carpeta SVN la unica ipcion que hay: Checkout projects from SVN
En la siguiente pantalla seleccionamos Create new repository location.
Introducimos la ruta de nuestro repositorio (la del Dropbox). Podemos acceder a esa informacion pulsando CTRL+I teniendo seleccionado nuestro repositorio en Versions, en nuestro caso file://localhost/Users/peruho/Dropbox/SVN-Repositories/testSVN

En la siguiente pantalla selccionamos la raiz de nuestro repositorio y pusamos next
Seleccionamos Check out as a project in the workspace, introduciomos el nombre del proyecto y pulsamos siguiente
Seleccionamos la ruta donde queremos la copia local, /2011/testSVN/DEV
2. Ya tenemos todo funcionando en nuestro portátil.

Cosas a tener en cuenta

Hay algunas cosas importantes que no debemos olvidar, como por ejemplo no tocar para nada nuestra carpeta de Dropbox (SVN-repositories), jamas modificar nada, tened en cuenta que es como una base de datos donde se estan almacenando todos nuestros cambios.
Por otro lado, cuando querramos hacer una copia de nuestra copia de trabajo, tened en cuenta que no podeis hacer una copia tal cual de la carpeta desde el Finder, porque os estareis llevando con vosotros un monton de archivos ocultos que guardan informacion de nuestra copia de trabajo. Asi que tendremos que exportar a una nueva carpeta, esto lo podemos hacer desde Versions.
Si lo que queremos es subir al repositorio una copia limpia de un proyecto tenemos que seleccionar importar.

Me gusta trabajar rápido, y me gusta tener las herramientas como a mi me gustan, siempre suelo tener photoshop adaptado a mi forma de trabajar. Pero esa forma va evolucionando, y variando con el tiempo, pruebo nuevos métodos durante un tiempo por si mejoro mi rendimiento, si es así, cambio mi forma de trabajar. ¿Lo has probado tú o sigues trabajando con Photoshop tal y como viene de fábrica?

Espero hacer una serie de artículos hablando del tema, porque da para mucho. Hoy voy ha hablar sobre dos cosas que me parecen de lo más importante antes de tocar el Photoshop, es el workspace y las guias. Lo de personalizar el teclado lo dejamos para otra.

Workspace

Siempre trabajo con el modo “Full Screen With Menu Bar”, puedes cambiarlo arriba, una opción que hay por debajo de los menús, o pulsando la tecla F (por defecto) y cambio entre documentos con Control+Tab. Así trabajo con el mayor espacio posible y puedo mover el borde de la imagen hasta el centro de la pantalla, algo que no se puede hacer en el modo ventana.
Tengo todos los paneles que considero necesarios a mi derecha. La columna más pegada al documento son las herramientas, en la segunda columna suelo tener las ventanas de caracteres y las capas, dándole mucho espacio a esta última.
El Dock del OSX lo tengo a la derecha ocupando el minimo espacio posible y única y exclusivamente con los programas que tengo abiertos en el momento.

¿Por qué hago esto? Por una sencilla razón: soy diestro, y como con el lápiz, me gusta tener lo que más utilizo a la derecha (exceptuando mi taza de café), tener el panel de herramientas a la izquierda y el resto de paneles a la derecha es una perdida de tiempo y energía. También ganas mucho espacio para trabajar. Así es como yo lo veo, y si lo pruebas lo notarás.

Guías

Con las guías realizo dos cambios: el color y el estilo. El azul fosforito ese que viene por defecto no es nada útil como guía, distrae la atención de masiado, además la línea continua no me sirve cuando busco más precisión. Utilizo un color rojo, porque no suelo hacer diseños con excesivo uso de rojo, si se diera el caso, lo cambio para la ocasión. Además utilizo una línea punteada que me hace ver mejor el diseño con el que estoy trabajando abajo y si tengo que hacer un ajuste al pixel, lo puedo hacer sin problema.

A las Smart Guides les doy un color verde, en este caso si me gusta que sea vibrante y llame la atención, porque voy a utilizarlas de modo muy temporal. Les asigno el atajo de teclado Comando+U, que es el mismo que con Illustrator y asi unifico mis atajos. Si no sabes lo que son las Smart Guides, ¡ya estás perdiendo tiempo en probarlas! Cuando mueves un objeto con las Smart Guides activadas, se empiezan a mostrarle unas guías que te alinean tu objeto con otros.

Opciones del panel de capas

Para trabajar mejor con las capas abre las opciones de panel de capas y desactiva las miniaturas, ganarás mucho espacio. Desactiva lo siguiente:
“Expand New Effects” cuando crees un efecto, no se expandira y tendrás mas orden en tus capas.
“Add ‘copy’ to Copied Layers and Groups“. Este último es obligatorio, desactiva la palabra “copy” cuando copias una capa, creo que es una opción que todos hemos deseado desde que hay capas en Photoshop.

No es un libro muy denso, de poco más de 200 páginas, en las cuales Dan explica con una claridad impresionante como solventar ciertos problemas de diversas maneras, por algo el primer capítulo se llama “Preguntate siempre… ¿Qué pasaría si…?”

Refuerza tu CSS

El objetivo del libro es hacer tu código y por consiguiente tu diseño a prueba de balas, todo ello a través del CSS. Me encanta cómo presenta el problema nos lleva a través de él, mostrándonos que esta bien y qué está mal y nos va presentando las soluciones. Es uno de los pocos libros de programación que he tenido en mis manos que explica tan bien las cosas.

El capítulo “The Fluid Grid” está escrito por Ethan Marcotte, que escribió hace ya más de un año aquel maravilloso artículo sobre Responsive Web Design en A List Apart. Aquí trata el tema con una mayor profundidad y detalle. Todo un lujo tener esto a mano si estás interesado en que tu diseño sea adaptable a dispositivos móviles.

Contenido del DVD

El DVD se ve en un ratillo, y es en realidad un checklist de 10 puntos para hacer de tu diseño un diseño a prueba de balas. ¿Merece la pena comprarse la versión con el DVD?
Bueno, pues depende, la diferencia de precio no es muy grande y siempre viene bien echarle un vistazo, además es un extra al contenido del libro.

Conclusiones

Dan sabe de lo que habla, y te lo cuenta con un lenguaje de diario, como si estuvierase tomándose un café contigo y contándose las cosas que todo colega se cuenta.
Este libro es perfecto para aquellos que quieran dar un paso más, para aquellos que les guste el perfeccionismo y las cosas bien hechas.
Te quedas con ganas de más y puede que el libro se te quede corto, pero es suficiente como para hacer más robustos tus diseños.

En su segunda versión el concepto y el diseño se pensó para usarlo no solo en el escritorio, sino como aplicación móvil.
Gracias a que Flash puede exportar en formato iOs y Android se utilizó Flash para crear un prototipo y comprobar el flujo de la aplicación antes de su producción, así como para comprobar fallos de diseño.

Rol

Encargado del diseño y de la programación, participé así mismo en el planning del proyecto.

Problema

Tan sólo dos semanas para realizar el diseño y la programación. El rodaje se completó en un día.

Rol

Formé parte del equipo que se encargó del flujo de la aplicación y el encargado del diseño, así como de la identidad y logo de la aplicación.
Para mi fue un proyecto complicado, las exigencias del cliente chocaban con las necesidades del usuario. Era la primera vez que trabajábamos con un equipo externo de programadores para iPhone y en las comunicaciones hubo muchos malentendidos que complicaron el proyecto. Pero aún se salvó las complicaciones y la aplicación cumplió sus objetivos.

Resultados

Fue aplicación Nº1 en la categoría Healthcare & Fitness de la App Store.
33,120 downloads within 3 months after the first release.
Se incrementaron un 20% el número de puntos de ventas.

Problemas

Otra vez el escaso tiempo de realización, pero contento con el estilo conseguido.

Rol

Llevar a cabo el diseño de la web.

Probamos varias librerías 3D, entre ellas Papervision 3D para realizar el proyecto, pero era tal la cantidad de páginas y de información que se descartó la idea por el poco rendimiento que obteníamos.

Otro problema fue las actualizaciones que necesitaba la web, una semanal durante 12 meses. Teníamos que realizar un sistema estable y sencillo para poder actualizar tal cantidad de contenido.

Rol

Fui el responsable de varias partes de la programación dentro del proyecto, así como programar varios prototipos para evaluar si era factible el hecho de hacerlo en 3D, el mejor resultado lo dio Away 3D, aunque luego no se utilizase.

Estas son imágenes del prototipo utilizando Away3D.