Introducción al diseño web

1) Planificar el sitio web

Antes de comenzar a editar una página web debemos dedicar un tiempo a planificar nuestro trabajo para asegurarnos de
qué vamos a incluir en la web, de dónde lo vamos a obtener y qué aspecto externo le vamos a dar. Un minucioso trabajo
de planificación reducirá los errores que se producen cuando nos ponemos a editar una página. Si queremos evitar
borrar y repetir las cosas una y otra vez, convendrá que sigamos los siguientes pasos:

1. Definir la audiencia destino. Al crear una web desearemos que comunique adecuadamente el mensaje y
contenidos que quiere transmitir: publicar los resultados de una investigación, describir una situación o la inclusión de
contenidos diversos. En función de la audiencia destino el diseño de la web será diferente, por ejemplo si queremos
publicar un artículo los visitantes visitarán la página para leerlo por lo que todo elemento que adorne excesivamente la
página y aumente su carga será negativo para nosotros

En una web docente la audiencia destino serán alumnos y profesores de una asignatura, curso o tipo
de estudios. El material incluido en la web debe ir dirigido a dicha audiencia para un mejor
aprovechamiento.

2. Establecer objetivos. Debemos pensar cuáles son los objetivos de nuestro sitio web: ¿divulgar información?
¿promocionar una asociación? ¿comercio electrónico? ¿educar? ¿entretenimiento?. Debemos definir los principales
objetivos que queremos alcanzar que junto con la audiencia destino nos permitirán definir los contenidos que debemos
incluir en el sitio web.

Los objetivos en una web docente pueden ser muy diversos y dependen de si lo que queremos es una
web para educación a distancia o una web que sirva de apoyo y complemente a la educación
presencial. En el caso de la educación a distancia (teleformación) los objetivos serán que el alumno
supere el curso o asignatura a través de los contenidos y procedimientos que se establecen en la web.
En estos casos será fundamental el apoyo de una guía de estudio y la elaboración de materiales
didácticos de calidad.
En el caso de que la web docente nos sirva de apoyo para la clase habitual, incluiremos contenidos que
complementen y amplíen lo visto en clase, con ejercicios, pruebas de auto-evaluación, tutoría on-line y
con referencias a webs de donde extraer la información para realizar cualquier actividad relacionada
conl a asignatura.

3. Organización. Una vez definidos los objetivos debemos recopilar todo el material gráfico y escrito que incluiremos
en la web. Seguramente más adelante nos encontraremos que es necesario crear nuevos contenidos, pero si
estamos organizados bastará simplemente con incluirlos donde corresponda. Una vez definidos claramente los
objetivos y disponemos el material necesario es hora de organizarlo. Cuánto más grande sea el sitio web, más
necesitaremos.

En una web docente incluiremos materiales escritos (apuntes, exámenes, documentación,...)

que debemos recopilar para organizarlos. Es conveniente que el material adopte un formato
lo más parecido para que se identifique con la web. Igualmente, debemos decidir si el
material será visible on-line o habrá que descargarlo previamente (se usan normalmente los
formatos zip y pdf)

4. Crear la estructura de directorios. Una vez que hemos organizado nuestras ideas y recopilado el material
necesario para la web, es el momento de organizar los contenidos en un sistema de archivos y directorios de
forma ordenada. A este proceso se le llama mapeado del sitio web. Este trabajo es una parte esencial en la
planificación del sitio web, ya que nos ayudará a especificar las trayectorias correctas de los enlaces, imágenes y
documentos que vayamos a incluir en la web.
Para ayudarnos a visualizar la estructura de directorios, es recomendable dibujar una especie de organigrama en el que
vayamos colocando los directorios en función de su importancia desde un nivel superior a otros inferiores.
 5. Crear un guión. Es el momento de hacer un bosquejo de la página principal y de cada página que esté enlazada
a ésta, incluyendo todos los elementos que creamos necesarios (texto, imágenes, botones, hipervínculos,...) sin
preocuparnos demasiado por los ajustes, es simplemente un esquema. Es importante recordar que los visitantes
de una web no lo van a leer completamente sino que lo que desean es encontrar rápidamente lo que les interesa,
por lo que habrá que establecer una estructura adecuada de enlaces entre las páginas. El movimiento de un
lado a otro del web debe ser lo más intuitivo posible para facilitar el trabajo del visitante. Un sitio web en el que
sea difícil encontrar aquello que buscamos será abandonado rápidamente.
6. Desarrollo del aspecto externo. El siguiente paso será la representación visual del sitio web. Es esencial la
combinación de color, gráficos, tipos y texto que nos ayuden a expresar lo que queremos comunicar con estilo e impacto.
Los editores de páginas web incluyen recursos que ayudarán a los no especialistas en diseño a conseguir una estética

¿Qué debemos tener en cuenta al desarrollar la apariencia de un sitio web?

Espacio y equilibrio. Cantidad de espacio que los elementos de la página ocupan, así como la cantidad de
espacio vacío y cómo equilibrar todo esto. Normalmente a los diseñadores les gusta ver abundante espacio en
blanco entre los elementos, lo cual facilita la legibilidad y no agobia la vista.
Color. Dependiendo del tipo de web incluiremos colores brillantes o suaves. En el caso de una web docente, es
preferible colores suaves que faciliten la navegación y lectura de la documentación

Tipo de letra. Añade personalidad al sitio web. Es preferible no incluir muchos tipos de letra en una página web
Formas. En casi todas las páginas webs se emplean rectángulos para colocar las cabeceras de página,
titulares,... Pero podemos emplear cualquier otra forma geométrica que nos ayudarán a crear un sitio con
personalidad
Textura o gráficos de fondo. Hay que asegurarse de que el texto sea claro y fácil de leer
Consistencia. Emplear por todas las partes un mismo esquema de colores que facilite la navegación
adecuada.

2) Qué hacer y no hacer en el diseño web

Hay que tener en cuenta que hay que captar la atención del lector en un breve espacio de tiempo, por lo que habrá que
tener cuidado con el aspecto de la web, la velocidad de carga y todos los factores que hagan la visita más agradable a la
web.

Sugerencias:
Colocar un título corto, descriptivo y preciso.

Proporcionar pistas sobre el contenido en la parte superior de la página. No suponer que alguien va a
desplazarse hasta la parte inferior.

Si la página ocupa más de tres "pantallas", dividirla en más de una página

Equilibrar el espacio en blanco, las imágenes grandes y pequeñas, los bloques de texto para dotar a la página
de interés y variedad.

Usar un color para el texto y enlaces que complemente al del fondo, en lugar de que se confundan con él.

No crear dos enlaces con el mismo nombre que lleven a sitios diferentes o dos enlaces con diferentes
nombres que lleven al mismo sitio

Ofrecer siempre una forma de retornar a través de un enlace a la página principal

Evitar generalidades como "¡Haga clic aquí!"

Emplear imágenes comprimidas en los formatos adecuados

Emplear vistas en miniatura como enlaces a imágenes mayores.

 Recordar que el acceso a Internet se realiza por diferentes navegadores

Mantener nombres de archivos cortos

Informar a la gente del tamaño de los ficheros descargables

Obtener el permiso necesario para emplear texto o imágenes creados por otros

Crear un enlace con la dirección de correo del webmaster

Procedamos a instalar FrontPage

1) Vistas en FrontPage

Cuando abrimos FrontPage lo primero que nos encontramos es que tiene una apariencia similar a los programas de la
familia Office, con barra de título, de menús, herramientas muy similares.
Tenemos en FrontPage la posibilidad de alternar entre las diferentes vistas (Diseño, Dividir, Código y Vista Previa) a
través de las solapas de la parte inferior de la ventana.
1) Vista Diseño: En esta opción vemos la página web en formato WYSIWYG ("What you see is what you get" , "Lo que
ves es lo que obtienes". Para diseñar la página web colocamos el texto, imágenes y demás elementos de la misma forma
que lo veremos en Internet.
2) Vista Dividir: En esta opción vemos la página web en dos partes, en una la vemos en formato WYSIWYG y en la otra
vemos el Código HTML lo que nos va a servir para interpretar las modificaciones en el código que realiza cualquier
acción del Frontpage.
3) Vista Código: Podemos visualizar el código HTML si queremos retocarlo para hacer algo que no podamos con
FrontPage o para insertar código HTML que hemos descargado de Internet. En esta vista es necesario conocer los
fundamentos y la estructura del lenguaje HTML para poder intervenir en él sin errores.
3) Vista previa: Aquí podremos comprobar como se visualizará nuestra página en el navegador. Es importante advertir
que al utilizar FrontPage, al activar Vista previa se verá la web en el Internet Explorer de Microsoft y éste presenta
algunas diferencias de presentación de páginas con los demás navegadores como Firefox.

2) Formatos de texto e imágenes

Para añadir texto a una página, simplemente hay que abrirla y comenzar a teclear en la vista página, o
bien copiar y pegar un texto de archivo de texto. El funcionamiento es exactamente igual que el de
un procesador de textos.

Los párrafos en HTML tienen una diferencia con los

párrafos en documentos de texto y es que no son la
unidad estándar de formato sino que se trata de una
unidad visual de elementos separados en una página,
donde estos elementos son texto, imágenes o cualquier
cosa.

En la vista página la inserción de un salto de párrafo se consigue pulsando Intro. En cambio, si lo que queremos
es un salto de línea lo haremos a través del menú Insertar, Salto de línea o con la combinación de teclas Mayús
+ Intro. Cuando queremos hacer un salto de línea nos aparece la siguiente ventana para configurarlo

Salto de línea normal: Inserta un salto de línea entre la imagen y el texto

Hasta el margen izquierdo: Mueve la siguiente línea de texto hacia abajo hasta que quede el margen
derecho libre para la imagen
Hasta el margen derecho: Mueve la siguiente línea hacia abajo y hacia la derecha
Hasta ambos márgenes: Mueve la siguiente línea de texto hacia abajo hasta que quedan libres ambos
márgenes para la imagen.
Alineación de párrafos:

Por defecto se alinean con el borde izquierdo de la ventana, pero se puede cambiar su alineación a través
de los botones de la barra de herramientas

Alineación derecha - centrada - izquierda - justificada

Es frecuente la utilización de algunos símbolos, conocidos como caracteres especiales. A menudo

emplearemos los símbolos ® (registered), © (copyright) y otros más que podemos encontrar en el menú
Insertar, Símbolos.

Corrección ortográfica

Al igual que con cualquier procesador de textos, una vez hayamos editado nuestra página es
imprescindible que pasemos el corrector ortográfico para detectar posibles errores y evitar la mala imagen
que causa una web con faltas gramaticales y de ortografía. Para ello, seleccionamos el menú
Herramientas, Ortografía.

Formato de texto

Modificar el formato de texto se hace de forma similar a un procesador de textos. A partir de la barra de
herramientas Formato podemos modificar el tipo y tamaño de la fuente, ponerla en negrita, cursiva o
subrayado, cambiar el color o el relleno de la fuente

Numeración y viñetas

Para hacer esquemas numerados tenemos la misma herramienta que en los procesadores de textos.
Podemos hacer esquemas con viñetas y con números y lo haremos a través de los iconos
correspondientes en la barra Formato o a través del Menú Formato, Viñetas y numeración.

TRABAJO CON IMÁGENES

Una Web está compuesta por mucho más que simple texto. Un sitio web se diseña para ser gráfico, en el
cual vamos a añadir imágenes, tanto estáticas como dinámicas. Podemos añadir imágenes prediseñadas
de FrontPage, imágenes que tengamos guardadas en el disco duro o imágenes de Internet.
Es fundamental conocer que las imágenes deben estar en formato GIF o JPEG para poder ser visualizadas
por la mayoría de los navegadores. Las características de ambos formatos son las siguientes:

Apropiado para logotipos y está comprimida de forma que no pierde definición. El máximo
número de colores que soporta es de 256. Admite la propiedad de transparencia, que permite
GIF
que las imágenes compartan el mismo color de fondo de la página. Igualmente se pueden
crear los GIF animados como sucesión de diferentes imágenes.
Apropiado para imagenes complejas y para fotografía. JPEG comprime y destruye parte de la
JPEG
información de la imagen. Soporta hasta 24 bits de colores y no admite transparencias.

Para insertar una imagen podemos hacerlo a través del botón de la barra de herramientas Estándar

Haciendo clic en este botón insertaremos una imagen desde una carpeta de nuestro disco duro. Es
muy importante guardar todas las imágenes en una carpeta independiente de donde guardamos los
archivos html.

Una vez que la imagen está en la página podemos cambiar algo en élla, como la alineación, el tamaño, el
borde e incluso añadir un texto que aparecera cuando situemos el ratón encima de la imagen. Para ello
haremos clic en el botón derecho de la imagen para que nos aparezca la siguiente pantalla.

imagen insertada Ventana de propiedades de la imagen

UTILIZACIÓN DE DIVISORES

Los divisores son líneas horizontales que emplearemos para

situarlos debajo e las cabeceras, entre las partes de un
artículo o en cualquier lugar que deseemos. Existen dos
tipos de divisores: reglas horizontales (<hr> en lenguaje
HTML; Insertar, Línea horizontal en FrontPage) y gráficos
que parecen líneas.

Para insertar un divisor pulsamos en el menú Insertar, Línea

horizontal. Posteriormente podemos cambiar las propiedades
de dicha línea (anchura, altura, color, sombreado,...) pulsando
con el botón derecho del ratón al divisor de forma que nos
aparezca esta pantalla.
UTILIZACIÓN DE FONDOS

El color de fondo en una web es fundamental desde el punto de vista del diseño, hay que elegir fondos con
colores simples y armoniosos, que "no hagan daño a la vista". Seguramente pocos aguantaríamos
visualizar una web con un fondo naranja chillón y texto verde brillante.

Para establecer el color de fondo de una página, nos situamos en la vista normal y allí seleccionamos
Formato, Fondo o con el botón derecho del ratón en la página que estamos creando, activar Propiedades
de página hasta llegar a la siguiente ventana:

En esta ventana podemos modificar diferentes aspectos de la página:

1. Colores de fondo, texto y de los hipervínculos

2. Si queremos colocar una imagen como fondo de la web y si queremos añadirle una marca de agua,
para que aparezca en el fondo de forma estática.

INSERTAR IMÁGENES EN UNA PÁGINA

En una página podemos insertar imágenes en cualquier lugar, pudiendo incluir en ellas hipervínculos a
otra página o a una dirección web o cuenta de correo electrónico. En FrontPage para incluir una imagen lo
podemos hacer de dos formas:

En el menú Insertar, Imagen podemos seleccionar una imagen prediseñada de FrontPage o una imagen que
contenga nuestro disco duro. Nos aparecen las siguientes ventanas:

Otra forma de insertar una imagen es a través del botón Insertar imagen que está en la barra de
herramientas estándar. El resultado obtenido es el mismo que haciéndolo de la otra forma.

Una vez que hemos insertado una imagen podemos cambiar sus propiedades haciendo clic con el botón
derecho en la imagen y seleccionando la opción Propiedades de Página aparece el siguiente cuadro de
diálogo:
Podemos modificar el origen de la imagen, eligiendo el archivo GIF o JPG que se corresponde con el
que queremos insertar en la web. Podemos darle a la imagen GIF la propiedad de transparente,
añadir un texto que se mostrará cuando situemos el ratón encima de la imagen (en forma de etiqueta
amarilla) y especificar un hipervínculo.

Es habitual incluir en una web imágenes que hagan más agradable la visita a la página además de que son
imprescindibles en el entorno gráfico web. En Internet podemos encontrar todo tipo de imágenes:
fotografías, dibujos, imágenes animadas, etc, que podemos encontrar a través de los buscadores como
Google, que incorpora un buscador de imágenes donde utilizando las mismas técnicas de búsqueda
podemos encontrar todo tipo de fotografías e imágenes.

Es imprescindible tener en cuenta el tamaño de las imágenes que vayamos a incluir en una página web ya
que cuanto mayor sea supondrá un tiempo de carga superior de la página y esto puede llevar al visitante
a abandonar la web dependiendo de la conexión que tenga. Los formatos utilizados para las imágenes son
GIF y JPEG por su adecuado grado de compresión y ser visibles por todos los navegadores. FrontPage no
es programa de retoque de imágenes, pero dentro de la familia de Microsoft Office existe PhotoDraw.
Otros programas de tratamiento de imágenes son los siguientes:

Adobe Photoshop: Uno de los programas más utilizados. Tutoriales y trucos

Corel Draw: Otro programa muy completo. Tutoriales y trucos
UltimateFX: Gratuito y muy sencillo de manejar. En Ciberconta podemos descargarlo y
consultar un tutorial

Una vez que hemos añadido a una página texto, imágenes y modificado el fondo a nuestro gusto ya
podemos decir que tenemos una página web vistosa, pero nos queda por añadir la pieza fundamental en
una Web: LOS VÍNCULOS

2) Inserción de componentes

Con FrontPage podemos añadir componentes para que sea más atractivo, más interactivo o proporcione

más información. Estos componentes los podemos seleccionar a través del menú Insertar, Componente
Web donde nos aparece la siguiente ventana y allí seleccionar el componente que queramos, aunque hay
que advertir que para tener la seguridad de su correcto funcionamiento debemos tener alojada la web en
un servior con las extensiones Frontpage instaladas.
• Efectos dinámicos, como una marquesina o un botón interactivo
• Búsqueda en la web
• Hojas de cálculo y gráficos
• Contador de visitas
• Galería de fotografías

• Contenido incluido
MARQUESINA
Consiste en un texto que fluye a lo ancho de la página,
aunque con otros formatos como los GIF animados o
Flash se pueden conseguir efectos mucho más logrados y
atractivos. El efecto es el siguiente:

BOTONES INTERACTIVOS

Consiste en crear un botón al que haciendo clic va a

realizar una determinada acción. Se puede configurar el
formato del botón, la imagen, utilizar una
transparencia,... y todo de forma muy sencilla. Es una de
las mejoras sustanciales respecto a Frontpage 2000, ya
que con la versión antigua se generaba un applet de Java y aparte de ralentizar bastante el acceso a la
página podía no ser visible en los ordenadores que no tuvieran Java instalado. Nos aparece la siguiente
ventana para configurar el botón.

Podemos modificar el texto del botón, añadirle un vínculo, modificar colores, medidas y efectos. Un
ejemplo de este botón sería el siguiente:

• BÚSQUEDA EN LA WEB

Se puede introducir un cuadro de búsqueda pero es mucho más eficiente incluir en nuestra web el
cuadro de búsqueda que nos proporciona Google de forma gratuita y que se coloca de forma más
sencilla.

• CONTADORES DE VISITAS

Si queremos conocer cuánta gente visita nuestra

web será conveniente instalar un contador.
FrontPage nos proporciona un contador con
diferentes formatos, pero hay que tener en cuenta
que el servidor donde tenemos alojada la página
deberá tener instaladas las extensiones de
FrontPage para que se vea en Internet. Cuando lo
insertamos nos aparece la siguiente ventana, en la
que podemos elegir el formato del contador.

• FECHA Y HORA (Insertar, Fecha y hora..)

Normalmente se introduce en una web la fecha de la última actualización para informar al visitante
de la web. En el momento en que actualicemos la página la fecha cambiará. Es un componente
muy útil y casi necesario en una web.

GALERÍA DE FOTOGRAFÍAS

La última versión de Frontpage incluye también una

herramienta para elaborar páginas web del tipo de galería
fotográfica. Aunque para esto tenemos otras herramientas más
útiles y completas en programas de retoque fotográfico como
Photoshop y Picasa.