David Esperalta

Últimamente se publican plugins muy curiosos para jQuery, pero, como estoy liado con otros menesteres, no los reseño por aquí, aunque, bien sé yo que tú no me necesitas a mí para mantenerte al tanto de este y de otro cualquier asunto. Pero, en fin, sea como sea, no quería dejar sin reseñar un nuevo plugin para jQuery que me ha llamado la atención: el plugin jQuery Corner Ads.

¿Has visto en algún sitio web esa imagen que se sitúa en la esquina superior izquierda o derecha, y que permanece "fija" en esa posición, y que informa de que una determinada bitácora "está hecha en México", o es la "versión 2.0"? Pues jQuery Corner Ads va por ahí, sólo que añade a dicha imagen cierta funcionalidad, como es la posibilidad de "mostrarse completa" cuando se pasa el ratón por encima.

No sé si dicho así te habrás enterado de algo, aunque a mí me da que iba a ser complicado. ¿Qué tal si le echas un vistazo a los ejemplos del plugin? Estos te sacarán de toda duda. Además podrás echarlos un vistazo en cualquiera de los navegadores soportados: Opera, Firefox, Safari e Internet Explorer. Creo que se trata de un plugin que puede ser, además de vistoso, realmente práctico y útil. Júzgalo tú mismo.

Una de las dificultades que tenemos quienes llevamos a cabo páginas web es la imposibilidad de contar con una apariencia estándar para los controles de nuestras páginas, me estoy refiriendo más concretamente a los controles estándar de HTML para formularios y algunos otros como el que toca esta entrada: las barras de "scroll" que pueden mostrarse en distintos elementos que las requieran.

Personalmente, soy de buen conformar, y, suelo usar únicamente los controles estándar, sabiendo que estos no se mostrarán igual en diferentes navegadores y plataformas, pero, con la ventaja de no recurrir a trucos más o menos logrados: en cierto modo usar el estándar debería funcionar bien en cualquier navegador, sólo que cada navegador pintará los botones, por ejemplo, a su manera, que, desde luego, no se parecerá a como lo hacen el resto de navegadores.

Sea como sea, si se piensa en el diseño, en el estilo, entonces puedes toparte con un problema si utilizas los elementos estándar, porque, tal vez no casen bien con el diseño de tu sitio web, independientemente ya de cómo se muestre una barra de "scroll" en un navegador u otro: lo que necesitas es que la propia barra de "scroll" se adapte más bien al diseño de tu sitio, en cuantos más navegadores mejor. Pues bien, al menos para Opera, Internet Explorer, Firefox y Safari, puede servirnos el plugin para jQuery jScrollPane.

Como se muestra en uno de sus ejemplos con este plugin podremos contar con barras de "scroll" con diferentes estilos, en este caso imitando el de distintos navegadores. Aunque jScrollPane puede ir más allá, como podrás comprobar echando un vistazo al resto de ejemplos, y, sobre todo, en los distintos estilos usados en sitios web "reales", como este, este y este otro. Desde luego, hay que reconocer que estos sitios web que enlazo no lucirían de la misma forma que lucen si usaran la barra de "scroll" estándar de los navegadores: de cualquiera de ellos.

Un par de párrafos al menos para reseñar el plugin jPhysics para jQuery, cuya utilidad real yo no sé dársela, pero, estoy seguro de que la tiene, más allá de lo curioso que resulta su funcionamiento, que, puedes ver en este ejemplo de uso. A uno se le ocurre algo así como el programa Phun, capaz de "emular" un entorno físico, esto es, con su fuerza de gravedad, "vientos" y cosas así. El plugin jPhyshics podría sentar las bases de algo parecido.

Pero, fuera de tonterías, el ejemplo de uso que enlazo más arriba da como para quedarse unos minutos probándolo con distintos parámetros. No deja de ser una prueba más de que Javascript puede dar bastante de sí, como lo han dejado claro la cantidad de bibliotecas, como jQuery, sin ir más lejos, que, además han dado pie a un montón de personas a idear plugins y demás añadidos, basándonse en ellas, que, igual de otra forma no hubieran llevado nunca a cabo. Como jPhysics. Al final va a resultar cierto el lema de jQuery: "otra forma de escribir Javascript". Nna forma muy atractiva, por lo visto.

Hay muchos "Colors Pickers" para la biblioteca jQuery, pero, no de todos voy a hablar aquí, por varias razones: primero, porque cuando necesites uno, harás bien en buscar información y hacer tus pruebas por tu cuenta, y, en segundo lugar, porque no todos son como el plugin "Really Simple Color Picker", muy digno componente a tener en cuenta en tus proyectos cuando necesites un "Color Picker" o "Selector de colores".

El plugin es muy, muy sencillo, y acabo de probarlo en los cuatro navegadores en que suelo hacerlo y tú seguro que tienes en la cabeza. Funciona estupendamente y realmente se dedica sólo a su tarea, aunque cuenta con varias opciones, por ejemplo, para añadir colores "personalizados" en la "paleta" que muestra, o incorporar algunos a la "paleta" de colores predeterminada. Pero no se va en más florituras, lo que se agradece, y ha sido el motivo de referirlo aquí.

¿Quieres verlo tú mismo en funcionamiento? Aquí tienes su demostración. Seguro que te lo quedas, aunque sea en la memoria, para cuando te haga falta algo así. Pero no dejes (no sé para qué te lo digo, si es lo que vas a hacer) de buscar también por tu cuenta. Como digo, en el sitio web de los plugins para jQuery encontrarás otros "Colors Pickers", que igual se adaptan mejor a tu proyecto, nunca se sabe. Pero "Really Simple Color Picker" es para tener muy en cuenta en adelante.

Os presento el último plugin que he llevado a cabo para jQuery, muy sencillo, basado en otro existente, y que puede usarse para "incorporar" en una determinada casilla ("HTML input") una especie de "spiner", cuyo valor podrá establecer el usuario utilizando la rueda del ratón, además del teclado, por supuesto. El plugin en cuestión es WheelSpiner, y puedes informarte mejor en su página web en jQuery.com o en esta otra página de esta misma bitácora.

En realidad puede que lo que quieras es echar un vistazo al plugin en acción: para eso y para descargarlo puedes también hacer uso de este otro enlace. En realidad el plugin no es ninguna maravilla, sólo son unas pocas líneas de código (espero que no muy problemáticas) y que he pensado para utilizarlo en Gesbit, por cierto, aunque no sé si al cabo terminaré haciéndolo o no. Sea como sea, ahí queda, por si puede ser de utilidad para alguien. Quién sabe. ;)

Que el sitio web Visual jQuery resulta curioso y útil está por demás decirlo, y, ahora lo es todavía un poco más, puesto que se ha actualizado para soportar las últimas características de la biblioteca jQuery. Además la especie de "tutorial visual" incluye ejemplos "vivos", por decirlo así, no sólo los "trozos de código" que se mostraban antes, sino el resultado de estos.

Si uno estaba acostumbrado a la anterior versión de Visual jQuery y ha tenido este sitio como la mejor referencia a la hora de documentarse (cuando jQuery cuenta con una wiki excelente), se dará cuenta de la cantidad de novedades que se han ido incorporando a jQuery en los últimos tiempos. Sólo por esto ya merece la pena echar un vistazo.

Además Visual jQuery permite ahora buscar dentro de la documentación, filtrando el contenido, por mejor decir, de modo que si oímos campanas acerca de cierto método, nos será más o menos sencillo encontrarlo filtrándolo por su nombre o identificador. En fin, que Visual jQuery ha mejorado, como no podía ser menos, y así seguirá siendo lo útil que es.

Por cierto, del mismo autor que Visual jQuery, echa un vistazo a jQuery API Browser: vendría a ser una especie de Visual jQuery en "modo texto". ;-)

Se publica hoy mismo el plugin jQuery Calculator, que, nos permitirá incorporar a nuestras casillas de edición ("input" de formularios HTML) una calculadora, ni más ni menos, para que los usuarios puedan eso, calcular una determinada cifra, que, luego pasará a la casilla de edición correspondiente. Este jQuery Calculator es de los plugins que los ves y dices, bueno, pues no está mal, una calculadora, es curioso, pero, ojo, porque contiene no pocas características que van más allá de lo que pudiéramos ver como obvio.

Aunque ya la calculadora "por defecto" puede sernos útil, enseguida veremos que hay otras formas de mostrarla, que podemos personalizar su "layaut", añadir "teclas" por nuestra cuenta, usar diferentes bases numéricas, incluso mostrar una "calculadora científica", estililzar la calculadora a nuestro gusto y todavía más cosas, por si lo dicho fuera poco. ¿Otro ejemplo? Es un plugin completamente "localizable", que se encuentra disponible ya en inglés, francés, y, supongo, cuando el autor reciba mi traducción, también en español. Merece la pena y puede sernos útil.

Eso es lo que proporciona el plugin meioMask para jQuery, la posibilidad de mostrar "inputs con máscaras" en nuestros formularios HTML. Se trata de preparar un determinado "input" para que sólo permita una determinada entrada, por ejemplo, un número de teléfono, un número decimal, una fecha, una determinada hora, etc., etc. El plugin cuenta con no pocos ejemplos de uso, que dejan bien claro que este plugin para jQuery puede resultar verdaderamente útil en nuestras aplicaciones.

Pienso que este tipo de controles pueden ser muy útiles para el usuario de nuestras aplicaciones, puesto que no le permiten, le llevan de la mano, para que proporcione el dato preciso. Por ejemplo, si la máscara es para una hora, el usuario no podrá escribir sino caracteres numéricos, y los ":" separadores de horas y minutos se encarga el propio plugin de añadirlos cuando es menester. Lo que quiero decir es que no hay que pensar que este plugin es una especie de "validador" de los propios datos.

Aunque nosotros validemos información en el cliente (en el navegador) no por eso debemos dejar de llevar a cabo la validación oportuna una vez los datos lleguen al servidor. Sin embargo, el plugin meioMask es perfecto, como digo, para facilitar la entrada de datos a los usuarios. Además funciona francamente bien, y cuenta con muchísimas máscaras disponibles "de serie", y no me extrañaría nada que pudieran establecerse otras a nuestra voluntad. Sí, señor. Otro plugin para jQuery a tener muy en cuenta.

Si te gusta el diseño gráfico y el desarrollo web; si eres un aficionado a cuanto puede hacerse con herramientas como Javascript, CSS y HTML, entre otras, no debes perderte el sitio web de Román Cortés, donde se muestran sus trabajos, ni tampoco su bitácora personal, con algunas entradas que te dejarán con la boca abierta de par en par, como podrás comprobar tú mismo.

Efectivamente, uno no puede dejar de apreciar y admirar el trabajo de Román Cortés, y, al mismo tiempo, sentir cierta envidia sana por la cantidad de cosas que este hombre está capacitado para hacer. Podría poner aquí algunos ejemplos, pero, la bitácora del artista es digna de leerse entera de arriba a abajo, merece la pena hacerlo, y sería vano por tanto sacar una u otra entrada a colación.

Así que no dejes de echar un vistazo por ti mismo, verás como pasas un rato agradable y divertido, cuando menos. Es fácil, sólo tienes que visitar: romancortes.com

Si desarrollas alguna página web que necesita Javascript, no dejes de informar al usuario que acaso navege por tu página con un navegador que, o bien no soporta Javascript, o bien tiene deshabilitada esa característica. Existe para ello una etiqueta de HTML como lo es "noscript", cuyo contenido sólo mostrarán los navegadores que no dispongan o no utilicen Javascript en un momento dado. El mensaje que habría de contener dicha etiqueta iría desde un "No tienes activado Javascript y así no es posible mostrar esta página correctamente", pasando por un "Parece que tu navegador no soporta cierta característica (Javascript) necesaria para que esta página se muestre correctamente", y hasta un "Algunas partes de esta página no se mostrarán bien si no dispones de Javascript en tu navegador".

La etiqueta "noscript" puede contener HTML, y puede "estilizarse" mediante CSS, pero, sea como sea, no debería omitirse si nuestra página web necesita Javascript para mostrarse correctamente, puesto que puede suceder que el usario se quede con un palmo de narices y no sepa lo que hacer. Claro que hay casos y casos. Por ejemplo, si visitas "sin Javascript" el sitio web de la revista XLSemanal, simplemente, te quedarás en una página en blanco. Absolutamente nada se muestra al usuario, puesto que además se aprecia un código fuente un tanto "raro", en mi opinión. He aquí el cuerpo de la página en cuestión, punto de entrada al sitio web susomentado, y dime qué te parece a ti:

<form action="home.php" method="post">
<input type="hidden" name="id_edicion" value="3487">
</form>
<p class="aqui-script-tag">
 document.formulario.submit();
</p>

Efectivamente, existe un formulario que redirige a otro "script" del sitio web... un formulario que no contiene ningún campo visible, y que es enviado "in situ" programáticamente, mediante Javascript, como puedes ver, o no sé si se debería decir haciendo uso de las características del DOM (Document Object Model). Sea como sea, si nuestro navegador no soporta o no tiene activado Javascript, nos quedaremos con una página en blanco, algo que podría evitarse, y no digo que en el caso anterior, que acaso requeriría de "algo más", podría evitarse, digo, utilizando la etiqueta "noscript" que está a nuestra disposición. Como contenido podríamos añadir un enlace que dirigiera al usuario a cualquier otra página de nuestro sitio web.

Sea como sea, parece que la etiqueta "noscript" no es muy utilizada, o sea pasa de ella: se sobreentiende que el usuario dispone de Javascript, o de que se buscará la vida si algo va mal, pero, lo cierto es que está a nuestro alcanze informar al usuario de una circunstancia como esta, y, no sé porqué no deberíamos hacerlo. Ya no en casos tan extraños como el sitio web que he puesto de ejemplo (de casualidad) sino en cualquier página web, por supuesto, siempre que vayamos a usar Javascript, pues de lo contrario no tendría sentido hacerlo.

Actualización: Trabajando con este asunto, encontré problemas al tratar de aplicar "estilos" a la etiqueta "noscript". Sin embargo, la solución que he encontrado es sencilla: puesto que puede usarse HTML dentro de la etiqueta "noscript" y no tendremos problemas en aplicar el estilo que queramos a las etiquetas que usemos dentro de "noscript".