Otro Blog Geek

Edito (15 de junio de 2008 – 11:52 ): He añadido un par de modificaciones que hay que hacer a la configuración de apache.
Edito (16 de junio de 2008 – 12:10): Otra corrección necesaria en la configuración de apache.

Symfony es un framework para desarrollar aplicaciones web basándonos en el patrón MVC. Me estoy peleando a fondo con él por que lo estoy usando para mi proyecto fin de carrera y me viene genial por que me evita pelearme con muchas cosas a la hora de desarrollar la parte de mi proyecto que es una aplicación web.

La instalación es bastante cómoda y se puede realizar a través de PEAR o mediante un paquete .deb. Yo he elegido la opción de PEAR por que me ha parecido más cómoda y así evito tener que añadir otro repositorio a Ubuntu. El proceso es muy simple:

1. Instalamos Apache. Yo tengo la mala costumbre de usar para ello un método bastante “cutre” que consiste en instalar phpmyadmin, ya que así se resuelven todas las dependencias necesarias para Apache y PHP

   1.  
   2. sudo aptitude install phpmyadmin
   3.  

2. Instalamos pear:

   1.  
   2. sudo aptitude install php-pear
   3.  

3. Añadimos el canal de Symfony:

   1.  
   2. sudo pear channel-discover pear.symfony-project.com
   3.  

4. Instalamos Symfony mediante PEAR:

   1.  
   2. sudo pear install symfony/symfony
   3.  

Por último solo nos resta configurar Apache. Para mi proyecto he configurado un host virtual con un log separado, así podré testear y depurar cómodamente. Configurarlo en Ubuntu es muy sencillo, solo es necesario añadir una entrada a /etc/hosts y crear el archivo de configuracion del host virtual. Veamos como hacerlo por pasos.

1. Añadimos la entrada con el dominio que queramos a /etc/hosts. Yo he elegido dominio.com para el ejemplo, pero se puede elegir otro

   1.  
   2. echo "127.0.0.1 dominio.com" >> /etc/hosts
   3.  

2. Ahora creamos una entrada en /etc/apache2/sites-available/dominio.com con el siguiente contenido

   1.  
   2. NameVirtualHost *
   3. <virtualHost *>
   4.         ServerName dominio.com
   5.         ServerAdmin webmaster@dominio.com
   6.  
   7.         DocumentRoot /var/www/src/web
   8.         DirectoryIndex index.php
   9.  
   10.         ## Cambiamos esta ruta por la que nos convenga
   11.         ErrorLog /ruta/al/fichero/de/log/archivo.log
   12.  
   13.         # Possible values include: debug, info, notice, warn, error, crit,
   14.         # alert, emerg.
   15.         ## Podemos cambiar también el nivel de log por el que más nos convenga
   16.         LogLevel warn
   17.  
   18.         CustomLog /ruta/al/fichero/de/log/archivo.log combined
   19.         ServerSignature On
   20.  
   21. #Configuracion de symfony
   22.  
   23.     Alias /sf /usr/share/php/data/symfony/web/sf
   24.  
   25.     <directory "/usr/share/php/data/symfony/web/sf">
   26.         AllowOverride All
   27.         Allow from All
   28.     </directory>
   29.  
   30.  
   31.     <directory "/var/www/src/web">
   32.         AllowOverride All
   33.         Allow from All
   34.     </directory>
   35.  
   36. </virtualHost>
   37.  

3. Por último activamos el host virtual, mod_rewrite y reiniciamos apache

   1.  
   2. sudo a2ensite dominio.com
   3. sudo a2enmod rewrite
   4. sudo /etc/init.d/apache2/reload
   5.  

Solo falta editar el archivo /etc/php5/apache2/php.ini y cambiar la linea magic_quotes_gpc = On por magic_quotes_gpc = On

Algunas aclaraciones. En mi caso el código fuente de la aplicación va en una carpeta de mi directorio de usuario y la carpeta /var/www/src es un enlace simbólico a esa carpeta. Este directorio también queda a vuestra elección, pero hay que tener en cuenta que suele ser necesario hacer cambios en el directorio con el código, por lo que es conveniente tener acceso de escritura y también que hay que hacer los cambios pertinentes en el fichero del host virtual de Apache.

Para comenzar a desarrollar podemos acudir a la página de Symfony y seguir su increíble “tutorial” escrito en forma de libro o en librosweb si preferís el libro en español.

La gente de Spread Firefox está intentando batir el record Guinness de descargas en 24h. Para ello, piden la colaboración de los usuarios.

Que ilusión me haría levantarme una mañana y descubrir que apenas recibo visitas en el blog ni en ninguna otra página desde Internet Explorer… sería casi un sueño hecho realidad…

¿Y tú? ¿Vas a descargar Firefox 3?

NOTA: Ya no es necesario este procedimiento. Han publicado una nueva versión alpha de Firebug 1.2 que corrige estos problemas con Firefox 3b5.

Hace unos días actualicé mi máquina a Ubuntu 8.04 (Hardy Heron). El caso es que esta versión incluye de serie Firefox 3 y eso supone un problema al no funcionar la versión estable de Firebug con esta versión del navegador. La versión beta (1.1) tampoco me dio buenos resultados, por lo que en un ejercicio de locura mental absoluta decidí que si una versión estable y una beta no funcionaban, seguramente lo haría una versión alpha. Así que sin más instalé la versión alpha de Firebug. Pero tampoco funcionó.

Después de investigar un par de días en el grupo de noticias de Firebug conseguí llegar a un hilo en el que se estaban intentando solucionar los problemas con esta versión. El caso es que en la revisión 562 de su repositorio de subversion, parece que han conseguido solucionar casi todos los problemas y Firebug funciona correctamente, con la única pega de que se abre en una ventana aparte en lugar de abrirse en un panel sobre el navegador.

Para instalar esta versión en nuestro Firefox 3 haremos lo siguiente.

1. Instalamos subversion si no está ya instalado en nuestra máquina:
   1. sudo aptitude install subversion
2. Instalamos ant, que es la herramienta que necesitaremos para empaquetar la extensión desde el código fuente.
   1. sudo aptitude install ant
3. Obtenemos la revisión que necesitamos del repositorio de subversion
   1. svn -r 562 checkout http://fbug.googlecode.com/svn/branches/firebug1.2/
4. Empaquetamos la extensión y la dejamos lista para instalarla en el navegador.
   1. cd firebug1.2
   2. ant

Tras el último paso, ant creará el archivo .xpi dentro de la carpeta dist. Ese es el archivo que tenemos que instalar.

Desde hace unos días se habla por todos lados de la beta 1 de Internet Explorer 8. Como siempre lo primero es descargarlo e instalarlo.

Después de la típica instalación, aceptar la licencia, etc. al intentar arrancar el programa me encuentro con un problemita: La Internet Explorer Developer Toolbar no funciona, sin embargo al arrancar el navegador nos permite buscar una actualización y nos lleva a una página donde nos explica como solucionar parcialmente el problema.

La primera en la frente, Google maps no funciona usando el famoso modo “Super Standar”. Aunque sí funciona usando el modo de compatibilidad con Internet Explorer 7. El problema es que para activar ese modo hace falta cerrar todas las ventanas del navegador, lo cual puede resultar algo incómodo ya que Internet Explorer no parece tener ningún sistema de almacenamiento de sesiones parecido al de Opera o Firefox.

Otro problema del navegador es que Flash tampoco parece funcionar demasiado bien. El navegador falla al intentar instalar Flash, de hecho la página de adobe no se muestra correctamente usando el modo “Super estandar”.

Algo que me parece nuevo y que me ha sorprendido gratamente es que cuando una pestaña se bloquea, el navegador se encarga de recargarla después de cerrarla.

En conclusión, sólo se trata de una beta de la nueva versión del navegador, pero me parece tan mal producto como las anteriores. El modo super estandar no consigue lo que promete y la estabilidad deja que desear, aunque esto es totalmente comprensible al tratarse de una beta.

Se está hablando últimamente de algunas actualizaciones en google reader. Un par de atajos de teclado nuevos, etc. Sin embargo parece que nadie se ha dado cuenta de que cuando das a marcar como leídos un número importante de posts Google Reader te pregunta si estás seguro… algo que no hacía antes. Una captura para demostrarlo

Edito: Parece que Mashable.com si que se ha dado cuenta de este detalle y además incluye un enlace bastante interesante con un montón de atajos para algunos servicios web 2.0.

Hoy me he quedado un poco sorprendido al visitar Google Analytics al darme cuenta de que había unas cuantas funcionalidades nuevas. A simple vista lo primero que nos encontramos es la posibilidad de usar 2 variables diferentes para graficarlas y compararlas de forma sencilla. Muy útil para comparar por ejemplo las visitas desde buscadores frente a las visitas totales, etc.

Una pequeña visita al blog de Google Analytics me ha dejado ver, que además de esa han añadido nuevas funcionalidades, a saber:

• Seis nuevos idiomas.
• Un nuevo código para llevar a cabo las estadísticas que sustituirá al actual en alrededor de un año.

Según el blog de Analytics el nuevo código viene cargado de nuevas características y si queremos cambiarnos ponen a nuestra disposición un documento pdf de 22 páginas en el que explican como hacerlo además de una página con la documentación necesaria para el uso de su API.

Está de más decir que todas estas funcionalidades son, como todo en es web 2.0 que nos rodea, beta, así que es posible que den algún que otro disgustillo a los usuarios.

Enlace: Announcing new graphing tools, ga.js tracking, and six new languages – Google Analytics Blog
Bia: Digg

Para que luego digan que Internet Explorer es seguro.

El primer gráfico muestra el número de errores frente al tiempo. El segundo gráfico muestra el número de errores graves frente al tiempo. Venga… ahora una pregunta para nota… a ver si adivináis cual es el navegador con más errores sin leer la leyenda de colores.

Los gráficos no provienen de un estudio de la fundación Mozilla, ni de Opera, y por supuesto no es de Microsoft. El estudio ha sido realizado por Web Devout una web que intenta promover las buenas prácticas en la web y los datos usados son de Secunia, una empresa de monitoreo de seguridad de software.

Echándole un ojo al estudio detenidamente se deduce lo que ya todos sabíamos, que Internet Explorer tiene más agujeros que un colador y que los demás navegadores también tienen errores de seguridad… pero no son tantos ni tan grandes.

Enlace: El estudio
Via: Genbeta

Me encantaría poder explicarle esto a algunos clientes, pero nada, ellos insisten en que lo mejor es PDF y no hay quien los haga entrar en razón… da igual que te paguen para que les aconsejes y que supuestamente tu seas “el que sabe de esas cosas”. Al final ellos hacen lo que les da la gana.

Menos mal que no hacía falta posicionar la web ni nada por el estilo…

¿Por qué otra librería que hace lo mismo?

Hace poco tuve que terminar de darle forma a un proyecto con Joomla! una de las cosas que más trabajo cuesta es darle estilo a un formulario usando CSS. Probé un par de soluciones como FancyForm y CRIR pero ninguna se adaptaba al código generado por Joomla, así que no me quedó más remedio que escribir mi propio script que hiciera lo propio.

Como funciona.

mooSmartForms está inspirado en otras librerías como CRIR y FancyForm, por lo tanto usa el mismo mecanismo. Mediante Javascript oculta los controles del formulario y añade un estilo para el control desactivado y otro para el control activado a la etiqueta asociada al control.

La librería permite aplicar una clase CSS a los elementos. Hace uso de mootools, de ahí el “moo” del nombre. Para que nuestro código sea “estilizable” tiene que tener las siguientes características.

• Cada checkbox o radio input necesita tener un elemento label asociado a su id.

Listo no hay más requisitos. A continuación un ejemplo de como sería ese código “estilizable”.

Para que el script haga su trabajo hay que insertarlo en la página y además necesitamos mootools.

Un pequeño ejemplo del aspecto que podemos conseguir con la librería. Ejemplo de mooSmartForms

Aquí tenéis mooSmartForms para descargarlo y usarlo como queráis. Tiene una licencia MIT, así que podéis hacerle todas las “perrerías” que os apetezca. Si queréis personalizar el estilo solo tenéis que editar el fichero mooSmartForms.css

Soporte.

He probado mooSmartForms con los siguiente navegadores:

• Internet Explorer 6 y 7
• Firefox 2
• Konqueror
• Safari 3 ( gracias a Álvaro por el testeo )
• Opera

Si conseguís que funcione en otro navegador agradecería que me lo hicierais saber . Aunque también se agradece un aviso con cualquier error que encontréis o con problemas que se me hayan pasado.

Para futuras versiones.

• Estilos para el resto de elementos de los formularios.
• Posibilidad para discriminar los elementos que queremos “estilizar”.
• Capacidad para añadir efectos a las transicciones entre los estados de los elementos.
• Posibilidad de elegir el nombre que queremos darle a las clases CSS de los elementos.

Para terminar.

Si encontráis algún error o algún problema podéis dejar un comentario en el post. Sin necesitáis añadir código al post, por favor, utilizad esta web.

Créditos.

Las imágenes que se usan para el estilo de ejemplo pertenecen al tema de iconos silk icons que tiene licencia Creative Commons.

Estos días me he tenido que pelear bastante en serio con Google Maps y Google Local Search. Necesitaba un mapa que permitiese buscar una dirección y que pudiera, una vez encontrada la dirección, guardarla en una base de datos.

Por suerte Google Maps permite hacer cosas así con poco código aunque de todas maneras me tocó pelearme durante un par de días con su API hasta que conseguí encontrar lo que quería. Casi todo lo necesario se encuentra en la documentación de su API, el único problema es que necesitas saber exactamente lo que buscas antes de poder encontrar algo. En este enlace está la ayuda de Local Search, que aunque no es demasiado extensa tiene algunos ejemplos interesantes.

Mis requsitos exactos eran los siguientes:

• Un mapa con un cuadro de búsqueda
• Un sistema para poder moverse por los resultados de la búsqueda de forma sencilla para el usuario

En este caso particular solo necesitaba las coordenadas del centro del mapa una vez que el usuario ha encontrado lo que buscaba. Este dato se copiará en un campo oculto de un formulario para poder guardarlo en una base de datos. En el ejemplo se mostrarán las coordenadas en un DIV junto al mapa.

Una vez que sabemos lo que necesitamos nos ponemos manos a la obra. Vamos a repasar las herramientas que vamos a usar:

• Lo primero que necesitamos es una key para acceder al API. Para ello visitamos esta dirección. Lo único necesario para conseguirla es una cuenta en Google, sirve la que se usa para acceder a GMail.
• Como vamos a hacer un uso intensivo de Javascript es una buena idea buscarse un ayudante. En mi caso he echado mano a la librería mootools 1.11 por que es con la que mejor me llevo, pero imagino que sirven otras librerías del mismo estilo como jQuery o prototype. El motivo para usar este tipo de librerías es que permiten moverse libremente por el árbol DOM del documento HTML y capturar eventos que ocurren en él de forma sencilla. Dos tareas que vamos a necesitar para nuestro ejemplo.
• Por último no nos puede faltar nuestra navaja suiza para el desarrollo web: Firebug ya que nos permitirá depurar y testear nuestro Javascript de forma sencilla.

Aquí podéis encontrar el ejemplo terminado y aquí os lo podéis descargar. Tiene una licencia MIT, así que podéis hacer lo que queráis con él, aunque agradecería un aviso si lo usáis para cualquier cosa, simple curiosidad

Por último unas cuantas aclaraciones. He intentado comentar el código lo más claramente posible, si tenéis cualquier duda podéis preguntar en los comentarios e intentaré responder. Si tenéis que añadir el código al post, por favor, hacedlo aquí (aquí tenéis una ayuda por si no sabéis usarlo) y añadid un enlace en el post.

He comentado el codigo linea por linea para los que, como yo, no tengan ni idea de Javascript, mootools o Google Maps. Espero que a ellos les pueda servir como ejemplo de lo que se puede hacer con estas 3 tecnologías juntas.

Por motivos de trabajo llevo una temporada trabajando y destripando Joomla 1.5. Es el principal culpable de que últimamente postee con cuentagotas.

Este CMS es uno de los más usados del mercado y en esta nueva versión han mejorado bastante. Su licencia es GPL 2 y está programado en PHP.

Ya había usado las versiones 1.0.X con anterioridad y me sorprendían enormemente su facilidad de uso y la cantidad de extensiones, plugins y módulos que se podían encontrar para él. Aunque administrar una página web no es una tarea trivial Joomla facilita enormemente la tarea. Dispone de herramientas para administrar usuarios, artículos (en forma de weblog), contactos, enlaces, etc. y además su API para la creación de plugins y componentes es bastante extensa y soporta el patrón MVC.

Hasta ahora nunca había tenido que programar un componente para Joomla, sin embargo la tarea no es imposible. En la página web de Joomla podemos encontrar una ayuda bastante buena para esta tarea: un API bastante completo (aunque algo caótico) y algunos ejemplos de código además de un foro con bastante actividad.

El principal problema es que la documentación de la versión 1.5 aún no está completa y claro, tarde o temprano tienes que acabar buceando en el código de los componentes que forma el núcleo de Joomla a los cuales, dicho sea de paso, les falta un poquito de documentación. Esa es la única pega que le veo, aunque quizá sea por que estoy muy acostumbrado a Java y la documentación que incluye de serie me resultaba muy cómoda.

Por cierto en Leandono’s Blog se puede encontrar la primera parte de un tutorial bastante prometedor para la creación de plantillas de Joomla.

Por último recomendaros algo de bibliografía sobre el tema: Learning Joomla 1.5 Extension Development de Packt publishing esta muy bien y además de incluir muchos ejemplos de código avanza paso a paso en el desarrollo de una web completa con Joomla y explica muchas cosas acerca del API de Joomla que no son fáciles de averiguar.

Si el trabajo me deja un poco de tiempo intentaré postear algún ejemplo “tonto” de un componente muy básico.

Ya dije en la entrada “Extensiones útiles para Firefox ( mis favoritas )” que algunas de las extensiones que uso son bastante específicas para el diseño web. Intentaré hacer una pequeña serie de posts hablando de ellas y dando algunos consejos para su uso.

Aunque hay bastantes extensiones que pueden resultar muy útiles para el diseño y desarrollo de páginas web yo uso principalmente dos, que son las siguientes ( en orden de importancia según el uso que les doy ):

1. Firebug
2. Webdeveloper Toolbar

Sin lugar a dudas para mí la estrella es Firebug. En este primer post voy a centrarme en ella y poco a poco veremos como usarla para que nos asista en el desarrollo.

Firebug: Instalación

Para instalar la extensión nos vamos a su web y pulsamos en el botón grande y naranja que dice “INSTALL FIREBUG 1.0 FOR FIREFOX”. Esta es la parte fácil del tutorial

Lo más básico.

Mediante firebug podemos acceder al árbol DOM de la web y editarla “on the fly”, además es perfecto para darle esos últimos retoques a las hojas de estilos que se nos resisten. También podemos usarlo para optimizar el tiempo de carga de la página, averiguar si hay algún elemento que no carga bien, depurar nuestro javascript, y muchas otras cosas que yo todavía no he descubierto. Para nuestro ejemplo usaremos un pequeño fichero HTML que contiene 2 div y una hoja de estilos bastante rudimentaria.

Como podéis ver es algo bastante rudimentario lo primero que vamos a hacer es inspeccionarlo y ver lo que lleva por dentro. Para ello abrimos la web de ejemplo y abrimos firebug con ella abierta. Para abrir podemos abrir Firebug por las siguientes vías.

• Herramientas > Firebug > Open Firebug
• Pulsando en el botón correspondiente en la barra de estado del navegador

(más…)

Hoy me ha surgido un problema bastante tonto con una página web que estaba terminando de diseñar para un cliente. Uno de los requisitos es que el cliente necesitaba un cuadro de texto en el que insertar una descripción en texto con formato. Hasta ahí todo bien, hasta que me he dado cuenta de que el cliente no sabe ni tiene por qué saber formatear un texto en HTML. Buscando un poco en Google he encontrado TinyMCE ( DEMO ).

TinyMCE es un editor HTML WYSIGYG ( What You See Is What You Get ) programado en Javascript que se integra en páginas web de forma rápida y sencilla. Convierte los <textarea> en editores completamente funcionales y muy configurables. Una lista de algunas de sus características:

• Soporte para varios navegadores.
• Extensible mediante temas y plugins.
• Soporte para diferentes lenguajes.

Al final parece que el cliente no se va a tener que pelear con HTML… menos mal.

Por cierto, ¿ he dicho ya que tiene licencia LGPL ?

Llevo unos días jugando con jQuery. Ya he dicho en algún post anterior lo mucho que me ha sorprendido la facilidad de uso y la potencia de esta librería. Por ahora solo he podido jugar un poco con los selectores y los efectos, aún no he tenido oportunidad de usar las herramientas de las que dispone, tanto para facilitar el uso de AJAX como para muchas otras cosas. De todas formas aquí va un ejemplo, un poco tonto, eso sí… de lo que se puede hacer con jQuery de forma muy sencilla.

Ejemplo de jQuery

En un post anterior ya hablé de jQuery, lo usé para que los enlaces de OBG incluyan un icono a la izquierda que indique cuando salen del blog.

Este es el código en cuestión. Es una pequeña demostración de la potencia que nos brinda esta librería. Uno de los puntos fuertes de jQuery son los selectores, que nos permiten recorrer el árbol DOM del documento XML en cuestión; en nuestro ejemplo es HTML. jQuery nos permite mezclar selectores CSS con XPATH, con lo que podemos seleccionar cualquier elemento de la página de forma sencilla. Además, la documentación es bastante completa.

Yo he tenido algún quebradero de cabeza al intentar usarla por que uno de los plugins de OBG usa Prototype, otra librería similar a jQuery y ambas usan el mismo atajo para los selectores: $. Por suerte la documentación de JQuery explica qué hacer en estos casos.

Por cierto, el código de ejemplo, traducido a lenguaje natural sería algo así como: “Selecciona todos los enlaces cuyo destino no contenga ‘otrobloggeek.com’ y ‘ponlos guapos’”.