Desde CVAM, el sitio de MED s.r.l. es un pequeño sitio institucional, 100% XHTML 1.0 (válido) y CSS (casi). Listo desde hace más de medio año, estaba en espera de contenido
provisto por el cliente.
A continuación, varias anécdotas, algunas técnicas, otras espirituales (?).
La más interesante del armado del CSS tiene que ver con el uso de display:none;
para reemplazar texto por imágenes. Este método, creado por Todd Fahrner y explicado
por Douglas Bowman, permite enviar texto para navegadores sólo-texto o lectores de pantalla, e imágenes a los navegadores visuales. El método fue ampliamente utilizado tan pronto como se propuso, ya que permite sitios visualmente ricos y accesibles.
Al día siguiente de publicado por Bowman, se supo que JAWS (el lector de pantalla más popular) en realidad no leía el texto que se suponía debía leer. El método se siguió usando. Yo lo usé en este sitio de MED.
El problema: a los pocos meses, se confirmó que practicamente todos los lectores de pantalla fallaban con este método. Comenzaron a proponerse técnicas alternativas, que no fallaran. Todas ellas más “sucias”, rebuscadas, poco intuíbles. Un año después del artículo de Bowman, Dave Shea publica un compilado de todas ellas, concluyendo que al día de hoy ninguna es la “mejor y definitiva”.
Conclusiones apresuradas:
- No todo está dicho en el mundo del CSS, como pretenden pedantemente en 37signals.
- En 20 segundos reemplacé el
display:none;
por otra técnica que si funciona. En 2 minutos comprobé que se veía ok en todos los browsers. Moraleja: los trucos, mejor en el CSS y no en el HTML. - ¿Cuántas cosas que hago que quedan obsoletas de un día para el otro y nunca me enteraré por no estar al día? …o me enteraré cuando el proyecto ya esté cerrado…
- Recordar que hay información que proviene de la jerarquía visual
que puede resultar chocante sin ese contexto. Por ejemplo, el pie con info de Contacto contiene, oculto, un<h3>
que le da ese título, ya que sin estilos aparecería de golpe y fuera de lugar. - Tuvimos problemas inexplicables con los floats, algunos nuevos y otros <a title="The
Float Model
Problem” href=”http://www.positioniseverything.net/floatmodel.html”>conocidos. Hubo que solucionarlos porque era la unica forma (se me ocurre) de alinear párrafos con sus respectivas imágenes.
Metodología de debugeo: reducir el problema a un ‘test case’ con el mínimo de elementos que producen el problema. - Una de las ventajas de diseñar en Mozilla y luego testear en otros es que, al encontrar algo que se ve mal en otro navegador, es probable que sea un bug. Por ejemplo cuando me fallaron los floats en IE5 Mac, luego de segundos de horror pensando en un infierno de debuggeo reescribiendo todo, pensé: es un bug.
- Hackear o no hackear: hay elementos que tienen hasta cuatro hacks. Esto me permite posicionamiento ‘al pixel’ en todos los browsers. (Ver los botoncitos “médicos/pacientes” de la home). El uso de estos layouts es, entonces, un problema más filosófico que de implementación.
- Tuve un problemita muy frecuente con los list items. Me llevó como cuatro horas encontrar el bug de IEwin (algo que a Zeldman le llevó media, pero bueno, el escribió
el libro.)
* Nota: este post toma su título de un libro de Rodrigo Fresán, que nunca leí.
Comentarios
2 respuestas a “La velocidad de las cosas”
falto linkear a la tecnica que usaste en vez de display: none!
de los del compilado en mezzoblue, elegí los que me parecían, y mucho test, porque ninguno funciona tan limpio como display:none… en esto use el de Dwyer y el de Phark, y en un caso tuve que dejar display:none porque era el unico que no me afectaba el layout…