¿Los más inteligentes, siempre según el estudio? Los usuarios de Opera, Camino y, curiosamente, IE con Google Chrome Frame. ¡Felicidades a los premiados!

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.

• 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

Y lo hace con novedades bastante interesantes, como son:

• Opera Turbo, una nuevo modo que utiliza un proxy intermedio para comprimir el contenido de forma que la navegación sea mucho más rápida en las conexiones limitadas, al más puro estilo Opera Mini.
• Una nueva interfaz totalmente renovada. Y bastante bonita, por qué no decirlo.
• Mejoras en las pestañas, que ahora pueden redimensionarse y muestran vistas previas de las páginas que contienen

Y tú, ¿piensas probar Opera 10? ¿lo utilizarás como navegador principal?

Para usar Opera Mini en el PC tendremos que utilizar un emulador de J2ME (Java Micro Edition, la versión de Java para móviles y dispositivos reducidos) como MicroEmulator (existen otras opciones como MPowerPlayer o Sun Java Wireless Toolkit, pero MicroEmulator es la mejor en mi opinión). Descarga la aplicación y descomprime el archivo.

A su vez MicroEmulator está escrito en Java, lo que significa que es multiplataforma, pero necesitamos tener el JRE instalado. En Windows tendremos que descargar el instalador y ejecutarlo; en Linux podemos usar el gestor de paquetes de nuestra distribución para instalarlo, o usar el script de instalación de la web de Sun. En Ubuntu, por ejemplo, escribiríamos lo siguiente:

sudo aptitude install sun-java6-jre

Por último tenemos que descargar Opera Mini. Descargaremos el archivo .jar, que es la aplicación en si, y el archivo .jad, que es el descriptor, un archivo de texto con información sobre la aplicación. Podemos guardarlos, por ejemplo, en la carpeta apps de MicroEmulator.

Si hacemos doble clic sobre microemulator.jar la máquina virtual de Java debería comenzar a ejecutar MicroEmulator; veremos un dibujo de un teléfono móvil. En Options -> Select Device pulsamos el botón Add, y seleccionamos el archivo microemu-device-resizable.jar de la carpeta devices en el directorio en el que hayamos descomprimido MicroEmulator; de esta forma podremos cambiar el tamaño de la ventana. Para hacer que se use este perfil por defecto, pulsa el botón Set as default.

Ahora pulsamos File -> Open JAD File y seleccionaremos el archivo jad de Opera Mini. Si pulsamos Start, Opera Mini comenzará a ejecutarse.

Para que Opera Mini tenga acceso al sistema de archivos local (para poder descargar archivos o subir archivos) tendremos que editar el fichero de configuración de MicroEmulator (C:\Documents and Settings\Usuario\.microemulator\config2.xml en Windows; /home/usuario/.microemulator/config2.xml en Linux) y antes de </config> pegar lo siguiente:

<extensions>
<extension>
<className>org.microemu.cldc.file.FileSystem</className>
<properties>
<property VALUE=”C:\” NAME=”fsRoot”/>
</properties>
</extension>
</extensions>

Por supuesto, tenemos que sustituir “C:\” por la ruta que queramos usar como raíz. En Linux podríamos utilizar /home/usuario/, por ejemplo.

Como vemos MicroEmulator va a utilizar la clase org.microemu.cldc.file.FileSystem para acceder al sistema de archivos. Para que el programa la vea tenemos que añadir el jar que contiene la clase al classpath. En Linux:

java -cp microemulator.jar:lib/microemu-jsr-75.jar org.microemu.app.Main –impl org.microemu.cldc.file.FileSystem

En Windows:

java -cp microemulator.jar;lib/microemu-jsr-75.jar org.microemu.app.Main –impl org.microemu.cldc.file.FileSystem apps/opera-mini-4.2.13216-advanced-es.jad

Al intentar guardar un archivo o una página nos mostrará el mensaje “Recomendamos que utilice la versión registrada de Opera Mini para navegar por el sistema de ficheros. Si desea más información pulse Ayuda”. Simplemente pulsa Aceptar y selecciona la carpeta en la que quieras guardar el archivo o la página.

Inspirado en Opera Mini – in 1280*1024!

En Ars technica han echado números y nos comentan que el consumo con 50 pestañas se ha reducido hasta la mitad. A continuación podéis ver un gráfico comparando el consumo de Firefox 3 beta 4, Firefox 2, Internet Explorer 7, Opera 9.5 beta y Safari 3.0.4 beta (que no terminó el test porque se colgó…). El resultado es impresionante.

Recordaros también que, como comentábamos hace unas semanas, Firefox también será un 200% más rápido con el trabajo en JavaScript. ¡Esta versión tiene muy buena pinta!

Pero, ¿qué ocurre si utilizamos otro navegador? A continuación veremos el proceso a seguir para tener disponible apturl en Opera, Konqueror y Galeon.

Opera

Tools -> Preferences -> Advanced -> Programs, pulsamos Add para añadir un nuevo protocolo e introducimos apt en el campo protocol y en Action /usr/bin/apturl.

Konqueror

Tenemos que crear un archivo protocol en el directorio correspondiente, /usr/share/services

sudo gedit /usr/share/services/apt.protocol

con el siguiente contenido:

[Protocol]
exec=/usr/bin/apturl “%u”
protocol=apt
input=none
output=none
helper=true
listing=false
reading=false
writing=false
makedir=false
deleting=false

Galeon

Ejecuta los siguientes comandos para crear las entradas correspondientes en gconf:

gconftool-2 -t string -s /desktop/gnome/url-handlers/apt/command “/usr/bin/apturl \”%s\”"
gconftool-2 -t bool -s /desktop/gnome/url-handlers/apt/enabled true
gconftool-2 -t bool -s /desktop/gnome/url-handlers/apt/needs_terminal false

• Opera es más rápido. Aunque desde Apple afirman que su navegador es el más rápido del mercado. Ja.
• Firefox es mucho más innovador. Aunque desde Apple afirman que su navegador es el más innovador del mercado. Ja Ja.
• Es una beta, por lo que no funciona muy bien.
• Digan lo que digan, es feo. Y no se integra bien con Windows (ni lo intenta).
• No es libre.
• No existe versión para Linux.

Actualización: Han tardado dos horas en reventarlo; no es que sea muy buena publicidad para Apple.

Tan poco fiable que los resultados dan por ahora como claro vencedor a Firefox, con un 66.6% del mercado; un porcentaje 5 veces mayor al de Internet Explorer.

Eso si, es una web curiosa…