Currently browsing: safari

Mejora el aspecto de Google Reader con Stylish

Beware: This post was published 6 years ago and its content may be 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

iPhone 4 y iOS 4, las novedades de la Keynote del lunes

Beware: This post was published 7 years ago and its content may be outdated.

Antes de nada, disculpad el retraso. Quería haber publicado este artículo anteayer o ayer, pero al final se me fueron juntando cosas y no ha sido posible. Pero como dice el refrán, más vale tarde que nunca, así que vamos allá.

En la keynote del lunes se presentó el nuevo iPhone 4, se dio un repaso al iPhone OS 4, iOS4 a partir de ahora y se mostró por primera vez iMovie para el iPhone. Además durante la sesión de “Safari, Internet adn Web State of the Union” se presentó Safari 5, que ya está disponible para Mac OS X y Windows. Por último, algunas operadoras han confirmado que la exclusividad del iPhone se ha acabado en España. Pero veamos de una en una las novedades.

Read more →

Detectando navegadores con PHP

Beware: This post was published 7 years ago and its content may be 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 */
}

Rota texto usando sólo CSS

Beware: This post was published 8 years ago and its content may be outdated.

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:

<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
.year {
/* WebKit, Safari */
-webkit-transform: rotate(-90deg);
/* Firefox 3.5+*/
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Obteniendo este resultado:

Rotar textos

Consumo de memoria de Chrome, Firefox, Opera y Safari

Beware: This post was published 8 years ago and its content may be 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.

Descarga la Beta de Safari 4

Beware: This post was published 8 years ago and its content may be outdated.

Vïa Applesfera descubro que ya está disponible una Beta de Safari 4, el navegador por defecto de Mac OS X.

Según Apple, el navegador incluye 150 nuevos añadidos y características, además del motor de Javascript “Nitro“, que ejecuta el código Javascript 3,2 veces más rápido que el motor de Safari 3.

La Beta está disponible tanto para Windows como para Mac y se puede descargar desde la web de Apple, concretamente desde esta página.

Safari 4