Ulzurrun de Asanza i Sàez

Tag: internet explorer

Aplicar propiedades de CSS3 en Internet Explorer

Hoy han publicado en Smashing Magazine métodos para aplicar algunas propiedades de CSS3 como opacidad, esquinas redondeadas, sombras y demás en Internet Explorer. El método hace que el código CSS deje de ser válido y cumplir con los estándares, pero al menos se consigue un buen resultado.

A ver si en IE9 se ponen las pilas y nos evitan tener que recurrir a estos trucos.

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]


A partir de la semana que viene, veremos la "Ballot Screen"

Vía Genbeta descubro que a partir de la semana que viene, Microsoft publicará una actualización que reemplazará el acceso a Internet Explorer por un acceso a la “Ballot Screen”, una ventana que muestra una lista de alternativas a Internet Explorer, y que permite obtener más información o descargar otros navegadores.

Inicialmente, se implantará en Reino Unido, Bélgica y Francia, y más adelante (en Marzo), en el resto de los paises de la Unión Europea.

¿Y cómo nos afectará esto? Pues la verdad es que no lo tengo demasiado claro.

Los usuarios sin conocimientos sobre navegadores se sorprenderán al ver desaparecer su iconito de “Internet” y que aparezca una lista extraña que no comprenden. Seguramente muchos harán clic en el icono de Google Chrome, porque relacionarán Google con Internet, el resultado sería menos cuota de mercado para IE y más para Chrome, lo cual nos beneficia a los diseñadores, ya que Chrome sigue bastante mejor los estándares que IE (aunque lo cierto es que no es incómodo hacer que un diseño se vea bien en IE, es incómodo hacer que se vea bien en IE6 o anterior).

Los usuarios con algo más de conocimientos seguramente elegirán Internet Explorer, ya que recordarán que el acceso antes tenía ese nombre.

Por último, los usuarios que ya conocían las alternativas a Internet Explorer no notarán ninguna diferencia: si conocían las alternativas y seguían con IE, seguirán con IE y si usaban un navegador diferente, probablemente ni siquiera vean la “Ballot Screen”.

Sobre el resto de navegadores de la lista, tengo la impresión de que no aumentarán mucho su cuota por la “Ballot Screen” (aunque pueden aumentarla por otras cosas). Los 6 primeros navegadores serán los que más aumenten (siendo el primero en ganar, Chrome) y los otros, al estar ocultos al principio (hay que hacer scroll para poder verlos), serán generalmente ignorados.

Aunque, ¿quién sabe? Tal vez me equivoque y el resultado sea muy diferente…

Se acabó el soporte para IE 6 en Google Docs y Google Sites

Vía Genbeta descubro que Google va a dejar de dar soporte para IE6 en sus aplicaciones online, comenzando por Google Docs y Google Sites.

Parece que poco a poco IE6 va a comenzar a ser soportado por menos aplicaciones, hasta que al final no será soportado por ninguna aplicación. Yo por mi parte he dejado de calentarme la cabeza con IE6, yo simplemente diseño tratando de seguir los estándares lo más que puedo, y si IE6 no hace su parte (mostrar las páginas según los estándares), es problema suyo.

Muestra una alerta a los usuarios de Internet Explorer

A raíz de un comentario de JaimePG se me ha ocurrido volver a tratar un tema del que ya hablé hace casi un año: Detectar a Internet Explorer. Aunque el tema quedó bastante claro, esta vez haré un recopilatorio de dos métodos para mostrar un cartel a los usuarios de Internet Explorer.

En todos los modos partiremos de un código CSS preestablecido (que deberéis añadir a vuestro CSS):

[css]
#usuarios-ie {
width:100%;
font-family:Verdana, Geneva, sans-serif;
background: #FFFFDE;
border-bottom:1px solid #666;
color:#000;
position:fixed;
top:0px;
left:0px;
z-index:999999;
}

#usuarios-ie p { font-size: 13px; margin: 0; padding:2px 10px; }
#usuarios-ie a {text-decoration: underline; font-weight: bold; color: #D64411; }
[/css]

Y también partiremos del mismo código HTML cada vez:

[html]
<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet. Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>
[/html]

Usando HTML

Este método es el más fácil de implementar y consiste en utilizar un estilo CSS especial para Internet Explorer que muestre el cartel de aviso. Básicamente usaremos un comentario condicional que sólo analiza Internet Explorer y que nos permite distinguir cada versión de Internet Explorer. Este comentario, al ser código HTML, nos funcionará en cualquier servidor, sin necesidad de que tenga instalado PHP.

La estructura del comentario condicional es la siguiente:

[html]
<!–[if IE]>
Código especial para IE
<![endif]–>
<!–[if IE N]>
Código especial para IE, donde N es el número de la versión de Internet Explorer
<![endif]–>
<!–[if IE 6]>
Código especial para IE 6
<![endif]–>
<!–[if IE 7]>
Código especial para IE 7
<![endif]–>
<!–[if lt IE 6]>
Código espcial para versiones anteriores a IE 6
<![endif]–>
<!–[if lte IE 6]>
Código especial para versiones anteriores o iguales a IE 6
<![endif]–>
<!–[if gt IE 6]>
Código especial para versiones posteriores a IE 6
<![endif]–>
<!–[if gte IE 6]>
Código espcial para IE 6 y versiones posteriores
<![endif]–>
[/html]

Como podréis imaginar, situaremos el código entre los comentarios condicionales, dependiendo de a quién queramos mostrarle el cartel. Si por ejemplo nos basta con IE6 y anteriores, usaremos el siguiente código:

[html]
<!–[if lte IE 6]>
<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet. Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>
<![endif]–>
[/html]

Atención: Este método funciona debido a que el motor de renderizado de Internet Explorer (Trident) analiza estos comentarios, así que este método no funcionará alterando el User Agent del navegador con el que accedemos.

Usando PHP

Ahora sí que usaremos PHP, y por tanto necesitaremos un servidor capaz de ejecutarlo para poder detectar a Internet Explorer. Lo que haremos será leyendo el User Agent del navegador buscaremos la cadena identificatoria de Internet Explorer y si la encontramos, le daremos true al valor de la variable $ie.

Con este método podemos llegar a falsos positivos, ya que si el navegador con el que accedemos a la página tiene el User Agent cambiado por el de Internet Explorer, lo detectaremos como si de él se tratase.

El código PHP que usaremos será:

[php]
$user_agent = $_SERVER[‘HTTP_USER_AGENT’];

$posicion = strrpos($user_agent, "MSIE");

if ($posicion === false) {
$ie = false;
} else {
$ie = true;
}
[/php]

Ahora basta con comprobar si $ie es true o false y actuar en consecuencia. El código necesario para hacerlo sería:

[php]
<?php if ($ie) { ?>
<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet. Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>
<?php } ?>
[/php]

Con este código estaríamos detectando a Internet Explorer, sea cual sea su versión. Si queremos buscar una única versión, basta con modificar la cadena MSIE, por ejemplo, para buscar a IE6, utilizaríamos MSIE 6 en lugar de MSIE.

Lo malo de este método es que no podemos detectar a Internet Explorer 6 o inferiores, tan sólo a IE6 (o IE7, o IE8, etc).

Yo por mi parte a partir de ahora mostraré un cartel de aviso a los usuarios de Internet Explorer 6 o inferior en el blog, lo siento por los usuarios de IE6, pero hay alternativas mejores, multiplataforma y gratuitas, así que no veo motivo alguno para no cambiarse.


Carga el theme por defecto de WordPress al navegar con IE6

Internet Explorer 6 es el terror de todo diseñador web. Es capaz de transformar cualquier código estándar y convertirlo en el mayor desastre jamás visto, aunque claro está, creando una versión especial del diseño para él podemos conseguir que se vea de una forma más o menos decente.

Sin embargo, si no tienes ganas de seguir diseñando para un navegador obsoleto y que no sigue los estándares, tienes la opción de usar un pequeño truco que ha publicado en aNieto2k. Lamentablemente este truco sólo funciona en WordPress y se basa en usar los filtros y acciones de WordPress para modificar la variable que define el theme que se usa, y en el caso de navegar con IE6, devolver el theme por defecto. El código es el siguiente y basta con ponerlo en el archivo functions.php de nuestro theme:

[php]
add_filter(‘template’, ‘serve_default_to_iesix’);
add_filter(‘option_template’, ‘serve_default_to_iesix’);
add_filter(‘option_stylesheet’, ‘serve_default_to_iesix’);
function serve_default_to_iesix($theme) {
if(strpos($_SERVER[‘HTTP_USER_AGENT’], ‘MSIE 6’) !== false)
$theme = ‘default’;
return $theme;
}
[/php]

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]
&lt;div class=&quot;example-date&quot;&gt;
&lt;span class=&quot;day&quot;&gt;31&lt;/span&gt;
&lt;span class=&quot;month&quot;&gt;July&lt;/span&gt;
&lt;span class=&quot;year&quot;&gt;2009&lt;/span&gt;
&lt;/div&gt;
[/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

Se venderá Windows 7 sin Internet Explorer en la UE

Vía Genbeta descubro que la versión de Windows 7 que se venderá en la Unión Europea no incluirá Internet Explorer, y que la decisión de qué navegador instalarle al sistema operativo (si se le instala alguno de serie) será tomada por los fabricantes de los equipos.

¿Por qué Microsoft ha tomado esta decisión? Pues para evitar que los procesos legales que hay entre los organismos antimonopolio de la UE (que están en contra de la integración de Internet Explorer 8 en Windows 7) hagan que se retrase la fecha de lanzamiento de Windows 7.

¿Cómo podrán navegar los usuarios? Microsoft les dará a los fabricantes un “IE8 Pack“, que al instalarse en el equipo hace que las ediciones de Windows 7 de la UE sean casi idénticas a las normales. Si los fabricantes prefieren instalar otro navegador, también podrán hacerlo.

Sinceramente, creo que es una solución muy radical, y que bastaría con que durante la instalación del sistema operativo te dejase elegir entre los navegadores más populares para instalarlo y usarlo por defecto. También pienso que muchos fabricantes optarán por usar el “IE8 Pack“, con lo que no se solucionará el problema de monopolio que quiere arreglar la UE.


Firefox 3: El navegador más usado en Europa

Vía Genbeta descubro que Firefox 3 ha pasado a ser el navegador más usado en Europa, aunque no supera la cuota de mercado que tienen todas las versiones de Internet Explorer juntas.

La gráfica que muestra la posición de Firefox 3 se puede ver en StatCounter.

¿Qué puedo decir sobre esto? Pues en fin, me parece bueno por un lado, pero algo decepcionante por otro.

Firefox está avanzando mucho, ya es el navegador más usado de Europa, pero aún no lo es del mundo.

Además, a esto se suma la “poca participación” de los demás navegadores, que entre todos no lograrían llegar al 20%.

Novedades en Google Chrome e Internet Explorer

Parece que durante esta semana que he estado fuera, los programadores de Google y de Microsoft no han estado de vacaciones, y han presentado nuevas versiones de sus respectivos navegadores.

Google Chrome BetaGoogle ha presentado una nueva beta de Google Chrome, pero lamentablemente sólo para Windows, dejando de lado a los usuarios de Mac y de Linux.

Se puede descargar desde aquí (vía Anieto2k).

Descarga Internet Explorer 8Por su parte, Microsoft ha completado la versión definitiva de la 8ª versión de Internet Explorer. Está disponible en español y tanto para Windows XP como para Windows Vista y sus correspondientes versiones de 64 bits.

Se puede descargar aquí (vía Genbeta).