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 explicar cómo hacer unos bordes redondeados a una imagen mediante la herramienta photoshop. Los pasos a seguir son:

• Abrir la imagen en cuestión.
• Desbloquearla (al principio tendrá un candado al lado de la capa, clicamos dos veces sobre la capa, le damos a ok y ya la tendremos desbloqueada).
• Mediante la herramienta selección (la del rectangulito) seleccionamos toda la capa y vamos a Selección->Modificar->Redondear y le introducimos por ejemplo 5 píxeles
• Selección invertir y una vez que estén seleccionados sólo los bordes darle a suprimir.
• Y ya tenemos una imagen con los bordes redondeados!!!!!!!

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.

Realmente es increible el resultado de esta pintura con Photoshop CS y con una tbla digital Wacom Intuos 4

Aquí tenéis la imagen real.

Aquí tenéis el resultado:

Y en este video podéis ver todo el proceso…

Realmente increible, no habría caido en el dibujo si no hubiera sido por la matrícula…. Visto en esta página.