Posts en la categoría: HTML, CSS & JavaScript

¿Por qué lo llaman Firebug? (cuando quieren decir... Firebug)

Imagino que conoceréis Firebug. Es una maravillosa extensión del Firefox que permite desarrollar páginas web de una manera antes jamás soñada :D.

Con el Firebug podemos inspeccionar los valores de las propiedades CSS, los valores calculados por el navegador, depurar Javascript… vamos, que es una herramienta indispensable para desarrollar.

Por otro lado, no sé si sólo nos pasa a nosotros, pero últimamente (me refiero a un últimamente largo, algo así como ¿un año?), el Firefox se está convirtiendo en una especie de monstruo tragamemoria un tanto inestable (es posible que se deba a que lo estamos ejecutando en una Fedora de 64 bits… o a que esté cargado de extensiones… o a muchas otras cosas, es posible). La cuestión es que a veces abres una página y el Firefox decide cerrarse, y lo hace cada vez que intentas visitar esa página (¿tal vez algún plugin quisquilloso o una extensión remilgada?). Y otras veces dice que sí, que ha cargado con éxito una página, pero sigue enseñando la página anterior…

Este último comportamiento es especialmente odioso cuando estás desarrollando una aplicación web: “cambio esto aquí, toco allí, y debería salir esto… a ver a ver, F5… ¿no sale? mmm Claro, claro, toco aquí, le doy allí, un poco más por acá… F5… ¿ein? background: red; color: lime;... F5… ¬_¬U”. En ese momento caes en la cuenta de que, ¡oh!, ¡pero si la acción se ejecuta en el servidor! ¡Los valores cambian en base de datos! ¡Es el Firefox que no te quiere enseñar la página! Así que lo cierras, lo vuelves a abrir, y ahora sí: los cambios están ahí. Después de todo sabías lo que hacías.

Pues bien, parece que este comportamiento se debe al Firebug (al menos en nuestros equipos), y hay otra solución además de cerrar y ejecutar de nuevo el Firefox: si tienes activo el Firebug, lo minimizas y lo vuelves a mostrar (o al revés) y ¡la página con todos los cambios aparece por arte de birlibirloque! (en este momento no sabría decir qué sucede cuando lo desactivas directamente…).

Ahora entiendo que lo llamen Firebug.

YAML: un framework CSS

Hacía ya mucho, mucho tiempo de mi último post, y David, el único de nosotros que parece lo suficientemente disciplinado como para escribir con alguna regularidad, había empezado a monopolizar este blog, así que aquí estamos de nuevo…

En general, los frameworks CSS consisten en una serie de ficheros CSS que han de ser enlazados por nuestras páginas y que proporcionan, entre otras cosas:
  • Reseteo del navegador: los navegadores disponen de una hoja de estilos que define el estilo “por defecto” de las páginas que renderizan. Para evitar las diferencias entre navegadores y simplificar la tarea de desarrollar para múltiples navegadores se incluye una hoja de estilos que “anula” los estilos por defecto.
  • Tipografía y estilos básicos: se fijan también algunos valores para la tipografía y algunos elementos HTML básicos (formularios, encabezados, párrafos, etc.).
  • Layout o grid: a la hora de posicionar los elementos en pantalla, hay dos opciones: o bien utilizar una serie de layouts predefinidos por el framework, o bien posicionar elementos en un grid montado mediante CSS.
  • Hacks o patches: para garantizar que todo se ve como debe en el IE o en otros navegadores.
  • Plugins: algunos frameworks ofrecen la posibilidad de añadir plugins, que no son más que ficheros CSS adicionales y, ocasionalmente, imágenes de fondo, para crear determinados widgets como menús con tabs, formularios “chulos”, etc.

Existen multitud de frameworks CSS: Yahoo Grids CSS, Blueprint, Elements, Logicss, Schema, WYMstyle.

Nosotros hemos optado por YAML, y no porque su nombre nos suene rubyistico, que no somos de esos, sino porque, aparte del framework de Yahoo, es el que parece tener una documentación más amplia y, sobre todo, más útil (os la recomiendo como lectura, aunque no vayáis a usar el framework). Eso sí, también es de los que tiene un mayor número de ficheros y al principio resulta un poco complejo.

Como colofón, ya que parece que está de moda en este blog ponerse literarios, ahí va lo mío: Car tout ce que je raconte, je l’ai vu; et si j’ai pu me tromper en le voyant, bien certainement je ne vous trompe point en vous le disant. He dicho.

Haml ¿Haiku?

Lo prometido es deuda: un nuevo post. Hoy: Haml. ¿Comparte realmente las características de un buen haiku?, ¿es breve, conciso, evocador, bello, etc?.

Nota: Este post no va a explicar qué hace o cómo se usa Haml. Eso podéis descubrirlo ampliamente en su página web, que debéis visitar para poder seguir leyendo.

Admito que mi experiencia con Haml no es muy amplia. Hasta hace poco sólo había usado ERB y Markaby. Por lo que había leido del tema, Haml se me antojaba similar a Markaby, así que no le di mucha importancia hasta el día en que me tope de bruces con StaticMatic (del que hablaré en otro post… espero). De todos modos, y a pesar de mi corto rodaje me he dado cuenta de que Haml es la típica historia que, o bien odias, o bien amas con locura. Así que tenemos nueva batalla en el mundo Rails: hamelistas contra erebeistas (si nadie ha registrado esas palabras yo lo haré: quiero un euro cada vez que alguién las utilice, jaja..). En Trabe Soluciones, ante estos debates, solemos optar por la tercera vía (la llamada “vía gris”) que se basa en usar las cosas sólo cuando lo consideramos oportuno, sin que medien pasiones u odios.

Lo que nos gusta de Haml

  • Conciso. Muy conciso. Escribir poco es bueno
  • Genera un HTML bonito (bien indentado, etc)
  • SASS, que tiene cosas geniales como la aritmética de colores

Lo que nos disgusta de Haml

  • No todos los editores entienden Haml (y ésto es como “La Casera”, si no hay highlighting nos vamos)
  • A veces cuesta encontrar el fragmento de markup o de CSS que estamos depurando con herramientas como Firebug.
  • Es más lento que ERB
  • ¿Por qué demonios no se puede indentar con un tab y hay que usar dos puñeteros espacios? No importa mucho si el editor cambia los tabs por espacios, pero no puedo evitar recordar pesadillas “cobolisticas” de antaño
  • Convence tú a un diseñador para que lo aprenda

En resumen. Haml está ahí. Está bien pensado. Es útil. No es perfecto. Pero tendréis que probarlo para saber si se adapta a vuestras necesidades. Haml es, en efecto, como un haiku: algo breve cuya belleza es, a veces, discutible: Mujer agachada
que orina y hace fundir
la nieve