1

Cómo hacer páginas web con Word

¿Para qué quiero una página web?

Hoy día, cada vez más, en todos los ámbitos de la sociedad, existe una tendencia generalizada a que todo el mundo tenga una página web. Es, sin duda, una forma de comunicación de moda que se sitúa a caballo entre las otras formas de comunicación tradicionales: oral, escrita, gráfica... Estamos ya llegando a ese momento en que áquel que no disponga de su espacio virtual con dirección (lo que técnicamente se denomina URL) será, es, un analfabeto tecnológico. Una web es, en realidad, un escaparate, una carta de presentación de quiénes somos, qué hacemos, qué proyectos tenemos, qué vendemos o qué compramos, qué queremos... y todo lo que se nos ocurra dar a conocer al resto del mundo. Porque, eso sí, internet ofrece un escaparate mundial para todo aquello que deseemos. Pero en definitiva, y con el fin de desmitificar la “fabricación” de webs, hemos de decir que una página web no deja de ser un texto “enriquecido” con informaciones asociadas de diversa índole: los llamados hipervínculos, que no son sino enlaces a otros documentos y/o archivos de texto, imágenes, sonido, archivos de vídeo, gráficos... Desde estas líneas queremos acercar la posibilidad de hacer páginas web a todos, desde los más jóvenes, hasta los más veteranos; desde los que empiezan a manejar un ordenador hasta los que ya son usuarios más avanzados. Por ello, para el diseño de nuestra web, partiremos de una herramienta cercana, al alcance de cualquier usuario con un nivel básico de ofimática: el programa Microsoft Word, el cual, ya desde su versión 95, dispone de la posibilidad de editar una página en formato .html, es decir el lenguaje que se usa para crear las páginas web.

Además el hecho de guardar los documentos de Microsoft Word 2000 como páginas Web es una solución ideal e inteligente para compartir documentos con otros miembros de una comunidad que poseen diferentes plataformas o sistemas operativos y software de procesador de textos. Los compañeros de grupo con los que haya de compartir información, únicamente necesitarán un explorador (Explorer, Netscape, Opera...) para ver los documentos; tanto el formato como la apariencia de los documentos se conservarán independientemente del ordenador que tengan, del sistema operativo o del programa de tratamiento de textos.

Algunas consideraciones previas: La “usabilidad”

Toda página Web tiene una componente estética y de diseño importante: fondo de la página, tipos y colores de letra, márgenes, distribución de espacios, imágenes, etc. Generalmente, si se carece de algunos criterios básicos de diseño y buen gusto, se corre el riesgo de comenzar a utilizar “cuantos más recursos mejor”, resultando, la mayoría de las veces, páginas con multitud de colores, múltiples tipos y colores de letras, márgenes descompensados, tipografías ilegibles (por el tamaño o por el tipo en sí) Y es que los recursos existentes hoy día para diseñar una página web son muchos: los actuales programas editores ofrecen la posibilidad de modificar el color del fondo, cambiar el tamaño y el color de las letras, incorporar marcos (frames), incluir gráficos fijos o animados. Además, existe una gama de recursos adicionales : sonido, video, subprogramas Java ...

Muchas veces, sin embargo, estos recursos se utilizan con poco criterio práctico y pedagógico y en ocasiones sin ningún propósito concreto.

2

Por ello creemos importante hacer algunas consideraciones previas sobre lo que se ha dado en llamar “usabilidad”, que es un término acuñado, como no, en Estados Unidos, por Jacob Nielsen, a quien algunos expertos han llamado "el hombre más inteligente de la red".

Nielsen ha pasado los últimos años analizando los hábitos de los usuarios de Internet de forma estadística y científica, y ha llegado a importantes conclusiones sobre lo que SÍ y lo que NO se debe hacer al diseñar una página.

Aquí sintetizamos las más importantes recomendaciones de Nielsen, que no son una verdad absoluta, pero sí buenos criterios que podemos tener en cuenta a la hora de diseñar nuestra página:

1) Evite usar marcos (frames). Los marcos pueden parecer atractivos, pero tienen muchos inconvenientes: reducen el campo de lectura, sus páginas interiores no pueden grabarse entre sus favoritos, la impresión resulta complicada y la predictibilidad de qué sucederá cuando se presiona un "link" se esfuma.

2) No use tecnología innecesaria. Nielsen ha comprobado que los usuarios simplemente detestan páginas que requieren programas extra (plugs-in) de audio, video, subprogramas Java, Active-X o Vextreme para que una página funcione correctamente. En la mayoría de los casos, estas tecnologías no aportan nada especial, incrementan el tiempo de bajada y frecuentemente hacen que versiones antiguas de navegadores colapsen.

3) Cuidado con las animaciones. Todas esas flechas, textos, dibujos y gráficos que se mueven, brillan y cambian de forma constantemente... ¿Atraen usuarios? Según Nielsen NO. Por el contrario, las imágenes que se mueven constantemente confunden al usuario, porque presionan sobre su visión periférica y le obstaculizan la lectura de lo que es importante.

4) Procure simplificar su URL. El URL (Universal resource locator) es la dirección que debe escribir un usuario para llegar a su página en el web. Muchas veces las páginas católicas no cuentan con los recursos para contratar un servidor; pero el precio de alojamiento de páginas, especialmente en servidores norteamericanos, están bajando cada vez más, haciendo cada vez más posible contar con una dirección (domain) propia. En la medida de lo posible, es preferible evitar instalar direcciones en servidores gratuitos como geocities, angelfire y otros, porque además de proporcionar direcciones imposibles de recordar, abren una ventana de propaganda que, además de ser desagradable, reducen la velocidad de transmisión y hacen colapsar los navegadores de usuarios que navegan con más de una ventana abierta. El URL ideal es siempre www.(su institución).org. Pero si esto no es posible, por lo menos evite usar direcciones que requieran mayúsculas y sobre todo, NUNCA use el carácter "~", pues mucha gente no sabe cómo escribirlo.

5) Cuidado con las páginas innecesarias o "huérfanas". Una página de bienvenida que obliga a hacer un nuevo "click" para dar con el contenido es algo que, según Nielsen, los usuarios soportan sólo la primera vez. Una página de más se justifica muy pocas veces; como cuando un sitio web ofrece numerosas alternativas simultáneas, por ejemplo, varios idiomas. Es necesario evitar también las páginas "huérfanas". Asegúrese que sus páginas interiores orienten a los usuarios sobre dónde se encuentran y cómo pueden retornar a la página principal.

6) Prefiera páginas cortas. Nielsen ha detectado que la capacidad de lectura de los usuarios en el web está aumentando, pero insiste en que las páginas no deben ser muy largas. Es mejor hacer un link a una continuación.

3

7) ¿Música de fondo? Algunos quieren dar la bienvenida a su página con música de fondo (usualmente un archivo en formato MIDI) Muchos aprecian el gesto, pero después de pocos segundos, el sonido puede volverse molesto. Además, para alguien que navega de noche o en un lugar público, la música de fondo de una página puede resultar incómoda, cuando no embarazosa. Lo mejor es que los archivos musicales sean opcionales.

8) Evite poner condicionamientos. No diseñe su página para que se vea mejor con un navegador que con otro, sea Netscape o Internet Explorer. Tampoco ate el diseño de su página a un determinado formato de pantalla (640x480, 720x480 o 800x600) Procure que su página sea lo más universal y abierta posible.

9) Actualice la información. Es importante actualizar la información de su página, especialmente si se trata de una página oficial. La página de una diócesis, una congregación o una parroquia, por ejemplo, no puede estar desactualizada en términos de sus autoridades, sus documentos más recientes, etc. No hay que olvidar que una página es una fuente de información. Si no la proporciona, ésta pierde parte importante de su razón de ser.

10) Rapidez ante todo. Una página no debe demorar en bajar. Recuerde que los múltiples gráficos demoran enormemente el tiempo de bajada de una página. Un usuario paciente esperará que baje una primera vez, pero luego no regresará. Las páginas web no son libros que requieren tapas vistosas. Son ante todo recursos que deben proporcionar material útil.

11) Atención al diseño. Que las páginas sean recursos prácticos no significa que debe descuidarse el diseño. Es fundamental compatibilizar la practicidad con la buena presentación. Entre otros detalles, uno importante es el de la compatibilidad. Las páginas interiores no pueden tener diseños radicalmente diferentes a la principal. Todo el website, en ese aspecto, debe conservar la coherencia. Nielsen sugiere no cambiar fondos de página, tipo de letra, etc.

12) Servicios sobre novedad. Nielsen descubrió en una reciente investigación, que los usuarios de Internet han comenzado a ser más "conservadores" y a perder el entusiasmo por nuevos programas. Por eso, es recomendable mejorar los servicios que da una página en vez de preocuparse tanto por incorporar nuevas tecnologías.

Finalmente, una vez más, ninguno de estos principios es absoluto, pues la naturaleza de algunas páginas puede requerir alguna de estas variables. Lo importante es que la forma contribuya al fondo de lo que se quiere comunicar.

Manos a la obra:

Vamos a explicar la manera de hacer una página web de forma sencilla a partir de tres niveles de gradación de la manera más simple para empezar, sin grandes pretensiones, para, paulatinamente ir avanzando hasta el tercer nivel en el que conseguiremos una página más “refinada” y completa.

1.- El Primer paso, la manera más simple:

A partir de un documento de Word ya creado, para convertirlo en un documento .html osea, una página Web, basta con seguir los siguientes pasos:

4

En el menú Archivo, haz clic en Guardar como página Web.

1. En el rectángulo superior Guardar en, escribe o selecciona el nombre de la carpeta donde quieres guardar el archivo.

2. En el campo Nombre del archivo, escribe o selecciona el nombre del archivo.

3. En el campo Guardar como tipo, selecciona Página Web.

4. Finalmente haz clic en Guardar.

Ya tenemos la primera página web... ahora habrá que crear el resto de las páginas, enlazarlas, añadir otros enlaces a otras páginas web; incluir imágenes y color,

o sonidos... en definitiva, hemos dado el primer paso pero ahora hay que continuar adelante para concluir la tarea.

2.- Una página digna con lo básico:

Vamos a seguir paso a paso el proceso para la creación de nuestra página:

1°) Crea una carpeta con tu nombre en tu disco duro o en el mismo escritorio de Windows. Aquí es donde almacenaremos todos los archivos asociados a nuestra página web.

a. Pulsa el botón derecho del ratón b. Selecciona la opción "nuevo" c. Selecciona la opción "carpeta" d. Ponle nombre a la carpeta

2°) Crea un archivo nuevo con Word.

3°) Guarda el archivo como HTML en la carpeta creada en el primer paso:

a. Menú Archivo b. Selecciona la opción "Guardar como HTML..." c. Selecciona tu carpeta d. Ponle nombre al archivo

4°) Selecciona un fondo para la página

a. Menú Formato / Fondo... b. Haz clic en “Efectos de Relleno...“ c. Selecciona el tipo de fondo de tu agrado: Degradado, Textura, Trama o Imagen.

5

5°) Ahora elige una fuente, tamaño y color de letra adecuada para el fondo seleccionado: procura que sea bien legible, que el color resalte del color de fondo elegido y que no haya demasiada variedad tipos.

6°) Escribe un título para tu página.

7°) Inserta una imagen prediseñada.

a. Menú Insertar / Imagen / Prediseñada b. Haz clic en la categoría preferida c. Elige la imagen que quieras insertar haciendo un doble clic sobre ella o sobre el

primer icono que se abre sobre ella. d. Cierra la ventana “insertar imagen“ e. Al volver a tu página web, redimensiona la imagen y ubícala en el lugar correspondiente.

8°) Haz un diseño básico de tú página en un borrador: Normalmente todas las páginas web tienen una página principal con menús y un conjunto de otras páginas que estarán "vinculadas" con este menú.

6

3.- Hipervínculos

Los hipervínculos son textos o gráficos sobre los cuales se puede hacer clic para enlazar con un archivo, una parte determinada de un archivo, una página HTML, o hacer un enlace para enviar un correo electrónico.

HIPERVÍNCULO A UNA PARTE DE UN ARCHIVO

Se pretende que al hacer clic en un hipervínculo se vaya a un lugar determinado del documento. Resulta útil para crear un índice al principio de los documentos largos, que permita ir directamente a cada uno de sus apartados.

La construcción de este tipo de hipervínculos considera dos fases:

a). Crear un marcador.

b). Crear el hipervínculo

Proceso:

1°) Haz clic en el lugar o posición donde deseas poner un marcador

2°) Inserta un Marcador en el lugar en que deseas que vaya la página al hacer clic...

a) En el Menú Insertar hace clic en la opción Marcador... b) Escribe el nombre del marcador o selecciona el nombre de uno en la ventana: c) Haz clic en el botón agregar de la ventana anterior

3°) Selecciona el texto que quieres que aparezca en el vínculo 4°) Establece el Hipervínculo entre el texto seleccionado y el marcador correspondiente:

7

a) Menú Insertar, opción Hipervínculo b) Haz Clic en el botón Marcador. c) Aparecerá un cuadro de diálogo “Seleccionar

lugar en el documento” y en él seleccionaremos el nombre del marcador correspondiente definido con anterioridad. Acto seguido hacemos clic en el botón Aceptar.

d) Haz nuevamente clic en el botón Aceptar.

HIPERVÍNCULO CON OTRO ARCHIVO

En este caso es necesario que realices los siguientes pasos:

1°) Crearás previamente el archivo o archivos nuevos, con formato HTML, y guardarlo/s con el nombre correspondiente en tu carpeta (la misma carpeta que hemos creado al principio) 2°) En el documento originario escribe el texto que quieres que aparezca en el vínculo. 3º) Ve al menú Insertar: Hipervínculo. 4°) Haz clic en el botón Archivo. 5°) Selecciona en tu carpeta el archivo con el cual deseas hacer el hipervínculo.

6°) Haz clic en el botón Aceptar, en la pantalla anterior y luego nuevamente en Aceptar en la pantalla que te aparecerá después.

HIPERVÍNCULO CON UNA PÁGINA WEB

1°) Selecciona el texto con el cual deseas hacer el hipervínculo. 2°) Elige la opción Hipervínculo del menú Insertar. 3°) En la ventana correspondiente “Escriba el nombre de la página Web” con la cual deseas hacer el vínculo y a continuación pulsa en el botón “Página Web”. Por ejemplo: http://www.ciberespiral.org 4°) Haz clic en el botón Aceptar, de la pantalla anterior

8

HIPERVÍNCULO CON UN E-MAIL

Para que cuando el usuario haga clic en el enlace de correo electrónico la página web le remita al correo que nos interese debes hacer lo siguiente:

1°) En tu página de inicio escribe tu nombre, tu dirección de correo electrónico o bien inserta una imagen que represente el correo: un buzón, un cartero, una

arroba... 2°) Selecciona el nombre o la imagen insertada de tu dirección de correo. 3°) Una vez más elige la opción “Hipervínculo” del menú Insertar. 4°) En la columna de la izquierda, debajo de "Vincular a...", selecciona “Dirección de correo electrónico” y en el campo correspondiente escribe la dirección de tu correo, después de la palabra mailto: que aparecerá automáticamente. Por ejemplo: mailto:jmunozmi@uoc.edu

5°) Haz clic en aceptar.

¡Ya está lista tu primera página web!

4.- Para hacer páginas más que dignas: Detalles importantes para mejorar la calidad de tu página: La versión del programa Word explicada en este artículo es la de Word2000, fundamentalmente porque ha tenido avances importantes respecto de Word97 en la edición de páginas Web.

9

En primer lugar podríamos decir que el lenguaje de construcción de las páginas web, el HTML, ha sido integrado completamente dentro de Word2000. Tenemos disponible un asistente para la creación de páginas web, también hay facilidades para el uso de marcos o "frames", así como para trabajar con hipervínculos. Ahora existe mayor compatibilidad entre las tablas Word y las tablas web, hay disponibles nuevos formatos de bordes y líneas horizontales. Además podemos ver el aspecto que tendrán nuestras páginas en un navegador con la opción de vista "Diseño web" sin tener que salir de Word. Por supuesto cuando escribimos páginas web con Word2000 no tenemos que preocuparnos del código HTML, Word2000 inserta automáticamente las etiquetas necesarias. Podemos escribir nuestro documento en formato Word y una vez finalizado sólo tendremos que convertirlo a HTML, como ya sabemos. Pero también se puede trabajar directamente con HTML, sin tener que utilizar el formato de Word (.doc). Por esto, y algunas otras cosas, decíamos que el lenguaje HTML ha sido integrado dentro de Word2000.

Consideraciones técnicas sobre el diseño de páginas web.

Conviene no hacer las páginas demasiado grandes, cuanto más grandes más tardarán en cargarse y el usuario se puede cansar de esperar e irse a otra página. Entre 20 y 30 Kb. es un buen tamaño.

Hay que tener en cuenta que la ventana del navegador puede cambiar de tamaño según el monitor con que se este visualizando la página web. Es mejor utilizar dimensiones relativas (en porcentaje) que absolutas ( en pixels)

Conviene utilizar tablas para contener las diferentes partes de la página y lograr que se situen en el sitio que más nos interese.

Utilizar formatos gráficos que permitan comprimir la imagen como JPG, GIF y PNG.

Si queremos insertar una imagen no prediseñada, conviene copiarla previamente en la carpeta donde almacenamos nuestra web, y hacer el enlace desde esta ubicación.

Facilitar la navegación con índices y flechas para avanzar y retroceder.

El título de la página Web Este título no tiene nada que ver con el nombre del documento Web que damos cuando guardamos nuestro archivo. Aquí nos referimos al propio título de la página Web. Este título es el que se verá en la barra de direcciones y en lista de Favoritos desde un navegador, ( cuando se guarde nuestra página en Favoritos), y también el título que se suele ver cuando un buscador lista nuestra página. Puedes asignar el título al guardar la página en el menú Archivo, Guardar como página web, haz clic en el botón Cambiar título, aparecerá un cuadro de diálogo en el que introducir el título. También se puede modificar el título en cualquier momento con el menú Archivo, elige Propiedades y en la solapa General tienes un campo Título que puedes modificar.

Cuidado al convertir a HTML:

Cuando convertimos un documento Word a HTML hay algunas características de formato que no están disponibles en HTML y, por lo tanto, no serán visibles al visualizar

10

el documento en el navegador. Por ejemplo, las letras en relieve, los efectos sobre caracteres, el doble tachado y el contorno no tendrán ningún efecto sobre los caracteres en HTML, es decir, que en HTML estas características de formato desaparecen.

Cuando guardas un documento de Word, obtienes un único fichero. En cambio, al guardar como página Web, obtienes un fichero principal pero también otros adicionales de forma automática, sin que tengas que hacer nada. Por ejemplo, las imágenes se graban aparte, de ordinario en formato gif. o .jpg. Así el documento principal no incluye las imágenes, sino sólo la llamada a esos ficheros. Son imágenes incrustadas en tu página. Naturalmente al enviar la página Web a tu proveedor de Internet debes remitir tanto el fichero principal como los demás ficheros que se han creado en tu carpeta (en el ejemplo expuesto, ficheros de imágenes), así como las carpetas que se te han creado dentro de tu carpeta principal (que incluirán también imágenes, fondos, barras... y otros objetos que has insertado en tu web).

Hay otras características de formato que varían de aspecto en HTML, por ejemplo, todos los estilos de bordes de las tablas y cuadros de texto son vistos en HTML como borde simple; el texto en varias columnas es convertido en una sola columna; las notas al pie son desplazadas hasta el final de la página HTML; la alineación de los gráficos y tablas respecto al texto también puede variar ligeramente; el texto en vertical es convertido en texto horizontal. Por último, hay algunos elementos que desaparecen en HTML, por ejemplo, los números de línea, los encabezados y pies de página y los márgenes de la página. Para ayudarnos a obtener un buen resultado, conviene destacar una buena opción de Word2000 apropiada para acabar nuestra página web con corrección y con un buen aspecto. Se encuentra en Formato / Temas. Esta opción ofrece conjuntos de fondos, tipos de letra, estilos, líneas horizontales, viñetas, etc., armonizados con gusto. El usuario dispone de 68 temas para elegir. Pero los temas añaden otra característica: rompen con la paginación. Ordinariamente Word tiene en cuenta la paginación. Así por ejemplo, una imagen sale en una página o en la siguiente, pero no a caballo. De la misma manera, resulta poco estético poner como última línea de una página un titular, que se desarrolle en la página siguiente (es lo que se denomina las líneas viudas y huérfanas). Al dar formato a un documento teniendo en cuenta la paginación, el hecho de añadir o suprimir después párrafos o imágenes puede descabalar el documento y es necesario revisar su presentación final. Pues bien, los temas eliminan estos problemas. Van orientados a documentos que se van a consultar preferentemente en pantalla, como las páginas Web. Puesto que se está creando un documento que se va a leer en pantalla, no tiene sentido la división en páginas. Se crea un documento continuo. Puedes poner las imágenes donde quieras, despreocuparte de la posición de los titulares respecto del principio o fin de página. Se trabaja como en un papel continuo de verdad, insertas y borras sin que nada se desajuste. Y como recomendación final, repasa las recomendaciones de Jacob Nielsen y no seas barroco, no recargues las páginas, te evitarás problemas de descompaginación y ganarás en funcionalidad, agilidad y calidad, en definitiva en usabilidad.

¡No te cortes!: Utiliza el asistente para páginas web Para acabar tan sólo queremos recordar esta herramienta de la que disponemos en Word y que nos facilita la realización de páginas web estándar: el asistente para la creación de páginas web. Es una buena herramienta, sencilla, útil y práctica, utilicémosla...

11

Al abrir un nuevo documento desde Archivo/Nuevo aparece una ventana con varias pestañas, si hacemos clic en al pestaña Páginas Web, aparece la pantalla de la imagen inferior, en la que podemos arrancar el Asistente para páginas Web. Este Asistente tiene un funcionamiento similar a los demás asistentes de Word y nos permite ir creando nuestra página web paso a paso. En la imagen podemos ver la primera página del Asistente con los cinco pasos de que consta: Título y ubicación, Desplazamiento, Agregar páginas, Organizar páginas, Tema visual.

A partir de ahora todo es cuestión de comenzar a practicar, sin miedos, sin prisa pero sin pausa, haciendo realidad el poema de Machado “se hace camino al andar”. ¡Adelante pues y buena página! Juan Miguel Muñoz jmunozmi@uoc.edu Maestro y Pedagogo, especialista en TIC’s y educación