Category Archives: Software Web

Aplicaciones web open source o freeware.

Poniendo una máscara a las imágenes con CSS

Cuando construimos un sitio, muchas veces por cuestiones de diseño queremos poner un marco a algunas imágenes. Cuando me refiero a marco, significa algo más que simplemente un borde con CSS, sino mas bién algo como esto:

Foto

El tema es que esto implica utilizar un software de edición de imágenes y ajustar el marco a cada una de las imágenes que utilicemos. Si bien para el diseñador esto no será un problema, al construir sitios dinámicos donde sea el usuario final quien suba las imágenes que el desee para un contenido particular, nos encontramos que probablemente esto sea una tarea técnica que esté mas allá de lo que nuestro cliente sepa y pueda hacer.

A continuación quiero mostrar una simple técnica de superponer una imagen sobre otra, de modo que el marco se monte sobre la otra imagen.

Primero necesitamos la imagen del marco con su interior transparente:

Mascara

Este es un archivo PNG de 8 bits de profundidad de color, con transparencia de índice. Es decir, es lo mismo que un GIF. Recordemos que Internet Explorer hasta la versión 6 por lo menos, no soporta archivos PNG con canal Alfa, así que es importante que sea transparencia de índice.

Luego, necesitamos la imagen a la que pondremos el marco:

Fondo

Esta puede ser cualquier imagen. Para el caso, he usado un GIF animado.

Finalmente, lo único que debemos hacer es poner una imagen de fondo de la otra, con CSS:

<img src="mascara.png" width="115" height="100" style="background-image:url(imagen.gif);" alt="texto" />

Lo que nos da el siguiente resultado:

Esto nos permite hacer que la imagen que el usuario suba, cualquiera sea, le sobreimpondremos el marco artístico. Al utilizar background-image, también si queremos podemos llegar a posicionar el fondo en un punto exacto detrás del marco, no necesariamente arriba a la izquierda.

Nuevas Tipografías de Windows Vista

Microsoft incluirá 6 nuevas tipografías ClearType y OpenType en sus próximos productos.

La colección incluye dos serif, tres sans serif, y una fuente monospaceada. Optimizadas para una lectura en pantalla, pero algunas de ellas también útiles para impresión.

Las muestras:

Corbel
Candara
Calibri
Cambria
Constantia
Consolas

Si quieres empezar a utilizarlas, al pie hay un enlace donde descargarlas.

En otra parte comentan también que Windows Vista incluirá una tipografía española del XVIII, la Ibarra Real.

Mas información:

Por último, un sitio y una campaña para no utilizar nunca más la quizás peor tipografía diseñada por Microsoft: la Comic Sans.

Typetester: Eligiendo la tipografía para nuestro sitio

TypeTesterTypetester es una aplicación online que nos permite seleccionar y comparar tipografías para generar luego el código CSS correspondiente.

Es posible comparar hasta 3 tipografías pudiendo alterar propiedades como tamaño, colores, espaciado y otros, viendo instantáneamente todas las posibilidades de cada una (negrita, cursiva, versalitas, etc), lado a lado.

Adicionalmente la sección Resources del sitio tiene un interesante listado de sitios relacionados a la tipografías en la web.

El misterio de los numeros en WordPress.com al descubierto

El misterio de los números que aparecen en el panel de control de WordPress.com se ha revelado. Es parte de un nuevo paquete de beneficios para los usuarios de WordPress.com: Akismet

Akismet es un plugin para WordPress (ojo, no para WordPress.com, estos blogs ya están integrados), y un sistema/filtro anti spam en los comentarios de los blogs.

Es decir, si tienes dos blogs, uno funcionando con WordPress, y otro EN WordPress.com, tu primer blog se beneficia de este sistema.

Akismet es un servicio ofrecido por la nueva empresa de Matt Mullenweg (el fundador de WordPress y principal desarrollador), Automattic.
Akismet se encarga de filtrar en forma centralizada todos los comentarios que se insertan en los blogs del sistema. La ventaja obvia es que si un comentario es detectado como spam en un sitio, el mismo es incorporado a la base de datos de Akismet, y será detectado por todos los sitios conectados a Akismet.

El plugin no borra los comentarios, si no que los marca y evita que se publiquen, luego se borrarán automáticamente en 15 días.

En este blog ya tuve mis encuentros personales con el spam, pero estoy muy lejos de los 700 comentarios diarios que tienen otros blogs.

Lo mejor de todo, Matt también agrega que habrá más beneficioscomo este para los usuarios de WordPress.com. Así que estaremos a la expectativa.

WordPress.com se las trae

Matt acaba de publicar acerca de la aparición del siguiente texto en la página del perfil de usuario de WordPress.com:

Your WordPress.com API key is: xxxxxxxxxxx

Pero Matt no dice para qué va a servir. El post ya tiene una larga de lista de comentarios y especulaciones, pero aparentemente nadie tiene mayor idea de qué viene la cosa. Según Matt “WordPress.com será algo mucho más útil para la gente que ya tiene blogs en WordPress”.

Yo pienso que tiene que ser algo relacionado a interoperar entre sitios, se me viene a la mente Openomy y su posibilidad de interactuar con aplicaciones externas.

Para los que no tienen idea, WordPress es la herramienta con la que está hecho este blog, y es una de las más utilizadas hoy día.
Más sobre WordPress.com en esta entrada.