Si no encuentras lo que estás buscando prueba con:

Búsqueda personalizada

sábado, 21 de mayo de 2011

Post 3: Utilización de los Web browsers y SuperPreview para testeo del sitio.

En este post veremos los cinco navegadores web que tenemos que tener instalados para testear nuestro sitio, testearemos nuestro primer sitio web en los distintos navegadores y aprenderemos a utilizar el SuperPreview, herramienta nos va a ser de gran ayuda para el testeo del sitio que implementamos.

Cinco navegadores en que debemos testear nuestro sitio web

Un buen diseñador web siempre tiene que tener en cuenta a el usuario final que va a utilizar nuestro sitio. Pero nosotros nunca podemos saber que web borwser va a utilizar, o que tipo de computadora va a utilizar haciendo alusión a el sistema operativo que tiene el usuario cuando visite nuestro sitio. La mayoría de las computadoras en el mundo que se conectan a Internet corren alguna versión de Microsoft Windows, y la gran mayoría tiene a Microsoft Internet Explorer como defautl browser. Por esto Microsoft Internet Explorer tiene que estar en la cima de nuestra lista de web browsers. Si no tenemos el Internet Explorer podemos bajarlo de forma gratuita en http://windows.microsoft.com/ie.

Mozilla Firefox browser es la mayor competencia de Internet Explorer, Mozilla es un explorador más razonable que Internet Explorer porque sigue los estándares de forma muy precisa y eficaz. Mucha gente en el mundo ya está utilizando este navegador, y es por esta razón que tenemos que tener a Mozilla Firefox instalado en nuestra máquina para testear nuestro sitio. Si no lo tenemos instalado aún, lo podemos bajar de http://www.mozilla-europe.org.

La mayor parte de los usuarios Mac Apple usan el Mac OS browser, llamado también Safari como navegador web. Apple también ha creado una versión de Safari para Windows. Para estar seguros que nuestro sitio va a tener la misma apariencia en cualquier otro navegador como en Safari, necesitamos tener instalado Safari para Windows en nuestro ordenador. Safari se puede obtener en la siguiente dirección http://www.apple.com/safari/.

En el año 2008, Google saco a relucir su navegador web en el mercado, llamado Google Chrome. El mismo está enteramente basado en JavaScript y esto significa que va a ser mas liviano para el ordenador y va a correr más rápido que cualquier otro ordenador de hoy en día. Este navegador lo podemos obtener visitando Google en la siguiente dirección http://www.google.com/chrome.

Finalmente tenemos el nevegador Opera que a pesar de no tener un gran numero de usuarios, Opera es una alternativa muy popular. Se utiliza mucho en teléfonos celulares y otros dispositivos portátiles. Este es otro navegador en donde tenemos que testear nuestro sitio debido a que Opera puede darse cuenta de códigos mal implementados y que otros navegadores pasan por alto. Puedes descargar Opera visitando http://www.opera.com/.


Como testear nuestro sitio web en varios navegadores.

Cuando diseñamos un un sitio web, es importante estar continuamente testeando nuestras paginas en múltiples navegadores web, para asegurarnos de que están funcionando como nosotros lo pensamos. Un navegador web es un programa que interpreta nuestro codigo HTML y lo despliega en pantalla de acuerdo con su interpretación.
Para ayudarnos en el proceso de testeo, Microsoft Expression Web puede ser configurado para previsualizar nuestras paginas en todos los diferentes navegadores instalados en nuestro ordenador, y en diferentes tamaños de ventana. Esto puede ser configurado en el menú "Archivo" o desde el botón de previsualizar () en la barra de herramientas Común.
Para previsualizar la pagina que estamos viendo en el modo "Diseño", en el navegador que tenemos configurado como por defecto, apretamos en el dibujo del icono de previsualizar, si por el contrario queremos cambiar de navegador lo que hacemos es hacer click en el triángulo al lado de el dibujo. A continuación se nos va a desplegar una lista con todos los navegadores que tenemos instalados en nuestro ordenador (ver Fig 1) y de esa lista seleccionamos el navegador en el que queremos visualizar nuestras páginas.
Fig 1 - Menú Previsualizar donde elegimos el navegador a utilizar.

 Existe también otra manera de visualizar nuestras paginas mas rápido, para ello solamente debemos apretar la tecla F12, al apretar este botón el navegador por defecto se abre y vemos una instancia local de nuestra pagina como si la estuviéramos viendo en algún lugar en la Web. En las siguientes dos figuras vamos a ver que en nuestra ventana de "Diseño" vemos la pagina que estamos construyendo igual que en cualquier navegador. Y si comparamos las figuras Fig 2 y Fig 3, no nos queda duda de lo dicho anteriormente.

Fig 2 - Pagina web vista en nuestra vista "Diseño" de Expression Web.

Fig 3 - Vista de nuestra pagina web en Safari, navegador de Mac.

Como utilizar SuperPreview para testear paginas.

A esta altura, muy probablemente estaremos pensando lo tedioso que va a ser testear todas nuestras páginas en todos los diferentes navegadores que recomendamos al principio del post. Otra cosa que se nos puede venir a la mente es, como hago para testear mi pagina en las versiones anteriores de navegadores que tengo instalados y que solo tengo la ultima versión.
Para solucionar estos dos problemas existen varias soluciones, estas son:
  1. Tener máquinas virtuales con otras versiones de navegadores instaladas.
  2. Tener múltiples computadores corriendo a la vez con diferentes versiones instaladas.
  3. Tener programas que produzcan screen shots de nuestra paginas en las diferentes versiones.
Afortunadamente ahora hay una cuarta opción, y esta opción está incluida dentro de Microsoft Expression Web. Cuando instalamos Expression Web, también instalamos un paquete llamado SuperPreview que nos permite hacer comparaciones entre dos navegadores que elijamos, tenemos tambien todas las versiones de estos programas, nos permite diagnosticar problemas y remediar posibles inconsistencias e irregularidades. Podemos hacer uso de esta herramienta presionando en el icono de SuperPreview presente en la barra de herramientas común. A continuación en la Fig 3 veremos una vista rápida del programa.

Fig 4 - Vista del programa SuperPreview, agrande la imagen haciendo click en ella.

Y así llegamos al final de nuestro tercer post, en donde vimos las alternativas que tenemos al testear nuestros sitios y en cuales navegadores se recomienda hacer el testeo. En nuestro próximo post comenzaremos a ver como se edita una página web trabajando en la vista "Codigo".

Ir al post anterior                                              Ir al siguiente post

1 comentario:

  1. y si quiero que de igual manera quiera verse en celulares? seria posible?

    ResponderEliminar