Ulzurrun de Asanza i Sàez

Tag: firefox

Mejora el aspecto de Google Reader con Stylish

Google Reader después de aplicar algo de CSS con Stylish

Google Reader antes de activar el nuevo estilo
Google Reader antes de activar el nuevo estilo

Google Reader no destaca precisamente por tener el diseño más bonito del mundo. De hecho no ha recibido ningún rediseño desde hace bastante tiempo, a diferencia de otros servicios de como Calendar o Gmail. Si sois de los que utilizáis Google Reader directamente desde su web, sin recurrir a ninguna aplicación que se sincronice con él, agradeceréis este artículo.

Lo que veis en la imagen de arriba es Google Reader tras activar algo de CSS a través de Stylish. Si no tenéis instalado Stylish, podéis hacerlo en Firefox o Google Chrome (en otros navegadores, como Opera o Safari, hay formas diferentes de aplicar los estilos CSS).

Si ya tenéis instalado Stylish, ahora tendréis que instalar los estilos. Al ser un archivo demasiado grande, el autor (Mestiso) no ha podido insertarlo directamente en userstyles.org, pero comparte el código en su página web. Para instalarlo (a través de Stylish) primero accederemos a userstyles.org y haremos clic en el botón Install with Stylish, a continuación editaremos el estilo y reemplazaremos todo el código por el que nos ofrece su autor en su página web. Para ello, en Firefox, mostraremos el panel lateral de Stylish (Ver » Panel lateral » Stylish) y haremos doble clic sobre el estilo Google Reader – 3 Column Reader. Una vez reemplazado el código haremos clic en Guardar y cuando accedamos de nuevo a Google Reader, veremos un diseño mucho más limpio y elegante.

El único inconveniente es que algunas características dejan de ser accesibles, como los patrones. Sin embargo esta función sigue estando activa. Para poder acceder a ella simplemente desactivaremos temporalmente el nuevo estilo (siguiendo los mismos pasos que antes, sólo que en lugar de hacer doble clic en Google Reader – 3 Column Reader lo haremos sobre el icono con una S que aparece a la izquierda del nombre, que tras el doble clic perderá el color, indicando que el estilo está desactivado).

Estilo: userstyles.org
Estilo: kamilb.info
Stylish: Firefox | Google Chrome


Detectando navegadores con PHP

Saber el navegador con el que se accede a nuestras páginas web es algo muy útil. Lo podemos utilizar para cargar algo de CSS / Javascript específico para un navegador (como por ejemplo, para evitar errores con IE6), también lo podemos usar para cargar una página completamente distinta en navegadores antiguos y, ¿por qué no? para mostrar una página específica para móviles.

Ya he comentado este tema en otras ocasiones, pero esta vez ampliaré el rango de navegadores a detectar, concretamente nos centraremos en Internet ExplorerFirefox, SafariOpera, Konqueror, Chrome, iPod Touch, iPhone, Android (vale, estos tres no son navegadores, pero en estos casos me refiero a detectar el sistema operativo) o cualquier tipo de navegador para móvil.

En esta ocasión crearemos una función que acepte dos parámetros: el navegador que queremos buscar y la versión específica que buscamos (si es que buscamos alguna versión en especial). Para el primer parámetro, usaremos una serie de identificadores:

Identificador Navegador
IE Internet Explorer
FF Firefox
SF Safari
OP Opera
KQ Konqueror
CH Chrome
IPD iPod
IPH iPhone
IPO iPod / iPhone
AD Android
MB Navegador de móvil

Sobre la versión del navegador, sólo nos centraremos en las versiones de Internet Explorer.

La función seguirá la siguiente estructura:

  1. Cargamos en una variable el agente de usuario del visitante.
  2. Mediante un bucle foreach determinamos en qué navegador buscamos.
  3. Mediante la función strrpos comprobamos si el agente de usuario se corresponde con el del navegador que buscamos.
  4. Sólo si buscamos Internet Explorer: Detectamos si se ha accedido con la versión que hemos establecido (si es que hemos establecido alguna versión).
  5. Sólo si buscamos un navegador móvil: Buscamos alguno de los diversos agentes de usuario que tienen los diferentes navegadores para móviles.
  6. Devolvemos el valor true si se ha detectado el navegador en cuestión y false si no se ha detectado, a través de una variable que tiene por defecto el valor false y sólo cambia a true al detectarse el navegador.

Finalmente todo esto traducido a PHP quedaría así:

[php]
function is_browser($name, $version=”) {
$user_agent = $_SERVER[‘HTTP_USER_AGENT’]; // Cargamos el UserAgent en una variable
$wtr = false; // Esta variable es la que indica si se ha accedido con el navegador que buscamos o no. Por defecto es false, sólo cambia si se accede con el navegador buscado
$wtmb = ”; // Esta variable almacena el navegador del dispositivo móvil (sólo si buscamos un navegador de dispositivo móvil, esto no incluye ni Android ni iPod ni iPhone)
// Primero veamos a quién buscamos y luego comprobemos si es él
switch ($name) {
// Caso Internet Explorer
case ‘IE’:
if (strrpos($user_agent, "MSIE") === false) {} else {
if ($version != ”) {
if (strrpos($user_agent, ‘MSIE ‘.$version) === false) {} else { $wtr = true; }
} else {
$wtr = true;
}
}
break;
// Caso Firefox
case ‘FF’: if (strrpos($user_agent, "Firefox") === false) {} else { $wtr = true; } break;
// Caso Opera
case ‘OP’: if (strrpos($user_agent, "Opera") === false) {} else { $wtr = true; } break;
// Caso Konqueror
case ‘KQ’: if (strrpos($user_agent, "Konqueror") === false) {} else { $wtr = true; } break;
// Caso Chrome
case ‘CH’: if (strrpos($user_agent, "Chrome") === false) {} else { $wtr = true; } break;
// Caso Safari
case ‘SF’: if (strrpos($user_agent, "Safari") === false) {} else { $wtr = true; } break;
// Caso iPod
case ‘IPD’: if (strrpos($user_agent, "iPod") === false) {} else { $wtr = true; } break;
// Caso iPhone
case ‘IPH’: if (strrpos($user_agent, "iPhone") === false) {} else { $wtr = true; } break;
// Caso iPod o iPhone
case ‘IPO’:
if (strrpos($user_agent, "iPod") === false) {} else { $wtr = true; }
if (strrpos($user_agent, "iPhone") === false) {} else { $wtr = true; }
break;
// Caso Android
case ‘AD’: if (strrpos($user_agent, "Android") === false) {} else { $wtr = true; } break;
// Caso navegador móvil
case ‘MB’:
$mua = array(
‘PIE4’ => ‘compatible; MSIE 4.01; Windows CE; PPC; 240×320’,
‘PIE4_Smartphone’ => ‘compatible; MSIE 4.01; Windows CE; Smartphone;’,
‘PIE6’ => ‘compatible; MSIE 6.0; Windows CE;’,
‘Minimo’ => ‘Minimo’,
‘OperaMini’ => ‘Minimo’,
‘AvantGo’ => ‘AvantGo’,
‘Plucker’ => ‘Plucker’,
‘NetFront’ => ‘NetFront’,
‘SonyEricsson’ => ‘SonyEricsson’,
‘Nokia’ => ‘Nokia’,
‘Motorola’ => ‘mot-‘,
‘BlackBerry’ => ‘BlackBerry’,
‘WindowsMobile’ => ‘Windows CE’,
‘PPC’ => ‘PPC’,
‘PDA’ => ‘PDA’,
‘Smartphone’ => ‘Smartphone’,
‘Palm’ => ‘Palm’
);
foreach($mua as $nav => $ua){ if(strstr($user_agent, $ua) != false) { $wtmb = $nav; } }
if ($wtmb != ”) { $wtr = true; }
break;
// Caso genérico
default: $wtr = false; break;
}
return $wtr;
}
[/php]

Finalmente el uso es muy sencillo, basta con verificar el valor que devuelve la función, de modo que si buscamos, por ejemplo, a Opera, usaríamos el siguiente código:

[php]
if (is_browser(‘OP’)) {
/* Código específico para Opera */
} else {
/* Código para el resto de navegadores */
}
[/php]


Animaciones en Firefox 4

Vía Genbeta descubro que los desarrolladores de Firefox siguen trabajando la versión 4 del navegador, que como ya comenté en diciembre, tendría un aspecto totalmente renovado. A continuación podéis ver dos vídeos en los cuales se muestran algunas de las animaciones de la nueva interfaz, que pueden variar en la versión final (hay que tener en cuenta que la versión 4 está en una fase muy temprana de su desarrollo). Para ver los vídeos necesitáis un navegador que soporte HTML 5.

Se han encontrado dos extensiones de Firefox con troyanos

Vía Genbeta descubro que las extensiones Sothink Web Video Downloader 4.0 y Master Filer contienen un troyano que afecta a los equipos con Windows y que no se elimina al desinstalar las extensiones. Ambas extensiones se han retirado de la web de complementos de Firefox, pero no sin ser descargadas antes unas 4500 veces.

En el blog de Mozilla algo más acerca del problema.

Ya está disponible Firefox 3.6

Firefox 3.6

Ya se puede descargar tanto para Windows como Mac y Linux la versión 3.6 de Firefox, que, entre otras cosas, es un 20% más rápida que la versión 3.5, implementa las últimas especificaciones HTML5, admite audio y vídeo en formatos abiertos y en pantalla completa e incluye “Personas” por defecto.

Se puede descargar la versión 3.6 desde la página de Mozilla o ver las novedades en el comunidado de prensa.


Firefox 3.7 verá la luz separado en partes

Logo de Firefox
Logo de Firefox

Vía Genbeta descubro que Mozilla ha cambiado el calendario de lanzamientos de Firefox, suprimiendo la versión 3.7 y dividiéndola en varias actualizaciones de seguridad. Con esto  las novedades de la versión 3.7 nos llegarán en las actualizaciones de seguridad, de modo que la versión 3.6.x podría añadir alguna funcionalidad de la antigua versión 3.7, mientras que la versión 3.6.x+1 podría venir con otra novedad de esta misma versión.

Así que la próxima versión que tendremos de Firefox será la 3.6 (de la cual ya disponemos de una RC), tras esto veremos unas cuentas actualizaciones de seguridad con novedades de la versión 3.7 y finalmente, durante los últimos meses de este año (o los primeros del que viene), tendremos Firefox 4.0.

No me parece una mala jugada por parte de Mozilla, ya que así dispondremos de algunas novedades de la versión 3.7 antes de la fecha en la que se iba a lanzar Firefox 3.7. Sin embargo se pierde el efecto de “bum de novedades” que suelen tener la versiones cargadas de nuevas funciones de cualquier software.


Transforma el aspecto de Firefox 3.5 en el de Firefox 4

Aspecto de Firefox 4.0 (izquierda) vs Aspecto de Firefox 3.5 (derecha)Ya hemos visto algunos indicios de lo que podía ser la interfaz de Firefox 4, y no era de esperar que al poco tiempo apareciesen themes que imitasen esta interfaz. Sin embargo el theme del que voy a hablar a continuación no imita los últimos mockups de la interfaz de Firefox 4, sino que imita los anteriores (acordáos de que cuando comenté las imágenes de la posible nueva interfaz, éstas eran sólo de Windows, mientras que había unas anteriores donde también se veía la interfaz de Mac y de Linux, el theme en cuestión imita estas imágenes) y lo cierto es que lo consiguiesen hacer realmente bien e increíblemente fácil. Realmente dotar a nuestro Firefox 3.5 de la interfaz de Firefox 4 sólo consiste en instalar un theme y un par de extensiones, además de configurarlas.

Lamentablemente este theme no está disponible ni para Linux ni para Mac, así que tendremos que esperarnos al lanzamiento de Firefox 4 para disfrutar de este theme. Para aquellos que usen Windows, el proceso es bastante sencillo. Comenzaremos instalando Strata40 (el theme principal), seguido de StrataBuddy (el cual habilita transparencias y permite elegir entre el aspecto de Firefox 3.7 o Firefox 4), Tab Progress Bar y Fission (para añadir esa barra de carga a la barra de direcciones) y por último Omnibar (para unificar la caja de búsquedas con la de direcciones).

Al acabar de instala estos complementes puede que el aspecto de Firefox no se parezca mucho al de Firefox 4, sin embargo aún tenemos que configurar los complementos. Abrimos la ventana de complementos y seleccionamos StrataBuddy. A continuación le damos a opciones, lo cual hará que taparezca una ventana con opciones diversas. Para comenzar iremos a la pestaña de Strata y seleccionaremos, en Style, 4.0 y en Background style, Aero Glass. A continuación pasaremos a la pestaña de Tabs, donde cambiaremos la opción de Tab style a Tabs on top. Finalmente en la pestaña de Misc, marcaremos sólo las opciones de Progress lines y Remove ‘List all tabs’ button.

Y ya lo tenemos, ahora nuestro Firefox será idéntico al de la imagen.

Aspecto de Firefox 3.5 (izquierda) y Aspecto de Firefox 4 (derecha)


¿Será así la interfaz de Firefox 4?

Comparación entre Firefox 3.5 y 4.0
Comparación entre Firefox 3.5 y 4.0

Vía Genbeta descubro algunas imágenes de la posible interfaz de Firefox 4. Actualmente los desarrolladores de Firefox le están dando vueltas a la interfaz de Firefox 4, y estas imágenes son el resultado de algunos conceptos que podrían aplicar al navegador. Como suele pasar, las imágenes son de la interfaz de Windows, así que en Linux y Mac pueden haber unos cuantos cambios significativos (sobretodo en Mac, teniendo en cuenta que el menú de la aplicación (el de archivo, editar, ver, historial, etc) en OS X está situado fuera de la ventana de navegador, con lo cual algunas de las modificaciones que hay en las imágenes no tienen sentido para la versión de este navegador para Mac OS X.

Pero, dejemos de lado de momento las posibles variaciones entre las versiones para cada Sistema Operativo de Firefox ya que hay diversas versiones de esta interfaz, muy similares entre sí pero con ligeros cambios unas respecto de las otras.

Interfaz de Firefox 4.0 en Windows 7

La primera de las propuestas incluye un botón para la aplicación (que sustituiría el menú de archivo, editar, ver, etc), elimina la barra de título, mueve las pestañas a la parte superior de la ventana (al estilo de Chrome u Opera, sobretodo en la última preAlpha de Opera), elimina la barra de favoritos y da un nuevo color a las partes opacas de la ventana.

Interfaz de Firefox 4.0 en Windows 7

Esta segunda propuesta cambia la posición de las pestañas y las sitúa por debajo de la barra de direcciones. Lo de más sigue más o menos igual que en la propuesta anterior.

Interfaz de Firefox 4.0 en Windows 7

La tercera propuesta añade la barra de marcadores y la situa por encima de las pestañas. Por lo demás, sigue el esquema de la segunda propuesta.

Interfaz de Firefox 4.0 en Windows 7

La cuarta propuesta parte de la primera y vuelve a tener las pestañas en la parte superior de la ventana. Inmediatamente después se muestra la barra de direcciones, y por último la barra de marcadores.

Variaciones del botón Firefox
Variaciones del botón Firefox

Como habréis podido observar, el menú de Firefox se mantiene igual en todas las propuestas anteriores. Pues bien, hay otras cinco propuestas sobre diversas posiciones de este menú, que podéis ver en la imagen que tenéis a la derecha. Las variaciones van desde el color del menú (gris en el primer caso y naranja en todos los demás) hasta la aparición (o desaparición) de la barra de título (creo que no perderíamos demasiado si desapareciese esta barra, la verdad es que no me fijo demasiado en ella, ¿vosotros sí?), el tamaño del botón y el texto que incluye (en este punto, me gusta mucho el botón de la segunda imange, sin texto pero con el icono de Firefox y un bonito fondo naranja. aunque movería las pestañas hasta debajo del botón, no dejaría espacio en blanco como hay en la imagen) o la posición del propio botón (en algunas imágenes aparece separado, en otras se acerca más a las pestañas y en una es una pestaña).

Volviendo al aspecto de Firefox en Mac y en Linux, revisando un poco la fuente original de las imágenes, he encontrado un par de imágenes sobre la interfaz de Firefox 4 en Mac y en Linux. Lamentablemente ahora mismo la página tiene un error en la Base de Datos y es imposible acceder a ella, aunque podéis ver las imágenes más significativas en este mismo artículo.

Firefox 4 en Ubuntu

Comenzaremos por Linux. A pesar de que hace mucho que no uso Firefox en Linux (bueno, en realidad hace mucho que no uso Linux) he notado bastantes cambios nada más ver la imagen. Siguiendo el mismo esquema que en Windows, la barra de título desaparece junto con el menú de archivo, editar, ver, etc. Las pestañas se vuelven a situar en la parte superior y se unifica la caja de búsqueda con la de direcciones, al estilo de Chrome. A diferencia de Windows, en Linux parace que no habrá el botón Firefox, aunque puede que esto sea debido a que esta imagen de la interfaz de Firefox 4 en Linux es anterior a la imagen de la interfaz de Firefox en Windows, así que puede que la interfaz de Linux reciba más cambios de los que se ven en esta imagen.

Firefox 4 en Mac

Las imágenes de la interfaz de Firefox 4 en Mac también son anteriores a las imágenes de la interfaz de Windows, así que puede que haya más novedades (al igual que en Linux) que no estén recogidas aquí. Sobre las que sí lo están, podemos ver que desaparece de nuevo la barra de título y la barra de marcadores, las pestañas se situan otra vez en la parte superior de la ventana, se unifica la caja de búsqueda y la de direcciones y desaparece la barra de estado. Algunos iconos típicos de esta barra, como el de Firebug o el de las descargas, están situados ahora al final de la barra de direcciones.

Lo cierto es que me gusta mucho la nueva interfaz. Tengo muchas ganas de tener la interfaz de Firefox 4 en mi Mac porque la verdad es que la interfaz actual de Firefox en Mac deja mucho que desear…

Sin embargo  creo que la más bonita de todas es la de Windows. Me encanta el rediseño que le han dado al navegador. Es simplemente excelente.

¿Y a vosotros? ¿Qué os parece la nueva interfaz?


Prueba Firefox 3.7 Alpha (64 bits) en Snow Leopard

Firefox 3.7 pre Alpha
Firefox 3.7 Alpha
Firefox 3.5 (32 bits)
Firefox 3.5 (32 bits)

Vía Applesfera descubro que ya está disponible una versión Alpha de Firefox 3.7, la primera versión de Firefox de 64 bits, pensada especialmente para Mac OS X Snow Leopard. Gracias a estos 64 bits, Firefox gana en velocidad, rendimiento y gestión de los recursos, sin embargo pierde en compatibilidad con los plugins, por ejemplo, esta versión no tiene ningun plugin de Flash que sea compatible con ella.

Firefox 3.7 pre Alpha (64 bits)
Firefox 3.7 pre Alpha (64 bits)

Además esta versión es sólo compatible con Snow Leopard, aunque supongo que con el tiempo Mozilla irá desarrollando versiones de Firefox en 64 bits.

La descarga es gratuita y se puede hacer desde aquí.


Rota texto usando sólo CSS

Vía Anieto2k descubro un método muy sencillo para rotar texto usando CSS. Básicamente debemos usar las propiedades “-webkit-transform“, “-moz-transform“, “filter: progid:DXImageTransform.Microsoft.BasicImage()” para Webkit (y Safari), Firefox 3.5 (o posterior) e Internet Explorer, respectivamente.

Lamentablemente no son propiedades que forman parte del estándar de CSS 2, así que éste método sólo funcionará en navegadores que usen Webkit (como Safari o Google Chrome), Firefox 3.5 e Internet Explorer.

Finalmente el código que usaríamos sería el siguiente:

[html]
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
[/html]

[css]
.year {
/* WebKit, Safari */
-webkit-transform: rotate(-90deg);

/* Firefox 3.5+*/
-moz-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
[/css]

Obteniendo este resultado:

Rotar textos