Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de la categoría "Codigo"

Dean Edwars lanza IE7.js 2.0

Hace algún tiempo os comentaba una pequeña librería Javascript con la que hacer que IE6 se comportase como su hermano mayor y mejor educado IE7.

Como Internet Explorer 7 ya está en la calle, listo y disponible para cualquier usuario de Windows, Dean ha decidido actualizar la librería e incluir algunos cambios interesantes:

  • Ya no es una librería modular, ahora estará disponible en dos archivos: IE7.js e IE8.js
  • En IE7.js encontraremos los arreglos que se han llevado a cabo en el auténtico Internet Explorer 7 mientras que el resto de mejoras están incluídas en IE8.js
  • Ahora es más ligera y rápida
  • No tiene dependencias con otros archivos salvo el archivo “blank.gif”
  • Es posible enlazar directamente a los scripts en Google Code (hotlinking)

Sin duda es algo que todos los que nos pasamos el día peleando con Internet Explorer vamos a agradecer, sobre todo con la mejora en la velocidad ya que antes con algunos fixes se relentizaba toda la página un montón.

IE7.js en Google Code

Iconos automáticos para describir tus enlaces

Seguro que durante los últimos meses habéis visto un montón de páginas haciéndose eco de un fantástico tutorial de Ask the CSS Guy que nos enseñaba como conseguir que nuestros enlaces mostraran iconos identificando su destino. (Showing hyperlink cues with CSS).

Iconize your text links

Sin duda, es un efecto bonito que, usado con moderación, añade un punto extra de usabilidad a nuestras páginas. Como seguro sabéis, el contrapunto es que puede ser tedioso preocuparse de agregar estilos para todos los tipos de cosas que podemos llegar a enlazar y que, al usar selectores avanzados, no funciona en el aún omnipresente Internet Explorer 6.

Si sois de los vagos, como yo, habréis estado dejando pasar esta técnica, pero hoy, desde Infected FX nos llega la solución: Iconize text links with CSS.

Desde el sitio de Alexander Kaiser podréis descargar una completa CSS acompañada de los iconos necesarios para que con sólo subir los archivos y copiar el código en vuestra CSS (o llamarlo desde otra petición, que ya sabéis que no es tan sano para el servidor) podáis empezar a utilizarlo.

Además, con sobreescribir los iconos o editar un poco la CSS ya lo tendremos totalmente personalizado. Buena idea ¿eh?

Validación de XHTML y CSS en un solo paso

Las herramientas de validación del W3C son el pan nuestro de cada día. Supongo que a estas alturas estaremos medianamente concienciados de la necesidad de generar un código válido y acorde a los estándares.

Si hay algo “molesto” en estas herramientas es el hecho de tener que validar por un lado la hoja de estilos y por otro el HTML. No es que sea una tortura pero sería ideal poder validar nuestros sitios web de una sola sentada.

En estándares y accesibilidad, Gabriel Porras se hace eco de una herramienta que nos propone precisamente esto. Con el XHTML-CSS Validator podremos validar nuestros sitios de una sola pasada, eso si, sitios que se encuentren disponibles desde la red ya que la única forma de indicarle los documentos a validar es mediante una URL.

XHTML-CSS Validator

Una pena que tengan que venir terceros a mejorar las herramientas del Consorcio, una suerte por otro lado que haya terceros interesados en facilitarnos la vida.

Así que ya sabéis, como dicen los autores de este interesante validador “Se válido (valida) o muere aprendiendo” (Be valid or die learning)

XHTML-CSS Validator: http://xhtml-css.com/

HeatColor, color dinámico para complementar tu mensaje

El color es, sin duda, una de las formas más simples de transmitir un mensaje. A pesar de que, para crear sitios accesibles, no debemos usar el color como único medio de comunicar un mensaje, nadie dice que sea malo hacerlo de forma complementaria.

HeatColor es un plugin para jQuery creado por Josh Nathanson que nos permite asignar colores a los elementos de nuestros sitios (como tablas, divs, listas…) basándose en valores, bien pasándole al programa los valores minimo y máximo, bien introduciéndolos manualmente.

HeatColor

HeatColor:
http://www.jnathanson.com/blog/client/jquery/heatcolor/index.cfm

Via Ajaxian

Datejs, una librería javascript para domar las fechas

Datejs es una librería javascript con la que podrás manipular fechas y permitir a tus usuarios utilizarlas de una forma más intuitiva.
Seguro que lo habéis visto en aplicaciones como Remember the Milk! o Todoist, en lugar de tener que escribir las fechas completas podemos usar expresiones como “today”, “tomorrow” que se traducirán automáticamente en una fecha exacta.

Datejs

Datejs está liberada bajo licencia MIT y disponible para descarga en Google Code y, por si fuera poco, dispone de soporte para múltiples idiomas (+ de 150) y cambiar el idioma es tan simple como:

<!-- Set the CultureInfo to de-DE (German/Deutsch) -->
<script type="text/javascript" src="date-de-DE.js"></script>

13 excelentes menús con Javascript

A lo largo del día son muchos los que aparecen por aquí buscando un menú con javascript, o al menos eso dicen mis estadísticas. Hoy en mi repaso al lector de feeds me he encontrado con una estupenda recopilación de 13 menús con Javascript que han publicado en Noupe.

Sexy Sliding Menu

Los hay realmente interesantes así que no dejéis de echarles un vistazo.

CSS Color Extractor, sacándole los colores a tus CSS

Esta mañana, en el trabajo, estaba pensando cual sería la forma más cómoda de obtener todos los colores empleados en una hoja de estilo para simplemente buscar y sustituir un color u otro. En mi caso, en principio era para encontrar dos tonos de azul que convivían en la hoja y poder deshacerme definitivamente de uno de ellos.

Entonces, apareció en el horizonte el CSS Color Extractor (no recuerdo la fuente originaria, lo siento en el alma), una simple herramienta que te permite pegar un código css y obtener los colores que hay en él, acompañados de una pequeña previsualización de cada color.

Sin duda, hay otras aplicaciones pero, como dice el mismo autor, la mayoría (al menos de las que yo conozco) te extraen los colores de una URL y, si la página no está publicada no hay forma.

CSS Color Extractor

En los comentarios comentan una solución más cómoda para los que utilizéis Firefox con la Web Developer Toolbar (Information>View Color Information) pero para los que teneis otro navegador o no tengáis la extensión ahí queda.

Anuncio de la herramienta: http://hackd.wordpress.com/2007/10/01/extract-colors-from-css-code/

CSS Color Extractor: http://www.thrivesmart.com/open_source/color-parser.html

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

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory