Mientras se desarrolla una página web, el diseñador debe estar viendo los resultados mediante algún método. La visualización en los diferentes navegadores sigue siendo aún hoy uno de los dolores de cabeza de los diseñadores web, dadas las diferencias en la utilización de los estándares entre los navegadores de Microsoft y el resto.
Otro de los problemas a los que se enfrentan los diseñadores de páginas web, es la dificultad para previsualizar sus trabajos desde dispositivos móviles. Esto tiene una solución parcial mediante la utilización de algunas páginas que ofrecen un servicio de visualización, lo que obliga al diseñador a estar subiendo el diseño a un servidor cada poco tiempo.
También es frecuente que nos enfrentemos al problema de las diferentes configuraciones de los navegadores. Muchos usuarios optan por bloquear algunos tipos de contenidos, como Javascript, controles Activex y Flash, entre otros. A esto hay que sumar que en muchas ocasiones, por desconocimiento o por olvido, hay personas que tienen configuraciones con bloqueos parciales, bloqueando alguno de estos contenidos y otros no.
Cuando un diseño se encuentra basado en alguna de estas tecnologías, es singularmente importante conocer el comportamiento del diseño ante la falta de los elementos necesarios para que el sitio se aprecie en su totalidad.
Adobe Dreamweaver CS4 tiene esto solucionado y concentrado en su software, de forma tal que el diseñador no tiene por que abandonar el mismo para visualizar su trabajo en forma externa.
La vista de diseño
Como hemos visto en anteriores artículos, la vista de diseño permite al diseñador observar los resultados mientras está trabajando en la página, lo que resulta de gran ayuda. Sin embargo, la vista de diseño no presenta los trabajos tal y cual se verán en un navegador, en primer lugar porque no está pensado para ello, sino que es un lugar sobre el que trabajar, y segundo porque sería imposible implementar una vista en la cual se fueran reflejando los resultados del trabajo tal como se vería en diferentes navegadores.
La vista en vivo
La vista en vivo se asemeja más a la vista que se obtendrá en un navegador, pero tiene como inconveniente que los trabajos presentados en este espacio, no son editables. Además, mientras la vista en vivo se encuentra activada, la vista de diseño no es editable. Sin embargo, si es posible realizar ediciones en la vista de Código, haciendo posible realizar trabajos en ésta mientras se aprecian los resultados en la vista en vivo.
Sin embargo, debemos recordar que el problema principal de las vistas previas es que hay notables diferencias en la visualización que hacen los navegadores de las páginas web, lo que significa que no es posible tener una idea acabada de los resultados, siendo imprescindible en todos los casos, realizar pruebas en navegadores, o en su defecto, utilizar alguno de las páginas que ofrecen un servicio de vista previa desde diferentes navegadores.
Las diferentes vistas pueden combinarse, de forma tal que el usuario de Dreamweaver puede definir cual es la organización que mejor se adecúa a sus necesidades. Por ejemplo, si mientras se encuentra activa la vista en vivo se hace clic sobre el ícono de vista dividida, aparecerá la vista en vivo en el lugar en el que suele mostrarse la vista de diseño.
También es importante recordar que para que se pueda habilitar la vista en vivo, se debe haber seleccionado previamente la vista de diseño o la vista dividida. Si mientras se está desarrollando la edición de la página web se tiene activada la vista en vivo, los cambios que se realicen no se verán hasta tanto no se guarden los cambios efectuados y se refresque la vista en vivo.
Opciones de la vista en vivo
Para simular algunas de las situaciones que se pueden presentar cuando la página sea abierta por un navegador, la vista en vivo puede configurarse para que adopte alguna de las posibles variantes que se pueden presentar en un navegador.
Para acceder a estas opciones, se debe ir a “Ver / Opciones de vista en vivo” y seleccionar una o más de estas opciones que aparecen en el menú desplegable, tal como vemos en la imagen siguiente:
La primera opción que se presenta es “Congelar Javascript”, opción a la que se puede acceder presionando la tecla F6. Esta opción detiene la ejecución de los códigos Javascript y los congela en el punto en que se ha hecho uso de la opción.
La segunda y la tercera opción permite desactivar Javascript y los plugins, tal como algunos usuarios configuran sus navegadores por razones de seguridad, lo que permite ver la página que se encuentra en diseño tal como la verán estos usuarios, permitiendo al diseñador realizar los ajustes necesarios para este tipo de situaciones.
“Utilizar servidor de prueba para origen de documentos” es la opción siguiente, y permite la visualización de páginas dinámicas empleando un servidor de prueba. Esta opción puede ser utilizada en combinación con la siguiente opción, “Utilizar archivos locales para vínculos de documento”, que permite emplear los archivos locales (CSS, Javascript, etc.) para la visualización del resultado. En caso de que no esté activada esta opción, Dreamweaver utilizará los archivos existentes en el servidor de prueba.
Finalmente, nos encontramos con la opción “Configuración de petición HTTP”, el que se emplea para dar parámetros a la configuración avanzada de la vista en vivo. Dado que se trata de opciones avanzadas y se debe contar con conocimientos de programación, dejaremos esta opción para un artículo posterior, teniendo en cuenta además que es muy probable que durante el desarrollo de páginas web corrientes, este tipo de opciones no sean utilizadas.
Vista previa en navegadores
Adobe Dreamweaver cuenta con una opción que permite utilizar los navegadores instalados en el ordenador para previsualizar las páginas. En estos casos, Dreamweaver abre los navegadores solicitados y presenta la página en ellos. Antes de proceder a utilizar esta vista previa, es conveniente haber guardado los archivos que se están creando, de forma tal que cuando se abra el navegador, éste presenta la versión más actualizada de los mismos. En caso de que no se haga, la vista que aparecerá en el navegador será la última que se haya guardado, y en caso de que se guarde posteriormente, se deberá refrescar el navegador para que presente los cambios ejecutados.
Para que se pueda llevar adelante este tipo de visualizaciones, es necesario que se hayan agregado los navegadores a la lista de navegadores de Dreamweaver. En caso de que esto no se haya hecho, se debe ir a “Edición / Preferencias”, con lo que se abrirá el siguiente diálogo:
En este cuadro podemos ver que a la izquierda se encuentra una lista de opciones. En ella, para este caso, seleccionaremos la última, “Vista previa en el navegador”. En la parte central del cuadro veremos que aparece una lista de navegadores. En caso de que no haya ningún navegador en la lista o se desee agregar nuevos navegadores, deberemos hacer clic en “editar”, ante lo cual se abre un nuevo diálogo, en el que introduciremos el nombre del navegador y la ruta de acceso al mismo (se puede emplear el botón “Examinar” que permite navegar por el disco duro).
Más abajo, aparecen casillas de verificación para seleccionar si se trata del navegador principal (predeterminado) o secundario. Esto también se puede configurar en el cuadro de diálogo anterior.
Vista previa para dispositivos móviles
Así como resulta de dificultoso diseñar páginas que sean compatibles con la gran cantidad y variedad de dispositivos móviles existentes, resulta también bastante complejo saber como se verá una página web en uno de estos dispositivos.
Dreamweaver cuenta con una solución para ello, que es la “vista previa en dispositivos móviles”, que se obtiene mediante la utilización de la función “Opera Small-Screen Rendering” y que se encuentra incorporada en “Device Central”. Para acceder a ella, se debe ir a “Archivo / Vista previa en el navegador / Device Central”. Se abrirá la ventana siguiente:
En primer lugar, Adobe Dreamweaver intentará establecer contacto por Internet con una base de datos donde se encuentra la información necesaria acerca de nuevos dispositivos móviles disponibles, de forma de tener la información al día en esta materia.
En la ventana podremos seleccionar el tipo de dispositivo móvil en el cual queremos ver la página que estamos diseñando. En la columna de la izquierda, podremos optar por las diferentes resoluciones de móviles, alternando las vistas. En la columna de la derecha, se pueden configurar algunos parámetros, como la visualización en pantalla pequeña, tipo de contenido, además de un teclado numérico para simular el comportamiento de un móvil.