Mejora el aspecto de Google Reader con Stylish

This post was published 7 years ago. It may be exremely outdated.

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

Apple aprueba Opera Mini

This post was published 8 years ago. It may be exremely outdated.
Opera Mini en el iPod touch

Opera Mini en el iPod touch

Sorprendendido me ha dejado Apple al ver que han aprobado Opera Mini para el iPhone. Apple se ha caracterizado hasta ahora (y supongo que seguirá caracterizándose bastante más) por seguir una política bastante monopolística con la AppStore: no permiten duplicar funcionalidades del iPhone con aplicaciones de terceros. Esto quiere decir que no hay ninguna aplicación que permita llamar por teléfono o gestionar los emails o acceder a Youtube o ver mapas, etc.

Bueno, realmente no es así del todo, ya que hay aplicaciones como Google Earth para el iPhone que duplican la funcionalidad de mapas, pero en fin, se ve por dónde andan los tiros, ¿no? Lo sorprendente del caso es que Opera Mini ha sido aceptado en la AppStore (por cierto, podéis descargarlo aquí), y tiene algunas cosas bien curiosas.

Para comenzar, utiliza su propio motor de renderizado, Presto. Lógico tratándose de Opera (utiliza el mismo motor en su versión de escritorio – bueno, utilizará la versión no adaptada a dispositivos móviles), pero extraño tratándose de Apple. Al fin y al cabo, ¿esto no duplica la funcionalidad de navegar por Internet

El navegador en sí no está mal, aunque puede mejorar mucho. El zoom no funciona todo lo bien que cabría esperar y algunas páginas web se ven de forma incorrecta. A pesar de esto, vale la pena considerarlo, ya que es tremendamente rápido (ir a la página anterior es instantáneo, igual que a la siguiente) y la interfaz está realmente conseguida (la verdad es que a excepción de la barra de título y de direcciones, me gusta mucho más que la de Safari). Tiene algunas funciones útiles como resetear el zoom al pulsar un botón, poder seleccionar el buscador al usar el cuadro de búsqueda junto a la barra de direcciones o poder buscar en la propia página, carencias importantes de la versión de Safari para el iPhone.

Aunque esto tiene un lado malo para los diseñadores: lo que diseñenemos específicamente para el iPhone (saltándonos los estándares web y usando propiedades únicas de WebKit) no funcionará en Opera Mini.

Detectando navegadores con PHP

This post was published 8 years ago. It may be exremely outdated.

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í:

	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; 240x320',
					'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;
	}

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:

if (is_browser('OP')) {
/* Código específico para Opera */
} else {
/* Código para el resto de navegadores */
}

Opera 10.5 Beta

This post was published 9 years ago. It may be exremely outdated.

Opera 10.5 Beta

Los desarrolladores de Opera no han descansado después de liberar la versión preAlpha de Opera 10.5 y ayer mismo liberaron la versión Beta de Opera 10.5, que apuesta por una integración total en Windows 7, un nuevo motor de Javascript (Carakan) 8 veces más rápido que su antecesor y una interfaz más reducida.

También ha mejorado en otros aspectos, como las ventanas modales, que ahora son independientes en cada pestaña y no bloquean el resto del navegador (como ocurre en Firefox, Safari o Internet Explorer).

De momento sólo hay versión para Windows, que podéis descargar desde aquí, pero seguramente de aquí a unos días estará disponible la versión para Mac OS X.

Consumo de memoria de Chrome, Firefox, Opera y Safari

This post was published 9 years ago. It may be exremely outdated.

Vía Anieto2k descubro una gráfica comparando el consumo de memoria de Chrome 3.0 Dev, Firefox 3.5 RC, Opera 10b y Safari 4.0 para abrir las 150 primeras páginas del Top de Alexa. Según los datos de la fuente original, Firefox supera a los demás navegadores en consumo (cuanto menos consumo mejor), mientras que extrañamente Chrome queda por detrás de los otros (parece ser que es debido a que la memoria que comparten varias pestañas se cuenta en todas, cuando realmente sólo se debería de contar en una).

A continuación os dejo dos gráficos: El primero con el consumo de memoria en cada momento y el segundo con las medias de  consumo, el máximo consumo y el consumo después de cerrar todas las pestañas.

Gráfica de consumo en cada momentoMedias de consumo

La verdad, me habría gustado que Internet Explorer hubiese estado en la gráfica.