Tenía que modificar unos css para un cliente y resulta que una vez modificados y subidos contacta conmigo y me comenta que el no lo ve bien. Le explico que tiene que eliminar la caché y cómo debe hacerlo, cosa que ejecuta y le funciona (para gran alivio mío). Pero entonces me hace la siguiente pregunta:

¿Y qué sucede si un cliente ve esto de forma errónea porque tiene los archivos antiguos en caché? ¿cómo se podría solucionar para no obligarle a que refresque la caché?

Ahí me dejó helado….. y tras pensar un rato conseguimos elaborar la solución siguiente:

<link rel=”stylesheet” type=”text/css” href=”/css/estilos.css?id=001” />

Consiste en añadir un parámetro al link. NO TENDRÁ NINGÚN EFECTO sobre los estilos, pero hará que el navegador decida volver a cargar ese css. Recordar que tendréis que modificarlo para que vuelva a descargar el browser el css con id=002, con id=003,…..

Para quitarlo, simplemente en el css de la página hay que poner:

textarea{resize: none}

Pasos a seguir:

• Descargarse de DillerDesign el archivo js (yo he cogido el de mínimo tamaño puesto que realmente no voy a modificarlo). En caso de que lo hayan eliminado tb puedes descargarlo aquí.
• Incluir ese js en el head.

<script src="/js/DD_roundies_0.0.2a-min.js"></script>

• Al cuadro que queramos redondear le ponemos una clase que le identifique. Aquí lo haremos llamándolo por ejemplo “cuadro”.

<div class="cuadro">lo que queramos poner </div>

• Justo al comienzo del body, pondremos.

<script type="text/javascript"></script>

¿Y qué significa esa última línea de código?

• Primer parámetro ‘.cuadro’ indica la clase del div que queremos redondear.
• Segundo parámetro ’10px 10px 10px 10px’ Qué redondeo queremos darle a cada una de las esquinas, en este caso a todas le damos 10px de redondeo.
• Tercer parámetro false, significa que sólo querremos mostrarlo en el caso de que el usuario lo vea en IE. En el caso en que estemos en Firefox, Ópera, Chrome,… podremos hacerlo mediante css sin que añada líneas de código innecesarias.

Nota: Por Internet hay muchos sitios en donde se explica como hacerlo, pero en el 80% de las webs visitadas era erróneo, no sabéis cuanto tiempo he perdido viéndolo. Menos mal que encontré esta página, que es de donde he sacado esta forma, compatible con IE8 e IE7 (no he mirado más allá)

• Una mejor indexación en los distintos buscadores: Los robots calificarán mejor nuestros contenidos debido a que no se encontrarán ningún elemento de diseño de en medio.
• Reducción del tamaño global: Se minimiza el contenido redundante entre páginas, lo cual significa que se reduce el tamaño de la página a cargar, algo ventajoso para el usuario (le tardará menos en aparecer) y también para nosotros (menor carga de trabajo y transferencia de datos en nuestros servidores).
• Maximiza la audiencia potencial: Es mucho más fácil solucionar los problemas de accesibilidad (mantener versiones para PDAs, teléfonos móviles, etc…) y usabilidad (hacer sitios para personas con minusvalía)
• Excelente portabilidad: Los cambios menores o globales tanto de diseño como de contenido serán infinitamente más sencillos y rápidos.

Con él, se permite tener abiertos al mismo tiempo sesiones del IE 5.5, IE 6, IE 7 e IE 8, permitiendo comparar las ejecuciones de las páginas, los errores que se provocan,…..

.flechaizquierda {
border-color:transparent #000 transparent transparent;
border-style:solid;
border-width:10px 20px 10px 0;
width:0;
}
.flechaderecha {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width:10px 10px 10px 20px;
width:0;
}
.flechatop {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}
.flechabot {
border-color:#000000 transparent transparent;
border-style:solid;
border-width:13px 13px 0;
width:0;
}

<div id=”nombre”></div>

<div class=”nombre”></div>

Y por ello nos surge la siguiente duda: ¿Qué diferencias hay entre class e id?

• Los id’s se referencian con el prefijo “#” y las clases con “.”.
• Un id debe ser único y una clase puede ser referenciada por muchos elementos.
• Un elemento puede tener 2 o más clases, pero sólo un id.

Notas:

• Referencia de un id #nombreDelID { background: #ff80c0 }
• Referencia de un class .nombreDelClass { background: #ff80c0 }

Comenzó el día, mis primeras horas las pasé con la gentil y graciosa Firefox, una maquetación impoluta, sin ñapas ni pifias que no quisiera realmente hacer, fue como un visto y no visto, sin problemas……. incluso ella era capaz de pasarme algún que otro error no muy grave de código….. En definitiva, simplemente sabía que con ella mi mundo iba a ser más feliz.

Pero entonces a media tarde llegó la exigente y envidiosa IE. Ésta comenzó a discutir con Firefox acerca de los estándares, se hizo con mi código y comenzó a destrozar su integridad mientras hacía caso omiso a mis intentos de mantener el orden y el respeto mutuo por el resto de navegadores. Fue la lucha más encarnizada que había visto desde hacía años, ya que ninguna de las dos daba su brazo a torcer y continuaban tirando paneles y moviendo enlaces de aquí para allá.

Entonces tuve que tomar una decisión, que se resume en las siguientes líneas de código:

Son las 3 de la mañana……. y esta lucha me ha agotado…….. no se si seré capaz de recuperarme de todas las heridas más bien psiquicas sufridas……………