Modernizando los drop caps
Para quien no los conoce, los drop caps son recursos gráficos utilizados desde hace siglos, a modo de adornos de letras iniciales de los bloques de texto. Esta letra inicial es la primera de un trabajo, capítulo o parágrafo, la que tiene la característica de ser mayor que las otras. Suele ocupar varias de las líneas de texto de ese parágrafo, y antiguamente era muy ornamentada, destacándose por sobre el contenido del texto.
Bueno, este recurso gráfico puede ser logrado a través de CSS sin trucos, ya que existe una pseudo-class :first-letter que, milagrosamente, es reconocida por todos los browsers importantes, por lo que podemos colgarnos de él para lograr este efecto. Algunos recordarán que utilizamos esta misma pseudo-class para lograr [bloques de texto con estilo][1]. Bueno, esa vez fue una técnica; ahora la utilizaremos para el propósito con que fue creada.
Sobre la accesibilidad y sus implicancias
Continuando con el tema de la accesibilidad y su implementación en todos los medios web, me gustaría profundizarlo para que no queden dudas sobre sus alcances. Existen muchos argumentos a favor y en contra para su aplicación en un proyecto web. En mi experiencia, es un tema esencial y que no debe siquiera ser discutido su consideración, ya que es tarea nuestra quienes realizamos los sitios de estudiarlo, conocerlo y aplicarlo.
Leyendo un artículo de Lêda Spelta (psicóloga de Brasil experta en accesibilidad) me tomo la molestia de citarla, traducir y completar parte de su interesante artículo: Accesibilidad web: 7 mitos y un equívoco.
Botones redondos y livianos
Cuando uno toma un diseño, o cuando uno mismo lo está haciendo, llegando la hora de comenzar a armar se deben de tomar varias desiciones que pueden llegar a cambiar partes del mismo. Por ejemplo, cómo estructurarlo, cómo las cajas se van a comportar, cómo la interacción de un menú puede llegar a influenciar el contenido, o proponer dónde aplicar javascript que realice tal o cual acción; enfin. Me ha sucedido que cuando veo un menú con un diseño más que extravagante, el diseñador quien lo realizó no me puede argumentar porqué de ese estilo, por lo que le contraargumento que al construirlo lo que pasará es que quedará más pesado que los estilos del contenido mismo, lo que debiera ser lo principal del sitio (fondos degradados, con texturas o patterns, etc). Como soy diseñador, conozco las causas, motivos, razones y prioridades al momento de diseñar un sitio, y espero que mi opinión sea tomada a cuenta; y de hecho así es. Bueno, finalmente se llega a consenso y se cambia el diseño de esos botones redondo con gradiente para mejor optimización de las imágenes del sitio.
Servicios públicos en la web
Tratando de cumplir con mi deber como ciudadano, ingresé a la página web de mi comuna para ver el estado de una multa de tránsito con la mejor de las intenciones. Sorpresa mayúscula encontrarme que al tratar de buscar con mi RUT el botón de Buscar no funciona. Como utilizo Safari 3 por defecto, me cambié de browser (ya que es común que un desarrollo antiguo no funcione en este moderno browser, que se apega bastante bien a los estándares).
Volando con Moo
[Mootools][1] es más que un excelente framework, es tremenda herramienta de desarrollo. Y de efectos. En su sitio web oficial, la documentación deja algo que desear, y la falta de ejemplos desglosados impide que quienes no estén acostumbrados a esta herramienta pueda siquiera comenzar a usarla. Un efecto que me gusta mucho y que he utilizado un par de ocasiones es FX.Scroll, donde puedes a través de id‘s linkear a secciones dentro de un , y el script te llevará volando hacia su objetivo, con una suave transición. Para que sepan de lo que hablo, vean el ejemplo final:
Cómo no usar más iframe
Estuvieron de moda. Fueron la sensación. Pero como muchas otras etiquetas, perdieron su reinado dado a que no eran accesibles y mal indexado por los buscadores. Pero no totalmente, ya que suelen ser bastante útiles para refrescar datos dinámicos, sin tener que hacer un reload del sitio completo. ¿Te suena esta teoría de algún lugar? ¿Quizás de [AJAX][1]? Esa sigla tan de moda y que vende más que detergente o equipo de fútbol holandés, puede utilizar 2 recursos para realizar sus consultas a servidor asincrónicamente. Una, es el objeto XMLHTTPRequest (propietario de Microsoft); la otra, es IFrame. Esas ventanas modales ([lightbox, greybox, thickbox][2]) suelen utilizar iframe‘s para abrir otros contenidos dentro de la misma página, sin tener que volver a cargarla, evitando también el ya obsoleto popup. Así que no estaba tan muerta del todo esta etiqueta…
Bueno, pero la idea es evitar su uso dentro de contenidos, para así impedir la limitada acccesibilidad que nos entrega (no todos los browsers lo interpretan) y que sea indexado separadamente por los buscadores (así como ocurre con los <frame>, que tienen la misma lógica). Mediante CSS lograremos el mismo fin, el de poder diagramar un espacio donde el contenido fluya a través de scroll vertical. Pero todo dentro de la misma página.
El orden ante todo
Me considero una persona bastante ordenada, y eso se refleja tanto en mi vida personal como profesional. Mantengo ordenado (trato) mi escritorio, mi desktop, archivos y por supuesto el código fuente que escribo. Con el tiempo he desarrollado un estándar para los proyectos, tanto para el orden de las carpetas, como para el registro de envío de e-mails entre otros. Es que he perdido tanta información y ha habido tanta desinformación que mejor me hice mi orden propio, y ha funcionado muy bien hasta ahora.
Cumpliendo 3 años (actualizado)
Bueno, he activado el nuevo diseño del sitio. Espero sea un aporte, 1 año con el mismo layout me tenía bastante aburrido ya. Estaré en estos días ajustando algunas cosas aún, principalmente los plugins y los tags. Cualquier notificación de error o comentario constructivo, siempre será bienvenido. Seguiré escribiendo artículos desde ya.
Ayer domingo 4 de noviembre de 2007, CSSLab cumplió 3 años de exitosa vida. Como estoy de viaje, no pude notificarlo a tiempo, pero antes 1 dia tarde que nunca.
Clearfix v2.0: el widget
Navegando me topé con una <a href=“http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/” title=“Enlace externo a “New clearing method needed for IE7?”">reescritura del código de .clearfix para que éste sea interpretado por IE7 correctamente. Y bueno, como no me gustaba la interfaz del <a href=“http://www.csslab.cl/2007/03/09/clearfix-el-widget/" title=“Enlace en CSSLab a “.clearfix: el widget”">widget Clearfix que hice anteriormente, aproveché de rediseñarlo y lanzarlo con este nuevo código que se ve mejor. Nuevamente, lo dejo para libre descarga.
[Download Clearfix v2.