Estudio Lázaro

Vuelve el maldito IE a dar que hablar, mucho ruido en la web con él: que si va a romper la web si lo hacen 100% estándar, que si tenga dos modos para que sigan viendose las webs solo para IE…

Lo más sensato que hemos oído por ahí: Utiliza Firefox u otro navegador que respete los estándares. Ganaremos todos, el usuario (seguridad, comportamiento, actualizaciones…), la web, los diseñadores… el único que pierde es Hasecorp.

El comportamiento de la propiedad opacity en CSS está comenzando ser algo más homogeneo… y no echemos las campanas al vuelo.

Antes era tan nefasta la implementación que Mozilla y derivados utilizaban un sintáxis CSS propia (WTF!) e IE ni lo soportaba. Después IE pasó a soportarlo con una sintáxis también propia y sui generis.

Ahora parece que comienza extenderse la sintáis estandar de CSS: opacity: X.X; dondeX.X es un numérico que puede ir desde 1.0 a 0.0.

Aún así, la mejor práctica hoy en dia aunque no sea la más estandar es incluir tres líneas en tus CSS para que todos los navegadores puedan presetar la transparecencia:

• opacity: 0.40;
• filter:alpha(opacity=40);
• moz-opacity:0.4;

La primera es la sintáxis estandar CSS, la segunda para navegadores de la familia Mozilla, (en especial con motores de renderización más viejos por que los más recientes se supone que entienden la sintáxis estandar) y la última para IE.

El problema de las transparencias con IE no acaba ahí. Estamos rediseñando el sitio de www.benavent.org y las transparencias desaparecieron en IE. Nos hemos vuelto locos pero lo hemos encontrado.

Como dice uno de nuestros mottos seguro que no eres el primero en tener ese problema y así era, como podeis leer IE6 opacity filter caveat IE necesita algo más… requiere que los elementos tengan cierto ancho (width) y alto (height) específico.

Dicho y hecho, las transparencias han vuelto, de hecho hemos añadido un simple width: 100%; a la clase y resuleto, dado que la clase es hija de otra y aunque redundante no le duele decirlo que ocupe todo su ancho disponible.

Una pena, no hay manera de que el javascript de la página funcione bien con IE, así que venga a depurar y depurar …

• mismo javascript, mismo navegador: sí va en otras páginas
• mismo javascript y misma página: sí va en Firefox
• solamente no va en esa página y con IE 6.0

Grrr! después de mirar y mirar, conclusión - a falta de una prueba que contaré por aquí- los problemas de hacer páginas XHTML, es que hay cosas que se pueden hacer en HTML y no se pueden hacer en XHTML.

Por ejemplo:

• utilizar ‘hide’ para elementos con estilo (sí es mi caso)
• utilizar document.write (sí es mi caso)
• utilizar entidades de caracter, como por ejemplo: (sí es mi caso)
• utilizar el innerHTML -que no es HTML estandar (y no es mi caso)

Contaremos si pasar a HTML arregla algo, además, con los recientes cambios de etiquetado en HTML de paso los probamos.

Via Microsiervos llego al enlace de un señor que sabe de qué habla: Steve Souders es el Jefe de rendimiento de Yahoo! y tiene publicado un libro en O’Reilly sobre alto rendimiento en sitios webs.

Si te defiendes en inglés puedes leer las 13 Reglas simples para acelerar tu sitio web que Soulders ha publicado en Yahoo!, si no te defiendes en inglés esperate a que las traduzca si el bueno de Steve nos da permiso… Los titulares tomados de la nota de Microsiervos:

1. Reducir el número de peticiones HTTP
2. Usar una Red de Distribución de Contenidos (CDN)
3. Añadir la cabecera «Expires»
4. Comprimir con Gzip los componentes
5. Poner los CSS al principio
6. Mover los scripts al final
7. Evitar las Expresiones CSS
8. Hacer que los JavaScripts y CSS sean externos
9. Reducir las búsquedas en los DNS
10. Minificar los scripts de JavaScript
11. Evitar redirecciones
12. Eliminar scripts duplicados
13. Configurar los ETags

Finalmente se celebro el Beers&Blogs 2.007 en Valencia… como tantas veces no acudimos al evento aunque dijimos que lo haríamos (nos hubiera gustado ir al que se celebró en la Av. de Aragón).

La cosa es fácil, tenemos pocos clientes, trabajamos despacio … somos monacales pero al próximo iremos.

Por cierto, voy a dejar un post en el borrador sobre qué significa ser monacal en este trabajo.

El diseño web entra por los ojos. Pero no podemos quedarnos en los ojos. A través de los ojos debemos llegar, y quedarnos, en el cerebro de nuestro visitante.

Parece claro que una cosa es el diseño y otra las tripas de la página web. El diseño entra por los ojos y las tripas son las que hacen :

• el diseño accesible,
• el contenido estructurado
• la presentación maquetable (vía CSS)
• nuestro sitio web querido por los buscadores

Es díficil el trabajo en equipo siempre y entre estos dos perfiles más. Hacer contenido espectacular y accesible es un reto. Muchas veces se cae en hacerlo rápido por que el cliente aprieta…

Un truco para el maquetador: utiliza plantillas, propias o de otros, muchas veces la estructura del contenido es reutilizable.

Plantillas:

• CSS Layouts
• CSSplay hay que mirar la sección de layouts y demos, por ejemplo…
• Design by Grid
• CSS Mania (hecha desde aquí)
• CSS Vaul: un clásico, comentan sitios basados en CSS
• OSWD: Open Source Web Design no es muy conocida entre los diseñadores, pero aporta que todos sus diseños cumplen con los estándares del w3c.
• Free Layout: Plantillas para html, flash, CMS …

El acrónimo HIG (por sus siglas en ingles significa Pautas o directrices para interfaces de usuario) deberíamos conocerlo todos los que hacemos una mínima construcción de contenidos web.

La cosa es sencilla, cualquier resistencia es fútil y si intentas construir una web ignorando algunos principios del diseño de interfaces de usuario te estrellarás una y otra vez con errores que otros han cometido. Además tus visitantes estarán más perdidos que un pulpo en un garaje.

Unos enlaces básicos sobre HIG, los pongo por orden de preferencia personal:

1. Introducción sobre HIG, qué es, enlaces a otros recursos…leelo si no tienes idea de que va todo esto.
2. HIG en la Wikipedia
3. Gnome HIG
4. HIG de Apple, estas son bastante citadas, y los de Apple fueron los primeros en ponerse del lado del usuario.
5. HIG de Kde
6. Iniciativa de HIG independiente para Apple
7. proyecto en sourceforge sobre HIG
8. HIG de IBM para applicaciones en Java