Diseño Web

CSSplay ha renovado su flota de menús horizontales CSS. Todos son estilo rollover sobre texto, lo que facilita su personalización. Los menús funcionan bien en todos los navegadores. Y están libres de poder ser usados tanto en proyectos personales como comerciales.

Enlace | Demos y Descargas
Vía | webappers

Una buena idea para ahorrar ancho de banda, es optimizar y comprimir los archivos CSS. Existe uno, entre varios, sacado del maletín de herramientas, antiguo (de años) pero muy vigente, hecho por CSS Drive, que nos permite reducir el tamaño de los archivos CSS considerablemente. Aunque todo depende, de cuan legible deseemos que quede la hoja de estilos.

La herramienta de CSS Drive nos da algunas opciones como borrar comentarios u otras más características si elegimos la vista avanzada. Pero, si lo dejamos en modo de compresión normal, ya estamos eligiendo una buena combinación entre compresión y legibilidad. (Tip: Guarda una copia del CSS original).

Enlace | CSS Drive Compressor

En Kurafire han publicando un interesante artículo sobre las formas de diseñar la paginación de una web. Aquí sus consejos (claro que todos tienen excepciones):

1. Provee una zona larga para hacer clic
2. No uses subrayado ¿?
3. Identifica la página actual
4. Provee un espacio considerable entre cada enlace de la paginación
5. Provee los enlaces <Anterior - Siguiente>
6. Provee los enlaces <<Primero - Ultimo>>, donde corresponda
7. Coloca los enlaces <<Primero y ültimo>> en los lados externos de la paginación

De todos, sin duda el segundo punto es el más discutible. Por ejemplo, sitios como Google lo utilizan y no desmerece en nada su diseño ni usabilidad. Sin embargo, según Kurafire, el motivo de por qué no se deben subrayar los enlaces de una paginación, radica en que es superfluo, ya que todos los usuarios de Internet, sabemos que una paginación, al igual que los menús (por ejemplo), son zonas “clickeables”. Interesante.

Más detalles | Kurafire

Espectacular la técnica que nos explica Roger Johansson para convertir un enlace de texto en un botón con sólo CSS y algunas etiquetas extras.

El diseño del botón web tiene las siguientes características:

• Un ancho flexible a la cantidad de texto
• Crecimiento horizontal y vertical según el tamaño del texto
• Conserva su apariencia dentro de los límites razonables
• No tiene zonas no clickeables
• Pueden tener esquinas redondeadas
• Son legibles, aún cuando las imágenes no se muestren

El acabado final lo pueden observar en este enlace. Y el código e imágenes necesarios para lograrlo, desde el siguiente.

Tutorial | Creating bulletproof graphic link buttons with CSS

Button Maker es un aplicación web que nos permite crear botones para nuestra web. Los botones que se pueden crear son principalmente para los feeds RSS, ya que no ofrece mayores herramientas de edición. Sin embargo, se puede escribir el texto, cambiar los bordes, el color de fondo y más detalles para personalizar nuestro botón web.

Enlace | Button Maker

Yvo Schaap ha creado un Generador de Temas para Wordpress en tiempo real, ideal para aquellos de nosotros que no tenemos el tiempo o la habilidad con el CSS suficiente cómo para crear nuestro propio tema.

Con este Generador de temas para Wordpress, podemos personalizar el tamaño del Body, la ubicación del SideBar, el número de columnas y el esquema de colores tanto del layout como del texto. Al finalizar, se pulsa un botón "Save" y se mostrará un fichero ZIP con todos los archivos PHP, CSS y de imágenes necesarios para instalar en el blog.

Enlace | Wordpress Theme Generator