Contenido

Consejos para mejorar nuestro crossbrowsing

29 Ene

+ 16

Los desarrolladores web no desarrollamos para una única plataforma, tampoco desarrollamos para un único dispositivo y mucho menos para un único perfil de usuario. Por ese motivo, el desarrollador web debe lidiar cada día con esta infinidad de problemas, no es un trabajo fácil, pero alguien tiene que hacerlo 😀

Cuando estudiaba, términos como crossbrowsing, podían sonar a orgía de navegadores, pero cuando más vas adentrandote en este mundillo, vas pillando el verdaderos significado de la palabra. CrossBrowsing, es la tarea que los desarrolladores web realizan para que sus aplicaciones se vean perfectamente en todos los navegadores web, una árdua tarea que no siempre es tan fácil como debería serlo. Por ese motivo, cualquier ayuda en este punto puede salvarnos del mayor número de horas perdidas delante de un proyecto, quizas unos consejos nos pueden ir bien.

Via Oacteck.com hacen una recopilación de las más básicas y me tomo la libertad, de traducir e interpretar, a mi manera, los puntos que allí se desglosan.

  1. Descarga la última versión de Firefox, Safari, … y actualiza Internet Explorer
  2. Descarga Microsoft Virtual PC (o similar)
  3. Descarga herramientas para tu navegador
  4. Desarrolla sobre Firefox/Safari primero…
  5. Despues desarrolla para Internet Explorer 6.0 y 7.0
  6. Usa condicionales para Internet Explorer
  7. Usa hacks solo en como último recurso

1. Descarga la última versión de Firefox, Safari, … y actualiza Internet Explorer

Creo que es bastante obvio y necesario que un desarrollador web esté a la último en las herramientas que necesita. Está claro que cada nueva versión nos aporta una serie de mejoras que seguro nos puede ayudar en nuestra tarea diaria. Pero ojo, esto tiene tambien su problema, lo veremos en el siguiente punto. 

2. Descarga Microsoft Virtual PC (o similar)

Gracias a herramientas como Microsoft Virtual PC, VMWare o Parallels, nos ayuda a disponer de un sistema operativo diferente dentro de nuestro entorno de trabajo, esto es idea y recomiendo almenos uno, que sea bastante descuidado, sin actualizar, simulando a los usuarios más desastres de pc. De esta forma podremos comprobar con varios navegadores dentro de un entorno más o menos genérico, ya que el 90% (por no decir un porcentaje mayor) de los usuarios de Internet desconocen el mantenimiento que para nosotros es algo tan trivial como el respirar.

Toda prevención es poca, pero con estas herramientas podemos casi asegurarnos el éxito.

3. Descarga herramientas para tu navegador

Siempre que veo un post con el título «Las XXX extensiones de Firefox que necesita un desarrollador» le echo un vistazo, no por que necesite algo más para mi trabajo diario, sinó por que alguien te puede mostrar una extensión que te permita hacer algo que hasta ahora tenías que hacer tu mismo, ahorrandote trabajo y tiempo. Por eso es necesario conocer las herramientas que utilizan otros, y sobretodo mantenerlas actualizadas.

Lo asemejo al carnicero que ha de afilar el cuchillo para trabajar mejor, necesitamos afilar nuestro navegador para pulir los detalles, así marcamos las diferencia.

4. Desarrolla sobre Firefox/Safari primero…

Aunque no esté muy de acuerdo en que se haya de desarrollar sobre uno u otro inicialmente, por desgracia lo hago, quizas por que el Javascript desde la consola de Firebug es muy cómodo, pero deberíamos desarrollar teniendo en cuenta los demás navegadores para así solo hacer una pasada y no tener que volver a tocar ese código una vez desarrollado. Tambien es verdad que desarrollar sobre Firefox / Safari, te asegura una estandarización más o menos correcta y te puedes permitir hacer uso de este sistema ya que luego tendrás que depurar poca cosa sobre IE.

5. Despues desarrolla para Internet Explorer 6.0 y 7.0

Una vez que ya tienes proyecto términado, asegurate de probarlo 100% sobre las dos versiones de Internet Explorer, lamentablemente es el principal navegador de Internet y causar problemas a tal masa de usuarios puede ser la muerte de un proyecto.

6. Usa condicionales para Internet Explorer

En un proyecto web tenemos 3 capas,( contenido, funcionalidad y diseño), el diseño como es de esperar tambien se ve diferenciado en los diferentes navegadores. Por ese motivo tenemos que usar sistemas que nos permitan hacer compatible nuestro diseño en el máximo número de navegadores web. Quizas la forma más correcta sea la de usar sistemas condicionales en nuestro HTML para cargar un CSS u otro dependiendo del navegador que use nuestro usuario.

7. Usa hacks solo en como último recurso

Apesar de todas nuestras buenas intenciones, nos podemos ver obligados a usas elementos no estandares para que nuestra aplicación se vea correctamente. Personalmente no recurriría a este punto a no ser que fuera estrictamente necesario. De todas formas debemos conocer todas las posibilidades, por que al final lo que importa es que el producto salga, sinó que se lo digan al cliente…

  • Yo la verdad, no soy de probar en todos los navegadores.. solo trabajo para se vea bien en Firefox y IE (Sigue siendo una porqueria) y un poco dependiendo de la importancia del sitio le echo una ojeada en el Opera.. ahora que esta saliendo el Safari.. tendria que acostumbrarme que ya le va creciendo el pitito..

    Me esta serviendo mucho algunas documentaciones que posteaste.. hay cosas que realmente no sabia!

    Andres, sabes que falta para sugerir?.. justamente ayer estaba lidiando con el maldito problema de los rectangulos en un swf que el IE habilita por defecto, al que hay hacer 2 clicks para ejecutar una accion dentro del flash.. con el swfobjetc.js lo quita sin embargo a mi no me ha funcionado aún.. seguire buscando porque es algo que hice hace mucho y no se donde!

    Otro.. es el activeload.js para que el IE lo active automaticamente.. para evitar esta molestosa barra amarilla de interrogación.. al que debemos clickear PERMITIR!.. es horrible.. desde un mismo webmaster sabiendo que su pagina no tiene nada de malo..

    Gracias por la información!

  • Yo no estoy deacuerdo en actualizar los navegadores y luego usar una máquina virtual para pruebas.

    Antes de comenzar un desarrollo grande, miro las estadísticas de navegadores más utilizados en el W3C y procuro tener las versiones que usa la mayoría puesto que lo que me facilita el tener las últimas versiones, me impide optimizar desde el primer momento.

    Tampoco estoy deacuerdo en desarrollar primero para Firefox/Safari y luego para IE.

    Normalmente si me dejan (que es casi lo más complicado) hacer algo bien hecho (XHTML y CSS2 validado), voy comprobando en IE y Firefox lo que voy haciendo y de esa manera también puedo ir optimizando desde un primer momento.

    Yo por lo menos es lo que hago y, de momento, me surgen problemas pero que siempre puedo solventar a medida que aparecen.

    Un saludote.

  • Hola,

    Yo soy el original escritor del blog, y quería dar algunas aportaciones.

    En primer lugar tiene que el código de Firefox en primer lugar, por qué de dos simples razones: 1) las herramientas para el desarrollo web en Firefox se FAR superior a la IE, y 2) no simples hacks O declaraciones condicionales que son fácilmente utilizado en Firefox. Siempre se puede hacer a través de IE trabajo hacks y otros trucos de codificación para IE, pero en primer lugar y luego tratando de hacer encajar FireFox, aumentará enormemente su tiempo de desarrollo. Por último IE6 ignorar a su propio riesgo pero revise mi blog original de la publicación y verá que IE6 todavía posee el 30% de la cuota de mercado

  • Soy Herzeleyd, mira a ver los comentarios de spam, que no se que pasa ahora que la mayoría de los comentarios que envio a los blogs, no se publican si pongo mi URL en donde hay que poner la URL

  • Hola a tod@s,

    Muchas gracias Andrés por este POST, estoy seguro que para novatos como en mi caso que se están volviendo locos para hace una simple paginilla estática, en la cual valide, se vean correctamente e igual en todos los navegadores, le servirán.

    Para mi punto de vista Falta un CONSEJO:
    Yo tengo que decir que estoy desrrollando en Firefox-Mac y compruebo con Safari (la verdad que lo que estoy haciendo para Firefox se ve genial en Safari) y cuando paso a Windows y compruebo con Firefox-Win se ve distinto que en el MAC y no digamos con Internet Explorer, extraño no? Por lo tanto, falta un CONSEJO…. : ¿Cómo programar con los diferentes navegadores y con los distintos Sistemas Operativos?

    Respecto a los hacks, lo que no puedo entender, es el por qué está en el último consejo, como si estuviera mal el utilizarlos… el problema que veo es que si todos los navegadores utilizasen los estándares como tocan ya no tendríamos que utilizar los hacks, ni mucho menos. Por lo tanto, ¿qué problemas hay en utilizar los hacks?

    Un gran saludo cordial!!!

  • Buenas 🙂

    En mi caso suelo desarrollar usando Firefox con Internet Explorer 6.

    La razón es simple, Firefox es perfecto para el desarrollo, por herramientas etcétera, pero si dejo de lado Explorer 6, luego tengo verdaderos «follones» para solucionar según que cosas…

    En tema hacks y condicionales, intento no usar nunca hacks, y condicionales sólo los uso para los pngs transparentes con IE6.

    Con Safari y ópera casi nunca he tenido problemas, y con Internet explorer 7 alguno que otro, pero tampoco demasiados…

    Muerte al 6!!!!!!!!!!!

    Saludos.

  • @neo.xisco: El problema que hay con el uso de hacks es que no es un uso estandard del código. Siempre hay soluciones que nos pueden evitar tener que usarlos, quizas algunas sean mucho más laboriosas, pero el usarlos nos asegurará que tengamos seguir usandolos indefinidamente.

    De todas formas, no siempre está en nuestra mano, modificar el diseño para evitar usar hacks, y como comento arriba, el cliente manda y no va a entender que no quieras poner un guión por que no validará una CSS… es una decisión muy personal.

  • Cada día me da más miedo desarrollar sobre IE. Simplemente no me fío de que se acerque al mundo de los standars o decida buscarse su vida. Apuesto por Firefox y por todas las herramientas de desarrollo que nos proporcionan, muchas de las cuales supongo que ya conocemos todos. Os recomiendo que os acerquéis a este post, hay cosas que desconocía y me han ayudado

    http://extensionesfirefox.blogspot.com/search/label/desarrollo

    Un saludo

  • pues desarrollar para ie no es algo que acostumbro hacer solo suelo tener cuidado prara depurarlo con el ie.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.