El rincon de palangano

El objetivo de los scripts de instalación para el sistema de módulos para cakephp es automatizar el proceso de descarga, instalación, actualización y desinstalación de módulos en cakePHP.

Antes de seguir, veamos a que llamamos módulo.

Un módulo es un grupo de funcionalidades, agrupadas por alguna razón en especial. La idea es tener módulos para tareas que siempre usamos y queremos “tirar” dentro de un nuevo proyecto. Un módulo podría ser un sistema básico de usuarios, la expansión del mismo a un sistema de grupos y permisos más elaborado, una lista de email, páginas cms, etc, etc. Básicamente un paquete de funcionalidad que queremos agregar a un sitio.

Por que no usar plugins? Bueno, los módulos podrían ser plugins, ya que hasta ahora no hemos hablado de la estructura del módulo en si, podemos decir que el módulo, aparte de los archivos mencionados en el post anterior, puede contener cualquier archivo que necesite ser instalado en nuestro directorio APP. Con esto podemos tener módulos con controllers, models, views, y también con helpers, behaviors, components, vendors, imágenes, css, scripts, y casi cualquier cosa que nos imaginemos, sin el problema que representa copiar archivos de un proyecto a otro.

Teniendo en cuenta que la instalación, mantenimiento y desinstalación serán automáticas, el único problema que nos queda es que los archivos de distintos módulos no se solapen. A esto lo podemos lograr al tener ciudado y ser metódicos a la hora de crear los módulos, pero nuestro sistema también deberia avisarnos si un módulo que estemos por instalar sobreescribirá un archivo de otro módulo ya instalado, o cualquier archivo ya existente.

Resumiendo el proceso de instalación tenemos:

1. Descargar la versión requerida del repositorio (Pedir usuario, password y versión de ser necesario)
2. Chequear que el módulo sea instalable (Tenga los archivos necesarios y se cumplan las dependencias)
3. Si el módulo ya se encuentra instalado, se pregunta al usuario que curso de acción tomar.
4. Ejecutar script pre_install del módulo.
5. Guardar copias de los archivos existentes si son del mismo módulo.
6. Informar si existe un archivo que no corresponde a otra version del modulo y será reemplazado.
7. Instalar archivos nuevos.
8. Guardar en la DB de modulos los datos del nuevo módulo con estado “instalando”
9. Procesar el archivo schema.sql del módulo.
10. Ejecutar script de post_install
11. Registrar el módulo como instalado.

Esta es la linea general a seguir por el script de instalación del módulo. Aspiramos a un script que se pueda usar de la siguiente forma

module-get install|update|uninstall <module-name> [version]

Y creo que en sin querer bautizé a mi script. La idea es usar el mismo script para las tres tareas, instalar, actualizar y desinstalar un módulo. El parámetro de versión seria opcional y si no está presente, el script instalará la ultima versión del módulo especificado.

Para terminar (por ahora), cabe aclarar que las operaciones de instalar, actualizar y desinstalar deberían ser “lo más atómicas posible”, es decir que si algo nos impide seguir con la instalación, este script debería poder dejar las cosas tal y como estaban antes de que comienze a hacer cambios (tanto en archivos como en db).

Hace bastante que vengo trabajando con cake, y una de sus mejores ventajas es la reusabilidad del código que uno hace. El único punto débil en este aspecto es la ausencia de un sistema bien organizado y modular.
Lo que planteo en este artículo es definir un sistema de módulos y una serie de scripts que instalen, configuren, y desinstalen automáticamente.

---

Antes de continuar, cabe aclarar que este post no plantea ser una solución definitiva, sino una idea que puede evolucionar con el tiempo en algo muy útil.

Dicho sistema debe ser de fácil mantenimiento y actualización. Inspirado en el sistema de paquetes de Debian, los módulos deben tener dependencias,scripts de pre y post instalación/desinstalación, auto configuración de la base de datos, y un sistema de registro que nos diga qué módulos están instalados y cuáles no.

Usaremos una base de datos sqlite, que se integrará al sistema cake sin problemas y podremos mantener la información de todos los módulos instalados.

La primera tabla que necesitamos es modules (hare todo en inglés para mantener la consistencia con el resto del sistema) cuya estructura es (o podría ser) la siguiente:
modules(id,codename,name,version,description,status)
Con esto podemos guardar datos sobre los módulos instalados o a medio instalar.

El directorio APP/conf me parece el lugar ideal para guardar los datos de los módulos, así, tendremos todo en APP/conf/modules, un archivo sqlite (modules.sqli) y subdirectorios con el nombre de cada módulo instalado.

Dentro de cada directorio de módulo tendríamos los siguientes archivos:

• module_specs.php
• db_schema.sql
• install_scripts.php

El primero (module_specs.php) es el que indicará a nuestro script de instalación los detalles del módulo. Debe contener valores para las variables:

• $name: opcional, el nombre del módulo. El default es el nombre del directorio.
• $description: opcional, la descripción del módulo.
• $depends: un array de nombres de módulo de los que éste depende.

El archivo db_schema.sql contiene las ordenes sql para crear la(s) tabla(s) necesaria(s) para el módulo. También puede contener datos iniciales para las mismas.

Este sería el esquema básico para el sistema de módulos para cakephp (hasta ahora podría usarse independientemente del framework).
En el próximo post describiré el proceso de instalación de módulos.

Es el eslogan del sitio 403day.org, que nos plantea intentar defender la web de las deficiencias de ciertos navegadores a la hora de implementar los estándares web. Como desarrollador web siento que es mi responsabilidad difundir esta iniciativa, por el bien de la web y el futuro de los estándares.
¿La idea? el 4 de marzo de 2008 es el día 403 (en honor a la respuesta http de “prohibido el acceso”) y se frenará el acceso a todos los usuarios que usen Micro$oft Internet Exploter.
más info en la página de 403.

Estuve usando mi código el código que encontré por ahí para habilitar las transparencias en ie6 y he hecho un par de mejoras. A saber:

Incluyo el css con comentarios condicionales solo para ie6:

<!--[if lte IE 6]>

    <?php echo $html->css('fix_ie');?>

<![endif]-->

Como hago esto, no hace falta poner el * html antes de cada selector.

Además, tengo dos bloques de código distintos, uno es para imágenes sin repetir (no-repeat) y el otro para imágenes como sombras, bordes, etc. Que si bien son repeat-y o repeat-x, a mi me da lo mismo si se repiten o se estiran.

El problema con este método es que no encontré forma de hacer que la imágen se repita. Pero como para lo único que necesito imágenes repetidas es para hcer sombras, con una imágen de 1px, me da lo mismo si repite o estira, por ende puedo usar el otro modo.

El codigo entonces me queda con una base de dos bloques (dentro de fix_ie.css):

img, .png-no-repeat{
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(
    this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
    this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
    this.src="transparent.gif"):(this.origBg = this.origBg? this.origBg
    :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
    this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "',
    sizingMethod='image')",
    this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

y para los que deben “repetirse”:

.png-repeat {
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(
    this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
    this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
    this.src="transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
    this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
    this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

Nótese donde dice sizingMethod=’scale’ que es la parte que hace la magia.
Agregando esto en nuestro html, ahora podemos hacer que cualquiera de nuestros pngs cargue la transparencia, tanto para no-repeat como para los repeat-x o repeat-y.

Un problema con el que me topé es que a veces, ie6 hace desaparecer el fondo cuando le pongo la opcion scale o repeat, la solucion a esto ha sido siempre especificar explícitamente el ancho en píxels del div en cuestión. Parece que ie tiene problemas para calcular tamaños.

Otra solución para el div que desaparece cuando le pongo transparencia es darle position:absolute; al div.

Leí por ahí que a algunas personas les desaparecen los links dentro de un div con fondo semitransparente. Y leí tambien que la solución a eso es poner position:relative; a todos los links dentro del div.

Hablando de Hackers….

Bueno, lo prometido es deuda (o algo asi), aqui va una forma de parchar las imagenes que ya tenemos en el sitio en png para que se vean en el apestoso: simplemente agregando un archivo con el siguiente código (extraido de aca):

* html img,
* html .png { behavior: expression((this.runtimeStyle.behavior="none")
            &&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG"
            && this.src.toLowerCase().indexOf('.png')>-1?
            (this.runtimeStyle.backgroundImage = "none",
            this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader
            (src='" + this.src + "', sizingMethod='image')", this.src="transparent.gif"):
            (this.origBg = this.origBg? this.origBg
            :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
            this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "',
            sizingMethod='crop')",
            this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
       );

Si, es medio asqueroso, pero funciona. Para que siga validando:

<!--[if lte IE 6]>
link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->

Y listo!
Todos los tag img con png y transparencia deberian ser automagicamente reemplazados por el AlphaImageLoader.
Además, si hay algun div con fondo png semitransparente, con solo agregarle la clase png entra dentro de los
selectores y arregla.

No se que tan nuevo sera esto en general, pero a mi me sirve bastante mucho.

Cabe aclarar que el codigo usa un gif transparente de 1×1 para parchar la imagen, aca lo tenes
para que no tire errores, hay que colocarlo en el mismo directorio donde está el css. Hay que ponerlo en el “directorio actual” o bien modificar la ruta en el css para que apunte bien al gif, por ejemplo:

this.src="/image/transparent.gif"

Solo faltaria retocar cosas como escalado para algunos fondos o detalles asi, pero seguro se darán cuenta de cómo hacerlo

Un sitio muy útil y que nos sirve a los desarrolladores web, de los muchos que existen sobre esto, mi preferido:
BrowserHosts

Extraido del sitio:

Browsershots hace capturas de pantallas de su diseño web en distintos navegadores.Es un servicio de código abierto creado por Johann C. Rocholl.Cuando usted envía su dirección web, es añadida a la cola de trabajos.Un número de computadoras distribuídas abrirá su sitio web en su navegador.Luego se harán capturas de pantallas y se cargarán aquí en el servidor central.

Es básicamente eso, se ingresa una url, se selecciona navegadores y sistemas operativos que se quieren probar, y luego se espera a que se generen las imágenes.
En mi experiencia, en mas o menos media hora se pueden tener mas de 20 screenshots de pagina completa en distintos browsers. Bastante bien, considerando que es gratis, libre y sobre todo, bastante nuevo

Ofrecen tambien la posibilidad de colaborar al proyecto, simplemente instalando un programa que usará el procesadror mientras este ocioso, mas o menos como la idea de seti@home, totalmente no-invasivo y no deberia generar molestia alguna, simplemente genera screenshots cuando la compu no esta haciendo nada más.

Tambien, al contribuir al proyecto (tanto de forma monetaria como en cpu) bajan los tiempos de espera para los screenshots.

Termino felicitando a la gente de browserhosts por una tan buena version 0.4 beta que anda, en mi opinion, demasiado bien. Pruebenlo y me cuentan.

A vos, diseñador, programador web, creá webs accesibles!
Y sacate una foto!!

Me sumo a la iniciativa de, como no podia ser de otra manera: creawebsaccesibles.com.ar/

Hay mucha información y fotos, la idea es, primero que todo, difundir la usabilidad y accesibilidad como parámetros de buen diseño.

Bueno, en el sitio está toda la info, incluso el folletito para bajar y sacarte una fotito

Technorati Tags: accesibilidad, usabilidad