sábado, 17 de enero de 2009

Truco CSS - fijar ancho mínimo del elemento body

No es ninguna noticia que en CSS, incluso en navegadores que cumplen la mayoría de los estándares, no funcione todo como nos esperamos y haya que recurrir a trucos, que además la mayoría de las veces parecen de lo más irracionales.

Vía un artículo de script&style me entero de un hack útil que no conocía: fijar el ancho mínimo del elemento body. Hice la prueba únicamente en FF3 (firefox 3) y funciona.

Problema:

Si tenemos una imagen de fondo de, supongamos, ~2000 px, centrada dentro del elemento body, al redimensionar estrechando la ventana del navegador, el elemento body tambien se estrechará redimensionando su imagen de fondo, con lo que es posible que por debajo de un ancho determinado se desencaje el diseño. Nos gustaría fijar un ancho mínimo, por debajo del cual el elemento body no siga estrechándose. Si probamos a asignar únicamente la regla min-width al elemento body, ésta parece no aplicarse.
// sin el hack, la imagen seguirá redimensionándose por debajo de ese ancho
body{min-width:958px;}


Si no se utiliza la regla color en el elemento html, la imagen de fondo se redimensiona, desencajando el diseño.

El hack:

Para que la regla min-width surta efecto, es necesario añadir (no me preguntéis porque, pero funciona) una regla color, asignando el valor a, por ejemplo, blanco, al elemento html.
html{color: #000;} // sin esto el min-width del body no funciona
body{min-width:958px;}


Si se utiliza, la regla min-width del elemento body hace efecto, fijando el ancho mínimo por debajo del cual la imagen de fondo deja de redimensionarse.

sábado, 3 de enero de 2009

Ajaxify: Ajaxifica los sitios web estáticos al instante

Ajaxify es un plug-in de jQuery que convierte todos los enlaces de un página web en peticiones Ajax.

Así, con tan sólo añadir una línea (la propia invocación al método que asociará los eventos onclick a todos los tags <a> que sean de la clase 'ajaxify' y la propia declaración de la clase 'ajaxify' en cada tag de enlace <a> que queramos ajaxificar), es posible ajaxificar (hacer algo más dinámica) la página estática.



Soporta :

* Historial & marcadores
* Cargas parciales desde el output
* Cuatro eventos diferentes
* Formularios
* Animaciones

Sitio Web
Demo

¿Como detectar navegadores móviles con PHP?

En el sitio web DetectMobileBrowsers.mobi nos dan un función e información para poder detectar navegadores móviles. Con lo que se podrá detectar:

* iPhone
* Opera Mini
* Android
* Blackberry



Tiene un generador online de la función que te guíara paso a paso para que crees una función personalizada acorde a cómo quieres tratar cada navegador.

El código es gratuito para sitio web sin lucro.

Sitio Web
Descarga

Potente creador/editor de menús CSS: CSS QuickMenu

CSS QuickMenu es una potente aplicación web para crear menús CSS.



Una vez seleccionado el tipo de menú y pulsando sobre el botón "customize menu", se tiene acceso al editor.

El editor permite:

* Añadir/actualizar menús y submenús
* Actualizar colores, fuentes, bordes,...
* Elegir las animaciones
* Elegir las formas y contornos CSS
* Decidir si el menñu será accesible vía teclado, si será vertical/horizontal y mucho más...

También permite que le añadas tus propios estilos CSS y comprobar los resultados instantáneamente.

Después de haber creado el menu, para obtener los códigos HTML y CSS hay que dar al botón de "save" (Desde el menú superior File -> Save ó pulsando sobre el botón que tiene el icono de un disquete azul, el primero a la izquierda).

Conversión de px (pixeles) a em y viceversa

En la web "PXtoEM.com" se puede visualizar y calcular cómodamente la conversión de unidades dadas en px (píxeles) a em (unidad de longitud relativa a la altura de la fuente del elemento), y viceversa. Ambas unidades tienen un uso extendido en las definiciones de hojas de estilo ( particularmente en css).



Otro conversor de pixeles a em.
(En el momento de redactar este post, éste último conversor seguía teniendo algunos fallos para Opera y Safari).

Open Source Monitoring App.: Pandora FMS

Pandora FMS es una aplicación open source (de código abierto) que puede ser utilizada para tareas de monitorización de "cualquier" cosa online como:

* comprobación de que el sitio web está accesible o ha caído
* si el contenido de un sitio web ha cambiado
* espacio en disco o carga de la CPU del servidor remoto (vía SNMP o TCP/IP)
* y muchas más...



Pandora FMS puede ejecutarse en cualquier sistema operativo, gracias a módulos específicos para cada plataforma, recibiendo y enviando información al servidor.

Se pueden obtener informes en tiempo real para cada proceso monitor y configurar que se envien a por correo electrónico a las direcciones que establezcamos.

Pueden tambien enviar notificaciones de eventos vía e-mail, SMS o Jabber (MSN, GTalk,...) a los usuarios deseados.

P.S. Cabe mencionar que Pandora FMS no es un simple script que se instala. Esta formada por varios ficheros shellscript (clientes en UNIX/Linux), una aplicación web en PHP (consola), un poco de código C++ (clientes en Windows), un poco de código PERL5 (servidor) y otro poco de estructuras y datos en SQL (base de datos).

Página web oficial
Descarga
Demo