En las últimas semanas he ocupado algo de mi tiempo libre en desarrollar mi primer plugin para Rails. Teniendo en cuenta que no soy ningún experto en metaprogramming, en general estoy bastante contento con el resultado: el plugin hace exactamente lo que quería y yo he aprendido cosas. Básicamente lo que hace es crear URL amigables para acceder a nuestros registros de la base de datos. Entrar en su página para obtener más información (en inglés). Lo he publicado en algunos sitios.

Erase una vez una tipografía llamada Helvetica. Era extremadamente popular. Después llego una compañía de software llamada Microsoft. Ellos “tomaron prestada” Helvetica para su sistema operativo y la llamaron Arial. Esta inferior tipografía está actualmente en millones de ordenadores en todo el mundo. Puedes diferenciar entre la original y el timo? Demuestralo.

Los puntos clave son estos:

Por defecto MySQL crea sus bases de datos en latin1, y para guardar todo tipo de caracteres de forma apropiada es mejor decirle que por defecto las cree con UTF8.

Si tenemos acceso de escritura al archivo /etc/my.cnf le podemos añadir:

[mysqld]
character-set-server = utf8

[client]
default-character-set = utf8

Si no podemos hacer lo mismo con el achivo ~/.my.ini (configuración por usuario)

Despues de reiniciar MySQL ya creará las nuevas bases de datos con UTF8

Otra opción es indicarlo en el momento de la creación:

mysql -u root -e "CREATE DATABASE application_name_development CHARACTER SET 'UTF8';"

Si vamos a crear la base de datos con Rails 2 (db:create:all), ya le asigna el encoding que tengamos definido en database.yml.

Aquí tienes un generador de esos codigos tan frikis que se ven en algunos dispositivos. Esto es la URL de mi blog frikicodeada. Ahora puede que no sea muy útil, pero en unos años, cuando todo el mundo tenga un móvil que lea estos códigos desde la cámara, seguro que lo vemos un montón por los anuncios de los periódicos.

Después de unas semanas alternando con mi teclado inglés en el trabajo y el español en casa he decidido dejarme de líos y usar sólo el layout inglés. Al principio para escribir en español me seguía poniendo el layout español, pero ahora ya me se los atajos para las letras españolas desde el inglés y no es tan incómodo. Otra ventaja que para programar es realmente más efectivo, una vez te acostumbras a las nuevas posiciones.

Los atajos para poner…

letras con acentos: Option+e+letra
ñ: Option+n+n
¿: Option+Shift+/ (Option+?)
€: Option+2

Ya estaba tardando en actualizarme a Rails 2:

Descargar MacPorts

Por alguna razon la version para Leopard no modifica los paths, y necesitaremos hacerlo manualmente:
En /etc/paths añadir:
/opt/local/bin
/opt/local/sbin

En /etc/manpaths añadir:
/opt/local/share/man

Actualizamos tal y como indico en este post.

Por cierto en ese post no instalo Mongrel. No es que sea obligatorio pero es mejor que WebBrick (incluido en Ruby):
sudo gem install mongrel

El instalador de MySQL no funciona muy bien en Leopard, así que de esta vez he decidido instalar MySQL vía MacPorts. Basta con:

sudo port install mysql +server

Para que arranque al inicio:
launchctl load -w /Library/LaunchDaemons/org.macports.mysql5.plist

Esto instala las bases necesarias del MySQL
sudo -u mysql mysql_install_db5

Recuerda que por defecto crea el socket en /opt/local/var/run/mysql5/mysqld.sock, y que para invocar mysql desde línea de comandos debemos poner:
mysql5

E instalamos el adaptador de MySQL para Rails:

sudo port install rb-mysql

Ala, a disfrutarlo.

Por supuesto, siempre puedes utilizar NeoOffice, pero si no lo tienes a mano, basta con copiar el texto a contar, abrir el Script Editor (Applicatons/AppleScript/Script Editor), y poner:

count (the clipboard)

o

count words of (the clipboard)

o

count paragraphs of (the clipboard)

Y si quieres seguir utilizándolo, puedes utilizar este código:

y guardarlo como aplicación, para luego poder abrirlo con Quicksilver.

En casa ya me empezaba a sentir anticuado respecto al trabajo, así que he decidido actualizarme a Leopard. Primero, por probar, he actualizado sin formatear, y ha ido muy bien, pero ya tenía el ordenador muy “sucio” y me lancé a una instalación desde 0.

Notas a la hora de reinstalar:

• Guarda todo lo necesario en tu disco duro externo. Supongo que ya tendrás todos los instaladores para tus aplicaciones. No olvides esos pequeños archivos de texto con notas que tenías en Documentos, aquellas extensiones que tenías en la carpeta del programa en Aplicaciones, o la imagen de usuario que tan chula te había quedado.
• Recuerda hacer un backup de tu Address Book y de tu iCal.
• No olvides repasar si tienes algún mail importante del que no tengas copia.
• Anótate todas las contraseñas que necesites y no tengas guardadas, como la de tu WiFi o la de tus cuentas FTP. Con Key Chain puedes mirarlas.
• También guarda las contraseñas del explorador, y los bookmarks.
• Para la música del iTunes, sólo necesitas copia del iTunes Music Folder. Suponiendo que tienes activado lo de keep folder organized, si no tendrás que consolidate library. iTunes guarda los artwork de dos maneras:
  • Si el artwork te lo ha descargado automáticamente de la iTunes store lo guarda en iTunes/Album Artwork.
  • Si lo has añadido tu manualmente, lo guarda en la etiqueta ID3 del archivo (aumentando su tamaño).

  Por tanto lo primero que tenemos que hacer al arrancar iTunes es configurar el iTunes folder e importar esa carpeta a la librería. Cuando termine nos logueamos en la iTunes Store y le damos a Get Album Arwork. Tarda un buen rato y no hay ninguna señal del status, pero cuando termine deberíamos tener todo exactamente igual que antes.

  Con esto también tendrás los Podcast que tenías, pero aparecerás como no suscrito, así que tendrás que darle al botón de suscribe a cada uno.

  Desgraciadamente iTunes no escribe alguna información en los vídeos, como la de tipo de vídeo (Movies, Music Videos…), y la guarda solamente en su base de datos, por lo que al volver a importar nos aparecerá todo en Movies. Para escribirlo directamente en el vídeo necesitamos que el vídeo sea MP4 (lo podemos convertir con la opción del iTunes de Convert selection for Apple TV, pero yo prefiero usar ffmpeg, porque iTunes falla con algunos vídeos y no puedes ajustar ningún parámetro), y escribirle directamente esa información con un programa como Lostify.

• Para las fotos del iPhoto hay que tener en cuenta que ahora el iPhoto no muestra la opción de seleccionar librería, y las guarda por defecto en Pictures/iPhoto Library. Si queremos guardar las fotos en un disco duro externo, deberemos arrancar el iPhoto presionando Command+Opt+Shift y podremos elegir el sitio. Si seleccionamos la librería del iPhoto 07 nos la convertirá al nuevo formato.

Lo que instalo nada más empezar (hay programas con los que uno ya no puede vivir…):

• Firefox, y mis extensiones favoritas:
  • Google Browser Sync: Te hace backup de tus cookies, passwords, bookmarks, history y tabs.
  • TabMix: personaliza tus tabs
  • Download statusbar: olvídate de la incómoda ventana de downloads.
  • UnPlug: descarga archivos multimedia, como los vídeos del YouTube (FLVs).
  • Growl Notifications (Mac): notificaciones, por ejemplo cuando una descarga finaliza.
  • All-In-One Gestures: navega con movimientos de ratón.
  • Web Developer: herramientas para desarrollo web.
  • Firebug: muy util para CSS/HTML/JS
  • YSlow: Front-end performance analysis
  • ScreenGrab: Puedes sacar screenshots de una página entera, sin hacer scroll.
  • ColorZilla: Color picker para las webs.
  • SearchStatus: Estado de una web en los buscadores.
  • KGen: Keyword analyzer.
  • Y mis search engines favoritas: Wikipedia y Wordreference
• Quicksilver. Todavía abres las aplicaciones desde el Dock? entre otras cosas…
• Growl: Notificaciones de las aplicaciones
• Adium: mensajería instantanea.
• Skype: Llamadas, videoconferencia…
• Cyberduck: FTP, SCP…
• Transmission: Bittorrent
• FFmpeg: Conversor de vídeo.
• Lostify: Añade correctamente etiquetas a los mp4
• Perian, Windows Media Components , Xiph: abre todos tus videos con Quicktime.
• NeoOffice: El OpenOffice de Mac.
• Mis widgets favoritos
  • Currency converter: €, $, £, pts…
  • Istat nano: Estado general del equipo.
  • Super Rule: para medir tamaños en la pantalla.
  • Now Playing. La respuesta a ¿como se llamaba este tema?

Desarrollo

En una página web es importante no tener scroll horizontal, para tener una buena usabilidad. Por supuesto esto depende de la resolución de pantalla del usuario. Actualmente la menor resolución de pantalla es 800×600, pero cada día es menos usada. La siguiente resolución más pequeña es 1024×768, que es la más usada. De todas formas es aconsejable utilizar el menor ancho necesario para nuestra web, porque muchas veces el usuario no tiene la ventana maximizada, o accede por medio de otros aparatos pequeños, o simplemente para ayudar a la legibilidad.

Otra opción es usar plantillas flexibles, donde las columnas se adaptan al ancho de la ventana, pero el diseño debe ser apropiado para ello.

También podemos usar diferentes presentaciones para cada resolución, y cambiarlas dinámicamente. En este caso deberemos mantener dos diseños/plantillas distintas.

Este es un ejemplo usando una mezcla de plantilla flexible y plantilla dependiente de la resolución.

Testing

A continuación las herramientas/valores que uso para testar las plantillas.

Explorer window size es el tamaño real de la ventana cuando está maximizada en esa resolución. Incluye bordes y barra de tareas desbloqueada. Puedes usar Sizer para cambiarle el tamaño, y testar como funciona in una determinada resolución de pantalla, sin importar la tuya. Explorer tiene el escrollbar más ancho, así que si en Explorer se muestra bien, en el resto de exploradores también. Estas dimensiones son sólo para una configuración normal/media, porque nunca podremos saber el número de barras, posición de la barra de tareas, etc. que tiene el usuario.

Firefox fold (viewport) size es el mismo tamaño interior de ventana en Firefox que en Explorer. Puedes usar el Resize (marcando Viewport) de la Web Developer Toolbar.

CSS max width es el ancho máximo que podemos usar para evitar el scrollbar horizontal. Si ese tamaño lo aplicamos a un elemento no puede tener margins, paddings, o borders.

——–

Screen resolution: 800×600.

Explorer window size: 808×566.

Firefox fold size: 795×440.

CSS max width: 779px.

————

Screen resolution: 1024×768.

Explorer window size: 1032×734.

Firefox fold size: 1019×608.

CSS max width: 1003px.

———–

Puedes calcular el valor para otras resoluciones:

Screen resolution AxB

Explorer windows size: (A+8)x(B-34)

Firefox fold size: (A-5)x(B-160)

CSS max width: A-21px