Cambio en el dominio

Acabamos de cambiar la redirección del dominio http://www.estudio-l.com a este blog!
Antes utilizabamos el hosting de nuestro amigo Pere Benavent, muchas gracias por alojarnos, ahora contaros cosas desde este blog!

Validando dewplayer para W3C

Hemos sufrido un poco con la información que teníamos de dewplayer.

Una rápida busqueda por Google nos ha enviado a información más actual acerca de cómo validar dewplayer en W3C que incluye incluso un asistente para generar tu propio html.

Para los que no lo conociaís, dewplayer es un reprouctor de mp3 escrito en flash muy ligero que se integra bien en cualquier página. Nos gusta especialmente que respecta algunas reglas básicas de la usabilidad:

• respeta convenciones visuales que el usuarion conoce
• de manera predeterminada no suena, el usuario lo pone en marcha
• ligero y…
• compatible W3C

Cómo centrar un div con CSS

Encontrareis mil maneras de gente que sabe más que nosotros explicando cómo hacerlo y lo que es más importante, porqué funciona de una manera y no de otra.

La nuestra es ésta:


/* for center purposes */
left: 0.5%;
right: 0.5%;
margin: 0 auto 0 auto;

Los left y right centran el contenido y el margin lo deja muy pegado a todo lo que lo rodea, ponlo dentro del #id que quieras centrar, experimenta y aprende.

Volviendo por el Blog

Para los que no lo sepais, no nos ganamos la vida con nuestros diseños web

Pero vamos a relanzar el blog de Estudio-L. Algunos amigos nos han pedido webs hechas por nosotros y no podemos atenderles. Estamos estudiando hacer algo con el proyecto, tener el control pero parte del trabajo más sencillo delegarlo.

Os tendremos informados, de momento, en el blog escribiremos de cómo resolvemos las cosas más difíciles.

Ruido con las versiones de IE

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.

Opacity en IE o Mozilla/Firefox

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.

¿Por qué utilizaré HTML y no XHTML?

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.

13 Reglas simples para acelerar tu sitio web

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

Beers&Blogs Campus Party 2007

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.

Diseñas no es lo mismo que maquetar

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 …