Diálogo para gestionar las extensiones instaladas al iniciar por primera vez el navegador. Las extensiones instaladas por programas externos, como Skype, se desactivan por defecto.

Añadido el motor de búsqueda de Twitter a la barra de búsqueda (actualmente, sólo para ciertos idiomas, que no incluye el castellano)

Añadida opción para cargas las pestañas y las ventanas de la última sesión sólo cuando el usuario lo indique, mejorando el tiempo de inicio cuando no se necesiten.

Mejora de rendimiento y consumo de memoria al utilizar las etiquetas <audio/> y <video/>

Añadido soporte para utilizar CORS para cargar texturas WebGL de dominios externos. Esto permite el uso de aplicaciones como Nokia Maps 3D y Google MapsGL.

Soporte para la creación de menús contextuales de HTML5.

¿Cuántas eres capaz de adivinar?

1. facebook.com (9%)
2. google.com (3,3%)
3. youtube.com (3,3%)
4. gmail.com (1,1%)
5. twitter.com (1,1%)
6. mail.google.com (0,6%)
7. yahoo.com (0,6%)
8. hotmail.com (0,6%)
9. amazon.com (0,5%)
10. reddit.com (0,5%)

Los cambios, concretamente, son los siguientes:

• Añadido soporte para animaciones CSS
• Se le ha dado más visibilidad a la opción de configuración Do-Not-Track, que indica a los sitios web que el usuario no desea ser rastreado
• Mejoras en el rendimiento de los canvas, JavaScript, manejo de memoria, y funciones de red
• Mejoras en el soporte de HTML5, XHR, MathML, SMIL, y canvas
• Mejoras en la corrección ortográfica para algunos idiomas
• Mejoras en la integración con los entornos de escritorio de Linux
• Arreglados varios problemas de estabilidad
• Arreglados varios problemas de seguridad

Los desarrolladores del motor de renderizado que utilizan Safari y Google Chrome, Webkit, fueron los primeros en sugerir la creación de degradados utilizando CSS, a principios de 2008. Su implementación, disponible para Safari 4 y superiores y Google Chrome 1 y superiores, soportaba degradados lineales y radiales utilizando las sintaxis:

-webkit-gradient(linear, punto_inicio, punto_fin, parada[, parada]+)
-webkit-gradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+)

Desde Mozilla se comenzó entonces a implementar una sintaxis similar a la de Webkit, ampliada, que se vería abandonada al poco tiempo, cuando la W3C propuso una sintaxis alternativa, que es la que se acabó por introducir en Firefox 3.6 (Gecko 1.9.2).

El borrador de la W3C define actualmente 4 funciones para la creación de degradados, a las que Mozilla añade el prefijo -moz-, por tratarse de una implementación propietaria de una característica experimental, que puede diferir de la de otros navegadores. Las funciones del borrador son:

• linear-gradient(): para crear un degradado lineal
• radial-gradient(): para crear un degradado radial
• repeating-linear-gradient(): para crear un degradado lineal que se va repitiendo hasta el final del bloque
• repeating-radial-gradient(): para crear un degradado radial que se va repitiendo hasta el final del bloque

A principios de este año 2011, Webkit (Safari 5.1 y Google Chrome 10) adoptó también estas funciones, aunque manteniendo las anteriores por razones de compatibilidad. Opera también se ha sumado a su implementación, introduciendo estas funciones en la versión 11.10 del navegador. Webkit y Opera utilizan, respectivamente, los prefijos -webkit- y -o- al utilizar estas funciones.

Por otro lado, Internet Explorer, como comentamos, no permite crear degradados con CSS, sino que tenemos que utilizar sus tristemente famosos filtros, y en concreto, el filtro gradient, disponible desde la versión 5.5. Estos hacen uso de DirectX, y pueden suponer un consumo exhaustivo de recursos, por lo que no os aconsejo excederos.

En resumen, para crear un bonito degradado entre dos tonos de azul, #2B93D2 y #77BCE6, que sea compatible con las últimas versiones de los navegadores más populares, podríamos hacer lo siguiente:

.degradado {
  /* Color alternativo para versiones que no soporten degradados */
  background-color:#2B93D2;

  /* Safari 4+ y Chrome 1+ */
  background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2B93D2), color-stop(1, #77BCE6));

  /* Safari 5.1+ y Chrome 10+ */
  background-image:-webkit-linear-gradient(#2B93D2, #77BCE6);

  /* Firefox 3.6+ */
  background-image:-moz-linear-gradient(top, #2B93D2, #77BCE6);

  /* Opera 11.10+ */
  background-image:-o-linear-gradient(top, #2B93D2, #77BCE6);

  /* Internet Explorer 5.5+ */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#2B93D2', EndColorStr='#77BCE6');
}

obteniendo el siguiente resultado (ten en cuenta que es necesario utilizar uno de estos navegadores para poder ver el resultado):

Veamos ahora la sintaxis exacta de estas funciones en cada uno de los navegadores.

Safari 4+ y Chrome 1+

Empecemos por la antigua sintaxis de Webkit. Los degradados lineales se crean de la siguiente manera:

-webkit-gradient(linear, punto_inicio, punto_fin, parada[, parada]+)

punto_inicio y punto_fin definen una recta que es la dirección en la que se aplicará el gradiente. Con left top como punto de inicio y right bottom como punto de fin, por ejemplo, el degradado se aplicará de la esquina superior izquierda a la inferior derecha.

Las “paradas” son funciones color-stop() que indican el color que tomará el degradado en un cierto punto de la línea. El valor color-stop(0.5, #333), indicaría que queremos un gris oscuro en la mitad del degradado. También se puede utilizar from() y to() para indicar el color al inicio y al final de la línea, respectivamente, en cuyo caso, obviamente, no hace falta especificar el punto.

El siguiente ejemplo crearía un degradado entre tres tonos de gris, de la esquina superior derecha a la inferior izquierda. Podéis ver el resultado un poco más abajo, si utilizáis Safari o Chrome.

background-image:-webkit-gradient(
    linear,
    right top,
    left bottom,
    color-stop(0.1, #88857D),
    color-stop(0.3, #999),
    color-stop(0.9, #CCC)
);

Los degradados radiales toman la siguiente forma:

-webkit-gradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+)

centro_interno es el centro del círculo interno del degradado, mientras que centro_externo lo es del círculo externo. Se pueden utilizar las palabras clave left, center y right para designar la componente horizontal, y top, center y bottom para la componente vertical. También podemos usar porcentajes.

Por otro lado, radio_interno y radio_externo, como sus nombres indican, son los radios de estos dos círculos.

Por último tenemos una serie de paradas, que funcionan de forma similar a los degradados lineales.

Al utilizar la siguiente propiedad, por ejemplo:

background-image:-webkit-gradient(
    radial,
    center center,
    0,
    50% 50%,
    90,
    color-stop(0.1, #888),
    color-stop(0.3, #999),
    color-stop(0.9, #CCC)
);

el bloque tomaría el siguiente aspecto:

Safari 5.1+, Chrome 10+, Firefox 3.6+ y Opera 11.10+

Según el borrador de la W3C el degradado lineal se creará de esta forma:

linear-gradient([dirección,]?	parada[, parada]+);

O si queremos que el degradado se repita varias veces, hasta el final del bloque:

repeating-linear-gradient([dirección,]? parada[, parada]+);

El primer valor, opcional, es la dirección del gradiente. Este se puede especificar mediante un ángulo (0deg, 90deg, 200deg, …) o con un punto, siendo la dirección en este caso la línea que pasa por dicho punto y por el centro del elemento. Para especificar el punto se pueden utilizar las palabras clave left, center y right para la componente horizontal, y top, center y bottom para la componente vertical. En caso de no indicarse la dirección del gradiente, se utiliza top como valor por defecto, es decir, el gradiente iría de arriba a abajo en línea recta.

A continuación tenemos las paradas, compuestas por los colores, y, opcionalmente, la posición en la línea en la que se situará dicho color.

Las siguientes propiedades, por ejemplo, crearían un degradado entre dos tonos rojos en un ángulo de 170º, situándose el primero de los tonos a 30px del inicio de la recta y el segundo a 50px:

background-image:-moz-linear-gradient(170deg, #E04141 30px, #CD2727 50px);
background-image:-webkit-linear-gradient(170deg, #E04141 30px, #CD2727 50px);
background-image:-o-linear-gradient(170deg, #E04141 30px, #CD2727 50px);

Para los degradados radiales se utiliza la siguiente sintaxis:

radial-gradient(
	[centro,]?
	[externo,]?
	parada[, parada]+
)

El primer valor, opcional, es el centro del círculo interior en el que comienza el degradado. Si se omite, el valor por defecto es center.

El segundo valor, también opcional, define la circunferencia externa. Se indica primero la forma, usando las palabras clave circle (círculo, radio constante) o ellipse (elipse, radio vertical y horizontal), y a continuación el tamaño, usando las palabras clave:

• closest-side: la figura externa toca el borde/s más cercano al centro del bloque
• closest-corner: la figura externa toca la esquina/s más cercana al centro del bloque
• farthest-side: la figura externa toca el borde/s más alejado del centro del bloque
• farthest-corner: la figura externa toca la esquina/s más alejada del centro del bloque
• contain: sinónimo de closest-side
• cover: sinónimo de farthest-corner

Por último, se indican una o más paradas en la misma forma que los degradados lineales.

El siguiente ejemplo crea un degradado radial de rosa a rojo en la esquina superior izquierda:

background-image:-moz-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);
background-image:-webkit-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);
background-image:-o-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);

Internet Explorer 5.5+

Internet Explorer, como dijimos, también permite crear degradados, aunque para ello tendremos que hacer uso de su filtro progid:DXImageTransform.Microsoft.gradient. Su uso es bastante sencillo, por lo simple de su funcionalidad. Sólo hay que indicar el valor del color de inicio (startColorstr) y el de fin (endColorstr), de la siguiente forma:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8AAD28, endColorstr=#EEEFB1);

¿Son suficientes la interfaz más compacta, la privacidad mejorada, la sincronización, el incremento al soporte de HTML 5, el nuevo gestor de extensiones o las mejores en la velocidad y el rendimiento para que Firefox siga ostentando el título de mejor navegador del mercado? ¿es un título que perdió hace tiempo? ¿pensáis nunca lo llegó a tener? Aquí tenéis la encuesta.

• Eliminamos la barra de estado haciendo clic sobre el menú “Ver” y desmarcando “Barra de estado”. Para ver la URL de los enlaces al situar el cursor sobre estos, y para ver la barra de progreso al cargar una página, se puede utilizar la extensión Fission, que combina ambas funciones con la barra de dirección. Si queremos ver el progreso de las descargas, podemos dejar seleccionada la opción de que se abra la ventana de descargas al comenzar a descargar un archivo, o podemos instalar Download Manager Tweak o Custom Download Manager para que se abra en una pestaña o en la barra lateral.
• Hacemos clic con el botón derecho sobre la barra de menús o la barra de navegación y seleccionamos Personalizar. Arrastramos los marcadores a la parte izquierda de la barra de navegación y seleccionamos también “Usar iconos pequeños”. Ahora podemos eliminar la barra de marcadores haciendo clic con el botón derecho sobre la barra y desmarcando “Barra de herramientas de marcadores”. Si tenemos muchos marcadores, los nombres de estos se pueden eliminar, o reducir, y basarnos sólo en su icono.
• En el mismo diálogo “Personalizar” podemos arrastrar los botones de Anterior y Siguiente y utilizar Alt + Izquierda y Alt + Derecha en su lugar. También los botones de Recargar y Detener, y utilizar Esc y F5, respectivamente, o combinarlos en un sólo botón utilizando Stop-or-Reload button. El botón de Inicio también se puede eliminar, si no lo utilizamos.
• La barra de búsqueda se puede sustituir por palabras clave. Si abrimos la página de Google y hacemos clic con el botón derecho sobre la caja de búsqueda, veremos una opción llamada “Añadir una palabra clave para esta búsqueda”. Si introducimos el carácter “g” como Palabra clave, podremos escribir algo como “g mis términos de búsqueda” en la barra de direcciones para lanzar una búsqueda con los términos indicados. También se puede modificar la configuración de Firefox para que, al escribir palabras o frases que no parezcan URLs en la barra de direcciones, se utilice Google para buscar estas palabras, en lugar de utilizar la opción de Voy a tener suerte.
• Eliminamos la barra de menú haciendo clic con el botón derecho sobre ella, y desmarcando “Barra de menúes”. Los menús se pueden mostrar cuando sea necesario pulsando la tecla Alt.
• La propia barra de título de la ventana de Firefox también se puede eliminar, utilizando Hide Caption Titlebar Plus (Smart). En ese caso es buena idea combinarlo con Tabs on top para mover las pestañas y la barra de cierre a la parte superior de la ventana.

El nuevo zorro de fuego, que no es un zorro, cuenta con las siguientes novedades, entre otras:

• Nuevo administrador de complementos
• Soporte del nuevo formato de vídeo WebM
• Aceleración de vídeo por hardware
• Protección contra fallos en los plugins. Aunque Flash, Quicktime o Java se cuelguen, podrás seguir navegando sin problemas
• Mejoras en el rendimiento general, en el rendimiento en el renderizado del árbol del documento (DOM), la interpretación de las reglas CSS y la ejecución de Javascript
• Las pestañas se sitúan en Windows debajo de la barra de titulo. En Linux y Mac OS se seguirá el mismo planteamiento en el futuro, cuando el tema se haya adaptado a la nueva disposición
• En Windows Vista y Windows 7 se ha sustituido la barra de menú por un botón único en la barra de título
• Mejoras en la privacidad
• Consola rediseñada, con nuevas funcionalidades que le acercan a herramientas como Firebug
• Soporte de nuevas características de HTML 5 y CSS 3

¿Te animas a probar la nueva beta? Entonces no dejes de contarnos qué te ha parecido.

• El códec VP8 se combina con el códec de audio Vorbis y el contenedor multimedia Matroska para crear un nuevo estándar de vídeo para la web de nombre WebM
• La extensión de los archivos será .webm. El tipo MIME, video/webm
• El proyecto cuenta con el apoyo de Mozilla, Opera, Adobe, AMD, Logitech, MIPS, Nvidia, Qualcomm, …
• Firefox, Chrome y Opera lo reproducirán de forma nativa. Para Internet Explorer 9 será necesario instalar el códec por separado
• Se pueden descargar las primeras versiones de Firefox, Opera y Chromium con soporte para WebM desde Firefox WebM Builds, Welcome, WebM <video>! y Chromium snapshots respectivamente
• Ya se han empezado a recodificar todos los vídeos de YouTube de forma que soporten el nuevo formato. En el momento de producirse el anuncio, estaban disponibles más de un millón de vídeos

Ayuda -> Buscar actualizaciones, señores. ¿Novedades? Unas cuantas. Y MUY interesantes:

• Personas: una característica de la que ya podíamos disfrutar anteriormente en forma de extensión y que permite personalizar aún más el aspecto del navegador.
• Herramienta para el autocompletado de formularios
• Mayor soporte de HTML 5 y CSS 3 lo que a efectos prácticos nos trae, entre otras cosas, vídeo nativo en pantalla completa o gradientes con CSS
• Mejoras de rendimiento. Un 20% más rápido que Firefox 3.5.
• Herramienta de actualización de plugins
• Mejoras en el rendimiento de JavaScript
• Mejoras en la estabilidad
• Mejoras en el tiempo de arranque

Y tú, ¿piensas usar Firefox 3.6 como navegador principal? ¿o crees que existen alternativas mejores?