Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de July de 2006

Koders y Code Snippets: Dos librerías de fragmentos de código más

El otro día hablabamos de Snipplr, en la misma línea están Koders y Code Snippets:

Koders
Koders nos permite buscar fragmentos de código de diversos lenguajes (entre los que se incluyen PHP, javascript, Ruby, Sql…) y con diversos tipos de licencia. Además, los desarrolladores de Koders han desarrollado también plugins para realizar búsquedas desde Eclipse, Firefox e incluso incluir una búsqueda de código en nuestro sitio.

Enlace: http://www.koders.com

Code Snippets
Nos permite alojar nuestros fragmentos de código y hacer búsquedas entre los enviados por el resto de usuarios, categorizados por etiquetas.

Enlace: http://www.bigbold.com/snippets/

Listado rápido de entidades XHTML

Seguro que tienes algun papelillo o documento con las entidades (x)HTML que más utilizas, incluso puede que algunas las hayas memorizado pero seguro que le sacas partido a una referencia rápida, visualmente agradable y excelentemente organizada.

XHTML Character Entity Reference por Jim Rutherford autor de Digital Media Minute

Litebox: Un Lightbox realmente “light”

Me encanta el efecto que se consigue usando Lightbox, ya sabéis al dar click en una imágen se oscurece toda la página y surge la imagen ampliada en primer plano…
Queda realmente bien pero el script es un poquito grande y pesa bastante.

Si a ti también te parece que pesa demasiado quizá quieras probar Litebox, se trata de una versión adelgazada de Lightbox, con el mismo resultado en mucho menos peso. ¿Y cómo se obra el milagro? Simple, en lugar de utilizar la libreria Script.aculo.us se utiliza la infinitamente más ligera moo.fx y en lugar de usar la version completa de Prototype se utiliza la versión lite.

Enlaces:

Litebox
Lightbox
Script.aculo.us
Prototype
Moo.fx

Via Download Squad

1 imagen, 1000 estilos

Seguro que alguna vez, con todo terminado te has dicho “Pues eso quedaría bien bonito en otro color”… Si la página no tiene demasiadas imágenes en dos segundos tarea resuelta pero ¿y si has metido imágenes de fondo o iconos qué?

Puede que no sea una solución válida para todo tipo de situaciones pero, puede ser una idea desde la que empezar a pensar algo: utiliza imágenes transparentes y controla los colores de fondo con CSS.

Sé que suena como a mucho complicarse pero si echais un vistazo a estos dos ejemplos estoy convencida de que le veréis uso:

Super Stripes:
Un ejemplo de como crear un fondo con las líneas diagonales que tanto se ven por ahí y que se adapte facilmente a cualquier cambio de color.

Enlace: Super Stripes

Sanscons:
Iconos con fondo transparente que se personalizan con CSS

Enlace: Sanscons

activeCollab

Si necesitas coordinar colaboradores y proyectos, via internet, seguro que te has planteado darte de alta en algún servicio como Basecamp.

Si, a pesar del éxito de soluciones así, eres de los míos y prefieres instalar tus propios CMS seguro que te encanta activeCollab.

Captura de pantalla del interfaz de activeCollab

ActiveCollab es un sistema sencillo, basado en web, de coordinación y gestión de proyectos.
Entre sus principales ventajas destacan:

  • Fácil de instalar y usar
  • Basado en web, una vez instalado lo único que necesitarás es un navegador
  • 100% código abierto, 100% grátis
  • Sin límites en cuanto a número de proyectos, clientes, miembros del equipo…
  • Establece permisos diferentes para cada proyecto

Se trata aún de una versión alpha pero ya es un proyecto funcional y práctico.

activeCollab: http://www.activecollab.com/
Basecamp: http://www.basecamphq.com/

Via eHub

Busca el nombre de dominio perfecto

Una de las fases más importantes de la creación de un sitio web es la elección de un dominio. No sólo tendremos que encontrar un dominio que nos guste si no también comprobar su disponibilidad y, en caso necesario, pensar las alternativas.

La red está llena de servicios que nos permiten hacer un WHOIS, es decir, recavar información sobre determinado nombre de dominio. Hoy os traigo unos cuantos, escoged el que más os guste:

Vanilla: Foros 2.0

Vanilla 1 Logo

Por fin ha surgido el primer foro con caracteristicas Web 2.0: Vanilla 1.

Vanilla es un sistema para foros orientado a ser cómodo para el usuario, de código abierto y, sobre todo, conforme a los estándares con un puntito de AJAX para darle sabor.

Con Vanilla es mucho más simple ver si hay discusiones o comentarios nuevos, se pueden realizar búsquedas avanzadas, establecer preferencias de usuario para que el foro se comporte como nosotros queremos y crear un perfil completo con, incluso, nuestra fotografía.

A nivel administrativo trae “de serie” control anti-spam, controles de acceso para usuarios y todas las características típicas de los foros, todo ello empaquetado y presentado con la clara intención de ser simple e intuitivo. Además, las capacidades del foro son ampliables mediante plug-ins (en el poco tiempo que lleva funcionando ya hay más de 60 extensiones, esto promete).

Soporta varios idiomas entre los que, de momento, no está el Castellano.

Requisitos:

  • PHP 4.1+
  • MySQL 3.23+

Enlace: http://getvanilla.com

Via Download Squad

Centrado con CSS (2): Vertical

Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior.

No existe una propiedad de CSS equivalente a vertical-align: middle que se pueda aplicar a elementos que no sean tablas por tanto se hace necesario emplear un pequeño truco para conseguir el mismo efecto.

En el siguiente ejemplo vamos a centrar un elemento verticalmente con respecto al tamaño de toda la página.

Creamos un contenedor al que daremos la propiedad display: table

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table; }

Creamos un segundo contenedor al que daremos la propiedad display: table-cell y sobre el que aplicaremos el centrado vertical-align: middle;

.centrado {
display: table-cell;
vertical-align: middle;
text-align: center; }

Y finalmente, creamos el que será nuestro contenedor centrado verticalmente, al que también daremos margin: 0 auto para centrarlo horizontalmente.

.contenido {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #000;}

Centrado Vertical con CSS, ejemplo 1

Pero, claro, el Explorer no entiende estas simples instrucciones y, por tanto, se hace necesario emplear algunos trucos para conseguir un resultado compatible con la mayor parte de los navegadores.

Para ello, vamos a evitar utilizar el hack del guión bajo y, en su lugar, vamos a aprovechar un fallo del explorer para producir un CSS válido.

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;}

.contenedor[class] {
position: fixed;
display: table;}

.centrado {
position: absolute;
top: 50%;}

.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}

.contenido {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
top: -50%;}

El selector .contenido[class] es exactamente lo mismo que .contenido pero IExplorer ignora todos los selectores de atributo, lo cual nos permite introducir las instrucciones pertinentes para los navegadores más avanzados (como Firefox o Safari) sin que interfieran con el surrealista navegador de Microsoft.

Centrado Vertical con CSS, ejemplo 2

SWiK: El Wiki del código abierto

SWiK Logo

SWiK
es un proyecto que pretende ayudar a documentar los proyectos de Código Abierto.

Registrándote como usuario podrás crear y editar páginas sobre tus proyectos preferidos, agregar enlaces a recursos, noticias etc. Los demás usuarios podrán editar y ampliar tus páginas con el fin de conseguir centralizar el máximo de información y ayuda sobre los diferentes proyectos Open Source.

Por otro lado, encontrar toda esa información no puede ser más fácil gracias al buscador y a la categorización por medio de etiquetas.

Enlace: http://swik.net/

Via Bitelia

CSS Tweak widget: valida tu hoja de estilo desde el Dashboard

Si te gusta revisar y retocar tu CSS en CSS Tweak y eres el orgulloso poseedor de un Mac estoy segura de que este widget te va a encantar.

CSS Tweak Widget para Mac OS X

Simplemente arrastra cualquier archivo de hoja de estilos a él y aparecerán ante ti las diferentes opciones de optimización, marca las que quieras y pulsa el botón. En ese momento tu archivo se procesará en los servidores de CSS Tweak y se volverá a almacenar en el mismo lugar que el archivo original (es decir, antes de tocar haz copias de seguridad)

CSS Tweak Widget en CSS Dev