Siempre viene bien tener a mano una referencia donde consultar nuestras dudas, para todos los que ya habéis convertido al Firefox en la navaja suiza del desarrollo web os traigo hoy DevBoi.

DevBoi es un plugin que instalará una completa referencia de HTML, CSS, el DOM y Javascript en el sidebar de vuestro navegador.

Además de las referencias incluídas en la instalación estándard podréis ampliar su soporte a otros lenguajes como PHP o Ruby on Rails

DevBoi: http://martincohen.info/products/devboi/

Vía Web Resources Depot

Hace ya tiempo os comentaba la existencia de unos interesantes iconos a los que podíamos cambiar el aspecto sólo con CSS, el truco era simple: una imagen transparente y un fondo de color.

Hoy me encuentro con esta idea aplicada a un icono de RSS, mejor explicada y con ejemplos: How to make RSS icons in every color with just an image

El truco es el mismo, una imagen semi-transparente y un fondo de color. En este caso, la imagen que se superpone también tiene dibujados los bordes redondeados, para que el efecto sea total.

Sé que probablemente andar jugando con los colorines de un icono estandarizado como el del RSS no sea una gran idea (o si, quien sabe) pero obviamente la técnica es válida para otras situaciones menos controvertidas.

Cada día es más difícil sorprender a nuestros usuarios pero ¿qué tal si nuestro sitio reflejase el tiempo metereológico del momento?

En CSS Tricks publican un artículo de David Walsh que nos explica de forma sencilla como conseguir este efecto con PHP y CSS.

Para ello David nos ayuda con un script que obtendrá la información metereológica mediante el API de Yahoo! Weather y lo traducirá a una clase CSS con la que lograremos el efecto interesante ¿no?

Using Weather Data to Change Your Websites Apperance through PHP and CSS

Hace ya mucho tiempo traduje un artículo que hablaba de las ventajas de utilizar “texto oculto” específico para usuarios de lectores de pantalla. Sin duda, cuando traducía aquello podía verle uso para ocultar los labels de los formularios, sustituir texto por imágenes y poco más. Pero hoy, gracias a la pequeña selección de enlaces de CSS Tricks he descubierto una forma inteligente de añadir una capa más de atención para los usuarios discapacitados.

David Walsh comparte con nosotros una gran idea. Incluye un párrafo de texto oculto con css al principio de la página, que contiene un mensaje para usuarios de lectores de pantalla, algo así (obviamente, traducción libre libre):

<p class="oculto">Bienvenido a mi sitio.
Este sitio ha sido creado para todo tipo de usuarios.
Por favor contacta conmigo en xx@xx.xx si encuentras alguna
dificultad al navegar por él.</p>

Por supuesto no sirve de nada si nuestra página es un infierno de tablas y código inaccesible pero es un pequeño detalle agradable y práctico al llamar la atención de todos aquellos usuarios que hayan encontrado dificultades para navegar el sitio, con lo que podremos mejorarlo.

Eso si, no abuséis del texto oculto. Puede llegar a ser molesto, en los comentarios del artículo de David alguien apunta a colocarlo tras un enlace de “saltar al contenido” para no forzar a nuestros usuarios a escuchar una y otra vez el “utilísimo aviso accesible” y me parece la solución ideal.
Ademas, aún albergo dudas sobre si Google podría penalizarte al ofrecer una versión “distinta” de la página para usuarios y arañas. Mi opinión es que no debería si no lo usamos para meter con calzador oncemil palabras clave pero visto lo puntilloso que se nos está volviendo…

Lo que lamento es que no cuento con el testimonio de ningún usuario de lectores de pantalla para saber de primera mano lo útil o molesto de un aviso de este tipo. Si conocéis alguien que pueda probar, por favor, compartid la experiencia.

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

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).

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?

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.

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/

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.

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

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.

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

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:

• Anjuta:

  

  http://anjuta.sourceforge.net/

• Aptana: (basado en Eclipse)

  

  http://www.aptana.com/

• Bluefish:

  

  http://bluefish.openoffice.nl/

• Eclipse PDT:

  

  Proyecto oficial de Eclipse para el desarrollo con PHP

  http://www.eclipse.org/

• Geany:

  

  http://geany.uvena.de/

• gPHPEdit:

  

  http://www.gphpedit.org/

• NVU:

  

  http://www.nvu.com/

• PHPeclipse:(basado en Eclipse)

  

  http://www.phpeclipse.net

• Screem:

  

  http://www.screem.org/

• Vim: (gVim para el escritorio)

  

  http://www.vim.org

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.