Tutorial

Consideraciones relativas a los distintos tipos de pantalla que pueden tener los visitantes y el espacio disponible para cada caso.

Las aplicaciones encargadas de presentar las páginas web son los navegadores (browsers), entre los que cabe destacar por su importancia y difusión Internet Explorer, Netscape Navigator y Opera.

La interfaz de un navegador, en su modo estándar, presenta al usuario una o más barras superiores (de menús, de dirección, etc.), una barra inferior (la barra de estado) y un espacio principal, la ventana, en el que son presentadas las páginas web.

La forma de esta ventana es siempre rectangular, pero su tamaño varía, dependiendo del monitor y de la tarjeta gráfica. Podemos hablar de dos tamaños de pantalla diferentes:

  • Tamaño absoluto: es el tamaño «real» de la ventana del monitor, medido generalmente en pulgadas. Depende del monitor.
  • Resolución o tamaño relativo : viene determinada por el número de pixels que se muestran en la ventana del monitor, siendo el píxel la unidad mínima de información que se puede presentar en pantalla, de forma generalmente rectangular. Depende de la tarjeta gráfica.

El tamaño absoluto se suele expresar en pulgadas de diagonal (1 pulgada = 25,4 mm). El más común en la actualidad es de 17’’ en ordenadores de sobremesa, aunque todavía quedan bastantes equipos antiguos con monitores de 15’’ y existen en el mercado bastantes de 21’’. El tamaño absoluto de los monitores de los equipos portátiles suele ser de 14-15’’.

En cuanto a la resolución, los valores más comunes son de 800×600 y de 1024 x768 pixels, aunque quedan todavía usuarios que trabajan por debajo, a 640×480, y por encima, a resoluciones de 1152×864 y 1280×960 pixels.

El tamaño absoluto y la resolución deben estar en concordancia para una visualización correcta, siendo valores aceptables los siguientes:

  • 14″ – 15″: Resolución máxima apreciable: 800×600
  • 17″: Resolución máxima apreciable: 800×600 ó 1024×768
  • 21″: A partir de 1024 x 768

Las posibles resoluciones de trabajo de un equipo dependen sobre todo de la calidad del monitor y de la tarjeta gráfica del ordenador, y se configuran, en sistemas operativos Windows, bien haciendo click con el botón derecho del ratón sobre el escritorio, seleccionando la opción Propiedades y accediendo a la pestaña Configuración, bien desde Inicio > Panel de control > Pantalla.

La importancia de la resolución de pantalla sobre la forma de ser visualizadas las páginas web en la ventana del navegador es muy importante. A mayor resolución se dispone de más puntos de información para presentar los elementos en pantalla, pero estos puntos son más pequeños, con lo que los elementos de la interfaz (textos, imágenes, objetos de formulario, etc.) se ven más pequeños.

Tamaño de página y resoluciones
Tamaño de página y resoluciones

Si diseñamos una página para una resolución dada, ocupando toda la ventana del navegador, aquellos usuarios que la visualicen a resoluciones menores no tendrán espacio en pantalla para contener toda la página, por lo que se verán obligados a usar las barras de desplazamiento del navegador. Por el contrario, aquellos usuarios que la visualicen a resoluciones mayores tendrán demasiado espacio en pantalla para tan poca página, por lo que les quedará bastante espacio vacío, sin contenidos.

Para solucionar estas diferencias, lo normal es que se diseñen las páginas web para una resolución base, generalmente la más usada en la actualidad (800×600), y se construyan internamente mediante tablas o capas de tamaños relativos, con anchuras definidas en %, con lo que se consigue que al ser visualizadas en monitores de más resolución se «abran», ocupando todo el espacio de pantalla disponible.

Las pegas que tiene este sistema son que no da soporte a los usuarios de con menores resoluciones y que, en el caso de resoluciones mayores, el diseño de la página puede verse seriamente afectado al modificar sus elementos las dimensiones originales.

Otra posibilidad es maquetar toda la página dentro de un contenedor padre (una tabla o capa) y asignar a éste una alineación centrada, con lo que la página quedará en el centro de la pantalla si se usa una resolución mayor que la de diseño.

25 diciembre, 2014
dreamweaver

Resolución de Pantalla

Consideraciones relativas a los distintos tipos de pantalla que pueden tener los visitantes y el espacio disponible para cada caso. Las aplicaciones encargadas de presentar las […]
25 diciembre, 2014
dreamweaver

Navegador de etiquetas en DreamWeaver MX 2004

En Dreamweaver MX 2004 desapareció el panel inspector de etiquetas, pasando el nombre al panel donde se muestran los paneles de comportamientos, CSS relevante y atributos, […]
25 diciembre, 2014
dreamweaver

Creación de fragmentos de XSLT para transformaciones en el lado del servidor

El lenguaje de formato ampliable (XML) es un lenguaje que permite estructurar e intercambiar la información. Algunas de las aplicaciones típicas de XML son la distribución […]
25 diciembre, 2014
dreamweaver

Utilización de un agregador RSS 1.0 remoto con Dreamweaver 8

Macromedia Dreamweaver 8 supone un importante avance en el desarrollo XML, al igual que Dreamweaver MX 2004 en el caso de CSS. El equipo de desarrollo […]
25 diciembre, 2014
dreamweaver

Paleta de Objetos y Barra de Propiedades en DreamWeaver

Hagamos click en File > New Windows y nos encontramos con nuestra página en blanco lista para diseñar. Ahora veamos las herramientas del Dreamweaver. Cuando uno […]
25 diciembre, 2014
dreamweaver

Optimización de la página web para todas las resoluciones

Actualmente casi todas las páginas están optimizadas únicamente para una resolución de 800 x 600 píxeles, y aunque la mayoría de equipos actualmente están configurados a […]
25 diciembre, 2014
dreamweaver

Atajos de teclado en documentos

Este artículo explica las teclas de acceso rápido en HTML; porqué parecen una buena idea, y porqué no ayudan tanto como era de esperar. En Fundosa […]
25 diciembre, 2014
dreamweaver

Alojamiento compartido

El alojamiento web compartido consiste en un servidor que se utiliza para múltiples clientes, una misma máquina aloja multiples dominios. Tiene como principales ventajas: Resulta más […]
25 diciembre, 2014
dreamweaver

Un proyecto en Internet

Un proyecto de Internet es una obra de ingeniería informática que responde a un plan estratégico específico. Todo proyecto de Internet debe tener por tanto una […]
25 diciembre, 2014
dreamweaver

Forzar al navegador a no mostrar las barras de scroll

Digamos que quieres crear una pagina sin scroll, no necesariamente tiene que ser un popup ya que este articulo tratara de mostrarte como crear una ventana […]
25 diciembre, 2014
dreamweaver

Código HTML: Programación vs Diseño

No soy programador, no tengo por qué saber códigos HTML». He escuchado a mucha gente decir esto. También he escuchado cosas como «Hay programas que hacen […]
25 diciembre, 2014
dreamweaver

Centrar una página web con DreamWeaver

Cuando diseñamos una página lo solemos hacer para una resolución en concreto, por ejemplo 800×600 o 1024×768 y es posible que nuestra web, a la resolución […]
25 diciembre, 2014
dreamweaver

Estilos CSS en DreamWeaver

Imagínate que tu jefe, luego de 2 meses de arduo trabajo en esos preciados 235 archivos .html para ese gran megaproyecto, se le ocurre que esa […]
25 diciembre, 2014
dreamweaver

Enviar Formulario por E-Mail con DreamWeaver

Aunque la mejor opción para enviar formularios por e-mail es tener un script server-side que maneje el envío, por ejemplo en PHP, ASP, Perl, etc. O […]
25 diciembre, 2014
dreamweaver

Las Etiquetas HTML y DreamWeaver

Hola, antes que nada, este es un artículo técnico, para usuarios nuevos e intermedios (Queda hecha la aclaración). Prólogo Las «gracias» del HTML en su concepción […]
25 diciembre, 2014
dreamweaver

Los Modos de Diseño de DreamWeaver

DreamWeaver soporta 3 modos de diseño, Estándar, Ampliada y Diseño, todos ellos accesibles desde la vida Diseño (Ver > Diseño). Para acceder a cada modo debemos […]
25 diciembre, 2014
dreamweaver

El problema del Ancho de Banda y DreamWeaver

Todos soñamos con un pelito de fibra óptica o al menos una T3, pero la realidad es que probablemente nuestra conexión a Internet sea por un […]
25 diciembre, 2014
dreamweaver

Informe de Errores en DreamWeaver

DreamWeaver MX 2004 posee una interesante herramienta para comprobar los posibles errores de visualización de nuestra página en varios navegadores. Para ver un informe sobre los […]
25 diciembre, 2014
dreamweaver

CSS en tiempo Diseño con DreamWeaver

A muchos os habrá pasado alguna vez si utilizáis archivos incluidos en vuestros documentos: la imposibilidad de ver realment como quedan realmente si estáis utilizando CSS, […]
25 diciembre, 2014
dreamweaver

Manejo de fechas en PHP y MySQL con DreamWeaver

Este es el primero de una serie de 3 tutoriales sobre manipulacion de fechas en PHP y MySQL, orientado sobre todo a los usuarios de Dreamweaver […]
25 diciembre, 2014
dreamweaver

Cloaking de archivos de tu sitio con DreamWeaver

DW MX ofrece algunas nuevas capacidades en el manejo y transferencia de los sites. Una de las más interesantes puede ser el «cloaking», que es la […]
25 diciembre, 2014
dreamweaver

¿Por qué no se ven mis imágenes con DreamWeaver?

Estás tranquilamente diseñando tu sitio web, las imágenes que acabas de poner quedan genial en la página y cuando lanzas la preview en el navegador todo […]