metal.ize

La entrada anterior les comentaba, muy brevemente (tuve que salir corriendo, se me hacía tarde) mi experiencia con el IE y algunos ejemplos de páginas que no funcionaban bien en IE8. Ya que llegué a mi casa, frustrado, intento descubrir las razones del por qué. Este va a ser un post de "errores" (digo "errores" porque tal vez no lo sean y todos los demás navegadores esten mal... ja, lo dudo) que encuentro en el IE8.

Cabe destacar que todos los problemas que aquí describo suceden ÚNICAMENTE en IE8. Todos estos errores los he probado en Opera (Navegador que también pasa el acid test 2) y no existen en este, por tanto, tomo como culpable a IE8. Por ahora los dejo con dos bugs sólamente:

Pff... Ahora si que he estado desaparecido mi gente. Me disculpo, pero he tenido un periodo de mucho estrés, sustos, trabajo, gastos... en fin. Me ha sido imposible postearles algo por aquí. Pero heme aquí, haciendo un tiempesito para revivir el blog un poco.

Cansado de ver muchas prácticas poco aconsejables (y que, honestamente, hasta hace poco yo también cometía) y como la excusa perfecta para darles a conocer que sigo vivito y coleando (aunque aún sumamente ocupado), he decidido escribir sobre los 8 grandes errores del diseño web actual. Estas son prácticas que el mundo de la web 2.0, los estándares web y, por sobre todo, la idea de separar la presentación del contenido nos han metido en la cabeza y la mayoría de las veces las hemos seguido sin ponernos a pensar un poquito en las consecuencias.

Creo que este es el mejor meme(??) que he visto, y no podía venir de nadie más que del buen aNieto2K. Y bueno, la tarea es sencilla: revisar los enlaces de tu blogroll con la herramienta de validación de la W3C. Vamos a darle:

Quise escribir esto ahora antes de que se me olvide ponerlo antes. Tomenlo como la voz de la experiencia: Wordpress + IE6 + Acentos en los comentarios de CSS = MALO. Llevo cerca de 5 horas peleandome y rompiendome la cabeza con el rediseño. ¿La situación? IE6 ignoraba completamente el código CSS que debía aplicar a un contenedor. El código XHTML era correcto, el CSS también; Firefox, Opera, IE7 lo mostraban correctamente. Incluso el archivo index.html que contenia el layout (sin pasar a Wordpress) era mostrado correctamente. ¿Qué estaba mal? IE6 - parecía ignorar qué hacer con ciertos divs y uls que tenía en el diseño. Y fue hasta hace unos 5 minutos que dí con la solución. Y para dar con la solución, primero hay que dar con el problema:

Paseandome por Infected-FX veo un genial tutorial que habla sobre la imagen de fondo en hipervínculos y las posibilidades de cambiarla de posición bajo ciertos eventos usando pseudo-clases (como :hover o :active). No tardé en comentar y decir que no sólo se puede aplicar a los <a>'s, sino que también podemos usarlos en otros elementos (como divs); pero bajo mi emoción olvidé mencionar que IE no soporta pseudo-clases en elementos que no sean <a> (cosa que eden me recordó) y que me recuerdan a mi anterior entrada sobre links en cajas. Fue entonces que, platicando con un amigo, recordé los viejos tiempos del "Web 1.0" y el extraño y antiguo término DHTML y dí con una forma de lograr que las pseudo-clases funcionaran en Internet Explorer también. Por cierto, solo he creado un archivo para las pseudo-classes :active y :hover. Pensaba meter también :focus; pero al recordar los problemas que existen entre estas dos clases entre los navegadores (No solo IE... De hecho, después de Firefox, es el que mejor se comporta) decidí dejar afuera :focus. Probablemente también se puedan arreglar pseudo-clases como :first-child o :lang; en cuanto tenga un poco más de tiempo veré si puedo arreglarlas.

Platicando con el buen xmax hace algunos días me comentaba de una idea que tenía para modificar el HTML que actualmente conocemos. Su idea es básicamente poder crear tus propias tags (como con el XML) y usarlas dentro de tus documentos. Les dejo el archivo que me ha enviado (aunque creo que sería HTML 5 y no 4 como el le ha llamado, pero en fin ) y espero dejen sus opiniones. A mi me ha parecido interesante, pero una modificación tan grande sería un gran problema de compatibilidad además de eliminar completamente al XML del mapa.

Descargar archivo "Concepto HTML4"

Actualización

Puse mal el link... jo, mis disculpas. Ya está arreglado.

Mañana 5 de Abril metal.ize y gran parte de la web (al menos la web que vale la pena ver) se desnudará completamente y mostrará su <body>. Como seguramente saben, el 5 de Abril se celebra el CSS Naked Day, osease, el día que quitamos los vínculos a nuestros CSS de nuestra web y dejamos la pura estructura a la vista. ¿El objetivo? Sencillo, promover los Estándares Web.

En la entrada de menú circular les prometí que pondría un script en PHP que mantuviera la navegación actual. Con navegación actual me refiero a marcarle en el menú al usuario en qué sección está. En el ejemplo del menú circular la sección de mail es la que está activa, y por lo tanto está marcada diferente a las demás con un círculo verde a su alrededor y el tooltip desactivado. Todo esto se logra cambiando la clase del <a> de "menitem" a "menactive" y dando el estilo que queramos en el CSS. PHP puede cambiar esta clase automáticamente si agregamos un par de líneas a nuestro código.