Archive for June, 2010

Wordpress 3.0 ya está aquí

Escrito por Oriol Navascuez en 18/06/2010

WordpressPues sí, tras meses de versiones de pruebas, mejoras de bugs y otros tantos temas, ya tenemos disponible para nuestros blogs la nueva versión de Wordpress 3.0!

Si quieres saber la lista completa de actualizaciones para esta versión, te recomendamos la lectura de las nuevas características de Wordpress 3.0.

Y si lo que quieres es ir directo a la descarga… puedes descargarlo desde aquí.

Nosotros esperaremos unos días para instalarlo… que entre uno que formatea el PC, y el otro que bsca piso… no se nos ve el pelo! :P

Pasa de PX a EM

Escrito por Oriol Navascuez en 06/06/2010

En el anterior artículo te dábamos nuestra opinión sobre que medida es mejor usar px o em, y te comentábamos que haríamos un segundo artículo para comprender el uso de los em’s y como pasar nuestra web de píxeles a em sin sufrir demasiado. Pues bien, ya ha llegado la hora de daros las claves básicas para ello.

Pero antes de empezar a trabajar con los em en nuestras CSS, necesitamos saber el tamaño de fuente por defecto del navegador. Por suerte, esto es fácil de saber. Todos los navegadores tienen por defecto el tamaño de fuente en 16px, o lo que es lo mismo, 1em.

Muchos diseñadores modifican el tamaño de la fuente a 10px (0.625em o 62.5%) en el <body>, para así seleccionar más fácilmente el tamaño de fuente de los hijos. Pero a nuestro parecer, nos parece más correcto dejar la fuente por defecto a 16px, y transformar la medida únicamente en los elementos que lo necesitemos, ya que así, sabremos en todo momento, que el tamaño por defecto será 16px, el mismo que los navegadores. Y así, si alguien ha modificado el tamaño por defecto del navegador, nuestro interface elástico no se romperá y seguirá ajustado perfectamente.
Para conseguir esto definimos esto en nuestra hoja de estilos:

body {
    font-size:1em;
}

El problema, como casi siempre, es Internet Explorer. IE, tiene un problema, y es que redimensiona el texto em de forma mucho mayor de lo normal. Por lo que es necesario colocar la siguiente línea en nuestras CSS:

html {
    font-size:100%;
}

Con esta línea, incluso IE redimensionará correctamente nuestra web.

Ahora viene lo “duro”, como convertimos de px a em nuestro diseño?

Como seguramente no somos expertos en matemáticas… será bueno apuntarnos o recordar solo una fórmula, no? No te asustes aun, que es facilita. Si eres diseñador/a seguro que conoces bien a los píxeles, por lo que partimos sobre esta base.

1 ÷ tamaño de fuente del padre × tamaño deseado en píxeles = valor en em

Esta fórmula funciona de la siguiente manera, calculamos cuanto mide un píxel en ems y lo multiplicamos por el tamaño en píxeles que necesitemos para obtener cada medida en ems.

Es decir, que si queremos crear un <div> que tenga de ancho 540px, sabiendo que el tamaño por defecto no lo hemos modificado, aplicaremos la fórmula así:

1 ÷ 16 × 540 = 33.75em

Pero si te quieres ayudar un poco con una tabla de conversión en la que seleccionando el tamaño de fuente por defecto, te devuelve la tabla con proporciones a esa medida… te recomendamos visitar, PXtoEM.

Pues creo que con esto ya tenéis la base para empezar a pasar vuestros diseños a ems. Es algo más de trabajo, pero mejora mucho la accesibilidad a la página web y a sus contenidos.
Suerte con los próximos diseños!

IETester, testea tus desarrollos en todos los IE

Escrito por Víctor Mundet en 03/06/2010

IETester es el mejor de los portables de Internet Explorer, en una misma aplicación tendréis las versiones 5.5, 6, 7, 8 y 9 de IE. Muy útil para cualquier desarrollador web que deba testear sus desarrollos en todos los navegadores.

ENLACE DIRECTO