Diseño Web -

Contenido Introducción 2

Lección 1 Páginas principales sin misterios 12

Lección 2 Creación y forma del texto para el Web 26

Lección 3 Creación y utilización de arte en el Web 37

Lección 4 Acopio de utensilios 58

Lección 5 Plan de ataque 80

Lección 6 HTML básico sin misterios 96

Lección 7 Creación de sitios Web con FrontPage 155

Lección 8 Introducción de las páginas Web en el mundo real 213

2

Introducción Ahora más que nunca, los adultos tienen que reinventarse a sí mismos en

muchas ocasiones para estar al día de los grandes cambios que se producen

en el mundo del siglo XXI.

Microsoft® Unlimited Potential (UP) es un programa global centrado en

mejorar el aprendizaje de jóvenes y adultos al proporcionar conocimientos

tecnológicos a través de centros comunitarios de aprendizaje tecnológico

(CTLC). Microsoft cree que fomentando la enseñanza de conocimientos

técnicos podemos ayudar a crear oportunidades sociales y económicas que

ayuden a cambiar las vidas de las personas y a transformar las comunidades.

Al participar en los cursos UP, los alumnos se centrarán en los conocimientos

técnicos que necesitan para utilizar diversas aplicaciones. Todos los cursos UP

enseñan conocimientos tecnológicos de manera práctica que resaltan las

aplicaciones reales de la tecnología, desde informática básica y alfabetización

informática hasta fotografía digital, diseño de páginas Web o software de

productividad.

Los cursos UP están pensados para su uso dentro de la comunidad y en

centros de enseñanza de tecnología, ya sea en el contexto de un aula o para

autoaprendizaje. En el caso de los cursos relacionados con información

introductoria y tecnologías de comunicaciones (alfabetización informática,

Internet, World Wide Web, medios digitales y aplicaciones de productividad),

no se supone experiencia previa con la tecnología o el software.

A quién va dirigido este programa

Todos los cursos del programa Microsoft UP están diseñados para motivar a

los jóvenes y adultos que desean aprender nuevas tecnologías o aumentar

sus conocimientos tecnológicos actuales, ya sea por razones personales o

profesionales. Los cursos tienen en cuenta el hecho de que los adultos suelen

llegar a las experiencias de aprendizaje con una amplia variedad de

experiencias previas, expectativas y conocimientos:

■ Los alumnos comunitarios desean emplear su tiempo y su dinero

sabiamente. Este programa se ha diseñado para prever,

comprender y centrarse en la necesidad de estos alumnos

de una instrucción eficiente y efectiva.

■ Una instrucción bien diseñada tiene en cuenta los conocimientos

previos de los alumnos comunitarios y aporta nuevos

conocimientos. Este programa da cabida a una amplia variedad

de conocimientos y habilidades ya existentes. Cada curso tiene en

cuenta tareas y niveles de conocimientos comunes.

3

■ Los alumnos comunitarios van a aprender y esperan que se les

trate como personas independientes, únicas y capaces. Este

programa puede utilizarse en un aula o como herramienta para

el autoaprendizaje a su propio ritmo.

■ Los alumnos comunitarios, orientados a la acción, esperan que lo

aprendido sea aplicable directamente a sus responsabilidades

profesionales, así como a sus fines personales. Este programa

contiene muchos ejemplos prácticos del mundo real y aplicaciones

diseñadas para atraer a una amplia gama de alumnos adultos.

Por encima de todo, cada curso UP está diseñado para enseñar conocimientos

de tecnología pero siempre teniendo presente el uso de la tecnología para

mejorar las oportunidades individuales, la productividad, la preparación para

el trabajo y la calidad de vida.

Ofertas y objetivos de los cursos

El programa UP cumple los estándares educativos de Microsoft e

internacionales. Como tal, el programa de estudios ofrece los siguientes cursos

introductorios sobre equipos, software y tecnología digital:

■ Conceptos básicos de informática

Este curso ofrece a los alumnos una base sólida de los conceptos

básicos de la informática y los fundamentos de hardware, software,

sistemas operativos, Internet, etc.

■ Conceptos básicos de medios digitales

Este curso enseña a los alumnos cómo empezar con los medios

digitales, incluyendo fotografía digital, audio y vídeo digital.

■ Conceptos básicos de Internet y del World Wide Web

Este curso enseña cómo explorar el Web, utilizar motores de

búsqueda, trabajar con correo electrónico y crear páginas Web.

■ Conceptos básicos de diseño Web

Este curso explica todo el proceso de diseño de páginas Web,

desde los fundamentos de HTML hasta las estrategias para

diseñar y crear un sitio Web completo.

■ Conceptos básicos de procesamiento de textos

Este curso se centra en cómo utilizar un procesador de textos para

escribir y revisar diversos documentos personales y comerciales,

desde cartas y memorandos sencillos hasta documentos complejos

que contienen gráficos y tablas.

4

■ Conceptos básicos de presentaciones

Este curso trata todo lo necesario para crear presentaciones

electrónicas convincentes, desde la creación de presentaciones

con diapositivas básicas hasta cómo agregar gráficos, vídeo y

audio para conseguir presentaciones multimedia completas.

■ Conceptos básicos de bases de datos

Este curso presenta los fundamentos del uso de una base de datos

relacional para crear tablas, formularios e informes.

■ Conceptos básicos de hojas de cálculo

Este curso enseña a los alumnos los conceptos básicos de las

hojas de cálculo incluyendo la creación de hojas de cálculo, la

modificación de datos, la creación de diagramas y gráficos, y la

publicación de una hoja de cálculo en el Web.

Cada curso utiliza tareas y proyectos para desarrollar competencias en cuanto

a la tecnología de información básica y las aplicaciones de productividad de

sobremesa mediante el tratamiento de los temas siguientes:

■ Conceptos básicos de la tecnología de la información

■ Uso del equipo y administración de archivos

■ Procesamiento de textos

■ Hojas de cálculo

■ Bases de datos

■ Presentaciones

■ Alfabetización sobre Internet, World Wide Web y correo electrónico

Entre las áreas temáticas principales se incluyen las siguientes:

■ Fundamentos de la informática (hardware, software, sistema

operativo)

■ Principales aplicaciones de software (aplicaciones de productividad)

■ Internet, World Wide Web y correo electrónico

El programa UP ofrece materiales para los alumnos y para los instructores que

son flexibles, confiables, económicos y orientados a los resultados. De acuerdo

con el contrato de copyright, los instructores pueden duplicar y personalizar

todos los materiales y archivos para mejorar el proceso de aprendizaje.

5

Cómo está organizado el curso

Cada curso del programa Microsoft UP empieza con los conceptos básicos y

pasa rápidamente hacia conocimientos y técnicas intermedios. Los tutoriales

prácticos construyen de forma experta sus conocimientos paso a paso. Al

estudiar con un enfoque basado en tareas, aprende algo más que simplemente

las características del software. Aprende a realizar tareas de la vida real, de

forma que pueda aumentar su productividad inmediatamente utilizando la

tecnología.

Cada lección empieza con unos objetivos de aprendizaje en viñetas. Cada

objetivo especifica una tarea determinada que podrá realizar cuando complete

la lección.

Los tutoriales paso a paso son el eje central de cada lección. Las lecciones

se basan en tareas que puede encontrar en el mundo laboral cotidiano. Este

enfoque le permite ver rápidamente la importancia del aprendizaje. El enfoque

basado en tareas está imbricado en toda la serie, incluyendo la organización de

lecciones dentro de cada unidad, los títulos de las lecciones y las situaciones de

ejemplo elegidas para los archivos de prácticas. Los conceptos se presentan e

ilustran con ejemplos de muchas situaciones de la vida real, la tecnología se

explica claramente y los ejercicios prácticos le permiten empezar a aplicar

inmediatamente lo que sabe. La mayoría de las lecciones terminan con 4 ó 5

ejercicios prácticos de dificultad creciente, y desafían al alumno a entender y

aplicar lo aprendido.

Características especiales

■ Objetivos de aprendizaje. Establecen claramente los objetivos

de enseñanza para cada lección, de forma que entienda lo que

aprenderá. Los objetivos de aprendizaje se tratan de manera

coherente y constituyen la estructura de las lecciones, lo que le

ayuda a captar la información más importante y a preparar las

habilidades de aprendizaje.

■ Tutoriales paso a paso. Los pasos numerados contienen

instrucciones detalladas paso a paso que le ayudan a aprender.

Cada tutorial incluye numerosas ilustraciones que le guían por el

proceso de aprendizaje. Con cada curso se ofrecen archivos de

ejemplo.

■ Sugerencias. En toda la lección se incluyen sugerencias útiles

y formas alternativas de realizar las tareas que le ofrecen

información adicional, métodos abreviados y posibles problemas,

así como comentarios acerca de lo que está aprendiendo.

■ Notas. En todo el texto de la lección encontrará información

adicional que le permite profundizar más en un tema.

■ Importante. Las notas especiales ofrecen precauciones o

instrucciones especiales.

6

■ Barras laterales. Las barras laterales de algunos de los cursos

contienen temas parentéticos, información adicional o

explicaciones más extensas, como momentos interesantes en la

historia de la informática, los entresijos de la ley del copyright o lo

que tiene que saber acerca de los “colores seguros” que hay que

utilizar en una página Web.

■ Jerga. Estas notas al margen de algunos de los cursos ofrecen

definiciones de términos técnicos.

■ ¡Pruébelo! Estas barras laterales especiales de algunos cursos

ofrecen minitutoriales rápidos para comprobar sus conocimientos.

■ Archivos de prácticas. Unos documentos de ejemplo le ayudan a

completar los ejercicios presentados al final de las lecciones de

varios cursos. Las lecciones basadas en proyectos empiezan con

una lista de todos los archivos que necesitará para completar el

proyecto.

■ Puntos clave o Resumen de la lección. Los resúmenes de lo

que ha aprendido en una lección sirven como recordatorio de los

puntos clave y le indican lo que debe hacer a continuación.

■ Ejercicio corto. Los ejercicios cortos incluidos al final de cada

lección evalúan lo que ha aprendido y cómo podría aplicarlo.

Esta evaluación al final de la lección va más allá de una simple

recapitulación de lo aprendido, al pedirle que explique cómo

realizar ciertas tareas.

■ Resumen de conceptos. Estos ejercicios incluidos al final de

cada lección le permiten practicar la aplicación de lo aprendido a

proyectos del mundo real. Muchos de estos ejercicios se basan

unos en otros para ofrecer un conjunto creciente de desafíos que

ponen a prueba sus conocimientos.

■ Apéndices. Los objetivos para el examen de especialista en

Microsoft Office de cada curso se enumeran en un apéndice

al final del libro.

Archivos de prácticas

En varios de estos cursos se incluyen documentos de ejemplo y otros archivos

para acelerar el aprendizaje y ofrecer ejemplos “terminados” que puede

comparar con su propio trabajo. En cada lección se explica cuándo y cómo

utilizar los archivos de prácticas para esa lección. Muchas de las lecciones se

basan en situaciones de la vida real para que pueda aplicar fácilmente los

conocimientos aprendidos a su propia situación.

Por ejemplo, Conceptos básicos de diseño Web incluye todos los ingredientes

para crear varios sitios Web con FrontPage: los archivos de texto, los archivos

gráficos y los archivos HTML necesarios para crear un sitio Web atractivo.

7

Puede elegir entre trabajar con estos archivos como parte de la instrucción en el

aula en los centros comunitarios de tecnología y aprendizaje o bien puede

utilizarlos para aprender por su cuenta.

El instructor instalará todos los archivos de prácticas en la unidad de disco duro

de cada equipo. Dependiendo del curso concreto que vaya a realizar, los

archivos se almacenarán en la carpeta Practice de cada curso. Los archivos de

cada curso se encuentran en las carpetas del curso correspondiente, bajo la

carpeta Unlimited Potential de la unidad C: . Su instructor le explicará cómo ir

a los archivos del curso que va a realizar.

Requisitos del sistema

Todos los equipos del aula o del centro comunitario de aprendizaje deben

cumplir las condiciones mínimas siguientes para ejecutar Microsoft Office XP

y permitir a los alumnos el trabajo con los archivos de prácticas empleados en

muchas de las lecciones.

■ Un equipo personal que ejecute Microsoft Office XP con un

procesador Pentium a 133 megahercios (MHz) o superior.

■ Sistema operativo Windows XP.

■ 128 MB de RAM como mínimo, además de 8 MB de RAM adicionales

para cada programa de Office que se ejecute simultáneamente.

■ Al menos 58 MB de espacio disponible en disco (después de instalar

Microsoft Office XP).

■ Una unidad de CD-ROM.

■ Un monitor con resolución Super VGA (800 x 600) o superior con

256 colores; se recomienda un monitor de 15 pulgadas como mínimo.

■ Un mouse (ratón), IntelliMouse u otro dispositivo señalador

compatible.

8

Acerca del equipo de autores

Gran parte del material de estos cursos se basa en los puntos fuertes del

enfoque ya probado que Microsoft desarrolló y refinó para sus series Step by

Step Courseware, y sus series de libros Step by Step y Faster Smarter. Los

instructores, especialistas de diseño educativo, autores y expertos en tecnología

que aportaron el contenido de estos libros y cursos poseen unos extensos

conocimientos en tecnología y gran experiencia didáctica.

Parte del material de este curso se ha adaptado de Faster Smarter Web Page

Creation, publicado por Microsoft Press. Existe una versión más completa de

este material en las ediciones impresas originales de estos libros. Animamos a

los instructores y alumnos a que consulten estos libros cuando deseen ampliar

sus conocimientos de las tecnologías de información e informática. Edición

original de Faster Smarter Web Page Creation by Mary Millhollon. Los libros

de Microsoft Press pueden adquirirse en librerías y distribuidores de todo el

mundo. Para obtener más información acerca de las ediciones internacionales,

póngase en contacto con su librería local o póngase en contacto con Microsoft

Press International directamente en el número de fax (425) 936-7329. Visite

nuestro sitio Web en www.microsoft.com/mspress para obtener más

información acerca de estos libros y los autores que los crearon.

9

Convenciones utilizadas en este curso

Este curso utiliza fuentes, símbolos y convenciones de títulos especiales para

resaltar la información importante o para llamar su atención sobre pasos

especiales. Para obtener más información acerca de las características

disponibles en cada lección, consulte la sección “Características especiales”

de esta Introducción.

Convención Significado

Texto en cursiva Este formato indica un término clave

utilizado por primera vez, como

banda ancha o World Wide Web.

Texto en negrita Este formato indica el texto que usted

debe escribir.

O bien

Indica un término clave que se emplea

por primera vez.

Fuente Sans-serif Este formato se utiliza para resaltar

texto que forma parte de los pasos de

los tutoriales.

nota Las notas ofrecen información

adicional que le permite profundizar

en un tema.

sugerencia Ofrecen sugerencias útiles y formas

alternativas de realizar tareas.

importante Las notas especiales ofrecen

precauciones o instrucciones

especiales.

Las notas al margen recuadradas

ofrecen información adicional y

comentarios sobre el texto.

Puede buscar y descargar

software antivirus en Internet.

10

Características de las lecciones

Los objetivos de la lección establecen claramente los objetivos de enseñanza para cada lección, de forma que entienda lo que aprenderá.

Las ilustraciones ofrecen información visual mientras que estudia la lección.

Las sugerencias ofrecen consejos útiles, métodos abreviados y formas alternativas de realizar una tarea.

Cada tema empieza con información que explica conceptos y técnicas.

Las notas importantes contienen instrucciones especiales.

Las notas al margen incluyen sugerencias e información adicional.

Los pasos numerados ofrecen instrucciones detalladas para realizar una tarea.

Los términos importantes se muestran en negrita y se definen la primera vez que se utilizan.

11

Resumen de la lección trata problemas restantes de la administración de archivos para terminar la lección.

Las preguntas de Ejercicio corto, con respuestas breves, le plantean preguntas sobre los conceptos expuestos en la lección.

Los ejercicios de Resumen de conceptos le desafían a que aplique lo que ha aprendido y le obligan a aplicar los conocimientos de una forma nueva.

12

Páginas principales sin misterios Una vez completada esta lección, podrá:

Explicar la diferencia entre Internet y el World Wide Web.

Comprender la anatomía de una página Web típica.

Crear una página HTML sencilla y verla en un explorador.

Es muy probable que le resulte bastante conocida la no tan modernísima

invención denominada Internet. Y lo que es más, estamos dispuestos a apostar

que, si está contemplando la idea de hacerse notar en el Web, sabe cómo usar

en cierto modo un equipo informático. También suponemos que ha explorado

el Web, puede usar aplicaciones básicas (por ejemplo, paquetes de

procesamiento de texto) y puede hacer clic en un mouse (ratón). Por suerte, su

conocimiento básico de informática es todo lo que precisa para poder crear

páginas Web. Eso junto con estas lecciones, ¡por supuesto!

Su primer cometido en el camino para llegar a convertirse en desarrollador de

páginas Web supone comenzar a partir de lo que ya sabe. Por ejemplo, además

de unas capacidades informáticas moderadas, debe tener una idea de cómo se

relacionan entre sí Internet, el Web y las páginas Web. Por lo tanto, en aras de

nuestro objetivo de mantener la claridad y simplicidad, reduciremos la marcha

en esta lección y describiremos brevemente los elementos principales de la

mayor red del mundo: Internet, el Web y las páginas Web. Cuando hayamos

conseguido quitarnos de en medio una serie de conceptos básicos, pasaremos el

resto de las lecciones hablando acerca del planeamiento y la creación de

páginas Web.

Internet: simplemente un montón

de hardware

Para simplificar, Internet, o la gran red, es hardware: muchísimos dispositivos

de hardware interconectados para crear una red enorme en todo en mundo.

El hardware de Internet abarca todos los componentes que una persona puede

tocar físicamente, como son equipos, enrutadores, cables, líneas de teléfono,

circuitos de datos de alta velocidad y otros dispositivos físicos de red.

Jerga: Internet es el

hardware que se interconecta

para crear una red mundial

enorme.

Jerga: los enrutadores

son componentes de

retransmisión entre redes.

LECCIÓN 1

13

Por ahora, eso es en realidad todo lo que precisa saber acerca de Internet: es

hardware. No hay necesidad de agasajarle con una larga diatriba acerca de

cómo la paranoia de la guerra fría del gobierno de Estados Unidos incitó el

desarrollo de una red informática descentralizada. Si siente curiosidad por la

historia de Internet, puede encontrar información en línea y en las bibliotecas o

librerías de su barrio. (Además, vea la sección de recursos en

www.creationguide.com/resources, (en inglés), para consultar algunos vínculos

útiles.) Ahora que hemos identificado con claridad que Internet es el hardware,

vamos a dar el siguiente paso lógico. Como todo el hardware informático

(piense en su equipo portátil o de escritorio), Internet necesita software o, de lo

contrario, sus componentes de hardware simplemente estarían ahí acumulando

polvo (en su mayor parte), de forma globalizada. Entre en el World Wide Web.

El Web: software para el hardware

El World Wide Web (también conocido como WWW o, simplemente, “el

Web”) es un poco más esotérico que Internet. Esto es así porque consta de

software (como son programas, documentos y archivos) que permite a la

información viajar a través del hardware de Internet. Como ayuda para ilustrar

la función del Web en relación a Internet, a continuación relatamos una breve

historia que contamos por primera vez hace algunos años al explicar la función

del Web a neófitos en Internet:

Hace mucho tiempo (cuando los insectos y los arácnidos podían hablar),

había una araña de intelecto inusualmente brillante llamada Tim. Tras

ver a las hormigas trabajar todo el día, Tim se reunió con la hormiga jefe

por entonces, Bill. Las hormigas, como es habitual, demostraban una

increíble destreza acumulando y almacenando comida, pero Tim pensó

que las arañas podían asociarse con ellas con el fin de hacer la vida más

fácil para ambas. Tim se dirigió a Bill con este plan, quien vio cierta

lógica en él. De hecho, sugirió que incorporaran a otras criaturas en el

equipo también. Pronto, Tim y Bill reclutaron a los saltamontes, a las

moscas y a las lombrices para que se asociaran en la empresa de

conseguir comida. Las criaturas pensaron que aquélla era una idea

espléndida, así que se reunieron y crearon un elaborado laberinto de

hormigueros, telas de araña, madrigueras y túneles para servirles de

ayuda en la empresa. El sistema ya estaba implantado y parecía perfecto.

Era el momento de empezar a trabajar. Pero, con gran decepción para las

criaturas, surgió el caos. Incluso aunque todos los caminos y conexiones

estaban ahí, las moscas lo pasaban muy mal explorando los túneles, los

saltamontes tenían dificultad para permanecer en los hilos, las lombrices

eran simplemente demasiado pesadas para andar sobre las telas de araña

y, por supuesto, las expectativas de las hormigas eran mucho mayores

que las del resto de los grupos. Lo que las criaturas tenían era una red.

Lo que precisaban era algo o alguien que pudiera atravesar todos los

medios de la red de una forma segura. Necesitaban una criatura

universal.

Jerga: el Web consta

de software que permite

compartir la información

de Internet.

14

Esta corta historia proporciona una buena analogía de la relación entre Internet

y el Web. Como comentamos anteriormente en esta lección, Internet es la

infraestructura para transmitir información: una infraestructura formada por

equipos, enrutadores, cables, líneas de teléfono, circuitos de datos de alta

velocidad y bases de información denominadas servidores (a modo de

hormigueros, telas de araña y túneles). Por desgracia, al igual que las telas

de araña no pueden soportar el peso de las lombrices, no todos los equipos

informáticos pueden admitir todos los formatos de archivo. Incluir cada uno de

los métodos disponibles (o protocolos) para comprender los diversos formatos

de documentos de todos los equipos sería poco práctico. Así, la comunidad de

Internet ideó su propia criatura universal, conocida más comúnmente como el

World Wide Web.

En sus inicios, Tim Berners-Lee concibió y desarrolló el Web en el laboratorio

CERN de Suiza para la comunidad de físicos de altas energías. (Por cierto,

aunque se considera que el intelecto de Tim es extremadamente avanzado,

¡no es una araña!) El Web atrajo rápidamente mucha atención y se extendió

más allá del ámbito de la física. Al igual que con la historia de Internet, puede

encontrar montones de información acerca de la historia del Web en línea

y en numerosos libros de informática.

Para nuestros propósitos, sólo necesita saber que Internet es el hardware y

el Web es el software. Bastante sencillo. Ahora, estamos listos para pasar al

siguiente nivel: los archivos que el software del Web admite en el hardware

de Internet.

Páginas Web: unos cuantos archivos

en la gran red

Ahora nos encontramos cara a cara con el meollo del asunto: las páginas Web.

Básicamente, una vez que se destripa todo el pomposo balbuceo tecnológico,

las páginas Web son archivos. Para ser más concretos, las páginas Web son

archivos HTML. No tiene que poner en blanco los ojos ante la visión de

“HTML”; en la lección 6, desvelamos sus misterios. En este momento, todo

lo que necesita saber es que las páginas Web son simplemente archivos que el

Web admite, igual que los archivos de documentos (.doc) son los archivos que

admite Microsoft Word.

Puesto que las páginas Web son archivos, no tiene que llevar su imaginación

demasiado lejos para darse cuenta de que crear una página Web es,

simplemente, el acto de crear un tipo específico de archivo en un equipo.

Documentos de Word, hojas de cálculo, bases de datos, páginas Web: todos son

tipos de archivos. Claramente, puede ver que las páginas Web no son entidades

misteriosas. No pueden abrumarle. Son archivos informáticos y ya ha trabajado

con ellos en numerosas ocasiones.

Jerga: los servidores son

equipos vinculados en red

de alta capacidad que

almacenan archivos y

responden a las solicitudes

de los usuarios que

pretenden ver y tener acceso

a ellos. Un protocolo es un

conjunto de reglas que

describe cómo se deben

transmitir los datos.

El Web usa el Protocolo de

transferencia de hipertexto

(HTTP) para transmitir

documentos de Lenguaje

de marcado de hipertexto

(HTML).

15

Así que no deje que le intimiden. Por supuesto, esto no es lo mismo que afirmar

que las páginas Web no tengan algunas idiosincrasias que las diferencien de

otros archivos. Por ejemplo, siempre incorporan varios archivos e

hipervínculos, y se suelen reunir en grupos llamados sitios Web.

La naturaleza “multiarchivo” de las páginas Web

Hemos dicho que las páginas Web son simplemente archivos y lo reafirmamos.

Pero debemos aportar un poco más de claridad en relación a los tipos de

archivos a los que nos referimos. Mientras lee el siguiente par de párrafos,

podría pensar que estamos proporcionando demasiada información en este

punto, pero en realidad no es así. Debería tener al menos una idea (no

necesariamente un conocimiento consolidado, aún) de los componentes e

interacciones de las páginas Web antes de avanzar demasiado. Hecha la

rectificación, sigamos con la información.

En primer lugar, en el nivel más básico, cada página Web es un documento de

texto. Un documento de texto es un archivo que contiene palabras, letras y

números sin ningún formato. Por ejemplo, al abrir el Bloc de notas o WordPad

en Microsoft Windows (haga clic en Inicio, seleccione Programas o Todos los

programas, haga clic en Accesorios y, después, seleccione Bloc de notas o

WordPad) y escribir su nombre, una frase pegadiza, varias letras, algunos

números o cualquier cosa, en realidad está creando un documento de texto (no

una página Web, cuidado, simplemente un documento de texto). La figura 1-1

muestra un ejemplo sencillo de documento de texto abierto en el Bloc de notas.

Figura 1-1.

Un documento de texto contiene solo eso: ¡texto!

Jerga: un sitio Web es una colección de páginas Web relacionadas, que suelen incluir una página principal y subpáginas.

Jerga: un documento de texto es un archivo que contiene palabras, letras y números sin ningún formato.

16

Para convertir el documento de texto en una posible página Web, basta con

agregar comandos HTML específicos, según se muestra en la figura 1-2.

Figura 1-2.

Este documento de texto contiene comandos HTML básicos junto con algo de texto y una línea de texto en el cuerpo de la página.

Páginas Web y exploradores

Para ver páginas Web, se usa un explorador (como Microsoft Internet Explorer).

En la mayor parte de los casos, en el equipo local (donde está trabajando) hay

una aplicación de este tipo. Puede eliminar, instalar, actualizar y personalizar el

explorador igual que elimina, instala, actualiza y personaliza otras aplicaciones

de software (incluidos los programas de Microsoft Office, como Word y

Microsoft Excel). Ocasionalmente, surge una ligera confusión en relación al lugar

finaliza Internet y dónde comienza el equipo. La clarificación se vislumbra

fácilmente: cuando vea una página Web en el explorador, las barras de

herramientas, las barras de menú y demás elementos alrededor de una página

Web son parte del explorador, que reside en el equipo; el contenido que se

muestra dentro de la ventana principal del explorador refleja el contenido de

Internet.

Una vez agregados los comandos HTML, guarda el documento de texto con la

extensión .html o .htm en lugar de las extensiones .txt o .doc. (No se preocupe

por los detalles ahora.) Entonces, puede abrir el documento en un programa

explorador, como Internet Explorer.

17

La figura 1-3 muestra la forma en que el documento de texto con los comandos

HTML mostrado en la figura 1-2 aparece en un explorador. Observe que en la

figura 1-3 sólo aparece el texto del cuerpo y el de la barra de título, y no los

comandos HTML. Ello se debe a que éstos simplemente proporcionan

instrucciones a los exploradores en relación a cómo mostrar la información y no

a qué se debe mostrar.

Figura 1-3.

Puede ver en un explorador un documento de texto básico con comandos configurado correctamente.

No se preocupe si esta explicación de HTML parece un poco vaga en este

momento. Le guiaremos en el proceso de creación de un sitio Web con HTML

en el Bloc de notas o en WordPad posteriormente, en la lección 6. Verá entonces

que HTML resulta bastante nítido si avanza paso a paso. (Y, si desea algo más de

inspiración, en otras lecciones averiguará que puede crear páginas Web sin saber

nada de HTML.) En este momento, lo que necesita principalmente es reconocer

la premisa básica: las páginas Web son documentos de texto.

Podría haber notado que aquí parece surgir una paradoja porque hemos

afirmado categóricamente que las páginas Web son documentos de texto. Y,

si lo son ¿por qué está el Web desbordado de gráficos? Por suerte, en el Web

puede usar los documentos de texto HTML junto con tipos concretos de

archivos de gráficos. Más concretamente, el Web admite los archivos de

gráficos con las extensiones .gif, .jpeg y .png, pero vamos a ahorrarnos la

explicación de los formatos de archivos gráficos para la lección 3.

Aquí tiene un adelanto. Para mostrar un gráfico en una página Web, un

documento HTML (de texto) incluye comandos que indican al explorador

dónde encontrar un gráfico en particular y cómo mostrarlo en la página

(incluyendo la posición, el tamaño y demás). Por lo tanto, queda desvelada la

naturaleza “multiarchivo” de las páginas Web. Generalmente, cuando mira una

página Web en línea, está viendo unos cuantos archivos: un archivo HTML

(de texto) y algunos archivos gráficos.

18

¡Pruébelo!

Puede ver por sí mismo cómo funciona HTML. En primer lugar, asegúrese de

que Windows está configurado para mostrar extensiones de archivo:

1 Abra el Panel de control (en Windows XP, elija Panel de control

en el menú Inicio; en versiones anteriores de Windows, haga clic

en Inicio, seleccione Configuración y, después, haga clic en Panel

de control).

2 En el Panel de control, haga doble clic en Opciones de carpeta y,

después, haga clic en la ficha Ver.

3 Desactive la casilla de verificación Ocultar las extensiones de

archivo para tipos de archivo conocidos y, después, haga clic

en Aceptar.

Una vez configurado Windows para mostrar las extensiones de archivo,

escriba en un documento del Bloc de notas el texto HTML que se muestra en

la figura 1-2. Seleccione Documento de texto en el cuadro Tipo, para guardar

el documento del Bloc de notas en el escritorio (así, podrá eliminarlo con

facilidad posteriormente) como archivo de texto (.txt), y cierre el Bloc de notas.

A continuación, muestre el escritorio, haga clic con el botón secundario del

mouse en el archivo recién creado y seleccione Cambiar nombre. Reemplace la

extensión .txt por .html. Cuando en el sistema Windows se muestra un cuadro

de mensaje en el que se pregunta si realmente desea cambiar el tipo de archivo

(y se le advierte de sus potenciales “peligros”), haga clic en Sí; no está

causando ningún estrago en este caso.

Ahora, ya puede ver el documento en el explorador. Para ello, puede:

■ Hacer doble clic en el archivo HTML recién creado.

■ Abrir el explorador y arrastrar el icono del archivo HTML a la

ventana del explorador.

■ Abrir el explorador y escribir la ruta de acceso del archivo HTML en

la barra de direcciones.

Tenga en cuenta que, cuando cambie un archivo TXT por un tipo de archivo

HTML, tendrá que abrir el documento desde dentro del Bloc de notas si desea

modificar el texto.

Para ilustrar el concepto de “multiarchivo”, eche un vistazo a la versión pasada

de la página principal de Arizona Film Society en la figura 1-4. Como puede

ver, consta de tres archivos: un documento HTML (index.html) y dos archivos

de gráficos (afs_title.gif y 4members.jpg). La figura 1-5 representa una vista de

carpeta de Windows de los archivos usados para crear la página principal

ilustrada en la figura 1-4. (Observe que la carpeta de Windows contiene los

mismos archivos de gráficos y HTML.)

19

Nota

Como probablemente sabrá, una de las principales atracciones del Web

es su naturaleza dinámica. Muchas páginas Web se actualizan y modifican

con frecuencia. Para complementar nuestra explicación, hemos congelado

una copia de una de las páginas principales antiguas de Arizona Film

Society en el sitio www.creationguide.com/afs (en inglés). Para ver el

flujo de páginas Web en acción, visite la página Web actual en el sitio

www.azfilmsociety.com y observe que se ha modificado. (De hecho, ha

sufrido varias modificaciones desde que congelamos la página principal

de ejemplo para esta lección.)

Un poco más de HTML

El texto y los comandos HTML usados para crear una página Web se conocen

en conjunto como su código fuente. (El código fuente hace referencia al texto y

a los comandos HTML usados para crear una página Web.) La mayor parte de

los exploradores permiten mostrarlo. Por ejemplo, para mostrar código fuente

con Internet Explorer, debe elegir Código fuente en el menú Ver, como se

muestra a continuación:

20

Figura 1-4.

Un archivo de texto HTML y dos archivos gráficos se combinan para crear

la página principal de Arizona Film Society (www.creationguide.com/afs) (en inglés).

Figura 1-5.

La vista de las carpetas de la página principal de Arizona Film Society muestra que se combinan tres archivos para mostrar la página en línea.

21

Cuando haya examinado las figuras 1-4 y 1-5, estará preparado para asimilar

otro concepto “básico”. Fundamentalmente, debe concluir esta explicación con

la información siguiente: Cuando observa una página Web en un explorador de

Internet, normalmente está viendo varios archivos que se combinan para crear

una única página.

Habiendo puesto a buen recaudo la idea de que una página Web consta de

varios archivos, ahora debe considerar de forma consciente que una página

Web no sólo es un tipo de comunicado, como un panfleto de los que le dejan en

el parabrisas. Por el contrario, una página Web siempre usa hipervínculos para

vincularse a otras.

Hipervínculos y sitios Web

Tal como afirmamos al principio de esta lección, suponemos que si desea crear

una página Web es porque ha explorado el Web. Por lo tanto, es muy probable

que haya hecho clic en numerosos hipervínculos. Como seguramente sabrá, los

hipervínculos son texto o gráficos donde puede hacer clic y que permiten tener

acceso a recursos de Internet y páginas Web adicionales. En un lenguaje más

técnico, los hipervínculos son elementos que se incluyen en documentos

HTML y que señalan a otras páginas Web o documentos de Internet (de forma

similar a cómo los comandos HTML señalan a los archivos de gráficos) o a

otras áreas de la misma página. En la figura 1-6 se ilustra el modo en que un

par de hipervínculos de la página principal de Arizona Film Society señalan a

otras páginas Web. Al hacer clic en un hipervínculo, se muestra otra área de la

página actual o de otra página Web, que puede ser cualquiera de Internet (y no

sólo una que usted haya creado), ubicada en cualquier parte del mundo.

Como desarrollador de páginas Web, el uso de hipervínculos lleva de forma

natural hacia la utilización de varias páginas Web. En general, normalmente

preferirá no colocar toda su información en una única página principal grande y

larga. En su lugar, es probable que desee crear una serie de páginas Web más

pequeñas que se relacionen y vinculen entre sí. Esta colección de páginas Web

relacionadas conforma un sitio Web.

Jerga: los hipervínculos

son texto o gráficos donde

se puede hacer clic para

tener acceso a recursos

adicionales en Internet, como

otra ubicación en la página

Web actual, otra página Web

u otro archivo que descargar.

22

Figura 1-6.

Los hipervínculos llevan a quien está viendo la página Web a otras páginas Web, otras áreas de la misma página u otros recursos de Internet.

De su cabeza al Web

(y de vuelta otra vez)

En este punto de la lección, todos los componentes están sobre la mesa:

Internet, el Web, exploradores, páginas Web, hipervínculos y sitios Web. Esta

enumeración de componentes es un buen comienzo, pero nos enfrentamos al

pequeño detalle de cómo un archivo de texto y unos archivos gráficos que ha

creado en su equipo se convierten en una página Web en Internet. Antes de

que nos adentremos demasiado hondo en los entresijos de la transferencia de

páginas Web, vamos a desenmascarar un mito sorprendentemente popular: las

personas que ven sus páginas Web tienen acceso a su equipo de escritorio. La

afirmación anterior no es verdad. Podemos asegurarle que las páginas Web no

se almacenan en los equipos personales, sino en servidores.

23

La naturaleza cliente-servidor del Web

Los servidores son, simplemente, equipos extremadamente eficientes que

almacenan los archivos de Internet y ejecutan software especial diseñado para

responder a las solicitudes de los clientes. Por supuesto, ahora hemos

introducido el término cliente. Vamos a detener esta aproximación indirecta y

nos dedicaremos un momento a explicar esta jerga.

Básicamente, los archivos Web se transmiten usando lo que se conoce como

modelo cliente-servidor. En el modelo cliente-servidor, un sistema (el servidor)

conectado a una red atiende la solicitud de otro sistema (el cliente). En lo que

respecta al diseño Web, un cliente es un nombre imaginativo para un

explorador (como Internet Explorer) que se ejecuta en el equipo de un usuario y

un servidor es la combinación de un equipo muy eficaz que almacena las

páginas Web y el software que responde a las solicitudes para mostrar estas

páginas Web almacenadas en él. Por lo tanto, cuando tiene acceso a una página

Web, tiene lugar el proceso siguiente:

1 Conecta su equipo a Internet y abre el explorador. A continuación,

especifica una dirección Web (URL) en la barra de direcciones y

presiona Entrar, o hace clic en un hipervínculo de la página de

inicio del explorador.

2 El cliente (su explorador) envía la dirección URL escrita o la

dirección URL asociada con un hipervínculo a través de las líneas

de teléfono, los cables o, quizás, los enrutadores a su proveedor

de servicios Internet (ISP, Internet Service Provider). El ISP es la

compañía a la que paga para que le proporcione acceso a Internet.

3 El ISP envía entonces su solicitud de dirección URL en Internet a

través de más cables, enrutadores y otros circuitos de datos de

alta velocidad al sistema (el servidor) que mantiene la página Web

solicitada.

4 El servidor envía la información de la página Web a través de

Internet al ISP y, finalmente, éste la reenvía a su equipo.

Desde la perspectiva de un desarrollador de páginas Web, una vez creada una,

debe copiar sus archivos al servidor que la alojará, de forma similar a como se

copia un archivo del disco duro a un disquete, excepto por una diferencia: los

archivos de la página Web se copian a través de los hilos de Internet, como se

describe posteriormente en este libro, en la lección 8. Mediante las aplicaciones

actuales del Protocolo de transferencia de archivos (FTP, File Transfer

Protocol), las carpetas Web (y Mis sitios de red) o los asistentes para

publicación en Web, el proceso de copia de los archivos de páginas Web a un

servidor puede ser tan sencillo como arrastrarlos desde su carpeta local a una

carpeta del servidor que esté usando para alojar su sitio Web. Por lo tanto,

cuando otras personas ven su página Web publicada, están teniendo acceso al

servidor que almacena las copias de los archivos y no a su equipo.

Jerga: URL son las siglas de

Uniform Resource Locator.

Una dirección URL hace

referencia a una dirección

de Internet que indica al

explorador Web donde mirar

en Internet para encontrar

una página Web específica.

Tenga en cuenta que esta

lección presenta una

explicación simplificada

(aunque precisa) del proceso

de recuperación básico de

páginas Web.

24

Con esto concluye nuestro repaso de conceptos básicos. En este momento, está

preparado para seguir avanzando en el diseño y la implementación de páginas

Web, como se describe en las siguientes páginas de este libro. Pero antes de

terminar esta lección, nos gustaría informarle de lo que va a encontrar en las

siguientes lecciones.

Avanzando a un ritmo regular

Como podría sospechar, una gran parte del trabajo de creación de una página

Web la constituye el planeamiento de la misma (y del sitio Web) antes de

sentarse ante su equipo. Tiene que emplear al menos algo de tiempo en pensar en

el contenido, tanto el texto como los gráficos, y además de en idear el diseño de

la página. Aunque el diseño de páginas Web es un proceso creativo, no es una

magia negra desprovista de estructura. En el curso de este libro, vamos repasando

unos cuantos principios básicos que ayudarán a hacer el proceso de creación de

páginas Web más sencillo. Nuestra pericia se deriva no sólo de nuestros propios

años de experiencia en la red sino también de los numerosos estudios de

utilización que muchos otros diseñadores, ingenieros y especialistas de la

información han realizado. Con estos recursos, hemos sacado algunas

conclusiones básicas acerca del texto, los gráficos y los colores que se usan en el

Web y que hemos probado en la práctica. Por lo tanto, las lecciones 2 a 5 tratan

de la información que debería conocer acerca del diseño de páginas Web,

incluidas cuestiones relacionadas con el texto, los gráficos, los colores,

programas útiles y planeamiento de páginas Web. Encontrará las siguientes

lecciones repletas de información importante relativa a la creación de páginas

Web; si la utiliza bien, sus futuros trabajos de diseño Web serán más fructíferos.

Por lo tanto, le recomendamos encarecidamente que lea las lecciones 2 a 5 antes

de sumergirse en las lecciones 6 a 8, o que al menos las ojee.

Para finalizar, con independencia de la forma en que desmigaje este libro y

emprenda su trabajo en el Web, cuando todo esté dicho y hecho, recuerde

repasar la lección 8. La lección 8 describe cómo “pasar al mundo real” sus

páginas Web (si utiliza algún método de publicación de páginas Web que no

sea MSN u otro servicio de alojamiento gratuito).

Con todo, cuando complete estas lecciones, habrá dominado los fundamentos

de la creación de páginas Web de diversas formas. Ya no se encogerá cuando

oiga expresiones como HTML y nombre de dominio, y sus conocimientos le

servirán como una sólida base que podrá utilizar para crear una amplia variedad

de páginas Web más avanzadas.

25

Puntos clave

■ Internet es el hardware.

■ El Web es el software (que incluye programas y documentos).

■ Los exploradores son aplicaciones que permiten ver páginas Web.

■ Las páginas Web más básicas constan de varios archivos: un

archivo HTML (de texto) y archivos gráficos.

■ Un sitio Web es un grupo de páginas Web relacionadas.

■ Los hipervínculos proporcionan acceso a otras páginas Web, otras

áreas de la misma página u otros recursos de Internet.

■ Internet usa el modelo cliente-servidor, en el que un servidor

responde a las solicitudes de información de los clientes.

■ Los usuarios de Internet tienen acceso a las páginas Web que se

almacenan en servidores.

■ Si puede utilizar un equipo, ¡puede crear una página Web!

26

Creación y forma del texto para el Web Una vez completada esta lección, podrá:

Describir lo que hace que una página Web sea “fácilmente ojeable”.

Identificar los elementos de texto claves de una página Web.

Crear texto para el Web que sea claro, conciso y legible.

Elegir varias técnicas para usar la tipografía como un elemento

de diseño.

Cuando las personas contemplan la creación de páginas Web, normalmente

piensan en el diseño primero; es decir, en cómo se verá la página en lugar de lo

que debería decir. Y eso es comprensible y también deseable. De hecho, una

parte de este libro está dedicado al diseño de páginas Web. Pero, en el corazón de

cada página Web, se encuentra el contenido. Después de todo, la mayor parte de

la gente crea páginas Web porque tiene un mensaje que desea compartir, incluso

si simplemente proclama: “¡Mirad lo que he estado haciendo últimamente!”.

Para ser un éxito, una página Web debe proporcionar información que capte

rápidamente la atención de quien la observa o, de lo contrario, no siga

mirándola más de un par de segundos y probablemente no vuelva al sitio donde

se encuentra. Por lo tanto, debería empezar por pensar en el contenido de su

página Web antes de llegar demasiado lejos en su diseño.

Si sigue leyendo este texto, estará en camino de conseguir que el contenido de

sus páginas Web tenga una estructura y corrección admirables al final de la

lección. Pero, incluso si no llega tan lejos en la creación de contenido para un

sitio Web en particular, podrá identificar y crear buenos textos para el Web en

general. Además, sabrá cómo puede sacar el máximo provecho del texto de las

páginas Web que cree en el futuro. Con estos conocimientos en mente, podrá

combinar el contenido y el diseño con facilidad cuando empiece a crear sus

páginas Web.

Ahora, volvamos al tema que nos ocupa: el texto en línea. Razonablemente,

podría estar pensando que es bastante capaz de usar las palabras, así que en

realidad no necesita leer acerca de los textos de páginas Web. Pero tenga la

seguridad de que, incluso si su ocupación es la de escritor, puede aprovechar

las sugerencias de esta lección. Aunque un buen texto en línea tiene mucho

en común con uno impreso de similar calidad, también se diferencia de éste en

diversas formas. Verá, a medida que avance en esta lección, que la creación

de texto efectivo en línea implica el dominio y combinación de las artes de la

claridad, la mercadotecnia, el atractivo visual, las limitaciones de la tecnología

y un ápice de la psicología del lector.

LECCIÓN 2

27

Aproximación de los lectores a las

páginas en línea

El primer concepto que necesita abordar es que los lectores responden a las

páginas Web de forma diferente a como reaccionan ante las páginas impresas.

En los primeros estudios sobre esta materia, los entendidos en el Web

encontraron que en leer un bloque de texto en línea se tardaba aproximadamente

un 25 por ciento más que en leer el mismo texto en una página impresa. En otras

palabras, en la cantidad de tiempo que emplea leyendo 75 palabras en línea,

podría leer 100 si estuvieran en un libro. Los expertos de ahora debaten sobre si

la velocidad de lectura en línea ha aumentado debido a la mejora en los

monitores, al uso del color o a la familiaridad cada vez más generalizada con este

tipo de textos. Sin reparar en los porcentajes exactos, la mayoría de expertos

coincide en que la velocidad de lectura de las personas se reduce

significativamente cuando leen texto en línea, en comparación con la lectura en

papel, incluso aunque se está produciendo una mejora en muchos casos. Una de

las formas de adaptación desarrolladas para conseguir superar la lentitud de la

lectura de texto en línea es que ahora las personas suelen ojear el texto en lugar

de leer cada palabra que se muestra en el monitor.

Básicamente, un usuario ojea una página Web para encontrar un elemento de

interés que le anime a hacer clic en un vínculo o a copiar el contenido y leerlo

con más detenimiento. Si una página Web no atrae a un usuario con rapidez (en

los siguientes 10 segundos, según la mayoría de estudios de uso, probablemente

se irá a otra página (o a otro sitio). La creación de páginas que se pueden ojear

con facilidad también incrementa la credibilidad de la página Web, al tiempo

que aumentan sus posibilidades de clasificarse antes en los motores de

búsqueda, ya que sus ideas principales son más fáciles de identificar. Por lo

tanto, siempre que cree contenido para una página Web, tenga este concepto al

frente de sus procesos mentales. En esta lección, describimos diversos métodos

que puede emplear para mejorar la facilidad con que se pueden ojear sus

páginas Web.

Como promedio, la mayor

parte de los visitantes de una

página Web determinan en

10 segundos si contiene la

información que desean o

necesitan. Si parece que

satisface sus necesidades, la

mayor parte siguen viéndola

menos de 30 segundos.

28

Para ilustrar el concepto de ojear, compare las figuras 2-1 y 2-2. La figura 2-1

muestra una página Web que no observa las prácticas recomendadas para la

creación de buen texto en línea, mientras que la figura 2-2 sigue el consejo

comentado en esta lección. Observe la mayor rapidez con la que puede

identificar los puntos principales del texto en la figura 2-2 en relación a la

figura 2-1. A continuación se explica el porqué y se ofrecen indicaciones que

puede tener en cuenta al crear su propio texto en línea.

Figura 2-1.

Una presentación ineficaz de texto en un página Web puede desviar la atención

de los lectores antes de que lean una palabra del contenido.

29

Figura 2-2.

Una presentación efectiva del texto de una página Web hace posible que se

ojee con más rapidez, con lo que los lectores pueden encontrar la información que precisan más fácilmente.

Ahora que hemos expuesto un caso para hacerle pensar en su texto y reconocer

cómo se aproximan los clientes a las páginas Web, vamos a echar un breve

vistazo a las funciones fundamentales que desempeña el texto en una página

Web. A continuación, discutiremos los detalles relativos a la forma y eficacia

del texto en línea.

30

Elementos de texto de una página Web

La mayor parte de las páginas Web usan diversos componentes de texto, según

se ilustra en la figura 2-3. Como puede observar en la figura, además de en

muchas páginas Web, en ellas aparecen los elementos de texto descritos en las

subsecciones siguientes.

Figura 2-3.

Las páginas Web efectivas contienen diversos elementos de texto comunes.

31

Barra de título

Cuando crea una página Web, crea el texto que aparece en la barra de título de

la ventana de un explorador. La clave para el título es que sea conciso, claro y

útil. Tenga en cuenta que, al abrir una página Web, el texto del título de la

misma también aparece en la barra de tareas de Microsoft Windows. La barra

de tareas simplifica el trabajo de un usuario cuando pasa de una ventana abierta

a otra. Por lo tanto, aunque puede incluir texto inteligente o ingenioso si lo

desea, en general debe inclinarse en cambio hacia el uso de texto útil y claro.

Observe los textos de las barras de título poco convincente y útil,

respectivamente, que se muestran en las figuras 2-1 y 2-2.

Sugerencia

Para aumentar la claridad (especialmente en los botones de la barra de

tareas), omita los artículos iniciales (el, un, una) en el texto de la barra

de título de una página Web. El uso de títulos conocidos y descriptivos

contribuye a que las páginas destaquen en el área de trabajo de los

usuarios además de en los resultados de los motores de búsqueda que

organizan las páginas Web por el título.

Contenido

El contenido de una página Web hace referencia a su sustancia: la razón por la

que la gente visita el sitio. Como se describe en las secciones siguientes, el

contenido de una página Web debe ser claro, breve, fácil de ojear, informativo,

oportuno y gramaticalmente correcto (además de tener otras cualidades). Tenga

en cuenta que no importa lo bonito que sea un sitio Web, la característica más

atractiva de Internet es el texto. Después de todo, además de visitar los sitios

Web, unos cuantos cientos de millones de personas confían regularmente en el

texto en línea para enviar mensajes de correo electrónico, charlar con

mensajería instantánea y exponer sus opiniones en grupos de discusión.

Sugerencia

Una forma de obtener el contenido de sus páginas Web es aprovecharse

de los proveedores de contenido Web. Algunas agencias nuevas, centros

de multimedia, grupos de intereses especiales, empresas privadas y otros

especialistas de la información ofrecen contenido Web a los sitios Web de

forma regular, generalmente a cambio de unos honorarios. Para buscar

un proveedor de contenido, visite el motor de búsqueda que prefiera

(a nosotros nos gusta www.google.es) y busque proveedores de contenido

Web.

32

Hipervínculos

Los hipervínculos proporcionan forma y claridad a un grupo de páginas Web

(o a una página Web larga) al vincular la página principal, y las auxiliares, a

áreas que contienen información específica relacionada. En otras palabras, los

hipervínculos le ayudan a organizar su información y permiten que los demás

tengan acceso a ella con rapidez y facilidad. Los hipervínculos de texto deben

ser claros y coherentes, además de estar colocados de forma apropiada, como se

explica posteriormente en esta lección.

Logotipos, texto gráfico y WordArt

Puede usar logotipos, texto gráfico y WordArt para aportar una apariencia

profesional a sus páginas Web. Como se explica en la lección 3, puede usar

texto gráfico para conferir una apariencia y funcionamiento coherentes a un

grupo de páginas Web relacionadas. Hacer que todos los componentes de un

sitio Web aparezcan interrelacionados indica claramente a los usuarios que

siguen dentro del territorio de su sitio Web incluso aunque hagan clic de una

página a otra. Además, los logotipos, el texto gráfico y WordArt se usan con

frecuencia para proporcionar un vínculo gráfico afín a la página principal de un

sitio. Puede que haya descubierto mientras explora el Web que, por lo general,

puede hacer clic en el logotipo de una compañía para volver a la página

principal del sitio. (Si aún no ha descubierto este secreto, debería probarlo

durante su próxima sesión en el Web.) Siempre que sea posible, aproveche esta

práctica y vincule su logotipo con la página principal en todo el sitio Web.

Opciones de exploración con texto

Muchos diseñadores Web optan por dar formato a los elementos de exploración

(botones) y a la barra de menús sólo como gráficos (en la figura 2-3, los

botones del área superior izquierda actúan esencialmente como barra de

exploración de la página principal). El uso de elementos gráficos de

exploración es acertado, pero le recomendamos que también muestre sus

hipervínculos de exploración como texto simple conjuntamente con sus

elementos gráficos. Si el diseño de su página Web usa una barra de menús o

botones gráficos, puede evitar desbaratarlo si muestra hipervínculos de texto

en la parte interior de la pantalla. Ofrecer una alternativa a los vínculos basados

en gráficos resulta útil porque algunas personas desactivan las capacidades

gráficas del explorador para acelerar la descarga de páginas Web. Si no

proporciona componentes de exploración basados en texto, algunos usuarios

podrían no descubrir cómo llegar a las páginas secundarias de su sitio.

Sugerencia

Como sugerencia suplementaria, la adición de vínculos de exploración

basados en texto al final de las páginas Web ayuda a los usuarios a ir a

otras páginas del mismo sitio Web sin tener que desplazarse al principio de

Observe que usamos

las palabras vínculo e

hipervínculo indistintamente.

Jerga: texto gráfico es un término general que hace referencia al texto que se usa para crear elementos gráficos en las páginas Web, por ejemplo, botones, pancartas o títulos estilizados. WordArt es una característica de Microsoft Word que permite crear gráficos basados en texto estilizado, como encabezados y logotipos. Por ejemplo, en las figuras 2-1 y 2-2, hemos creado el logotipo “Ant! Online” con la característica WordArt de Word y, en la figura 2-3, el texto gráfico “Sign Up Today!” es un elemento de WordArt.

33

la página actual para tener acceso a los vínculos principales de

exploración.

34

Información de fecha o de última modificación

Generalmente, debe incluir un elemento de fecha en sus páginas Web. La fecha

puede ser tan sosa como una pequeña línea de texto situada cerca de la parte

inferior de la página. Sin embargo, si actualizar el contenido con regularidad es

uno de los atractivos principales de su página, puede ser aconsejable que la fecha

sea mucho más aparente y colocarla más alto, cerca del área superior izquierda,

más “selecta”. Por otro lado, si no piensa actualizar su sitio asiduamente, puede

optar por no publicar la fecha en que se modificó por última vez. (Con franqueza,

no recomendamos que prevea no actualizar su sitio pero, en ciertas

circunstancias, podría apañárselas con una página estática o dos.)

Información de copyright

Usted posee el copyright de todo el texto y los gráficos originales que crea. Por

lo tanto, para proteger su propiedad, debería agregar un aviso de copyright en

sus páginas Web. Tenga en cuenta que si usa software que sea gratuito (por

ejemplo, gráficos sin copyright que haya descargado de otro sitio Web) en la

página Web, es gratuito para todos los demás y pueden usarlo también.

Cuando agrega texto de copyright, la información puede ser tan sencilla como

© Copyright 2002 Su nombre o El nombre de su compañía. Todos los derechos

reservados. Además, la información de copyright se debe colocar cerca del

final de la página y en un tamaño de fuente que sea evidentemente menor que

el del texto del cuerpo de la página Web.

Ahora que hemos aludido a los elementos básicos de texto de las páginas Web,

ya puede dar forma al contenido y redactarlo.

Consideración del texto como

elemento de diseño

Como sabe, el texto de una página Web informa además de aportar su presencia

al diseño de conjunto de la misma. (Vea la figura 2-3.) Debe empezar a meditar

sobre las cuestiones básicas del diseño de texto mientras lo recopila. Por lo

tanto, a medida que cree su contenido y lea la lección 3, tenga en cuenta las

siguientes cuestiones relacionadas con el diseño:

■ Cree títulos y encabezados gráficos para agregar un efecto

artístico.

■ Muestre citas y barras laterales para aligerar las páginas con

mucho texto.

■ Agregue WordArt, logotipos, texto gráfico y pancartas para

proporcionar una apariencia y funcionamiento coherentes en

todo el sitio.

■ Use iconos de fácil compresión en lugar de palabras, similares a

los iconos “nuevo” y “lo último” que salpican el Web.

Para crear © en Microsoft

Word, presione Ctrl+Alt+C.

35

■ Aplique juiciosamente el color u otro formato tipográfico (como la

negrita o la cursiva) para atraer la atención hacia las palabras y

conceptos importantes.

■ Use letras capitales o iniciales altas (las primeras letras de mayor

tamaño en un párrafo) para indicar el principio de una sección.

■ Asegúrese de que los fondos no interfieren con la legibilidad

del texto.

■ Incluya los datos importantes (como la información de contacto,

el nombre de su compañía, etcétera) como texto, incluso si la

información aparece en forma de gráfico en algún otro lugar de la

página. Algunas personas desactivan la presentación de gráficos

para acelerar la exploración, lo que significa que pierden la

información gráfica de la página.

■ Evite la letra pequeñita; si duda, deje que los usuarios definan el

tamaño de texto con la configuración predeterminada de su

explorador.

■ Use fuentes admitidas en la mayor parte de las plataformas y que

sean fáciles de leer. Actualmente, las fuentes más compatibles con

los equipos Apple Macintosh y los basados en Windows son Arial,

Arial Narrow, Comic Sans, Courier New, Times New Roman y

Verdana.

Finalmente, como sugerencia de despedida sobre el texto después de todo lo

dicho en esta lección en relación a lo que debe y no debe hacerse, nos gustaría

sugerir que se divierta con el contenido de su página Web. El Web le concede

la libertad de comunicar la información de manera rápida y creativa en formas

nuevas. Piense lo que desea decir con exactitud y escriba entonces su mensaje

tan clara y enérgicamente como sea posible. Una vez que comience a escribir

frases concisas y directas, estará bien encaminado.

Puntos clave

■ Los usuarios ojean las páginas Web en lugar de leerlas

linealmente.

■ Los títulos, contenido, hipervínculos, logotipos, creaciones de

WordArt, elementos gráficos de texto, formatos, menús, opciones

de exploración, fechas de modificación de la página e información de

copyright representan los usos típicos del texto de una página Web.

■ El texto de una página Web atrae la atención de los usuarios antes

que los gráficos.

■ La información de las páginas Web debe imitar aproximadamente

la tradicional pirámide invertida de la metodología de redacción

de noticias.

36

■ Busque ideas para clarificar los puntos principales, encabezados y

vínculos de su página Web.

■ Escriba frases precisas y directas, y párrafos estructuralmente

correctos y concisos.

■ Haga que los encabezados e hipervínculos sean claros y

descriptivos.

■ Use listas con viñetas y una jerarquía de encabezados para ayudar

a los lectores a identificar con rapidez los puntos clave.

■ Incluya la información importante en forma de texto para que

puedan verla los usuarios que optan por no descargar los gráficos

del Web.

■ Corrija, corrija y vuelva a corregir la ortografía (y no olvide imprimir

y leer el texto en voz alta).

■ Compruebe la gramática.

■ Empiece a pensar en los elementos de diseño del texto, incluyendo

el formato tipográfico, el color y los elementos de texto gráfico.

■ Y, lo más importante de todo, una vez que tenga en cuenta las

posibilidades y limitaciones de la redacción para el Web, deje que

la experiencia de escribir sea un proceso creativo y agradable.

37

Creación y utilización de arte en el Web Una vez completada esta lección, podrá:

Comprender los fundamentos de los gráficos Web.

Ver y tratar gráficos Web en un programa de gráficos.

Describir los diferentes tipos de formatos de archivos gráficos.

Elegir colores “simplificados” para el Web.

Recortar una imagen gráfica.

En esta lección, simplificamos el tema de los gráficos Web. En un mundo

perfecto, dedicaríamos páginas y páginas a los matices del uso de gráficos en el

Web (principalmente porque nos gustan), pero entonces nunca llegaría al resto

de las lecciones. Tampoco deseamos que se sienta abrumado cuando tenga la

oportunidad de usar gráficos Web. Como tal vez haya descubierto, puede

encontrar fácilmente una superabundancia de información acerca de gráficos

avanzados si mira en Internet o en cualquier librería. Afortunadamente, puede

usar gráficos Web de forma eficaz sin tener que sumergirse en la teoría gamma

y la rasterización. Por lo tanto, hemos optado por adoptar la solución práctica

de presentar lo que juzgamos que es la información más significativa y

fundamental acerca de los gráficos para páginas Web. Piense en esta lección

como su curso de iniciación personal en el arte Web. Cuando llegue a la

sección “Puntos clave”, al final de la lección, tendrá mucho en qué pensar, unos

cuantos trucos debajo de la manga, una o dos ocurrencias que decir en una

fiesta y varios lugares a los que acudir cuando tenga que buscar, adquirir, crear

y preparar arte para el Web.

Los archivos de ejercicios de esta lección se pueden encontrar en la subcarpeta

Lesson03 de la carpeta Web Design Fundamentals\Practice, que se encuentra

en el disco duro. Los archivos usados en esta lección son: apples.jpg,

cherries_photo.jpg, cherries.gif, firebreath.gif, palette216.gif,

fruit_standard.jpg, fruit_compressed72.jpg, fruit_progressive.jpg y

fruit_progressive_compressed72,jpg.

LECCIÓN 3

38

Mecánica de los gráficos Web

Antes de que empiece a ojear esta lección para examinar las imágenes y

desenterrar las direcciones de nuestros ejemplos en línea, tenga en cuenta que

realmente necesita leerla para asegurarse de entender unos cuantos conceptos

clave relativos a los gráficos Web. Como sabe, éstos parecen bastante similares

a los impresos pero, cuando se crean y utilizan imágenes en el Web, intervienen

varios factores específicos de este medio. En concreto, los gráficos en línea

requieren que considere las limitaciones del color y el formato y tamaño de los

archivos, además de posibles cuestiones relacionadas con la transparencia, la

descarga y la animación. Cuando tome conciencia de los tres factores

principales (colores, tipos de archivo y tamaño de archivo), podrá empezar a

usar gráficos en sus páginas Web y tener un punto de partida que le permita

iniciar un estudio más pormenorizado de los mismos. Por lo tanto, el plan de

ataque general es colocar algunos conceptos básicos de los gráficos Web en una

esquina craneana o dos antes de abrir su mente a las perspectivas más creativas

(y divertidas) de la utilización, recopilación y creación de gráficos Web.

Comencemos examinando el modo en que los gráficos muestran el color.

Píxeles, paletas y colores

Antes que nada, cada gráfico en línea consta de una serie de pequeños

cuadrados coloreados que se entremezclan para formar una imagen. En cierto

modo, los gráficos en línea simulan una técnica de pintura denominada

Puntillismo. El Puntillismo, introducido por el pintor francés Georges Seurat

(1859–1891), es el arte de crear imágenes a base de puntos (o pequeños trazos

del pincel). A través del Puntillismo, Seurat dividía cada imagen del lienzo en

pequeños puntos de colores. Cuando mira de cerca una pintura puntillista,

puede ver cada punto. A medida que se aleja de la pintura, los puntos se

combinan para crear una imagen. Los equipos informáticos muestran las

imágenes con una técnica similar al Puntillismo, excepto en que, en lugar en

puntos pintados, dividen las imágenes en cuadrados coloreados, denominados

píxeles. Por ejemplo, eche un vistazo a las cerezas de la figura 3-1. Esta figura

podría ser cualquier gráfico que se muestre en su pantalla. Como puede ver, el

gráfico parece similar a muchas otras imágenes en línea (o impresas, en este

caso) y no hay signos obvios de puntos, cuadrados ni píxeles.

Jerga: un píxel es un

cuadrado de una red de

cientos de cuadrados que

se colorea individualmente

para crear una imagen.

39

Figura 3-1.

Una par de cerezas se presentan como gráfico típico.

Ahora vamos a mirar el gráfico un poco más de cerca. En la carpeta de archivos

de ejercicios de Lesson03 de este curso, busque el archivo cherries_photo.jpg y

ábralo en una aplicación de edición de gráficos como Jasc Paint Shop Pro, Adobe

Photoshop o Microsoft Paint. Si a continuación amplía drásticamente la imagen,

podrá ver los tamaños reales (píxeles) que la conforman, según se muestra en la

figura 3-2. Si amplía las cerezas en el monitor, verá que los colores y formas de

la imagen varían de un píxel a otro, o de un cuadrado a otro.

Sugerencia

Si no tiene una aplicación de edición de gráficos en el sistema o si desea

probar una “completita” de uso generalizado, visite el sitio www.jasc.com

(en inglés) y descargue una versión gratuita de prueba de Paint Shop Pro.

Hablaremos más acerca de las aplicaciones de edición de gráficos más

adelante en esta lección.

40

Figura 3-2.

Cuando amplía una imagen en línea, puede ver sus píxeles.

¡Pruébelo!

Con el archivo cherries_photo.jpg abierto en el programa de gráficos, amplíe la

imagen con la opción Zoom o Magnifying Glass (Ampliar) del programa. Para

ilustrar mejor el funcionamiento de los píxeles, decremente gradualmente la

vista de la imagen (o “aleje” la vista) hasta un tamaño más visible, según se

muestra aquí:

Si lo hace lentamente, puede ver cómo se mezclan los píxeles para crear una

imagen nítida.

41

Ahora que conoce los píxeles, podemos hablar un poco sobre paletas. Una paleta

es, simplemente, la tabla de colores usados en un gráfico. Algunos gráficos Web

(en concreto los guardados con el formato de archivo GIF, según se describe en

la sección siguiente) usan una colección limitada de colores. Puede asignar una

paleta a una imagen o puede dejar que el programa de gráficos genere una

automáticamente a medida que crea y edita la imagen. Una paleta GIF puede

contener hasta 256 colores pero algunas imágenes usan menos. Por ejemplo, si

examina la figura 3-3, en el gráfico de las cerezas se usan 8 colores mientras que

en el de las guindillas se utilizan 128. Observe el tamaño de las imágenes: el

gráfico de las cerezas tiene 3 KB (es muy pequeño) y el de las guindillas tiene

7 KB (casi tan pequeño como el gráfico GIF de las cerezas).

Figura 3-3.

La paleta del gráfico de las cerezas contiene 8 colores y la de las guindillas contiene 128.

Jerga: una paleta contiene el

conjunto de colores usados

en un gráfico.

42

Generalmente, la mayor parte de las aplicaciones gráficas permiten ver los

colores incluidos en la paleta de un gráfico GIF. Además, puede reducir el

tamaño de una imagen GIF si reduce o limita el número de colores de su paleta.

Y, como probablemente sabrá, cuanto menor es el tamaño de los archivos, más

rápida es su descarga en el Web.

¡Pruébelo!

En la carpeta de archivos de ejercicios Lesson03 de este curso, busque el

archivo cherries.gif o firebreath.gif y ábralo en una aplicación de edición de

gráficos, como Jasc Paint Shop Pro, Adobe Photoshop o Microsoft Paint.

Para mostrar la paleta de la imagen en Paint Shop Pro, seleccione Edit Palette

(Editar paleta) en el menú Colors (Colores). En Photoshop, seleccione Mode

(Modo) en el menú Image (Imagen) y, después, seleccione Color Table (Tabla

de colores). (Sabemos que cada paquete gráfico tiene sus propias opciones de

menú; proporcionamos los dos comandos anteriores para darle una idea del tipo

de comando que debería buscar en la aplicación de gráficos.)

Como hemos mencionado, las paletas entran en escena cuando usamos

imágenes GIF. Nos damos cuenta de que no hemos definido lo que son las

imágenes GIF aún, ni ningún otro formato de imagen que se admita en el Web.

Sin embargo, ahora que ya ha tanteado la naturaleza de los píxeles y las paletas,

avanzaremos y explicaremos los formatos de archivos de gráficos que puede

usar en el Web. Hablaremos más acerca de las paletas cuando expliquemos las

imágenes GIF más adelante en esta lección.

Formatos de archivos gráficos

Como puede que recuerde, en la lección 1 afirmamos que cada gráfico de

una página Web se almacena como archivo independiente. Para refrescar la

memoria, vuelva de nuevo a la figura 1-4 de la lección 1. Observe los nombres

de los dos archivos de imágenes.

El nombre del archivo de la figura de la barra de título termina con la

extensión .gif (afs_title.gif) y el de la otra figura termina con .jpg

(4members.jpg). Las extensiones de archivos gráficos se basan en los mismos

principios que el resto de formatos de archivo. Por ejemplo, si ve un archivo

en el escritorio denominado lista_regalos_vacaciones.doc, sabe por la extensión

.doc que probablemente se trate de un documento de Microsoft Word y deseará

abrirlo en Word (especialmente, si sospecha que usted es una de las personas

que aparecen en la lista de regalos). De forma similar, si ve un archivo en el

escritorio denominado facturas.xls, sabe que .xls indica que se trata de un

documento de Microsoft Excel, con lo que podría abrirlo en Excel (aunque

puede que desee evitar los archivos que se llamen facturas). En relación a los

gráficos Web, las páginas Web pueden incluir imágenes gráficas que usen las

extensiones de archivo .gif o .jpeg (o .jpg) porque los exploradores Web más

populares pueden mostrar los archivos GIF y JPEG.

Jerga: en algunas

aplicaciones de gráficos Web

y documentación, también se

hace referencia a una paleta

como una tabla de consulta

de colores (CLUT, Color

Look-up Table ) o,

simplemente, como

una tabla de colores.

43

Gráficos GIF

Los gráficos GIF constituyen el tipo de imagen que se admite en más sitios del

Web, lo que significa que casi todos los exploradores (los viejos, los nuevos y

los de en medio) pueden mostrarlos. GIF son las siglas en inglés de Graphics

Interchange Format (Formato de intercambio de gráficos) CompuServe creó

este formato en la década de los ochenta como un medio eficaz de transmitir

imágenes a través de las redes de datos. La principal ventaja del formato GIF es

que las imágenes GIF suelen ser pequeñas, lo que significa que se descargan y

se muestran rápidamente.

Como se ha mencionado anteriormente en esta lección, las imágenes GIF usan

y admiten paletas de hasta 256 colores (lo que los convierte en gráficos de

8 bits). Puesto que admiten un número limitado de colores, debe usarlos para

áreas de colores básicos, logotipos, líneas, iconos, ilustraciones de dibujos

animados, botones, reglas horizontales, viñetas, fondos y otros elementos

gráficos que requieran pocos colores. La figura 3-4 muestra algunos ejemplos

de usos típicos de imágenes GIF.

Figura 3-4.

Las líneas, reglas horizontales, botones, viñetas y texto gráfico son algunos usos típicos de los archivos GIF.

Jerga: GIF (Graphics

Interchange Format) es un

formato de archivo gráfico

usado para crear imágenes

y utilizarlas en Internet.

Las imágenes GIF pueden

contener hasta 256 colores.

44

Además de adaptarse a una paleta y ser pequeños y eficaces, los gráficos GIF

permiten realizar tres efectos especiales: el entrelazado, la transparencia y la

animación.

■ Gráficos GIF entrelazados Normalmente, una imagen GIF

aparece en la pantalla fila por fila, de arriba a bajo, como si se

desplegara una persiana. Si lo desea, como diseñador de la página

Web puede cambiar la forma en que un gráfico GIF se descarga en

el monitor si lo guarda como archivo GIF entrelazado. Un gráfico

GIF entrelazado se muestra en la pantalla del usuario borroso o

dentado al principio y, después, se va definiendo gradualmente. La

figura 3-5 muestra un archivo GIF entrelazado en medio de la

descarga. La figura de la izquierda muestra la imagen antes de

descargarse completamente y la de la derecha cuando se ha

descargado del todo.

Figura 3-5.

En conexiones de Internet más lentas, puede ver cómo un archivo GIF

entrelazado se muestra borroso antes de completarse su descarga.

El uso de archivos GIF entrelazados es conveniente cuando se desea transmitir

la idea principal de una imagen a los lectores mientras esperan a que finalice

la descarga. Su desventaja es que tienen un tamaño ligeramente mayor que las

imágenes GIF convencionales (no entrelazadas). Por lo tanto, en los botones,

iconos y gráficos pequeños, es mejor utilizar el formato GIF convencional.

■ Gráficos GIF transparentes Estos archivos (gráficos GIF que

usan el formato GIF89a) permiten diseñar iconos, logotipos y otros

elementos que parecen estar recortados y, por lo tanto, posibilitan

que el fondo de la página Web se vea a través de ciertas zonas de

la imagen. Por ejemplo, como puede ver a la derecha de la figura

3-6, el fondo se muestra a través del GIF transparente para crear la

ilusión de una imagen no rectangular.

Si utiliza una conexión a

Internet rápida, por ejemplo

un módem por cable,

probablemente no verá los

efectos del entrelazado.

45

Figura 3-6.

Al comparar una imagen GIF estándar con una imagen GIF transparente se

aprecia cómo permite la transparencia que el color de fondo de una página

Web (o trama) se vea.

Al crear un GIF transparente, básicamente se especifica un color

único en la imagen para que actúe como el color transparente. Por

ejemplo, podría colorear el fondo de una imagen en rosa fuerte y

asignar a continuación este color como color transparente de la

imagen; pero debe asegurarse de que el rosa fuerte no aparezca

en ningún otro lugar en ella o creará puntos transparentes que no

desea. Cuando un explorador encuentra el color transparente, no

muestra ninguna información del gráfico en el área que tenga ese

color, lo que permite ver el fondo de la página Web.

■ Gráficos GIF animados El último “truco” de los GIF tiene que ver

con la animación. Mediante herramientas de animación GIF y

programas de edición de gráficos, puede crear capas de GIF y

guardarlas en una “pila” para crear animaciones sencillas. Cuando

un explorador muestra las imágenes GIF apiladas, presenta cada

una detrás de la otra. Esta técnica es similar al modo en que

antiguamente se veía una película pasando tarjetas, que era

popular mucho antes de que la mayor parte de nosotros

existiéramos. Los iconos en movimiento, los botones giratorios y

algunos anuncios en pancartas son los principales ejemplos de GIF

animados. La figura 3-7 ilustra la teoría que subyace tras los GIF

animados. Como verá posteriormente en esta lección, puede

descargar gráficos GIF animados y herramientas de animación de

GIF en el Web.

Si el color de fondo de un

gráfico GIF coincide con el

de la página Web, por

ejemplo en una imagen con

un fondo blanco con una

página Web también con el

fondo blanco, se consigue

automáticamente la ilusión

de transparencia.

46

Figura 3-7.

Se puede mostrar una serie de imágenes GIF en sucesión para crear animaciones.

Sugerencia

Las imágenes prediseñadas de Microsoft Office XP incluyen gráficos GIF

animados y transparentes que puede usar en sus páginas Web. Para

identificar que una imagen prediseñada es un GIF animado, busque una

estrella dorada en la esquina inferior derecha de la imagen en miniatura, en

la Galería multimedia. Para identificar que una imagen prediseñada es un

fondo transparente, busque elementos que parezcan estar “recortados” en

la Galería multimedia. Puede probar la transparencia de una imagen si

inserta la página en un documento de Word que tenga un fondo en color.

Colores “simplificados” para el Web

Como sabe, todos los sistemas informáticos no se crean igual. Muchas personas

tardan bastante en seguir el vertiginoso ritmo que experimenta el desarrollo de

hardware en el sector informático. Por lo tanto, cuando diseñe páginas Web,

debería tener en mente que no todas las personas podrán tener acceso a sus

páginas si éstas requieren el hardware de pantalla más fantástico y novedoso.

De hecho, aproximadamente el 10 por ciento de todos los usuarios que

exploran el Web se limitan a ver las páginas Web en 256 colores (aunque

muchos de los sistemas nuevos muestran millones de colores, así que el

problema del diseño en 256 colores probablemente pronto será una

consideración del pasado). Por lo tanto, durante el próximo par de años, cuando

diseñe páginas Web y cree imágenes GIF, podría plantearse utilizar únicamente

colores que los monitores de 256 colores puedan mostrar sin dificultad.

Los colores universales se conocen como simplificados para el Web o

simplificados para los exploradores. Si una página Web usa colores que no

sean los simplificados para el Web, los sistemas que sólo admitan 256 colores

recurrirán a interpolar aquéllos que no sean estándar.

Jerga: interpolación hace

referencia al modelo de

puntos aleatorio que resulta

cuando los colores se

intentan igualar mezclando

otros similares disponibles

en una paleta limitada.

47

Para evitar la interpolación, limítese a usar los 216 colores simplificados para el

Web. (Los otros 40 que faltan hasta 256 se reservan para ser utilizados por el

sistema informático.) Si desea ver la paleta de colores simplificados para el

Web, abra el archivo palette216.gif en un programa de gráficos. Este archivo se

encuentra en la carpeta Lesson03 de este curso, en el disco duro. Para ver los

colores en formato de gráfico, visite el sitio www.creationguide.com/colorchart

(en inglés). Los programas de edición de gráficos suelen proporcionar una

paleta simplificada para el Web que puede cargar cuando trabaje con

imágenes GIF.

Gráficos JPEG

Además de los gráficos GIF, sus páginas Web probablemente incluyan

imágenes JPEG. El formato de archivo de imagen JPEG fue creado por Joint

Photographic Experts Group y adoptó su nombre. Este formato de imagen

admite millones de colores y pueden utilizarlo los exploradores casi de forma

universal. (Técnicamente hablando, las imágenes JPEG admiten colores de 24

bits, por lo que también se conocen como imágenes a todo color o de color

verdadero.) Dado que los archivos JPEG pueden contener millones de colores,

con frecuencia muestran imágenes fotográficas en línea.

Al trabajar con gráficos JPEG para sus páginas Web, puede especificar si desea

guardarlos como JPEG estándar o progresivo:

■ Estándar Cuando guarda una imagen como archivo JPEG

estándar, se carga línea por línea desde el principio de la pantalla

hacia abajo, del mismo modo que se descargan los GIF de manera

predeterminada.

■ Progresivo Cuando guarda una imagen como archivo JPEG

progresivo, la imagen aparece primero de forma borrosa y,

después, se enfoca a medida que se descargan los datos de la

misma (igual que los archivos GIF entrelazados). Con las rápidas

velocidades de conexión a Internet, el procesamiento progresivo

podría no ser evidente para los usuarios enseguida; en cambio,

tras un momento, la imagen parecerá “emerger” en la página.

Según nuestra experiencia, los archivos JPEG progresivos parecen

crear archivos más pequeños y se descargan ligeramente más

rápido que los archivos JPEG estándar.

Otro parámetro de configuración del formato JPEG que puede usar para su

provecho es la compresión. La compresión es un proceso que reduce el tamaño

del archivo de una imagen deshaciéndose de parte de la información del color.

La compresión de JPEG se denomina esquema de compresión con pérdida

porque, una vez comprimida una imagen, la información eliminada se pierde.

Por suerte, si tiene cuidado, las personas que vean la imagen en línea no podrán

percibir con facilidad la pérdida de información.

Jerga: JPEG (Joint

Photographic Experts Group)

es un formato de archivo

gráfico usado para mostrar

imágenes de calidad

fotográfica y otras imágenes

en color en Internet. El

formato de archivo JPEG

puede admitir millones de

colores.

Cuando una imagen JPEG

se muestra en un sistema

que sólo admite color de 8

bits (256 colores), el

explorador reduce los colores

de la imagen para usar los de

la paleta Web y se produce

cierta interpolación.

48

Sugerencia

Al incrementar la compresión de una imagen JPEG, guarde siempre

primero una copia de la imagen original. Después, use el comando Guardar

como cada vez que vuelva a comprimir el archivo para crear otro nuevo.

Una vez comprimida una imagen con el esquema de compresión de JPEG,

la información que se quita se pierde.

Tenga en cuenta que cuanto más comprima una imagen, más pequeño se

volverá el tamaño del archivo de la imagen, pero la imagen resultante no será

tan nítida como otra menos comprimida. Por lo tanto, debe experimentar con

varias configuraciones de compresión al configurar imágenes JPEG en las

páginas Web.

En este punto, los conceptos de archivos JPEG progresivos y comprimidos no

le deben preocupar, pero aún no hemos explicado cómo configurar estas

opciones en una imagen JPEG. Afortunadamente, la mayor parte de los

programas de edición de imágenes hacen que la especificación de parámetros

en los archivos JPEG sea bastante sencilla. Para tener acceso a las opciones de

configuración de un archivo JPEG en Paint Shop Pro, siga estos pasos:

1 Abra la imagen JPEG en Paint Shop Pro. (Puede practicar con

cualquiera de las imágenes fruit.jpg provided para este curso que

se encuentran en la carpeta Lesson03 del disco duro.)

2 Elija Save As (Guardar como) en el menú File (Archivo) para

mostrar el cuadro de diálogo Save As (Guardar como).

3 Especifique un nombre de archivo nuevo y, después, haga clic en

Options (Opciones) para tener acceso al cuadro de diálogo Save

Options (Guardar opciones), que se muestra en la figura 3-8.

Figura 3-8.

El cuadro de diálogo Save Options (Guardar opciones) permite configurar las

opciones de compresión y procesamiento de JPEG en Paint Shop Pro.

49

4 Especifique una opción de codificación (Standard o Progressive,

estándar o progresiva, respectivamente), seleccione una opción de

compresión, haga clic en OK (Aceptar) y, después, haga clic en

Save (Guardar).

Para configurar las opciones de JPEG en Photoshop, siga estos pasos:

1 Abra la imagen JPEG en Photoshop.

2 Elija Save (Guardar) en el menú File (Archivo).

3 Especifique un nombre de archivo y haga clic en Save (Guardar).

Se abre el cuadro de diálogo JPEG Options (Opciones de JPEG).

Mueva el control deslizante Quality (Calidad) para especificar las

opciones de compresión en el cuadro de diálogo JPEG Options

(Opciones de JPEG) y haga clic en OK (Aceptar).

Gráficos PNG

El tercer y último tipo de gráfico que trataremos en esta lección es el formato

de archivo PNG. PNG son las siglas en inglés de Portable Network Graphics,

que significa gráfico portátil de red. Al igual que los archivos GIF, los archivos

PNG son pequeños, se cargan con rapidez y admiten la transparencia. Los

archivos PNG se transmiten más rápido que los GIF, pero sólo los exploradores

más recientes permiten usarlos.

Inicialmente, el formato de archivo PNG se ideó porque Unisys, el fabricante

del algoritmo de compresión de GIF, decidió hacer cumplir la patente para

dicho algoritmo, lo que significa que los proveedores de software tenían que

pagar para usarlo. Pero en realidad no necesita conocer los detalles del debate

entre PNG y GIF. Simplemente tiene que saber que la mayor parte de los

exploradores nuevos (incluidos Microsoft Internet Explorer 5 y las versiones

posteriores) pueden mostrar las imágenes PNG, pero casi ningún diseñador

Web las usa en deferencia a los usuarios que exploran el Web con exploradores

anteriores o menos avanzados tecnológicamente. Por ello, quizás tampoco deba

usar archivos PNG en sus páginas Web.

Nota

Internet Explorer para Microsoft Windows comenzó a incorporar algunas

imágenes PNG en 1997 y a proporcionar compatibilidad con este formato

en las versiones para Macintosh de Internet Explorer en 2000. Por lo tanto,

el formato de archivo PNG está empezando lentamente a implantarse a

medida que los desarrolladores observan el porcentaje de usuarios que

tienen acceso a los exploradores más actualizados o más avanzados

desde el punto de vista tecnológico. Desde la perspectiva de un

desarrollador, no hay ninguna razón en este momento para arriesgarse a

perder visitantes usando el formato de archivo PNG cuando el formato GIF

está disponible, es igual de fácil de usar y se reconoce en casi todos los

exploradores (con independencia de la versión).

Jerga: PNG (Portable Network Graphics) es un formato de archivo gráfico diseñado para reemplazar a las imágenes GIF en Internet.

50

Cuestiones de tamaño

La última consideración “técnica” importante que abarcamos en esta lección es

el tamaño del archivo, que está directamente relacionado con la velocidad de la

descarga. Como aficionado a explorar el Web, probablemente se haya

encontrado a sí mismo tamborileando con el dedo sobre el mouse (ratón) con

impaciencia mientras espera a ver las páginas que tardan más de 10 segundos

en mostrarse o, lo que es más probable aún, haciendo clic en algún otro lugar

antes de que la página lenta llegue a verse completa alguna vez. Como

diseñador Web, necesita contener ese sentimiento de impaciencia. Cuando

diseñe páginas Web y utilice arte Web, siempre debe tener un ojo en el diseño y

el otro en la perspectiva del usuario. (¡Eso suena casi doloroso!)

Al emplear arte Web, puede sacar provecho de ciertas técnicas que le ayudarán

a conseguir que el tamaño de los archivos sea manejable. Ya hemos tratado

algunos temas clave en esta lección que pueden ayudar a reducir el tamaño de

los archivos y acelerar el tiempo de descarga, como son:

■ Evitar la interpolación en imágenes GIF con colores simplificados

para el Web siempre que sea posible, especialmente en áreas

grandes de colores básicos. (Piense un poco: antes de leer esta

lección, esa frase no habría tenido ningún sentido para usted.)

■ Configurar las imágenes JPEG para que se procesen de forma

progresiva.

■ Comprimir las imágenes JPEG para reducir el tamaño de

los archivos.

Además de usar las tres técnicas anteriores en relación a los archivos gráficos,

puede controlar la velocidad de las descargas si cambia el tamaño de las

imágenes, las recorta y usa imágenes en miniatura. En las secciones siguientes

describimos brevemente cada técnica. Tenga en cuenta que la mecánica real

que subyace tras la realización de ciertas tareas varía en función de las

herramientas de edición gráfica.

Cambio de tamaño de los gráficos

Una de las mejores formas de ahorrar tiempo de descarga es cambiar

físicamente el tamaño de las imágenes en un editor de gráficos. Observe

que hablamos de cambiar el tamaño de la imagen y no simplemente su

visualización. Al acercar o alejar una imagen, se cambia la visualización de la

misma pero ello no repercute en el tamaño ni en las dimensiones reales del

archivo. Intente que el tamaño de las imágenes se aproxime al que desee

utilizar para mostrarlas en la página Web. La figura 3-9 muestra el cuadro de

diálogo Resize (Cambiar tamaño) que se usa en Paint Shop Pro para cambiar el

tamaño de una imagen. Para tener acceso al cuadro de diálogo Resize (Cambiar

tamaño), abra la imagen y seleccione Resize en el menú Image (Imagen).

Normalmente, deberá

asegurarse de que el botón

de opción Mantener relación

de aspecto (o el equivalente

del programa de gráficos

que utilice) está activado al

cambiar el tamaño de los

gráficos o, de lo contrario,

podría distorsionar las

imágenes.

51

Tenga en cuenta que las imágenes más pequeñas tienen un tamaño de archivo

menor, con lo que tardan menos en descargarse.

Figura 3-9.

Cambiar el amaño de las imágenes por el real en Paint Shop Pro ayuda a

reducir el tiempo de descarga.

¡Pruébelo!

Para experimentar con el cambio de tamaño de las imágenes, abra una imagen

JPEG en un editor de gráficos y cambie la configuración de ancho o alto de la

misma. Use la imagen Use the apples.jpg de la carpeta Lesson03, en el disco

duro, correspondiente a este curso. Guarde la imagen JPEG y, a continuación,

repita el proceso varias veces con diversas medidas, cambiando el nombre de

cada versión por otro único y significativo (como apples400a.jpg para una

imagen cuyo tamaño se haya cambiado a 400 píxeles de ancho). Una vez

creadas algunas imágenes con varios tamaños, véalas de forma local en la

ventana del explorador, es decir, explore las figuras mediante la barra de

herramientas de dirección del explorador o arrastre los iconos del nombre

de archivo de las imágenes JPEG hasta la ventana del mismo.

52

Truco rápido: el tamaño de las

imágenes debe ser justo el adecuado

Cuando empiece a diseñar páginas Web por primera vez, quizás no sepa qué

tamaño deben tener las imágenes. Como ayuda para cambiar el tamaño de un

gráfico por el que desee que tenga en la página Web, puede usar un programa

de edición Web, como Microsoft FrontPage.

Con el objeto de determinar el tamaño óptimo de un gráfico Web, siga estos

pasos:

1 Inserte el gráfico en una página Web en blanco en FrontPage, por

ejemplo, y arrastre los controladores de selección de la imagen

para cambiar su tamaño.

2 Cuando la imagen tenga el tamaño que desee, muestre sus

propiedades (en FrontPage, haga clic con el botón secundario del

mouse en el gráfico y seleccione Picture Properties (Propiedades

de imagen) en el menú emergente), observe los parámetros de

ancho y alto de la imagen, y anótelos.

3 Vuelva a abrir la imagen en el programa de edición de gráficos y

cambie el tamaño del gráfico especificando los números que copió

en FrontPage (o en el programa de edición Web que haya usado)

en el cuadro de diálogo correspondiente. Por ejemplo, en Paint

Shop Pro, para abrir el cuadro de diálogo Resize (Cambiar

tamaño), debe elegir Resize en el menú Image (Imagen) y, en MS

Paint, el cuadro de diálogo Attributes (Atributos) se abre al elegir

Attributes en el menú Image (Imagen).

Recorte de las imágenes

Además de cambiar el tamaño de una imagen, puede recortarla para reducir su

tamaño. Al recortar una imagen, elimina la parte de la misma que no desea usar.

El recorte se usa con frecuencia para quitar las partes no deseadas o innecesarias

de una fotografía. Por ejemplo, podría recortar la imagen apples.jpg de la figura

3-9 para mostrar un primer plano de la manzana verde situada en medio de las

rojas en el escurridor. En la figura 3-10 se muestran líneas de recorte (los guiones

que rodean a la porción de la imagen que desea conservar) en la imagen

apples.jpg, que tiene un tamaño de 50 KB, y el resultado de recortar la imagen

apples.jpg. La versión recortada tiene 6 KB, únicamente.

Jerga: recortar una imagen

es eliminar una parte de la

misma, por ejemplo, las

porciones innecesarias

de un gráfico.

53

Figura 3-10.

Las marcas de recorte indican la porción de una imagen que se va a usar como

gráfico Web. La imagen recortada sólo contiene la información limitada por

las marcas de recorte.

¡Pruébelo!

Para recortar una imagen, siga estos pasos:

1 Abra una imagen en un editor de gráficos.

2 Haga clic en la herramienta de selección (que suele tener forma de

rectángulo o cuadrado con guiones en la barra de herramientas de

la aplicación).

3 Haga clic en la imagen y arrástrela para trazar el contorno del área

de la imagen que desee conservar. (Si se equivoca, presione la

tecla Esc y vuelva a intentarlo.)

4 Cuando tenga un área seleccionada, elija Crop To Selection

(Recortar la selección), en Paint Shop Pro, o Crop (Recortar), en

Photoshop, en el menú Image (Imagen) o seleccione un comando

similar en su programa de edición de gráficos.

54

Uso de vistas en miniatura

Cuando domine las artes que le permiten cambiar el tamaño de las imágenes

y recortarlas, estará en disposición de usar vistas en miniatura. Una vista en

miniatura es una imagen pequeña que está vinculada a una mayor. (La imagen

mayor suele ser la misma que la vista en miniatura aunque, en su momento,

vimos algunos usos creativos de las miniaturas.) Si utiliza vistas en miniatura

en una página, sus visitantes podrán optar por ver la imagen pequeña y

apañarse con ella, o hacer clic en la vista en miniatura para ver la imagen

mayor. En otras palabras, al utilizar vistas en miniatura, les ofrece la opción

de descargar las imágenes grandes si están dispuestos a soportar tiempos de

descarga más prolongados.

El truco para usar vistas en miniatura es crear dos gráficos con nombres

diferentes. Normalmente, debe usar la misma imagen para ambos gráficos y

hacer que una sea pequeña, y el tiempo que se tarda en descargarla es menor,

mientras que la otra es más grande (aunque lo mejor optimizada que se pueda,

por supuesto) y su tiempo de descarga es más largo. A continuación, se muestra

la imagen pequeña en la página Web y se vincula a la mayor. La figura 3-11

exhibe dos vistas en miniatura. La de la izquierda muestra toda la imagen

vinculada y la de la derecha una porción recortada del gráfico vinculado. La

figura 3-11 también presenta el gráfico mayor que está vinculado a las vistas en

miniatura. Al hacer clic en alguna de las vistas en miniatura mostradas en la

figura 3-11, puede abrir una ventana que presente una vista de la imagen

apples.jpg.

Figura 3-11.

Ambas vistas en miniatura de las manzanas se vinculan a una versión de la

imagen apples.jpg cuyo tamaño puede modificarse.

Jerga: una vista en miniatura

es una versión o una parte

más pequeña de un gráfico.

Con frecuencia, en las

páginas Web, los gráficos

en miniatura tienen

hipervínculos a las versiones

de mayor tamaño de los

mismos.

55

Uso de fotografías

Probablemente, en su casa tendrá, como mínimo, una caja llena de recursos de

arte Web de primera clase: las fotografías. Puede usar tanto las nuevas como las

antiguas con el fin de aportar arte a sus páginas Web. El truco es conseguir que

la imagen impresa se convierta en información que pueda entender un equipo

informático. Para ello, puede usar alguna de las opciones siguientes:

■ Escáneres Básicamente, un escáner toma una imagen de la

fotografía y guarda información de la misma en forma de archivo

en un equipo. Una vez digitalizada la imagen, puede tratar el

archivo de igual modo que otros archivos gráficos. Puede usar

cualquier escáner plano del mercado para crear gráficos Web. No

necesita conseguir la mejor máquina. Nosotros utilizamos

escáneres con un precio moderado para digitalizar la mayor parte

de nuestras imágenes. Si no dispone de un escáner y no piensa

comprar ninguno, puede pagar para que le digitalicen sus

imágenes. Por ejemplo, muchos centros de fotocopias también

digitalizan las imágenes por un módico precio.

■ Servicios de revelado de películas y fotografía en línea La

próxima vez que deje un carrete para que lo revelen, compruebe

los servicios adicionales que le ofrecen. Muchos servicios de

revelado de películas además de revelarlas pueden copiarlas en

CD, exponer las imágenes en el Web, enviarlas a través de correo

electrónico, crear impresiones de calidad a partir de imágenes

digitales y proporcionar otros numerosos servicios de

procesamiento digital.

■ Cámaras digitales Una tercera opción para obtener imágenes

fotográficas es usar una cámara digital. Las cámaras digitales

permiten tomar una fotografía e, instantáneamente, enviar la

imagen a un equipo. Si está pensando en comprar una cámara

digital, a continuación se enumeran algunas cuestiones que

debería considerar:

Costo Sepa cuál es su presupuesto antes de comprar: la

mayor parte de la gente no necesita la mejor cámara digital

de la gama para hacer su trabajo. Pero, una vez dicho

esto, no acepte el modelo del “año pasado” sólo por

ahorrar algo de dinero. Los fabricantes están respondiendo

a la creciente demanda de cámaras digitales; por lo tanto,

están produciendo más cámaras, con lo que se reduce el

costo por unidad, y mejorando sus características. En

consecuencia, comprar una cámara nueva en una tienda

especializada con frecuencia puede dar mejor resultado

que adquirir un modelo anterior en un almacén de saldos.

56

Características Las características de una cámara digital

son numerosas pero, si es usted principiante, compruebe

que disponga tanto de automáticas como manuales.

Probablemente desee usar las opciones automáticas al

principio para llegar a dominar la fotografía digital.

Después, cuando se encuentre cómodo usando la cámara,

puede empezar a experimentar con las configuraciones

manuales. Además, si compra la cámara sólo con el fin de

obtener imágenes para el Web, puede apañarse con una

de 1 megapíxel o menos, pero si desea poder usarlas en

línea y en copias impresas, podría intentar conseguir una

cámara de 1 megapíxel como mínimo, preferiblemente de

2 ó 3 megapíxeles, si puede elegir. Las cámaras con más

megapíxeles crean mejores imágenes y le permiten

imprimir fotografías de calidad a mayor tamaño que el de

una instantánea estándar.

Finalmente, recuerde que las cámaras digitales son,

básicamente, PCs de mano. Si va a tomar imágenes en

toda clase de circunstancias y condiciones, compruebe

que elige una cámara que resista una tormenta. Si piensa

practicar la fotografía en condiciones verdaderamente

extremas, examine algunos de los modelos

“impermeables”.

■ Formato de los archivos Por último, una cuestión importante que

debe considerar cuando compra una cámara es determinar lo fácil

que va a resultarle sacar las fotografías de ella y pasarlas a un

equipo. ¿Va a necesitar cables? ¿Puede usar puertos infrarrojos?

¿Almacena la cámara las imágenes en un CD? Compruebe que

sabe cómo transfiere la cámara las imágenes y que le satisface el

método antes de comprarla.

Para finalizar, como último consejo de esta lección, independientemente de

cómo y cuándo obtenga los gráficos para las páginas Web, recuerde optimizar

las imágenes y guardarlas como archivos GIF y JPEG. Asegúrese de que el

tamaño de los archivos de las imágenes es lo más pequeño posible sin

comprometer la calidad. Además, almacene las imágenes en una ubicación

central en el disco duro y no olvide dar a cada gráfico un nombre único y

significativo.

Jerga: un megapíxel hace

referencia a un millón de

píxeles y es un término

usado en relación a la

resolución de dispositivos

gráficos, como los

escáneres, la cámaras

digitales y los monitores.

57

Puntos clave

■ Los gráficos en línea están compuestos de píxeles.

■ La mayor parte de los exploradores admiten imágenes GIF y

JPEG.

■ Las imágenes GIF son pequeñas, sólo pueden usar una paleta de

256 colores y se descargan rápidamente.

■ Los archivos GIF pueden ser entrelazados, transparentes o

animados.

■ Las imágenes JPEG pueden contener millones de colores y se

suelen usar para mostrar fotografías.

■ De forma predeterminada, los archivos GIF y JPEG se muestran

línea por línea de arriba abajo, pero esto se puede cambiar si se

crean imágenes GIF entrelazadas o archivos JPEG progresivos.

■ El esquema de compresión de JPEG permite reducir el tamaño de

las imágenes JPEG, pero la compresión se realiza “con pérdida”,

por lo que debe efectuarla con cuidado (recuerde, cuanto más

comprima una imagen, menor calidad tendrá).

■ Cambie el tamaño de los gráficos en un programa de edición para

que sea lo más pequeño posible.

■ Recortar las imágenes reduce el tamaño de los archivos.

■ Considere usar vistas en miniatura para vincularlas a gráficos en

línea más grandes.

■ Los elementos gráficos de las páginas Web incluyen fotografías,

ilustraciones, botones, logotipos, iconos, viñetas, reglas

horizontales, texto gráfico y fondos.

■ Puede adquirir gráficos Web en colecciones de imágenes

prediseñadas de CD-ROM, software gratuito en línea, proveedores

de gráficos en línea y diseñadores gráficos.

■ Puede crear imágenes personalizadas con diversos programas de

software y digitalizando dibujos realizados a mano.

■ Las fotografías se pueden convertir en archivos de imagen en

servicios de revelado y a través de escáneres y cámaras digitales.

58

Acopio de utensilios Una vez completada esta lección, podrá:

Saber lo que va a necesitar para mostrar páginas Web en línea.

Buscar espacio para un sitio Web en un servidor en Internet.

Elegir software para crear, modificar y tratar las páginas Web.

Probar las páginas Web en varios exploradores.

Cuando cree páginas Web, al menos deberá tener un par de herramientas de

creación de páginas Web, probablemente más. Le advertimos de que no

hablamos de hardware: tenemos la certeza de que se ha dado cuenta de la

importancia de disponer de un equipo informático además de, posiblemente,

acceso a un escáner, una impresora y una cámara (digital o estándar). En esta

lección, nuestro interés recae en la serie de programas que puede usar para

crear, modificar y tratar páginas Web. Como le mostramos en las siguientes

lecciones, puede crear, modificar y publicar páginas Web con diversas

aplicaciones y herramientas software, y encontramos que las armas que

preferimos se mezclan y coinciden con frecuencia. Igualmente, conocer sus

opciones le ayudará a crear el entorno de trabajo que mejor se adapte a sus

necesidades y estilo personal.

Para comenzar, echemos un vistazo a dos de las “herramientas ” más básicas

que necesitará en su proceso de creación Web: una conexión a Internet y

espacio en un servidor.

Conexión a Internet y espacio en

un servidor

No importa lo asombrosa que sea su página Web, vivirá en el anonimato

virtual si no puede conectarse a Internet y transferir sus archivos a un servidor.

Recuerde de la lección 1 que un servidor es un equipo muy eficaz que se

conecta a las líneas de datos de la red troncal de Internet, almacena archivos de

páginas Web y responde a las solicitudes de los usuarios para ver las páginas

Web almacenadas. Debe estar conectado a Internet o tener acceso a una

conexión a la gran red si desea demostrar su presencia en línea. Es verdad que

puede crear muchas páginas Web sin una conexión a Internet pero fallará en el

intento cuando llegue el momento de publicarlas en línea.

Sugerencia

Si usa su equipo para explorar el Web, puede tener la certeza de que

dispone de una conexión a Internet. Con una conexión a Internet de acceso

telefónico estándar, puede copiar los archivos de las páginas Web desde

un equipo a un servidor que esté conectado a Internet.

LECCIÓN 4

59

Además de disponer de conexión a Internet como requisito básico, puede que

deba adquirir algo de espacio en un servidor para sus archivos Web. Decimos

puede porque en numerosas ocasiones el espacio se ofrece gratuitamente o se

proporciona junto con otros servicios de pago. Por ejemplo, su proveedor de

servicios Internet (ISP, Internet Service Provider) podría darle 30 MB, por

ejemplo, de espacio gratuito en el servidor además de su conexión a Internet.

La noción de espacio gratuito atrapa a muchos por sorpresa, pero existe y es una

práctica en aumento en la red. No es de extrañar, sin embargo, que encuentre

beneficios en comprar espacio en un servidor además de usar el gratuito.

Espacio gratuito en línea

Es cierto. Puede crear y mostrar un sitio Web en este momento gratis, es decir,

sin pagar dinero. Todo lo que necesita es emplear un poco de tiempo y esfuerzo

creativo. No requiere ningún software adicional ni cuentas de Internet de pago,

sólo precisa su texto y unas cuantas imágenes, si desea incluirlas. Desde luego,

se enfrenta a un par de limitaciones de poca importancia si sigue este camino

(por ejemplo, al uso de una dirección Web larga y, posiblemente, a ciertas

restricciones en las opciones del diseño de la página), pero, dependiendo de

cuál sea su objetivo último, estas limitaciones podrían no afectarle demasiado.

Así que considérese informado: hay espacio gratuito en el Web. Como

mencionamos anteriormente, nos hemos encontrado con más de una persona

que se quedó sinceramente impresionada al descubrir este hecho.

La forma más habitual de convertirse en el orgulloso propietario de una página

Web gratuita es acudir a un grupo o comunidad en línea. Una de las ventajas de

esto, además del factor de gratuidad, es que la mayor parte de los grupos y

comunidades en línea permiten la creación de páginas Web proporcionando

para ello plantillas o asistentes que puede usar.

Entre los numerosos grupos y comunidades gratuitos, rápidamente nos vienen a

la mente tres bastante populares:

■ Grupos Web de MSN

(http://groups.msn.com/home.msnw?pgmarket=es-es)

■ Tripod de Lycos (http://www.tripod.lycos.es)

■ Yahoo! GeoCities (http://es.geocities.yahoo.com/)

Las desventajas principales de los grupos y comunidades en línea son que su

dirección Web suele ser bastante larga, generalmente se dispone de una

cantidad limitada de espacio en el servidor, las opciones de diseño de páginas

resultan, con frecuencia, algo restringidas o dirigidas, puede tener que tolerar

anuncios emergentes cada vez que visite su página y, si no desea usar las

plantillas de un grupo o comunidad, la personalización de la página puede

resultar difícil en ocasiones.

La mayor parte de las

compañías que patrocinan

los grupos y comunidades en

línea obtienen sus ganancias

a través de los anuncios, de

la venta de actualizaciones y

características, y de servicios

complementarios.

Jerga: un grupo o

comunidad en línea es un

área virtual en el Web donde

las personas con intereses

similares reúnen y comparten

información.

60

De forma similar al uso de los grupos y comunidades en línea, otra forma

gratuita de conseguir un espacio en el Web es crear páginas específicas de un

sitio. Al explorar Internet, puede encontrar que algunos sitios Web ofrecen

espacio gratuito a los miembros registrados. Por ejemplo, puede crear una

página Acerca de mí en eBay (un sitio de subastas en línea que se encuentra

en www.es.ebay.com), si es uno de los participantes registrados en el sitio. El

propósito de las páginas Acerca de mí de este sitio es presentar a los usuarios

de eBay al resto de personas que lo visitan.

Y otro tipo de espacio en el Web en línea “gratuito”, que técnicamente no es

tal, es el que obtiene de su ISP. Puesto que lo más probable es que firme un

cheque para su ISP de forma regular (o al menos compruebe que se le ha

cargado el pago en su cuenta), no podemos etiquetar exactamente el espacio

en los servidores del ISP como gratuito; es más bien un espacio disponible con

prepago. Cuando se suscribió a su ISP actual (suponiendo que tenga alguno),

probablemente le informó con voz excitada o con una frase que terminaba en

un signo de admiración que conseguía “¡X megabytes de espacio gratuito en el

servidor!”. En ese momento, es probable que no supiera lo que eso significaba

así que simplemente pensó: “¡Oh, qué bien!” y pasó al siguiente detalle. Ahora

que está pensando en crear una página Web, debe volver a visitar la cláusula

acerca del “espacio gratuito en el servidor” de su contrato con el ISP. Los más

probable es que encuentre que tiene en alguna parte entre 10 MB y 50 MB de

espacio a su disposición en un servidor.

¡Pruébelo!

Para buscar espacio gratuito en el Web, escriba free Web space (o espacio

gratuito en el Web) en cualquier motor de búsqueda; se le recompensará con un

montón de sitios que le permiten alojar sus páginas. O bien, revise el sitio Web

100 Best Free Web Services en www.100best-free-web-space.com (en inglés).

En este sitio se proporcionan exámenes y clasificaciones de sitios, lo que lo

convierte en un gran recurso para localizar y examinar servicios de alojamiento

de sitios Web (o hosts).

61

La ventaja de usar el espacio en los servidores de su ISP es que ya está pagando

por él, así que también podría emplearlo. El inconveniente es que

probablemente tendrá que convivir con una voluminosa dirección Web, similar

a las de las comunidades y grupos en línea. Por ejemplo, un par de nuestros ISP

(tenemos varios) conceden espacio “gratuito” en sus servidores, pero los

formatos de las direcciones Web son www.dominio.com/~nombredeusuario/

nombredearchivo.html y members.dominio.net/ nombredeusuario/

nombredearchivo.html. Para la mayoría de las personas, estos formatos son un

poco largos y no resultan fáciles de recordar. Otra virtud de usar el espacio de

los servidores de los ISP con respecto al de los de los grupos y comunidades en

línea es que, generalmente, se tiene mayor libertad en relación a la forma en

que se crean y muestran las páginas (lo que podría ser un inconveniente si

prefiere trabajar con las plantillas preconfiguradas que parecen ser una práctica

estándar en numerosos sitios de comunidades en línea).

Con todo, la cuestión principal en relación a los sitios gratuitos en línea es que

el espacio en el Web está a su disposición de forma instantánea. Y, siempre que

no tenga inconveniente en usar una dirección Web larguísima para su página

principal, sufrir ciertas limitaciones de diseño y, posiblemente, que aparezcan

anuncios emergentes, entonces el espacio gratuito es una estupenda forma de

iniciarse en el Web.

Adquisición de espacio en un servidor

En contraposición al uso de espacio gratuito en el Web, puede desembolsar

algo de dinero para que una página Web use la dirección Web que prefiera

siempre que alguien no haya llegado antes. Si toma este camino, debe recordar

las dos consideraciones siguientes: necesita elegir y registrar el nombre de una

dirección Web (como creationguide.com) y suscribirse a un proveedor que

aloje (o almacene) sus páginas Web, a menos que vaya a poner en

funcionamiento su propio servidor, pero ese tema es mejor dejarlo para libros

más avanzados. Echemos un vistazo al modo de registrar una dirección Web y

obtener un servicio de alojamiento.

Registro de una dirección Web

Antes de seguir, vamos a concretar cierto vocabulario sencillo. Para ser más

precisos, en lugar de dirección Web, realmente deberíamos decir nombre de

dominio. Someramente (mucho), un nombre de dominio es una dirección Web.

Como tal vez sepa, todas las direcciones Web son en realidad grupos de

números, denominados números de Protocolo Internet (IP, Internet Protocol),

que actúan como direcciones de Internet. Siendo un humano, probablemente

también sabrá que, para la mayor parte de la gente, recordar un nombre con

sentido es mucho más fácil que recordar una serie de números divididos por

puntos. Por ello, el Sistema de nombres de dominio (DNS, Domain Name

System) vio la luz. En esencia, DNS simplemente asigna nombres de texto

(como creationguide.com) a las direcciones de Internet con números (como

207.155.248.5). Por lo tanto, para que parezca que sabe lo que hace, debería

usar el término nombre de dominio en lugar de dirección Web.

62

Cuando esté listo para obtener su propio nombre de dominio, podrá elegir un

nombre (como creationguide.com, aunque podemos decirle ahora mismo que

ya lo tiene algún otro), ver si está disponible y, si lo está, registrarlo a su

nombre a cambio de una cuota nominal anual. Por nominal, queremos decir un

precio cercano a lo que cuesta una buena comida o un poco más.

Elegir y registrar un nombre de dominio Web es sencillo, una vez que tiene

acceso a un sitio de registro legítimo. Afortunadamente, InterNIC (que se

encuentra bajo el paraguas del Departamento de comercio de Estados Unidos)

aloja una página Web que enumera todos los sitios Web de registro de nombres

de dominio aceptables. Muchos sitios de alojamiento también ofrecen servicios

de registro de nombres (como explicamos en la sección siguiente). Para ver una

lista oficial de registradores de nombres de dominio, visite

www.internic.net/alpha.html (en inglés).

Mientras visita el sitio de InterNIC, examine unos cuantos sitios

de registro para revisar sus listas de precios y directivas (o visite

www.creationguide.com/resources, en inglés, y le dirigiremos a un par de

nuestros servicios de alojamiento Web favoritos). Cuando haya encontrado un

sitio que le guste, por lo general puede escribir el nombre de dominio propuesto

en un cuadro de texto. Entonces, se le informará si está disponible. Si es así, se

establece un contrato de pago (normalmente, mediante tarjeta de crédito) y el

sitio registra su dominio en InterNIC. El siguiente paso es buscar un ISP que

aloje su nombre de dominio y sus páginas Web.

Búsqueda de espacio para un dominio

Si no utiliza su propio servidor, que es lo que hace la mayor parte de la gente,

el próximo paso es buscar un ISP u otro servicio de alojamiento dispuesto a

proporcionar un lugar para su nombre de dominio, es decir, si no completó este

paso durante el proceso de registro de su dominio (según se describe en la

sección precedente). Puede encontrar numerosos servicios de alojamiento en

línea; escriba Web hosting (la forma inglesa de denominar al servicio de

alojamiento de sitios Web) en cualquier motor de búsqueda y puede pasar un

día de campo investigando a los diversos proveedores. O, mejor aún, visite

http://hostindex.com (en inglés), un extenso sitio dedicado a proporcionar

información acerca de numerosos aspectos de los servicios de alojamiento

Web, incluida una lista mensual de los 25 mejores. Para finalizar, como hemos

mencionado hace un momento, puede visitar

www.creationguide.com/resources (en inglés) para buscar vínculos a los

servicios de alojamiento Web y registradores de nombres de dominio.

Independientemente de cómo lleve a cabo la búsqueda de espacio para su sitio

Web, recuerde comprobar algunas cuestiones clave, como son las cuotas, la

configuración de la red, si dispone de Extensiones de servidor de Microsoft

FrontPage (si utiliza características de FrontPage) y la confiabilidad. Como

promedio, los servicios básicos de alojamiento Web cobran una cuota mensual

nominal además de otra cuota única de configuración (consulte el sitio Web de

cada servicio de alojamiento para conocer los precios específicos). A menos

que las tarifas le parezcan monstruosas, no deje que determinen su decisión.

63

Antes de firmar ningún contrato con un servicio de alojamiento de sitios Web,

averigüe todos los aspectos relacionados con lo siguiente:

■ Ancho de banda Muchas compañías de servicios de

alojamientoWeb se conectan a Internet mediante líneas T1 y T3; si

no llegan a esto, bien podría elegir otra compañía. Básicamente,

una línea T1 puede transportar hasta 1,5 megabits de datos por

segundo mientras que una línea T3 puede transportar 45 megabits

por segundo. Por lo tanto, una conexión T3 proporciona mucho

más ancho de banda y permite una mayor velocidad. Además de

las conexiones a Internet, debe comprobar cuántos clientes se

alojan en cada equipo. Si un servicio de alojamiento sobrecarga

sus equipos, el rendimiento se verá afectado a pesar de las líneas

de conexión de alta velocidad.

■ Espacio Cuando se suscribe a los servicios de alojamiento Web, los

ISP y las compañías de alojamiento le asignan una cierta cantidad

de espacio en un servidor (de igual modo que su equipo tiene una

cierta cantidad de espacio de disco que puede usar para almacenar

archivos). La mayoría de los ISP y servicios de alojamiento ofrecen

más espacio en sus servidores de lo que necesitará (al menos

inicialmente). Sin embargo, debe conseguir 10 MB como mínimo.

Muchos hosts proporcionan a partir de 25 MB.

■ Soporte técnico Éste es un elemento importante en la elección

de una compañía de alojamiento de sitios Web. Si tiene problemas,

deseará acudir a alguien que pueda ayudarle. La consideración

más básica sobre el soporte técnico que debe tener en cuenta es

el número de horas al día que el personal de este servicio está

disponible. Muchos sitios lo ofrecen de forma ininterrumpida, así

que busque esta característica cuando esté eliminando posibles

compañías. Un soporte técnico continuado es importante porque

es muy probable que actualice sus páginas durante las horas que

tenga libres, así que en ese momento es cuando seguramente más

ayuda necesite. Además, compruebe si el sitio indica lo que cobra

por cada incidencia de soporte. Finalmente, mire si puede

identificar con facilidad el modo en que la compañía ofrece el

servicio, incluyendo los números de teléfono (mire si hay números

gratuitos), números de fax, direcciones de correo electrónico,

informes en línea, listas de preguntas más frecuentes y una

dirección de correo disponible.

64

■ Extras Es posible que desee comprobar qué “extras” ofrece

cada compañía para atraer clientes. Por ejemplo, muchos

servicios de alojamiento Web proporcionan cuentas de correo

electrónico que puede usar con su nombre de dominio (como

mm@creationguide.com o jc@creationguide.com). Generalmente,

puede configurar entre 5 y 20 cuentas de correo electrónico con

un único contrato de alojamiento Web. Otras características que

podría investigar incluyen el costo de agregar espacio al sitio, si

éste crece demasiado como para caber en su espacio asignado

originalmente; el costo de aumentar la cuota de tráfico, si visitan

su sitio más personas de lo previsto; si se admite el uso de

Extensiones de servidor de FrontPage (si utiliza FrontPage)

y de la transmisión de multimedia; y si se dispone de servicios

complementarios, como la adición de grupos de charla y

características de búsqueda.

Ahora que ha estudiado su nombre de dominio, los servicios de alojamiento y

las opciones básicas de espacio Web, podemos quedarnos más cerca de casa y

hablar sobre las aplicaciones de escritorio. En la sección siguiente, echaremos

un vistazo a las aplicaciones de software que puede usar en su sistema para

crear, modificar y publicar páginas Web, y sus elementos.

Herramientas de creación de

páginas Web

En esta sección, damos una idea general de los tipos de herramientas que podría

necesitar para crear páginas Web, enumeramos algunas que encontramos de

utilidad y le señalamos el camino para hallar otras que se adapten mejor a sus

necesidades. Como podría imaginar, gracias a la popularidad en auge del Web,

muchos proveedores de software se han puesto manos a la obra para producir

programas de creación de páginas Web. En esta lección, presentamos

numerosas herramientas (pero de ningún modo nos acercamos a todas las

utilidades disponibles) y en las lecciones siguientes mostramos cómo usar

algunas de ellas para crear sitios Web completos. Sin embargo, al final le

dejamos a usted la responsabilidad de elegir los paquetes de software con los

que se sienta más cómodo.

Para simplificar nuestro enfoque de esta lección, hemos dividido las

herramientas de desarrollo de páginas Web básicas en las tres categorías

principales siguientes:

■ Procesadores de texto y editores HTML

■ Aplicaciones de gráficos

■ Utilidades FTP

65

Procesadores de texto y editores HTML

Sobre todo, cuando cree páginas Web, empleará la mayor cantidad de tiempo

utilizando un procesador de texto o un editor HTML. Los editores se usan para

crear archivos HTML que contienen instrucciones destinadas a los

exploradores Web y proporcionan el contenido de las páginas Web. Puede

trabajar con un editor básico, en el que especifica el código HTML de forma

manual, o con uno más avanzado del tipo WYSIWYG (siglas correspondientes

a What You See Is What You Get, en inglés, que traducido es algo así como “lo

que ve es lo que consigue”), que crea código HTML de forma automática

mientras usted escribe el texto, inserta las imágenes y arrastra los elementos en

una vista de diseño de páginas Web. Finalmente, y como cabía esperar, algunas

aplicaciones ponen un pie en ambos campos al calificarse como editores

básicos mejorados pero no tanto como las aplicaciones de edición WYSIWYG

(damos un repaso rápido a los tres tipos de editores en las siguientes páginas).

Sugerencia

Puede descargar muchas de las aplicaciones (o versiones de

demostración) mencionadas en esta lección en sitios de shareware como

www.tucows.com, www.shareware.com o www.download.com (los tres en

inglés). La máxima del shareware podría ser “pruébelo antes de

comprarlo”. Cuando descarga un programa de shareware, lo prueba

durante un tiempo de forma gratuita. Si le gusta, envía a su creador la

cuota que le solicita. Por desgracia, en ocasiones es más una estrategia

mercantil que otra cosa.

Procesadores de texto y editores HTML básicos

Si utiliza un procesador de texto básico, debe escribir todos los comandos

HTML y el texto de la página Web en un documento vacío. El más básico de

los procesadores de texto de este tipo es la aplicación Bloc de notas, que se

incluye con el sistema operativo Microsoft Windows. En la figura 4-1 se

muestra el Bloc de notas con algo de texto HTML.

66

Figura 4-1.

Muchos diseñadores Web acuden al Bloc de notas cuando codifican a mano

documentos HTML.

Puede que se pregunte por qué los diseñadores Web optarían por codificar

manualmente las páginas Web. La respuesta varía pero, en su mayor parte, lo

hacen por alguna de las razones siguiente:

■ Control La codificación a mano permite usar los códigos que se

desea en lugar de los que inserta un editor WYSIWYG. Por

ejemplo, puede que desee utilizar dos saltos de línea en blanco

pero un editor WYSIWYG podría insertar un marcador de párrafo.

Además, algunos editores WYSIWIG crean código “confuso”; la

codificación a mano puede mantener el código ordenado y fácil de

leer, y su alineación se puede configurar según las preferencias del

diseñador.

■ Correcciones rápidas Saber cómo crear y modificar manualmente

código HTML permite a los diseñadores Web hacer cambios en

una página Web con rapidez, con independencia de cómo se

creara inicialmente. Por ejemplo, si desea actualizar la fecha de

copyright de su sitio, puede realizar y guardar el cambio en un

procesador de texto en menos tiempo del que se tardaría

simplemente en abrir la página en un editor WYSIWYG.

67

■ Limpieza del código Muchos editores HTML avanzados (como se

explica más adelante en esta lección) agregan código adicional a los

documentos. Si sabe cómo crear y modificar código HTML estándar,

puede limpiar al código extra y reducir el tamaño de los archivos

HTML. Y recuerde: en el Web, el tamaño importa y cuanto más

pequeño mejor. Además, puesto que los editores HTML sólo están

diseñados por personas, a veces, pueden codificar mal las páginas.

En estos casos, puede ahorrarse mucho tiempo e irritaciones si

cambia el código HTML directamente en lugar de seguir la pista a la

opción del cuadro de diálogo apropiado del editor HTML.

■ Precisión Otro hábito de los editores HTML avanzados es que, en

ocasiones, usan etiquetas HTML que no todos los exploradores

admiten. Puede usar procesadores de texto para modificar el

código HTML de modo que se ajuste a las capacidades de la

mayor parte de los exploradores.

Por supuesto, aprender HTML es un requisito primordial para crear páginas en

un procesador de texto. En la lección 6, le guiamos en la utilización de HTML

con el fin de crear una página Web para que se haga una idea del formato

HTML. (No se preocupe: puede hacerlo.) Sin embargo, esa lección sólo es una

introducción. Necesitará tener acceso a otros recursos si desea conocer de

verdad HTML. Si le interesa aprender HTML o tener cerca una referencia de

este lenguaje, encontrará una generosa colección de libros sobre dicho tema

ocupando las estanterías de las librerías de su ciudad. También puede encontrar

páginas y páginas de información en línea. (Hemos hecho una lista de algunas

referencias de HTML al final de la lección 6.)

Los procesadores de texto pueden variar desde los que apenas le echan una

mano a los que vienen totalmente equipados con características personalizadas

específicas de HTML. Como ayuda para ilustrar la variedad, hemos

proporcionado una breve descripción de algunos de los más usados en

este momento:

■ BBEdit (www.barebones.com/products/bbedit.html) (en inglés)

Este editor HTML de Bare Bones Software es popular entre los

desarrolladores Web de Macintosh. BBEdit permite modificar,

buscar, transformar y tratar texto. Al igual que otros editores HTML,

ofrece una serie de características con diversos fines además de

otras desarrolladas específicamente para satisfacer las

necesidades de los creadores de código HTML.

■ HomeSite (www.macromedia.com/software/homesite) (en inglés)

Macromedia HomeSite es una herramienta de diseño de código

HTML muy usada entre diversos desarrolladores profesionales de

sitios Web. Este editor de texto incluye características específicas

de HTML que sirven de ayuda en la creación de páginas HTML

efectivas y claras. Por ejemplo, incluye características de inspección

de etiquetas HTML, edición en ventanas divididas, mapas de

imágenes y algunas otras funcionalidades. Puede descargar una

versión de prueba de 30 días para examinar el producto.

68

■ Bloc de notas Este programa viene con el sistema operativo

Microsoft Windows y sus funcionalidades son casi tan limitadas

como cuando se usa como procesador de texto. Tenga cuidado,

sin embargo: si trabaja en un documento muy largo, no podrá usar

el Bloc de notas. En los documentos más largos, tendrá que usar

WordPad (que se describe más adelante en esta lista).

■ NoteTab (www.notetab.com) (en inglés) El procesador de textos

NoteTab, de Fookes Software, es el Bloc de notas con esteroides

(fortalecido, queremos decir). Este programa incluye varias

características que pueden simplificar la codificación a mano de

páginas Web. Por ejemplo, puede mostrar utilidades HTML en el

lateral izquierdo del panel de la ventana en la barra de clips. A

continuación, puede insertar código HTML haciendo doble clic en

los elementos de menús y, por ejemplo, puede hacer clic en el

elemento de menú Nueva página Web para insertar la estructura

básica del código para todo un documento HTML. Un

inconveniente, típico de muchos procesadores de texto, es que el

programa gratuito de prueba sólo permite deshacer una operación;

si desea deshacer varias acciones, tendrá que restaurar la

información manualmente.

■ TextPad (www.textpad.com) (en inglés) Este programa, creado por

Helios Software Solutions, sirve como otra versión reforzada del

Bloc de notas. En TextPad, mientras trabaja puede ver un menú de

etiquetas HTML junto con las fichas de los documentos. TextPad

permite deshacer varias acciones, lo que resulta práctico cuando

se juega con HTML.

■ UltraEdit (www.ultraedit.com) (en inglés) IDM Computer Solutions

proporciona este programa como paquete de edición de texto que

se puede usar durante un período de prueba de 45 días. Una vez

descargada e instalada la aplicación, debe hacer clic en About

UltraEdit (Acerca de UltraEdit) en el menú Help (Ayuda) y,

después, cerrar la ventana Help para activar el programa. Aunque

esta aplicación está diseñada para usuarios algo avanzados, como

los programadores, incluye características que podrían venirle

bien. Por ejemplo, puede mostrar vistas previas de las páginas en

el explorador con facilidad y usar el diccionario que le acompaña

para corregir la ortografía de los documentos.

■ WordPad Este programa es un paso más allá del Bloc de notas.

Si utiliza Windows, puede abrir WordPad si hace clic en Inicio,

selecciona Programas y Accesorios, y después hace clic en

WordPad. Este programa ofrece más características de

procesamiento de textos que el Bloc de notas y admite documentos

más largos. La figura 4-2 muestra un documento HTML en

WordPad.

69

Figura 4-2.

WordPad sirve como un buen procesador de texto cuando el documento en el que se trabaja es demasiado largo para que el Bloc de notas pueda tratarlo.

¡Pruébelo!

Muestre la página Web que prefiera en un explorador y haga clic en Source

(Código fuente) o View Source (Ver código fuente) en el menú View (Ver). Se

abre un documento del Bloc de notas que muestra una versión de texto del

código HTML de la página.

Procesadores de texto y editores HTML de grado medio

El siguiente escalafón en los editores HTML empieza a entrar en el territorio

de WYSIWYG. Podríamos llamar a los procesadores de texto de grado medio

“aplicaciones WYSIWYG ligeras” porque ofrecen características de procesador

de texto junto con una serie limitada de capacidades avanzadas de los editores

HTML. Dado que la mayor parte de las aplicaciones son procesadores de texto

o editores HTML completos, sólo aconsejamos una aplicación de esta

categoría: Microsoft Word versión 2002.

Word 2002 permite usar una interfaz de procesamiento de texto conocida para

crear documentos HTML a través del comando Guardar como. Cuando guarda

un documento de Word como página Web, Word crea automáticamente el

código fuente HTML. En la figura 4-3 se ilustra un documento HTML en las

vistas Diseño Web y Código fuente HTML.

Al igual que Word versión

2002, otros programas de

Office XP (versión 2002),

como Microsoft Excel y

Microsoft PowerPoint,

permiten guardar los

documentos como

páginas Web.

70

Figura 4-3.

Word 2002 ofrece una vista Diseño Web y otra vista Código fuente HTML.

Editores HTML avanzados

El tercer grupo de editores HTML incluye las aplicaciones avanzadas que

permiten crear y modificar páginas Web mediante interfaces gráficas. En la

mayor parte de los editores avanzados, puede ver y modificar el código fuente

HTML directamente además de trabajar en la interfaz WYSIWYG. Asimismo,

la mayoría de los editores avanzados ofrecen una característica de presentación

de vista previa que permite ver cómo aparecerá una página Web en línea antes

de verla en el explorador. Las características específicas para el Web se suelen

incorporar también en los editores HTML avanzados. (Sabemos que esto

último suena un poco impreciso, pero al crear una página Web en FrontPage,

en la lección 7, le introduciremos en el uso de algunas herramientas específicas

para el Web de modo que podrá saber a lo que nos referimos.) Los editores

HTML avanzados más utilizados están muy bien documentados en línea así

que, en lugar de desperdiciar espacio en estas páginas resumiendo las

estadísticas en línea, hemos proporcionado varias direcciones URL para los

sitios Web donde se ofrecen las aplicaciones que aparecen en nuestra breve

lista. Aunque hay otros editores disponibles, estos seis son algunos de los

programas más populares. (Revise la dirección del sitio Web de cada producto

para poder comparar más fácilmente las características y precios.)

■ Adobe GoLive (www.adobe.es/products/golive/main.html)

■ CoffeeCup HTML Editor (coffeecup.com/editor) (en inglés)

■ HotDog Professional (http://www.sausage.com/hotdog-

professional.html) (en inglés)

■ UltraEdit (www.ultraedit.com) (en inglés); este editor puede estar

disponible en su versión localizada

■ Macromedia Dreamweaver

(www.macromedia.com/es/software/dreamweaver)

71

■ Microsoft FrontPage 2002

(www.microsoft.com/spain/Office/frontpage/default.asp); también

se incluye con el conjunto de programas Microsoft Office 2000 XP

Developer

■ NetObjects Fusion MX

(www.netobjects.com/products/html/nfmx.html) (en inglés)

Nota

Además de HotDog Professional, Sausage Software ofrece un editor HTML

WYSIWYG para principiantes, denominado HotDog PageWiz, y un editor

HTML para niños mayores de seis años, denominado HotDog Junior.

Explore la página principal de Sausage Software y encontrará otras

herramientas útiles de creación de páginas Web. Después de todo, si

nos pregunta, cualquier compañía llamada Sausage Software (Software

Salchicha) que ofrezca editores HTML que se llamen HotDog (Perrito

caliente) merece un poco de atención adicional.

Entre las aplicaciones anteriores, Dreamweaver probablemente sea el editor

Web más popular (aunque el más difícil de aprender) entre los profesionales

de diseño, por diversas razones, como es el hecho de que mantiene el código

escrito a mano, permite a los usuarios obtener una vista previa de las páginas

en varios exploradores y realiza comprobaciones automáticas de los posibles

conflictos que existan entre ellos. Por otro lado, FrontPage (que se ilustra en

la figura 4-4) es el editor HTML avanzado más sencillo de aprender para los

principiantes y proporciona código HTML bastante limpio. Además, es popular

entre los usuarios empresariales. Como hemos mencionado anteriormente, se

hará una idea de cómo crear páginas Web en FrontPage en la lección 7.

Nota

Tenga en cuenta que el entorno de creación de una página Web no es fijo.

En ocasiones, es más rápido usar una aplicación WYSIWYG avanzada (en

especial, al cambiar el tamaño de las tablas), pero otras veces, un cambio

rápido en el Bloc de notas nos será más útil.

72

Figura 4-4.

Microsoft FrontPage es un programa avanzado de desarrollo Web muy utilizado, que resulta bastante fácil de aprender.

Aplicaciones de gráficos

Cuando se trata de desarrollar una página Web, las aplicaciones de gráficos

ocupan un segundo meritoso lugar detrás de los muy importantes editores

HTML o procesadores de texto. Después de todo, la mayor parte de las páginas

usa gráficos y tendrá que crear o retocar los que incluya en las suyas. Por lo

tanto, necesitará tener un paquete de gráficos instalado en su sistema.

Nuestros programas favoritos (o al menos los que parece que usamos con más

frecuencia) son Jasc Paint Shop Pro y Adobe Photoshop; ambos aparecen en la

lista de aplicaciones de gráficos con la que está a punto de toparse a

continuación del párrafo siguiente.

73

Con independencia del paquete de gráficos que utilice, las cinco habilidades

más importantes que tiene que adquirir al usar un programa de gráficos son

recortar, cortar, cambiar el tamaño, cambiar el color y guardar los archivos en

otro formato diferente. Por tanto, revise los archivos de ayuda de su aplicación

para pulir su técnica. Ahora, aquí tiene cinco programas de gráficos conocidos

junto con sus direcciones Web (le recomendamos que visite los sitios Web

enumerados con el fin de conseguir los detalles y precios de los productos):

■ Fireworks (www.macromedia.com/es/software/fireworks) Esta

aplicación es fácil de usar y especialmente cómoda cuanto se

necesita crear botones y otros gráficos básicos para un sitio Web.

Macromedia desarrolló Fireworks específicamente para la creación

de gráficos Web.

■ LView Pro (www.lview.com/index1024.htm) (en inglés) Este

programa de gráficos shareware es muy conocido. Incluye varias

características típicas de gráficos además de utilidades de páginas

Web, por ejemplo, una herramienta para crear páginas de galerías

de fotografías en línea.

■ Paint Microsoft Paint es un programa de gráficos que se incluye

con Windows. Se trata de un paquete de gráficos con menos

funciones en comparación con otros pero resulta una herramienta

gráfica práctica cuando se está en un apuro o se desea hacer

rápidamente algunos ajustes poco importantes.

■ Paint Shop Pro (www.jasc.com/products/paintshoppro) (en inglés)

Este programa de gráficos tiene muchas características y un precio

razonable, y lo utilizan muchos diseñadores. Visite el sitio Web de

Jasc y descargue un programa de demostración gratuito.

■ Photoshop (www.adobe.es/products/photoshop/main.html)

Probablemente sea el programa de edición de imágenes más

importante. Puede resultarle un poco difícil de utilizar cuando

empiece a aprenderlo pero una vez que domine los comandos,

le gustará mucho la flexibilidad de la aplicación. Con frecuencia,

imitamos los sitios donde se usa Photoshop antes de crear páginas

Web reales en un editor HTML. Su principal desventaja es que es

bastante caro para los diseñadores casuales.

Además de las aplicaciones de gráficos anteriores, también puede usar

programas de ilustraciones para crear gráficos basados en vectores. En un

gráfico basado en un vector, puede mover, cambiar el tamaño y manipular

de cualquier otro modo los elementos de una imagen, por ejemplo, puede

girar una forma completa. Los programas de ilustraciones basadas en vectores

que suelen resultar prácticos al crear páginas Web son Adobe Illustrator

(www.adobe.es/products/illustrator/main.html), Macromedia Freehand

(www.macromedia.com/es/software/freehand) y CorelDraw

(www.es.corel.com).

Jerga: los gráficos basados

en vectores son imágenes

hechas con líneas y formas

en lugar de con píxeles y

sombras.

74

¡Pruébelo!

Si desea incluir un GIF animado en una página Web pero no le entusiasma la

idea de comenzar desde el principio, se alegrará de oír que el CD-ROM de

multimedia de Office XP contiene varias animaciones pequeñas que puede usar

en las páginas Web. Para insertar un GIF animado:

1 Abra Word (u otra aplicación de Office), muestre el menú Insertar,

elija Imagen y, después, haga clic en Galería de imágenes.

2 En el panel de Galería de imágenes, busque un elemento de la

galería y haga doble clic en alguna imagen que muestre una

estrella dorada.

3 Para ver una animación en acción, abra el menú Archivo y haga

clic en Vista previa de páginas Web.

Si sigue nuestra sugerencia anterior, debería insertar los componentes animados

con moderación. Las animaciones pueden llegar a resultar molestas, lo que

quitaría mérito a su página en lugar de aportarle encanto.

Programas de animación de gráficos

GIF, de mapas de imágenes, de

creación de pancartas y mucho más

Las páginas Web incorporan todo tipo de baratijas, incluidos elementos

desarrollados con tecnologías muy sonoras como Páginas Active Server, Java,

Flash, etcétera. Además, puede crear archivos de audio y vídeo para usarlos en

el Web. Aunque nos fascinan tanto estos temas como las técnicas de diseño de

páginas Web básicas, la creación de estos elementos no es uno de los objetivos

de estas lecciones. Nuestro fin es lograr que consiga crear y utilizar páginas

Web. Por lo tanto, nos guardaremos los caprichos para otro curso. Si tiene

ganas de adquirir algunas mañas adicionales para la elaboración de sus páginas,

le sugerimos que empiece por aprender a crear GIF animados, mapas de

imágenes y pancartas. A continuación se enumeran algunos sitios que puede

encontrar de utilidad:

■ l

Tenga en cuenta que puede encontrar un buen número de programas de

creación de archivos GIF animados, de pancartas y de mapas de imágenes

en línea. Además, algunos de los programas de gráficos que mencionamos

anteriormente en esta lección (como Fireworks y Paint Shop Pro) tienen

integradas características de mapas de imágenes e imágenes GIF animadas.

75

Las tres aplicaciones anteriores se enumeran simplemente como ejemplos que

pueden ayudarle a comenzar su búsqueda.

Utilidades FTP

En último lugar, puede que necesite alguna de esas misteriosas utilidades FTP.

En realidad, las utilidades FTP no son en absoluto misteriosas, pero siempre

que hacemos mención a las siglas “FTP” ante personas que nunca las habían

oído antes, el color parece huir de su cara. Básicamente, las utilidades FTP son

programas que permiten copiar archivos enteros de un equipo a otro a través de

Internet. Por ejemplo, siempre que completamos una lección, copiamos con

FTP sus gráficos en Microsoft Press, en la ciudad de Redmond (en Washington,

Estados Unidos), incluso aunque estemos en el (demasiado) soleado Arizona y

en el (demasiado) lluvioso Oregon.

Sugerencia

Es posible que no necesite usar un programa FTP si va a crear una página

Web en un grupo o comunidad en línea. Asimismo, si usa el Asistente para

la publicación en Web de Microsoft, Mis sitios de red o una utilidad de

publicación de un editor HTML avanzado con el fin de cargar las páginas,

no tendrá que usar un programa FTP en principio. Sin embargo, finalmente

podría desear usarlo para eliminar, copiar y administrar de cualquier otra

forma los archivos en línea. En la lección 8, le ponemos al corriente de los

detalles de la administración de archivos en línea, porque sentirse cómodo

usando una aplicación FTP puede resultarle práctico.

Puede encontrar numerosos programas FTP en línea, muchos de los cuales son

aplicaciones shareware. Los programas FTP más usados son, entre otros:

■ BulletProof FTP (www.bpftp.com) (en inglés) Esta aplicación

proporciona una intuitiva interfaz con la funcionalidad de “arrastrar

y colocar”, al igual que otros de los programas FTP más usados.

76

■ CoffeeCup Direct FTP (www.coffeecup.com/software) (en inglés)

Este programa sirve como aplicación FTP que también permite la

edición de páginas HTML en línea. En la página de descargas del

sitio, encontrará que CoffeeCup Software también proporciona

aplicaciones de mapas de imágenes, creación de botones y

creación de GIF animados, entre otros productos.

■ CuteFTP (www.globalscape.com/cuteftp) (en inglés) Esta popular

aplicación FTP de fácil uso lleva mucho tiempo utilizándose y es

nuestra favorita para PC. Con CuteFTP, puede arrastrar y colocar

los archivos para transferirlos desde su equipo a otro equipo

remoto y viceversa. Entre otras aplicaciones, GlobalSCAPE

también ofrece un editor HTML (CuteHTML) y una aplicación de

mapas de imágenes (CuteMAP).

■ Fetch (www.fetchsoftworks.com) (en inglés) Recientemente,

Fetch se ha actualizado con la versión 4.0.2 (antes, ¡llevaba sin

actualizarse desde 1997!). El diseño de Fetch está enfocado a

hacer que el acceso a los sitios FTP sea lo más sencillo posible.

Está disponible gratuitamente para instituciones educativas y

organizaciones sin ánimo de lucro; los demás deben pagar la

cuota de shareware.

Ahora que conoce vagamente lo que hacen los programas FTP y que puede

descargarlos del Web, no se preocupe demasiado por ellos. En este momento,

con que sepa que existen es suficiente: si no puede esperar, puede descargar

una aplicación FTP y podrá cargar sus páginas en cuanto las cree, pero no

tiene que hacerlo ahora. Le ayudaremos con los programas FTP y con la

administración de los archivos en la lección 8. Pero antes, deseamos ocuparnos

de cosas más divertidas en el resto de las lecciones.

Un poco acerca de exploradores

Estaríamos completamente perdidos si concluyéramos esta lección sin

ocuparnos de la herramienta de aplicación de software más obvia de todas:

un explorador. Necesita tener un explorador (o varios) instalado para poder

obtener una vista previa de sus páginas antes de publicarlas en línea. Recuerde

que los exploradores son las aplicaciones que interpretan las páginas HTML.

Por desgracia, no todos lo hacen exactamente de la misma forma. En

consecuencia, una página que diseñe y vea en Microsoft Internet Explorer

podría mostrarse muy fácilmente como un revoltijo espantoso en otro

explorador. Incluso las páginas bien diseñadas parecen algo diferentes en

distintos exploradores. Para ver una ilustración de este fenómeno, observe las

diversas capturas de pantalla de la figura 4-5.

Dos procesadores (o incluso

dos versiones de un

explorador) no procesan el

código HTML exactamente

del mismo modo; por lo tanto,

al diseñar páginas Web,

véalas en tantos

exploradores como sea

posible antes de publicar

el sitio.

77

En la figura 4-5, puede ver las anomalías siguientes:

■ Las viñetas predeterminadas de Netscape Navigator son mayores,

tanto en los equipos Macintosh como en los basados en PC, que

las de Internet Explorer.

■ El espacio de los márgenes (o desplazamiento) alrededor de los

perímetros de la página varía en cada explorador. Observe que las

ventanas del explorador Internet Explorer dejan más espacio de

margen alrededor del gráfico de la parte superior izquierda que las

ventanas del explorador Navigator.

Figura 4-5.

Al ver la misma página Web en varios exploradores, se demuestran las

pequeñas anomalías que surgen en las páginas cuando se ven en línea.

■ El tamaño de fuente predeterminado es más pequeño en PCs que

en equipos Macintosh tanto en Internet Explorer como en

Navigator, lo que puede afectar al modo en que se muestra y se

ajusta el texto.

■ Como consecuencia de las diferencias en la fuente y el espaciado,

encima del final de la página Web aparecen cantidades variables

de información.

■ El ancho de las ventanas de los exploradores difiere. Observe

cómo abarca el gráfico de la barra de título toda la ventana en un

par de casos y cómo aparece con un espacio en blanco adicional

en los demás.

78

Diseñamos la página Arts Camps for Kids para que funcionara bien tanto en

Internet Explorer como en Navigator, pero puede ver que sigue habiendo

ligeras diferencias que escapan del control del diseñador.

En el Web existen varios exploradores. Puede que desee o no comprobar que

sus páginas se muestran como deben en todos ellos. Para la mayor parte de los

diseñadores, con asegurarse de que las páginas se muestran de modo correcto

en los más importantes (Internet Explorer y Navigator) es suficiente;

conjuntamente, estos dos exploradores suman más del 90 por ciento de todos

los exploradores que tienen acceso a Internet. Desde luego, siempre debe

considerar su audiencia. Si sabe que los visitantes de su sitio van a usar el

explorador Opera, sería mejor que se asegurara de si ve bien en él. Para

contribuir a aumentar sus conocimientos, a continuación incluimos una lista

breve de otros exploradores que puede encontrar al acecho en el Web:

■ America Online usa una versión adaptada de Internet Explorer

(webmaster.info.aol.com) (en inglés).

■ Lynx es un explorador de texto (lynx.isc.org/current) (en inglés).

■ Mozilla es un explorador Web diseñado para quienes desean crear

productos y paquetes basados en Mozilla (una gran parte del

explorador Netscape Communicator se basa en el código de

Mozilla), pero el público general puede usar el explorador también

(www.mozilla.org) (en inglés).

■ Opera es una pequeña aplicación que exhibe un tiempo de

descarga extremadamente bajo (www.opera.com/download),

(en inglés).

Puede ser aconsejable descargar otros exploradores para ver cómo se muestran

sus páginas en ellos. Obtener una vista previa de las páginas Web simplemente

implica mostrar los archivos HTML en la ventana del explorador de forma

local, así que el proceso es rápido y sencillo. Sin embargo, lo más importante es

que se asegure de tener acceso al menos a una versión (para PC o Macintosh)

de Internet Explorer y de Navigator de modo que pueda realizar pruebas y ver

cómo quedan las páginas. No se preocupe: en los siguientes capítulos le

recordaremos algunas veces más la importancia de ver las páginas Web en

varios exploradores y en varias versiones de cada explorador, si es posible.

79

Puntos clave

■ Necesita una conexión a Internet y espacio en un servidor para

mostrar una página Web en línea.

■ Averiguará que hay espacio gratuito disponible en línea en el Web,

particularmente en los grupos y comunidades en línea.

■ Puede adquirir un nombre de dominio y comprar espacio en un

servidor para controlar por completo su sitio Web y dirección Web.

■ Puede utilizar procesadores de texto para crear páginas Web.

■ Los editores HTML abarcan desde programas que sólo usan texto

a interfaces WYSIWYG.

■ Las aplicaciones de gráficos permiten crear gráficos Web,

modificar imágenes y crear maquetas de las futuras páginas Web.

■ Puede encontrar programas de animaciones de gráficos GIF, sitios

de creación de pancartas y utilidades de mapas de imágenes

(además de montones de programas de software gratuito y

shareware).

■ Las utilidades FTP permiten copiar archivos de un equipo a otro

equipo remoto.

■ No todos los exploradores están diseñados igual: pueden mostrar

la misma página Web de diversas formas.

■ Siempre debe ver sus páginas Web en Internet Explorer y en

Netscape Navigator (como mínimo) antes de publicarlas en línea.

80

Plan de ataque Una vez completada esta lección, podrá:

Definir los objetivos de un sitio Web.

Analizar la audiencia.

Crear un a plano técnico de un sitio Web.

Diseñar una página principal y prepararse para crear un sitio.

Ahora que le desbordan los conocimientos acerca del Web, obtenidos en las

lecciones 1 a 4, vamos a guiarle en el proceso de planeamiento de un sitio Web.

Conoce todos los elementos que tiene que considerar; ahora es simplemente

cuestión de consolidar la información en algunos puntos y listas de

comprobación que debe revisar. Como probablemente habrá oído a lo largo

de su vida, pararse a pensar un poco antes de actuar puede ahorrarle más de un

dolor de cabeza. No es de extrañar que esta filosofía siga siendo válida también

en el desarrollo para el Web: un poco de preparación y previsión adelantan

mucho camino en la consecución del éxito.

Esperamos que vea esta lección como un puente entre la teoría y la práctica en

relación al Web. En las lecciones 1 a 5, hemos cubierto numerosos conceptos

básicos del diseño Web; en las lecciones 6 a 8, tendrá la oportunidad de aplicar

lo que ha aprendido a los ejercicios prácticos y proyectos en los que creará la

estructura general de tres sitios Web (uno en cada lección).

En las lecciones 6 a 8, puede volver a crear las páginas Web exactamente

como describimos o bien usar las páginas Web de ejemplo como plantillas para

personalizar las suyas propias. En cada sitio Web que le presentamos en estas

lecciones, resumimos el proceso de planeamiento que hemos completado antes

de crear la página real. En las lecciones 6 a 8 incluimos asimismo una breve

sección acerca del planeamiento, así que sabrá cómo ha evolucionado cada

página durante la fase del planeamiento del sitio y por dónde va en el desarrollo

práctico del proyecto. Si va a personalizar alguno de los sitios Web que hemos

incluido como ejemplos, tendrá que dedicar también algo de tiempo a planearlo.

Finalmente, una vez haya asimilado todos los conocimientos de este curso (y

tenemos toda la confianza en que lo hará), tendrá que dirigir sus propias sesiones

de planeamiento. Por lo tanto, diseñamos esta lección para ofrecer una idea

general de cada fase de planeamiento sucintamente y con un formato que facilite

la referencia. En el futuro, si alguna vez se impresiona ante las tareas de definir

los objetivos de un sitio Web, identificar su audiencia, diseñar un marco de

trabajo o crear sus propias páginas Web, retome este curso y vuelva a esta lección

para ayudarle a poner en marcha sus procesos de pensamiento.

LECCIÓN 5

81

Como apoyo para ilustrar el proceso de planeamiento, vamos a observar la

evolución del sitio Web de Curiosity Shoppe. En la figura 5-1 se muestra la

versión final de la página Web, en inglés, de esta tienda

(www.creationguide.com/cshoppe) (en inglés). En las secciones siguientes,

tratamos algunas de las cuestiones que consideramos al planear el sitio Web de

Curiosity Shoppe y explicamos el efecto que tuvieron nuestras decisiones en el

diseño final.

Figura 5-1.

La página principal de Curiosity Shoppe presenta un escaparate de un sitio Web para una tienda de artículos coleccionables.

Definición de los objetivos

Antes de crear una página Web o un sitio Web, primero debe abordar el

proyecto desde una perspectiva más amplia. Tiene que considerar claramente la

finalidad del sitio y sus objetivos. En concreto, debe responder a las preguntas

siguientes:

■ ¿Por qué deseo una página o un sitio Web?

■ ¿Cuáles son mis metas inmediatas para el sitio Web?

■ ¿Cuáles son mis metas a largo plazo para el sitio?

■ ¿Cuál es mi escala de tiempo?

82

Para el sitio de Curiosity Shoppe, las respuestas a las cuestiones precedentes

eran bastante sencillas. En primer lugar, los propietarios de Curiosity Shoppe

deseaban hacer que su tienda estuviera fácilmente accesible a más clientes a

través de su presencia en línea. Sus objetivos inmediatos eran informar a la

gente acerca de la tienda, proporcionar un medio de contacto y anunciar sus

productos y ubicación. Sus planes a largo plazo son ofrecer toda su gama de

productos para vender en línea y actualizar la página principal diariamente con

una oferta especial. Por último, la escala de tiempo de los propietarios del sitio

se puede resumir como sigue: él sitio estático en línea (a disposición de los

visitantes) debía estar preparado 2 meses después del comienzo de la página

principal; la característica de venta debía ser totalmente funcional 6 meses

después de poner en el Web la página principal; y una gama completa de

productos en línea debía estar disponible en los siguientes 12 meses desde

dicha fecha.

Es muy probable que sus objetivos y su escala de tiempo sean menos complejos

que los de Curiosity Shoppe. Por ejemplo, puede que lo que pretenda sea

simplemente crear un currículum, publicarlo en el Web durante un mes y

agregar actualizaciones ocasionalmente, cuando sea necesario.

Llegar a conocer al público

Cuando haya definido los objetivos de su sitio, tendrá que considerar quién va a

visitar sus páginas Web. En otras palabras, debe pensar en los destinatarios o

público pretendido. Debe tener al menos cierta percepción de las personas que

desea que visiten su espacio Web. Necesita abordar este paso del planeamiento

en el proceso porque muchas decisiones referentes al diseño y contenido se

basan en quiénes constituyen su público.

La mejor forma de llegar a conocerlos es hablar con ellos, si es posible.

Considere la posibilidad de entrevistarles o realizar una encuesta a las personas

que vayan a ver sus páginas. Por ejemplo, si está creando un sitio para la

familia, llame a sus familiares y averigüe lo que les gustaría ver en él. Además,

considere la forma en que los usuarios se conectarán a la página. ¿Son usuarios

Web típicos que usan conexiones de acceso telefónico? Si es así, haga que sus

páginas sean pequeñas y el diseño bastante sencillo. ¿Está diseñando un sitio

para jugadores en línea? Entonces saque provecho de las conexiones de alta

velocidad y las tecnologías más punteras. ¿Diseña un sitio para jóvenes? Los

colores brillantes funcionan bien. Tiene la idea. Como ayuda para analizar los

destinatarios de su sitio, responda a las cuestiones siguientes:

■ ¿Quiénes conforman el núcleo del publico previsto? Su

respuesta podría incluir categorías como clientes, alumnos,

empresarios, miembros de una familia, almas gemelas, miembros

de un club y muchos más.

■ ¿Qué desean descubrir en el sitio? Esta cuestión difiere de

preguntarse qué desea usted contarles: aquí es donde en realidad

debe escuchar a los probables usuarios del sitio para poder

diseñarlo en consecuencia.

83

■ ¿Qué grado de experiencia con el Web tienen los destinatarios

del sitio Web? Tendrá que averiguar si la mayor parte de los

usuarios serán principiantes, exploradores casuales del Web o

campeones del ciberespacio. Conocer el grado de pericia de los

usuarios es fundamental porque, aunque los más experimentados

pueden comprender con frecuencia “lo que está ocurriendo” en

sitios complejos o con un diseño exclusivo, por lo general los

principiantes requieren algo más de orientación. Por ejemplo, si

dedica el sitio a usuarios novatos, debería hacer un esfuerzo por

identificar de forma clara y coherente su estructura con elementos

sencillos de exploración; guarde los diseños y esquemas de

exploración vanguardistas para un público más avanzado.

■ ¿Qué tipos de conexiones a Internet y capacidades de ancho

de banda tendrán los usuarios? Conocer si los destinatarios se

conectan a través de un simple módem, una red corporativa interna

(conocida como una intranet) o una conexión de alta velocidad

como una Línea de suscriptor digital (DSL, Digital Subscriber Line)

marcará la diferencia en el modo en que tendrá que diseñar el sitio

Web, incluidos los tipos de elementos que incorporará. Por

ejemplo, si tiene la seguridad de que los usuarios que vean su

página van a obtener acceso al sitio Web a través de conexiones

de alta velocidad, dispondrá de más libertad para incluir clips de

vídeo y numerosos gráficos con un riesgo mínimo de perder a

alguno. Sin embargo, si incluye vídeo y muchos gráficos en un sitio

Web al que tienen accesos usuarios con conexiones de acceso

telefónico, se arriesgará a perderlos antes de que puedan ver el

sitio por completo porque, comprensiblemente, se cansarán de

esperar a que los elementos grandes se descarguen.

■ ¿Dónde se encuentra su público principal? Tendrá que

determinar si las personas visitan su sitio mientras están en el

trabajo, en la universidad, en la oficina, en la sala de estar de

su casa, en un cibercafé, en el barrio o en cualquier otro lugar.

Esta especificación tiene una estrecha relación con la cuestión

precedente: si sabe dónde se encuentra la audiencia clave, tendrá

más probabilidad de hacerse una idea acertada de los tipos de

conexiones que usarán en el acceso al sitio. Además, la ubicación

puede entrar en el juego si está diseñando un sitio regional en

lugar de uno nacional. Por ejemplo, un sitio de David Bowie podría

tener una audiencia internacional, mientras que un sitio de

vigilancia de bloques de pisos probablemente se destinaría al

barrio. Esta diferenciación es similar a las variaciones de la

información que se encuentra en una sección de primera plana de

un periódico, que se correspondería con un sitio Web con un

enfoque nacional o internacional, en comparación con la sección

local, que se correspondería con un sitio Web orientado a una

localidad.

84

■ ¿Cuál es el grupo de edad típico entre los destinatarios?

Tendrá interés en asegurarse de que su sitio atrae al grupo de

edad al que está destinado. Esta cuestión se deriva del sentido

común: tanto si le gusta como si no, puede hacer algunas

suposiciones generalizadas (aunque cautelosas) relativamente

poco importantes en función de la edad del público y estas

suposiciones pueden ayudarle en el proceso de creación de la

página Web. Conocer la edad típica de los destinatarios del sitio

(donde “típica” es la palabra clave) ayuda a tomar decisiones de

diseño apropiadas. Por ejemplo, los fondos en rosa Barbie para los

preadolescentes no quedan bien en sitios de deportes que estén

destinados a hombres de entre 18 y 40 años. Asimismo, los

parámetros de edad ayudan a elegir las palabras (particularmente,

el argot y los coloquialismos) de forma acertada. Además, la

información de edad permite crear metáforas significativas.

Finalmente, los detalles de la edad pueden ayudar a determinar

los tipos de información que se incluirá en las páginas Web.

Por ejemplo, si está creando un sitio para jóvenes, no ofrecerá

información de pólizas de seguros a todo riesgo pero podría

considerar seriamente la posibilidad de incluir un juego de

trivialidades sobre Harry Potter.

■ ¿Cómo encontrarán los usuarios el sitio? Deseará saber si los

visitantes de su sitio tienen noticias de él a través del boca a boca,

en directorios en línea, en directorios Web impresos o libretas de

teléfonos, a través de vínculos de una página “primaria”, como

resultado de una consulta en un motor de búsqueda, gracias a

anuncios comerciales pagados en TV o radio, etcétera. Así sabrá

mejor cómo anunciar y hacer propaganda de su sitio.

Sugerencia

Después de haber entrevistado, encuestado y hablado con la gente;

escuchado sus comentarios; y resumido su información, recuerde visualizar

específicamente a una persona real en lugar de un perfil genérico mientras

crea el sitio Web y diseña sus páginas.

85

Esquematización de los planos

técnicos del sitio

Una vez establecidos sus objetivos y definido su público, estará preparado para

diseñar el marco del sitio Web. Si es posible, el primer paso que siempre debe

dar es recopilar el contenido antes de llevar a cabo el diseño. La organización

del contenido, o al menos de sus conceptos principales, puede ayudarle a

organizar el sitio en conjunto de una manera lógica.

Cuando haya reunido las principales clases de información que desea incluir

en el sitio (el texto y los gráficos no tienen que estar pulidos en este momento),

debe averiguar la mejor forma de presentar la información. Por ejemplo, puede

organizar el sitio de diversas maneras, como son:

■ Alfabéticamente

■ Cronológicamente

■ Gráficamente

■ Jerárquicamente

■ Numéricamente

■ Aleatoriamente (no se recomienda, pero ahí está)

■ Por temas

La mayor parte de los sitios se organizan de forma jerárquica. Un sitio

jerárquico presenta una página principal que contiene un texto pegadizo

de introducción a sus páginas principales. Esta estructura la utilizan los

diseñadores y la aprecian en gran medida los usuarios (que en su mayoría

sólo desean usar las páginas Web y no comprender cómo se organizan).

Otro aspecto crítico (aunque ciertamente menos excitante) de la organización

del sitio tiene que ver con la asignación de nombre a los archivos. Después de

todo, básicamente el sitio está formado en su totalidad por archivos, así que su

organización debe incluir la sistematización de los mismos. Antes de que

lleguemos a la lista de comprobación del planeamiento de los sitios, vamos

a echar un vistazo a algunas de las costumbres existentes en relación a la

denominación de los archivos, que tendrá tiempo de implementar más

adelante pero sobre las que puede meditar ahora.

86

Mantenga controlados los archivos

Como ya sabe, las páginas Web suelen constar de algunos archivos que se

combinan para crear la apariencia de una sola página. Asimismo, un sitio Web

consta de varias páginas Web (que a su vez están formadas por diversos

archivos). Debido a esta naturaleza multiarchivo de las páginas y sitios Web, va

a tener que seguir un plan para asignar nombre a los archivos de su sitio Web y

organizarlos. (En las lecciones 6 y 7, explicamos cómo hemos organizado los

archivos de cada sitio, así que tendrá muchas oportunidades de hacerse con la

idea de cómo se denominan y organizan los archivos antes de finalizar este

curso.) En su mayor parte, un sitio Web normal está formado por la siguiente

estructura simple, que se muestra en la figura 5-2:

■ Directorio principal Contiene archivos HTML y un directorio de

imágenes. Puede proporcionar cualquier nombre para este

directorio cuando diseñe sus páginas en el equipo local. Al cargar

las páginas en un servicio de alojamiento de sitios Web (host),

probablemente colocará el contenido de la carpeta del directorio

principal en una carpeta en línea denominada “Web” y copiará toda

la carpeta de imágenes (la carpeta y todo su contenido) en ella.

■ Directorio de imágenes Contiene los archivos de imágenes GIF y

JPEG (o JPG) que se usan en las páginas Web. Este directorio

suele almacenarse dentro del principal.

Figura 5-2.

Los directorios y archivos del sitio Web se almacenan de forma local antes de

copiarlos a un servidor conectado a Internet.

87

Observe en la figura 5-2 que el directorio principal contiene en este momento

cuatro archivos HTML: contact.html, history.html, index.html y products.html,

uno para cada una de las páginas principales del sitio Web. Tenga en cuenta

que el nombre de un archivo HTML es el que aparece en la dirección URL de

la página Web. Por ejemplo, para visitar la página de productos de Curiosity

Shoppe, especificaría www.creationguide.com/cshoppe/products.html (en

inglés). Como puede ver, la dirección URL anterior consta del nombre de

dominio (www.creationguide.com) (en inglés), el nombre del directorio o

carpeta (cshoppe) y un nombre de archivo (products.html).

En la mayoría de páginas principales y en muchas subpáginas, puede haber

notado que no tiene que especificar un nombre de archivo. Por ejemplo,

cuando visita la página principal de Microsoft, simplemente escribe el nombre

de dominio de Microsoft, www.microsoft.com/spain/, o, si visita la página

Creation Guide Resources, escribe www.creationguide.com/resources

(en inglés). Si no se indica ningún nombre de archivo HTML después de un

nombre de dominio o directorio (carpeta), muchos servidores mostrarán un

archivo con un nombre concreto de forma predeterminada, como indice.html,

que varía en función de los servidores. Pregunte en el servicio de alojamiento

Web qué nombre debe usar para su página principal (o haga algunas pruebas

con nombres de archivo en línea para ver cuál funciona de forma

predeterminada); 9 de cada 10 veces, la página principal se llama index.html

y es la apuesta más segura si duda.

Dado que los nombres de archivo HTML aparecerán dentro de la dirección

URL de la página Web, debe seguir una reglas sencillas para facilitarle la vida

tanto a usted, como a los usuarios:

■ Haga que los nombres de archivo sean breve, sencillos y

significativos Es posible que los usuarios deseen tener acceso a

una página Web directamente, así que haga que la dirección URL

les resulte fácil de escribir y recordar. Por ejemplo, use un archivo

denominado “productos.html” en lugar de “p1-2002m.html”.

■ Evite el uso de símbolos y signos de puntuación Muchas

personas encuentran que escribir símbolos y añadir signos de

puntuación ralentiza su escritura considerablemente y disminuye

de forma drástica la precisión en la redacción. Además, los

símbolos y los signos de puntuación pueden crear nuevos caminos

para la confusión. Por ejemplo, si la página se llama www.creation-

guide.com, los usuarios podrían olvidar fácilmente el guión y

escribir www.creationguide.com (¡con lo que se perderían su

página y visitarían la nuestra por error!).

Compruebe que todos los

nombres de archivo HTML

tienen la extensión .htm o

.html, y que los nombres de

archivo de imagen tienen la

extensión .gif, .jpeg o .jpg.

88

■ Use un carácter de subrayado (_) para indicar un espacio

Algunos servidores antiguos no reconocen los espacios, así que

debe usar guiones bajos para indicar los espacios en blanco.

Asimismo, se produce el mismo problema con los espacios que

con los símbolos y signos de puntuación: los espacios se olvidan

con facilidad y dejan hueco para los errores (en gran cantidad).

■ Use todas las letras en minúsculas De nuevo, piense en la

“facilidad de uso” para los visitantes del sitio Web. En los nombres

de archivo de las direcciones URL se distinguen mayúsculas y

minúsculas, y una letra escrita en mayúsculas al azar puede perder

a más de un visitante. Los nombres de archivo con todas las letras

en minúsculas son fáciles de escribir y de recordar.

Asignación de nombre para

las imágenes

Además de asignar nombre a los archivos HTML, tendrá que designar los

archivos de imágenes. Por lo general, los usuarios no tienen acceso a los

archivos de imágenes directamente, sino que las páginas HTML hacen

referencia a estos archivos cada vez que necesitan mostrarlos. Por lo tanto,

tiene una cierta libertad de acción en lo que respecta a la denominación de las

imágenes. Un truco práctico que utilizamos para denominar las imágenes es

identificar su finalidad con un prefijo sencillo incorporado al nombre de los

archivos, lo que nos ayuda a identificarlos y encontrarlos con rapidez cuando

los necesitamos. En concreto, anteponemos el nombre de las imágenes con p_,

b_ o t_. Una imagen p_ es una verdadera imagen (p, de picture, en inglés).

Por ejemplo, p_máscara indica que el archivo es la imagen de una máscara.

Una imagen b_ es un botón. Por ejemplo, b_productos indica que la imagen es

la barra de exploración del botón Productos. Y una imagen t_ hace referencia a

una barra de título. Por ejemplo, t_contactos especifica que la imagen es la

barra de título usada en la página Contactos.

En este momento, debe entender que la organización desempeña un papel

importante en el planeamiento de un sitio Web. Debe ordenar sus pensamientos

y empezar a considerar cómo sistematizar los archivos (que, de nuevo, son

básicamente las páginas Web y gráficos de los sitios Web). Puede hacer más

eficaz la fase de organización del sitio si realiza las tareas y resuelve las

cuestiones que se presentan en la siguiente lista de comprobación del

planeamiento de un sitio.

89

Cuando haya solventado dichas cuestiones, o mientras tanto, debe preparar un

esquema de la estructura del sitio. En otras palabras, debe ilustrar las relaciones

entre las páginas del sitio y la información con el fin de garantizar que ha

creado un diseño claro del mismo que incluya todos los datos en un formato

fácilmente accesible. La figura 5-3 muestra uno de los esquemas iniciales de

Curiosity Shoppe. Puede crear esquemas incluso más detallados que el

mostrado en la figura 5-3 si incluye una descripción breve de lo que va a

aparecer en cada página. Por ejemplo, en el esquema de la figura 5-3, podría

agregar notas como “La página contact.html contiene un vínculo de correo

electrónico y un mapa que muestra la ubicación de la tienda”.

Figura 5-3.

El esquema de la página de Curiosity Shoppe muestra los nombres de archivo usados dentro del sitio inicial.

Lista de comprobación del planeamiento

de un sitio

Los elementos de esta lista de comprobación definen las tareas básicas que

debe realizar mientras planea un sitio Web. Aborde cada una de las tareas y

cuestiones enumeradas, y esboce las relaciones de la información del sitio a

medida que realiza su plan:

■ Visite sitios similares para ver lo que le gusta y lo que no, y

averigüe cómo puede hacer que su sitio sea único.

■ Compruebe que el sitio especifica quién es usted y, si es

apropiado, la identidad de su empresa.

90

■ Elija colores que evoquen una emoción apropiada para el sitio.

Compruebe que el esquema de colores presenta un claro contraste

para facilitar la lectura, analice si los colores contribuyen a

conseguir los objetivos del sitio e intente usar colores de la paleta

simplificada para el Web de 216 colores. Como repaso rápido de lo

que son los colores simplificados para el Web, consulte la lección

3. Para ver la paleta de colores simplificada para el Web, abra el

archivo palette216.gif en un programa de gráficos. Este archivo se

encuentra en la carpeta Lesson03 de este curso, en el disco duro.

Compruebe que el punto principal de su sitio se identifica de forma

visible al principio y que no se halla sepultado tras una o dos

páginas, ni falta; además, asegúrese de que cada página indica

claramente su propósito. No desea que los usuarios visiten su

página principal o busquen su sitio a través de una puerta trasera y

se pregunten lo que se supone que deben hacer entonces, tras

encontrar dicho sitio Web.

■ Clasifique su sitio en su propio esquema mental para no perder su

enfoque. Con miras en el diseño, etiquete el sitio como comercial,

informativo, educativo, de entretenimiento, de navegación, para la

comunidad, artístico, personal o de algún otro tipo.

■ Diseñe el sitio para reflejar el modo en que es más probable que

los usuarios exploren sus páginas. Puede hacerse una idea de lo

que desean durante la fase de análisis del público destinatario.

Compruebe que incluye temas “paraguas” (temas importantes, no

nimiedades) en la página principal y que proporciona vínculos más

específicos en cada subpágina. Por ejemplo, incluya un vínculo

Contactos en la página principal y vínculos a los departamentos de

la página Contactos.

■ Asegúrese de que el sitio ofrece a quienes lo ven unas cuantas

formas de ponerse en contacto con usted: la dirección física, la

dirección de correo electrónico, el número de teléfono, una paloma

mensajera, etcétera.

■ Denomine sus archivos de forma apropiada, como se ha explicado

anteriormente en esta lección.

■ Cree nombres de botones fáciles de comprender que reflejen con

claridad la estructura del sitio. Los botones crípticos pueden

parecer imponentes pero tienden a confundir a los lectores, en

especial cuando su esotérica creación no viene acompaña por

ningún texto explicativo.

■ Divida el contenido en unidades lógicas. No divida una página en

dos sólo porque parezca que es demasiado larga. Por otro lado, si

ve una división lógica en una página larga, divídala (pero

asegúrese de que no pierde la página recién creada al sepultar su

vínculo en el sitio).

91

■ Analice la información y haga que la más importante sea la más

obvia y accesible.

■ Determine formas que le permitan crear una apariencia o tema

uniforme en todo el sitio. No olvide incluir un logotipo y usar

vínculos de exploración coherentes en cada página. Tenga en

cuenta que los aspectos de diseño más concretos en relación a la

apariencia y el tema del sitio se examinan con más profundidad en

la siguiente fase del planeamiento, cuando se esbozan la página

principal y las subpáginas.

■ Incluya al menos un elemento que invite a los usuarios a volver,

por ejemplo, un componente que se actualice diaria o

semanalmente, o un salón de chat.

¡Pruébelo!

Rápidamente, piense en tres sitios que haya visitado hace poco. Ahora analice

por qué y la forma en que esos tres sitios le han causado impresión. ¿Hay

algún elemento que pueda adoptar y modificar para su sitio? ¿Eran fáciles

de explorar? ¿Alguno de los elementos que no le gustó destaca en su mente?

Use su experiencia personal en su beneficio. Después de todo, sabe lo que le

gusta cuando explora el Web.

Sentando las bases de su página

principal

Una vez se haya depositado el polvo suficiente en el esquema de planeamiento

del sitio (con lo que lo habrá meditado también de forma suficiente), puede

limpiar la pizarra y empezar a diseñar su página principal y sus subpáginas.

En este momento, debe tener una idea muy concisa de lo que la página

principal debe incluir: el logotipo, la barra de título y vínculos a las páginas

más importantes del sitio, entre otros elementos. Sobre todo, debe haberse

preocupado por la faceta práctica del diseño de páginas, por ejemplo, por

determinar la estructura de la asignación de nombres de archivo, el análisis de

su público, la determinación de las limitaciones de hardware, etcétera. En este

momento, sus jugos creativos consiguen hacerse paso mientras su sinapsis

organizativa descansa y rejuvenece. En esta fase de diseño, debe centrar su

atención en el modo en que puede presentar con creatividad todos los

componentes necesarios de la página principal de manera que refleje los

objetivos del sitio, optimice su tema y obtenga de los usuarios la respuesta

“emocional” apropiada. Por ejemplo, los propietarios de la tienda Curiosity

Shoppe deseaban comunicar el sentimiento de que el almacén vende tesoros

que se han descubierto por todo el mundo. Por lo tanto, les sugerimos el tema

del mapa del tesoro y el logotipo N-S-E-W “C”.

92

Cuando haya empezado a pensar en formas creativas de presentar sus ideas,

comience a dibujar diseños y pensamientos. Empezará a ver lo que funciona

mejor y las propias ideas harán que surjan otras hasta llegar a un diseño que

funcione. La figura 5-4 muestra un esbozo de la página principal de Curiosity

Shoppe. Dado que diseñamos la página principal para crear una impresión

única, su esquema es notablemente diferente del correspondiente a las

subpáginas del sitio. Por lo tanto, también dibujamos la página de productos

para ilustrar cómo se mostrarían la barra de título y los vínculos de exploración

en las subpáginas, como se muestra en la figura 5-5. Al dibujar la página

principal, remítase a la lista de comprobación del planeamiento de una,

posteriormente en esta lección, para comprobar que ha tenido en cuenta todos

sus principios.

Figura 5-4.

El dibujo de la página principal de Curiosity Shoppe contiene su información

básica.

93

Figura 5-5.

El dibujo de la página de productos de Curiosity Shoppe muestra cómo difieren significativamente las subpáginas del sitio Web de la página principal.

Lista de comprobación del planeamiento de una

página principal

Debe comprobar que su página principal incluye los elementos enumerados en

la lista. Si omite algunos a propósito, asegúrese de saber el porqué. Tenga en

cuenta que no se clasifica la importancia de los elementos por el orden; de

hecho, la lista está ordenada alfabéticamente para evitar que ninguno

prevalezca sobre los demás. (Somos tan astutos como para eso.) Compruebe

que de una forma u otra aborda todos los elementos siguientes en relación al

diseño de su página principal:

■ La fecha de creación o revisión

■ Los vínculos de exploración o los botones se identifican fácilmente

y se muestran de forma coherente

■ El icono de la página principal o el logotipo se puede usar en todo

el sitio

■ La información importante se muestra claramente

■ El título es informativo

■ El tema o efecto emocional intencionado se crea mediante las

palabras, los colores, la disposición, las fuentes u otros elementos

■ Hay un logotipo u otro gráfico identificativo, como un escudo

familiar o un código de departamento

94

■ La página de inicio ” engancha” para captar el interés del visitante

(las páginas principales por lo general varían al menos ligeramente

de las subpáginas)

■ Se ha buscado una solución que agiliza la descarga (es cierto, las

imágenes gigantescas quedan realmente mal como fondo y en

realidad no necesita mostrar 90 imágenes en la página principal)

■ El propósito del sitio está claro y los visitantes saben lo que deben

hacer después (aparte de hacer clic en el botón Atrás)

■ El texto largo se divide en párrafos con encabezados secundarios

(si es necesario)

■ Los vínculos de texto se muestran en la parte inferior de la pantalla

■ La esquina superior izquierda se dedica a un uso adecuado,

preferiblemente a mostrar su logotipo

■ Muestra su identidad o la de su organización

Sugerencia

Incluso aunque la lista de comprobación del planeamiento de una página

principal parezca larga, su página principal no debe serlo. Por todos los

medios, evite sobrecargarla. Es mejor agregar un par de vínculos al menú

de exploración en lugar de llenar de información cada esquina (y más allá)

de la pantalla de los usuarios.

Acopio de utensilios y preparación

Después de haber especificado sus objetivos, conocido a su audiencia,

organizado su sitio y diseñado la composición de su página principal, falta un

componente final del planeamiento: reunir las herramientas y utensilios que

necesita. En esta fase también debe asegurarse de que todo el texto está bien

escrito y corregido, los gráficos tienen un tamaño apropiado (que posiblemente

tenga que retocar un poquito cuando el proceso de diseño real de la página

comience), las imágenes están digitalizadas de algún modo (con un escáner o

de otra forma) y dispone de las herramientas para organizar todos los elementos

en las páginas Web. Como puede ver, lo que tiene que hacer en esta etapa es

muy concreto y sencillo, pero llevarlo todo a cabo suele llevar una significativa

cantidad de tiempo, así que debe planearlo apropiadamente. Por suerte, aunque

esta fase suele ser la más larga, podemos describir el proceso de un modo

bastante sucinto. Básicamente, antes de crear su página Web, debe reunir los

elementos enumerados en la siguiente lista de comprobación.

95

Nota

No intentamos desanimarle al afirmar que esta fase de aprovisionamiento

en el juego del Web puede llevar mucho tiempo. Simplemente debe saber

que la recopilación, creación y modificación del texto y los gráficos casi

siempre parece tardar algo más de lo previsto; al menos esa ha sido

nuestra experiencia y no sólo porque tendemos de forma inherente a

divertirnos creando, modificando y jugando con ellos. Por suerte, no tiene

que preocuparse por la clase de demoras que puede sufrir durante el

“acopio de utensilios”. Recuerde que nuestro objetivo en este curso es la

creación de páginas Web de una forma más rápida e inteligente. Con tal

fin, en las lecciones 6 y 7, hemos enumerado los elementos necesarios

para crear las páginas Web de la lección. No tema: las etapas de caza y

recolección incluidas en las lecciones 6 y 7 son breves e indoloras.

Lista de comprobación de utensilios

Antes de empezar a crear páginas Web, debe tener los elementos siguientes a

mano y poder disponer de ellos fácilmente, o al menos haber finalizado una

gran parte de este proceso:

■ El texto: corregido, revisado ortográficamente y releído

■ Las fotografías, gráficos e ilustraciones (incluyendo los botones, las

barras de título y un logotipo de gran calidad)

■ Dibujos de las páginas y plantillas

■ Un editor HTML, un procesador de texto o una herramienta de

creación de páginas Web

■ Un programa de gráficos

■ Un nombre de dominio (ya sea comprado o asignado)

■ Espacio en un servidor

Ahora que ha concluido la explicación de las fases de teoría y planeamiento,

está listo para mancharse las manos y enfrentarse a la segunda mitad de este

curso. Así que, remánguese: ¡el momento de crear ha llegado!

Puntos clave

■ Defina los objetivos del sitio Web.

■ Conozca a su público.

■ Defina la jerarquía, flujo organizativo y apariencia global del

sitio Web.

■ Dibuje la página principal y las subpáginas.

■ Reúna las herramientas y utensilios necesarios.

■ ¡Prepárese para crear páginas Web y pasarlas al mundo real!

Recuerde: si decide adquirir

un nombre de dominio, debe

ser breve, sencillo y tener

relación con el propósito

de su sitio Web.

96

HTML básico sin misterios Una vez completada esta lección, podrá:

Entender los fundamentos de la codificación HTML.

Usar etiquetas HTML.

Planear un sitio HTML.

Crear una tabla con HTML.

Ensamblar una página principal y sus subpáginas con HTML.

¿Puede recordar el intenso y premeditado esfuerzo que le llevó aprender los

sonidos y formas del alfabeto? Al final, tras mucha práctica, lo consiguió.

Después de aprender las letras, lentamente comenzó a entender cómo

combinarlas en palabras, combinar las palabras en frases, las frases en párrafos

y así sucesivamente. En este momento, es probable que leer le parezca algo

natural. Y lo más seguro es que lea el periódico y explore el Web sin pensar

demasiado en cada sonido y forma de las letras. Eso se debe a que, con los

años, ha desarrollado los conceptos básicos que son las letras y las palabras

hasta llegar a demostrar una capacidad aparentemente innata para leer.

Aprender a crear documentos HTML desde cero, con etiquetas y sabiendo

cómo funciona HTML, es bastante parecido a aprender a leer. El proceso puede

precisar algo de paciencia y mucha práctica al principio, pero si se toma el

tiempo necesario para estudiar HTML ahora, al final podrá usarlo para crear

páginas Web de una forma casi tan natural como puede leer.

Acopio de los “utensilios” para

el proyecto

Para crear las páginas Web descritas en esta lección, necesitará los siguientes

“utensilios”:

■ Un procesador básico de texto, como el Bloc de notas de Microsoft

o WordPad (aplicaciones que se incluyen con Microsoft Windows)

o TextEdit (que viene con Macintosh OS X).

■ Un explorador.

■ 27 archivos de ejercicios, que se pueden encontrar en la subcarpeta

Lesson06 de la carpeta Web Design Fundamentals\Practice, en el

disco duro. Estos archivos se usan para crear las páginas Web de

esta lección, que se enumeran en la página siguiente.

LECCIÓN 6

97

b_background.gif b_lessons2.gif picture.gif

b_background2.gif b_performances.gif sendnote.gif

b_competitions.gif b_performances2.gif t_background.gif

b_competitions2.gif b_recitals.gif t_competitions.gif

b_contact.gif b_recitals2.gif t_contact.gif

b_contact2.gif bg.gif t_home.gif

b_home.gif footer.gif t_lessons.gif

b_home2.gif logo.gif t_performances.gif

b_lessons.gif p_chris.jpg t_recitals.gif

Si desea saber los pasos detallados necesarios para configurar los archivos de

ejercicios, consulte la sección “Poner en su lugar las carpetas y los gráficos”,

más adelante en esta lección.

¿Por qué HTML?

En las lecciones 1 a 5 introdujimos de forma breve el Lenguaje de marcado de

hipertexto (HTML, Hypertext Markup Language). Esencialmente, explicamos

que los documentos de una página Web se construyen incluyendo comandos

HTML (también conocidos como etiquetas HTML) dentro del cuerpo de un

documento de texto básico. Aunque otras tecnologías, como el Lenguaje de

marcado extensible (XML, Extensible Markup Language) y Hoja de estilos

en cascada (CSS, Cascading Style Sheet), están empezando a tener una

repercusión significativa en el desarrollo de páginas Web, HTML constituye la

base de la mayor parte de las páginas Web en este momento y, si va a crearlas,

necesita conocer este lenguaje.

Ahora bien, entendemos que podría no sentirse muy dispuesto a crear una

página Web desde cero usando únicamente un documento en blanco y una

tecnología que le suena vagamente familiar, denominada HTML. Pero, lo crea

o no, está preparado, de modo que inténtelo. Hacemos que use HTML en el

primer proyecto con páginas Web de este curso porque se dará cuenta de que

conocer sus fundamentos le resultará extremadamente práctico cuando cree

páginas Web en el futuro, no importa cuándo. Por lo tanto, vamos a tomar una

aproximación de bautismo de fuego en esta lección, lo que significa que va a

escribir sus propios documentos HTML en breve.

En ciertas formas, podría encontrar que el proyecto de esta lección es el más

importante de esta mitad del curso. Si va a crear páginas Web, tendrá mucho

ganado si domina algunos conceptos y comandos HTML básicos. Algún día,

cuando tenga mucha más soltura con la creación de páginas Web, conocer al

menos un poco de HTML le permitirá modificar y retocar páginas para

adaptarlas a sus preferencias, incluso si han sido generadas por un editor

HTML. Además, saber HTML implica que podrá quitar todos los comandos

HTML innecesarios (y, en ocasiones, propiedad de otro) que muchos editores

HTML tienden a agregar en los documentos de páginas Web. Al quitar los

códigos innecesarios, puede hacer que sus documentos HTML sean más

pequeños, lo que a su vez significa que las páginas se cargarán antes.

98

Finalmente, a medida que adquiera más habilidad en el uso de comandos

HTML, podría encontrar que puede hacer cambios con más rapidez y precisión

si agrega, elimina o modifica el código HTML en lugar de modificar una

página Web en un editor HTML.

Ahora estamos listos para empezar. El primer cometido en este empeño, antes

de comenzar a crear un sitio Web, es revisar brevemente (muy brevemente) la

teoría básica de HTML. Por cierto, cuando decimos teoría, nos referimos a

información clara y útil, y no a retórica compleja. Considere la explicación

teórica siguiente como si extendiera una manta antes de iniciar una merienda en

el campo; también podría sentirse algo desanimado ante los bichos con los que

se encontrará.

De modo que ha oído algo acerca

de CSS

Hojas de estilo en cascada (o CSS) es una tecnología que permite definir el

formato de una página de un sitio Web en un único lugar, ya sea en un

documento independiente o en un área especial dentro de un documento de una

página Web. Según el criterio de muchos diseñadores y desarrolladores del

Web, todo el mundo debería usar CSS lo antes posible. Pero la realidad de la

situación es que el Web está lejos de ser completamente compatible con CSS y

muchos sitios Web no incorporan hojas de estilo. Por suerte, el Web sigue

admitiendo las técnicas de formato más antiguas junto con los nuevos

comandos CSS.

En lo que le incumbe, el objetivo de esta lección es enseñarle HTML; por lo

tanto, hemos decidido omitir la explicación de cómo utilizar hojas de estilo en

esta lección. Cuando aprenda HTML, podrá continuar y aprender CSS con

tranquilidad (¡quién sabe, puede que escriba un libro acerca de CSS como

ayuda en su camino!). Para ayudar a estimular su apetito cognitivo de CSS, le

mostramos cómo modificar las hojas de estilo generadas automáticamente en el

proyecto de la lección 7.

En relación a CSS, podría oír que algunas de las etiquetas y atributos HTML

que le mostramos en esta lección están desaprobadas, como la etiqueta

<FONT>. Un elemento desaprobado se puede usar (y se usa) en el Web,

simplemente está destinado a eliminarse a la larga. Puede ver una lista de

las etiquetas HTML junto con anotaciones referentes a cuáles se clasifican

como desaprobadas (deprecated) en www.w3.org/ TR/1999/REC-html401-

19991224/index/elements.html (en inglés).

99

Finalmente, debido a los diversos niveles de compatibilidad con CSS y HTML

que hay en el Web actualmente, puede ayudar a los exploradores a interpretar

sus páginas Web si especifica si cumplen estrictamente los estándares más

recientes, si son de transición (incluyen elementos HTML desaprobados) o si

tienen marcos (incluyen elementos HTML desaprobados y marcos dentro del

sitio Web). Para ello, debe incluir una versión particular de la etiqueta HTML

<!DOCTYPE...> en las páginas Web, según se describe aquí además de en

los pasos del proyecto, en esta lección:

■ Si su página Web cumple los estándares CSS y HTML 4.01,

inserte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

■ Si su página Web cumple los estándares HTML 4.01 e incluye

elementos y atributos HTML desaprobados (muchos de los cuales

conciernen a la presentación visual), inserte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://

www.w3.org/TR/html4/loose.dtd">

■ Si la página Web es compatible con HTML 4.01 e incluye

elementos y atributos HTML desaprobados, además de tramas,

inserte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Puesto que el proyecto de esta lección incluye elementos HTML desaprobados

pero no tramas, sus documentos usarán la segunda instrucción de la lista

anterior, la que indica que el código es de transición. Le mostraremos cómo

agregar esta instrucción en un documento HTML en los pasos del proyecto,

más adelante en esta lección.

Fundamentos de HTML

Básicamente, los comandos HTML sirven como instrucciones que le indican

a un explorador cómo mostrar el contenido de una página Web. En otras

palabras, los comandos HTML proporcionan información de formato que

controla la presentación del texto y los gráficos de la página Web. Tenga en

mente el propósito de los comandos HTML. Verá más adelante cómo se

entretejen alrededor del contenido de la página Web en un documento HTML,

pero, en esencia, un documento HTML contiene dos tipos de información:

■ La información del contenido, incluido el texto y punteros a

los gráficos

■ Comandos HTML, que se usan para indicar cómo se muestra

el contenido

100

En esta lección, le mostramos cómo especificar los comandos HTML y el

contenido de la página en un documento de texto para crear páginas Web.

Además, vinculará las páginas que cree de modo que se combinen para crear

un sitio Web. Para llevar a cabo esta hazaña, necesitará un procesador de texto,

como los mencionados en la lección 4, por ejemplo el Bloc de notas o WordPad

(si utiliza Windows), o Text Edit (si usa Mac OS X, o SimpleText si emplea

Mac 9x o un sistema operativo anterior). En la figura 6-2 se ilustra cómo se

muestran los documentos completamente codificados en HTML en TextEdit,

WordPad y el Bloc de notas, respectivamente. Cuando empiece el proyecto de

esta lección, comenzará con una página en blanco. Para abrir el Bloc de notas,

haga clic en Inicio, seleccione Programas, Accesorios y, después, haga clic en

Bloc de notas. Para abrir WordPad, haga clic en Inicio, seleccione Programas,

Accesorios y, después, haga clic en WordPad. Para abrir TextEdit, haga doble

clic en el icono TextEdit en el disco duro.

Nota

No se alarme ante la aparentemente incomprensible conglomeración de

comandos HTML mostrados en la figura 6-2. HTML puede parecer

complejo, pero en realidad sólo consta de combinaciones de letras,

números y símbolos con algo de organización. Como es obvio, conocerá

las letras, números y símbolos, así que tenga por seguro que aprender a

usar los comandos HTML se incluirá igualmente entre sus habilidades.

Como hemos mencionado antes, las etiquetas HTML cuidan del formato de las

páginas. Por el contrario, el contenido es la información que se muestra en la

página (texto, gráficos, encabezados, etcétera). En otras palabras, HTML se

ocupa de la forma en que se presenta la información (negrita, cursiva,

alienación a la izquierda y demás) y el contenido especifica lo que se muestra.

Saber cómo incorporar las etiquetas apropiadas en todo el contenido de una

página Web es la clave para crear una en un procesador de texto. Por lo tanto,

vamos a explicar cómo se usan las etiquetas HTML.

101

Figura 6-2.

Visualización de un documento HTML en TextEdit, WordPad y el Bloc

de notas.

Uso de etiquetas HTML

En esta sección, introducimos las reglas básicas de HTML junto con algunas

etiquetas comunes. Tenga en cuenta que no definimos cada etiqueta HTML

existente; hay un buen número de ellas y en muchos libros dedicados a HTML

se ofrecen extensas listas de comandos. (Si desea averiguar más acerca de

HTML de lo que abarcamos aquí, revise algunas de nuestras referencias de

HTML favoritas, que enumeramos en la sección “Recursos adicionales”, casi al

final de esta lección.) Nuestra filosofía es que si aprende las reglas básicas de la

utilización de etiquetas HTML, podrá usar cualesquiera de las que descubra en

línea o en los libros sobre HTML.

Comenzaremos nuestra explicación de las etiquetas HTML con una regla

sencilla: las etiquetas HTML constan de comandos que aparecen dentro de

paréntesis angulares (<>).

102

Por ejemplo, una de la primeras etiquetas en el código fuente de una página

Web suele ser <HTML>. Esta etiqueta le indica a un explorador, sin ningún

género de duda, que el documento de texto es un documento HTML.

El explorador sabe que cualquier texto dentro de los paréntesis angulares (<>)

es un comando HTML que debe procesar y que todo el texto que esté fuera es

contenido que hay que mostrar.

Aquí tiene la segunda regla que debe recordar: en las etiquetas HTML no se

distinguen mayúsculas y minúsculas.

Esta regla no es nada del otro mundo, pero es conveniente conocerla. Significa

que a los exploradores no les importa que el texto situado entre los paréntesis

angulares esté en mayúsculas o en minúsculas. Por lo tanto, <B> y <b> son,

esencialmente, la misma etiqueta (que, a propósito, indica al explorador que

muestre en negrita el texto que le sigue). De igual modo, <HTML>, <html>,

<HtMl> y cualquier otra combinación de letras mayúsculas y minúsculas

representa la misma etiqueta.

A continuación, vea la regla número tres: las etiquetas HTML casi siempre

vienen en pares.

Puesto que la mayoría de las etiquetas HTML se usan principalmente para

formato, suelen venir de dos en dos: una etiqueta de inicio y otra de fin

(a las que también se hace referencia como etiquetas de apertura y de cierre,

respectivamente). Este emparejamiento permite indicar a los exploradores dónde

debe comenzar un atributo de formato en particular (como la negrita) y dónde

debe terminar. Acuérdese de cuando va al cine con algunos amigos y dos de ellos

se adelantan para guardar los sitios mientras el resto del grupo va a por palomitas.

Las dos personas que guardan los asientos se sientan separados en cada uno de

los extremos que marcan el inicio y el final de la hilera que ocuparán sus amigos.

Si fueran etiquetas HTML, le dirían al explorador que todos los asientos situados

entre ellos deberían tener el mismo formato que el de sus asientos.

Las etiquetas de inicio y de fin tienen un propósito muy específico, en concreto,

una etiqueta de inicio indica cuándo debe iniciarse una acción y una de fin

cuándo se debe terminar. (Como ve, esto no es la ciencia de la física cuántica.)

Aunque las etiquetas de inicio y de fin parecen muy similares, presentan una

pequeña diferencia, aunque esencial. Las etiquetas de fin se diferencian de las

de inicio por la inclusión de un carácter de barra diagonal (/) justo después del

paréntesis izquierdo, como aquí: </HTML>. El último elemento de los

documentos HTML suele ser el comando </HTML>, que indica el final de la

presentación de la página Web. Volviendo de nuevo al ejemplo del cine,

digamos que uno de sus amigos, los que guardan los sitios, se sienta en un

asiento lateral y el otro en la mitad de la fila. El que está en la mitad de la fila

lleva una camisa roja. De repente, un recién llegado pregunta al que se sienta en

el pasillo si los asientos están ocupados. Éste contestaría algo así como:

“Sí, todos los asientos que hay hasta donde está aquella persona con la camisa

roja están ocupados.”. Esta es la función de una etiqueta de inicio. La persona

que lleva la camisa roja actuaría entonces como etiqueta de fin. Por ejemplo,

una etiqueta <B> le dice al explorador: “Pon en negrita todo el texto desde aquí

hasta la etiqueta </B>”.

Jerga: el código fuente hace

referencia al contenido del

documento HTML que crea

una página Web. La mayor

parte de los exploradores

permiten ver el código fuente

de una página Web. Por

ejemplo, para mostrar el

código fuente de una página

Web en Microsoft Internet

Explorer, muestre una página

Web, haga clic en el menú

Ver y, después, en Código

fuente.

103

Para mejorar la ilustración, veamos un ejemplo de texto que usa pares de

etiquetas HTML. En la instrucción siguiente se incluyen etiquetas HTML de

inicio y de fin que dan formato a la frase como un párrafo (<P></P>),

muestran la frase sabor a mantequilla en cursiva (<I></I>) y dan formato a

la palabra palomitas en negrita (<B></B>), como se muestra en la figura 6-3:

<P>¿Desea las <B>palomitas</B> con

<I>sabor a mantequilla</I> o las prefiere normales?</P>

Figura 6-3.

Si la pregunta se incluye en un documento HTML, podría verla con formato en

un explorador, como se muestra aquí.

La frase también ilustra un concepto interesante denominado anidamiento.

En los documentos HTML, el anidamiento no tiene nada que ver con ramitas

y plumas sino con el orden en que aparecen las etiquetas HTML. En la frase

de las palomitas, el conjunto de etiquetas de cursiva (<I></I>) y el de

negrita (<B></B>) se anidan dentro de las etiquetas de párrafo (<P></P>).

Ésta es una regla clave que debe seguir al anidar etiquetas HTML: las etiquetas

HTML anidadas se ceben cerrar en orden inverso en el que se han abierto.

La regla podría parecer un poco confusa, de modo que veamos un ejemplo.

Básicamente, las etiquetas HTML de apertura y de cierre no se deben cruzar.

Éste es un modelo correcto:

<HTML> <P> <B> </B> </P> </HTML>

En este ejemplo, las etiquetas de negrita (<B>) se anidan dentro de las de párrafo

(<P>), que se anidan dentro de las etiquetas de identificación de documento

(<HTML>). Esta disposición resultaría en un texto en negrita dentro de un párrafo

dentro de un documento HTML. La siguiente también funcionaría:

<HTML> <P> <I> </I> <B> </B> </P> </HTML>

Observe que en este ejemplo de anidamiento se usa el mismo modelo que en la

frase de las palomitas. En este ejemplo, el par de etiquetas de cursiva y el de

negrita no se anidan uno dentro del otro pero ambos están anidados dentro del

par de etiquetas de párrafo.

104

Ahora vamos a aligerar la explicación un poco y nos fijaremos en una regla

más concisa: de forma predeterminada, los documentos HTML muestran un

único espacio entre los elementos de texto.

Parece que huelga mencionar esta regla, pero los problemas de espaciado son

una gran preocupación en el Web por diversas razones (principalmente, porque

los diseñadores tienen que ocuparse del contenido que cambia de tamaño y de

ubicación, problemas que no se dan en los documentos impresos). En un

documento HTML, al agregar cualquier número de espacios dentro del código

mediante la barra espaciadora, la tecla Tabulador o la tecla Entrar, sólo se

consigue agregar un espacio. Por lo tanto, podría incrustar los cuatro

fragmentos de código siguientes en un documento HTML:

<P><I>Instrucción musical</I>

<P><I>Instrucción musical</I>

<P><I> Instrucción musical </I>

<P><I>

Instrucción musical

</I>

y el texto aparecerá en cualquier caso como se muestra en la figura 6-4.

Figura 6-4.

El texto se muestra con un único espacio entre palabras, incluso cuando se

agrega espacio adicional entre las palabras del documento HTML.

Ahora está preparado para la siguiente regla, que añade algo de picante a

las etiquetas HTML: algunas etiquetas HTML de apertura pueden contener

propiedades (también conocidas como atributos), que refinan las instrucciones

de una etiqueta HTML.

En otras palabras, con frecuencia, puede personalizar las instrucciones relativas

a un comando de formato HTML. Por ejemplo, puede agregar un atributo

COLOR al comando <FONT> para cambiar el color del texto que se muestra,

como se indica a continuación:

Dicen que el <FONT COLOR="green">césped</FONT> es más verde.

Si insertara la frase anterior en un documento HTML, en el texto se mostraría

la palabra césped en verde.

105

Finalmente, aquí tiene la última regla de esta sección: existen numerosas

variaciones en relación al anidamiento HTML, a las propiedades y al uso

de conjuntos de etiquetas.

Como con todas las reglas, descubrirá que, aunque la mayor parte de HTML es

predecible, la tecnología es tan coherente como las reglas de ortografía, lo que

significa que, con frecuencia, encontrará excepciones a las reglas. Por ejemplo,

si desea agregar un salto de línea en HTML, debe especificar <BR>. No hay

ninguna etiqueta de cierre para un salto de línea: o lo inserta o no. De la misma

forma, para insertar una regla horizontal, se utiliza la etiqueta <HR>; de nuevo,

no se requiere una etiqueta de cierre.

No se preocupe si esto le causa una ligera confusión. Empezará a tener una idea

más clara de HTML a medida que trabaje en el proyecto del sitio Web de esta

lección. No hay nada como la experiencia práctica para aprender. Le

introduciremos en otras etiquetas HTML y conceptos adicionales en el proyecto

según vayamos avanzando. Como ayuda, puede ser aconsejable que tenga a

mano la tabla 6-1 mientras trabaja.

Tabla 6-1. Etiquetas HTML usadas en el proyecto HTML

Etiquetas Función

<A HREF="xxx.xxx">< /A> Marca el punto delimitador de un

hipervínculo, en el que se puede hacer

clic. El atributo HREF señala la

información que se debe mostrar al

hacer clic en el contenido del

delimitador. El contenido del

delimitador se especifica entre las

etiquetas de delimitación (<A></A>)

y uede incluir texto e imágenes.

<B></B> Indica que se muestre en negrita el

texto incluido entre las etiquetas <B>

y </B>.

<BLOCKQUOTE>

</BLOCKQUOTE>

Desplaza un párrafo del texto normal del

cuerpo, por lo general, con una sangría a

la izquierda del párrafo y márgenes a la

derecha.

<BODY></BODY> Marca el inicio y el final del contenido

que se puede mostrar de la página Web.

<BR> Inserta un salto de línea. La etiqueta

<BR> no tiene una etiqueta de cierre y

se suele usar de forma consecutiva para

crear un espacio en blanco en una

página Web.

106

(continúa)

Etiquetas Función

<CENTER></CENTER> Centra la información delimitada en la

página o dentro de la celda de una tabla.

<!DOCTYPE...> Especifica la definición de tipo de

documento (DTD, Document Type

Definition) de la página Web; por

ejemplo, si la página usa codificación

HTML estricta y CSS, codificación

HTML de transición (incluidas etiquetas

HTML desaprobadas) o tramas.

<FONT></FONT> Permite especificar el color de la fuente,

su tipo y su tamaño.

<H1></H1> Especifica el texto de encabezado. Los

tamaños de encabezado abarcan desde

H1 hasta H6, donde H1 es el mayor.

<HEAD></HEAD> Proporciona un área en la que puede

mostrar el título de la página Web,

incluir información para el motor de

búsqueda e información avanzada de

formato, incrustar código CSS o

vincular a una hoja de estilos, y escribir

secuencias de comandos. Aparte del

texto incluido entre las etiquetas

<TITLE></TITLE> incrustadas, la

mayor parte de la información no se

muestra directamente a los usuarios.

<HTML></HTML> Delinea el inicio y el final de un

documento HTML.

<I></I> Indica que el texto que aparece entre las

etiquetas <I> e </I> se ponga en

cursiva.

<IMG SRC="xxx.xxx"> Muestra una imagen en una página Web.

El atributo SRC señala a la imagen

particular que se debe mostrar.

<LI></LI> Identifica un elemento de una lista sin

numerar (con viñetas) <UL> o de una

lista ordenada (numerada) <OL>.

<OL></OL> Especifica una lista ordenada

(numerada).

107

(continúa)

Etiquetas Función

<P></P> Indica el principio y el final de un

párrafo. De forma predeterminada, los

párrafos se muestran alineados a la

izquierda. La etiqueta </P> de cierre

es opcional. En otras palabras, puede

insertar simplemente la etiqueta <P> al

comienzo de cada párrafo nuevo para

dar formato al contenido HTML sin

escribir </P> al final de cada párrafo.

Hemos incluido la etiqueta </P> de

cierre en esta lección para clarificar la

explicación. Los exploradores suelen

insertar una línea en blanco (más un

pequeño espacio adicional) antes de

iniciar un párrafo.

<TABLE></TABLE> Indica el principio y el final de

una tabla.

<TD></TD> Define el inicio y el final de una celda

en una tabla. Las etiquetas <TD> se

anidan dentro de otras etiquetas <TR>.

<TITLE></TITLE> Permite insertar el texto de la página

Web que se debería mostrar en la barra

de título del explorador.

<TR></TR> Indica una fila de una tabla. Las

etiquetas <TR> se anidan dentro

de un par de etiquetas <TABLE>.

<UL></UL> Especifica una lista sin numerar

(con viñetas).

Sólo como última nota de esta sección, deseamos hacer una pequeña

rectificación. Aunque estamos seguros de que puede crear un documento

HTML a partir de cero, tenga en cuenta que esta lección sólo sirve de

introducción a la creación de páginas Web en HTML. Lamentablemente,

abarcar todos los comandos HTML disponibles en una sola lección es poco

realista, pero en ésta puede encontrar sugerencias que le resultarán de utilidad

en la codificación y algunas indicaciones de buenas referencias de HTML, en la

sección “Recursos adicionales”, casi al final de la lección. Si crea el sitio Web

descrito en el proyecto de esta lección, dominará los conceptos básicos de la

codificación HTML, además de disponer de una plantilla que puede

personalizar para crear páginas Web únicas. (Incluso le indicamos cómo usar el

sitio como plantilla más adelante en esta lección.)

108

Tratamiento de documentos HTML y gráficos Web

Cuando crea páginas Web, suele trabajar con varios archivos. Tendrá el archivo

HTML de la página principal (que a veces se denomina index.html, index.htm

o índice.html), un archivo gráfico de cada elemento gráfico de la página y otros

archivos HTML adicionales para las páginas vinculadas. Por lo tanto, antes de

empezar la fase de creación, tiene que idear un esquema organizativo para no

volverse loco después. Le recomendamos que cree una carpeta para contener

todos los archivos HTML usados en el sitio Web y que, dentro de la carpeta

principal, cree una subcarpeta para las imágenes. A continuación, puede

almacenar todos sus documentos HTML en la carpeta principal y colocar los

gráficos en la carpeta de imágenes. Como ilustración, vea la figura 6-5, que

muestra los documentos HTML y las imágenes necesarios para crear el sitio

del proyecto de esta lección.

Mantener organizados los archivos es un imperativo cuando se agregan gráficos

y se crean hipervínculos, porque debe incluir instrucciones en el documento

HTML en relación a dónde debe buscar el explorador un gráfico o página

vinculada en particular. Además, la organización puede simplificar en gran

medida el proceso de carga de archivos cuando esté en disposición de “pasarlos

al mundo real” y los transfiera desde su PC local a un servidor Web. Lo mejor

que puede hacer es crear una carpeta que pueda usar constantemente en el

proceso de creación del sitio Web y en las páginas Web.

Además de observar una minuciosa organización, debería guardar

religiosamente sus páginas Web y verlas a menudo en un explorador

durante el proceso de desarrollo.

Figura 6-5.

Debe mantener los archivos y carpetas del sitio Web organizados de una forma

sencilla aunque lógica.

109

Guardar y ver los documentos HTML

Al crear las páginas Web, en especial si realiza la codificación HTML a mano,

debe guardarlas y obtener una vista previa de las mismas sin reparos. Según

nuestra propia experiencia, la frase “No podemos creer que hayamos perdido

todos los datos” no es inusual, de modo que le recomendamos guardar sin

reservas su trabajo frecuentemente, lo que también puede aplicarse en cualquier

situación en la que trabaje con un archivo en un equipo informático (Si en los

monitores creciera el césped, nuestro mouse desgastaría el camino en diagonal

hacia el botón Guardar, por no mencionar nuestra voluntaria contribución a la

leve erosión de las teclas Ctrl y G que se produce al presionarlas con tanta

frecuencia.)

Además de guardar a menudo sus archivos, debe obtener una vista previa de

las páginas Web que cree varias veces a lo largo del proceso de creación. Ello

simplemente conlleva mirar el documento HTML en uno o dos exploradores,

frente a tener que examinar el texto y la versión del código HTML del

documento en un procesador de textos. Al realizar este ejercicio, puede apreciar

el formato que se da al contenido con HTML y puede solucionar los problemas

de presentación en un primer momento. Con frecuencia, alteraremos la

composición de un sitio porque lo que parece acertado sobre el papel no se

transpone bien en una página en línea.

Para obtener una vista previa de una página Web en un explorador, siga alguno

de estos procedimientos una vez creado un archivo HTML:

■ Muestre el contenido de la carpeta que contenga el documento

HTML y haga doble clic en el icono del documento HTML.

■ Abra el explorador (por ejemplo, Internet Explorer) y escriba la

ubicación del archivo HTML.

■ Abra el explorador, abra la carpeta que contenga el documento

HTML y arrastre el icono del archivo HTML de su carpeta a la

ventana o a la barra de direcciones del explorador.

Nota

En la sección siguiente, le sugerimos algunos puntos concretos en los que

debería guardar el sitio Web del proyecto y verlo en un explorador. Sin

embargo, puede guardar los archivos y verlos más a menudo de lo que

sugerimos, en especial si se toma un descanso mientras los está creando.

“¡Guardar, guardar, guardar!”

debería ser una de sus

máximas cuando trabaje

con un equipo informático.

110

Ya hemos cubierto una buena parte de teoría; ahora llega la hora de las brujas.

Si ha leído las páginas anteriores, está en disposición de abordar el proyecto de

creación de páginas Web HTML. Debería tener un conocimiento práctico de las

etiquetas HTML básicas, ser consciente de que debe guardar sus documentos

HTML e imágenes en las carpetas designadas y reconocer la importancia de

guardar las páginas Web y de verlas con frecuencia a lo largo del proceso de

creación. Nos satisface que haya llegado a este punto, de modo que vamos a

poner en marcha el proyecto.

Planeamiento del sitio HTML

Como proyecto HTML, decidimos crear una página Web para Chris Soll,

músico profesional e instructora de música. El primero paso del planeamiento

implicaba reunirse con Chris y averiguar el tipo de información que deseaba

incluir en su sitio Web. En nuestra consulta inicial, encontramos que tenía

varios temas profesionales y otros específicos de los alumnos que le gustaría

incorporar. Según esta información, intentamos inicialmente diseñar una barra

de exploración con dos niveles pero el diseño empezó a resultar demasiado

confuso. Determinamos que podíamos crear un sitio más limpio si

especificábamos botones con nombre y proporcionábamos una sección de

información general del sitio en la página principal. El diseño final resultó en

una composición clara y flexible.

Cuando cree el sitio Web de Chris Soll (al que pronto comenzamos a hacer

referencia como “el sitio de música” durante nuestras consultas, debido a la

abrumadora presencia en el estudio de un piano de cola, una colección de

flautas y montones de partituras musicales y libros de música), puede usar su

documento HTML como plantilla para crear sitios Web similares que tengan

una apariencia y funcionamiento completamente diferentes. No se preocupe,

describimos cómo usar el código del sitio de música como plantilla más

adelante en esta lección. En la figura 6-6 se ilustra el esquema que propusimos

para ilustrar las páginas que deseábamos incluir en el sitio. La figura 6-7

muestra el esbozo final de la página principal del sitio de música.

Figura 6-6.

La estructura del sitio permite el acceso a cada una de sus páginas desde cualquier ubicación.

111

Figura 6-7.

El dibujo muestra la composición básica del diseño de la página principal del

sitio de música.

Nota

Observe en la figura 6-7 que inicialmente pensamos insertar la información

de dirección debajo de los vínculos de texto en la parte inferior de la

página. Después, durante el proceso de diseño, nos dimos cuenta de que

colocar la dirección encima de los vínculos tenía más sentido. Los vínculos

ya aparecían en la barra de exploración a la izquierda, de modo que

preferimos presentar la información de la dirección “nueva” y más

importante antes de repetir la información de los vínculos de texto.

112

Poner en su lugar las carpetas y los

gráficos

Como mencionamos anteriormente en esta lección, su primer cometido es crear

una carpeta para los archivos Web y organizar sus gráficos. A continuación le

indicamos el proceso que le sugerimos que siga (aunque puede cambiar la

ubicación de las carpetas y el nombre según sus preferencias):

1 Cree una carpeta en la unidad C:\ y asígnele el nombre music.

2 Abra la carpeta music y cree una subcarpeta denominada images.

3 Busque la carpeta Lesson06 en la carpeta Web Design

Fundamentals\Practice del disco duro.

4 Copie todos los archivos de la carpeta Lesson06 a la subcarpeta

images que creó en el paso 2.

A medida que copie los archivos de la carpeta Lesson06 a la subcarpeta images,

observe el esquema de denominación que hemos usado para etiquetar las

imágenes:

■ b_xxx Especifica que la imagen es un botón. Un gráfico b_ al que

se anexa el número 2 (por ejemplo, b_background2.gif) indica una

segunda versión del botón que se muestra siempre con la página

asociada. (Verá lo que significa esto posteriormente.)

Por lo tanto, b_background.gif es el botón Antecedentes (la

traducción de background en este caso) y b_background2.gif es la

versión de la “página actual” del botón Antecedentes, como se

ilustra en la figura 6-8.

Figura 6-8.

Cada botón del sitio de música consta de un botón normal y de una

versión para la página actual del mismo.

Cuando finalice esta lección

y termine de experimentar

con el sitio Web de música,

puede eliminar la carpeta

C:\music, si lo desea.

113

■ bg.gif Especifica el gráfico de fondo. Se usa el mismo gráfico de

fondo en todo el sitio de música, de modo que sólo se requiere un

archivo bg.gif.

■ footer.gif Identifica el gráfico como una imagen de pie de página

en movimiento, que se utiliza en la parte inferior de las páginas del

sitio.

■ logo.gif Identifica el gráfico del logotipo. En todo el sitio de música

se usa el mismo gráfico de logotipo, pero podría tener unas

cuantas versiones del mismo, en especial, si utilizara una versión

más pequeña o modificada en las subpáginas.

■ p_xxx Especifica que el gráfico es una imagen. En el sitio de

música sólo hay una fotografía, que se encuentra en la página

principal.

■ sendnote.gif Identifica el gráfico como el icono de “enviar mensaje

de correo electrónico”. Posteriormente, vinculará este icono en el

sitio de música de manera que los usuarios puedan hacer clic en el

gráfico sendnote.gif para abrir un mensaje de correo electrónico

con una dirección predeterminada cuando deseen enviar un

mensaje a Chris Soll.

■ t_xxx Especifica que la imagen es un gráfico de pancarta para la

barra de título. Por ejemplo, t_background.gif es el gráfico de la

pancarta de la barra de título de la página Antecedentes, que

muestra la palabra Antecedentes y se coloca al principio de la

página que ofrece información acerca de Chris Soll, como se ilustra

en la figura 6-9.

Figura 6-9. Un archivo gráfico se usa para crear la pancarta de una barra de título

en cada página en el sitio de música.

Cuando cree sus propias páginas Web y gráficos Web, probablemente preferirá

idear su propio esquema de denominación. Le hemos mostrado el método que

usamos nosotros para denominar nuestros gráficos con el fin de proporcionarle

una idea de lo útil que puede resultar tener un sistema de nomenclatura.

Apreciará la ventaja de disponer de un esquema de denominación de gráficos

bien planeado a medida que empiece a insertar código HTML en breve.

La imagen picture.gif es un

gráfico marcador de posición

usado en la plantilla que se

explica más adelante en la

lección. No usará el archivo

picture.gif en el sitio de

música.

114

Preparación del archivo de la página

principal

Cuando tenga las carpetas y archivos gráficos en su lugar, estará en disposición

de crear la página principal del sitio. Para empezar el proceso de creación,

tendrá que crear un documento HTML que contenga las etiquetas estándar que

aparecen en todos los documentos HTML. Las etiquetas estándar son las

siguientes (vea la tabla 6-1, anteriormente en esta lección):

■ <!DOCTYPE...>

■ <HTML></HTML>

■ <HEAD></HEAD>

■ <TITLE></TITLE>

■ <BODY></BODY>

Observe que, con la excepción de la etiqueta <!DOCTYPE...>, las etiquetas

estándar vienen en parejas. En la figura 6-10 se demuestra la forma apropiada de

anidar los pares de etiquetas HTML estándar en un documento HTML y cómo

insertar el texto del título. Cuando haya escrito las etiquetas HTML estándar en

un documento de texto, tendrá que guardar el documento de texto como

documento HTML, según se describe en el procedimiento siguiente.

Figura 6-10.

Este documento contiene las etiquetas HTML estándar con algo de texto

incluido entre las etiquetas <TITLE>.

115

Nota

Recuerde que en HTML no se distinguen mayúsculas y minúsculas, de

modo que puede escribir <HTML>, <html>, <HtMl> o cualquier otra

combinación de letras en mayúsculas o minúsculas, y la etiqueta será

correcta. En esta lección, usamos siempre letras en mayúsculas para las

etiquetas HTML con el objeto de reconocerlas más fácilmente.

Para comenzar a crear la página principal del sitio de música y guardarla en

forma de archivo HTML, siga estos pasos:

1 Abra el Bloc de notas, WordPad o TextEdit. En todo el proyecto

usamos el Bloc de notas.

2 Haga clic en un nuevo documento en blanco y escriba la siguiente

definición de tipo de documento (que indica que contiene etiquetas

desaprobadas):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

3 Presione Entrar dos veces.

4 Escriba <HTML> y presione Entrar dos veces.

5 Escriba <HEAD> y presione Entrar.

6 Escriba <TITLE>Instrucción musical de Chris

Soll</TITLE> y presione Entrar.

7 Escriba </HEAD> y presione Entrar dos veces.

8 Escriba <BODY>, presione Entrar varias veces (para dejar algo de

espacio cuando especifique la información del contenido de la

página Web), escriba </BODY> y presione Entrar dos veces.

Nota

El texto del contenido, que se muestra entre las etiquetas HTML y fuera, se

presenta de la misma forma, con mayúsculas o minúsculas, que si se

especificara en el documento de texto. Por lo tanto, si escribe chris soll en

lugar de Chris Soll en el paso 4, el nombre de Chris aparecerá en letras

minúsculas en la página Web. Además, recuerde que no tiene que

preocuparse de si pone demasiados espacios (incluidas líneas en blanco)

entre el texto del contenido y las etiquetas HTML. Cuando un explorador

presente el documento, pasará por alto los espacios adicionales.

116

9 Escriba </HTML> para completar la configuración de las etiquetas

HTML estándar.

Ahora puede nombrar y guardar el archivo en la carpeta C:\music.

10 En el menú Archivo, haga clic en Guardar.

11 En el cuadro de diálogo Guardar como, en el cuadro Nombre de archivo escriba index.html y compruebe que en la lista

desplegable Guardar como está seleccionada la opción

Documentos de texto. (Si es necesario, haga clic en la flecha

para seleccionar la opción Documentos de texto.)

12 Use la lista desplegable Guardar en y vaya a la carpeta C:\music

del equipo.

13 Haga clic en Guardar y cierre el Bloc de notas.

El archivo debería mostrarse ahora como index.html en la carpeta C:\music y el

icono debería indicar que es un documento HTML. En este punto, ya puede ver

su archivo en el explorador. Para ver el archivo HTML recién creado, haga

doble clic en index.html. Se debe abrir en su explorador Web. Observe que el

único contenido es el texto del título de la página Web, que se presenta en la

barra de título del explorador.

Ahora que el título de la página Web y las etiquetas HTML están en su lugar,

vamos a agregar los colores predeterminados de los vínculos y de la imagen

de fondo.

Especificación de los colores del

fondo y de los vínculos

Puede incluir atributos en la etiqueta <BODY> para agregar los colores de

fondo, las imágenes de fondo, los colores predeterminados de los vínculos y

otras características, según se describe en los pasos siguientes:

1 Abra el Bloc de notas, WordPad o TextEdit, y después abra el

archivo C:\music\index.html en el procesador de texto. Si no ve el

archivo index.html en el cuadro de diálogo Abrir, asegúrese de que

en el cuadro de lista Tipo de archivo aparece Todos los archivos

(*.*). Si usa Mac OS X, TextEdit muestra automáticamente los

documentos HTML como páginas Web, de forma predeterminada.

Para abrir y mostrar el código HTML en lugar de la página Web,

active la casilla de verificación Ignore Rich Text Commands (Pasar

por alto comandos de texto) en el cuadro de diálogo Open File

(Abrir archivo); observe que puede seleccionar esta opción también

en el cuadro de diálogo Preferences (Preferencias) del programa,

si no desea activar la casilla de verificación cada vez que se

necesite.

117

Sugerencia

Debe abrir el archivo HTML mediante el comando Open (Abrir) del

procesador de texto, arrastrando el icono del documento en la ventana de

dicho programa o haciendo clic con el botón secundario del mouse (ratón)

en el archivo HTML y eligiendo Bloc de notas en el menú Abrir con. Si hace

doble clic en un archivo HTML en la vista de carpetas, mostrará el

documento HTML en el explorador Web.

2 En la etiqueta <BODY>, haga clic después de la Y y antes de >,

presione la barra espaciadora y vuelva a especificar los siguientes

atributos y valores, incluidas las comillas:

BGCOLOR="#ffffff" BACKGROUND="images/bg.gif"

LINK="blue" VLINK="purple" ALINK="red"

Los atributos <BODY> que ha agregado se definen como sigue:

■ BGCOLOR define un color de fondo. Aunque en el sitio de música

se usa un gráfico para el fondo, definimos un fondo blanco para

quienes vean el sitio con las imágenes desactivadas. En la paleta

mostrada en el archivo palette216.gif, que se encuentra en la

carpeta Lesson03 de este curso, puede ver que #ffffff es un

número hexadecimal que indica el color blanco.

■ BACKGROUND permite especificar un archivo gráfico para usarlo

como imagen de fondo. Recuerde que los exploradores colocan

en mosaico las imágenes de fondo para rellenar la ventana del

explorador. En la página del sitio de música se usa el archivo bg.gif,

que se almacena en la subcarpeta images de la carpeta music,

como imagen de fondo. Dado que tanto el documento index.html

como la carpeta images residen en la carpeta music, no tiene que

indicar la dirección completa de la imagen. Si la imagen estuviera

guardada en otro sitio, es decir, no dentro de una subcarpeta de la

carpeta que contiene al documento index.html, tendría que

especificar la dirección completa para indicar dónde se encuentra.

■ LINK permite especificar el color en el que se muestran los

hipervínculos de texto que no se han visitado.

■ VLINK permite especificar el color en el que se muestran los

hipervínculos de texto que se han visitado. En otras palabras, una

vez que un usuario visite la página Contactos, cualquier vínculo

que señale a esta página aparecerá en el color correspondiente a

los vínculos visitados (púrpura, en este caso).

■ ALINK permite indicar el color en el que se muestran los vínculos

mientras el usuario hace clic en ellos. Mostrar los vínculos en un

color diferente mientras los usuarios hacen clic en ellos les indica

claramente que están activando un hipervínculo.

Jerga: poner en mosaico

significa repetir una imagen

en toda el área de una

ventana hasta que se llene

con la imagen repetida.

118

Su código HTML debería ser ahora como el de la figura 6-11.

Figura 6-11.

Dentro de la etiqueta <BODY> se pueden agregar algunos atributos de

formato. (El código recién añadido se resalta en color naranja.)

Sugerencia

Siempre que escriba código HTML, compruebe que ha incluido todos

los paréntesis angulares (<>) y las comillas ("") en él además de que los

comandos HTML están escritos correctamente. Si faltan elementos o los

comandos están mal escritos, la página Web puede mostrarse de forma

inapropiada o no mostrarse. Hemos incluido capturas de pantalla del

código que está creando en esta lección para que pueda comprobar

fácilmente su trabajo.

3 Guarde su documento HTML, abra el explorador y vea el archivo

index.html en la ventana del explorador. (No tiene que cerrar el

documento de texto, pero debe asegurarse de que ha guardado los

cambios más recientes.) El archivo index.html debe mostrar la

imagen de fondo en la ventana del explorador.

Ahora que ha definido las etiquetas HTML estándar, la imagen de fondo

predeterminada y los colores de los vínculos, el siguiente paso es comenzar a

dar formato al área <BODY> de la página Web.

Creación de una tabla

En esta sección, explicamos cómo crear una tabla que contendrá todos los

elementos de la página Web. Controlarlos es un poco dificultoso debido a la

naturaleza variable de los exploradores y sus ventanas, por lo que muchos sitios

se diseñan con tablas que tienen bordes ocultos para ayudar a componer las

páginas Web. A la larga, el formato y alineación de las páginas Web se llevará

a cabo mediante hojas de estilo, pero por ahora miles y miles de páginas Web

se basan en tablas para controlar la presentación de sus elementos. Por

supuesto, no todas las páginas Web usan una tabla pero encontrará que son

una herramienta muy útil.

Si los cambios que haga en

su documento HTML no se

muestran en la vista previa

en el explorador, haga clic

en el botón Actualizar para

actualizar la vista.

119

Básicamente, las tablas usan tres etiquetas:

■ <TABLE></TABLE> señala el inicio y el final de una tabla.

■ <TR></TR> indica una fila de la tabla. Las etiquetas <TR> se

anidan dentro de un par de etiquetas <TABLE>.

■ <TD></TD> define el inicio y el final de una celda en una tabla.

Las etiquetas <TD> se anidan dentro de un par de etiquetas

<TR>.

En el sitio de música, creará una tabla de dos columnas y tres filas:

1 Si es necesario, abra el Bloc de notas, WordPad o TextEdit, y

después abra el archivo C:\music\index.html desde el procesador

de texto. Si no ve el archivo index.html, recuerde comprobar que

en el cuadro de lista Tipo de archivo aparece Todos los archivos

(*.*).

2 En el archivo index.html, haga clic debajo de la etiqueta de

apertura <BODY> (la etiqueta <BODY> debe contener ahora los

atributos que agregó en la sección anterior), escriba <TABLE

BORDER="1" WIDTH="100%" CELLPADDING="5"

CELLSPACING="0"> y presione Entrar. Observe las comillas

alrededor de los valores de los atributos. Compruebe que

incluye comillas de apertura y de cierre en todo el fragmento.

A continuación puede ver el propósito de cada uno de los atributos

incluidos en la etiqueta <TABLE>:

■ BORDER define el ancho de la tabla en píxeles. Por ahora,

estamos mostrando un borde de 1 píxel para ver la tabla mientras

realiza el diseño. Una vez que se complete el diseño de la página,

cambiará BORDER="1" por BORDER="0" para ocultar los

bordes de la tabla en la página Web.

■ WIDTH define el ancho exacto de la tabla en píxeles o especifica

el porcentaje de la ventana del explorador que ocupará la tabla.

Nosotros usamos una tabla para dar formato a toda la página, así

que su tamaño es del cien por cien del espacio de la ventana del

explorador.

■ CELLPADDING crea un espacio (medido en píxeles) entre el

contenido de la celda y el borde de la tabla. Después de probar

algunos parámetros de espacio, encontramos que al añadir un

valor de CELLPADDING igual "5" se conseguía el mejor efecto.

Este tipo de opción ejemplifica lo que supone probar la

configuración, guardar y obtener una vista previa de la página

HTML durante el proceso de creación.

■ CELLSPACING especifica la cantidad de espacio (en píxeles)

entre celdas. En el sitio de música, no necesitamos especificar

ningún espacio entre las celdas, de forma que establecimos a

"0" el valor del atributo.

Como ayuda, puede remitirse

a la figura 6-12 mientras

trabaja en todo el proceso

de creación de la tabla.

120

3 Escriba <TR> para comenzar con la primera fila de la tabla.

4 Presione Entrar, presione la tecla Tab para facilitar la lectura del

código y escriba <TD VALIGN="top"> para empezar con la

primera celda de la primera fila. El atributo VALIGN="top" indica

que desea alinear el contenido de la celda en la parte superior de

la misma (de forma predeterminada, se alinea el medio). Puede

alinear el contenido de la celda con los valores top, middle,

bottom o baseline. Además, de forma predeterminada, el

contenido de la celda se alinea a la izquierda. (Más adelante

mostramos cómo cambiar la alineación predeterminada y

centramos el contenido dentro de una celda.)

5 Presione Entrar dos veces, presione la tecla Tab y escriba </TD>

para marcar el final de la primera celda en la primera fila.

6 Presione Entrar dos veces, presione la tecla Tab y escriba <TD

VALIGN="top"> para crear la segunda celda de la primera fila.

7 Presione Entrar dos veces, presione la tecla Tab y escriba </TD>

para marcar el final de la segunda celda en la primera fila.

8 Presione Entrar y escriba </TR> para completar la primera fila de

la tabla.

9 Presione Entrar y repita los pasos 3 a 8 para crear la segunda fila

de la tabla (o copie y pegue todo el código desde la etiqueta <TR>

hasta la etiqueta </TR> para crear una segunda fila, según se

describe en la sugerencia).

10 Presione Entrar después de crear la segunda fila de la tabla y, a

continuación, vuelva a escribir los comandos de los pasos 3 a 8 o

copie y peque el código de la fila para crear una tercera.

11 Cuando haya especificado la tercera fila de la tabla, presione

Entrar y escriba </TABLE> para completar sus etiquetas.

Sugerencia

Si prefiere no volver a escribir los comandos de la fila de la tabla cuando

cree la segunda y tercera filas, haga clic antes del comando <TR> de la

primera fila y arrastre para seleccionar todo el texto hasta el comando de

cierre </TR>, incluido. A continuación, presione Ctrl+C para copiar el

código seleccionado. Haga clic después del comando </TR>, presione

Entrar y presione Ctrl+V para pegar el código HTML copiado en su

documento de texto. Vuelva a presionar Ctrl+V para crear la tercera

fila de la tabla.

121

Finalmente, agregará un atributo WIDTH a las dos etiquetas de celda (<TD>)

de la primera fila de la tabla. Puede asignar el ancho de la columna como un

porcentaje (por ejemplo, a la columna izquierda se le puede asignar el 50 por

ciento de la ventana del explorador) o puede insertar una medida exacta en

píxeles. De forma predeterminada, si no incluye el atributo WIDTH en las

celdas de la tabla, el tamaño de las columnas de la tabla se calcula en función

del tamaño del contenido de la celda y de la ventana del explorador. Tiene que

agregar el atributo WIDTH sólo a una celda de una columna (y si tiene medidas

que entren en conflicto en las celdas de la misma columna, el explorador

usará la opción mayor de forma predeterminada). Para mantener nuestra

configuración ordenada, agregaremos el atributo WIDTH a las celdas de la

primera columna:

Nota

Si no define el ancho de las columnas de la tabla mediante el atributo

WIDTH de las etiquetas <TD>, los exploradores calculan automáticamente

su tamaño en función del elemento más ancho de cada una y del tamaño

de la ventana del explorador.

1 En la primera celda de la primera fila, haga clic después de

"top", presione la barra espaciadora y escriba WIDTH="170"

para establecer el ancho de la columna a 170 píxeles.

2 En la segunda celda de la primera fila, haga clic después de "top",

presione la barra espaciadora y escriba WIDTH="*". El asterisco

en lugar de un número de píxeles indica que el explorador debe

permitir que la segunda columna tenga el ancho necesario para que

ocupe el ancho restante de la tabla. Puesto que el formato de esta

tabla indica que su tamaño es del 100 por cien de la ventana del

explorador, el asterisco indica al explorador que expanda la segunda

columna para llenar el resto del área de su ventana.

3 Guarde su documento HTML. El código HTML debería ser similar

al de la figura 6-12.

Ahora que tiene una tabla, puede incluir contenido en ella. Lo primero que debe

hacer es insertar el logotipo en la esquina superior izquierda.

122

Figura 6-12.

El código de la tabla crea la estructura para el contenido de la página Web.

(El código añadido de la tabla se muestra en color naranja.)

Inserción y vinculación del logotipo

Estamos creando el diseño de una página estándar, de modo que optamos por

insertar el logotipo en la esquina superior izquierda (la más selecta). Pensamos

usar la página principal como plantilla para todas las subpáginas, así que vamos

a vincular el logotipo a la página principal. De esa forma, cuando use la página

principal como plantilla, todas las subpáginas incluirán automáticamente un

logotipo que se vincule a la página principal index.htm del sitio.

Al insertar un logotipo, básicamente está insertando una imagen. Para insertar

una imagen en un documento HTML, se utiliza la etiqueta <IMG> con el

atributo SRC, que señala a un gráfico en particular. Por ejemplo, para

especificar el logotipo del sitio de música, escribiría <IMG

SRC="images/logo.gif">. De igual modo, al insertar el logotipo y

darle formato como hipervínculo, se utilizan los mismos códigos HTML que al

vincular cualquier gráfico. Por lo tanto, debe poner atención a los pasos

siguientes: se descubrirá utilizando bastante estos comandos. En primer lugar,

vamos a insertar el gráfico del logotipo (vincularemos el gráfico en breve):

1 Si es necesario, abra el procesador de texto y el archivo

index.html.

123

2 En la primera celda de la primera fila, haga clic después de la

etiqueta <TD VALIGN="top" WIDTH="170">, presione Entrar,

presione Tab y escriba la siguiente etiqueta HTML, que señala a la

imagen del logotipo:

<IMG SRC="images/logo.gif" ALT="Instrucción

musical de Chris" WIDTH="170" HEIGHT="68"

BORDER="0">

Sugerencia

Agregar espacios y saltos de línea en el código HTML no afectará a la

apariencia de la página Web, por lo que no necesitará hacerlo en el

documento HTML para que coincida con los ejemplos del texto. Nuestros

ejemplos de texto tenían que acortarse para caber en el diseño de las

páginas del curso. Su código se puede escribir como se muestra en las

figuras de referencia de HTML del proyecto incluidas en esta lección.

Con la excepción del atributo SRC, los atributos de la etiqueta <IMG> usados

en el sitio de música son opcionales (aunque muy útiles) y se definen de la

forma siguiente:

■ SRC especifica el nombre de archivo de la imagen (el origen de la

imagen) que se tiene que mostrar.

■ ALT permite proporcionar texto descriptivo que aparece cuando el

cursor se coloca sobre el área de la imagen.

■ WIDTH y HEIGHT especifican el ancho y alto de la imagen.

Debería indicar el tamaño de las imágenes porque de ese modo

los exploradores pueden mostrar la composición de la página Web

con más facilidad y rapidez. Tenga en cuenta que, si cambia el

tamaño de la imagen (por ejemplo, si la amplía o la reduce), debe

hacerlo en el programa de edición de imágenes y no mediante los

atributos WIDTH y HEIGHT del documento HTML; idealmente,

preferirá que las imágenes tengan un tamaño lo más cercano

posible al que se utilizará para mostrarlas en las páginas Web.

■ BORDER especifica el grosor del borde alrededor de la imagen.

De forma predeterminada, se muestra un borde de 1 píxel

alrededor de los gráficos que se han configurado como

hipervínculos. Por lo general, los diseñadores cambian el valor

predeterminado estableciendo el atributo BORDER como "0".

124

A continuación, dará formato a la imagen logo.gif para que actúe como

hipervínculo a la página principal. Básicamente, la creación de un hipervínculo

conlleva marcar un texto o gráfico como delimitador mediante el par de

etiquetas <A></A> alrededor del texto o la imagen que desea que actúe

como hipervínculo y, a continuación, se especifica al explorador lo que debería

mostrarse cuando se haga clic en elemento delimitador. Para hacer que el

logotipo sea un hipervínculo, siga estos pasos:

1 Haga clic antes de la etiqueta <IMG...> y escriba

<A HREF="index.html"> para especificar que cuando los

usuarios hagan clic en el logotipo, se les dirigirá a la página

principal. (Como se ha mencionado anteriormente, esta

información de vinculación resultará práctica cuando copie la

página principal para crear subpáginas.)

2 Haga clic después del paréntesis angular de cierre > de la etiqueta

<IMG...> y escriba </A> para especificar el final del contenido

del delimitador.

Sugerencia

Si usa el Bloc de notas y el código supera el filo de la ventana, abra el

menú Formato y elija Ajusta de línea. Cuando se activa Ajuste de línea, el

Bloc de notas ajusta automáticamente el texto y lo muestra todo en la

ventana actual.

3 Guarde el archivo index.html. Su código HTML debería ser similar

al mostrado en la figura 6-13.

Figura 6-13. El código que ha agregado ahora inserta un logotipo y vincula su imagen

a la página principal.

Jerga: un delimitador es el

componente de texto o

gráfico en el que se puede

hacer clic en un hipervínculo

o un área de destino

especificada dentro de un

documento. El texto del

delimitador se rodea con el

par de etiquetas

<A></A>

en los documentos HTML.

125

Inserción del gráfico de la pancarta

de la página principal

Una vez insertado el logotipo, insertar el gráfico de la pancarta de la página

principal le resultará muy sencillo. Este paso conlleva insertar una imagen en la

segunda celda de la primera fila de la tabla. No tendrá que vincular este gráfico,

de modo que el procedimiento es bastante fácil. La única peculiaridad que

presenta la inserción del gráfico de la pancarta es que tendrá que centrarlo

dentro de la celda de la tabla, para lo que habrá que anidar la etiqueta <IMG>

dentro del par de etiquetas <CENTER></CENTER>. Para insertar un gráfico

de pancarta en la página principal, siga estos pasos:

1 Si es necesario, abra el procesador de texto y el archivo

index.html.

2 En la segunda celda de la primera fila, haga clic después de la

etiqueta <TD VALIGN="top" WIDTH="*">, presione Entrar,

presione Tab y escriba lo siguiente:

<CENTER><IMG SRC="images/t_home.gif"

ALT="Instrucción musical de Chris Soll"

WIDTH="415" HEIGHT="62" BORDER="0"

ALIGN="middle"></CENTER>

3 Guarde el archivo index.html. Su código HTML debería ser similar

al de la figura 6-14.

Figura 6-14. El código de la imagen de pancarta especifica a los exploradores qué

imagen se debería mostrar como pancarta en la página Web index.html.

126

4 Abra el archivo index.html en el explorador. (Si el archivo index.html

ya está abierto en el explorador, haga clic en el botón Actualizar para

actualizar la vista.) El explorador debería mostrar su versión del

archivo index.html como se muestra en la figura 6-15. En ella,

observe que los bordes de la tabla de la primera fila se ven alrededor

de los gráficos insertados. Mantenga el cursor sobre el logotipo o

gráfico de la pancarta para mostrar el texto ALT de la imagen.

Sugerencia

Debe guardar el documento HTML para poder ver los cambios del mismo en

la ventana de un explorador. Si los cambios más recientes no se muestran

en el explorador, compruebe que ha guardado su documento HTML. Si sigue

sin verlos, haga clic en el botón Actualizar del explorador para asegurarse de

que está viendo la versión más actualizada de su página.

Figura 6-15. En este punto, el archivo index.html se ve en un explorador con el logotipo vinculado y el gráfico de pancarta de la página principal,

que se colocan en su posición mediante una tabla.

En la sección siguiente, comprobará cómo crear una barra de exploración que

puede usar en todo el sitio de música.

127

Adición de vínculos de exploración

La creación de una barra de exploración para el sitio de música implica insertar

gráficos de botones y vincular cada gráfico a una página Web. Ya ha incluido

el logotipo y el gráfico de la pancarta, de modo que sabe cómo usar la etiqueta

<IMG>. Además, ha vinculado el logotipo, con lo que ya le resultan conocidas

las etiquetas de delimitación <A></A>. La única parte ligeramente delicada

del uso de botones de exploración en el sitio de música es que cada página

muestra un botón personalizado para la página actual. Por ejemplo, siempre que

un usuario visita la página principal, se muestra la versión negra del botón

Página principal y cuando visita otra página del sitio, dicho botón se presenta

en color rojo oscuro. Esta configuración se clarificará a medida que avance en

esta lección. Para crear una barra de exploración en la página principal, siga

estos pasos:

1 Si es necesario, abra el procesador de texto y el archivo

index.html. Colocará la barra de exploración en la primera columna

de la segunda fila de la tabla, con lo que se mostrará en el lateral

izquierdo de la página.

2 Después de la segunda etiqueta <TR>, haga clic en la primera

etiqueta <TD VALIGN="top">, presione Entrar, presione Tab y

escriba <BR> para insertar una línea en blanco entre el gráfico de

logotipo y la siguiente barra de exploración.

En los siguientes pasos, incrustará la etiqueta de imagen de cada botón dentro de

una etiqueta de delimitación que vincule el botón a una página Web denominada

de forma apropiada. No ha creado las subpáginas aún, por lo que debe tomar nota

de los nombres de archivo proporcionados en las etiquetas de delimitación.

Los nombres de archivo de las subpáginas tendrán que coincidir con los de las

referencias de los delimitadores. En total, necesita agregar siete botones.

Comenzará agregando la versión de la página actual del botón Página principal.

(Recuerde que descargó dos versiones de cada botón: la versión de la página

actual de un botón tiene un “2” al final del nombre de archivo del botón.)

3 Presione Entrar, presione Tab y escriba lo siguiente:

<A HREF="index.html"><IMG

SRC="images/b_home2.gif" ALT="Página

principal" WIDTH="170" HEIGHT="24"

BORDER="0"></A>

4 Escriba <BR><BR> para agregar dos líneas vacías, presione

Entrar y presione Tab.

Ahora puede introducir el vínculo y el gráfico del siguiente botón.

128

Sugerencia

Puede escribir varias veces el código HTML con varias referencias de

archivos HREF, nombres de archivo SRC e información ALT, o puede

copiar el código que escribió en los pasos 3 y 4, y pegarlo en la celda de la

tabla seis veces. A continuación, puede reemplazar las referencias de

archivo HREF, los nombres de archivo SRC y las definiciones de texto ALT

en cada entrada, como se muestra en la figura 6-16.

5 Escriba lo siguiente:

<A HREF="lessons.html"><IMG

SRC="images/b_lessons.gif" ALT="Lecciones"

WIDTH="170" HEIGHT="24"

BORDER="0"></A><BR><BR>

6 Presione Entrar, presione Tab y escriba:

<A HREF="recitals.html"><IMG

SRC="images/b_recitals.gif" ALT="Recitales"

WIDTH="170" HEIGHT="24"

BORDER="0"></A><BR><BR>

7 Presione Entrar, presione Tab y escriba:

<A HREF="competitions.html"><IMG

SRC="images/b_competitions.gif"

ALT="Concursos" WIDTH="170" HEIGHT="24"

BORDER="0"></A><BR><BR>

8 Presione Entrar, presione Tab y escriba:

<A HREF="performances.html"><IMG

SRC="images/b_performances.gif"

ALT="Actuaciones" WIDTH="170" HEIGHT="24"

BORDER="0"></A><BR><BR>

9 Presione Entrar, presione Tab y escriba:

<A HREF="background.html"><IMG

SRC="images/b_background.gif"

ALT="Antecedentes" WIDTH="170" HEIGHT="24"

BORDER="0"></A><BR><BR>

10 Presione Entrar, presione Tab y escriba:

<A HREF="contact.html"><IMG

SRC="images/b_contact.gif" ALT="Contacto"

WIDTH="170" HEIGHT="24"

BORDER="0"></A><BR><BR><BR><BR>

Observe que hay cuatro etiquetas <BR> al final del paso 10.

Las líneas adicionales se incluyen porque también deseamos

insertar el icono Envíenos una nota para ofrecer a los usuarios

una forma sencilla de enviar mensajes de correo electrónico a

129

Chris. Cuando crea un vínculo de correo electrónico, usa un

formato de HREF especial en la etiqueta de delimitación, como

se explica a continuación.

11 Presione Entrar un par de veces para separar el código HTML de

Envíenos una nota del código HTML de la barra de exploración principal,

presione Tab y escriba

<A HREF="mailto:mm@creationguide.com">

pero reemplace mm@creationguide.com con su propia

dirección de correo electrónico para que los usuarios puedan abrir

un mensaje de correo electrónico en blanco con su dirección

cuando hagan clic en el icono Envíenos una nota.

12 Inserte el icono Envíenos una nota y escriba el texto siguiente para

cerrar la referencia de delimitación:

<IMG SRC="images/sendnote.gif" ALT="Correo

electrónico para Chris" WIDTH="170"

HEIGHT="77" BORDER="0"></A>

13 Guarde el archivo index.html. Su código HTML debería ser similar

al mostrado en la figura 6-16.

Figura 6-16. El código HTML de la barra de exploración se inserta en una celda de

la tabla.

130

14 Abra el archivo index.html en el explorador. Su página principal

debe incluir ahora una barra de exploración en la parte izquierda,

como se muestra en la figura 6-17. Observe que el botón Página

principal se muestra de forma diferente a los otros botones para

indicar a los usuarios que están viendo la página principal. Haga

clic en el logotipo y en el botón Página principal para comprobar

que la página principal se vuelve a mostrar. (Al hacer clic en

cualquier otro botón de la barra de exploración, se producirá un

error porque aún no ha creado esas páginas.) Pase con el cursor

sobre cada botón para comprobar que el texto ALT es correcto en

cada caso. Haga clic en el icono Envíenos una nota para

asegurarse de que se abre un mensaje de correo electrónico en

blanco y se le envía.

Figura 6-17. Puede probar parte de su código HTML si hace clic en el botón Página

principal y en la imagen Envíenos una nota en la barra de exploración.

Inserción de la información del pie de

página

A continuación, tiene que agregar la información del pie de página. El pie de

página del sitio de música incluye un gráfico de pie de página, información de

la dirección y el número de teléfono, vínculos de texto que se corresponden con

los vínculos de la barra de exploración y texto de copyright.

Si necesita más ayuda, vea

la figura 6-18 cuando inserte

la información del pie de

página del sitio Web.

131

El proceso de inserción de un gráfico de pie de página es similar al de inserción

del gráfico de encabezado descrito anteriormente en esta lección. La diferencia

principal en el área del pie de página es que va a colocar el gráfico

correspondiente en la segunda celda de la tercera fila y va a insertar cierta

información adicional en la celda junto con el gráfico (según se describe en la

sección siguiente). Puesto que va a incluir otra información debajo del gráfico

del pie de página, anidará el gráfico dentro de las etiquetas de párrafo

(<P></P>) para asegurarse de que se va a incluir ese espacio sobre el gráfico.

Vamos a empezar a crear el elemento de pie de página insertando el gráfico de

pie de página:

1 Si es necesario, abra el procesador de texto y el archivo

index.html.

2 En la tercera fila de la tabla, haga clic después de la segunda

etiqueta <TD VALIGN="top">, presione Entrar, presione Tab y,

después, escriba <P ALIGN="CENTER"> para indicar el inicio

de un párrafo y especificar que su contenido se alinee al centro.

De forma predeterminada, los párrafos se alinean a la izquierda.

3 Especifique la información de la imagen del pie de página; para

ello, inserte la etiqueta de imagen con los atributos siguientes:

<IMG SRC="images/footer.gif" ALT="Instrucción

musical de Chris Soll" WIDTH="415"

HEIGHT="62" BORDER="0" ALIGN="middle">

4 Escriba </P> para indicar el final de la sección de párrafo.

La etiqueta </P> de cierre es opcional pero, si se agrega,

se clarifica el código.

Después, insertará un segundo párrafo que centre la información de la dirección

y el número de teléfono.

5 Presione Entrar dos veces, presione Tab y escriba:

Observe la etiqueta <BR> en el código HTML anterior entre el

texto de la dirección y el número de teléfono. Al agregar la etiqueta

<BR>, inserta un salto de página y muestra el número de teléfono

debajo de la dirección en la línea siguiente.

Ahora, agregará varios vínculos de texto en el área del pie de

página que corresponde a los botones de la barra de exploración;

de esa forma, si algún usuario tiene los gráficos desactivados,

podrá seguir explorando su sitio. Para agregar vínculos de texto,

debe seguir un procedimiento similar al de creación de vínculos

gráficos. La diferencia entre ambas tareas es que debe encerrar el

texto entre vínculos de delimitación en lugar de en una etiqueta

IMG, como se muestra en los pasos siguientes. Primero, debe

centrar el párrafo que contiene los vínculos de texto.

132

6 Presione Entrar dos veces, presione Tab y escriba

<P ALIGN="CENTER">.

7 Presione Entrar, presione Tab y escriba lo siguiente:

<A HREF="index.html">Página principal</A> |

En el vínculo anterior, las palabras Página principal se mostrarán

como hipertexto en la página Web. Si los usuarios hacen clic en las

palabras Página principal, se visualizará el archivo index.html.

Observe también la barra vertical (|). Este símbolo se escribe entre

cada vínculo de texto para facilitar su diferenciación. El símbolo es

opcional pero se usa bastante. Ahora está preparado para agregar

el resto de los vínculos de texto.

Sugerencia

No tiene que presionar Entrar y Tab entre cada una de las entradas de

vínculos de texto en los pasos 8 a 14. Los exploradores mostrarán los

vínculos en una fila independientemente del espacio que agregue en el

documento HTML. Elegimos dar formato a los vínculos de texto del modo

descrito para que trabajar con la información resultara más fácil.

8 Presione Entrar, presione Tab y escriba:

<A HREF="lessons.html">Lecciones</A> |

9 Presione Entrar, presione Tab y escriba:

<A HREF="recitals.html">Recitales</A> |

10 Presione Entrar, presione Tab y escriba:

<A HREF="competitions.html">Concursos<A> |

11 Presione Entrar, presione Tab y escriba:

<A HREF="performances.html">Actuaciones</A> |

12 Presione Entrar, presione Tab y escriba:

<A HREF="background.html">Antecedentes</A> |

13 Presione Entrar, presione Tab y escriba:

<A HREF="contact.html">Información de

contacto</A> |

La entrada final del vínculo de texto es el equivalente de texto del icono

Envíenos una nota que insertó anteriormente. Por lo tanto, este vínculo de

texto usa el componente mailto: en el atributo HREF. Recuerde reemplazar

mm@creationguide.com con su dirección de correo electrónico en el

paso siguiente.

14 Presione Entrar, presione Tab y escriba:

133

<A HREF="mailto:mm@creationguide.com">Correo

electrónico para Chris</A>

15 Para completar el párrafo del vínculo de texto, presione Entrar,

presione Tab y escriba </P>.

El componente final del pie de página es la información de copyright. En esta

sección, crea un párrafo centrado y especifica la información de copyright. Una

peculiaridad interesante aquí es que puede usar una referencia de una entidad

de carácter especial para crear un símbolo de copyright.

Sugerencia

Una referencia de entidad de carácter es una combinación especial de

teclas que incluye el símbolo Y comercial (&) y que le permite mostrar

caracteres que no son estándar, como los acentos, los símbolos de

marca registrada y otros, en las páginas Web.

16 Presione Entrar dos veces, presione Tab y escriba:

<P ALIGN="CENTER">&copy 2002 Chris Soll.

Todos los derechos reservados</P>

17 Guarde el archivo index.html. Su código HTML debería ser similar

al mostrado en la figura 6-18.

18 Abra el archivo index.html en el explorador. El pie de página del

archivo index.html debería tener una apariencia semejante a la

información de pie de página en la página mostrada en la figura 6-

19.

Figura 6-18. En el sitio de música, la información de pie de página se agrega a la

última celda de la tabla.

134

Figura 6-19. Puede ver la forma en que un explorador interpreta el código HTML de

pie de página si obtiene una vista previa de la página index.html del sitio de música.

Puede que se haya cuenta de que ha diseñado todo lo que aparece en la página

principal excepto el contenido básico. Le encantará oír que hay una razón.

Ahora que tiene creada la estructura básica de la página principal y dado que

piensa imitar dicha estructura en las subpáginas, puede utilizar el archivo

index.html para crear rápidamente las páginas básicas en las subpáginas,

según se describe en la sección siguiente.

Copiar el marco de trabajo de la

página principal para las subpáginas

Probablemente, ya haya adivinado que necesitamos crear algunas páginas para

vincularlas a la barra de exploración y a los vínculos de texto. En concreto, en

el sitio de música se llama a las páginas siguientes:

■ index.html (en cuyo proceso de creación se encuentra inmerso)

■ lessons.html

■ recitals.html

■ competitions.html

■ performances.html

■ background.html

■ contact.html

135

En esta sección, va a crear las seis páginas HTML adicionales que conforman

el sitio de música. Podría copiar todo el código de index.html, pegarlo en un

documento de texto en blanco y a continuación guardar el documento en forma

de archivo HTML, pero somos demasiado perezosos para eso. A continuación

explicamos cómo nos las arreglamos para crear la mayor parte del código de las

subpáginas:

1 Abra la carpeta C:\music.

2 Haga clic con el botón secundario del mouse en el archivo

index.html y haga clic en Copiar, en el menú contextual.

3 Haga clic con el botón secundario del mouse en la carpeta y haga

clic en Pegar.

4 Repita cinco veces el paso 3 (de modo que tenga seis copias del

archivo index.html). Su carpeta music debería ser similar a la

mostrada en la figura 6-20.

5 Haga clic con el botón secundario del mouse en la primera copia

de index.html, haga clic en Cambiar nombre en el menú contextual, escriba lessons.html y presione Entrar. Compruebe que cambia

el nombre de los archivos copiados con precisión y con todas las

letras en minúsculas; si cambia los nombres de los archivos en

este momento, los vínculos que haya creado en su código HTML

no funcionarán.

Figura 6-20. Al copiar el archivo index.html seis veces se crean plantillas para sus seis

subpáginas.

6 Con el procedimiento descrito en el paso 5, cambie el nombre de

los archivos recitals.html, competitions.html, performances.html,

background.html y contact.html.

7 Abra el procesador de texto, abra el archivo lessons.html y,

después, realice los seis cambios siguientes, que se resaltan en

color en la figura 6-21:

136

En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y

escriba: Lecciones.

■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".

■ En la segunda celda de la primera fila de la tabla, cambie

t_home.gif por t_lessons.gif.

También en la segunda celda de la primera fila de la tabla, reemplace el texto

ALT="Instrucción musical de Chris Soll" por el texto

ALT="Lecciones".

■ En el código HTML de la barra de exploración, cambie el texto del

botón Página principal b_home2.gif por b_home.gif.

■ Asimismo, en el código HTML de la barra de exploración,

cambie el texto del botón Lecciones b_lessons.gif por

b_lessons2.gif.

Figura 6-21. Para usar una copia de index.html como subpágina, tiene que modificar

ligeramente el código HTML y adaptar cada página.

8 Guarde el archivo lessons.html.

En este momento ha completado el documento básico para la página Lecciones.

¡No ha sido tan difícil! Para comprobar la página, haga doble clic en

lessons.html con el objeto de ver la página en un explorador. Si todo parece

correcto (como se muestra en la figura 6-22), ya puede continuar. El siguiente

paso es repetir el breve proceso de personalización en los documentos del resto

de las subpáginas.

El uso de una página de

base rellenada para crear

las subpáginas es un

procedimiento rápido y

favorece la coherencia

en el sitio.

137

9 Abra el archivo recitals.html en el procesador de texto y haga los

cambios siguientes:

En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y

escriba: Recitales.

■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".

■ En la segunda celda de la primera fila de la tabla, cambie

t_home.gif por t_recitals.gif.

■ También en la segunda celda de la primera fila de la tabla,

reemplace el texto ALT="Instrucción musical de

Chris Soll" por el texto ALT="Recitales".

■ En el código HTML de la barra de exploración, cambie el texto del

botón Página principal b_home2.gif por b_home.gif.

■ Asimismo, en el código HTML de la barra de exploración,

cambie el texto del botón Recitales b_recitals.gif por

b_recitals2.gif.

10 Guarde el archivo recitals.html.

11 Abra el archivo competitions.html en el procesador de texto y haga

los cambios siguientes:

En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y

escriba: Concursos.

■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".

En la segunda celda de la primera fila de la tabla, cambie t_home.gif por

t_competitions.gif.

■ También en la segunda celda de la primera fila de la tabla,

reemplace el texto ALT="Instrucción musical de

Chris Soll" por el texto ALT="Concursos".

■ En el código HTML de la barra de exploración, cambie el texto del

botón Página principal b_home2.gif por b_home.gif.

■ Asimismo, en el código HTML de la barra de exploración,

cambie el texto del botón Concursos b_competitions.gif

por b_competitions2.gif.

12 Guarde el archivo competitions.html.

13 Abra el archivo performances.html en el procesador de texto y

haga los cambios siguientes:

En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y

escriba: Actuaciones.

■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".

■ En la segunda celda de la primera fila de la tabla, cambie

t_home.gif por t_performances.gif.

138

■ También en la segunda celda de la primera fila de la tabla,

reemplace el texto ALT="Instrucción musical de

Chris Soll" por el texto ALT="Actuaciones".

En el código HTML de la barra de exploración, cambie el texto del botón

Página principal b_home2.gif por b_home.gif.

■ Asimismo, en el código HTML de la barra de exploración,

cambie el texto del botón Actuaciones b_performances.gif

por b_performances2.gif.

14 Guarde el archivo performances.html.

15 Abra el archivo background.html en el procesador de texto y haga

los cambios siguientes:

En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y

escriba: Antecedentes.

■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".

■ En la segunda celda de la primera fila de la tabla, cambie

t_home.gif por t_background.gif.

■ También en la segunda celda de la primera fila de la tabla,

reemplace el texto ALT="Instrucción musical de

Chris Soll" por el texto ALT="Antecedentes".

■ En el código HTML de la barra de exploración, cambie el texto del

botón Página principal b_home2.gif por b_home.gif.

■ Asimismo, en el código HTML de la barra de exploración,

cambie el texto del botón Antecedentes b_background.gif

por b_background2.gif.

15 Guarde el archivo background.html.

16 Abra el archivo contact.html en el procesador de texto y haga los

cambios siguientes:

En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y

escriba: Contacto.

■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0".

■ En la segunda celda de la primera fila de la tabla, cambie

t_home.gif por t_contact.gif.

■ También en la segunda celda de la primera fila de la tabla,

reemplace el texto ALT="Instrucción musical de

Chris Soll" por el texto ALT="Contacto".

■ En el código HTML de la barra de exploración, cambie el texto del

botón Página principal b_home2.gif por b_home.gif.

■ Asimismo, en el código HTML de la barra de exploración,

cambie el texto del botón Contacto b_contact.gif por

b_contact2.gif.

139

17 Guarde el archivo contact.html.

18 Abra el archivo index.html en el explorador. Haga clic en cada

botón de la barra de exploración para comprobar su trabajo.

Cuando haga clic en un botón, debe mostrarse una página de

base; cada subpágina tiene que incluir el texto de la barra de título

de la página actual, un gráfico de pancarta del título personalizado

y un botón de barra de exploración (en negro) de la página actual

que se corresponda con la página mostrada. Además, en las

subpáginas no deben mostrarse las líneas del borde de la tabla (ya

que cambió el atributo BORDER en la etiqueta <TABLE> por "0"

en cada subpágina). En la figura 6-22 se ilustra cómo se

debe mostrar la página Lecciones en la ventana del explorador.

Figura 6-22. Cada subpágina muestra ahora una pancarta de título personalizado y

un botón negro “activo”.

¡Enhorabuena! Ha creado la estructura de todo el sitio de música. Ahora

insertaremos algo de contenido en la página principal.

Inserción de texto en el cuerpo de la

página principal

En esta sección, va a insertar un fragmento de texto en el cuerpo de la página

principal del sitio de música. Este paso se reduce en realidad a practicar con el

formato de texto. El contenido básico de la página principal consta de un par de

encabezados, texto en un párrafo, citas coloreadas y una lista sin numerar

vinculada. Por lo tanto, como puede imaginar, discutiremos cómo crear estos

tipos de elementos en las páginas siguientes.

140

Creación de encabezados

En el código HTML, puede definir seis niveles de encabezados mediante los

pares de etiquetas <H1></H1>, <H2></H2> y sucesivamente hasta

<H6></H6>, donde el tamaño del encabezado 1 es el mayor y el 6 el menor.

La figura 6-23 ilustra un ejemplo de los diversos tamaños de los encabezados.

Figura 6-23.

Los encabezados HTML estándar tienen seis tamaños predeterminados.

El sitio de música utiliza una etiqueta de encabezado en la página principal, que

da formato al mensaje de bienvenida al principio de la página:

1 Abra el procesador de texto y el archivo C:\music\index.html.

2 En la segunda fila y la segunda celda de la tabla (la celda siguiente

a la información de la barra de exploración), haga clic después de

<TD VALIGN="top">, presione Entrar y presione la tecla Tab.

En primer lugar, definirá el estilo de fuente para el texto del cuerpo de la celda:

3 Escriba lo siguiente:

<FONT FACE="verdana, arial, sans-serif">

Observe en el paso 3 los tres nombres de fuente del atributo

FACE. Dado que no sabe qué fuentes van a tener instaladas los

usuarios en su sistema, debe proporcionar un plan de repuesto

cuando defina los estilos de fuente. En el paso 3, si el equipo de un

usuario tiene instalada la fuente Verdana, el explorador mostrará el

texto del cuerpo siguiente en este estilo de fuente. Si Verdana no

está instalada en el equipo del usuario, el explorador buscará la

familia de la fuente Arial. Si ni Verdana ni Arial están instaladas en

el sistema del usuario, el explorador mostrará el texto del cuerpo

en un estilo Sans Serif. Si las fuentes enumeradas en la etiqueta

de fuente no se encuentran en el equipo del usuario, el explorador

mostrará el texto en su estilo de fuente predeterminado.

141

A continuación, agregará un salto de línea y un encabezado de bienvenida en la

página principal del sitio de música.

4 Presione Entrar, presione Tab, escriba <BR> para agregar un salto

de línea, presione Entrar, presione Tab y escriba la información de

encabezado siguiente con el tamaño 3:

<H3>Bienvenidos al recurso en línea de Chris

Soll, donde se proporciona información de sus

actuaciones e instrucción musical.</H3>

5 Guarde el archivo index.html. Su código debería ser similar al de la

figura 6-24.

Figura 6-24. El código agregado especifica un estilo de fuente e inserta un encabezado

de tamaño 3.

Adición de un párrafo de texto

Después del encabezado de bienvenida que creó en la sección anterior, agregará

texto al cuerpo. Las etiquetas <P></P> son las básicas que usará al

especificar texto en un párrafo, que es lo que va a hacer a continuación.

1 Haga clic después de la etiqueta </H3> que creó en la sección

previa, presione Entrar, presione Tab y escriba <P>¡Conozcan

a Chris!</P>.

142

2 Presione Entrar, presione Tab y escriba lo siguiente:

<P>En su calidad de profesora de música

con gran experiencia y reconocimiento

internacional, enseña piano y flauta a

músicos en ciernes, aficionados y

profesionales.</P>

3 Presione Entrar, presione Tab y escriba lo siguiente:

<P>Para complementar su considerado programa

instructivo, realiza actuaciones regularmente

en todo el mundo y, cada año, organiza

recitales y concursos en los que participan

sus alumnos.</P>

4 Finalmente, presione Entrar, presione Tab y escriba lo siguiente:

<P>Sus testimonios resumen las bondades del

éxito de la enseñanza de Chris:</P>

5 Guarde el archivo index.html.

Su código HTML debería ser similar al de la figura 6-25. Además, si obtiene

una vista previa del archivo index.html en el explorador, la página principal

debería parecerse a la de la figura 6-26. Su página está configurada casi por

completo; sólo falta agregar una cita o dos, lo que constituye el tema de la

sección siguiente.

Figura 6-25.

Este código muestra el texto del párrafo que se agrega a la página principal

del sitio de música.

143

Figura 6-26.

En este punto, en la página principal debería mostrarse el texto de los encabezados y del párrafo.

Formato de las citas y color del texto

Puede dar formato al texto como una cita para desplazarlo del texto que lo

rodea. Generalmente, los exploradores interpretan las parejas de etiquetas

<BLOCKQUOTE></BLOCKQUOTE> aplicando sangría a los márgenes

izquierdo y derecho del texto incluido en ellas. Si realmente desea aplicar

sangría al párrafo, puede anidar un comando de cita dentro de otro,

como en este ejemplo: <BLOCKQUOTE><BLOCKQUOTE>

</BLOCKQUOTE></BLOCKQUOTE>.

En esta sección, creará citas con el texto en color rojo oscuro:

1 Abra el archivo index.html en un procesador de texto, si es

necesario, haga clic después de Chris:</P> en la segunda celda

de la segunda fila de la tabla, presione Entrar dos veces y presione

la tecla Tab.

2 Escriba <BLOCKQUOTE><BLOCKQUOTE> para crear una cita

anidada dentro de otra.

3 Presione Entrar, presione Tab y escriba lo siguiente:

<FONT COLOR="maroon"><P><I>Chris es, con

mucho, la mejor profesora de música que he

tenido. Me enseñó más de lo que podría haber

aprendido en toda una vida con Viktor

McTonedeaf, el profesor de Royal

Music.</I></P>

Observe que el atributo COLOR de la etiqueta FONT se usa para

modificar el color del texto del párrafo.

144

4 Presione Entrar dos veces, presione Tab y escriba lo siguiente:

<P ALIGN="RIGHT"><I>- Moe Zart</I></P>

De esta forma, se inserta un nombre en cursiva, alineado a la

derecha, que se asocia con la cita especificada en el paso 3.

5 Presione Entrar dos veces, presione Tab y escriba lo siguiente:

<P><I>Chris Soll es la mejor profesora que

tuve antes de que "un incidente" terminara mi

carrera musical. Es una verdadera

maestra.</I></P>

6 Presione Entrar dos veces, presione Tab y escriba:

<P ALIGN="RIGHT"><I>- Vincent Vanngo</I></P>

7 Presione Entrar, presione Tab y escriba </FONT> para finalizar el

formato de color de fuente rojo oscuro.

8 Presione Entrar dos veces, presione Tab y escriba </BLOCKQUOTE></BLOCKQUOTE> para finalizar la

configuración e formato de cita.

9 Guarde el archivo index.html.

El texto de la cita debería aparecer en su documento HTML como se ilustra en

la figura 6-27. La figura 6-28 muestra el texto de la cita cuando se ve en un

explorador.

Figura 6-27.

Se agregan citas a las páginas Web para desplazar el texto.

145

Figura 6-28.

Para mostrar las citas, Internet Explorer aplica sangría al texto en los

márgenes izquierdo y derecho.

146

Creación de una lista sin numerar vinculada

El tipo final del texto que creará para la página principal del sitio de música es

una lista sin numerar. Este tipo de lista aparece como lista con viñetas en una

página Web, como se muestra en la figura 6-29.

Figura 6-29.

De forma predeterminada, las listas sin numerar se muestran con viñetas.

Nota

Puede usar los comandos HTML <OL></OL> para crear listas numeradas

(ordenadas) o los comandos <UL></UL> para crear listas sin numerar

(con viñetas). Cada elemento de estas listas se identifica mediante el par

de etiquetas <LI></LI>.

En esta sección, primero agregará un pequeño fragmento de texto que introduce

la lista sin numerar y, después, creará la lista (que incluye vínculos a las

páginas apropiadas):

1 Abra el archivo index.html en un procesador de texto, si es

necesario, haga clic al final de </BLOCKQUOTE>, en la segunda

celda de la segunda fila de la tabla, presione Entrar dos veces,

presione Tab y, después, escriba el párrafo siguiente:

<P>Solicite recibir sus lecciones hoy y únase a

la élite de pianistas y flautistas que estudian

con una de las mejores profesoras de Norte

América.</P>

147

2 Presione Entrar dos veces, presione Tab y escriba lo siguiente:

<P><B>Información general del sitio</B></P>

En el paso 3, insertará la etiqueta <UL> para comenzar la lista

sin numerar.

3 Presione Entrar dos veces, presione Tab y escriba <UL>.

En los pasos 4 a 9, para crear los elementos de la lista, incluirá cada elemento

dentro del par de etiquetas <LI></LI>. Asimismo, dará formato a la primera

palabra de cada entrada de la lista como hipervínculo a otra página del sitio.

4 Presione Entrar, presione Tab y escriba lo siguiente:

<LI><A HREF="lessons.html">Lecciones</A>

Información sobre cómo recibir instrucción

musical de Chris, incluyendo disponibilidad y

cuotas.</LI>

5 Presione Entrar, presione Tab y escriba lo siguiente:

<LI><A HREF="recitals.html">Recitales</A>

Programas, alumnos que participan y títulos de

las piezas representadas en los recitales de los

alumnos.</LI>

6 Presione Entrar, presione Tab y escriba lo siguiente:

<LI><A HREF="competitions.html">Concursos</A>

Fechas, cuotas, normas, programas e información

de la ceremonia de entrega de premios de los

próximos concursos de alumnos.</LI>

7 Presione Entrar, presione Tab y escriba lo siguiente:

<LI><A HREF="performances.html">Actuaciones</A>

Calendario de las actuaciones personales de Chris

Soll, que incluye fechas, ubicación, piezas e

información de las entradas.</LI>

8 Presione Entrar, presione Tab y escriba lo siguiente:

<LI><A HREF="background.html">Antecedentes</A>

Formación, actuaciones y experiencia

docente.</LI>

9 Presione Entrar, presione Tab y escriba lo siguiente:

<LI><A HREF="contact.html">Contacto</A>

Direcciones de correo electrónico, direcciones

físicas, números de teléfono y vínculos de mapas

que pueden ayudarle cuando solicite recibir las

lecciones y desee asistir a las actuaciones o

ponerse en contacto con Chris.</LI>

10 Presione Entrar, presione Tab y escriba </UL> para terminar la

lista sin numerar.

11 Presione Entrar, presione Tab y escriba </FONT> para completar el

texto del cuerpo y finalizar la especificación de la familia de la fuente.

148

12 Guarde el archivo index.html.

El código de la lista sin numerar debería ser similar al mostrado en la

figura 6-30 (y su página index.html se debería parecer a la mostrada

anteriormente en la figura 6-29).

Figura 6-30.

El código HTML resaltado incluye texto de los párrafos y una lista sin

numerar, con hipervínculos.

Por último, aunque no por ello con menor importancia, insertará una fotografía

vinculada en el área del cuerpo de la página principal del sitio de música.

Inserción y vinculación de una

imagen

En este momento, ya debería estar habituado a insertar y vincular gráficos.

(¡Ha adquirido mucha práctica hace un momento mientras creaba la barra

de exploración!) En esta página, preferimos mostrar la imagen debajo del

encabezado de tamaño 3 en la parte derecha de la página. Además, puesto que

la fotografía es una imagen de Chris, la vinculamos a la página Antecedentes.

Para insertar una imagen vinculada dentro del texto del cuerpo de su página,

siga estos pasos:

1 Abra el archivo index.html en un procesador de texto, si es

necesario, haga clic después de la etiqueta </H3> en la segunda

celda de la segunda fila de la tabla, presione Entrar dos veces y

presione la tecla Tab.

149

2 Escriba la información de imagen y el vínculo siguientes:

<A HREF="background.html"><IMG

SRC="images/p_chris.jpg" ALT="pic: Chris

Soll" WIDTH="170" HEIGHT="250" BORDER="0"

HSPACE="25" VSPACE="10" ALIGN="right"></A>

En este paso, puede ver algunos atributos añadidos a la etiqueta

<IMG>, que se definen como sigue:

■ HSPACE le permite especificar espacio adicional (en píxeles) entre

la imagen y el texto en los laterales izquierdo y derecho de la

misma.

■ VSPACE permite especificar espacio adicional (en píxeles) entre la

imagen y el texto por encima y por debajo de la imagen.

■ ALIGN indica que se alinee la imagen en la página y el texto se

ajuste en consecuencia. En este ejemplo, la imagen se alinea en el

lateral derecho de la página.

3 Guarde el archivo index.html.

Finalizando la página principal

Por último, debe quitar los bordes de la tabla en la página principal para poder

anunciar que su proyecto está terminado. Además, debe comprobar los vínculos

y ver todas las páginas con el fin de asegurarse de que el código HTML que ha

escrito es correcto. Primero, vamos a deshacernos de los bordes en la página

principal:

1 Abra el archivo index.html en un procesador de texto.

2 En la etiqueta <TABLE>, cambie el atributo BORDER de "1"

a "0".

3 Guarde el archivo index.html.

Ahora vamos a hacer clic en los vínculos, gráficos, texto ALT y otros elementos

de la página, y los comprobaremos. Por ejemplo, tiene que asegurarse de que en

ninguna de las páginas aparecen dos botones negros.

4 Abra el explorador, muestre index.html (o, si el documento ya está

abierto en el explorador, haga clic en Actualizar) y, después, haga

clic en cada vínculo (incluidas las imágenes vinculadas, el logotipo,

el icono Envíenos una nota y los vínculos de texto) para comprobar

que funcionan apropiadamente y que las páginas se muestran de

forma correcta. Si algún vínculo no responde como se espera, abra

el documento HTML correspondiente en el procesador de texto y

compruebe el código HTML minuciosamente. Revise los gráficos

de los botones y las pancartas para asegurarse de que ha incluido

los apropiados en cada página.

150

Nota

Puede que haya observado que sólo hemos proporcionado contenido para

la página principal. En este momento, pensamos que está suficientemente

preparado como para especificar el contenido del resto de las páginas si

desea obtener más práctica en el uso de HTML.

Uso del marco de trabajo del sitio de

música como plantilla

Después de todo el duro trabajo que le supuesto crear el sitio de música,

deseamos que tenga una plantilla HTML útil que pueda personalizar con

facilidad. Por lo tanto, vamos a contarle un pequeño secreto. Puede crear un

sitio Web con la plantilla del sitio de música incluso si no tiene ningún gráfico.

No es necesario que disponga de ninguna imagen de fondo, gráficos de

pancartas ni botones. Por el contrario, puede crear un sitio Web con los

vínculos de texto y los fondos en color si reemplaza los elementos de contenido

en las páginas Web del sitio de música. En la figura 6-31 se ilustra una página

Web que usa el sitio Web de música sin gráficos.

Figura 6-31.

Puede crear un sitio Web basado en texto que use el sitio de música como plantilla.

151

Sugerencia

Los gráficos pequeños de la página de ejemplo de la figura 6-35 son

imágenes prediseñadas que se descargan y se pegan conjuntamente para

crear una imagen sencilla. Si prefiere no incluir ningún gráfico en la página,

basta con que elimine la etiqueta <IMG> de su documento HTML.

En la figura 6-32 se muestra la página de la plantilla y en la figura 6-33 se

ilustra parte de su código fuente. Si desea agilizar el proceso cuando utilice una

plantilla para crear una página personalizada, haga clic en el menú Ver y,

después, en Código fuente para mostrar el código fuente de la plantilla. A

continuación, en la ventana de código fuente, haga clic en el menú Archivo,

haga clic en Guardar como y guarde el código fuente en el equipo. Ahora,

puede modificar su versión local de la plantilla si reemplaza el texto marcador

de posición con su contenido personalizado.

Figura 6-32.

Puede modificar la plantilla basada en texto para crear una página personalizada.

152

Figura 6-33.

Puede copiar el código fuente de la plantilla para tener un buen punto de

partida para el código de su página personalizada.

Sugerencia

En la figura 6-33, puede ver entradas de código HTML que comienzan

con un signo de admiración y dos guiones: <!-- logo -->. Estos tipos

de entradas se denominan comentarios. Los comentarios no se muestran

en la página Web; se usan como notas que permiten a los desarrolladores

etiquetar fragmentos del documento HTML. Los comentarios se han

agregado a la plantilla de ejemplo para ayudarle a identificar los

componentes HTML cuando personalice el código fuente.

Finalmente, observe en la figura 6-33 que el atributo BGCOLOR de la etiqueta

<BODY> se ha cambiado de blanco (#ffffff) a púrpura (#ccccff) y que

la primera etiqueta <TD> de cada fila de la tabla contiene un atributo

BGCOLOR configurado como dorado (#ffcc00). Puede usar el atributo

BGCOLOR para colorear el fondo de la página además de las celdas de la tabla,

si no usa ninguna imagen de fondo. Puede obtener una apariencia bastante

creativa si aplica un color al fondo y colorea las celdas de la tabla

selectivamente con otro color diferente. (No tiene que colorear igual todas las

celdas de la tabla.)

153

Recursos adicionales

Como hemos mencionado, abundan las páginas Web y los libros de HTML.

A continuación indicamos algunos de nuestros recursos de HTML favoritos:

■ Castro, Elizabeth. HTML for the World Wide Web. 4ª edición ed.

Berkeley, CA: Peachpit Press, 2000. (ISBN: 0-201-35493-4)

Este libro muestra visualmente cómo usar la mayor parte de los

comandos HTML. Las explicaciones son breves pero útiles cuando

se usan conjuntamente con las referencias visuales.

■ Morrison, Michael. Faster Smarter HTML & XML. Redmond, WA:

Microsoft Press, 2002. (ISBN: 0-7356-1861-5) Este libro se destina

a los usuarios interesados pero inexpertos que deseen desarrollar

páginas Web con HTML. Una característica agradable de este libro

es que ofrece varias oportunidades de aprender de forma práctica.

■ Página de recursos de Creation Guide

(www.creationguide.com/resources, en inglés) que se actualiza

continuamente para incluir los recursos relacionados con el

desarrollo Web más actuales.

■ El sitio Web del World Wide Web Consortium (www.w3.org, en

inglés) es el sitio principal en línea para la mayor parte de las

especificaciones de HTML más recientes. En el momento de

redactar este documento, HTML 4.01 es la especificación

aceptada. Use los vínculos Table of Contents, Elements y

Attributes (Tabla de contenido, Elementos y Atributos,

respectivamente)

en la página para buscar los comandos HTML y su descripción.

Puede encontrar una lista muy útil de elementos HTML en

www.w3.org/TR/1999/REC-html401-19991224/index/elements.html

(en inglés).

■ Web Developer’s Virtual Library (www.wdvl.com, en inglés)

proporciona recursos, código de ejemplo y tutoriales para

desarrolladores Web.

■ webmonkey (http//hotwired.lycos.com/webmokey/, en inglés)

proporciona numerosos recursos para desarrolladores en línea.

154

Puntos clave

■ Los comandos HTML sirven como instrucciones que indican a un

explorador cómo mostrar el contenido de una página Web.

■ Los comandos HTML aparecen entre marcas < >, que suelen

venir en pares, y en ellos no se distinguen mayúsculas y

minúsculas.

■ Las etiquetas HTML de apertura suelen contener atributos que

permiten refinar sus instrucciones.

■ Las etiquetas estándar para los documentos HTML son las

siguientes:

■ <!DOCTYPE...>

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

■ Si es posible, almacene todos los documentos y gráficos de un sitio

Web dentro de la misma carpeta principal. Cree una carpeta de

imágenes para los gráficos del sitio Web dentro de la carpeta

principal.

■ Para hacerle la vida más fácil, idee un sistema de denominación de

gráficos que le ayude a diferenciar los diversos tipos de imágenes,

como los botones, pancartas, fotografías, etcétera.

■ Cuando cree páginas Web, guarde los documentos HTML y véalas

en un explorador con frecuencia.

■ Compruebe siempre que ha incluido todos los paréntesis angulares

(<>) y comillas ("") en el código. Si faltan elementos o los

comandos HTML están mal escritos, la página puede mostrarse de

forma inapropiada o no mostrarse en ningún explorador.

155

Creación de sitios Web con FrontPage Una vez completada esta lección, podrá:

Usar FrontPage para automatizar la creación de páginas Web.

Diseñar subpáginas a partir de una plantilla estándar, insertar tablas y

agregar botones de exploración y pies de página.

Definir hojas de estilo en cascada (CSS) para dar formato a las

páginas Web.

Crear mapas de imágenes y formularios para conseguir que un sitio

sea más interactivo.

Utilizar FrontPage para crear una página principal.

Cuando ve las noticias en la televisión, el único “equipamiento” que necesita es

el aparato y un lugar donde sentarse. Pero ¿ y cuando alquila un vídeo o solicita

una película de pago por visión que está repleta de estupendos efectos especiales

y tiene una banda sonora imponente? En lugar de acudir a la televisión de

13 pulgadas de andar por casa, es probable que prefiera usar lo último en

sistemas para entretenimiento doméstico: es decir, el exclusivo sistema que se

puede controlar fácilmente mediante un único control remoto y que tiene una

televisión de pantalla grande ultra nítida, con cable digital, estéreo Dolby y

componentes de sonido envolvente, todo mezclado en las sombras y colocado

estratégicamente para lograr una visualización óptica y una sensación acústica de

lo más placenteros, entre los confortables pliegues de un enorme sofá de piel.

Reconozcamos que estos “extras” no son estrictamente necesarios, pero, con

seguridad, pueden marcar una gran diferencia en ocasiones. Lo mismo se puede

decir de los editores HTML. El Bloc de notas (un procesador de texto básico)

puede semejarse a la forma de crear páginas Web “con el televisión, la silla y el

control remoto”, mientras que FrontPage proporciona la solución al estilo del

“sistema de lujo para el entretenimiento doméstico” en el desarrollo de sitios

Web. En esta lección, vamos a ocuparnos de los “extras”.

Para crear las páginas Web descritas en esta lección, necesitará los siguientes

“utensilios”:

■ Una copia de Microsoft FrontPage (preferiblemente la versión 2002).

■ 39 archivos de ejercicios, que se pueden encontrar en la

subcarpeta Lesson07 de la carpeta Practice, en el disco duro.

Estos archivos son mars.doc, thankyou.htm y 37 archivos gráficos

que usará en el sitio Web que cree con FrontPage.

LECCIÓN 7

156

Para empezar a realizar las actividades de esta lección, siga estos pasos:

1 Cree una carpeta denominada “sky” en el disco duro.

(Por comodidad, nos referiremos al disco duro como unidad C:\

en toda la lección.)

2 Copie los archivos mars.doc y thankyou.htm de la subcarpeta

Lesson07 de la carpeta Practice a la carpeta C:\sky que ha creado

en el paso anterior.

3 Cree una carpeta images en C:\sky y copie en ella los siguientes

archivos gráficos (que se encuentran en la subcarpeta Lesson07 de

la carpeta Practice, en el disco duro):

b_aboutus.gif bg.gif mars.jpg

b_aboutus2.gif bigdip1.gif neptune.jpg

b_contact.gif bigdip2.gif saturn.jpg

b_contact2.gif bigdip3.gif solarsystem.gif

b_gallery.gif bigdip4.gif t_aboutus.gif

b_gallery2.gif bigdip5.gif t_contact.gif

b_links.gif bullet_star.gif t_gallery.gif

b_links2.gif corner_botm_left.gif t_links.gif

b_meetings.gif corner_botm_right.gif t_meetings.gif

b_meetings2.gif corner_top_left.gif t_skyguide.gif

b_skyguide.gif corner_top_right.gif titlebar-home.gif

b_skyguide2.gif logo.gif titlebar.gif

Planeamiento del sitio Web con

FrontPage

Cuando planeamos inicialmente el sitio del proyecto de esta lección,

pretendíamos crear una página para un equipo de béisbol ficticio. Por

desgracia, no pudimos sobornar lo suficiente a nuestros amigos para que

posaran para la imagen del equipo, de modo que optamos por crear un sitio

Web para un club de astronomía. Terminamos incorporando en él muchas de

las funcionalidades que habíamos planeado originalmente para el sitio de

béisbol. Por ejemplo, en lugar de hacer un mapa de imágenes de una fotografía

del equipo en la que se podía hacer clic en la cabeza de cada persona para tener

acceso a una página personal o de estadísticas, usamos un mapa de imágenes

del sistema solar en la que se puede hacer clic en cada planeta para ver una

página de información acerca de él. Esperamos que a medida que experimente

con las técnicas que presentamos en este proyecto, comience a pensar formas

de variarlas para crear sitios Web personalizados.

157

Tras determinar que el sitio de un club de astronomía se adaptaría a

nuestros propósitos, decidimos que debería constar de una página principal

personalizada vinculada a subpáginas con un formato estándar. El uso de una

página principal diferente es una técnica de diseño común en los sitios Web,

que se usa para hacer que la página principal destaque de las subpáginas.

Dado que FrontPage ofrece tantas opciones, creímos que mostrar una página

principal distinta sería una buena práctica de diseño y también nos permitiría

enseñarle algunas características adicionales de FrontPage. Para ver nuestro

proceso de planeamiento, eche un vistazo a las figuras 7-3 a 7-5. La figura 7-3

contiene un dibujo de la Osa mayor que sugerimos para la página principal.

La figura 7-4 muestra el dibujo de la composición estándar de la subpágina. Y,

finalmente, la figura 7-5 ilustra el esquema del sitio del club de astronomía.

Figura 7-3.

Esquema de la página principal del club de astronomía que muestra la Osa

mayor y contiene vínculos a las subpáginas principales del sitio.

158

Figura 7-4.

Dibujo de una subpágina típica del club de astronomía que ilustra que las subpáginas se estructurarán de forma diferente a la página principal.

159

Figura 7-5.

El esquema del sitio Web del club de astronomía clarifica su jerarquía.

Debido a la relativa complejidad de la página principal, va a crearla en último

lugar. En este proyecto, para comenzar el proceso de diseño, consolidará la

composición estándar del sitio para las subpáginas creando un documento

subpágina.htm que puede usar como plantilla al crear las páginas del sitio.

Pero, en primer lugar y antes de comenzar a crear páginas Web, debe indicarle

a FrontPage que desea crear un nuevo “Web”.

160

Creación de un nuevo Web

Como hemos mencionado en la sección anterior, el primer paso para diseñar un

sitio Web es indicar su intención de crear páginas Web en FrontPage mediante

la creación de un nuevo Web. Para ello, siga estos pasos:

1 Compruebe que ha creado una carpeta denominada C:\sky\images

en la que haya colocado las imágenes que copió de la subcarpeta

Lesson07, que se encuentra en la carpeta Practice, en el disco duro.

Además, debe asegurarse de que ha copiado los archivos mars.doc

y thankyou.htm de la carpeta Lesson07 y los ha almacenado en

C:\sky.

2 Abra FrontPage y cierre el documento en blanco, si se

muestra alguno.

3 Si el panel Página o Web no aparece, abra el menú Archivo,

seleccione Nuevo y haga clic en Página o Web.

4 En la sección Nuevo, haga clic en la opción Sitio Web vacío y se

abrirá el cuadro de diálogo Plantillas de sitio Web. Haga clic en el

cuadro de texto Especifique la ubicación del nuevo sitio Web,

resalte el texto existente, escriba C:\sky o haga clic en Examinar y

vaya a C:\sky, y, a continuación, haga clic en Aceptar. Después de

un breve proceso en el que FrontPage agrega Extensiones de

servidor de FrontPage a la carpeta Web (C:\sky), verá que la barra

de título de FrontPage cambia a Microsoft FrontPage -C:\sky, lo

que significa que está preparado para la acción.

5 En la barra de vistas en el lateral izquierdo de la ventana de

FrontPage, haga clic en el icono Informes. Aparece el resumen de

un sitio. Este informe se presenta porque tiene gráficos

almacenados en la carpeta C:\sky\images y los archivos mars.doc

y thankyou.htm almacenados en C:\sky.

Nota

Aunque es conveniente tener preparadas de antemano todas las imágenes

que piense usar en su sitio Web, no es necesario. Pero, puesto que los

gráficos del club de la astronomía están ya disponibles (y dado que este

curso trata de la creación de páginas Web y no de gráficos Web), puede

simplificar la creación del Web en este proyecto (o de cualquier otro con

respecto a esa cuestión) si organiza los gráficos del sitio antes de empezar a

crearlo.

6 Haga clic en el icono Página de la barra de vistas y en el botón

Crear una página normal nueva en la barra de herramientas

estándar para abrir una página en blanco (observe que el texto de

la barra de título de FrontPage cambia a Microsoft FrontPage -

C:\sky\pagina_nueva_1.htm).

Ahora está listo para crear una subpágina estándar que puede usar como

plantilla en el sitio Web del club de astronomía.

FrontPage hace referencia a

los sitios Web como Webs.

161

Creación de la composición de la

subpágina

En esta sección, creará la composición de una subpágina estándar que podrá

copiar y usar con el fin de crear páginas de base para cada subpágina del sitio.

En primer lugar, configurará las propiedades de página de la subpágina.

Configuración de las propiedades de página

Para empezar, compruebe que en FrontPage aparece un área de trabajo en blanco.

Si siguió los pasos de la sección anterior, debe ver la página. A continuación se

enumeran los pasos necesarios para crear una subpágina básica:

1 Haga clic con el botón secundario del mouse (ratón) en la página y

seleccione Propiedades de página. Se abre el cuadro de diálogo

Propiedades de página.

2 En el cuadro de texto Título, en la ficha General, escriba Club de

la astronomía, como se ilustra en la figura 7-6.

Figura 7-6.

Puede especificar el texto del título en el cuadro de diálogo Propiedades

de página.

3 Haga clic en la ficha Fondo, active la casilla de verificación Imagen

de fondo para especificar que desea que la página use una imagen

de fondo y, después, haga clic en Examinar.

Para ver una vista en

miniatura de una imagen

seleccionada en el cuadro

de diálogo Seleccionar

imagen de fondo, haga clic

en la flecha de lista

desplegable Vistas en la

barra de herramientas del

cuadro de diálogo y

seleccione Vista previa.

162

4 En el cuadro de diálogo Seleccionar imagen de fondo, haga doble

clic en la carpeta images en C:\sky y, después, haga clic en bg.gif,

como se ilustra en la figura 7-7.

5 Haga clic en Abrir para seleccionar la imagen de fondo y vuelva al

cuadro de diálogo Propiedades de página.

Figura 7-7.

Para asignar una imagen de fondo a la página Web, seleccione bg.gif

en el cuadro de diálogo Seleccionar imagen de fondo.

6 Continuando en la ficha Fondo, haga clic en la casilla de

verificación Habilitar efectos de conversión de hipervínculos y,

después, haga clic en el botón Estilo de conversión. Se abre el

cuadro de diálogo Fuente. En el área Fuente, conserve la selección

(Fuente predeterminada) y, en el cuadro de texto Estilo de fuente,

seleccione Normal.

7 Haga clic en el cuadro desplegable Color, haga clic en el

cuadrado de color rojo (éste es el color predeterminado) y haga clic

en Aceptar. Esta opción especifica que los vínculos de texto se

muestren en rojo siempre que el cursor del mouse del usuario pase

sobre el vínculo de texto.

8 Después, en la ficha Fondo, haga clic en la flecha de lista

desplegable Fondo y haga clic en el cuadro de color negro, a

continuación, haga clic en la flecha de lista desplegable Texto y en

el cuadro de color negro.

163

Nota

El paso 8 no contiene un error: debe establecer el color tanto del fondo

como del texto en negro. En este proyecto, la mayor parte del texto que

escriba se mostrará en las celdas de una tabla blanca, de modo que, para

ahorrar tiempo posteriormente, debería configurar el color del texto

predeterminado en negro incluso aunque el fondo también tenga

configurado este color.

9 Haga clic en la flecha de lista desplegable Hipervínculo y en el

cuadro de color azul; haga clic en la flecha de lista desplegable

Hipervínculo visitado y en el cuadro de color púrpura; a

continuación, haga clic en la flecha de lista desplegable

Hipervínculo activo y haga clic en el cuadro de color rojo. La

ficha Fondo debería ser similar ahora a la de la figura 7-8.

Figura 7-8.

La ficha Fondo rellena muestra los colores predeterminados que

seleccionó para la página Web actual.

Jerga: un hipervínculo activo

hace referencia a un

hipervínculo en el que se ha

hecho clic. Si establece en

rojo la propiedad de color

para los hipervínculos activos,

un hipervínculo se mostrará

en rojo mientras el usuario

haga clic en el vínculo.

164

Incluso aunque en el proyecto se usen los colores predeterminados

para los hipervínculos, debería hacer clic en los cuadros de color

de cada componente para reemplazar la configuración de color

“automática” de cada elemento. Si no reemplaza los colores

automáticos con los especificados, algunos exploradores podrían

insertar colores personalizados para los hipervínculos que pueden

no funcionar bien en su sitio; por ejemplo, si los hipervínculos “que

visita” un usuario se configuran con el color negro, los vínculos

desaparecerán en el fondo negro cuando los usuarios hagan clic

en ellos.

10 Haga clic en Aceptar para implementar la configuración de

Propiedades de página y cerrar el cuadro de diálogo Propiedades

de página.

Guardar su trabajo

Antes de ir más lejos, debe guardar su trabajo. Podrá usar la misma configuración

básica en todas las subpáginas, así que guardará la página que está creando en

este momento como plantilla genérica que puede copiar para crear todas las

subpáginas del sitio. Para guardar el archivo actual, siga estos pasos:

1 En el menú Archivo, haga clic en Guardar.

2 En el cuadro de diálogo Guardar como, haga clic en el botón

Cambiar título (que se encuentra en la parte inferior derecha del

cuadro de diálogo) para abrir el cuadro de diálogo Establecer título

de la página y cambie el texto por Club de la astronomía: página

genérica, como se muestra en la figura 7-9. A continuación, haga

clic en Aceptar.

Figura 7-9.

El cuadro de diálogo Establecer título de página se configura para

modificar el texto del título de una página.

3 En el cuadro Nombre de archivo, escriba subpágina y, a

continuación, haga clic en Guardar.

165

Adición del logotipo y el gráfico de la pancarta

de título

En esta sección, continuará configurando la plantilla de las subpáginas; para

ello, insertará el logotipo del club de astronomía y el gráfico de la pancarta de

título, que aparecen en la parte superior de cada página:

1 En el documento C:\sky\subpágina.htm (que debe estar abierto en

FrontPage si continúa con el proyecto a partir de la sección

anterior), haga clic en el menú Insertar, seleccione Imagen y,

después, elija Desde el archivo.

Sugerencia

Si cerró el documento subpágina.htm, puede volver a abrirlo si abre

FrontPage, hace clic en el icono Abrir (o hace clic en Abrir en el menú

Archivo), va a C:\sky en el cuadro de diálogo Abrir y hace doble clic en

subpágina.htm.

2 En el cuadro de diálogo Imagen, muestre el contenido de la

carpeta de imágenes en C:\sky\images, seleccione el archivo

logo.gif y haga clic en Insertar (o, simplemente, haga doble clic en

el archivo logo.gif). El logotipo (que es Saturno junto con algunas

lunas) aparece en la página.

3 En la barra de herramientas estándar, haga clic en el botón Insertar

imagen desde archivo y haga doble clic en el archivo titlebar.gif. La

imagen de la barra de título se inserta junto al logotipo.

4 Haga clic con el botón secundario del mouse en la imagen logo.gif

(la imagen de Saturno), seleccione Propiedades de imagen, haga

clic en la ficha General, haga clic en el cuadro Texto de la sección

Representaciones alternativas, escriba Logotipo del Club de la

astronomía y haga clic en Aceptar.

5 Haga clic con el botón secundario del mouse en la imagen

titlebar.gif, seleccione Propiedades de imagen, haga clic en la

ficha General, haga clic en el cuadro Texto de la sección

Representaciones alternativas, escriba Club de la astronomía y

haga clic en Aceptar.

6 Vuelva a hacer clic con el botón secundario del mouse en la

imagen del logotipo, seleccione Hipervínculo, escriba index.htm en

el cuadro de texto Dirección y haga clic en Aceptar.

166

En este punto, el logotipo se vincula a la página principal (futura) y ambos

gráficos se insertan y se alinean a la izquierda, de forma predeterminada.

En la mayor parte de los exploradores, la alineación a la izquierda ayudará a

mantener los gráficos juntos pero puesto que las dos imágenes ocupan la parte

superior de la página, la barra de título podría ajustarse en la línea siguiente en

algunos exploradores, si los usuarios cambian el tamaño de la ventana de su

explorador por uno muy pequeño, en cuyo caso el logotipo se mostraría en la

línea superior y la barra de título se desplazaría a la izquierda debajo del gráfico

del logotipo en la línea siguiente, efecto que no es el que se persigue en este

sitio Web. Sólo para asegurarnos, puede agregar las etiquetas HTML que

impiden realizar un salto de línea (<NOBR></NOBR>) al código fuente de la

página con el fin de especificar que los dos gráficos se deben mantener juntos

independientemente del tamaño de la ventana del explorador.

7 En FrontPage, haga clic en la opción de vista HTML. El código

fuente HTML se muestra en la ventana del área de trabajo de

FrontPage.

Antes de agregar las etiquetas <NOBR></NOBR>, vamos a facilitar el trabajo

en FrontPage haciendo que ajuste el texto del código.

8 Haga clic en Herramientas, haga clic en Opciones de página y

muestre la ficha Código fuente HTML.

9 En la sección General, haga clic en Cambiar el formato con las reglas

siguientes, active la casilla de verificación Permitir saltos de línea

dentro de etiquetas en la sección Formato y haga clic en Aceptar.

Ahora podrá ver el código HTML sin tener que desplazarse a la

izquierda y a la derecha demasiado, lo que significa que ya puede

agregar las etiquetas <NOBR></NOBR>.

10 En el código fuente, haga clic después de la etiqueta de apertura de

párrafo (<p>), escriba <NOBR>, haga clic antes de la etiqueta de

cierre de párrafo (</p>) y escriba </NOBR>. La figura 7-10 muestra

las etiquetas HTML recién agregadas (en color naranja) que

garantizarán que los gráficos se muestren siempre uno junto al otro.

167

Figura 7-10.

Al agregar las etiquetas <NOBR> y </NOBR> al código fuente de

una página, se asegura de que un salto de línea no separe elementos

particulares.

11 Haga clic en Guardar (el código en mayúsculas cambiará

automáticamente y se pondrá en minúsculas) y, después, haga clic

en la ficha vista Normal para volver a mostrar la representación

gráfica de subpágina.htm en su área de trabajo. La página debería

ser similar a la de la figura 7-11.

Figura 7-11.

En este punto, el archivo subpágina.htm incluye imágenes de fondo,

del logotipo y de la barra de título.

168

Inserción de una tabla

En esta sección, creará la tabla de base que se usa para contener el texto del

cuerpo de cada subpágina en el sitio Web del club de astronomía. Tómese su

tiempo en los pasos siguientes: es más fácil configurar la tabla correctamente la

primera vez que intentar buscar una configuración errónea. Además, aunque

podría parecer que esta sección incluye muchos pasos, éstos son bastante

repetitivos, de modo que el proceso no es demasiado complejo. (En otras

palabras, no deje que la cantidad de pasos le abrume.) Cuando cree sus propias

tablas, probablemente tenga que experimentar con algunas configuraciones

antes de conseguir que le gusten, que es exactamente lo que nosotros hacemos

también. Para crear su tabla en este proyecto, siga estos pasos:

1 Presione la tecla de flecha abajo una vez para colocar el cursor

debajo del gráfico y presione Mayús+Entrar para colocar el cursor

donde desee insertar la tabla.

2 En la barra de herramientas estándar, haga clic en el botón Insertar

tabla, arrastre para seleccionar dos filas y cinco columnas de

cuadros en la ventana emergente y, después, suelte el botón para

insertar la tabla en la página. En la figura 7-12 se ilustra el proceso

de creación de la tabla. Como puede ver, los bordes se muestran

cuando inserta por primera vez una tabla. En efecto, los bordes de

la tabla están configurados para mostrarse con 1 píxel de ancho.

Después, cuando rellene la tabla, cambiará la configuración de los

bordes con el valor cero (0) para ocultar las líneas.

Figura 7-12.

De forma predeterminada, FrontPage crea las tablas con un borde de

1 píxel.

169

3 Haga clic con el botón secundario del mouse en alguna parte de la

tabla, elija Propiedades de tabla, compruebe que Margen de celdas

desde el borde al texto está configurado como 0, Espaciado entre

celdas está configurado como 0, Especificar ancho está

configurado como 100 por cien, la opción Tamaño en Bordes está

configurado como 1 y haga clic en Aceptar.

4 Haga clic con el botón secundario del mouse en la fila 1, columna 1.

En el menú contextual, seleccione Propiedades de celda.

5 En el cuadro de diálogo Propiedades de celda, configure la opción

Alineación horizontal como Centrar, la opción Alineación vertical

como Superior, compruebe que la casilla de verificación Especificar

ancho está activada, escriba 130 en el cuadro de texto Especificar

ancho y seleccione la opción En píxeles, como se muestra en la

figura 7-13.

Figura 7-13.

El cuadro de diálogo Propiedades de celda se usa para configurar una

celda de una tabla.

170

6 Haga clic en Aceptar para activar la configuración.

7 Haga clic con el botón secundario del mouse en la fila 2, columna

1. En el menú contextual, seleccione Propiedades de celda.

8 En el cuadro de diálogo Propiedades de celda, configure la opción

Alineación horizontal como Centrar, Alineación vertical como

Inferior, Especificar ancho como 130 píxeles, active la casilla de

verificación Especificar alto, configure la opción Especificar alto

como 15 píxeles y haga clic en Aceptar.

9 Haga clic con el botón secundario del mouse en la celda de la fila

1, columna 2. Seleccione Propiedades de celda. Configure la

opción Alineación horizontal como Izquierda, la opción Alineación

vertical como Superior, la opción Especificar ancho como 1 píxel y

haga clic en Aceptar (no se preocupe si no ve un cambio en la

tabla en este momento, la celda no cambiará de tamaño hasta que

también le dé formato debajo).

10 Haga clic con el botón secundario del mouse en la celda de la fila

2, columna 2. Seleccione Propiedades de celda. Configure la

opción Alineación horizontal como Izquierda, la opción Alineación

vertical como Inferior, la opción Especificar ancho como 1 píxel,

active la casilla de verificación Especificar alto, configure la opción

Especificar alto como 15 píxeles y haga clic en Aceptar. (Ahora la

segunda columna de la tabla debe tener 1 píxel de ancho.)

11 Haga clic con el botón secundario del mouse en la celda de la fila

1, columna 3. En el menú contextual, seleccione Propiedades de

celda, configure la opción Alineación horizontal como Izquierda, la

opción Alineación vertical como Superior, la opción Especificar

ancho como 15 píxeles, especifique Color de fondo como Blanco y

haga clic en Aceptar.

12 Haga clic con el botón secundario del mouse en la celda de la fila 2,

columna 3. En el menú contextual, seleccione Propiedades de celda,

configure la opción Alineación horizontal como Izquierda, la opción

Alineación vertical como Inferior, la opción Especificar ancho como

15 píxeles, haga clic en la casilla de verificación Especificar alto,

configure la opción Especificar alto como 15 píxeles, especifique

Blanco como Color de fondo y haga clic en Aceptar.

13 Haga clic con el botón secundario del mouse en la celda de la fila 1,

columna 4. En el menú contextual, seleccione Propiedades de celda,

configure Alineación horizontal como Izquierda, Alineación vertical

como Superior, desactive la casilla de verificación Especificar ancho

(no establezca ningún ancho para esta columna porque tendrá que

cambiar el tamaño de forma que quepa en la ventana del explorador

de cada usuario), especifique Blanco como Color de fondo y haga

clic en Aceptar.

¡No olvide guardar con

frecuencia su trabajo!

171

14 Haga clic con el botón secundario del mouse en la celda de la fila 2,

columna 4. En el menú contextual, seleccione Propiedades de celda,

configure la opción Alineación horizontal como Izquierda, la opción

Alineación vertical como Inferior, desactive la casilla de verificación

Especificar ancho, active la casilla de verificación Especificar alto,

configure la opción Especificar alto como 15 píxeles, especifique

Blanco como Color de fondo y haga clic en Aceptar.

15 Haga clic con el botón secundario del mouse en la celda de la fila

1, columna 5. En el menú contextual, seleccione Propiedades de

celda, configure la opción Alineación horizontal como Derecha, la

opción Alineación vertical como Superior, la opción Especificar

ancho como 15 píxeles, especifique Blanco como Color de fondo y

haga clic en Aceptar.

16 Haga clic con el botón secundario del mouse en la celda de la fila

2, columna 5. En el menú contextual, seleccione Propiedades de

celda, configure la opción Alineación horizontal como Derecha, la

opción Alineación vertical como Inferior, la opción Especificar

ancho como 15 píxeles, la opción Especificar alto como 15 píxeles,

especifique Blanco como Color de fondo y haga clic en Aceptar. La

tabla ahora debería ser similar a la mostrada en la figura 7-14.

Figura 7-14.

Puede modificar la composición interna de una tabla si ajusta las

propiedades de las celdas.

Observe en la figura 7-14 que el grupo de celdas de la derecha de

la tabla se presenta como un área rectangular de color blanco.

Ahora va a agregar gráficos pequeños a las celdas de la esquina

del área de color blanco para crear la ilusión de que la tabla tiene

esquinas redondeadas:

172

17 Haga clic en la celda de la fila 1, columna 3. En el menú Insertar,

seleccione Imagen y elija Desde el archivo. Seleccione la imagen

corner_top_left.gif en la carpeta C:\sky\images y haga clic en Insertar.

Sugerencia

Para hacerse una idea de cómo quedan los gráficos en la esquina, vea los

gráficos curvos pequeños en un programa de pintura u obtenga una vista

previa de la imagen en el cuadro de diálogo Insertar imagen. Puede imaginar

fácilmente el modo en que la curva pequeña puede crear la ilusión de una

esquina redondeada cuando se inserta en la celda de una tabla.

18 Haga clic en la celda de la fila 2, columna 3. Haga clic en Insertar

imagen desde archivo en la barra de herramientas estándar y haga

doble clic en la imagen corner_botm_left.gif en la carpeta

C:\sky\images.

19 Haga clic con el botón secundario del mouse en la imagen

corner_botm_left.gif recién insertada. En el menú contextual, haga

clic en Propiedades de imagen, haga clic en la ficha Apariencia, si

es necesario, seleccione Inferior en la lista desplegable Alineación

y haga clic en Aceptar.

20 Haga clic en la celda de la fila 1, columna 5 (dado que dio formato

a la celda para alinear la información a la derecha, el cursor

aparecerá a la derecha de la celda). Haga clic en Insertar imagen

desde archivo en la barra de herramientas estándar y haga doble

clic en la imagen corner_top_right.gif en la carpeta C:\sky\images.

21 Haga clic en la celda de la fila 2, columna 5. Haga clic en Insertar

imagen desde archivo y haga doble clic en la imagen

corner_botm_right.gif en la carpeta C:\sky\images.

22 Haga clic con el botón secundario del mouse en la imagen

corner_botm_right.gif recién insertada. En el menú contextual,

haga clic en Propiedades de imagen, haga clic en la ficha

Apariencia, si es necesario, seleccione Inferior en la lista

desplegable Alineación y haga clic en Aceptar.

173

23 Haga clic en Guardar en la barra de herramientas. En este punto,

su tabla debería mostrarse como en la figura 7-15.

Figura 7-15.

Los gráficos pequeños agregados a las celdas de la tabla crean la

apariencia de que las esquinas son redondeadas.

Adición de botones de exploración

Ahora que la tabla está creada, puede empezar a rellenar sus celdas. En primer

lugar, hay que agregar algunos botones de exploración a la primera columna.

FrontPage ofrece algunos botones con efectos especiales bonitos, que va a usar

en este proyecto:

1 Haga clic en la celda de la fila 1, columna 1.

2 En el menú Insertar, seleccione Componente Web, seleccione

Efectos dinámicos en la sección Tipo de componente, elija Botón

activable en la sección Elegir un efecto (observe que la descripción

del componente se muestra a continuación de los cuadros de lista

en el cuadro de diálogo Insertar componente Web; a medida que

haga clic en los efectos, la descripción cambia) y haga clic en

Finalizar.

174

3 Configure el cuadro de diálogo Propiedades de botón activable,

como se muestra en la figura 7-16, con las opciones siguientes:

Opción Valor

Texto de botón Página principal

Vincular a index.htm

Color del botón Azul marino

Efecto Brillo

Ancho 120

Color de fondo Automático

Color de efecto Azul

Alto 24

Figura 7-16.

FrontPage permite crear botones activables si configura el cuadro de diálogo Propiedades de botón activable.

4 Haga clic en Aceptar.

5 Presione Entrar. En la barra de herramientas estándar, haga clic en

Componente Web, compruebe que las opciones Efectos dinámicos

y Botón activable están seleccionadas, y haga clic en Finalizar.

Escriba Acerca de nosotros en el cuadro de texto Texto de botón,

escriba aboutus.htm en el cuadro de texto Vincular a, especifique

el resto de las opciones según se indica en el paso 3 y haga clic en

Aceptar.

6 Presione Entrar. Haga clic en Componente Web, compruebe

que las opciones Efectos dinámicos y Botón activable están

seleccionadas y haga clic en Finalizar. Escriba Contactar en el

cuadro de texto Texto de botón, escriba contact.htm en el cuadro

de texto Vincular a, especifique el resto de las opciones según se

indica en el paso 3 (que es la predeterminada) y haga clic en

Aceptar.

175

7 Presione Entrar. Haga clic en Componente Web, compruebe

que las opciones Efectos dinámicos y Botón activable están

seleccionadas y haga clic en Finalizar. Escriba Reuniones en el

cuadro de texto Texto de botón, escriba meetings.htm en el

cuadro de texto Vincular a, especifique el resto de las opciones

según se indica en el paso 3 y, después, haga clic en Aceptar.

8 Presione Entrar. En el menú Insertar, haga clic en Componente

Web, compruebe que las opciones Efectos dinámicos y Botón

activable están seleccionadas, y haga clic en Finalizar. Escriba

Mapa del cielo en el cuadro de texto Texto de botón, escriba

skyguide.htm en el cuadro de texto Vincular a, especifique el resto

de las opciones según se indica en el paso 3 y, después, haga clic

en Aceptar.

9 Presione Entrar. Haga clic en Componente Web, compruebe

que las opciones Efectos dinámicos y Botón activable están

seleccionadas y haga clic en Finalizar. Escriba Galería de fotos

en el cuadro de texto Texto de botón, escriba gallery.htm en el

cuadro de texto Vincular a, especifique el resto de las opciones

según se indica en el paso 3 y haga clic en Aceptar.

10 Presione Entrar. Haga clic en Componente Web, compruebe que las

opciones Efectos dinámicos y Botón activable están seleccionadas y

haga clic en Finalizar. Escriba Vínculos de astronomía en el cuadro

de texto Texto de botón, escriba links.htm en el cuadro de texto

Vincular a, especifique el resto de las opciones según se indica en el

paso 3 y, después, haga clic en Aceptar.

11 Haga clic en Guardar. La subpágina debería verse en las vistas

Normal y Vista previa como se ilustra en la figura 7-17.

Figura 7-17.

La tabla y los botones de exploración se ven en la vista Normal pero todavía

no en Vista previa.

176

Como puede ver en la figura 7-17, FrontPage 2002 tropieza con un pequeño

fallo técnico cuando se insertan los botones activables; básicamente, no puede

obtener una vista previa de ellos en la pantalla Vista previa de forma

automática (observe las imágenes de vínculo erróneo en la pantalla de Vista

previa que se ven en la figura 7-17). Con el tiempo, Microsoft podría ofrecer

una revisión para corregir esto pero, por ahora, dispone de dos opciones para

evitar este problema:

■ Para obtener una vista previa de sus imágenes en el explorador,

seleccione Vista previa en el explorador en el menú Archivo, elija el

explorador que desee usar y haga clic en Vista previa.

■ Modifique el código de cada botón activable para corregir el

problema.

Si elige obtener una vista previa de sus páginas Web en el explorador

durante el resto de este ejercicio, siga adelante, omita la siguiente

sección y elija Vista previa en el explorador, en el menú archivo, o

haga clic en el botón Vista previa en el explorador, en la barra de

herramientas estándar, cada vez que le sugiramos que puede ver su

página Web. Si prefiere retocar el código HTML un poco para evitar

que se abra el explorador en la lección, a continuación le indicamos

cómo. Los pasos son fáciles de seguir y constituyen un primer

ejemplo que ilustra cómo conocer un poco de código HTML puede

servir de ayuda cuando se trabaja con editores HTML.

12 Haga clic en HTML en la parte inferior de la ventana para mostrar

el código HTML de su página.

El código de cada botón activable aparece entre un par de etiquetas

<applet> </applet>, de modo que debe ver siete de estos pares en

HTML. Puede indicar a qué botón se aplica un subprograma si observa el

atributo value del parámetro que define el texto del botón. Por ejemplo, a

continuación puede ver todo el código del subprograma de un botón; observe

que la quinta línea indica que se aplica al botón Página principal:

<applet code="fphover.class" codebase="./" width="120"

height="24">

<param name="color" value="#000080">

<param name="hovercolor" value="#0000FF">

<param name="textcolor" value="#FFFFFF">

<param name="text" value="Página principal">

<param name="effect" value="glow">

<param name="url" valuetype="ref" value="index.htm">

</applet><p>

177

El problema en este código de botón activable radica en el atributo

codebase="./" de la primera línea de cada etiqueta <applet>.

Este atributo le indica a FrontPage que busque el archivo

fphover.class en un subdirectorio. En realidad, FrontPage

almacena este archivo de clases en la misma carpeta que su

página Web, con lo que no es necesario que los exploradores lo

busquen en un subdirectorio. Aunque esta explicación podría sonar

un poco obtusa, la solución es simple: sólo debe eliminar

codebase="./" de cada etiqueta <applet> (vea la figura 7-18,

donde hemos resaltado algunas de las apariciones del atributo

codebase="./"), como se describe a continuación.

13 En la primera etiqueta <applet>, seleccione codebase="./"

como se muestra en la figura 7-18 y presione la tecla Retroceso (o

haga clic con el botón secundario del mouse y elija Eliminar).

14 Repita el paso 13 en el código del subprograma de cada botón

(recuerde: tiene siete botones, por lo que debería eliminar

codebase="./" siete veces).

15 Guarde su archivo y haga clic en Vista previa en la parte inferior de

la ventana de FrontPage. Cuando haya guardado los cambios del

código, los botones activables se deberían ver en el modo Vista

previa tal como se esperaba.

Figura 7-18.

Si desea obtener una vista previa de los botones activables en el modo

Vista previa de FrontPage, tiene que retocar ligeramente el código de cada botón.

178

Sugerencia

Si encuentra problemas mientras trabaja en FrontPage (o en cualquier otra

aplicación de Microsoft), un recurso fantástico al que puede acudir es

Microsoft Knowledge Base en línea. Para tener acceso a Knowledge Base,

visite http:/ support.microsoft.com/default.aspx?LN=ES en el explorador y

haga clic en el vínculo Buscar en Knowledge Base.

Adición de la información del pie de página debajo

de la tabla

Los componentes finales que va a agregar a la plantilla de la subpágina antes de

empezar a crear páginas de sitios reales son los elementos de la parte inferior de

la página: una barra de exploración de texto e información de copyright. Como

explicamos anteriormente en este curso, las páginas Web deben incluir vínculos

de exploración de texto para los usuarios que desactivan los gráficos o tienen

acceso al Web con exploradores que no los admiten. Asimismo, debería incluir

información de copyright para proteger su creación. Si desea agregar

información al final de la página en el sitio Web del club de astronomía, siga

estos pasos:

1 En la vista Normal, haga clic en el área a continuación de la tabla,

haga clic en la flecha de lista desplegable en el botón Color de

fuente de la barra de herramientas Formato y haga clic en el

cuadro del color blanco.

2 Escriba (incluyendo los caracteres de barra vertical) Página principal

| Acerca de nosotros | Contactar | Reuniones | Mapa del cielo |

Galería de fotos | Vínculos

3 Seleccione la línea o el texto que ha escrito, muestre la lista

desplegable en la barra de herramientas Formato y elija Comic

Sans (o Comic Sans MS).

4 Haga clic en el botón Centrar de la barra de herramientas Formato

para centrar el texto.

5 Haga clic al final de la línea de texto, presione Entrar y escriba

¿Tiene cuestiones o comentarios acerca del sitio Web? Envíe

un mensaje de correo electrónico al administrador del Web.

6 Presione Entrar, muestre la lista desplegable Tamaño de fuente en

la barra de herramientas Formato, elija 1 (8 pt) y, después, escriba

Copyright [el año actual] – [su nombre o el nombre de su

organización].

7 Presione Entrar y haga clic en Guardar en la barra de herramientas

estándar.

179

Ahora puede vincular el texto de la barra de exploración y agregar un

vínculo Enviar correo a al texto Envíe un mensaje de correo electrónico al

administrador del Web:

8 Seleccione Página principal en la barra de exploración de texto,

haga clic con el botón secundario del mouse en el texto

seleccionado y haga clic en Hipervínculo.

9 En el cuadro de diálogo Insertar hipervínculo, compruebe que en la

lista desplegable Buscar en aparece sky, haga clic en el cuadro de

texto Dirección, escriba index.htm (asegúrese de eliminar http:// si

aparece), como se muestra en la figura 7-19, y haga clic en

Aceptar o presione Entrar.

Figura 7-19.

El cuadro de diálogo Insertar hipervínculo permite configurar fácilmente

hipervínculos en FrontPage.

10 Repita los pasos 8 y 9 con los parámetros siguientes:

Seleccione y haga clic

con el botón secundario

del mouse

Especifique en el

cuadro de texto

Dirección

Acerca de nosotros aboutus.htm

Contactar contact.htm

Reuniones meetings.htm

Mapa del cielo skyguide.htm

Galería de fotos gallery.htm

Vínculos links.htm

Si desea agregar información

de pantalla a sus

hipervínculos, haga clic en el

botón Información de pantalla

en el cuadro de diálogo

Insertar hipervínculo.

También puede presionar

Alt+Ctrl+K para abrir el

cuadro de diálogo Insertar

hipervínculo.

180

11 Seleccione el texto Envíe un mensaje de correo electrónico al

administrador del Web, haga clic con el botón secundario del

mouse en el texto seleccionado y haga clic en Hipervínculo para

abrir el cuadro de diálogo Insertar hipervínculo.

12 En el cuadro de diálogo Insertar hipervínculo, haga clic en el botón

Dirección de correo electrónico en la sección Vincular a, según se

ilustra en la figura 7-20.

Figura 7-20.

Puede crear hipervínculos que abran automáticamente un formulario de

mensaje con una dirección predeterminada.

13 Especifique su dirección de correo electrónico en el cuadro de texto

Dirección de correo electrónico, escriba Club de la astronomía en el

cuadro de texto Asunto (vea la figura 7-20), haga clic en Aceptar y,

después, guarde su trabajo. La parte inferior de la plantilla de la

subpágina debería ser similar a la de la figura 7-21, que se muestra

en la pantalla Vista previa (recuerde: si no modificó el código del

subprograma del botón activable, tendrá que elegir Vista previa en el

explorador, en el menú Archivo, para que la vista previa de la página

Web de la subpágina se vea correctamente). Observe igualmente

que la fecha de copyright y el nombre de la organización

dependerán de la información que suministre.

181

Figura 7-21.

La información del pie de página de la subpágina proporciona a los

visitantes vínculos de texto, acceso al administrador del Web e

información de copyright.

14 Cierre el archivo subpágina.htm.

Ahora tiene una plantilla de subpáginas preparada para utilizarla.

Uso del diseño de la subpágina para

crear páginas Web

Ahora va a usar el archivo subpágina.htm con el fin de crear un par de

subpáginas para el sitio Web del club de astronomía. El sitio requiere seis

subpáginas principales:

■ aboutus.htm

■ contact.htm

■ meetings.htm

■ skyguide.htm

■ gallery.htm

■ links.htm

182

En esta sección, completará las páginas contact.htm y skyguide.htm, además de

una subpágina (mars.htm) de la página skyguide.htm. Aunque no explicamos

paso a paso cómo crear todas las subpáginas, las imágenes que copió en la

carpeta C:\sky\images desde la subcarpeta Lesson07 de la carpeta Practice

incluyen gráficos de barra de título de modo que puede completar todas las

subpáginas solo, si lo desea. Decidimos enseñarle cómo completar mars.htm,

skyguide.htm y contact.htm porque en el procedimiento de creación de cada

una de estas páginas se incluye información de cómo agregar una funcionalidad

concreta a las páginas Web, por ejemplo:

■ mars.htm Muestra cómo usar la característica de vistas en

miniatura en FrontPage además de copiar texto de un documento

de Word y modificar las hojas de estilo en cascada. Asimismo, esta

página tiene vínculos a la página Mapa del cielo (skyguide.htm).

■ skyguide.htm Enseña cómo crear un mapa de imágenes en

FrontPage.

■ contact.htm Proporciona una introducción rápida al modo de crear

un formulario en FrontPage.

Después de crear las tres subpáginas descritas en este proyecto, estará

totalmente preparado para experimentar y completar el resto de las páginas

usted mismo.

Preparación para crear subpáginas

La preparación para crear subpáginas es sencilla, ahora que ha adquirido

conocimientos prácticos sólidos al crear la plantilla subpágina.htm. Para usarla,

simplemente tiene que guardar copias del archivo subpágina.htm con nombres

diferentes y algo de texto, como se explica a continuación:

1 Abra el archivo C:\sky\subpágina.htm en FrontPage.

2 En el menú Archivo, haga clic en Guardar como para abrir el

cuadro de diálogo Guardar como, y compruebe que en el cuadro

de texto Guardar en parece la carpeta C:\sky.

3 En la sección Título de página, haga clic en el botón Cambiar título,

escriba Club de la astronomía: acerca de nosotros en el cuadro

de diálogo Establecer el título de la página y haga clic en Aceptar.

Sugerencia

Puede cambiar el texto del título de una página Web en cualquier

momento. Para ello, en el menú Archivo, haga clic en Propiedades, cambie

el texto de Título y haga clic en Aceptar. Agregó texto para los títulos de

cada página a medida que las ha ido creando en la sección anterior.

183

4 En el cuadro de texto Nombre de archivo, escriba aboutus.htm y

haga clic en Guardar. Observe que la ficha de la página Web

cambia (debajo de las barras de herramientas) para reflejar el

nuevo nombre del documento actual.

5 Sin cerrar el documento actual (que en este momento es

aboutus.htm), repita los pasos 2 a 4 utilizando los nombres de archivo

y el texto del título que se indican en la tabla de la página siguiente:

Guardar como nombre

de archivo

Texto del título de

la página

contact.htm Club de la astronomía:

Contactar

meetings.htm Club de la astronomía:

Reuniones

skyguide.htm Club de la astronomía:

Mapa del cielo

gallery.htm Club de la astronomía:

Galería de fotos

links.htm

mars.htm

Sugerencia

Tiene que denominar a las subpáginas de la misma forma en que hizo

referencia a ellas cuando vinculó los botones de exploración y vínculos de

hipertexto. Por ejemplo, la subpágina Acerca de nosotros debe guardarse con

el nombre aboutus.htm. No altere los nombres de archivo en este momento.

6 Cierre FrontPage, abra la carpeta C:\sky y compruebe que

contiene un archivo para cada página Web de su sitio Web.

7 Cuando haya comprobado la lista de archivos que ha creado,

cierre la carpeta C:\sky.

184

Adición de texto y de un gráfico para la barra

de título

Una vez creados archivos nuevos basados en el archivo subpágina.htm, puede

abrir los documentos nuevos en FrontPage y personalizar su contenido. La

primera subpágina que va a crear es de información acerca del planeta Marte.

En esta sección, va a agregar texto y un gráfico para la barra de título.

1 Abra FrontPage, haga clic en el botón Abrir en la barra de

herramientas, muestre el contenido de la carpeta C:\sky en el

cuadro de diálogo Abrir y haga doble clic en el archivo mars.htm.

2 Haga clic a la derecha del gráfico de la barra de título, presione

Mayús+Entrar, haga clic en Insertar imagen desde archivo en la

barra de herramientas estándar, muestre el contenido de

C:\sky\images y haga doble clic en t_skyguide.gif. La página

mars.htm es una subpágina de Mapa del cielo, de modo que

debería mostrar la barra de subtítulo Mapa del cielo.

3 Con el cursor colocado todavía al final del gráfico del mapa del

cielo, presione la tecla Eliminar dos veces para acercar la tabla

a la imagen t_skyguide.gif.

4 Haga clic con el botón secundario del mouse en la imagen

t_skyguide.gif, seleccione Propiedades de imagen, haga clic

en la ficha General, escriba Mapa del cielo en el cuadro de texto

Representaciones alternativas y haga clic en Aceptar.

Ahora agregará un fragmento de texto a la tabla de la página Web.

5 Abra C:\sky y haga doble clic en mars.doc (no en mars.htm) para

abrir el documento de Word.

6 Organice el escritorio de modo que pueda ver una parte del texto

del documento de Word además de mars.htm en FrontPage, como

en la disposición mostrada a la izquierda en la figura 7-22.

7 Haga clic dentro del documento de Word y presione Ctrl+E para

seleccionar todo el contenido.

Sugerencia

Puede escribir el texto directamente en la tabla (como verá posteriormente

en este proyecto), pero proporcionamos texto para esta página para que no

tenga que volver a escribir la información. También puede copiar y pegar la

información en FrontPage o puede usar el comando Archivo del menú

Insertar para importar texto de otro archivo.

185

8 Arrastre el texto seleccionado en el documento de Word hasta la

parte grande en blanco de la tabla de mars.htm (que, técnicamente,

es la cuarta celda de la primera fila de la tabla). El texto debería

rellenar la celda, como se muestra a la derecha en la figura 7-22.

Figura 7-22.

En este proyecto, puede arrastrar el texto de un documento de Word a su página Web. Puesto que no especificó limitaciones de ancho o de alto en

la celda, ésta se expande para que quepa el texto copiado.

9 Guarde su página Web y cierre el documento de Word.

Modificación de la configuración de hojas de estilo

en cascada (CSS)

Como ayuda para dar formato al contenido de sus páginas Web, puede crear

hojas de estilo en cascada (CSS, Cascading Style Sheets) externas o incrustadas

desde FrontPage. Una hoja de estilo externa implica que el código de formato

se coloca en un documento independiente al que se vincula la página Web,

mientras que una hoja de estilo incrustada coloca el código de formato dentro

del código fuente de la página Web actual.

Cuando se usan opciones de hojas de estilo, se define el estilo para un elemento

particular de la página, por ejemplo, un encabezado 3 o el elemento de una

lista con viñetas, y los exploradores (y FrontPage) aplicarán automáticamente

la configuración de estilo cada vez que aparezca el elemento. Por ejemplo,

si desea que todos los encabezados de tipo 3 se muestren en azul, sólo tiene que

modificar la configuración de estilo del elemento h3. Cuando guarde la

configuración modificada, todos los encabezados de tipo 3 aparecerán en azul.

Jerga: una hoja de estilo en

cascada contiene código que

define la apariencia y formato

de una página Web o un

grupo de páginas Web.

186

En esta sección, usará FrontPage para definir una hoja de estilo incrustada y

personalizar los estilos. Por lo tanto, los estilos que defina en la página

mars.htm sólo se aplicarán a dicha página. Para definir estilos incrustados en

FrontPage, siga estos pasos:

1 Compruebe que el archivo mars.htm se muestra en la vista Normal

en FrontPage y haga clic en Estilo, en el menú Formato.

2 En el cuadro de diálogo Estilo, haga clic en la flecha de lista

desplegable Lista y elija Etiquetas HTML. En la lista Estilos se

muestra una lista de las etiquetas HTML.

En primer lugar, va a especificar que se muestren en azul todos los

elementos de encabezado de tipo 3 y con un tamaño de 12 puntos.

3 En la lista Estilos, elija h3, según se ilustra en la figura 7-23.

Figura 7-23.

Puede definir estilos HTML si selecciona el estilo al que desea dar formato en la lista de etiquetas HTML del cuadro de diálogo Estilo.

4 Haga clic en Modificar, haga clic en Formato en el cuadro de texto

Modificar estilo y haga clic en Fuente.

187

5 En el cuadro de diálogo Fuente, haga clic en 12 pt en el cuadro

de lista Tamaño, haga clic en la flecha de lista desplegable Color,

haga clic en el cuadrado de color azul y haga clic en Aceptar tres

veces para cerrar los cuadros de diálogo abiertos.

Tanto el encabezado Descripción: como el encabezado Datos

del planeta: deberían aparecer ahora en azul y con un tamaño de

12 puntos. En este momento, va a reemplazar las viñetas negras

normales en la lista con viñetas por otras personalizadas.

6 Haga clic en Estilo en el menú Formato, haga clic en Etiquetas

HTML en el cuadro Lista, seleccione li en la lista Estilos y haga clic

en Modificar.

7 En el cuadro de diálogo Modificar estilo, haga clic en Formato y en

Numeración.

8 En el cuadro de diálogo Viñetas y numeración, haga clic en

Examinar, muestre el contenido de la carpeta C:\sky\images en el

cuadro de diálogo Seleccionar imagen y haga doble clic en

bullet_star.gif para completar el cuadro de diálogo Viñetas y

numeración.

9 Haga clic en Aceptar tres veces para cerrar los cuadros de diálogo

abiertos. La lista con viñetas de su página debería mostrar imágenes

de estrellas en la vista Normal, como se ilustra en la figura 7-24, y el

código fuente debe incluir ahora estilos incrustados, según se ilustra

en la figura 7-25 (el color naranja se utiliza para resaltar la

información de formato que agregó en los pasos anteriores).

10 Guarde el archivo mars.html y asegúrese de que se ve en la vista

Normal como preparación para la sección siguiente.

Figura 7-24.

El estilo recién definido muestra en azul los encabezados de tipo 3 y en

forma de estrellas las viñetas de la lista.

188

Figura 7-25.

FrontPage genera automáticamente la información de los estilos

incrustados.

Inserción de una imagen en miniatura

Ahora que ha importado y dado formato al texto de su página Web de Marte, está

en disposición de agregar una imagen. En esta sección, insertará una imagen en

miniatura de Marte, lo que significa que los visitantes de la página podrán hacer

clic en una imagen pequeña para ver una versión mayor de la misma. Al

suministrar una imagen en miniatura, acelera la descarga de la página y

proporciona a sus visitantes la opción de descargar una versión mayor si lo

desean. Para insertar una imagen en miniatura en FrontPage, siga estos pasos:

1 En FrontPage, haga clic a la derecha de Nuestro sistema solar:

Marte (la línea superior del texto insertado), haga clic en Insertar

imagen desde archivo en la barra de herramientas estándar y haga

doble clic en la imagen mars.jpg en la carpeta C:\sky\images. Una

imagen muy grande de Marte toma su vista en FrontPage.

2 Haga clic en Marte y, a continuación, muestre la barra de

herramientas Imágenes (si no aparece automáticamente,

seleccione Barras de herramientas en el menú Ver y, después, elija

Imágenes). En la figura 7-26 se muestra la imagen de Marte junto

con la barra de herramientas Imágenes.

189

Figura 7-26.

Puede crear una vista en miniatura de Marte directamente en FrontPage.

3 Con la imagen de Marte todavía seleccionada, haga clic en el

botón Vista en miniatura automática, en la barra de herramientas

Imágenes (el tercer botón desde la izquierda). Se crea una versión

de Marte de 100 por 100 píxeles a partir de la versión mayor del

archivo mars.jpg. El gráfico más pequeño se denomina

automáticamente mars_small.jpg.

4 Haga clic con el botón secundario del mouse en la imagen de

Marte, elija Propiedades de imagen, seleccione la ficha Apariencia,

si es necesario, y configure las propiedades como sigue:

Opción Valor

Alineación Derecha

Grosor del borde 0

Espaciado horizontal 15

Espaciado vertical 10

Sugerencia

Si desea que la vista en miniatura se muestre mayor de 100 por 100

píxeles, puede activar la casilla de verificación Especificar tamaño, en el

cuadro de diálogo Propiedades de imagen, y cambiar el tamaño de la

imagen en miniatura.

190

5 Haga clic en Aceptar y en el texto para cancelar la selección del

gráfico.

6 Haga clic con el botón secundario del mouse en alguna parte

de la tabla y elija Propiedades. Se abre el cuadro de diálogo

Propiedades de tabla.

7 En la sección Bordes, escriba 0 en el cuadro de texto Tamaño y,

después, haga clic en Aceptar.º

8 Haga clic en Guardar, haga clic en Cambiar carpeta en el cuadro

de diálogo Guardar archivos incrustados, haga doble clic en la

carpeta images, haga clic en Aceptar dos veces y, por último haga

clic en la ficha Vista previa (o elija Vista previa en el explorador, en

el menú Archivo). La página mars.htm debería ser similar ahora a

la de la figura 7-27 y el gráfico pequeño se vincula

automáticamente a mars.jpg.

Figura 7-27.

Si hace clic en el gráfico en miniatura mientras obtiene una vista previa

de la página, debe aparecer una imagen en grande de Marte.

9 Cierre el archivo mars.htm.

Nota

Los archivos de imágenes del proyecto proporcionados para esta lección

incluyen neptune.jpg y saturn.jpg, que son imágenes de Neptuno y de

Saturno (respectivamente), y puede usarlas si desea seguir practicando y

crear páginas informativas de otros planetas.

¡Enhorabuena! Ha completado su primera página del sitio Web del club de

astronomía. No hay ninguna razón para que se detenga ahora; en la sección

siguiente, aprenderá a agregar un mapa de imágenes.

Para probar el vínculo de la

vista en miniatura, haga clic

en la ficha Vista previa y,

después, haga clic en la

imagen en miniatura de

Marte. Haga clic en la ficha

Vista normal para volver a

la vista de trabajo.

191

Creación de un mapa de imágenes

En esta sección, creará un mapa de imágenes en la subpágina principal del Mapa

del cielo. Va a crear el mapa de imágenes a partir de una imagen del sistema

solar. Dará formato a la imagen del sistema solar para que, cuando los usuarios

hagan clic en el gráfico de Marte, se muestre la página mars.htm que creó en la

sección anterior. Para lograrlo (es más fácil de lo que parece), siga estos pasos:

1 Abra FrontPage, haga clic en el icono Carpetas de la barra de

vistas y haga doble clic en el archivo skyguide.htm.

2 Haga clic a la derecha del gráfico de la barra de título, presione

Mayús+Entrar, haga clic en Insertar imagen desde archivo en la

barra de herramientas estándar y haga doble clic en t_skyguide.gif.

3 Con el cursor colocado todavía al final del gráfico del mapa del

cielo, presione la tecla Eliminar dos veces para acercar la tabla

a la imagen t_skyguide.gif.

4 Haga clic con el botón secundario del mouse en la imagen

t_skyguide.gif, seleccione Propiedades de imagen, haga clic

en la ficha General, escriba Mapa del cielo en el cuadro de texto

Representaciones alternativas y haga clic en Aceptar.

Ahora agregará un fragmento de texto a la tabla de la página Web.

5 Haga clic en la celda de la tabla grande situada a la derecha del

botón Página principal y escriba Tema de este mes: nuestro

sistema solar.

6 Seleccione el texto, haga clic en el icono Centrar en la barra de

herramientas Formato y seleccione Comic Sans (o Comic Sans

MS) en la lista desplegable Fuente.

7 Haga clic a continuación de la palabra solar y presione

Mayús+Entrar dos veces.

8 Escriba Haga clic en un planeta para ir a la página de

información del mismo. Nota: en este momento sólo hay

información de Marte.

9 Haga clic en el área en blanco entre los dos componentes de texto

que agregó en los pasos 5 y 8.

10 En la barra de herramientas estándar, haga clic en Insertar imagen

desde archivo, vaya a la carpeta C:\sky\images si es necesario y

haga doble clic en solarsystem.gif.

192

11 Haga clic con el botón secundario del mouse en cualquier parte de la

tabla, elija Propiedades de tabla, establezca el Tamaño de borde a 0

en el cuadro de diálogo Propiedades de tabla y haga clic en Aceptar.

12 Haga clic en Guardar en la barra de herramientas. A continuación,

obtenga una vista previa de su página Web. Debe parecerse a la

de la figura 7-28.

Figura 7-28.

Utilizará la imagen del sistema solar para crear un mapa de imágenes.

13 Vuelva a la vista Normal en FrontPage.

14 Haga clic en la imagen del sistema solar. La barra de herramientas

Imágenes se debe abrir automáticamente. Observe las

herramientas Zona activa rectangular, Zona activa circular y Zona

activa en forma de polígono que se encuentran en el extremo

derecho de la barra de herramientas Imágenes.

Jerga: una zona activa es un

área en la que puede hacer

clic en una imagen que está

vinculada a otra página Web

o a otra área de la página

actual.

193

15 Haga clic en la herramienta Zona activa en forma de polígono y,

después, haga clic en varios puntos alrededor de Marte y de la

etiqueta Marte del gráfico del sistema solar para crear un polígono,

como se muestra en la figura 7-29. Cuando complete el polígono,

el cuadro de diálogo Insertar hipervínculo se abrirá

automáticamente. Si es necesario, haga clic en Archivo o

página Web existente en la sección Vincular a:

Figura 7-29.

Las herramientas de zona activa de la barra de herramientas Imágenes

permiten dibujar áreas donde se puede hacer clic en los gráficos.

16 En el cuadro de diálogo Insertar hipervínculo, haga doble clic en

mars.htm (no en mars.doc) en la lista de archivos de la carpeta

C:\sky.

17 Cree formas alrededor del resto de los planetas, si lo desea, que

señalen a futuras páginas, como mercury.htm, venus.htm, earth.htm,

jupiter.htm, saturn.htm, uranus.htm, neptune.htm y pluto.htm.

18 Guarde el archivo skyguide.htm, obtenga una vista previa de la

página en Vista previa, mueva el cursor sobre Marte (observe que

el cursor cambia para mostrar una mano) y haga clic en Marte para

ver si el vínculo funciona.

19 Haga clic en la ficha vista Normal, cierre el archivo skyguide.htm y

cierre FrontPage.

Va por buen camino para crear el sitio Web del club de astronomía. La subpágina

final que va a crear es un formulario dentro de la página contact.htm.

Si crea una línea que no

desea usar, haga clic con el

botón secundario del mouse

para quitar las líneas

existentes y vuelva a

empezar.

194

Creación de formularios

En este momento, debe estar habituado a agregar elementos y a configurar

opciones en FrontPage. Como mencionamos al principio de la lección, el truco

es saber dónde buscar las herramientas y menús de configuración. En esta

sección, creará un formulario en línea. Un formulario en línea permite a los

usuarios especificar información en cuadros de texto. Después, cuando los

usuarios hagan clic en el botón Enviar del formulario, los resultados se

enviarán a la dirección de correo que haya especificado.

Advertencia

No muestre el formulario en la pantalla Vista previa antes de publicarlo en el

Web. Si lo hace, FrontPage 2002 agrega código que impide que la página se

publique correctamente. Cuando cree un formulario, debe publicarlo en el

Web y obtener después una vista previa del mismo en FrontPage o en un

explorador.

Preparación de la página Contactos

El primer paso para crear un formulario en la página Contactos es agregar una

barra de título e insertar texto en el título, para preparar la página, según se

describe en los pasos siguientes:

1 Abra FrontPage, haga clic en Carpeta en la barra de vistas y haga

doble clic en el archivo contact.htm.

2 Haga clic a la derecha de la barra de título, presione Mayús+Entrar,

haga clic en Insertar imagen desde archivo, muestre el contenido

de la carpeta C:\sky\images y haga doble clic en t_contact.gif.

3 Con el cursor colocado todavía al final del gráfico de Información

de contacto, presione la tecla Eliminar dos veces para acercar más

la tabla a la imagen t_contact.gif.

4 Haga clic con el botón secundario del mouse en la imagen

t_contact.gif, seleccione Propiedades de imagen, haga clic en la

ficha General, escriba Página de contacto en el cuadro de texto

Representaciones alternativas y haga clic en Aceptar.

Cuando use Formularios en

un sitio Web, su servidor

debe admitir Extensiones de

servidor de FrontPage y debe

publicar el formulario con la

herramienta de publicación

de FrontPage.

195

Inserción de un área de formulario y adición de etiquetas

Ahora que la página Contactos está lista para la acción, puede crear un

formulario en línea. En primer lugar, insertará el cuadro de formulario estándar

y, después, las etiquetas para los cuadros de texto, los botones de opción y los

cuadros de selección del formulario:

1 Haga clic en la celda de la tabla grande a la derecha del botón

Página principal, seleccione Formulario en el menú Insertar y elija

Formulario. Aparece un área resaltada dentro de la tabla que

contiene los botones Enviar y Restablecer, según se muestra en la

figura 7-30 de la página siguiente.

Figura 7-30.

El primer paso para crear un formulario es insertar un componente

formulario, que incluye automáticamente los botones Enviar y Restablecer.

2 Con el cursor colocado a la izquierda del botón Enviar, escriba

Nombre: y presione Mayús+Entrar.

3 Escriba Dirección de correo electrónico: y presione Entrar.

4 Escriba ¿Es ya miembro del club? y presione Entrar.

5 Escriba Si es así, ¿con qué frecuencia asiste a nuestras

reuniones mensuales? y presione Entrar.

6 Escriba Permítanos saber cómo encontró nuestro sitio Web

(seleccione todo lo que corresponda):, presione Mayús+Entrar,

escriba Asistí a una reunión, presione Mayús+Entrar, escriba Lo

encontré en un motor de búsqueda, presione Mayús+Entrar,

escriba Un amigo me informó y, después, presione Entrar.

196

7 Escriba Especifique sus comentarios o cuestiones aquí:,

presione Mayús+Entrar y, después, presione Entrar. El formulario

debería tener una apariencia similar al de la figura 7-31.

Figura 7-31.

El formulario que se está creando sólo muestra el texto y botones básicos.

Creación de los campos del formulario

Ahora puede especificar los campos del formulario, las áreas en las que los

visitantes seleccionan o especifican texto para que puedan enviar información.

1 Haga clic a continuación de Nombre:, presione la barra

espaciadora, seleccione Formulario en el menú Insertar y elija

Cuadro de texto.

2 Haga clic a continuación de Dirección de correo electrónico:,

presione la barra espaciadora, seleccione Formulario en el menú

Insertar y elija Cuadro de texto.

3 Haga clic a continuación de ¿Es ya miembro del club?, seleccione

Formulario en el menú Insertar, elija Botón de opción, escriba Sí,

presione la barra espaciadora, seleccione Formulario en el menú

Insertar, elija Botón de opción y, después, escriba No.

4 Haga clic a continuación de Si asiste a nuestras reuniones, ¿con

qué frecuencia lo hace?, presione la barra espaciadora, seleccione

Formato en el menú Insertar y elija Cuadro desplegable.

Daremos formato a los

campos del formulario en un

momento, de modo que no

se preocupe si los campos

no tienen la apariencia

correcta ahora.

197

5 Haga clic antes de Asistí a una reunión, seleccione Formulario en

el menú Insertar, elija Casilla de verificación y presione la barra

espaciadora.

6 Haga clic antes de Lo encontré en un motor de búsqueda,

seleccione Formulario en el menú Insertar, elija Casilla de

verificación y presione la barra espaciadora.

7 Haga clic antes de Un amigo me informó, seleccione Formulario en

el menú Insertar, elija Casilla de verificación y presione la barra

espaciadora.

8 Haga clic debajo de Especifique sus comentarios o cuestiones aquí,

seleccione Formulario en el menú Insertar y elija Área de texto.

9 Haga clic en Guardar. El formulario ahora debería ser similar al

mostrado en la figura 7-32.

Figura 7-32.

El formulario debería incluir ahora etiquetas y campos de formulario sin

formato.

198

Configuración de las propiedades de los campos de formulario

Ya tiene la mayor parte del formulario creado. El siguiente paso es configurar

las propiedades de cada campo del formulario y especificar sus propiedades en

conjunto. De modo que esté preparado para hacer clic: está a punto de

configurar algunas propiedades del formulario.

1 Haga clic con el botón secundario del mouse en el campo situado

junto a Nombre y seleccione Propiedades de campo de formulario.

2 En el campo Nombre del cuadro de diálogo Propiedades de cuadro

de texto, escriba Nombre, configure el valor de Ancho en caracteres

como 25 (según se muestra en la figura 7-33), escriba 1 en el cuadro

de texto Orden de tabulación y, después, haga clic en Aceptar.

Figura 7-33.

Para establecer las propiedades de un cuadro de texto, se usa el cuadro de diálogo Propiedades de cuadro de texto.

3 Haga clic con el botón secundario del mouse en el campo situado

junto a Dirección de correo electrónico, seleccione Propiedades de

campo de formulario, escriba Correo_electrónico, configure el

valor de Ancho en caracteres como 30, especifique 2 en el cuadro

de texto Orden de tabulación y, después, haga clic en Aceptar.

El campo de formulario

Orden de tabulación

especifica el orden en que

el cursor se moverá en un

formulario si un usuario

presiona la tecla Tab para

moverse de un campo a otro.

199

4 Haga clic con el botón secundario del mouse en el botón Sí, elija

Propiedades de campo de formulario, escriba Miembro en el

cuadro de texto Nombre de grupo, escriba Sí en el cuadro de

texto Valor, compruebe que en la sección Estado inicial está

seleccionada la opción Seleccionado, escriba 3 en el cuadro de

texto Orden de tabulación y haga clic en Aceptar.

5 Haga clic con el botón secundario del mouse en el botón No, elija

Propiedades de campo de formulario, escriba Miembro en el

cuadro de texto Nombre de grupo, escriba No en el cuadro de texto

Valor, compruebe que en la sección Estado inicial está

seleccionada la opción No seleccionado y haga clic en Aceptar.

Nota

Tenga en cuenta que no tiene que establecer un orden de tabulación para

las opciones Sí y No. Dado que las opciones son miembros del mismo

grupo, los usuarios pueden moverse en el grupo si presionan la tecla Tab.

A continuación, pueden seleccionar una opción con las teclas de dirección.

Cuando esté preparado para pasar a la sección siguiente del formulario,

puede presionar la tecla Tab.

6 Haga clic con el botón secundario del mouse en el cuadro de lista

desplegable Si es así, ¿con qué frecuencia asiste a nuestras

reuniones? y elija Propiedades de campo de formulario. Se abre el

cuadro de diálogo Propiedades de cuadro desplegable.

7 Escriba Asistencia en el cuadro de texto Nombre, especifique 4

en el cuadro de texto Orden de tabulación y, después, haga clic en

Agregar. Se abre el cuadro de diálogo Agregar opción.

8 En el cuadro de diálogo Agregar opción, especifique A todas las

reuniones, elija la opción Seleccionada en la sección Estado inicial

y haga clic en Aceptar.

9 Haga clic en Agregar, escriba Cada dos meses y haga clic

en Aceptar.

10 Haga clic en Agregar, escriba Varias veces al año y haga clic

en Aceptar.

200

11 Haga clic en Agregar, escriba Nunca y haga clic en Aceptar.

Debería aparecer un cuadro de diálogo Propiedades de cuadro

desplegable similar al de la figura 7-34.

Figura 7-34.

El cuadro de diálogo Propiedades de cuadro desplegable muestra todas

las opciones y la opción que se seleccionará de forma predeterminada.

12 Haga clic en Aceptar.

13 Haga clic con el botón secundario del mouse en la primera casilla

de verificación, elija Propiedades de campo de formulario, escriba

SitioWebEncontrado en el cuadro de texto Nombre, especifique

Asistí a una reunión en el cuadro de texto Valor, especifique 5 en

el cuadro de texto Orden de tabulación y haga clic en Aceptar.

14 Haga clic con el botón secundario del mouse en la segunda casilla

de verificación, elija Propiedades de campo de formulario, escriba

SitioWebEncontrado en el cuadro de texto Nombre, especifique

Motor de búsqueda en el cuadro de texto Valor, especifique 6 en

el cuadro de texto Orden de tabulación y haga clic en Aceptar.

201

15 Haga clic con el botón secundario del mouse en la tercera casilla

de verificación, elija Propiedades de campo de formulario, escriba

SitioWebEncontrado en el cuadro de texto Nombre, especifique

Amigo en el cuadro de texto Valor, especifique 7 en el cuadro de

texto Orden de tabulación y haga clic en Aceptar.

16 Haga clic con el botón secundario del mouse en el cuadro de texto

con desplazamiento, elija Propiedades de campo de formulario,

escriba Comentarios en el cuadro de texto Nombre, especifique

40 en el cuadro de texto Ancho en caracteres, especifique 8 en el

cuadro de texto Orden de tabulación, escriba 3 en el cuadro de

texto Número de líneas y haga clic en Aceptar.

17 Haga clic con el botón secundario del mouse en el botón Enviar,

elija Propiedades de campo de formulario, especifique Enviar en el

cuadro de texto Nombre, especifique 9 en el cuadro de texto Orden

de tabulación y haga clic en Aceptar.

18 Haga clic con el botón secundario del mouse en el botón

Restablecer, elija Propiedades de campo de formulario, especifique

Restablecer en el cuadro de texto Nombre, especifique Borrar

formulario en el cuadro de texto Valor/Etiqueta, escriba 10 en el

cuadro de texto Orden de tabulación y haga clic en Aceptar.

19 Haga clic en la flecha Atrás una vez y presione la barra

espaciadora para insertar un espacio entre los botones Enviar

y Borrar formulario.

20 Haga clic antes de la etiqueta Nombre: en la parte superior del

formulario y presione Mayús+Entrar. A continuación, guarde su

trabajo sin obtener una vista previa del formulario (recuerde que,

para que el formulario funcione correctamente, debe publicarlo en

el Web antes de obtener una vista previa del mismo).

202

Denominación de los campos

Generalmente, debe suministrar un nombre para cada campo del formulario.

Los nombres de los campos ayudan a identificar la información una vez

enviada, además de permitir que los exploradores diferencien los elementos.

Puede configurar el formulario para que muestre el nombre de cada campo

junto con los datos enviados. Esta configuración le ayudará a ver rápidamente

qué información se envió en respuesta a la entrada de cada campo del

formulario. Por ejemplo, a continuación se ilustra cómo podrían verse un

formulario rellenado en línea y la página de confirmación:

Después, recibiría un mensaje de correo electrónico con la información

enviada, similar al siguiente:

Las imágenes que se presentan aquí muestran la forma en que el formulario que

está creando en este proyecto se va a mostrar cuando publique el formulario de

contacto en un servidor Web.

203

Completar la página Contactos

Para completar la página Contactos, tiene que ocultar los bordes de la tabla y

establecer las propiedades del formulario.

1 Haga clic con el botón secundario del mouse en cualquier parte de

la tabla, elija Propiedades de tabla, especifique 0 en el cuadro de

texto Tamaño, en el área Bordes, y haga clic en Aceptar.

2 Haga clic con el botón secundario del mouse en el formulario y

elija Propiedades de formulario. Se abre el cuadro de diálogo

Propiedades de formulario.

3 En el cuadro de diálogo Propiedades de formulario, compruebe

que esté seleccionada la opción Enviar a, especifique su propia

dirección de correo electrónico en el cuadro de texto Dirección de

correo electrónico y Formulario de contacto del Club de la

astronomía en el cuadro de texto Nombre de formulario.

4 En el cuadro de diálogo Propiedades de formulario, haga clic en

Opciones, haga clic en la ficha Resultados por correo electrónico,

compruebe que la casilla de verificación Incluir nombres de campo

está activada y especifique Información de contacto del Club de

la astronomía en el cuadro de texto Línea de asunto. Al seleccionar

la opción Incluir nombres de campo, se especifica que los nombres

de campo deben acompañar a la información enviada y el texto de la

línea de asunto aparecerá en los mensajes de correo electrónico

que reciba cuando los usuarios hagan clic en el botón Enviar.

5 Haga clic en la ficha Página de confirmación, escriba

thankyou.htm en el cuadro de texto Dirección URL de la página

de confirmación, haga clic en Aceptar dos veces y, después, haga

clic en No.

6 Guarde y cierre el archivo contact.htm, y cierre FrontPage.

Hasta aquí ha llegado en la experimentación con las subpáginas para este

proyecto. Ha trabajado en unas cuantas características de FrontPage que

debería poder usar cuando cree su propio sitio Web. Pero antes de terminar con

este proyecto, tenemos que crear la página principal del club de astronomía.

Para ver una versión

publicada de la página

de contactos, visite

www.creationguide.com/

sky/contact.htm (en inglés).

204

Creación de una página principal en

FrontPage

Por último, aunque no menos importante, puede crear la página principal. Crear

esta página podría parecer un poco difícil y estamos dispuestos a admitir que

probablemente sea el procedimiento más adelantado que hemos descrito en este

curso. Por muy desafiante que parezca, sin embargo, deseamos darle una idea

de dónde puede ir a partir de aquí si le hemos inspirado para que continúe

diseñando sitios Web. (¡Y esperamos que lo haga!) Asimismo, pensamos que

podría resultarle interesante ver cómo se utilizan en ocasiones las tablas y los

gráficos para crear diseños avanzados de páginas. De todas maneras, vamos a

empezar por definir el marco de trabajo de la página principal.

Configuración del marco de trabajo de la página

principal

Para empezar, siga estos pasos:

1 Abra FrontPage, abra el archivo C:\sky\subpágina.htm, elija

Guardar como en el menú Archivo, haga clic en el botón Cambiar

título, especifique Sitio Web oficial del Club de la astronomía en

el cuadro de diálogo Establecer el título de la página, haga clic en

Aceptar, especifique index.htm en el cuadro de texto Nombre de

archivo y haga clic en Guardar.

2 Haga clic con el botón secundario del mouse en un área en blanco

de la página, haga clic sucesivamente en Propiedades de página,

en la ficha Fondo y en el cuadro Texto en la sección Colores, elija

Blanco y haga clic en Aceptar.

3 Coloque el cursor antes del vínculo Página principal en la barra de

exploración de texto, arrastre para seleccionar todo lo que haya

encima de la barra de exploración de texto (incluida la barra de

título y el gráfico del logotipo), haga clic con el botón secundario

del mouse en los elementos seleccionados y haga clic en Cortar.

4 Presione Entrar y, después, presione el botón de flecha de

dirección arriba (o haga clic en el espacio por encima de la barra

de exploración de texto).

5 Haga clic en Insertar imagen desde archivo, muestre el contenido

de la carpeta C:\sky\images, si es necesario, haga doble clic en

titlebar-home.gif y presione Entrar.

205

6 Haga clic en Componente Web en la barra de herramientas

estándar, elija Efectos dinámicos y haga doble clic en Marquesina.

Se abre el cuadro de diálogo Propiedades de marquesina.

7 En el cuadro de diálogo Propiedades de marquesina, escriba

Nuestra próxima reunión es el 21 de febrero. Reserve su plaza

hoy. En el cuadro de texto Texto. Éste es el mensaje que se

desplazará en la página.

8 Elija la opción Deslizar en la sección Comportamiento, desactive la

casilla de verificación Continuamente en la sección Repetir y escriba

1 en el cuadro de texto Repetir, como se muestra en la figura 7-35.

Figura 7-35.

Entre otras propiedades, puede especificar si el texto de la marquesina se

desplaza continuamente o sólo un número predeterminado de veces.

9 Haga clic sucesivamente en el botón Estilo, en Formato y en

Fuente, elija Comic Sans (o Comic Sans MS) en el cuadro de lista

de fuente, elija Blanco en el cuadro Color y haga clic en Aceptar

tres veces para cerrar todos los cuadros de diálogo abiertos.

206

10 Presione la tecla de flecha derecha para cancelar la selección del

componente de marquesina, presione Entrar, haga clic en el botón

Tabla en la barra de herramientas y cree una tabla de una fila y

cinco columnas. La página index.htm debe parecerse a la

mostrada en la figura 7-36.

Figura 7-36.

La página principal del club de astronomía se basa en una tabla

personalizada.

11 Haga clic con el botón secundario del mouse en la tabla, elija

Propiedades de tabla, haga clic en la lista desplegable Alineación,

seleccione Centrar, compruebe que la casilla de verificación

Especificar ancho está activada, especifique 580 en el cuadro de

texto Especificar ancho, elija la opción En píxeles, compruebe que

las opciones Espacio desde el borde al centro y Espaciado de

celdas se configuran como 0 y haga clic en Aceptar.

12 Seleccione las cinco celdas de la tabla, haga clic en el botón

secundario del mouse en las celdas seleccionadas, elija

Propiedades de celda, configure Alineación vertical como Superior

y haga clic en Aceptar.

13 Haga clic con el botón secundario del mouse en el gráfico titlebar-

home.gif, elija Propiedades de imagen, haga clic en la ficha

General, escriba Bienvenidos al sitio Web del Club de la

astronomía en el cuadro de texto Representaciones alternativas y

haga clic en Aceptar.

14 Haga clic en Guardar.

207

Ensamblado del gráfico principal

Ahora va a insertar los fragmentos de una imagen que se ha cortado para que

quepa en la tabla. En la figura 7-37 se muestra la imagen antes de dividirla. La

razón por la que dividimos la imagen en gráficos independientes es que

deseábamos usar HTML dinámico (DHTML) para crear un efecto de conversión

siempre que los usuarios coloquen el cursor sobre un área con un hipervínculo.

Si no hubiéramos deseado enseñar el efecto de conversión (y demostrar cómo

puede dividir y volver a unir las imágenes cuando sea necesario), podríamos

haber creado un mapa de imágenes similar al del sistema solar que creó en la

página Mapa del cielo anteriormente en esta lección.

Figura 7-37.

La imagen de la Osa mayor que se ve aquí se dividió en fragmentos para este

proyecto.

Nota

HTML dinámico (DHTML, Dynamic HTML) es una tecnología que

proporciona páginas Web con la capacidad de realizar cambios y

actualizaciones en respuesta a las acciones de un usuario, por ejemplo,

puede mostrar un gráfico o información adicional en respuesta al

movimiento del mouse.

1 En el archivo index.htm, haga clic en la celda 1, haga clic en

Insertar imagen desde archivo en la barra de herramientas

estándar, muestre el contenido de la carpeta C:\sky\images y haga

doble clic en bigdip1.gif.

2 Haga clic en la celda 2 e inserte el archivo b_aboutus.gif.

3 Haga clic en la celda 3, inserte el gráfico bigdip2.gif (un gráfico

transparente que le ayudará a alinear el resto de los gráficos),

presione Mayús+Entrar, inserte el gráfico b_contact.gif, presione

Mayús+Entrar, inserte el gráfico b_meetings.gif, presione

Mayús+Entrar e inserte el gráfico b_skyguide.gif.

4 Haga clic en la celda 4 e inserte el gráfico bigdip3.gif.

208

5 Haga clic en la celda 5 e inserte bigdip4.gif (otra imagen

transparente), presione Mayús+Entrar, inserte b_gallery.gif,

presione Mayús+Entrar, inserte bigdip5.gif, presione Mayús+Entrar

e inserte b_links.gif. La página index.htm debe aparecer como en

la figura 7-38.

Figura 7-38.

Cuando haya modelado los fragmentos de la imagen de la Osa mayor, podrá vincularlos en las subpáginas.

Creación de vínculos dentro del gráfico principal

El siguiente paso es vincular cada imagen que contenga un nombre de botón en

el gráfico de la Osa mayor a la subpágina apropiada:

1 Haga clic con el botón secundario del mouse en el texto Acerca de

nosotros, elija Hipervínculo, compruebe que la carpeta sky aparece

en el cuadro de texto Buscar en, escriba aboutus.htm en el cuadro

de texto Dirección (o seleccione el archivo aboutus.htm en la lista

de archivos) y haga clic en Aceptar.

2 Vincule el resto de los gráficos como se indica a continuación:

Gráfico Vincular a

Contactar contact.htm

Reuniones meetings.htm

Mapa del cielo skyguide.htm

Galería de fotos gallery.htm

Vínculos de

astronomía

links.htm

3 Haga clic en Guardar.

Para acelerar el proceso de

creación de hipervínculos,

puede hacer doble clic en los

nombres de archivo en la lista

de archivos del cuadro de

diálogo Insertar hipervínculo,

en lugar de escribir cada

nombre de archivo en el

cuadro de texto Dirección.

209

Adición de HTML dinámico al gráfico principal

A continuación, agregará el efecto de conversión a cada área con un

hipervínculo en la tabla mediante la barra de herramientas DHTML de

FrontPage:

1 Seleccione el botón Acerca de nosotros y elija Efectos de HTML

dinámico en el menú Formato. Aparece la barra de herramientas

Efectos DHTML. Va a configurar la barra de herramientas para que

se muestre como se ve en la figura 7-39.

Figura 7-39.

La barra de herramientas Efectos DHTML le ayuda a aplicar efectos

dinámicos a las páginas Web.

2 En la lista desplegable en, elija Pasar el mouse.

3 En la lista desplegable Aplicar, elija Intercambiar imágenes, haga

clic en la lista desplegable Elegir configuración, seleccione Elegir

imagen y haga doble clic en b_aboutus2.gif en la carpeta

C:\sky\images.

4 Repita los pasos 1 a 3 para cada área vinculada, con el fin de

vincular los gráficos secundarios de la forma siguiente:

Vínculo Archivo de imagen

Contactar b_contact2.gif

Reuniones b_meetings2.gif

Mapa del cielo b_skyguide2.gif

Galería de fotos b_gallery2.gif

Vínculos de astronomía b_links2.gif

5 Cierre la barra de herramientas Efectos DHTML.

6 Haga clic con el botón secundario del mouse en la tabla, elija

Propiedades de tabla, especifique 0 en el cuadro de texto Tamaño,

en la sección Bordes, haga clic en Aplicar y haga clic en Aceptar.

7 Haga clic en Guardar y, después, vea cómo queda su trabajo en la

vista previa.

8 Haga clic en la ficha vista Normal para volver al área de trabajo.

210

Toques finales de la página principal

Finalmente, para completar la página principal, insertará un contador y la fecha

en que se modificó por última vez. Para insertar un contador, siga estos pasos:

1 En index.htm, haga clic después del hipervínculo Vínculos en la

barra de exploración de texto, presione Entrar, seleccione

Componente Web en el menú Insertar y elija Contador de visitas a la

página en la lista Tipo de componente. Haga clic en Finalizar y

aparecerá el cuadro de diálogo Propiedades de contador de visitas a

la página.

2 En la lista Estilo de contador, seleccione el estilo de número digital

verde (el último estilo de la lista), a continuación active la casilla de

verificación Número fijo de dígitos, acepte la configuración

predeterminada de 5 dígitos y haga clic en Aceptar.

3 Presione Entrar, elija Fecha y hora en el menú Insertar y haga clic

en Aceptar, en el cuadro de diálogo Fecha y hora. La fecha se

actualizará automáticamente siempre que modifique la página.

4 Guarde el archivo index.htm y, después, haga clic en Vista previa.

Su página debería ser similar a la mostrada en la figura 7-40.

Cuando publique su sitio Web de sky, la página principal mostrará

el contador el lugar del texto marcador de posición.

Figura 7-40.

El archivo index.htm completo se muestra aquí en el modo Vista previa.

Los elementos de contador

no se mostrarán hasta que

publique el Web de

FrontPage.

211

Ha completado la página principal y la mayor parte de las subpáginas del sitio

Web del club de astronomía. ¡Ha hecho un fantástico trabajo! Ahora debería

entender algunas de las capacidades más fabulosas de FrontPage. Esperamos

que este recién adquirido conocimiento le sirva de ayuda para diseñar y crear

sus propios sitios Web.

En lo que respecta al sitio del club de la astronomía, el único paso que falta es

publicar el Web de C:\sky mediante la característica Publicar de FrontPage.

Asegúrese de leer la sección siguiente antes de cargar el sitio Web del club de

astronomía en el espacio del servidor.

Unas palabras acerca de la publicación

Cuando crea Webs en FrontPage, es conveniente cargar las páginas con la

característica Publicar Web de FrontPage, en especial si ha insertado elementos

que se basen en Extensiones de servidor de FrontPage (como formularios y

contadores). Para publicar su sitio, seleccione la opción Publicar Web en el menú

Archivo. Ya debería tener solucionadas las cuestiones referentes al espacio del

servidor y a su dirección. Asimismo, debe haber comprobado que el servicio de

alojamiento de sitios Web admite Extensiones de servidor de FrontPage. Para

obtener más información acerca de cómo publicar Webs de FrontPage y usar

Extensiones de servidor de FrontPage, póngase en contacto con su proveedor de

servicios Internet (ISP) y remítase a los archivos de ayuda de FrontPage.

Recursos adicionales

A continuación enumeramos un par de referencias sobre FrontPage que hemos

encontrado de utilidad:

■ Buyens, Jim. Microsoft FrontPage Version 2002 Inside Out.

Redmond, WA: Microsoft Press, 2001. Este libro es un recurso

con una completa documentación de FrontPage.

■ www.microsoft.com/spain/Office/frontpage/default.asp es el recurso

en línea definitivo acerca de FrontPage.

Para ver una versión “en

acción” del sitio Web del

club de astronomía creado

en este proyecto, visite

www.creationguide.com/sky/c

ontact.htm (en inglés).

212

Puntos clave

■ FrontPage es un programa de edición HTML muy completo.

■ Puede usar FrontPage para crear fácilmente páginas Web

avanzadas como efectos de conversión en botones, mapas de

imágenes, vistas en miniatura, formularios, contadores y otros

componentes de páginas Web.

■ La interfaz de FrontPage permite mostrar las páginas Web en la

vista Normal (de trabajo), en la vista HTML y en el modo Vista

previa.

■ Aprender FrontPage le abre las puertas de la utilización de otros

editores HTML avanzados porque ejemplifica los tipos de

capacidades que éstos pueden proporcionar.

■ Antes de crear páginas Web con FrontPage, debe asegurarse de

que el servicio de alojamiento de sitios Web admita Extensiones de

servidor de FrontPage. (Actualmente, la mayor parte de los

servidores admiten las extensiones en cierto grado.)

■ Antes de empezar a crear páginas Web en FrontPage, debería

configurar un Web, lo que proporciona un formato especial a la

carpeta seleccionada.

■ Puede simplificar el proceso de creación de un sitio Web si crea

una plantilla estándar que puede guardar como subpáginas.

■ La clave para crear Webs en FrontPage es conservar sus archivos

organizados, saber dónde buscar las herramientas y opciones de

menús de FrontPage, y experimentar con diversas opciones.

■ Para lograr los mejores resultados, cargue los archivos de

FrontPage con la característica Publicar Web.

213

Introducción de las páginas Web en el mundo real Una vez completada esta lección, podrá:

Transferir sus archivos a Internet.

Elegir un método para exponer sus páginas Web.

Usar Mis sitios de red de Microsoft para mantener su sitio Web.

Revisar las páginas Web antes de transferirlas a Internet.

Cuando cree páginas Web, finalmente estará preparado para mostrarlas en

línea. De esto trata esta lección: del paso de las páginas desde el escritorio

“sólo para sus ojos” de su PC al espacio de “los ojos de todo el mundo” en

Internet. Con probabilidad, ha creado páginas Web, de modo que puede

manifestar su presencia en el Web, no sólo como ejercicio intelectual, así que

continuaremos con esa suposición.

La clave para “pasar al mundo real” sus páginas y colocarlas en el Web es

copiar los documentos HTML y los archivos de imagen en un servidor. En la

lección 4, revisamos con detalle el espacio en los servidores, los nombres de

dominio y los ISP, por lo tanto no vamos a volver sobre esas cuestiones aquí.

Si necesita un recordatorio en profundidad de estos temas, consulte la lección 4.

Si prefiere avanzar, a continuación se enumeran las cuestiones que deberá tener

en cuenta para poder pasar las páginas Web al mundo real:

■ Archivos HTML y de imagen, denominados y organizados

correctamente.

■ Espacio en un servidor. (Puede pagar una cuota mensual a un

servicio de alojamiento de sitios Web a cambio de espacio en un

servidor, puede usar un espacio gratuito o puede utilizar el espacio

que su ISP le proporciona en sus servidores como parte de su

cuenta de conexión a Internet.)

■ Una aplicación de software que permita transferir los archivos

desde su equipo a un servidor. (Explicaremos este requisito más

adelante en esta lección.)

■ Una dirección Web. Debe adquirir un nombre de dominio y registrarlo

con un servicio de alojamiento de sitios Web, configurar una dirección

Web en un servidor gratuito u obtener una dirección Web de su ISP

(el espacio en los servidores de los ISP se suele basar en el nombre

de dominio del ISP seguido de su nombre de usuario).

LECCIÓN 8

214

En este punto del curso, la lista anterior no debería sonarle demasiado

desalentadora. Asimismo, en un momento describimos con exactitud qué

aplicaciones de transferencia de archivos puede usar y cómo puede copiarlos en

un servidor. Por tanto, incluso si tiene algunas cuestiones acerca de los

requisitos anteriores, tenga paciencia: nos ocuparemos de cada uno en breve.

Además de transferir sus archivos a un servidor, tiene un par de tareas

adicionales a las que prestar atención. En concreto, tendrá que comprobar las

páginas Web cuando transfiera sus archivos a un servidor además de hacer

saber a los demás que su sitio puede verse.

Estas tres tareas posteriores a la fase de creación (transferencia de archivos,

comprobación de las páginas Web en “el mundo real” y comunicación de tal

hecho) son los puntos principales a los que aludimos en esta lección. Si tiene a

mano todos sus archivos, una conexión a Internet y algo de espacio en un

servidor, su sitio puede estar disponible en línea al finalizar esta lección.

Transferencia de los archivos a

Internet

Si tiene los archivos de imagen y HTML además de espacio en un servidor y

una conexión a Internet, significa que ya está preparado para exponer sus

páginas Web. Puede transferir los archivos a través de Internet de varias

formas. A continuación enumeramos algunos de los métodos de que dispone

para transferir archivos:

■ Programas FTP

■ Carpetas Web y Mis sitios de red

■ Asistentes para publicación en Web

■ Interfaces de ISP y editores HTML

■ Exploradores

En realidad no hay que darle más vueltas: va a tener que usar algún método

para exponer sus páginas. Después de todo, una de las transacciones más

comunes que los diseñadores Web tienen con un servidor es cargar

documentos HTML, imágenes y archivos multimedia. Por lo tanto, siga

leyendo. El proceso de carga es bastante sencillo siempre que tenga en mente

su objetivo principal, que es pasar los archivos de su equipo a un servidor de

una manera organizada.

Siempre que carga archivos de su escritorio a Internet, utiliza FTP. El truco para

transferir archivos con FTP es usar una aplicación o interfaz que esté diseñada

específicamente para servir como agente FTP. Aunque ese “truco” no parece

muy agudo, afirmar lo obvio también merece el espacio necesario para clarificar

lo que significa usar FTP. Hemos visto que las personas ponen los ojos en blanco

tan pronto como pronunciamos esas tres misteriosas letras: F-T-P. Por suerte, al

igual que con otras tecnologías de creación de páginas Web, el uso de FTP para

cargar archivos de páginas Web no es en absoluto amedrentador una vez que se

haya puesto al día en unos cuantos conceptos básicos.

Jerga: el término carga hace

referencia al proceso de copia

de archivos desde su equipo a

un servidor. La descarga se

refiere a la copia de archivos

de un servidor a su equipo,

como cuando descargó los

gráficos del sitio Web Creation

Guide para completar los

proyectos de las lecciones 6

y 7 de este curso).

Jerga: FTP es un protocolo

cliente-servidor que permite

usar un equipo para transferir

archivos entre equipos en

Internet.

215

Aplicaciones FTP

En nuestra opinión, las aplicaciones FTP estándar proporcionan uno de los

métodos más sencillos para cargar archivos en Internet. En apariencia, no lo

debemos de pensar sólo nosotros porque hay trillones de aplicaciones FTP

disponibles en forma de software gratuito, shareware y software comercial.

Principalmente, usamos un programa denominado CuteFTP para PCs que se

basan en Microsoft Windows y Fetch para equipos Macintosh. Pero puede

encontrar otras muchas aplicaciones FTP en línea (que se pueden descargar y

también comprar) y en tiendas de software informático.

Sugerencia

Debería poder adquirir un buen programa FTP por un precio muy razonable.

En general, comprar una aplicación FTP significa que dispondrá de una

mayor funcionalidad en comparación con las utilidades de shareware y de

software gratuito más limitadas. Tenga en cuenta que, probablemente, su

ISP le proporcione una aplicación FTP con su paquete de inicio. Si es así,

póngase en contacto con su proveedor u hojee la documentación del ISP

para encontrar las instrucciones específicas de la aplicación.

La figura 8-1 muestra la interfaz de CuteFTP, que es una interfaz de aplicación

FTP bastante típica.

Figura 8-1.

Con CuteFTP, puede arrastrar los archivos desde su equipo a un directorio

de su servidor.

216

El atractivo de las aplicaciones FTP más recientes es que puede arrastrar y

colocar los archivos que desee cargar de una venta a otra. Por ejemplo, en

CuteFTP, puede mostrar una carpeta local en el panel de la izquierda (en la

figura 8-1 se muestra la carpeta music creada en el proyecto de la lección 6) y

el espacio del servidor en el panel de la derecha. Para cargar los archivos de sus

páginas Web, basta con que seleccione y arrastre los archivos o carpetas del

panel de la izquierda al de la derecha.

Hemos escuchado decir a muchos usuarios que la parte más intimidante de la

utilización de una aplicación FTP es configurar la conexión inicial. Por suerte,

una vez que configure inicialmente una conexión, la mayoría de las aplicaciones

FTP conserva los datos de conexión “archivados” para utilizarlos en el futuro.

Advertencia

Cuidado: si usa un programa shareware y transcurre el tiempo asignado

para la prueba, corre el riesgo de perder la información de configuración de

sus conexiones FTP. Si sucede esto, tiene dos opciones: puede comprar

una copia con licencia del programa de shareware o (en algunos casos)

puede retrasar temporalmente el reloj del sistema de modo que pueda abrir

la aplicación de shareware y recuperar la información de su configuración.

Incluso aunque cada aplicación FTP tiene una interfaz personalizada para

reunir la información de las cuentas, tendrá que proporcionar ciertos datos

básicos para establecer una conexión FTP con un servidor con independencia

de la aplicación que use:

■ Etiqueta del sitio FTP Nombre que proporciona para la cuenta

FTP que está creando. El único propósito de la etiqueta del sitio

es ayudarle a recordar qué cuenta FTP se corresponde con cada

servidor. Denomine sus conexiones de forma lógica.

■ Dirección de host FTP La dirección de su espacio en el servidor.

Por ejemplo, la dirección de host del sitio Creation Guide es

ftp.creationguide.com.

■ Nombre de usuario del sitio FTP El nombre de usuario que utiliza

para tener acceso a su espacio en el servidor. Generalmente, el

nombre de usuario de un sitio FTP es el mismo que su dirección

de correo electrónico, por ejemplo admin@creationguide.com.

Algunos proveedores permiten especificar el nombre de usuario sin

la parte @dominio.com y, en este caso, en el ejemplo anterior sólo

se necesitaría indicar admin.

■ Contraseña del sitio FTP Una contraseña asociada con su nombre

de usuario que le permite tener acceso a su espacio en el servidor.

217

¡Pruébelo!

Visite www.tucows.com (en inglés) o www.download.com (en inglés) para

encontrar listas de programas FTP disponibles. Descargue e instale el programa

FTP que prefiera y, después, ponga la aplicación a prueba. Siempre puede

desinstalar el programa FTP que haya descargado y probar otro si el que elija

no se adapta a su estilo de trabajo. Si encuentra un programa shareware que le

guste, no olvide registrarlo.

En numerosos formularios de conexión FTP, también se le preguntará si desea

transferir la información en ASCII, en formato binario o con detección

automática. La forma predeterminada suele ser la detección automática (o alguna

variación de ese término) y le recomendamos que la conserve siempre que sea

posible.

Nota

Podría ser aconsejable que anote su contraseña y la guarde en algún lugar

seguro (que no sea su equipo). Cuando la especifique en las aplicaciones

FTP y en la mayor parte de los asistentes para publicación en Web, en su

lugar se muestran puntos.

Para crear una conexión FTP, debe insertar la información apropiada en los

campos respectivos (en CuteFTP, en el cuadro de diálogo Configuración del

sitio para el nuevo sitio) y, para finalizar la configuración, haga clic en Aceptar,

en Finalizar o en Conectar (según la aplicación). Cuando configure una

conexión FTP al espacio del servidor, puede conectarse a Internet, activar la

conexión FTP y cargar las páginas. (Llame a su ISP o visite sus páginas de

ayuda si tiene algún problema al conectarse.)

Nota

Los archivos HTML se deben transferir en modo ASCII, de texto o DOS.

Todos los archivos, incluidos las imágenes, los sonidos y los vídeos, se

deben transferir en modo binario. Comprobar que la opción Automático,

Detección automática, Todos los archivos o Datos sin formato está

seleccionada en las opciones de su aplicación FTP generalmente

significa que la aplicación puede diferenciar entre los tipos de archivo

comunes, de forma que no tendrá que preocuparse de especificar si se

trata de imágenes o archivos HTML. De forma predeterminada, CuteFTP

(y casi todas las demás aplicaciones FTP) se configura para detectar

automáticamente los tipos de archivo comunes.

218

En este punto, nos gustaría mencionar un par de reglas que debe seguir

religiosamente al copiar los archivos de sus páginas Web a un servidor.

No puede copiar los archivos y las carpetas de cualquier modo: tendrá que

seguir el proceso de forma ordenada o, de lo contrario, se arriesga a crear

vínculos erróneos y sobrescribir por error archivos que tengan el mismo

nombre. (Por ejemplo, la mayor parte de las subcarpetas contienen un archivo

denominado index.html; si no carga los archivos en las carpetas adecuadas,

podría reemplazar un archivo index.html inadvertidamente con otro del mismo

nombre que no tenga nada que ver.) Aquí tiene el punto clave que debe

recordar cuando cargue sus páginas Web: conserve la estructura de carpetas

y archivos de sus páginas Web.

En otras palabras, si su página Web consta de un documento índice.html y de

una carpeta denominada imágenes, asegúrese de cargar el archivo índice.html

y copiar después la carpeta imágenes o volver a crearla en el espacio en el

servidor y copiar los gráficos almacenados en su carpeta imágenes local a la

carpeta imágenes en línea. Como hemos mencionado, conservar la estructura de

su sitio es crucial para evitar que los vínculos sean erróneos en las páginas.

Éste es otro punto extremadamente importante: denomine a las carpetas en línea

exactamente con los mismos nombres que sus carpetas locales. No cambie el

nombre de ninguna carpeta o archive cuando las cargue, en especial, no cambie el

nombre de ninguna carpeta que contenga imágenes de páginas Web. (Por cierto, la

creación accidental de una carpeta denominada imagen si se debe llamar imágenes

constituye un cambio de nombre; asimismo, alterar las mayúsculas y minúsculas,

y quitar espacios dentro de los nombres de archivos o carpetas también se califica

como una práctica inaceptable de cambio de nombre.) El motivo para conservar

la estructura de denominación existente es sencilla: su documento HTML

probablemente contenga comandos HTML que indican a los exploradores

dónde buscar los gráficos. Las instrucciones de imágenes (contenidas dentro de

la etiqueta <IMG>, si trabajó en el proyecto HTML de la lección 6) señalan

específicamente a las imágenes almacenadas en una carpeta con un nombre

concreto. Si cambia el nombre de una carpeta sin cambiar los comandos HTML,

los exploradores no sabrán dónde buscar los gráficos de la página Web y no se

mostrarán en ella. De nuevo, el momento de cargar las carpetas y los archivos de

las páginas Web no es el apropiado para cambiarles el nombre. De hecho, lo

opuesto sí que es cierto: cuando cargue los archivos de una página Web en un

servidor, debe replicar su configuración de la forma más exacta posible.

219

Cuando haya copiado correctamente los archivos de sus páginas Web en

un servidor, termine su conexión FTP, abra el explorador y especifique la

dirección URL de la página Web en la barra de direcciones del explorador.

La dirección URL de la página Web es similar a la dirección FTP que

mencionamos anteriormente, excepto en que aparece www en lugar de

ftp (por ejemplo, la dirección FTP para el sitio Creation Guide es

ftp.creationguide.com mientras que la dirección Web es

www.creationguide.com). Si ha cargado un documento HTML index.htm

o index.html en el directorio raíz del dominio, debería poder tener acceso

a su nueva página principal especificando su dirección URL en la barra de

direcciones del explorador sin tener que escribir un nombre de archivo.

Por ejemplo, puede escribir simplemente www.creationguide.com en lugar

de www.creationguide.com/index.html para ver la página principal de

Creation Guide.

Como puede ver, la mayor parte de las aplicaciones FTP sirven para el único

propósito de proporcionar un medio de transferir y tratar (cambiar el nombre,

eliminar, mover, etcétera) archivos a través de una red. Si está buscando otras

opciones de transferencia de archivos o una solución más automatizada,

encontrará que numerosas aplicaciones tienen integradas funciones FTP,

como va a descubrir en la sección siguiente.

Sugerencia

Los ISP suelen indicarle dónde debe almacenar los archivos de sus

páginas Web dentro de su espacio en un servidor. En nuestro espacio en

un servidor para el sitio Creation Guide, copiamos toda nuestra información

en una carpeta generada por el ISP denominada web. Consulte a su ISP si

debe trabajar dentro de parámetros similares. Algunos ISP simplemente le

proporcionan la carpeta de nivel superior que puede usar para almacenar

los archivos de sus páginas Web.

Carpetas Web y Mis sitios de red

Microsoft proporciona otro método para cargar y administrar los archivos y

carpetas de un sitio Web: usar Mis sitios de red para crear y administrar sitios

que contienen carpetas y archivos Web. Mis sitios de red se incluyó por primera

vez en Microsoft Office 2000 y se sigue incluyendo en Office 2002 (antes de

Office 2000, la característica se conocía estrictamente como Carpetas Web y era

un poco más engorrosa que Mis sitios de red). Con Mis sitios de red, podrá usar

la conocida interfaz de Windows para realizar las tareas de administración de

archivos y carpetas necesarias para crear y mantener un sitio Web.

Jerga: Mis sitios de red

permite crear accesos

directos en el escritorio a

archivos y carpetas que se

encuentran en Internet o en

un servidor de una intranet.

220

Advertencia

Para poder configurar un vínculo a su espacio Web en Mis sitios de red,

debe comprobar que el servidor Web admite sitios de red. La característica

sitios de red requiere el protocolo Web Extender Client (WEC) y

extensiones de Microsoft FrontPage, o el protocolo WebDAV y Servicios

de Internet Information Server (IIS). Llame a su servicio de alojamiento de

sitios Web o consulte las páginas de preguntas más frecuentes en línea del

mismo para comprobar si su espacio Web está preparado para aprovechar

la tecnología de sitios de red.

Sugerencia

Puede que tenga que activar las extensiones de FrontPage en el servicio

de alojamiento para crear un sitio de red. Aunque esta tarea puede parecer

algo desalentadora, probablemente sea cuestión de unos pocos clics del

mouse (ratón) (en función de si su servicio de alojamiento admite el sitio

Web). Para averiguar cómo usar Extensiones de servidor de FrontPage en

el servicio de alojamiento, realice una búsqueda rápida en la sección de

soporte técnico del mismo o llame a su número de soporte técnico.

Básicamente, cuando usa la característica de sitios de red, puede crear accesos

directos a las ubicaciones de red que contienen las carpetas almacenadas en su

espacio Web. Después de crear un vínculo a un sitio de red, puede tratar el

contenido de las carpetas Web almacenadas en su espacio Web (generalmente,

éste es el espacio que adquiere en el servidor de su servicio de alojamiento)

igual que trata los archivos y carpetas locales. La diferencia radica en que los

cambios efectuados en los archivos de una carpeta Web se realizan en los

archivos en línea cuando se guardan los cambios. En resumen, un sitio de red

sirve como acceso directo a las carpetas Web (y al contenido de las mismas)

en su espacio en el servidor.

Puede tener acceso a los sitios de red y a las carpetas Web de dos formas.

En concreto, puede:

■ Mostrar sus sitios de red directamente, haciendo doble clic en Mis

sitios de red, en el escritorio, o eligiendo Mis sitios de red en el

menú Inicio, lo que permite crear nuevos sitios de red y abrir los

vínculos existentes.

■ Crear un sitio de red nuevo o vincularlo a un sitio de red existente

desde dentro de una aplicación de Office, como en Microsoft Word.

Cuando configura un sitio de red o lo vincula, puede guardar los

archivos y carpetas directamente en el sitio de red desde dentro de

la aplicación.

221

Nota

En vistas diferentes a Mis sitios de red, Windows también proporciona

las opciones Publicar esta carpeta en Web o Publicar este archivo en

Web (dependiendo del tipo de elemento que esté seleccionado en ese

momento), según se describe más adelante en esta sección. Cuando

selecciona una carpeta o un archivo, y hace clic en alguna de las opciones

anteriores, Windows le permite copiar la carpeta o el archivo en un

espacio de almacenamiento Web, como MSN o Xdrive Plus. Esta

característica sirve a los usuarios que desean compartir, transferir y

almacenar documentos codificados en un lenguaje distinto a HMTL en

el Web además de páginas Web e imágenes.

Como hemos mencionado, puede ver sus sitios de red si abre Mis sitios de red,

según se ilustra en la figura 8-2. Observe que Mis sitios de red incluye un

vínculo denominado Agregar un sitio de red en la sección Tareas de red, en el

lateral izquierdo de la ventana. (¡Probablemente pueda adivinar el propósito de

esta pequeña joya!)

Figura 8-2.

Puede tener acceso a sitios de red y carpetas Web y configurarlos desde la ventana Mis sitios de red.

Cuando abra una carpeta de sitio de red y examine su contenido, verá una lista

de las carpetas y archivos en línea junto con sus direcciones Web asociadas

(direcciones URL), según se ilustra en la figura 8-3. Dentro de la carpeta Web,

puede mover, copiar, cambiar el nombre y eliminar carpetas y archivos además

de ver sus propiedades. También puede arrastrar los archivos entre servidores

Web (si tiene varios sitios Web) y entre un servidor Web y el disco duro u otro

dispositivo de almacenamiento (como un disquete). En otras palabras, las

carpetas Web hacen que la administración de los archivos del sitio Web sea

tan sencilla como la administración de los archivos locales.

222

Figura 8-3.

Ver el contenido de una carpeta Web es similar a ver el contenido de las

carpetas del escritorio.

Ahora vamos a echar un vistazo rápido a dos métodos que puede utilizar para

crear sitios de red en el sistema. En ambos casos, necesitará la información

siguiente:

■ La información de dominio, que es la dirección Internet de su

sitio Web (por ejemplo, www.creationguide.com).

■ El nombre de usuario y la contraseña para tener acceso a su

espacio en el servidor

Creación de un sitio de red mediante Mis sitios de red

Para crear un sitio de red con Mis sitios de red, siga estos pasos:

1 En el escritorio de Microsoft Windows XP, haga doble clic en Mis

sitios de red o haga clic en Mis sitios de red en el menú Inicio, y

haga clic en el vínculo Agregar un sitio de red en la sección Tareas

de red.

2 En el Asistente para agregar sitio de red, haga clic en Siguiente.

El Asistente para agregar sitio de red tiene acceso a Internet y,

después, proporciona una opción para configurar un sitio de red en

MSN o en otra ubicación de red. En la mayor parte de los casos,

configurará un sitio de red en otra ubicación diferente al sitio Web

de MSN.

3 Seleccione la opción Elija otra ubicación de red y haga clic

en Siguiente.

4 En el cuadro de texto Dirección de red o Internet, escriba la

dirección de Internet de su ubicación de red (por ejemplo,

www.creationguide.com).

5 Haga clic en Siguiente. Si su espacio Web requiere que escriba

un nombre de usuario y la contraseña, verá un cuadro de diálogo

donde se solicite esta información, como se muestra en la

figura 8-4.

223

Figura 8-4.

En la mayoría de los casos, tendrá que especificar su nombre de usuario y la contraseña al crear un sitio de red.

6 Escriba su nombre de usuario y contraseña, y haga clic en Aceptar.

7 Escriba un nombre para el sitio de red en el cuadro de texto

Escriba un nombre para este sitio de red (por ejemplo, Creation

Guide). El nombre que especifique aquí se muestra en la ventana

Mis sitios de red, de modo que sea amable consigo mismo y elija

un nombre que siga teniendo sentido más adelante.

8 Haga clic en Siguiente y, después, en Finalizar para completar el

proceso.

Ahora debería ver un vínculo de sitio de red en su carpeta Mis sitios de red.

Puede hacer doble clic en el icono de sitio de red para tener acceso al espacio

Web del sitio de red. Si tiene problemas al configurar la conexión, compruebe

que el servidor Web tiene la configuración apropiada para controlar los sitios

de red (como se menciona anteriormente en esta lección).

Ahora que ha creado la carpeta Web, puede transferir los archivos a su sitio

Web arrastrándolos a su carpeta Web en su sitio de red recién creado o

guardándolos directamente desde cualquier programa de Office 2000 o de

una versión posterior. Descubrirá que puede usar sitios de red para modificar

y mantener sus páginas Web en diversas formas. Por ejemplo, podrá abrir un

sitio de red y hacer clic con el botón secundario del mouse en los nombres de

archivo y carpetas para cambiarles el nombre, seleccionar y eliminar archivos

y carpetas, reemplazar archivos y carpetas con información actualizada, y

modificar de alguna otra forma los documentos de páginas Web y directorios.

224

Creación de un sitio de red desde Word

Para crear una carpeta Web mientras trabaja en Word, puede hacer clic en

Agregar sitio de red en el panel de tareas de Nuevo documento (haga clic en

Nuevo en el menú Archivo) o puede crear un sitio de red con el cuadro de

diálogo Guardar como. En los pasos siguientes, le mostramos cómo crear un

sitio de red con el cuadro de diálogo Guardar como, pero los pasos para crear

un sitio de red desde el elemento Agregar sitio de red en el panel de tareas

Nuevo documento son muy similares.

1 En Word, haga clic en Archivo y, después, en Guardar como.

Aparece el cuadro de diálogo Guardar como.

2 En el cuadro de diálogo Guardar como, haga clic en el icono Mis

sitios de red en el panel Guardar en para mostrar el contenido de la

ventana Mis sitios de red, como se ilustra en la figura 8-5.

Figura 8-5.

Puede usar el cuadro de diálogo Guardar como para crear un sitio

de red.

225

3 En el cuadro de diálogo Guardar como, haga doble clic en el icono

Agregar sitios de red (mostrado en la figura 8-5). El Asistente para

agregar sitio de red se abre, según se muestra en la figura 8-6.

Figura 8-6.

Tiene la opción de crear un vínculo a un sitio de red o crear una carpeta nueva en un sitio de red.

4 Elija la opción Crear acceso directo a un elemento de Sitio de red

existente, si desea crear un vínculo a su espacio Web, y haga clic en

Siguiente.

5 En el cuadro de texto Ubicación, especifique la dirección de su sitio

Web (por ejemplo, www.creationguide.com) y, en el cuadro de texto

Nombre de acceso directo, escriba un nombre para la conexión,

como se ilustra en la imagen 8-7, y haga clic en Finalizar.

Cuando haya creado un

acceso directo a una

ubicación de red, (según se

describe en el paso 5),

podrá tener acceso al sitio

de red en el cuadro de

diálogo Guardar como y a

la ventana Mis sitios de red

si hace doble clic en el icono

de la ubicación.

226

Figura 8-7.

En este procedimiento, escribe la dirección de Internet del sitio de red y el nombre del acceso directo en un cuadro de diálogo.

6 Escriba su nombre de usuario y contraseña, y haga clic en Aceptar.

El contenido del sitio de red se muestra en el cuadro de diálogo

Guardar como.

Ahora, puede guardar su documento de Word en una carpeta Web

del sitio de red (y, de ese modo, cargar su página Web) en la

misma forma que guarda otros documentos de Word.

7 En el cuadro de lista desplegable Guardar como tipo, especifique

Página Web o Página Web, filtrada, especifique el nombre del

documento en el cuadro de texto Nombre de archivo, haga clic en

el botón Cambiar título si desea especificar el texto del título de la

página Web, haga clic en la carpeta Web en la que desee exponer

el documento HTML y haga clic en Guardar.

Después de guardar un documento HTML en una carpeta Web de un sitio de

red, puede ver la página en línea si especifica la dirección de la página Web

en la barra de direcciones del explorador.

Tendrá que establecer una

conexión a Internet para

poder guardar un documento

Web en un sitio de red.

227

Otras opciones aparte de FTP

Aunque no desee instalar un programa FTP en su equipo o configurar Mis

sitios de red y Carpetas Web, no está todo perdido. Puede copiar los archivos

en un servidor Web igualmente de otras formas. En concreto, puede usar las

funciones FTP integradas en alguno de los siguientes tipos de aplicaciones:

■ Asistentes para publicación en Web, como el Asistente para

publicación en Web incluido con Windows

■ Los servicios en línea de los ISP y editores HTML, como FrontPage

■ Exploradores, como Microsoft Internet Explorer

Asistentes para publicación en Web

El Asistente para publicación en Web ofrecido en Windows XP sirve

principalmente para permitir el almacenamiento de los archivos y proporcionar

funciones para usar los archivos de forma compartida. Por lo tanto, esta

herramienta no es la ideal para publicar páginas Web (a menos que esté trabajando

en un sitio de un grupo de MSN). Pero puede cargar y almacenar fácilmente los

documentos Web y otros archivos (incluidas las imágenes) mediante el Asistente

para publicación en Web en Windows. Es posible que desee usar esta

característica mientras crea documentos como medio de almacenamiento de

reserva o para compartir con otros los documentos en los que trabaja.

El Asistente para publicación en Web funciona de la misma forma que otros

asistentes: proporciona una serie de cuadros de diálogo que se deben completar

para cargar una carpeta o archivo o un proveedor de servicios en línea, como

MSN o Xdrive. Si se convierte en un diseñador Web “serio” y tiene su propio

espacio en el Web, rápidamente ansiará poder usar la mayor flexibilidad (y

simplicidad) que ofrecen las aplicaciones FTP y la herramienta de sitios de red.

De nuevo, el Asistente para publicación en Web puede constituir un medio

viable cuando llegue el momento de almacenar y compartir archivos así como,

posiblemente, publicar su primer sitio Web en MSN.

La mejor forma de entender cómo funciona el Asistente para publicación en

Web es seguir el proceso. Puesto que el proceso se sigue con los formularios

del asistente, no hay ningún motivo para mostrarle las páginas que puede ver en

su equipo. Para tener acceso al asistente, complete los pasos siguientes:

1 Abra Mi PC y seleccione un archivo o carpeta que desee publicar

en su espacio Web.

2 En la sección Tareas de archivo y carpeta, haga clic en Publicar

esta carpeta en Web (si ha seleccionado una carpeta) o en

Publicar este archivo en Web (si ha seleccionado un archivo).

El Asistente para publicación

en Web está disponible en la

mayor parte de las versiones

de Windows; se agregó por

primera vez a Windows en

la versión OSR2.5 de

Windows 95.

228

Para iniciar el asistente, haga clic en el botón Siguiente. A continuación,

prosiga a través de cada página y proporcione la información apropiada.

Cuando seleccione publicar una carpeta, el asistente presenta un cuadro de

diálogo en el que puede elegir los archivos que desee publicar activando o

desactivando las casillas de verificación, como se muestra en la figura 8-8.

Cuando haya completado todos los formularios del asistente, tendrá que hacer

clic en Finalizar para cargar sus archivos. Si tiene la información correcta, el

proceso debe llevarse a cabo sin problemas y la información recién agregada se

mostrará en el explorador de forma predeterminada.

Figura 8-8.

El Asistente para publicación en Web proporciona la oportunidad de elegir los

archivos que desee cargar dentro de una carpeta seleccionada.

229

¡Pruébelo!

Seleccione un archivo o carpeta que desee cargar en el Web. A continuación,

siga el proceso del Asistente para publicación en Web para practicar la carga de

un archivo o carpeta en una carpeta personal de MSN.

Cuando coloque archivos en una carpeta personal de MSN, sólo podrá tener

acceso a ellos con su cuenta de .NET Passport. Si no tiene una cuenta de

Passport, el Asistente de .NET Passport le ayuda a crear una cuando publica un

archivo o carpeta en MSN. Después de publicar un archivo o carpeta, se agrega

un vínculo al recurso en la ventana Mis sitios de red. Asimismo, puede tener

acceso a los archivos y carpetas desde cualquier explorador Web de cualquier

equipo y puede agregar y eliminar archivos de su carpeta en línea (para tener

acceso al contenido de la carpeta, haga doble clic en el vínculo en la ventana

Mis sitios de red) de la misma forma que agrega y elimina los archivos y

carpetas locales.

Características de editores HTML e interfaces de ISP

Otros recursos para transferir archivos son las interfaces de los ISP y los

editores HTML. En esencia, estas herramientas son variaciones o híbridos

de aplicaciones FTP, la característica de sitios de red y el Asistente para

publicación en Web. Las ventanas principales de las características de los

ISP y de los editores HTML son que las herramientas suelen ser fácilmente

accesibles. Por ejemplo, algunos ISP ofrecen formularios que puede usar para

cargar los archivos desde su equipo al servidor. De hecho, el host de Creation

Guide proporciona un formulario, pero nos ha parecido complejo, por lo que

no lo usamos nunca para administrar los archivos del sitio. Si va a comprar un

servicio de alojamiento, investigue los servicios de administración de archivos

que ofrece. Nuestro servicio de alojamiento proporciona varias características

de calidad, por ejemplo, estadísticas de registro (como el seguimiento del

número de visitas a una página y la cantidad de visitantes) y mucho espacio,

de modo que pasamos por alto la característica algo insuficiente del

administrador de archivos porque sabíamos que podíamos conseguir unas

cuantas páginas a través de una aplicación FTP con bastante rapidez. En

nuestra opinión, si piensa usar una interfaz de transferencia de archivos de un

ISP, compruebe que la herramienta en línea sea al menos tan intuitiva como

una aplicación FTP o como el Asistente para publicación en Web.

230

Igual que los formularios FTP en línea de un ISP, varios editores HTML,

incluido FrontPage, ofrecen características de carga de archivos automática

(como se explica en la lección 7). El uso de un editor HTML para cargar

archivos puede ser extremadamente útil. Lo principal es que debe conocer

exactamente los archivos que se cargan y dónde. Además, debe saber cuándo

reemplaza los archivos en línea existentes (lo que siempre es aconsejable

independientemente de cómo cargue los archivos); de lo contrario, es posible

que no pueda volver a usar una página anterior si decide que no desea

conservar las modificaciones más recientes. Como ilustración, si usa Internet

Explorer y tiene instalado FrontPage, puede visitar su sitio Web y hacer clic en

el botón Edición, en la barra de herramientas de Internet Explorer, para abrir

una versión local de su página Web en FrontPage. A continuación, puede hacer

modificaciones en la página y hacer clic en Guardar para guardar y cargar la

página modificada directamente en el servidor. Cuando haga esto, si no cambia

el nombre de la página recién modificada, la página existente se reemplaza con

la actualizada. Por lo tanto, generalmente reservamos esta característica para

correcciones sencillas, por ejemplo, en errores tipográficos o en la actualización

de fechas. Cuando modifique y guarde una página con la característica de

acceso en línea de FrontPage, sobrescribirá su documento HTML existente.

Debe tener esto en cuenta.

Sugerencia

Debe usar el comando Publicar Web de FrontPage para cargar inicialmente

las páginas Web que creó en esta utilidad. El uso de la herramienta de

publicación de FrontPage garantiza que las características de FrontPage

que se basan en Extensiones de servidor de FrontPage se implementen

correctamente. Incluso si no ha agregado ninguna capacidad avanzada a

sus páginas Web de FrontPage, le recomendamos encarecidamente que

use el comando Publicar Web para cargar su sitio Web, al menos la

primera vez.

Para aprender a usar los formularios de los ISP o las características de carga

de un editor HTML, remítase a los archivos de ayuda de la aplicación o a la

documentación publicada. Hay demasiadas variaciones entre los sistemas como

para proporcionar una descripción adecuada de cada procedimiento en esta

lección.

231

Exploradores como clientes FTP

Por último, puede usar exploradores como clientes FTP (dependiendo de la

configuración de su servidor Web). La mayor parte de las personas saben que

pueden descargar archivos desde la ventana de un explorador pero pocas conocen

que también pueden cargar archivos y carpetas en algunos exploradores, incluido

Internet Explorer. Tenga en cuenta que su servicio de alojamiento debe admitir

esta característica; nos hemos encontrado que algunos sitios se ocupan de las

cargas de los exploradores mejor que otros. Si su servicio de alojamiento

funciona bien con esta característica, el método es sencillo: debe usar la barra

de direcciones para mostrar el contenido de la carpeta de su servidor y, después,

arrastrar los archivos desde las carpetas locales a las del servidor que se muestran

en la ventana del explorador. Asimismo, puede hacer clic con el botón secundario

del mouse en los archivos y carpetas en línea para tener acceso a un menú

contextual que le permita cambiar el nombre, mover y eliminar los archivos

en línea. Para mostrar sus carpetas en línea, debe especificar la información

siguiente en la barra de direcciones de Internet Explorer:

ftp://nombredeusuario:contraseña@ftp.dominio.com.

Por ejemplo, una entrada podría tener la apariencia siguiente:

ftp:// mmail:cafe2@ftp.microsoft.com o

ftp://mmail:cafe2@miembros.nombreISP.com.

Cuando aparezca el espacio en el servidor, abra la carpeta que contenga los

archivos de sus páginas Web y arrastre los archivos y carpetas a la ventana del

explorador para copiar los componentes de la página Web. En la figura 8-9 se

muestra el acceso FTP a una carpeta Web. Puede cargar, eliminar y cambiar el

nombre de los archivos Web dentro de Internet Explorer.

Figura 8-9.

Dependiendo de la configuración del servidor Web, en ocasiones puede usar

Internet Explorer para transferir y administrar archivos Web.

Para tener acceso a la

característica de carga de

archivos de AOL, use la

palabra clave “myplace” o

“myftpspace”. Si va a crear

una página en AOL, la

dirección URL de su página

Web será members.aol.com/

screenname/nombredearchivo

.

232

En esta lección, introducimos varias herramientas que puede usar para transferir

los archivos locales de sus páginas Web a un servidor. Pruebe algunas opciones y

vea cuáles funcionan mejor en su caso. Puesto que existen numerosas variaciones

dentro de cada categoría, estaríamos emprendiendo una tarea poco realista si

intentáramos describir cada aspecto de todos los medios existentes para transferir

archivos a Internet. Lo mejor que puede hacer es elegir qué estilo de carga desea

intentar y probarlo a continuación. Si se le plantean dudas, visite los archivos de

ayuda de la aplicación o la documentación impresa (o envíenos un mensaje por

correo electrónico, si está realmente atascado). Si no le gusta algún proceso,

pruebe con otro. Confiamos en que, si recopila la información apropiada para la

conexión y la especifica correctamente, podrá conectarse a su espacio Web y

conseguir que sus páginas aparezcan en línea.

Revisión de su trabajo

Cuando haya cargado las páginas Web, lo primero que debe hacer es

explorarlas y comprobar la presentación de su sitio Web. Como explicamos en

las lecciones 6 y 7, debe obtener una vista previa de sus páginas Web en todo el

proceso de creación y aquí se considera la fase de carga del mismo. Por tanto,

compruebe sus páginas en “el mundo real”. Si ha tenido cuidado, no debería

encontrarse demasiadas sorpresas cuando ponga sus páginas en Internet. No

obstante, antes de empezar a llamar a sus amigos y dirigir a la gente a su sitio

Web (a menos que les pida que lo revisen), debe ver las páginas Web. Cuando

muestre la página principal, compruebe los detalles siguientes:

■ Compruebe que todas las imágenes se presentan de forma

adecuada. No desea que aparezca ningún marcador de imagen

errónea en su página.

■ Haga clic en sus vínculos para comprobar que funcionan, incluidos

los botones de la barra de exploración, los gráficos de los logotipos

vinculados, los vínculos de texto y los mapas de imágenes, si

aparecen en su página.

■ Compruebe si la página y sus elementos caben dentro de la

ventana estándar del explorador. Recuerde que los usuarios

consideran muy molesto tener que desplazarse a la izquierda y

la derecha para ver una página Web.

■ Complete y envíese un formulario de prueba a usted mismo si se

usan formularios en su sitio.

■ Lea el título de cada página y la barra de título para comprobar su

precisión.

■ Compruebe que el texto y los vínculos de texto son fáciles de leer

en comparación con los fondos de las páginas Web.

233

Básicamente, tómese tiempo para examinar su sitio. Haga clic en todas partes,

pruebe cada elemento interactivo y emplee su ojo crítico. Es mejor tomarse un

poco más de tiempo comprobando su trabajo después de cargar una página que

un visitante le envíe un mensaje para decirle que su sitio Web es poco útil

porque no se ve bien o no responde como debía.

La última tarea posterior a la fase de creación que abarcamos en esta lección

es comunicar que su sitio Web existe. La forma más común de empezar a

publicitar un sitio es comprobar que los motores y directorios de búsqueda

ya pueden reconocer su página Web.

Puntos clave

■ Puede usar aplicaciones FTP para copiar archivos desde su equipo

a un servidor.

■ Puede transferir archivos y carpetas mediante aplicaciones FTP,

sitios de red y carpetas Web, el Asistente para publicación en Web,

formularios en línea de ISP, editores HTML y exploradores, como

Internet Explorer.

■ Si su servidor admite sitios de red, puede usar la característica

Mis sitios de red para cargar y tratar con facilidad sus archivos y

carpetas de su sitio Web del mismo modo que administra las

carpetas locales.

■ Al cargar archivos Web en un servidor, conserve la estructura de

archivos y carpetas de su sitio Web, incluyendo los parámetros

exactos de denominación y organizativos de los archivos y

carpetas del equipo local.

■ Cuando haya cargado páginas Web, véalas siempre en línea

para comprobar si contienen errores o vínculos erróneos.

■ Para publicitar su sitio Web, regístrese en motores de búsqueda.

■ Considere agregar etiquetas META a sus documentos HTML para

controlar en cierta medida la forma en que los motores de

búsqueda clasifican el sitio.

■ Finalmente, deje que los demás sepan que su sitio está activo,

mediante el boca a boca y a través de otros canales de

comunicación típicos, ¡y comience el intercambio de información

en línea!