Me he encontrado hoy con el siguiente problema:

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,…..

Desde hace un tiempo, en las textareas en chrome y safari aparecen unas flechitas que permiten redimensionar dichas textareas. Por supuesto, para la gente que nos encargamos de que en todos los navegadoresse vea igual esto es una pesadilla.

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

textarea{resize: none}

Hoy explicaremos paso por paso lo que hay que hacer para poder tener bordes redondeados en todos los navegadores, y en especial en el que suele dar más problemas en este tema, el Internet Explorer.

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á)

Hoy voy a dar una serie de razones por las cuáles es conveniente, bueno y necesario crear una web cuyo contenido y diseño se encuentren separados. Estas son:

• 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.

Recientemente tuve el problema que después de maquetar correctamente el diseño de una página, haberlo probado en IE8, Firefox, Chrome y Opera, se lo paso a un amigo y este me dice que no puede ver correctamente las animaciones. ¿Cómo puede ser posible si he probado en todos los navegadores del mercado? Después de mucho reflexionar me pregunto de si es debido a que tiene una versión antigua de algún navegador….. y acierto….. era internet explorer 7.
Y ahora bien, ¿cómo puedo emular el comportamiento del IE7 o del IE6 en mi ordenador? Después de buscar mucho por Internet descubro un programa llamado IETester.

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,…..

Hoy os presento el código mediante el cual se pueden hacer triángulos únicamente mediante el uso de css. Decir que los triángulos serán rectángulos(como sabréis es cuando uno de los ángulos es de 90 grados).

.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;
}

Hoy toca un post para los que estén empezando en el mundo de la maquetación y desarrollo web.
Si os habéis adentrado en el código de diferentes páginas web (cosa siempre recomendable) os habréis dado cuenta que a veces se utilizan atributos id y en otros casos class de la siguiente forma:

<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 }

Es tarde, muy tarde, y en estos momentos estoy sentado en el sofá de mi casa mientras los recuerdos de las últimas horas se agolpan en mi mente….. Pero comenzaré la historia desde el principio, y cómo no, toda buena historia debe empezar presentando a los personajes, que en este caso son las bellezas Firefox e IE y el pobretón de mi. Todo hay que decirlo, yo era el más inexperto e ingenuo, el único que aun no tenía suficiente madurez para saber lo que realmente me convenía en el mundo, y por ello me sucedió lo que me sucedió.

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……………