Agile Programming

Web

Written on October 11th, 2009

Rotar imágenes y elementos solo con CSS

Sabías que se pueden rotar imagenes (y cualquier elemento HTML) utilizando solo CSS?
Añade estas clases CSS a tus elementos HTML para rotarlos en pasos de 90 grados.

.rot0 {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	rotation: 0deg;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.rot90 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	rotation: 90deg;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot180 {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	rotation: 180deg;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot270 {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Read the rest of this entry »

Written on July 19th, 2008

Menu web multinivel con HTML y CSS

Un recurso muy utilizado en web son los menús horizontales y verticales, y realmente los que más problemas nos presentan son estos últimos debido a la incompatibilidad de algunos navegadores que no siguen los estándares. Existen diversas formas de llevar a cabo los menús horizontales con elementos anidados: desde mostrar los submenús con javascript, hasta hacerlo directamente con CSS. En esta ocasión trataré de explicar como se crea un menú con esta última opción, por su portabilidad además que nos va a ser indiferente que el cliente tenga o no Javascript en su navegador. imagen 21 Menu web multinivel con HTML y CSSEl resultado final debería ser algo como lo que se ve en la imagen. El nivel de anidamiento es indiferente y tengo comprobado que funciona en todos los navegadores (salvo lógicamente links). El código HTML es bastante simple, para anidar sub-menús simplemente se inserta una estructura <ul><li></li></ul> dentro de los <li> así la hoja de estilos (que también adjunto) recoja la estructura correcta y muestre nuestro precioso menú. Read the rest of this entry »

Written on May 8th, 2008

Configuración de VirtualHosts en Nginx (Nginx II)

Echa la compilación de nuestro nginx ahora voy a explicar mas o menos mi sistema para gestionar virtualhosts con nginx. Primero de todo, suelo meter los virtualhosts en /opt en el que crearemos el esqueleto para cada slice.

Configuramos nginx para virtualhosts utilizando ficheros separados para cada uno de ellos:

mkdir -p /usr/local/nginx/conf/{sites-available,sites-enabled}

Substituímos con lo siguiente en el fichero /usr/local/nginx/conf/nginx.conf, para que lea todos los ficheros en sites-enabled y de paso lo limpiamos:

user www-data;
worker_processes  1; #Número de workers configurable según necesidades

error_log  /var/log/nginx/error.log;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    access_log  /var/log/nginx/access.log;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    tcp_nodelay        on;

    gzip  on;

    include /etc/nginx/sites-enabled/*;

}

LLegados a este punto ya tenemos nuestro nginx preparado para servir cualquiera de los distintos tipos de servidores que soporta (web, proxy web inverso, mail, balanceo de carga). Como aquí nos centraremos en configurar un servidor web con virtualhosts, sigo relatando las operaciones.

Read the rest of this entry »

Written on May 7th, 2008

Web Server optimizado con Nginx (Nginx I)

nginx black logo Web Server optimizado con Nginx (Nginx I)Este post inicia una serie de post sobre Nginx, instalación, configuración y optimización todo fruto de el trasteo, la búsqueda de la máxima optimización, en parte impulsada por la limitación de recursos en general de el servidor en el que tengo alojada este humilde site.
En mi incursión en optimizar tanto el rendimiento como el consumo de memoria en mi servidor casero he estado probando Nginx. Despues de muchas pruebas y de escuchar en la red que era el mejor servidor.

Pero vayamos y echemos un ojo a todo de esta maravilla rusa. Nginx (“engine x”) es un servidor HTTP y proxy inverso de alto rendimiento, y un servidor proxy para IMAP/POP3/SMTP. Nginx fue desarrollado por Igor Sysoev para Rambler.ru, el segundo sitio web más visitado de Rusia, donde ha estado, y sigue, funcionando en producción más de dos años y medio. Igor ha lanzado el código fuente bajo una licencia estilo BSD. Nginx es conocido por su estabilidad, gran conjunto de características, configuración simple, y bajo consumo de recursos.
Nginx en estos momentos está haciendo mucho ruído precisamente porque para el caso de montar servidores web es muy rápido, sino el mejor, sirviendo estáticos, esto sumado a la posibilidad de configurar servidores proxy web inversos, nos permite tener un servidor con un rendimiento increíble y lo más importante y lo que más me impactó, en sólo 4 mben runtime.

Nginx es usualmente utilizado como reemplazo de apache que gestiona muchas conexiones concurrentes, como servidor proxy de balanceo de carga, como servidor proxy de mail, entre otros.

Dejemonos de alabanzas y procedamos a la instalación del mismo: En el momento que escribo tanto Debian Testing como Sid tienen unas versiones desfasadas  tiene nginx en su repositorio pero es una versión algo desfasada, 0.4.13, por lo que vamos a compilar e instalar la última versión:

Antes de nada instalaremos unas cuantas dependencias:

sudo aptitude install libpcre3 libpcre3-dev libpcrecpp0 libssl-dev zlib1g-dev

Hecho esto, ahora procedemos a recoger los fuentes, compilar y configurar.
Read the rest of this entry »