Tecnologías, Internet y Contenidos v. 2.0

Joomla, Wordpress, Blogger, Twitter...

Pruébalo en todos los exploradores!! Cuantas veces uno de nuestros jefes nos ha dicho eso. Para los que nos dedicamos al desarrollo de aplicaciones web es, la mayoría de las veces, una verdadera tortura que una aplicación o página web funcione en todos los exploradores o que se vea exactamente igual en cada uno de ellos.


Y cada vez es peor.. empezamos con Explorer 5 y el Explorer 5.5.. después el 6.0, 7.0. A ellos se unió Opera y Firefox con sus distintas versiones. Además de Safari y el mucho más reciente Google Chrome. Aunque también es verdad que no todos los exploradores suelen dar problemas. Si cuando desarrollamos una aplicación seguimos los estándares marcados por el W3c y otros organismos oficiales, los problemas que encontraremos serán muchísimos menos.

Aún así, los exploradores web tampoco siguen los estándares al pie de la letra. Existen numerosos test que nos permiten comprobar si un explorador sigue o no los estándares web. Uno de ellos es el test Acid3 que podéis probar en el siguiente link, Acid Test. Veréis como con cada explorador se ve una cosa distinta.


Acid Test con Internet Explorer 7

Acid Test con Firefox 3.0

Acid Test con Google Chrome



Dadas las diferencias existentes entre uno y otro explorador es común que un cliente nos pida que la página que les diseñamos se vea exactamente igual en uno y en otro. Lo más común, por lo menos en España, es que se pida que se vea en todas las versiones de Internet Explorer y Firefox, lo cual, para muchos, entre los que me incluyo, es más que un quebradero de cabeza.

A continuación os comento algunas de las herramientas que más me han servido en esta lucha por conseguir que una página web se vea correctamente en todos los exploradores.

  • MultipleIEs : Herramienta que permite tener instalados varias versiones del Explorer en el mismo ordenador. Por lo que se no existe versión todavía para Internet Explorer 8. Su fiabilidad es máxima y el consumo de recursos es moderado.
  • IeTester: Es una herramienta que te permite visualizar casi todas las versiones de Internet Explorer. Es muy versátil y fácil de usar. Su interfaz en pestañas hace mucho más fácil el arduo trabajo de realizar múltiples pruebas. He encontrado algún error de visualización en los botones (el texto no aparece), pero salvo este pequeño error funciona muy bien.
  • Opera Mini: Sirve para probar la apariencia de una web en un dispositivo móvil, siempre a través del explorador OperaMini, la versión para móviles del conocido y recomendable navegador Opera.
  • Spoon.net: Permite ejecutar una instancia portable de los exploradores más utilizados. Es necesario instalar un pequeño programa y a partir de ahí podremos ejecutar sin instalarlos varios navegadores. Muy útil para pruebas de visualización puntuales. Existe la posibilidad de ejecutar los siguientes navegadores: Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox 3.5, Firefox 3.0, Firefox 2.0, Google Chrome, Opera 10, Opera 9 y Safari en sus versiones 4 y 3.

Además de estas herramientas que tendréis que instalar en vuestro ordenador, existen páginas web que generan imágenes de como se vería dicha web en distintos entornos y navegadores. Estas páginas son muy útiles sobre todo para adaptar el diseño de una página a todos los navegadores. A continuación os enumero algunos ejemplos que he encontrado por ahí.

  1. http://browsershots.org Podéis ver una explicación de su uso aquí.
  2. http://www.browsercam.com
  3. http://viewlike.us/ Permite visualizar una página en distintas resoluciones de pantalla rápidamente, incluyendo la resolución de un Iphone.
  4. NetRenderer: Nos permite visualizar con una velocidad increíble una web en varias versiones del explorer, desde la 5.5 hasta la 8. Muestra una captura de pantalla del resultado. Además ofrece una versión para ver las diferencias entre el 6 y el 7. (Actualización 22/03/2010)
Espero que os ayuden y que si conocéis alguna más dejéis un comentario en el blog, para incluirla en la lista. Suerte en vuestra lucha con algunos exploradores y recordad, es siempre más fácil, si seguís los estándares web.

15 comentarios

  1. Anónimo Says:
  2. Excelente articulo, pero preguntaria cual es la herramienta idonea que permita visualizar nuestros sitios cuando los tenemos en modo local.

     
  3. Jose Says:
  4. Al tener un sitio en modo local, no nos sirven las herramientas de visualización a traves de una página web, pero tanto MultipleIEs, como IETester y Spoon.net nos servirán para visualizar páginas en local.

    Espero que te ayuden estas herramientas.

    Un saludo y gracias por tu comentario.

     
  5. Anónimo Says:
  6. En mi equipo tengo instalado IET Tester y nunca he podido visualizar mi sitio en modo local.

    Espero que con las herramientas MultipIES Y Spoon.net me funcionen, voy a probar.

     
  7. Jose Says:
  8. Pues yo si que he podido visualizar sitios en local con IE Tester, es más, nunca tuve ninguna dificultad para hacerlo. Quizás son versiones antiguas que no funcionan para páginas locales. A lo mejor el problema es como visulizas las páginas. En lugar de acceder via htttp://localhost prueba poniendo la dirección Ip de la máquina donde esta la aplicación / página que quieres probar.

    Un saludo.

     
  9. Anónimo Says:
  10. Intente una vez mas a utilizar IE Tester y estos fueron mis resultados:

    En internet 5,6 y 7 no se visualizo mi sitio en modo local.
    En internet 8 me salio un error, pero ya se puede ver una parte de mi sitio.

    Utilice la siguiente forma http://localhost/nombredemisitio.

    Al tratar de visualizar mi sitio en modo local por medio de la ip de mi equipo en ninguna version de mi sitio se pudo visualizar.

    Probare con la sotras opciones que mencionaste.

    Saludos.

     
  11. Anónimo Says:
  12. Por otro lado instale la herramienta spoot net pero no he podido hacerlo funcionar.

    Help

     
  13. Jose Says:
  14. Con la herramienta spoon, despues de instalar la aplicación, debes ir a la página de nuevo y pulsar sobre el icono del explorador que deseas probar. A partir de ahí se cargará una instancia portable del explorador. Tienes que esperar un poco, porque tarda bastante.

    Utiliza http://ip/nombredetusitio.. si tienes un router, pon la dirección local de tu máquina, debería funcionar. Tiene que ser de la forma 192.168.x.x..


    Un saludo.

     
  15. Anónimo Says:
  16. Perfecto, ahora si me funciono utilizando la herranmienta spoon net hice la rueba para que mi sitio se viera en google crome y carga muy bien mi sitio web, con un poco mas de tiempo ire probando en los diferentes navegadores.

    Herramientas como esta es lo que siempre estuve buscando para mis sitios en modo local.

    Muchisimas gracias al creador de este articulo.

     
  17. He utilizado esta herramienta de spoon.net con todos los navegadores que trae como son firefox, opera, safari y google crome con exelentes resultados ya que mi sitio en modo local se visualiza perfectamente.

    El unico navegador que no me funciono en ninguna version fue intenet explorer.

    En la version 6 y 7 no abrio el navegador y en la version 8 me llevaba directo a la pagina de descarga de esta version.

     
  18. Esta excelente herramienta le esta faltando el navegador de linux y seria perfecto que tambien lo trajera incluido.

     
  19. Jose Says:
  20. Gracias por tus aportaciones Felipe. Da gusto encontrarse con gente que comenta y colabora como vosotros.

    Muchas gracias de nuevo, y un saludo!

     
  21. Natalia Says:
  22. Hola:
    Soy nueva en todo este tema y, por mi tarea, fue necesario desarrollar un sitio web para difusión de una Red. Tuve que aprender todo desde ceros y, ahora que creí que tenía más o menos todo armado, me encuentro con el problema de que el sitio web no lo puedo visualizar en Explorer (nunca lo utilizo... siempre uso Chrome o Firefox).
    ¿Me podrías ayudar? No se visualiza nada de la derecha, algunos textos de agrandan y algunos artículos solo se visualiza el título.

    La plantilla que utilicé es pq simplicity y el sitio, si quieres verlo, es: www.redculturaydesarrollo.org (quise copiar los errores pero no me dejó)
    Debería enviar un boletín mañana y ahora todo está mal!
    Gracias por tu ayuda!

     
  23. Jose Says:
  24. Hola natalia..

    Espero que leas esto pronto... ya que es urgente. Haberme dejado tu e-mail y así te ayudaba más rápido.

    El problema que tienes es sencillo de solucionar. No es un problema con la plantilla ni nada por el estilo. Es con el texto de un artículo que seguramente ha sido pegado desde un documento de word. En el artículo con id 51 y título Los caminos de Abya... tienes un comentario html que condicional que pone [if gte mso 9]. y dentro de el comentario un xml.

    Si eliminas este comentario solucionarías el problema con la visualización de tu página en Explorer. Si no sabes mucho de html o no sabes como borrar ese comentario te ayudo a identificar mejor lo que tienes que borrar.

    No es recomendable en ningún entorno web copiar y pegar desde Word.

    Un saludo.. y espero haberte ayudado.

     
  25. Natalia Says:
  26. ¡¡¡¡Gracias, José!!!! No tengo ni idea de ésto pero me llevo bien con la intuición. Encontré como editar html en el artículo que me decías y logré solucionarlo!!!
    No quiero abusar de tu amabilidad pero igual, sigo con dos problemas (muy menores, pero...):
    1. algunas imágenes se pixelan y se ven mal en explorer(¡¡especialmente las que mejor se deben ver porque son los financiadores del proyecto en el que se enmarca la Red!!)... ¿hay algún truco para eso?
    2. el texto de "Bienvenidos/as", la letra se agranda mucho en la portada pero si vas al contenido completo, la letra mantiene el formato ¿¿??
    Mi correo es nrmotta@gmail.com
    ¡Gracias de nuevo!

     
  27. Jose Says:
  28. Hola Natalia...

    Sobre las imágenes, te recomiendo que las subas con el tamaño que tendrán en la página. Por ejemplo, una imagen que tienes del ministerio tiene un tamaño de 776 de ancho y en la página la tienes a 200. Si no sabes como redimensionar imágenes te recomiendo utilizar FastStone PhotoResizer. Es muy fácil de usar.

    Sobre el texto, es tema de css. En la linea 39 del archivo joomla.css tienes el estilo que se aplica al texto en el contenido completo: la clase es contentpagetitle. Esta clase afecta a todos los títulos de contenidos, supongo. Tiene un font-size de 25 px. Puedes ajustarlo a como te guste más.

    Espero haberte ayudado.
    Un saludo y gracias por visitar mi página.

     

Publicar un comentario

Creative Commons License
Esta obra está bajo una licencia de Creative Commons.