Esta entrada es más un apunte recordatorio personal que otra cosa. A la gran mayoría de vosotros os resultará familiar, sobre todo si sois asiduos a programar en Javascript.

Mi problema ha surgido al hacer una validación totalmente banal en un formulario donde quería limitar el número de caracteres que podía meter el usuario en un campo de tipo textarea. Al darme cuenta que, a diferencia de lo que dicen por la red, el atributo MAXLENGTH no está permitido por la especificación HTML 4.01 Transitional (uno que quiere ser perfeccionista), he copiado por ahí una pequeña función (¿para qué reinventar la rueda?) donde hacía lo que yo quería. Seguidamente la he ampliado para que me soltara una ventanita pop-up (los académicos la llaman alert(…))para que el usuario supiera que se ha excedido en el número de caracteres que ha introducido.

Mi mensaje tenía que llevar acentos, pero Javascript se pasa las entidades HTML por el forro, y es normal, porque es un ámbito diferente (un lenguaje diferente). La solución: caracteres Unicode:

Solución encontrada en el blog de Lefunes.

ACTUALIZACIÓN: Para ser correctos, esta entrada debería titularse Tildes en Javascript o equivalentemente Acentos ortográficos en Javascript, pues la palabra acento suele emplearse para referirse al acento prosódico, que es el golpe de voz que le damos a una sílaba.

No estoy anunciando un nuevo producto para el cabello con un nombre que tiene gancho. Bicheando por la red de redes he encontrado una liviana librería en Javascript que te permite realizar unos efectos bastante atractivos para las imágenes que albergas en tu web / blog. Os invito a entrar en su web y comprobarlo por vosotros mismos. Para incrustarla en vuestro sitio sólo hay que seguir la siguiente receta:

• Descargar el paquete comprimido con todo lo necesario.
• Descomprimirlo y colocar reflection.js en el lugar adecuado dentro de tu web. Si eres un ser humano medianamente ordenado, tendrás una carpeta por ahí llamada “js” donde almacenas todos archivos Javascript.
• Importar la librería como otra cualquiera con la siguiente etiqueta HTML: <script type="text/javascript" src="reflection.js"></script>
• Colocar en la etiqueta <img> de la imagen que quieras reflejar este atributo : class="reflect"

Y voilá! imagen reflejada. En el .zip descargado encontraréis un archivo readme.html que os explicará cómo podéis configurar el efecto a vuestro gusto: opacidad, longitud de la imagen reflejada,…Es compatible también con las últimas versiones de los cuatro navegadores más empleados (¿sabéis ya cuáles son?) y presume de ser Javascript no obstructivo, por lo que tu página apenas se enterará de que esa librería está por ahí. Os dejo con uno de los ejemplos que hay en su web:

Para todos aquellos que trabajen como yo en el mundo del desarrollo (y mantenimiento) de aplicaciones web, sabrá que no hay navegador que ayude tanto como el Firefox y sus plugins. Hace ya tiempo (años…) que he dejado atrás el Internet Explorer. Ya no me parece necesario, ni útil.

Voy a comentar algunos de los plugins que uso habitualmente por si alguno de vosotros aún no los conoce y le interesa experimentar con un puñado de herramientas que para mí se han hecho fundamentales en el desempeño de mi tarea diaria.

Web developer: para mí es, junto con el Firebug, la herramienta más completa. Te permite obtener información de cualquier elemento renderizado en tu navegador, manejar las cookies, los estilos, ver el código fuente con sus errores, etc. Te informa si la web cumple con los estándares declarados por el W3C. Te da información de los formularios, las imágenes y mucho más. Yo lo empleo para verificar el tema de los estilos en la página, ver que lo que yo programo se representa tal y como yo quiero. Esta es la web donde se desarrolla y se atienden dudas por parte de sus creadores.

Firebug: es la más completa de todas las herramientas que he empleado hasta ahora, porque, a diferencia del anterior plugin, te permite editar contenido y ver su resultado en tiempo real. Aún hoy en día no lo he explorado completamente, pero se puede inspeccionar la página y te va diciendo en qué parte del código te encuentras. Otra de sus opciones que empleo mucho últimamente es la que permite su pestaña NET, que te dice cuánto tiempo tardan en descargarse las imágenes y demás componentes del servidor. También es posible visualizar el intercambio de peticiones HTTP que se hace entre cliente (el navegador) y el servidor donde está alojada la web que estás consultando.

Validador HTML: basado en un algoritmo de comprobación de sintaxis llamado Tidy HTML que te avisa de errores típicos que se producen al programar: etiquetas mal cerradas, atributos ya obsoletos, eventos no soportados, etc.

Live HTTP Headers: es un capturador de peticiones HTTP. Es útil para ver en cada momento qué es lo que se pide (.html, .css, .php, .png,…), dirección del servidor a donde se pide, estado de la petición (los famosos 200,404, 500, …). Bastante útil para saber que ocurre realmente ‘por detrás’ del navegador.

YSlow: es el que he conocido más recientemente. Es plugin de un plugin. Es una funcionalidad que se añade al Firebug, integrándose con el resto de componentes. Lo han desarrollado la gente de Google, pensado para indicarte las posibles optimizaciones que pueden hacerse en tu web: minimizar el número de archivos .css o .js a los que las páginas llaman, emplear CDN’s como Flickr, Youtube, etc.

Si alguno se decide a pasarse al ‘lado claro’, tenemos en la barra lateral derecha un enlace para descargarse el Firefox. ¡No lo dudéis!

Investigando como se podría realizar la navegación por imágenes de una manera atractiva y cómoda encontramos el llamado efecto lightbox. Este efecto 2.0 desarrollado por Lokesh Dhakar permite mostrar pop-ups con imágenes y grupos de imágenes de una manera bastante atractiva. Seguimos analizando este efecto, cuando encontramos una mejora llamada ’Ajax lightbox’, creado por Ignacio G. en su blog hellogoogle.com la cual conseguía, además de manejar imágenes, cargar en el pop-up ficheros externos. Este efecto nos permitiría enseñar en estos pop-ups pequeños formularios, en tiempo de ejecución, lo cual haría mucho más ágil la navegación.
Según su propio autor, “Ajax Lightbox es un script no intrusivo que permite mostrar una
ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente. ’Contenido, Presentación y Comportamiento’”.

Se puede visualizar tres tipos diferentes de ventanas:

• Contenido dinámico extraído vía Ajax de un fichero.
• Imágenes individuales.
• Grupos de imágenes.

La implementación que se ha realizado empleando esta librería ha sido testeada en las últimas versiones de los navegadores más extendidos: IE/FireFox/Opera.

Aquí podeis ver un ejemplo de como queda una imagen con este efecto, que al pulsar sobre ella será, en sí misma, un ejemplo:

Y como extra comentar que existe un plugin para wordpress que usa estás librerías para conseguir este efecto en tu blog. Lo podeis descargar de aquí.

La instalación ya sabeis, descargar el plugin, descomprimirlo y subirlo al directorio wp-content/plugins, y activarlo.

Tutorial en inglés de lightbox 2.0.

Tutorial traducido de lightbox 2.0.

Tutorial Ajax Lightbox.