Activar el modo de compatibilidad con Internet Explorer de Microsoft Edge

Ayer se acabó la era IE, tras mucho tiempo anunciándolo Microsoft jubilaba definitivamente Internet Explorer para todos aquellos usuarios que tengan una versión de Windows actualizada. A pesar de los avisos mucha gente todavía depende de Internet Explorer por la necesidad de recurrir a controles ActiveX para diversas cosas: interactuar con algún hardware antiguo (una tableta de firma, un lector de huellas, una máquina de radiología…), utilizar aplicaciones internas de tipo intranet, creo que algunas páginas de la administración todavía dependen de IE para algunos certificado digitales, etc. ¿Qué solución tiene esta gente? La más radical sería montar una máquina virtual con Windows 7 para tener IE11, pero no es lo más práctico. Microsoft Edge incorpora un modo de compatibilidad con IE, que en principio se mantendrá hasta 2029 (luego ya se verá).

¿Cómo activamos el modo IE de Edge?

Es muy simple, pulsando sobre el icono de los tres puntos en la esquina superior derecha se desplegará este menú:

Ahí tenéis una opción que es Volver a Cargar en modo Internet Explorer. Al pulsarla recargará la página usando un motor que emula las características del de Explorer. Cuando lo activemos nos pedirá que confirmemos si queremos abrir esta dirección siempre en ese modo, con un aviso como este:

Si necesitáis configurar las Opciones de Internet, a las que antes se accedía desde el menú de Explorer ahora debéis buscarlas en el Panel de Control del sistema operativo, por el resto se configuran igual.

¿Cómo exportar la configuración de Internet Explorer y Ajustes de Internet desde el registro del sistema de Windows?

A veces, ya sea por política de empresa o por el uso de una aplicación web propia, necesitamos una configuración concreta para Internet Explorer en los ajustes de Internet. Y a veces las actualizaciones del sistema nos mandan al guano dicha configuración, obligándonos a conectarnos para volver a configurarlo. Ok, cierto, en caso de tener un controlador de dominio la tarea es más sencilla, pero a veces no podemos tener dicha configuración por lo que sea. Entonces ¿cómo podemos facilitar el trabajo? Pues de una forma muy simple: una vez configurado el navegador exportamos esta configuración desde el registro del sistema.

Ejecutamos el regedit.exe y buscamos la siguiente ruta:

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings

Hacemos click derecho sobre Internet Settings y en el menú emergente elegimos Exportar, como se ve en la imagen de abajo. Esto generará un fichero de registro de sistema, por lo que si la configuración se modifica bastará con ejecutarlo para recuperar la anterior.

Registro del sistema

Windows: Modificar márgenes de impresión del Explorer con una entrada en el registro.

Una actividad que tengo que hacer habitualmente en mi trabajo es configurar los márgenes de impresión de Internet Explorer en los equipos de los clientes. Una tarea tediosa y repetitiva que obliga a ir configurando los equipos uno a no ¿Puede agilizarse? Sí, con una entrada en el registro del sistema. ¿Cómo? Pues lo primero es abrir el block de notas y pegar este código:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\PageSetup]
"header"=""
"footer"=""
"margin_bottom"="0.2"
"margin_left"="0.2"
"margin_right"="0.2"
"margin_top"="0.2"

En este caso estamos ajustando el margen a 0.2 cm, en vuestro caso poned el valor que corresponda a vuestra necesidad.

Simplemente guardáis ese código en un fichero con la extensión .reg y, cuando lo tengáis, lo ejecutáis con permisos de administrador. Y listo, ya quedó configurado.

Ejecutando ActiveX en Chrome

Tenía estos días un cliente que quería ver el streaming de su cámara de seguridad ip en el Google Chrome. La aplicación web de la cámara requiere ActiveX así que el Chrome decía que nanai, y el cliente que nanai a lo de usar el Explorer. ¿Hay solución? Pues yo encontré un complemento que me ha salvado la papeleta: IE Tab. También puede ser útil para testear webs en distintas versiones de Explorer sin tener que andar abriendo varios navegadores.

Se trata de un complemento que emula Internet Explorer en una pestaña de Google Chrome. Ojo, que tampoco es Jauja, no te permtirá ejecutar ActiveX en Linux o Mac, por si estabas pensando en eso. Se necesitan las librerías de ActiveX instaladas en el equipo para que este funcione, así que sólo te será útil si lo instalas en Chrome para Windows.

Lo dicho, IETab no es gran cosa porque sólo te permitirá ejecutar ActiveX en Windows, donde ya tendrías en IE para lo mismo, pero como curiosidad o como una forma de testear webs sin cambiar de navegador puede ser útil. O para los haters a muerte del Explorer, claro.

No funciona el depurador de IE11: error en JSPlugin.3005

Me ha pasado en el trabajo: el depurador de Internet Explorer 11 no funciona. Y lo necesito porque estoy depurando una aplicación web que utiliza ActiveX y tiene que funcionar en Explorer. Pero al pulsar F12 e intentar usar el inspector de código veo un error, encabezado por

Exception in window.onload: Error: An error has ocurredJSPlugin.3005

Parece que es un error típico en Windows 7 si se actualiza directamente de IE8 a IE11. Las soluciones son:

  • Desinstalar actualizaciones para volver a la primera versión de IE del sistema operativo y, tras eso, primero actualizar a IE10 y luego a IE11.
  • Ir a la web de Microsoft, buscar la última actualización se seguridad de IE e instalarla. Os pondría un link, pero puede que haya cambiado cuando lo leáis, así que mejor buscadla.

Instalar Internet Explorer en Ubuntu Linux

The horror, the horror. Está claro, nadie en su sano juicio querría instalar Explorer en su equipo de forma voluntaria (sacando que la alternativa a este fuera Safari… pero eso es otra historia). Pero si alejamos la vista del usuario medio y nos pasamos al perfil de desarrollador web nos encontramos con que ahí la cosa cambia.

Y es que por mucho que lo odiemos, y aunque ha bajado bastante estos años, Explorer sigue teniendo una cuota de mercado muy alta, además de seguir sin acatar al 100% los stándares de la W3C. Esto nos lleva a que si hacemos una web tenemos que testearla en el navegador de Microsoft. ¿Opciones? O máquina virtual con Windows o tirar de Wine para instalar y ejecutar Explorer en tu Ubuntu.

Wine lo puedes descargar desde la página del proyecto, desde el centro de software de Ubuntu o puedes hacerlo desde línea de comandos. En el enlace a la web del proyecto ya verás las instrucciones de instalación, si bien en mi ejemplo de abajo puedes ver como instalar Wine y Explorer desde el terminal:

##Añadimos el repositorio de Wine a la lista de repositorios
sudo add-apt-repository ppa:ubuntu-wine/ppa

##Instalamos wine, en el ejemplo la 1.4 que es la última versión estable hasta el momento, aunque hay betas de la 1.5 si quieres probar
sudo apt-get update && sudo apt-get install wine1.4 winetricks

##Instalamos la versión de Explorer que queremos, en mi caso era la 8
winetricks ie8

##Si quieres lanzar explorer desde la línea de comandos, basta con teclear
wine iexplorer

En fin, con esto ya tienes el navegador más ágil, potente, configurable, seguro y respetuoso con los estándares del mercado (no veáis lo que me estaba riendo mientras escribía eso, no se lo cree ni Steve Ballmer). Enjoy it!

Detectar IE7 o IE6 con Javascript

A día de hoy son muchos todavía los que usan IE6 e IE7. A pesar de que tener un navegador totalmente actualizado y compatible con sistemas operativos con una década de edad es fácil y totalmente gratis, hay gente que se resiste. Si has tenido que hacer páginas web alguna vez sabrás lo engorroso que es tener que contar con estos navegadores. Ya sea para programar una alternativa o para dar un aviso de que ya no das soporte a los mismos (yo es lo que hago últimamente cuando tengo libre albedrío a la hora de diseñar, a modo de concienciación y protesta) es indispensable tener alguna forma de detectar si el navegador es Internet Explorer y qué versión del mismo es.

 var rv = -1;  //inicializamos para prevenir fallos de puntero a nulo
 if (navigator.appName == 'Microsoft Internet Explorer')
 {
      var ua = navigator.userAgent;
      var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
      if (re.exec(ua) != null)
               rv = parseFloat( RegExp.$1 );
      if(rv > -1){
          switch(rv){
              case 7.0:
                "lo que toque hacer";
                 break;
              case 6.0: 
                 "lo que toque si es el 6";
                  break;
              default:
                  "aquí se hace lo que habría que hacer por defecto";
                   break;                  
          }
      }
 }

Y con esto debería ir sin problema la detección.

Vídeo en HTML5 (básico)

Utilizando HTML siempre nos encontramos con el problema de tener que depender de QuickTime y AdobeFlash para insertar audio o vídeo. HTML5 nos da las etiquetas AUDIO y VIDEO que nos permiten, con mayor facilidad, insertar este tipo de recursos multimedia en nuestra página.

En esta ocasión nos centraremos en la etiqueta VIDEO, que como habréis podido deducir nos permite insertar vídeos en nuestra página. El uso de esta etiqueta es tan simple como lo que podéis ver en el siguiente ejemplo:


<video src="example.mp4" width="600" height="320" controls preload></video>

Ya ves que no es complejo, aunque requiere una cierta explicación. Estos son los atributos que tienes a tu disposición:

  • SRC: Enlaza con el archivo de video que queremos reproducir
  • WIDTH: El ancho del video en pixeles.
  • HEIGHT: El alto del video en pixeles.
  • CONTROLS: Nos permite incluir los controles del reproductor del navegador como el botón de play o el volumen.
  • AUTOPLAY: Permite especificar si el archivo de video se reproduce desde que se carga la pagina.
  • PRELOAD: Carga un poco el archivo de video en el buffer antes de iniciar la reproducción, para que no se trabe mientras se reproduce.

Todo parecía muy fácil hasta aquí, pero, mi querido programador web, ya sabes que NUNCA es tan fácil. Si los problemas para conseguir la compatibilidad de tu maquetación en CSS en todos los navegadores te ha hecho envejecer prematuramente varios años ya sabes lo que viene ahora: Los distintos navegadores dan soporte a distintos formatos de vídeo (seguro que no te sorprende, seguro que te lo venías oliendo). Las compatibilidade de los motores de los navegadores con los codecs de vídeo son:

  • H.264 :: Soportado por Safari, Google Chrome e Internet Explorer 9. Se trata de un codec propietario
  • OGG Theora :Soportado por Firefox, Opera y Google Chrome. Es libre, pero menos eficiente que H.264, ya que ofrece menor calidad y mayor tamaño de los archivos.
  • WebM : Soportado por Google Chrome, Firefox y Opera, aunque Google también ha creado un plugin para que funcione en IE9, y en Safari debería funcionar ya que usa como base QuickTime para reproducir vídeo. Es libre, ofrece una calidad similar a H.264 pero además consigue una mejor compresión, creando archivos más ligeros. Incluso el FlashPlayer de Adobe soportará este formato.

Todo esto provocado por el enfrentamiento entre los consorcios WHATWGs (apoyado mayoritariamente por Google, Mozilla y varias empresas del campo de software libre) y MPEG-LA (este apoyado por el eje del mal: Apple/Microsoft). Tal cual está el tema de las licencias a día de hoy, en 2016 el codec H.264 podría pasar a ser de pago, así que habrá que tener ojo con eso.

Entonces ¿cómo consigo la compatibilidad entre varios navegadores? Tampoco es difícil. Lo que tienes que hacer es no poner el atributo src dentro de la etiqueta VIDEO. En su lugar, tienes que crear etiquetas SOURCE con los distintos src y especificando en cada uno el codec, y ponerlas entre la apertura y el cierre de VIDEO, como en el siguiente ejemplo:

<video width="600" height="320" controls preload>
  <source src="ejemplo.ogv" type='video/ogg; codecs="theora,vorbis"' />
  <source src="ejemplo.mp4" type='video/mp4; codecs="avc1,mp4a"' />
  <source src="ejemplo.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>

Como ves, la etiqueta SOURCE tiene como argumentos el src y type, donde definís el tipo de vídeo y el codec a reproducir.

En fin, el futuro próximo de la web está aquí, en HTML5. Haciendo uso de CSS además podréis lograr un reproductor más personalizado, más «bonito» y visible. Id pegándole un ojo.

Firebug, tu mejor amigo.

¿Eres desarrollador web? ¿Estás interesado en serlo? ¿Buscas herramientas que te simplifiquen la vida? Entonces necesitas Firebug

¿Qué es Firebug? te dirás. Firebug es una herramienta cojonuda, Open Source y con licencia BSD (y además gratis), que puedes instalar como un add-on en Mozilla Firefox. Si conoces otras herramientas como el Firefly de Opera, ChromeInspector, o las herramientas de desarrollo web de Internet Explorer te puedo decir que Firebug se las merienda. Mucho más simple, claro, usable y productivo.

¿Qué nos permite Firebug? Nos permite inspeccionar el código HTML de las páginas, depurar código javascript, comprobar la comunicación con el servidor, testear ciertos aspectos de la seguridad de la página, inspeccionar DOM, probar modificaciones en el CSS (con la seguridad de que no te cargas nada)… Todo con pasmosa facilidad, y además, para los hispanoparlantes, disponemos de él en castellano (y es posible que aparezca próximamente una versión en gallego pero… de momento dejadlo en rumore)

¿Su principal defecto? Mayormente que no haya una versión para cada navegador, de momento sólo dispones para él en Mozilla Firefox

Existen inclusive parches que te permitirán utilizarlo para testear código flash, e incluso decompilar los archivos swf.

Tienes también a tu disposición una wiki con diversa información (en inglés) sobre este plugin en el siguiente enlace. Y me reitero, Firebug es una herramienta que me ha salvado el culo en muchos desarrollos, tanto como autónomo como en empresas, no es un juguete, sino una buena herramienta de trabajo. No podía dejar de declararle mi amor en este blog, es un proyecto que merece mucho la pena y que, si lo sabes utilizar, te facilitará mucho el trabajo. No dejes de probarlo.