Fuera de bromas, si quieres estar al día de que es lo que se cuece en el “nuevo” HTML5, que ya está soportado por Firefox 3.5 y Safari 4, aquí tienes una recopilación de lo mejor que se ha publicado estos días:

Cheat Sheet para HTML5 en PDF | Smashing Magazine

HTML5 y CSS3, las técnicas del futuro | Nettuts+

Geolocalización en Firefox 3.5 | Mozilla Hacks

HTML5 vence a XHTML2 | W3C

Todas las novedades de HTML5 | Anexom

Tag <video /> de HTML5 | aNieto2k

html5Doctor, te ayuda a implementar HTML5, hoy!

html5gallery, hermana de html5doctor, es una galería de páginas realizadas utilizando HTML5

Google Wave, el primer proyecto serio que utilizará HTML5.

¿Conocéis algún otro enlace que debería estar en la lista?

Una de las funcionalidades que echo en falta es poder ver el CSS en formato plano. Me explico:
Cuando durante la maquetación modificas propiedades de 4 o 5 elementos, después me resulta muy engorroso tener que acordarme de qué he hecho, y dónde.
Y, ¿a que viene todo esto?

Ayer descubrí una extensión para firefox, que si bien no está destinada a reemplazar a firebug, puede ser un gran complemento.

Phoenix permite editar el código CSS y Javascript de cualquier web, y ejecutar esas modificaciones para observar los resultados. También podremos ver el código HTML, tanto el original como el generado después de ejecutar el javascript. Eso sí, no podemos hacer modificaciones en el HTML.

Pero eso no es todo, Phoenix nos muestra los archivos CSS y js que se cargan en la página y su tamaño. Su editor de código, que colorea la sintaxis, es capaz de comprimir y minificar cualquier CSS o javascript, y también hacerlo a la inversa. Cualquier script de javascript comprimido (con packer ) o minificado (minify), Phoenix es capaz de descomprimirlo para que sea perfectamente legible.

Podremos ver en vivo los cambios que realicemos, tanto en CSS como en javascript. No tan “en vivo” como con Firebug, pero sí después de activarlo a través de “Execute CSS” o “Execute JS”.

Por último, Phoenix también permite guardar en nuestro ordenador los archivos.

Recordad que Phoenix está todavía en versión experimiental, por lo que, dicho finamente, tiene licencia para pegar todos los petardazos que quiera Sin embargo, a mí todavía no me ha fallado en los días que llevo utilizándola.

Eso sí, aún tiene un problema con la codificación de caracteres, al menos en los CSS: > que convierte en &gt; , etc…

Sin embargo, es una extensión totalmente recomendable, con la que se pueden hacer grandes cosas si se acompaña con firebug, y alguna que otro add-on interesante.

Animaos a probarla, y contadme que os ha parecido.

Web del proyecto Phoenix.

Descarga la extensión para Firefox Phoenix.

Vía @vladocar

BrowserLab es una nueva herramienta de Adobe que proporciona bajo demanda, imágenes renderizadas de como se verán nuestras webs en distintos navegadores, corriendo en sistemas operativos diferentes.

Actualmente, soporta los siguientes navegadores:

• Firefox 2.X y 3.X (Windows XP y Mac OS X)
• Internet Explorer 6.X y 7.X (Windows XP)
• Safari 3.X (Mac OS X)

Las capturas realizadas, pueden verse una por una, comparando los resultados de dos navegadores o superponiendo los resultados mediante transparencias que podemos ajustar a nuestro gusto.

BrowserLab también es capaz de guardar la configuración de navegadores que nos interesa.

Además, para rematar la faena, BrowserLab puede integrarse con Dreamweaver CS4 mediante una extensión, que nos permitirá comparar nuestra maquetación en local.

Más información sobre BrowserLab (ingles)

Prueba BrowserLab

Via | @vladocar

Para los próximos desarrollos la estrategia a seguir está clara, asegurar nuestras maquetas en IE 7  y 8. Pero, ¿qué pasa con nuestros proyectos que ya están en producción? ¿Partimos desde cero para crear una hoja de estilos que funcione correctamente en IE 8?

La compañia de Redmond nos ha tenido en cuenta (aunque sea por primera vez) a nosotros, sufridos maquetadores y se ha sacado de la manga una nueva meta etiqueta, concretamente esta:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Con esta simple linea, forzaremos al motor de IE 8 a renderizar como lo hace  IE 7, haciendo las mismas barbaridades que su predecesor e incumpliendo exactamente los mismos estándares. Lo que hará que todas aquellas webs maquetadas a la perfección en IE 7, se vean exactamente igual en la nuva versión del navegador de Microsoft.

Su funcionamiento es muy simple. Tan solo debemos añadir la meta etiqueta en la cabecera del HTML, pero ojo, la etiqueta deberá estar obligatoriamente justo después de la apertura de la cabecera (<head>). Si la situamos en cualquier otro sitio del documento, no funcionará.

Veamos un ejemplo de donde insertarla utilizando el html de este blog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<!-- ES IMPRESCIDIBLE QUE LA ETIQUETA X-UA-COMPATIBLE SEA LA PRIMERA QUE APAREZCA EN EL HEADER -->
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!-- ES IMPRESCIDIBLE QUE LA ETIQUETA X-UA-COMPATIBLE SEA LA PRIMERA QUE APAREZCA EN EL HEADER -->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>X-UA-Compatible. Meta etiqueta para Internet Explorer 8 | pon css en tu vida!</title>

Modificando una sola línea de nuestros antiguos proyectos, conseguiremos que el nuevo Internet Explorer 8 muestre correctamente el fruto de nuestras horas de maquetación para ese suplicio llamado IE7.

¿Y tú? ¿Conocías y/o utilizas ya la etiqueta X-UA-Compatible para Explorer?

Fuente: Netadictos

Durante la maquetación de mi portfolio, me propuse utilizar este método de valoración para representar mi participación en los proyectos que he participado.

La idea.

El sistema es el típico método de valoraciones que todos conocemos (las tan conocidas estrellitas). Dándole “media” vuelta al diseño, cambiando las estrellas por asteríscos, podemos obtener algo así:

– VER EJEMPLO FUNCIONANDO -

Ejecución

A la hora de convertir el diseño en código HTML semántico, lo más adecuado es utilizar la etiqueta <dl>, para definir una lista compuesta por términos (<dt>) y descripciones (<dd>).  Veamos el HTML necesario para crear esta lista:

<dl>
<dt>xhtml</dt>
<dd class="star stars5" title="Total">Total</dd>

<dt>css</dt>
<dd class="star stars4" title="Muy significativa">Muy significativa</dd>

<dt>zendFramework</dt>
<dd class="star stars3" title="Significativa">Significativa</dd>

<dt>jQuery</dt>
<dd class="star stars2" title="Parcial">Parcial</dd>

<dt>diseño</dt>
<dd class="star stars1" title="Puntual">Puntual</dd>
</dl>

Observamos el código html antes de empezar con los estilos para comprobar que es perfectamente legible y comprensible sin la necesidad de CSS.

A la hora de crear las imágenes, vamos a utilizar sprites. Es decir, juntaremos todas las imágenes necesarias en una sola, que posicionaremos mediante CSS para obtener el resultado deseado. En el caso del diseño original, las imágenes de las “estrellas” debían tener el fondo transparente, sin embargo la versión que os muestro para que se aprecie mejor tiene color de fondo:

Utilizar sprites para nuestras imágenes tiene como resultado más significativo la reducción de peticiones al servidor. Suponiendo que creando las cinco imágenes por separado el peso será el mismo que creando tan solo una, la mejora la encontramos en que reducimos de 5 a 1 las veces que el servidor debe entregar archivos al navegador para obtener el mismo resultado.

Mejor con estilos…

Es el momento de darle vida a nuestro HTML, para ello hemos dotado a los elementos de difinición (<dd>) de la lista con dos clases: star y stars5.

Con la primera clase (star) proporcionaremos los estilos comunes a todos los elementos: ancho, alto, imagen de fondo, etc… La segunda clase será diferente dependiendo de la valoración que queramos asignar. En este caso hay cinco posibles opciones: stars5, stars4, stars3, stars2 y stars1. En función a esta clase, posicionaremos la imagen para obtener el resultado deseado. Por lo tanto, el CSS quedaría tal que así…

.star {
width: 74px;
height: 10px;
text-indent: -9999px;
background: transparent url(bg_interface.png) 0 0 no-repeat;
margin: 0 0 16px 13px;
}
.stars5 {
background-position: -1px 0;
}
.stars4 {
background-position: -1px -11px;
}
.stars3 {
background-position: -1px -22px;
}
.stars2 {
background-position: -1px -33px;
}
.stars1 {
background-position: -1px -44px;
}

Más sencillo imposible; asignamos al elemento un tamaño fijo, movemos el texto mediante text-indent para que sea invisible al usuario, y asignamos la imagen de fondo.

Después, tan solo necesitamos posicionar la imagen de fondo para que se muestre la sección correspondiente. Es importante el uso del atributo title, para que el usuario conozca el significado de nuestra puntuación al pasar el cursor por encima de los asteriscos.

- VER DEMO -