El blog de Artefacto

Como curiosidad o truco sucio, contar las líneas de un proyecto PHP con Linux o Mac OS X es muy sencillo. Basta escribir en el terminal:

wc -l `find . -iname "*.php"`

Esta línea recupera todos los archivos con extensión .php a partir del directorio actual y cuenta las líneas de cada uno, sumando el total. No es un método muy elegante, porque también contabiliza las líneas en blanco y los comentarios, pero nos aporta una buena idea sobre el tamaño de un proyecto.

Utilicé este script para obtener el número de líneas de Artefacto Server, para el post que publicamos con las estadísticas de nuestro sistema de gestión de contenidos.

Ya hemos hablado alguna vez por aquí de los problemas que nos causa a los desarrolladores de sitios web el Internet Explorer 6, otrora buque insignia de la entrada de Microsoft en Internet, y del grave perjuicio que sigue causando a la innovación en la web (hasta el punto de que Google tuvo que dejar de soportarlo en Google Docs).

Las cosas mejoraron bastante con Internet Explorer 7, aunque en muchas cosas este navegador sigue recordando a su versión anterior. Ha habido que esperar a la versión 8 para obtener algo equiparable a un navegador moderno. Lo peor de todo esto es que debido a la política de actualizaciones de Microsoft, empeñados en ofrecer las nuevas versiones sólo a los usuarios registrados y legales de Windows (supongo que con razón), ahora mismo coexisten muchas versiones distintas de Internet Explorer, cada una con un comportamiento distinto a las anteriores. En fin.

Escribo todo esto porque hay un proyecto en Google Code muy interesante, consistente en una biblioteca JavasScript que sirve para adaptar el comportamiento de las versiones antiguas de Internet Explorer, haciéndolo lo más parecido posible al de las versiones 8 y 9. Corrige algunos (no todos, ni de lejos) problemas con el CSS y con el código HTML, además de solucionar el tradicional problema de las transparencias de los PNG.

Para utilizarlo, basta incluir en la cabecera un enlace al archivo JavaScript en cuestión. Me parece una idea fantástica, no sólo por la idea en sí, sino por la sencillez de su planteamiento.

Hacía mucho que no hablábamos por aquí de programación, así que vamos con una breve reseña. Functions-online es una útil herramienta que permite navegar por el directorio de funciones de PHP y ejecutarlas directamente desde el navegador, dando los valores a los parámetros de entrada según corresponda.

Por ejemplo, si queremos ver cómo quedaría el resumen criptográfico MD5 de una cadena determinada (por ejemplo “artefacto”), no tenemos más que abrir la página de la función MD5 y escribir este valor bajo el cuadro “$String”. Tras pulsar “Run” el sistema nos devolverá el resultado: 824a75958a6afa279dba661813d00a05.

A favoritos :-)

Cada vez que navegamos por una página web, el navegador necesita descargar al ordenador todos los elementos presentes en la misma: imágenes, sonidos, documentos, hojas de estilos, animaciones en flash y un largo etcétera. Así que para aligerar el tráfico de la red y la carga del ordenador del usuario, los navegadores usan un pequeño “truco”: guardan en el disco duro una copia de todos los archivos que descargan para que, si el usuario regresa, no sea necesario descargarlos de nuevo desde el sitio web. El lugar en donde el navegador guarda estos archivos se conoce como memoria caché. Y en teoría funciona.

En la práctica, el hecho es que las cosas son algo más complicadas. Muchas veces los navegadores no reconocen las modificaciones de los archivos en el servidor y no descargan el contenido actualizado, lo cual en ocasiones puede ocasionar problemas en la presentación de los sitios. En particular, lo más común es que las modificaciones de una animación flash o una hoja de estilos no se carguen adecuadamente en el navegador.

La solución a estos problemas pasa la mayoría de las veces por limpiar la memoria caché. A continuación se explica cómo hacer esto en los principales navegadores del mercado.

Firefox

Acceder a “Herramientas” > “Limpiar el historial reciente”. Aparecerá un cuadro de diálogo en el que debemos seleccionar “Todo” en el desplegable titulado “Rango temporal a limpiar”. A continuación pulsamos “Detalles” para desplegar algunas opciones adicionales, entre las cuales hay que marcar al menos “Caché”. Por último, hacemos clic en “Limpiar ahora”. Otras versiones del navegador muestran un cuadro similar accediendo a “Herramientas” > “Eliminar información privada”.

Internet Explorer

Acceder al menú “Herramientas” > “Opciones de Internet”. Aparecerá un cuadro de diálogo en que hay que hacer clic en el botón “Eliminar archivos”, bajo la sección “Archivos temporales de Internet” de la pestaña “General”. Aparecerá una ventana de confirmación en la que hay que seleccionar “Eliminar todo el contenido sin conexión” antes de pulsar el botón “Aceptar”.

Safari

En el menú principal, acceder a “Restaurar Safari”. Aparecerá un cuadro donde se debe seleccionar la opción “Vaciar la caché” y pulsar el botón “Aceptar”.

Escribo este breve artículo simplemente para comentar que hace unos días hice un descubrimiento interesante: Silk Icons, un conjunto de iconos para aplicaciones que se distribuyen bajo licencia Creative Commons y por el módico precio de cero dólares. Además del citado set, existen otros más disponibles en la misma web: Mini Icons, Mint Icons y Flag Icons (un conjunto de iconos de banderas de 247 países de todo el mundo).

Tanto el conjunto Silk como el Mini se distribuyen bajo licencia de atribución Creative Commons 2.5.

Llevamos ya bastante tiempo trabajando en la nueva web de Artefacto, que sustituirá a nuestros venerables vagones de metro, y que estará lista, si todo marcha según lo previsto, a lo largo de estos últimos días del año.

Más adelante revelaremos más detalles sobre la web, por el momento sólo quiero escribir un pequeño apunte técnico relacionado con la navegación. Hemos decidido hacer un pequeño menú desplegable utilizando Javascript, para lo cual una opción muy interesante resultó ser Redux (ver ejemplo), un menú de tipo acordeón escrito en apenas 40 líneas de código gracias a JQuery. Es sencillo de configurar y además proporciona persistencia mediante cookies.

Sólo tiene –tenía– un pero. Y es que si se utiliza en páginas con enlaces semánticos, el script guarda una cookie distinta para cada ruta visitada, al interpretar la dirección como un camino de directorios. Al final, esto hace que cada página del sitio tenga una memoria del menú distinta. En fin, para volverse loco –puedo dar fe de ello–. Sin embargo, la solución –no tanto el diagnóstico– es bastante sencillo. Basta sustituir la línea:

$.cookie(parent, this.className);


Por esta otra:

$.cookie(parent, this.className, {path: '/'});


Que inserta la cookie asociada al directorio raíz del sitio. Lo cual de paso nos sirve como excusa para admirar dos cosas: la increíble potencia de JQuery y lo increíblemente práctico que es el plugin para la gestión de cookies de que dispone. Poesía pura :-)

Llevamos un mes algo desaparecidos, pero es que hemos estado muy ocupados preparando un montón de novedades de las que próximamente hablaremos por aquí.

Este verano David, nuestro diseñador, pasó sus vacaciones en México y pudo visitar el museo Franz Mayer, que actualmente y hasta el 8 de noviembre alberga la exposición de título 300% Spanish Design.

Esta exposición recorre los últimos 100 años del diseño español a través de una muestra de 100 sillas, 100 carteles y 100 lámparas. Una selección un tanto sorprendente y centrada en objetos cotidianos de diseño ingenioso, divertido y muy creativo.

Hay un recorrido virtual muy recomendable a través de los objetos de la exposición en el sitio web de Seacex. Por otro lado, en la revista sorry zorrito hay una reseña muy interesante de la exposición. Y también hablan de ello en la web de RTVE.

Vía Microsiervos DC he descubierto un artículo útil y divertido a partes iguales en el que se aborda el siempre temido momento de limpiar el ratón de nuestros amigos los Mac. Como sé que David se pone de los nervios con este tema, dejo aquí las dos soluciones que la humanidad conoce a fecha de hoy:

1. La oficial, que consiste en limpiar la bola con un trapo (hasta hay un vídeo de Apple explicándolo). La idea no es mala, pero como comentan en el post original acaba no siendo efectiva en absoluto.
2. La que todos creemos que sería más efectiva, que consiste evidentemente en desmontar el ratón.

No he podido probar el último, pero promete ser algo complejo. Lo que no acabo de entender es si cuesta mucho poner dos tornillos a las cosas. Estoy escribiendo ahora mismo con un teclado y un ratón externos por los que pagué la friolera de 20 €, y aunque no son tan bonitos como los periféricos oficiales de Apple, al menos puedo desmontarlos para limpiarlos :-P

Continúo con la entrada que dejé a medias sobre las extensiones para Firefox que utilizo. Hoy quiero hablar de otros complementos interesantes y sobre todo útiles, como Clear Cache Button, casi imprescindible en el desarrollo web. Simplemente añade un botón en la barra de herramientas para borrar la caché, lo cual puede ahorranos algunos dolores de cabeza…

Sin esta extensión, podemos borrar la caché si seleccionamos “Limpiar datos privados” en el menú “herramientas” y marcamos sólo el apartado “Caché”. Sin embargo, así resulta mucho más rápido…

Locationbar² es otro de mis complementos favoritos. Básicamente lo que hace es colorear y resaltar la sintaxis de las direcciones en la barra de direcciones. Además, crea hipervínculos con cada parte de la dirección, con lo que se facilita la navegación por directorios.

Otro de los complementos más populares y potentes para Firefox es NoScript, que nos habilita para parar la ejecución de cualquier tipo de código externo a las páginas web, como JavaScript o Flash. También podemos establecer una lista de sitios fiables y no fiables, y por defecto realiza comprobaciones que nos previenen de posibles ataques de suplantación o por XSS… imprescindible.

Adblock Plus es la verdadera bestia negra para quienes intentan vivir de la publicidad en Internet. Este popular complemento bloquea la publicidad contextual y emergente, siendo totalmente imprescindible para poder escapar del abuso al que nos someten algunos diseñadores de páginas web, con ventanas emergentes, marcos que se desplazan, capas que aparecen frente al texto… y que convierten la navegación en una verdadera pesadilla. Además, nos podemos suscribir a un servicio que mantiene la extensión actualizada, evitando la publicidad indeseada de los sitios más populares.

Me quedan todavía más extensiones en la recámara (no sabía que tuviera tantas :-P), algunas de ellas verdaderamente útiles e interesantes, así que para no alargar más este artículo escribiré una última entrega con las que me faltan…

Una de las posibilidades más interesantes de Firefox es la facilidad de ampliación a través de las famosas extensiones o plug-in’s: código de terceros que se puede añadir al navegador y que le aporta funcionalidad especial. Recientemente Mikel me ha pedido que le recomiende alguna de las extensiones que utilizo en mi trabajo diario, ¿y qué mejor forma que hacerlo a través del blog?

• Window Resizer es una extensión que permite reconfigurar el tamaño de la ventana del navegador a ciertos valores predeterminados. Así podemos por ejemplo ver cómo se muestran –más o menos- nuestras páginas a una resolución de 800 x 600. Hay algunas otras que casi me gustan más, como Yet Another Window Resizer o Firesizer.
• También utilizo View Cookies, que añade en la ventana de información de la página una pestaña con información sobre las cookies que la página ha enviado al navegador. Es muy útil para trabajos de depuración o pruebas cuando estamos desarrollando un sitio con cookies, aunque también puede ser interesante de cara a proteger nuestra privacidad.
• Live HTTP Headers es una extensión muy interesante, que también añade una pestaña en la información de la página, mostrando las cabeceras que se envían al servidor. Es muy útil a la hora de comprobar las redirecciones, auditar la seguridad…

• Stop Autoplay es otra extensión que actualmente tengo desactivada pero que puede ser útil. Básicamente lo que hace es bloquear el arranque automático del Flash, lo que permite que podamos ordenar el inicio de una reproducción y lo más interesante: que los reproductores de las páginas con música no se inicien solos.
• Cuando tengo que elaborar algún manual o añadir capturas al portfolio de Artefacto, uso Screengrab! para realizar capturas de pantalla en tamaño estándar con facilidad. Así quedan todas exactamente igual. Tiene muchas opciones interesantes y creo que vale la pena tenerla esta extensión en la recámara.

Esto es todo por el momento. En un próximo artículo comentaré otras extensiones interesantes y útiles… ¿alguna sugerencia?