El Comercio Digital

Webmaster Libre

Subtitulo del blog

Archivo de la categoría "Codigo"

Mejorando la usabilidad de nuestras tablas

Cuando usamos las tablas para lo que son, mostrar datos, se convierten en elementos realmente útiles. Con una tabla bien planteada podemos transmitir gran cantidad de información en poco espacio, de una forma ordenada y sencilla de entender.
No obstante, cuando nuestras tablas empiezan a acumular demasiados datos puede hacerse confuso consultarlas. Al menos yo si me reconozco haciendo lineas con los dedos por la pantalla para encontrar la unión entre una fila y determinada columna, supongo que sabéis a lo que me refiero.

En los últimos días se han dado a conocer dos aproximaciones a este tema, la solución consiste en variaciones de una idea común: destacar la celda sobre la que coloquemos el ratón así como las línea y columna a las que pertenece.

Ejemplo de tabla con la fila y la columna claramente resaltadas

Por un lado tenemos la solucion de The CSS Guy, una solución totalmente manual con un poquito de javascript [ver ejemplo]

Por otro lado surge Tablecloth, una pequeña librería javascript que incluye una hoja de estilo bastante agradable y múltiples opciones para nuestras tablas. Una solución más rápida y, sin duda, cómoda para los menos avezados con el javascript y las css.

Escoged la que más os guste y no dejéis de hacer vuestras tablas mucho más sencillas de leer, sobre todo si vais a usar tablas largas o complicadas.

pForm, generando formularios HTML en dos segundos

Se me ocurren un montón de situaciones en las que podemos agradecer tener a mano un generador de formularios como este.
Con pForm podrás tener un formulario en HTML (relativamente bueno) con un bonito estilo. Para ello sólo tendrás que seleccionar un esquema de color, escoger los campos y escribir las etiquetas que los acompañarán.

pForm

El resultado podréis descargarlo para integrarlo en vuestros sitios comodamente y gratis.

pForm: http://www.phpform.org/

Un colorpicker como el del Photoshop

John Dyer, cansado de las limitaciones que tienen los colorpickers más conocidos, ha creado uno que imita a la perfección el del Photoshop. Su colorpicker nos ofrece todas las opciones de selección de colores disponibles en los programas de escritorio (H, S, V, R, G, B)

PhotoShop-like color picker

El resultado es realmente impresionante, puede que haya ya muchos colorpickers pero este merece sin duda un vistazo en profundidad.

PhotoShop-like Javascript color picker

Via Ajaxian

Diversas aproximaciones a las nubes de etiquetas

Las nubes de etiquetas son, sin lugar a dudas, una de las señas de identidad de la “web 2.0″. Las empezamos a ver en sitios como del.icio.us pero, entre servicios online que generarán una para tí, plugines para los CMS más populares y la nueva versión de WordPress con etiquetas integradas, pronto todo el mundo podrá disponer de una cómodamente.

Lo normal, a la hora de dar estilo a una nube de etiquetas, es utilizar variaciones en el tamaño de la tipografía y su grosor. Así, por norma general, las categorías más importantes, con más contenido, aparecen en un tamaño y grosor mayor. No obstante, esta aparente estandarización del aspecto de las nubes de etiquetas parece empezar a preocupar a los diseñadores.

Hoy en CSS Tricks he visto un planteamiento novedoso para las nubes de etiquetas: En lugar de jugar con el tamaño de las letras, han decidido jugar con el padding de las cajas. Así, a mayor caja, mayor importancia.

Tagclouds y padding por CSS Tricks

Es una solución interesante pero supone algunos inconvenientes:
En primer lugar se pierde la capacidad de identificar a simple vista y sin esfuerzo las categorías más relevantes.
Además, en el ejemplo se han apoyado en el uso del color lo cual nos hace más sencilla, a todos los que contamos con una visión correcta a nivel de colores, la comprensión de la idea pero ¿sería igual de comprensible visto en blanco y negro?
Y en tercer lugar, procurad emplear bien las pseudoclases para los enlaces, de tal forma que no haga falta tener ratón para apreciar el efecto mouse over (recordad, los selectores deben seguir un orden para que funcionen correctamente: link, visited, hover, active, focus)

El artículo con el código empleado y un ejemplo en funcionamiento lo tenéis, en inglés en: Tag Cloud with padding thickness

Railsify, encuentra plugins y herramientas para Rails

Railsify

Si buscas herramientas y plugins para Rails o andas buscando un sitio para publicar tus creaciones echale un vistazo a Railsify, un directorio de plugins y herramientas, completamente gratuito.

Railsify: http://www.railsify.com/

Vía eHub

Editores de HTML, CSS, Javascript y PHP para Gnome (gtk)

Ayer, cuando os pedía consejo sobre editores de código para Gnome no me esperaba esa respuesta (gracias, de verdad). Ahora tengo un montón de ellos para escoger y creo que lo mejor es que los pongamos todos juntos en un artículo como referencia para futuros linuxeros desamparados. Cito por orden alfabético:

Algunos son completos IDEs, otros simples editores de código con resaltado de sintáxis y algunos son sólo para los más fuertes de ánimo.

Seguro que nos hemos dejado muchos en el tintero, una vez más quedan abiertos los comentarios, por si se os ocurre algún otro.

Una hoja de estilo para diagnosticar fallos en el marcado

De la mano de Eric Meyer nos llega una solución que, por simple, es sin duda un gran hayazgo.
Haciendo un uso magistral de los selectores de CSS, va filtrando situaciones comunes en cualquier sitio (imagenes sin alt, enlaces que no van a ningún sitio…), haciéndolas mucho más fáciles de localizar.

La hoja de estilo queda algo así (por supuesto, adáptala a tus necesidades)


a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

Sin duda, la Web Developer Toolbar ya nos sirve para esto pero, de esta manera, recibimos referencias visuales más concretas (sabremos de un vistazo qué está mal y por qué).

Para profundizar en la lógica de esta hoja de estilo nada mejor que leer el artículo de Eric: Diagnostic Styling

Una forma menos agresiva de mostrar imágenes grandes

Seguro que alguna vez os habéis visto en la situación: llegáis a un sitio web con unas imágenes enormes y tarda en cargarse años. Desanima y desespera horriblemente.

A través de Ajaxian me entero de que desde hace tiempo la librería javascript de Yahoo contaba con un plugin, YUI Image Loader, que nos permitía ir cargando sólo las imágenes necesarias (las que están dentro del punto de vista del usuario) y hacer así más cómoda la visualización de muchas imágenes grandes en una sola página.

A partir de ahora, los amantes de prototype también disponen de uno: Lazy Loader por Mika Tuupola.

Pasaos por la demo para comprobar lo interesante del script.

¿Conocéis algún otro independiente de librerías o que utilice otras?

LiveValidation, validando los campos según escribes

Si validar los campos al finalizar de completarlos no es lo bastante moderno para tu sitio, ahora lo tendrás más que sencillo para darle un toque simpático a la validación.

LiveValidation

LiveValidation es una pequeña librería Javascript que te permitirá dar ese efecto de validación “al vuelo” y, de paso, validar cuantas cosas necesites validar en tus sitios.

Está escrita de una forma muy cercana a Ruby on Rails por lo que, como comenta su autor, son compañeros ideales. No obstante, puede usarse con cualquier otro lenguaje ya que es una librería sencilla de aprender e implementar.

LiveValidation: http://www.livevalidation.com/

Via dZone

df Javascript Smooth Scroll

Buscando otra cosa me encuentro en Deziner Folio este ligerísimo script con el que podremos dotar a nuestros enlaces internos (anchors) de ese elegante efecto de desplazamiento suave

df Javascript Smooth Scroll

Ver demo

Deziner Folio: df Javascript Smooth Scroll

Webmaster Libre es un blog de Alma Fernández y está publicado bajo licencia Creative Commons desde el año 2006

Agradecimientos especiales a WordPress y FamFamFam

Política de Privacidad | Condiciones de uso | Sitemap (XML)