tecnicalia.com

Luego del anterior artículo develando cómo se realiza el efecto Parallax con CSS, surgieron dudas de su real aplicación en proyectos web. Así como se presentó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se note el efecto que produce (ya que el usuario no suele modificar el tamaño de la ventana de su browser). Así que para paliar esa frustración que surgió en los comentarios, me propuse inventar un método para verlo funcionando de acuerdo a la interacción del usuario con el sitio. Primero intenté con el movimiento del mouse sobre la superficie de la ventana (con lo que hice para el sitio de 2monos), pero no funcionó por problemas de posicionamiento relativo de los elementos. Luego, pensé en movimiento horizontal mediante anclas; algo que ya había utilizado en otras ocasiones anteriores. Felizmente logré integrarlo a través del grandioso Mootools.

(more…)

Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama de tipografías disponibles a la que podames aspirar que posean todos los usuarios. Hablamos de Arial, Helvetica, Verdana y Tahoma para las sans-serif (palo seco); Georgia, Times/Times New Roman para las serif y Courier/Courier New para monospace. Y sería, tenemos limitada la creatividad con eso. Si pensamos en utilizar una font especial, lo único que tenemos es recortarla como un GIF y ponerlas con alguna técnica de text-replacement.

Pero ya existe sIFR. Acrónimo de Scalable Inman Flash Replacement, es una técnica que permite que reemplaces elementos de texto con equivalentes en Flash. sIFR es una solución cross-browser ycross-platform para asuntos de tipografía en la web.

(more…)

Lo cuentan en el estupendo blog de Yahoo! User Interface Blog, y se refiere a un post de Chad Kieffer llamado Introduction to Unobtrusive JavaScript, DOM Scripting, and the Yahoo! User Interface (YUI) Library, en el que nos enseña a crear efectos rollover haciendo uso de javascript no intrusivo, y de forma integrada con el YUI.

Un ejemplo de funcionamiento (pulsar para ver):

ShareThis

Hace días que, por una razón o por otra, no ponía una entrada de este tipo en el blog. Y a decir verdad, ya iba siendo horica

Implementing Calendar Control in Yahoo User Interface (YUI)

Lo cuentan en el blog Yahoo! User Interface. Resulta que Dan Wellman ha publicado el libro Learning the Yahoo! User Interface Library. Pues bien, él ha puesto a disposición de quien guste el capítulo para aprender a manejar el YUI Connection Manager (PDF).

Y ahora el editor ha puesto otro capítulo a disposición del personal, que es el que explica cómo usar el YUI Calendar Control.

Así que de este modo, al menos, tenemos disponibles dos buenos documentos de referencia. Claro que el libro molaría más

ShareThis

Ventanas modales actualmente hay por montones, cada una ofrece mejores prestaciones y se comportan relativamente bien dentro del entorno de desarrollo al cual fueron creadas. Lightbox fue uno de los primeros, Thickbox uno de los más completos, Greybox, Lightwindow… enfin. Hace poco descubrí el que creo es el que va más allá de todos, y que merece una especial atención: Shadowbox.

Shadowbox es una ventana modal escrita enteramente en Javascript. Puede desplegar una amplia gama de archivos gráficos (imágenes, películas, etc.). Es crossbrowser, multiplataforma, de código limpio, relativamente bien documentado (aunque es nuevo).

Más prestaciones:

• Su marcado se apega a los estándares web (valida).
• Puede adaptarse fácilmente a cualquier aplicación.
• Fácilmente customizable mediantye skins (CSS).
• Soporta formatos de imágenes, Quicktime, Windows Media Player, Flash, Flash Video, HTML y páginas externas.
• Maneja errores de plugin elegantemente, desplegando una sugerencia de link para bajarlo si hay necesidad.
• Ofrece opciones configurables sin tocar código fuente.
• Soporta enlaces vía mapeo de imágenes (mediante la etiqueta <area>).
• Compatible con Firefox 1.5+, Camino, Safari 2+, Opera 9+, Internet Explorer 6+.

Impresionante, ¿no? Pero lo que más me llamó la atención fue otro detalle:

• Mediante adaptadores, puedes usarla sin importar el framework que hayas implementado en tu sitio, o que estés acostumbrado a trabajar. O sea, puedes usar Shadowbox con Prototype, jQuery, Yahoo! UI, Mootools, Ext o Dojo; el que más te acomode. ¡Genial! Sólo debes incluir el adapter necesario de acuerdo al framework a gusto del consumidor.

Lo implementé en un nuevo proyecto personal llamado Rulz, y realmente muy potente. Lo mejor es que actúa mediante la asignación del atributo rel="shadowbox" dentro de <a>, lo que a contrario de Thickbox (que fue el que estaba usando), no me interfiere en el enlace ya que estaba ya pasando algunos parámetros de geo-ubicación (para Google Maps, pueden probarlo si entran a alguna reseña y presionan "Ver mapa de ubicación").

Pros:

• fácil implementación.
• ultra-mega-customizable.
• multi-framework (!!!).

Contras:

• no es tan liviano como quisiera.

Link

Shadowbox 1.0