Diseo Web Contenido

Introduccin Leccin 1 Leccin 2 Leccin 3 Leccin 4 Leccin 5 Leccin 6 Leccin 7 Leccin 8 Pginas principales sin misterios Creacin y forma del texto para el Web Creacin y utilizacin de arte en el Web Acopio de utensilios Plan de ataque HTML bsico sin misterios Creacin de sitios Web con FrontPage Introduccin de las pginas Web en el mundo real 2 12 26 37 58 80 96 155 213

Introduccin
Ahora ms que nunca, los adultos tienen que reinventarse a s mismos en muchas ocasiones para estar al da 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 jvenes y adultos al proporcionar conocimientos tecnolgicos a travs de centros comunitarios de aprendizaje tecnolgico (CTLC). Microsoft cree que fomentando la enseanza de conocimientos tcnicos podemos ayudar a crear oportunidades sociales y econmicas que ayuden a cambiar las vidas de las personas y a transformar las comunidades. Al participar en los cursos UP, los alumnos se centrarn en los conocimientos tcnicos que necesitan para utilizar diversas aplicaciones. Todos los cursos UP ensean conocimientos tecnolgicos de manera prctica que resaltan las aplicaciones reales de la tecnologa, desde informtica bsica y alfabetizacin informtica hasta fotografa digital, diseo de pginas Web o software de productividad. Los cursos UP estn pensados para su uso dentro de la comunidad y en centros de enseanza de tecnologa, ya sea en el contexto de un aula o para autoaprendizaje. En el caso de los cursos relacionados con informacin introductoria y tecnologas de comunicaciones (alfabetizacin informtica, Internet, World Wide Web, medios digitales y aplicaciones de productividad), no se supone experiencia previa con la tecnologa o el software.

A quin va dirigido este programa

Todos los cursos del programa Microsoft UP estn diseados para motivar a los jvenes y adultos que desean aprender nuevas tecnologas o aumentar sus conocimientos tecnolgicos 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 diseado para prever, comprender y centrarse en la necesidad de estos alumnos de una instruccin eficiente y efectiva. Una instruccin bien diseada 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.

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 accin, esperan que lo aprendido sea aplicable directamente a sus responsabilidades profesionales, as como a sus fines personales. Este programa contiene muchos ejemplos prcticos del mundo real y aplicaciones diseadas para atraer a una amplia gama de alumnos adultos.

Por encima de todo, cada curso UP est diseado para ensear conocimientos de tecnologa pero siempre teniendo presente el uso de la tecnologa para mejorar las oportunidades individuales, la productividad, la preparacin para el trabajo y la calidad de vida.

Ofertas y objetivos de los cursos

El programa UP cumple los estndares educativos de Microsoft e internacionales. Como tal, el programa de estudios ofrece los siguientes cursos introductorios sobre equipos, software y tecnologa digital:
Conceptos bsicos de informtica Este curso ofrece a los alumnos una base slida de los conceptos bsicos de la informtica y los fundamentos de hardware, software, sistemas operativos, Internet, etc. Conceptos bsicos de medios digitales Este curso ensea a los alumnos cmo empezar con los medios digitales, incluyendo fotografa digital, audio y vdeo digital. Conceptos bsicos de Internet y del World Wide Web Este curso ensea cmo explorar el Web, utilizar motores de bsqueda, trabajar con correo electrnico y crear pginas Web. Conceptos bsicos de diseo Web Este curso explica todo el proceso de diseo de pginas Web, desde los fundamentos de HTML hasta las estrategias para disear y crear un sitio Web completo. Conceptos bsicos de procesamiento de textos Este curso se centra en cmo utilizar un procesador de textos para escribir y revisar diversos documentos personales y comerciales, desde cartas y memorandos sencillos hasta documentos complejos que contienen grficos y tablas.

Conceptos bsicos de presentaciones Este curso trata todo lo necesario para crear presentaciones electrnicas convincentes, desde la creacin de presentaciones con diapositivas bsicas hasta cmo agregar grficos, vdeo y audio para conseguir presentaciones multimedia completas.

Conceptos bsicos de bases de datos Este curso presenta los fundamentos del uso de una base de datos relacional para crear tablas, formularios e informes.

Conceptos bsicos de hojas de clculo Este curso ensea a los alumnos los conceptos bsicos de las hojas de clculo incluyendo la creacin de hojas de clculo, la modificacin de datos, la creacin de diagramas y grficos, y la publicacin de una hoja de clculo en el Web.

Cada curso utiliza tareas y proyectos para desarrollar competencias en cuanto a la tecnologa de informacin bsica y las aplicaciones de productividad de sobremesa mediante el tratamiento de los temas siguientes:
Conceptos bsicos de la tecnologa de la informacin Uso del equipo y administracin de archivos Procesamiento de textos Hojas de clculo Bases de datos Presentaciones Alfabetizacin sobre Internet, World Wide Web y correo electrnico

Entre las reas temticas principales se incluyen las siguientes:

Fundamentos de la informtica (hardware, software, sistema operativo) Principales aplicaciones de software (aplicaciones de productividad) Internet, World Wide Web y correo electrnico

El programa UP ofrece materiales para los alumnos y para los instructores que son flexibles, confiables, econmicos 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.

Cmo est organizado el curso

Cada curso del programa Microsoft UP empieza con los conceptos bsicos y pasa rpidamente hacia conocimientos y tcnicas intermedios. Los tutoriales prcticos construyen de forma experta sus conocimientos paso a paso. Al estudiar con un enfoque basado en tareas, aprende algo ms que simplemente las caractersticas del software. Aprende a realizar tareas de la vida real, de forma que pueda aumentar su productividad inmediatamente utilizando la tecnologa. Cada leccin empieza con unos objetivos de aprendizaje en vietas. Cada objetivo especifica una tarea determinada que podr realizar cuando complete la leccin. Los tutoriales paso a paso son el eje central de cada leccin. Las lecciones se basan en tareas que puede encontrar en el mundo laboral cotidiano. Este enfoque le permite ver rpidamente la importancia del aprendizaje. El enfoque basado en tareas est imbricado en toda la serie, incluyendo la organizacin de lecciones dentro de cada unidad, los ttulos de las lecciones y las situaciones de ejemplo elegidas para los archivos de prcticas. Los conceptos se presentan e ilustran con ejemplos de muchas situaciones de la vida real, la tecnologa se explica claramente y los ejercicios prcticos le permiten empezar a aplicar inmediatamente lo que sabe. La mayora de las lecciones terminan con 4 5 ejercicios prcticos de dificultad creciente, y desafan al alumno a entender y aplicar lo aprendido.

Caractersticas especiales
Objetivos de aprendizaje. Establecen claramente los objetivos de enseanza para cada leccin, 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 informacin ms 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 guan por el proceso de aprendizaje. Con cada curso se ofrecen archivos de ejemplo. Sugerencias. En toda la leccin se incluyen sugerencias tiles y formas alternativas de realizar las tareas que le ofrecen informacin adicional, mtodos abreviados y posibles problemas, as como comentarios acerca de lo que est aprendiendo. Notas. En todo el texto de la leccin encontrar informacin adicional que le permite profundizar ms en un tema. Importante. Las notas especiales ofrecen precauciones o instrucciones especiales.

Barras laterales. Las barras laterales de algunos de los cursos contienen temas parentticos, informacin adicional o explicaciones ms extensas, como momentos interesantes en la historia de la informtica, los entresijos de la ley del copyright o lo que tiene que saber acerca de los colores seguros que hay que utilizar en una pgina Web. Jerga. Estas notas al margen de algunos de los cursos ofrecen definiciones de trminos tcnicos. Prubelo! Estas barras laterales especiales de algunos cursos ofrecen minitutoriales rpidos para comprobar sus conocimientos. Archivos de prcticas. 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 leccin. Los resmenes de lo que ha aprendido en una leccin sirven como recordatorio de los puntos clave y le indican lo que debe hacer a continuacin. Ejercicio corto. Los ejercicios cortos incluidos al final de cada leccin evalan lo que ha aprendido y cmo podra aplicarlo. Esta evaluacin al final de la leccin va ms all de una simple recapitulacin de lo aprendido, al pedirle que explique cmo realizar ciertas tareas. Resumen de conceptos. Estos ejercicios incluidos al final de cada leccin le permiten practicar la aplicacin de lo aprendido a proyectos del mundo real. Muchos de estos ejercicios se basan unos en otros para ofrecer un conjunto creciente de desafos que ponen a prueba sus conocimientos. Apndices. Los objetivos para el examen de especialista en Microsoft Office de cada curso se enumeran en un apndice al final del libro.

Archivos de prcticas
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 leccin se explica cundo y cmo utilizar los archivos de prcticas para esa leccin. Muchas de las lecciones se basan en situaciones de la vida real para que pueda aplicar fcilmente los conocimientos aprendidos a su propia situacin. Por ejemplo, Conceptos bsicos de diseo Web incluye todos los ingredientes para crear varios sitios Web con FrontPage: los archivos de texto, los archivos grficos y los archivos HTML necesarios para crear un sitio Web atractivo. Puede elegir entre trabajar con estos archivos como parte de la instruccin en el aula en los centros comunitarios de tecnologa y aprendizaje o bien puede utilizarlos para aprender por su cuenta.

El instructor instalar todos los archivos de prcticas en la unidad de disco duro de cada equipo. Dependiendo del curso concreto que vaya a realizar, los archivos se almacenarn 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 cmo 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 mnimas siguientes para ejecutar Microsoft Office XP y permitir a los alumnos el trabajo con los archivos de prcticas 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 mnimo, adems de 8 MB de RAM adicionales para cada programa de Office que se ejecute simultneamente. Al menos 58 MB de espacio disponible en disco (despus de instalar Microsoft Office XP). Una unidad de CD-ROM. Un monitor con resolucin Super VGA (800 x 600) o superior con 256 colores; se recomienda un monitor de 15 pulgadas como mnimo. Un mouse (ratn), IntelliMouse u otro dispositivo sealador compatible.

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 diseo educativo, autores y expertos en tecnologa que aportaron el contenido de estos libros y cursos poseen unos extensos conocimientos en tecnologa y gran experiencia didctica.

Parte del material de este curso se ha adaptado de Faster Smarter Web Page Creation, publicado por Microsoft Press. Existe una versin ms 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 tecnologas de informacin e informtica. Edicin original de Faster Smarter Web Page Creation by Mary Millhollon. Los libros de Microsoft Press pueden adquirirse en libreras y distribuidores de todo el mundo. Para obtener ms informacin acerca de las ediciones internacionales, pngase en contacto con su librera local o pngase en contacto con Microsoft Press International directamente en el nmero de fax (425) 936-7329. Visite nuestro sitio Web en www.microsoft.com/mspress para obtener ms informacin acerca de estos libros y los autores que los crearon.

Convenciones utilizadas en este curso

Este curso utiliza fuentes, smbolos y convenciones de ttulos especiales para resaltar la informacin importante o para llamar su atencin sobre pasos especiales. Para obtener ms informacin acerca de las caractersticas disponibles en cada leccin, consulte la seccin Caractersticas especiales de esta Introduccin.

Convencin Texto en cursiva

Significado Este formato indica un trmino clave utilizado por primera vez, como banda ancha o World Wide Web. Este formato indica el texto que usted debe escribir. O bien Indica un trmino clave que se emplea por primera vez.

Texto en negrita

Fuente Sans-serif

Este formato se utiliza para resaltar texto que forma parte de los pasos de los tutoriales. Las notas ofrecen informacin adicional que le permite profundizar en un tema. Ofrecen sugerencias tiles y formas alternativas de realizar tareas. Las notas especiales ofrecen precauciones o instrucciones especiales. Las notas al margen recuadradas ofrecen informacin adicional y comentarios sobre el texto.

nota sugerencia importante

Puede buscar y descargar software antivirus en Internet.

10

Caractersticas de las lecciones

Los objetivos de la leccin establecen claramente los objetivos de enseanza para cada leccin, de forma que entienda lo que aprender.

Cada tema empieza con informacin que explica conceptos y tcnicas.

Las notas al margen incluyen sugerencias e informacin adicional. Las notas importantes contienen instrucciones especiales.

Los pasos numerados ofrecen instrucciones detalladas para realizar una tarea.

Las sugerencias ofrecen consejos tiles, mtodos abreviados y formas alternativas de realizar una tarea. Los trminos importantes se muestran en negrita y se definen la primera vez que se utilizan. Las ilustraciones ofrecen informacin visual mientras que estudia la leccin.

11

Error: Reference source not found

Resumen de la leccin trata problemas restantes de la administracin de archivos para terminar la leccin.

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

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

12

LECCIN 1

Pginas principales sin misterios

Una vez completada esta leccin, podr:
Explicar la diferencia entre Internet y el World Wide Web. Comprender la anatoma de una pgina Web tpica. Crear una pgina HTML sencilla y verla en un explorador. Es muy probable que le resulte bastante conocida la no tan modernsima invencin denominada Internet. Y lo que es ms, estamos dispuestos a apostar que, si est contemplando la idea de hacerse notar en el Web, sabe cmo usar en cierto modo un equipo informtico. Tambin suponemos que ha explorado el Web, puede usar aplicaciones bsicas (por ejemplo, paquetes de procesamiento de texto) y puede hacer clic en un mouse (ratn). Por suerte, su conocimiento bsico de informtica es todo lo que precisa para poder crear pginas Web. Eso junto con estas lecciones, por supuesto! Su primer cometido en el camino para llegar a convertirse en desarrollador de pginas Web supone comenzar a partir de lo que ya sabe. Por ejemplo, adems de unas capacidades informticas moderadas, debe tener una idea de cmo se relacionan entre s Internet, el Web y las pginas Web. Por lo tanto, en aras de nuestro objetivo de mantener la claridad y simplicidad, reduciremos la marcha en esta leccin y describiremos brevemente los elementos principales de la mayor red del mundo: Internet, el Web y las pginas Web. Cuando hayamos conseguido quitarnos de en medio una serie de conceptos bsicos, pasaremos el resto de las lecciones hablando acerca del planeamiento y la creacin de pginas Web.

Jerga: Internet es el hardware que se interconecta para crear una red mundial enorme.

Internet: simplemente un montn de hardware

Jerga: los enrutadores son componentes de retransmisin entre redes.

Para simplificar, Internet, o la gran red, es hardware: muchsimos 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 fsicamente, como son equipos, enrutadores, cables, lneas de telfono, circuitos de datos de alta velocidad y otros dispositivos fsicos de red.

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 cmo la paranoia de la guerra fra del gobierno de Estados Unidos incit el desarrollo de una red informtica descentralizada. Si siente curiosidad por la historia de Internet, puede encontrar informacin en lnea y en las bibliotecas o libreras de su barrio. (Adems, vea la seccin de recursos en www.creationguide.com/resources, (en ingls), para consultar algunos vnculos tiles.) Ahora que hemos identificado con claridad que Internet es el hardware, vamos a dar el siguiente paso lgico. Como todo el hardware informtico (piense en su equipo porttil o de escritorio), Internet necesita software o, de lo contrario, sus componentes de hardware simplemente estaran ah acumulando polvo (en su mayor parte), de forma globalizada. Entre en el World Wide Web.

El Web: software para el hardware

Jerga: el Web consta de software que permite compartir la informacin de Internet.

El World Wide Web (tambin conocido como WWW o, simplemente, el Web) es un poco ms esotrico que Internet. Esto es as porque consta de software (como son programas, documentos y archivos) que permite a la informacin viajar a travs del hardware de Internet. Como ayuda para ilustrar la funcin del Web en relacin a Internet, a continuacin relatamos una breve historia que contamos por primera vez hace algunos aos al explicar la funcin del Web a nefitos en Internet: Hace mucho tiempo (cuando los insectos y los arcnidos podan hablar), haba una araa de intelecto inusualmente brillante llamada Tim. Tras ver a las hormigas trabajar todo el da, Tim se reuni con la hormiga jefe por entonces, Bill. Las hormigas, como es habitual, demostraban una increble destreza acumulando y almacenando comida, pero Tim pens que las araas podan asociarse con ellas con el fin de hacer la vida ms fcil para ambas. Tim se dirigi a Bill con este plan, quien vio cierta lgica en l. De hecho, sugiri que incorporaran a otras criaturas en el equipo tambin. 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 aqulla era una idea esplndida, as que se reunieron y crearon un elaborado laberinto de hormigueros, telas de araa, madrigueras y tneles para servirles de ayuda en la empresa. El sistema ya estaba implantado y pareca perfecto. Era el momento de empezar a trabajar. Pero, con gran decepcin para las criaturas, surgi el caos. Incluso aunque todos los caminos y conexiones estaban ah, las moscas lo pasaban muy mal explorando los tneles, los saltamontes tenan dificultad para permanecer en los hilos, las lombrices eran simplemente demasiado pesadas para andar sobre las telas de araa y, por supuesto, las expectativas de las hormigas eran mucho mayores que las del resto de los grupos. Lo que las criaturas tenan 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.

14

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 cmo 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).

Esta corta historia proporciona una buena analoga de la relacin entre Internet y el Web. Como comentamos anteriormente en esta leccin, Internet es la infraestructura para transmitir informacin: una infraestructura formada por equipos, enrutadores, cables, lneas de telfono, circuitos de datos de alta velocidad y bases de informacin denominadas servidores (a modo de hormigueros, telas de araa y tneles). Por desgracia, al igual que las telas de araa no pueden soportar el peso de las lombrices, no todos los equipos informticos pueden admitir todos los formatos de archivo. Incluir cada uno de los mtodos disponibles (o protocolos) para comprender los diversos formatos de documentos de todos los equipos sera poco prctico. As, la comunidad de Internet ide su propia criatura universal, conocida ms comnmente 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 fsicos de altas energas. (Por cierto, aunque se considera que el intelecto de Tim es extremadamente avanzado, no es una araa!) El Web atrajo rpidamente mucha atencin y se extendi ms all del mbito de la fsica. Al igual que con la historia de Internet, puede encontrar montones de informacin acerca de la historia del Web en lnea y en numerosos libros de informtica. Para nuestros propsitos, slo 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.

Pginas Web: unos cuantos archivos en la gran red

Ahora nos encontramos cara a cara con el meollo del asunto: las pginas Web. Bsicamente, una vez que se destripa todo el pomposo balbuceo tecnolgico, las pginas Web son archivos. Para ser ms concretos, las pginas Web son archivos HTML. No tiene que poner en blanco los ojos ante la visin de HTML; en la leccin 6, desvelamos sus misterios. En este momento, todo lo que necesita saber es que las pginas 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 pginas Web son archivos, no tiene que llevar su imaginacin demasiado lejos para darse cuenta de que crear una pgina Web es, simplemente, el acto de crear un tipo especfico de archivo en un equipo. Documentos de Word, hojas de clculo, bases de datos, pginas Web: todos son tipos de archivos. Claramente, puede ver que las pginas Web no son entidades misteriosas. No pueden abrumarle. Son archivos informticos y ya ha trabajado con ellos en numerosas ocasiones.

15

Jerga: un sitio Web es una coleccin de pginas Web relacionadas, que suelen incluir una pgina principal y subpginas.

As que no deje que le intimiden. Por supuesto, esto no es lo mismo que afirmar que las pginas Web no tengan algunas idiosincrasias que las diferencien de otros archivos. Por ejemplo, siempre incorporan varios archivos e hipervnculos, y se suelen reunir en grupos llamados sitios Web.

La naturaleza multiarchivo de las pginas Web

Hemos dicho que las pginas Web son simplemente archivos y lo reafirmamos. Pero debemos aportar un poco ms de claridad en relacin a los tipos de archivos a los que nos referimos. Mientras lee el siguiente par de prrafos, podra pensar que estamos proporcionando demasiada informacin en este punto, pero en realidad no es as. Debera tener al menos una idea (no necesariamente un conocimiento consolidado, an) de los componentes e interacciones de las pginas Web antes de avanzar demasiado. Hecha la rectificacin, sigamos con la informacin.

Jerga: un documento de texto es un archivo que contiene palabras, letras y nmeros sin ningn formato.

En primer lugar, en el nivel ms bsico, cada pgina Web es un documento de texto. Un documento de texto es un archivo que contiene palabras, letras y nmeros sin ningn 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, despus, seleccione Bloc de notas o WordPad) y escribir su nombre, una frase pegadiza, varias letras, algunos nmeros o cualquier cosa, en realidad est creando un documento de texto (no una pgina 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!

16

Para convertir el documento de texto en una posible pgina Web, basta con agregar comandos HTML especficos, segn se muestra en la figura 1-2.

Figura 1-2. Este documento de texto contiene comandos HTML bsicos junto con algo de texto y una lnea de texto en el cuerpo de la pgina.

Pginas Web y exploradores

Para ver pginas 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 aplicacin 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 confusin en relacin al lugar finaliza Internet y dnde comienza el equipo. La clarificacin se vislumbra fcilmente: cuando vea una pgina Web en el explorador, las barras de herramientas, las barras de men y dems elementos alrededor de una pgina 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 extensin .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 slo aparece el texto del cuerpo y el de la barra de ttulo, y no los comandos HTML. Ello se debe a que stos simplemente proporcionan instrucciones a los exploradores en relacin a cmo mostrar la informacin y no a qu se debe mostrar.

Figura 1-3. Puede ver en un explorador un documento de texto bsico con comandos configurado correctamente. No se preocupe si esta explicacin de HTML parece un poco vaga en este momento. Le guiaremos en el proceso de creacin de un sitio Web con HTML en el Bloc de notas o en WordPad posteriormente, en la leccin 6. Ver entonces que HTML resulta bastante ntido si avanza paso a paso. (Y, si desea algo ms de inspiracin, en otras lecciones averiguar que puede crear pginas Web sin saber nada de HTML.) En este momento, lo que necesita principalmente es reconocer la premisa bsica: las pginas Web son documentos de texto. Podra haber notado que aqu parece surgir una paradoja porque hemos afirmado categricamente que las pginas Web son documentos de texto. Y, si lo son por qu est el Web desbordado de grficos? Por suerte, en el Web puede usar los documentos de texto HTML junto con tipos concretos de archivos de grficos. Ms concretamente, el Web admite los archivos de grficos con las extensiones .gif, .jpeg y .png, pero vamos a ahorrarnos la explicacin de los formatos de archivos grficos para la leccin 3. Aqu tiene un adelanto. Para mostrar un grfico en una pgina Web, un documento HTML (de texto) incluye comandos que indican al explorador dnde encontrar un grfico en particular y cmo mostrarlo en la pgina (incluyendo la posicin, el tamao y dems). Por lo tanto, queda desvelada la naturaleza multiarchivo de las pginas Web. Generalmente, cuando mira una pgina Web en lnea, est viendo unos cuantos archivos: un archivo HTML (de texto) y algunos archivos grficos.

18

Prubelo!
Puede ver por s mismo cmo funciona HTML. En primer lugar, asegrese 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 Configuracin y, despus, haga clic en Panel de control). En el Panel de control, haga doble clic en Opciones de carpeta y, despus, haga clic en la ficha Ver. Desactive la casilla de verificacin Ocultar las extensiones de archivo para tipos de archivo conocidos y, despus, haga clic en Aceptar.

2 3

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 continuacin, muestre el escritorio, haga clic con el botn secundario del mouse en el archivo recin creado y seleccione Cambiar nombre. Reemplace la extensin .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 ningn estrago en este caso. Ahora, ya puede ver el documento en el explorador. Para ello, puede:
Hacer doble clic en el archivo HTML recin 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 versin pasada de la pgina 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 grficos (afs_title.gif y 4members.jpg). La figura 1-5 representa una vista de carpeta de Windows de los archivos usados para crear la pgina principal ilustrada en la figura 1-4. (Observe que la carpeta de Windows contiene los mismos archivos de grficos y HTML.)

19

Nota
Como probablemente sabr, una de las principales atracciones del Web es su naturaleza dinmica. Muchas pginas Web se actualizan y modifican con frecuencia. Para complementar nuestra explicacin, hemos congelado una copia de una de las pginas principales antiguas de Arizona Film Society en el sitio www.creationguide.com/afs (en ingls). Para ver el flujo de pginas Web en accin, visite la pgina Web actual en el sitio www.azfilmsociety.com y observe que se ha modificado. (De hecho, ha sufrido varias modificaciones desde que congelamos la pgina principal de ejemplo para esta leccin.)

Un poco ms de HTML
El texto y los comandos HTML usados para crear una pgina Web se conocen en conjunto como su cdigo fuente. (El cdigo fuente hace referencia al texto y a los comandos HTML usados para crear una pgina Web.) La mayor parte de los exploradores permiten mostrarlo. Por ejemplo, para mostrar cdigo fuente con Internet Explorer, debe elegir Cdigo fuente en el men Ver, como se muestra a continuacin:

20

Figura 1-4. Un archivo de texto HTML y dos archivos grficos se combinan para crear la pgina principal de Arizona Film Society (www.creationguide.com/afs) (en ingls).

Figura 1-5. La vista de las carpetas de la pgina principal de Arizona Film Society muestra que se combinan tres archivos para mostrar la pgina en lnea.

21

Cuando haya examinado las figuras 1-4 y 1-5, estar preparado para asimilar otro concepto bsico. Fundamentalmente, debe concluir esta explicacin con la informacin siguiente: Cuando observa una pgina Web en un explorador de Internet, normalmente est viendo varios archivos que se combinan para crear una nica pgina. Habiendo puesto a buen recaudo la idea de que una pgina Web consta de varios archivos, ahora debe considerar de forma consciente que una pgina Web no slo es un tipo de comunicado, como un panfleto de los que le dejan en el parabrisas. Por el contrario, una pgina Web siempre usa hipervnculos para vincularse a otras.

Hipervnculos y sitios Web

Tal como afirmamos al principio de esta leccin, suponemos que si desea crear una pgina Web es porque ha explorado el Web. Por lo tanto, es muy probable que haya hecho clic en numerosos hipervnculos. Como seguramente sabr, los hipervnculos son texto o grficos donde puede hacer clic y que permiten tener acceso a recursos de Internet y pginas Web adicionales. En un lenguaje ms tcnico, los hipervnculos son elementos que se incluyen en documentos HTML y que sealan a otras pginas Web o documentos de Internet (de forma similar a cmo los comandos HTML sealan a los archivos de grficos) o a otras reas de la misma pgina. En la figura 1-6 se ilustra el modo en que un par de hipervnculos de la pgina principal de Arizona Film Society sealan a otras pginas Web. Al hacer clic en un hipervnculo, se muestra otra rea de la pgina actual o de otra pgina Web, que puede ser cualquiera de Internet (y no slo una que usted haya creado), ubicada en cualquier parte del mundo. Como desarrollador de pginas Web, el uso de hipervnculos lleva de forma natural hacia la utilizacin de varias pginas Web. En general, normalmente preferir no colocar toda su informacin en una nica pgina principal grande y larga. En su lugar, es probable que desee crear una serie de pginas Web ms pequeas que se relacionen y vinculen entre s. Esta coleccin de pginas Web relacionadas conforma un sitio Web.

Jerga: los hipervnculos son texto o grficos donde se puede hacer clic para tener acceso a recursos adicionales en Internet, como otra ubicacin en la pgina Web actual, otra pgina Web u otro archivo que descargar.

22

Figura 1-6. Los hipervnculos llevan a quien est viendo la pgina Web a otras pginas Web, otras reas de la misma pgina u otros recursos de Internet.

De su cabeza al Web (y de vuelta otra vez)

En este punto de la leccin, todos los componentes estn sobre la mesa: Internet, el Web, exploradores, pginas Web, hipervnculos y sitios Web. Esta enumeracin de componentes es un buen comienzo, pero nos enfrentamos al pequeo detalle de cmo un archivo de texto y unos archivos grficos que ha creado en su equipo se convierten en una pgina Web en Internet. Antes de que nos adentremos demasiado hondo en los entresijos de la transferencia de pginas Web, vamos a desenmascarar un mito sorprendentemente popular: las personas que ven sus pginas Web tienen acceso a su equipo de escritorio. La afirmacin anterior no es verdad. Podemos asegurarle que las pginas 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 diseado para responder a las solicitudes de los clientes. Por supuesto, ahora hemos introducido el trmino cliente. Vamos a detener esta aproximacin indirecta y nos dedicaremos un momento a explicar esta jerga. Bsicamente, 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 diseo 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 combinacin de un equipo muy eficaz que almacena las pginas Web y el software que responde a las solicitudes para mostrar estas pginas Web almacenadas en l. Por lo tanto, cuando tiene acceso a una pgina Web, tiene lugar el proceso siguiente:
Jerga: URL son las siglas de Uniform Resource Locator. Una direccin URL hace referencia a una direccin de Internet que indica al explorador Web donde mirar en Internet para encontrar una pgina Web especfica.

Conecta su equipo a Internet y abre el explorador. A continuacin, especifica una direccin Web (URL) en la barra de direcciones y presiona Entrar, o hace clic en un hipervnculo de la pgina de inicio del explorador. El cliente (su explorador) enva la direccin URL escrita o la direccin URL asociada con un hipervnculo a travs de las lneas de telfono, los cables o, quizs, los enrutadores a su proveedor de servicios Internet (ISP, Internet Service Provider). El ISP es la compaa a la que paga para que le proporcione acceso a Internet. El ISP enva entonces su solicitud de direccin URL en Internet a travs de ms cables, enrutadores y otros circuitos de datos de alta velocidad al sistema (el servidor) que mantiene la pgina Web solicitada. El servidor enva la informacin de la pgina Web a travs de Internet al ISP y, finalmente, ste la reenva a su equipo.

Tenga en cuenta que esta leccin presenta una explicacin simplificada (aunque precisa) del proceso de recuperacin bsico de pginas Web.

Desde la perspectiva de un desarrollador de pginas 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 pgina Web se copian a travs de los hilos de Internet, como se describe posteriormente en este libro, en la leccin 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 publicacin en Web, el proceso de copia de los archivos de pginas 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 pgina Web publicada, estn teniendo acceso al servidor que almacena las copias de los archivos y no a su equipo.

24

Con esto concluye nuestro repaso de conceptos bsicos. En este momento, est preparado para seguir avanzando en el diseo y la implementacin de pginas Web, como se describe en las siguientes pginas de este libro. Pero antes de terminar esta leccin, nos gustara informarle de lo que va a encontrar en las siguientes lecciones.

Avanzando a un ritmo regular

Como podra sospechar, una gran parte del trabajo de creacin de una pgina 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 grficos, y adems de en idear el diseo de la pgina. Aunque el diseo de pginas Web es un proceso creativo, no es una magia negra desprovista de estructura. En el curso de este libro, vamos repasando unos cuantos principios bsicos que ayudarn a hacer el proceso de creacin de pginas Web ms sencillo. Nuestra pericia se deriva no slo de nuestros propios aos de experiencia en la red sino tambin de los numerosos estudios de utilizacin que muchos otros diseadores, ingenieros y especialistas de la informacin han realizado. Con estos recursos, hemos sacado algunas conclusiones bsicas acerca del texto, los grficos y los colores que se usan en el Web y que hemos probado en la prctica. Por lo tanto, las lecciones 2 a 5 tratan de la informacin que debera conocer acerca del diseo de pginas Web, incluidas cuestiones relacionadas con el texto, los grficos, los colores, programas tiles y planeamiento de pginas Web. Encontrar las siguientes lecciones repletas de informacin importante relativa a la creacin de pginas Web; si la utiliza bien, sus futuros trabajos de diseo Web sern ms fructferos. 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 leccin 8. La leccin 8 describe cmo pasar al mundo real sus pginas Web (si utiliza algn mtodo de publicacin de pginas Web que no sea MSN u otro servicio de alojamiento gratuito). Con todo, cuando complete estas lecciones, habr dominado los fundamentos de la creacin de pginas Web de diversas formas. Ya no se encoger cuando oiga expresiones como HTML y nombre de dominio, y sus conocimientos le servirn como una slida base que podr utilizar para crear una amplia variedad de pginas Web ms 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 pginas Web.

Las pginas Web ms bsicas constan de varios archivos: un archivo HTML (de texto) y archivos grficos. Un sitio Web es un grupo de pginas Web relacionadas.

Los hipervnculos proporcionan acceso a otras pginas Web, otras reas de la misma pgina u otros recursos de Internet. Internet usa el modelo cliente-servidor, en el que un servidor responde a las solicitudes de informacin de los clientes. Los usuarios de Internet tienen acceso a las pginas Web que se almacenan en servidores. Si puede utilizar un equipo, puede crear una pgina Web!

26

LECCIN 2

Creacin y forma del texto para el Web

Una vez completada esta leccin, podr:
Describir lo que hace que una pgina Web sea fcilmente ojeable. Identificar los elementos de texto claves de una pgina Web. Crear texto para el Web que sea claro, conciso y legible. Elegir varias tcnicas para usar la tipografa como un elemento de diseo. Cuando las personas contemplan la creacin de pginas Web, normalmente piensan en el diseo primero; es decir, en cmo se ver la pgina en lugar de lo que debera decir. Y eso es comprensible y tambin deseable. De hecho, una parte de este libro est dedicado al diseo de pginas Web. Pero, en el corazn de cada pgina Web, se encuentra el contenido. Despus de todo, la mayor parte de la gente crea pginas Web porque tiene un mensaje que desea compartir, incluso si simplemente proclama: Mirad lo que he estado haciendo ltimamente!. Para ser un xito, una pgina Web debe proporcionar informacin que capte rpidamente la atencin de quien la observa o, de lo contrario, no siga mirndola ms de un par de segundos y probablemente no vuelva al sitio donde se encuentra. Por lo tanto, debera empezar por pensar en el contenido de su pgina Web antes de llegar demasiado lejos en su diseo. Si sigue leyendo este texto, estar en camino de conseguir que el contenido de sus pginas Web tenga una estructura y correccin admirables al final de la leccin. Pero, incluso si no llega tan lejos en la creacin de contenido para un sitio Web en particular, podr identificar y crear buenos textos para el Web en general. Adems, sabr cmo puede sacar el mximo provecho del texto de las pginas Web que cree en el futuro. Con estos conocimientos en mente, podr combinar el contenido y el diseo con facilidad cuando empiece a crear sus pginas Web. Ahora, volvamos al tema que nos ocupa: el texto en lnea. Razonablemente, podra estar pensando que es bastante capaz de usar las palabras, as que en realidad no necesita leer acerca de los textos de pginas Web. Pero tenga la seguridad de que, incluso si su ocupacin es la de escritor, puede aprovechar las sugerencias de esta leccin. Aunque un buen texto en lnea tiene mucho en comn con uno impreso de similar calidad, tambin se diferencia de ste en diversas formas. Ver, a medida que avance en esta leccin, que la creacin de texto efectivo en lnea implica el dominio y combinacin de las artes de la claridad, la mercadotecnia, el atractivo visual, las limitaciones de la tecnologa y un pice de la psicologa del lector.

27

Aproximacin de los lectores a las pginas en lnea

El primer concepto que necesita abordar es que los lectores responden a las pginas Web de forma diferente a como reaccionan ante las pginas impresas. En los primeros estudios sobre esta materia, los entendidos en el Web encontraron que en leer un bloque de texto en lnea se tardaba aproximadamente un 25 por ciento ms que en leer el mismo texto en una pgina impresa. En otras palabras, en la cantidad de tiempo que emplea leyendo 75 palabras en lnea, podra leer 100 si estuvieran en un libro. Los expertos de ahora debaten sobre si la velocidad de lectura en lnea ha aumentado debido a la mejora en los monitores, al uso del color o a la familiaridad cada vez ms generalizada con este tipo de textos. Sin reparar en los porcentajes exactos, la mayora de expertos coincide en que la velocidad de lectura de las personas se reduce significativamente cuando leen texto en lnea, en comparacin con la lectura en papel, incluso aunque se est produciendo una mejora en muchos casos. Una de las formas de adaptacin desarrolladas para conseguir superar la lentitud de la lectura de texto en lnea es que ahora las personas suelen ojear el texto en lugar de leer cada palabra que se muestra en el monitor.
Como promedio, la mayor parte de los visitantes de una pgina Web determinan en 10 segundos si contiene la informacin que desean o necesitan. Si parece que satisface sus necesidades, la mayor parte siguen vindola menos de 30 segundos.

Bsicamente, un usuario ojea una pgina Web para encontrar un elemento de inters que le anime a hacer clic en un vnculo o a copiar el contenido y leerlo con ms detenimiento. Si una pgina Web no atrae a un usuario con rapidez (en los siguientes 10 segundos, segn la mayora de estudios de uso, probablemente se ir a otra pgina (o a otro sitio). La creacin de pginas que se pueden ojear con facilidad tambin incrementa la credibilidad de la pgina Web, al tiempo que aumentan sus posibilidades de clasificarse antes en los motores de bsqueda, ya que sus ideas principales son ms fciles de identificar. Por lo tanto, siempre que cree contenido para una pgina Web, tenga este concepto al frente de sus procesos mentales. En esta leccin, describimos diversos mtodos que puede emplear para mejorar la facilidad con que se pueden ojear sus pginas Web.

28

Para ilustrar el concepto de ojear, compare las figuras 2-1 y 2-2. La figura 2-1 muestra una pgina Web que no observa las prcticas recomendadas para la creacin de buen texto en lnea, mientras que la figura 2-2 sigue el consejo comentado en esta leccin. Observe la mayor rapidez con la que puede identificar los puntos principales del texto en la figura 2-2 en relacin a la figura 2-1. A continuacin se explica el porqu y se ofrecen indicaciones que puede tener en cuenta al crear su propio texto en lnea.

Figura 2-1. Una presentacin ineficaz de texto en un pgina Web puede desviar la atencin de los lectores antes de que lean una palabra del contenido.

29

Figura 2-2. Una presentacin efectiva del texto de una pgina Web hace posible que se ojee con ms rapidez, con lo que los lectores pueden encontrar la informacin que precisan ms fcilmente. Ahora que hemos expuesto un caso para hacerle pensar en su texto y reconocer cmo se aproximan los clientes a las pginas Web, vamos a echar un breve vistazo a las funciones fundamentales que desempea el texto en una pgina Web. A continuacin, discutiremos los detalles relativos a la forma y eficacia del texto en lnea.

30

Elementos de texto de una pgina Web

La mayor parte de las pginas Web usan diversos componentes de texto, segn se ilustra en la figura 2-3. Como puede observar en la figura, adems de en muchas pginas Web, en ellas aparecen los elementos de texto descritos en las subsecciones siguientes.

Figura 2-3. Las pginas Web efectivas contienen diversos elementos de texto comunes.

31

Barra de ttulo
Cuando crea una pgina Web, crea el texto que aparece en la barra de ttulo de la ventana de un explorador. La clave para el ttulo es que sea conciso, claro y til. Tenga en cuenta que, al abrir una pgina Web, el texto del ttulo de la misma tambin 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 ttulo 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 artculos iniciales (el, un, una) en el texto de la barra de ttulo de una pgina Web. El uso de ttulos conocidos y descriptivos contribuye a que las pginas destaquen en el rea de trabajo de los usuarios adems de en los resultados de los motores de bsqueda que organizan las pginas Web por el ttulo.

Contenido
El contenido de una pgina Web hace referencia a su sustancia: la razn por la que la gente visita el sitio. Como se describe en las secciones siguientes, el contenido de una pgina Web debe ser claro, breve, fcil de ojear, informativo, oportuno y gramaticalmente correcto (adems de tener otras cualidades). Tenga en cuenta que no importa lo bonito que sea un sitio Web, la caracterstica ms atractiva de Internet es el texto. Despus de todo, adems de visitar los sitios Web, unos cuantos cientos de millones de personas confan regularmente en el texto en lnea para enviar mensajes de correo electrnico, charlar con mensajera instantnea y exponer sus opiniones en grupos de discusin.

Sugerencia
Una forma de obtener el contenido de sus pginas 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 informacin 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 bsqueda que prefiera (a nosotros nos gusta www.google.es) y busque proveedores de contenido Web.

32

Hipervnculos
Observe que usamos las palabras vnculo e hipervnculo indistintamente.

Los hipervnculos proporcionan forma y claridad a un grupo de pginas Web (o a una pgina Web larga) al vincular la pgina principal, y las auxiliares, a reas que contienen informacin especfica relacionada. En otras palabras, los hipervnculos le ayudan a organizar su informacin y permiten que los dems tengan acceso a ella con rapidez y facilidad. Los hipervnculos de texto deben ser claros y coherentes, adems de estar colocados de forma apropiada, como se explica posteriormente en esta leccin.

Logotipos, texto grfico y WordArt

Jerga: texto grfico es un trmino general que hace referencia al texto que se usa para crear elementos grficos en las pginas Web, por ejemplo, botones, pancartas o ttulos estilizados. WordArt es una caracterstica de Microsoft Word que permite crear grficos 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 caracterstica WordArt de Word y, en la figura 2-3, el texto grfico Sign Up Today! es un elemento de WordArt.

Puede usar logotipos, texto grfico y WordArt para aportar una apariencia profesional a sus pginas Web. Como se explica en la leccin 3, puede usar texto grfico para conferir una apariencia y funcionamiento coherentes a un grupo de pginas 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 pgina a otra. Adems, los logotipos, el texto grfico y WordArt se usan con frecuencia para proporcionar un vnculo grfico afn a la pgina principal de un sitio. Puede que haya descubierto mientras explora el Web que, por lo general, puede hacer clic en el logotipo de una compaa para volver a la pgina principal del sitio. (Si an no ha descubierto este secreto, debera probarlo durante su prxima sesin en el Web.) Siempre que sea posible, aproveche esta prctica y vincule su logotipo con la pgina principal en todo el sitio Web.

Opciones de exploracin con texto

Muchos diseadores Web optan por dar formato a los elementos de exploracin (botones) y a la barra de mens slo como grficos (en la figura 2-3, los botones del rea superior izquierda actan esencialmente como barra de exploracin de la pgina principal). El uso de elementos grficos de exploracin es acertado, pero le recomendamos que tambin muestre sus hipervnculos de exploracin como texto simple conjuntamente con sus elementos grficos. Si el diseo de su pgina Web usa una barra de mens o botones grficos, puede evitar desbaratarlo si muestra hipervnculos de texto en la parte interior de la pantalla. Ofrecer una alternativa a los vnculos basados en grficos resulta til porque algunas personas desactivan las capacidades grficas del explorador para acelerar la descarga de pginas Web. Si no proporciona componentes de exploracin basados en texto, algunos usuarios podran no descubrir cmo llegar a las pginas secundarias de su sitio.

Sugerencia
Como sugerencia suplementaria, la adicin de vnculos de exploracin basados en texto al final de las pginas Web ayuda a los usuarios a ir a otras pginas del mismo sitio Web sin tener que desplazarse al principio

33

de la pgina actual para tener acceso a los vnculos principales de exploracin.

34

Informacin de fecha o de ltima modificacin

Generalmente, debe incluir un elemento de fecha en sus pginas Web. La fecha puede ser tan sosa como una pequea lnea de texto situada cerca de la parte inferior de la pgina. Sin embargo, si actualizar el contenido con regularidad es uno de los atractivos principales de su pgina, puede ser aconsejable que la fecha sea mucho ms aparente y colocarla ms alto, cerca del rea superior izquierda, ms 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, podra aparselas con una pgina esttica o dos.)

Informacin de copyright
Usted posee el copyright de todo el texto y los grficos originales que crea. Por lo tanto, para proteger su propiedad, debera agregar un aviso de copyright en sus pginas Web. Tenga en cuenta que si usa software que sea gratuito (por ejemplo, grficos sin copyright que haya descargado de otro sitio Web) en la pgina Web, es gratuito para todos los dems y pueden usarlo tambin.
Para crear en Microsoft Word, presione Ctrl+Alt+C.

Cuando agrega texto de copyright, la informacin puede ser tan sencilla como Copyright 2002 Su nombre o El nombre de su compaa. Todos los derechos reservados. Adems, la informacin de copyright se debe colocar cerca del final de la pgina y en un tamao de fuente que sea evidentemente menor que el del texto del cuerpo de la pgina Web. Ahora que hemos aludido a los elementos bsicos de texto de las pginas Web, ya puede dar forma al contenido y redactarlo.

Consideracin del texto como elemento de diseo

Como sabe, el texto de una pgina Web informa adems de aportar su presencia al diseo de conjunto de la misma. (Vea la figura 2-3.) Debe empezar a meditar sobre las cuestiones bsicas del diseo de texto mientras lo recopila. Por lo tanto, a medida que cree su contenido y lea la leccin 3, tenga en cuenta las siguientes cuestiones relacionadas con el diseo:
Cree ttulos y encabezados grficos para agregar un efecto artstico. Muestre citas y barras laterales para aligerar las pginas con mucho texto. Agregue WordArt, logotipos, texto grfico y pancartas para proporcionar una apariencia y funcionamiento coherentes en todo el sitio. Use iconos de fcil compresin en lugar de palabras, similares a los iconos nuevo y lo ltimo que salpican el Web.

35

Aplique juiciosamente el color u otro formato tipogrfico (como la negrita o la cursiva) para atraer la atencin hacia las palabras y conceptos importantes. Use letras capitales o iniciales altas (las primeras letras de mayor tamao en un prrafo) para indicar el principio de una seccin. Asegrese de que los fondos no interfieren con la legibilidad del texto. Incluya los datos importantes (como la informacin de contacto, el nombre de su compaa, etctera) como texto, incluso si la informacin aparece en forma de grfico en algn otro lugar de la pgina. Algunas personas desactivan la presentacin de grficos para acelerar la exploracin, lo que significa que pierden la informacin grfica de la pgina. Evite la letra pequeita; si duda, deje que los usuarios definan el tamao de texto con la configuracin predeterminada de su explorador. Use fuentes admitidas en la mayor parte de las plataformas y que sean fciles de leer. Actualmente, las fuentes ms 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 despus de todo lo dicho en esta leccin en relacin a lo que debe y no debe hacerse, nos gustara sugerir que se divierta con el contenido de su pgina Web. El Web le concede la libertad de comunicar la informacin de manera rpida y creativa en formas nuevas. Piense lo que desea decir con exactitud y escriba entonces su mensaje tan clara y enrgicamente como sea posible. Una vez que comience a escribir frases concisas y directas, estar bien encaminado.

Puntos clave
Los usuarios ojean las pginas Web en lugar de leerlas linealmente. Los ttulos, contenido, hipervnculos, logotipos, creaciones de WordArt, elementos grficos de texto, formatos, mens, opciones de exploracin, fechas de modificacin de la pgina e informacin de copyright representan los usos tpicos del texto de una pgina Web. El texto de una pgina Web atrae la atencin de los usuarios antes que los grficos. La informacin de las pginas Web debe imitar aproximadamente la tradicional pirmide invertida de la metodologa de redaccin de noticias.

36

Busque ideas para clarificar los puntos principales, encabezados y vnculos de su pgina Web. Escriba frases precisas y directas, y prrafos estructuralmente correctos y concisos. Haga que los encabezados e hipervnculos sean claros y descriptivos. Use listas con vietas y una jerarqua de encabezados para ayudar a los lectores a identificar con rapidez los puntos clave. Incluya la informacin importante en forma de texto para que puedan verla los usuarios que optan por no descargar los grficos del Web. Corrija, corrija y vuelva a corregir la ortografa (y no olvide imprimir y leer el texto en voz alta). Compruebe la gramtica.

Empiece a pensar en los elementos de diseo del texto, incluyendo el formato tipogrfico, el color y los elementos de texto grfico. Y, lo ms importante de todo, una vez que tenga en cuenta las posibilidades y limitaciones de la redaccin para el Web, deje que la experiencia de escribir sea un proceso creativo y agradable.

37

LECCIN 3

Creacin y utilizacin de arte en el Web

Una vez completada esta leccin, podr:
Comprender los fundamentos de los grficos Web. Ver y tratar grficos Web en un programa de grficos. Describir los diferentes tipos de formatos de archivos grficos. Elegir colores simplificados para el Web. Recortar una imagen grfica. En esta leccin, simplificamos el tema de los grficos Web. En un mundo perfecto, dedicaramos pginas y pginas a los matices del uso de grficos en el Web (principalmente porque nos gustan), pero entonces nunca llegara al resto de las lecciones. Tampoco deseamos que se sienta abrumado cuando tenga la oportunidad de usar grficos Web. Como tal vez haya descubierto, puede encontrar fcilmente una superabundancia de informacin acerca de grficos avanzados si mira en Internet o en cualquier librera. Afortunadamente, puede usar grficos Web de forma eficaz sin tener que sumergirse en la teora gamma y la rasterizacin. Por lo tanto, hemos optado por adoptar la solucin prctica de presentar lo que juzgamos que es la informacin ms significativa y fundamental acerca de los grficos para pginas Web. Piense en esta leccin como su curso de iniciacin personal en el arte Web. Cuando llegue a la seccin Puntos clave, al final de la leccin, 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 leccin 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 leccin 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.

38

Mecnica de los grficos Web

Antes de que empiece a ojear esta leccin para examinar las imgenes y desenterrar las direcciones de nuestros ejemplos en lnea, tenga en cuenta que realmente necesita leerla para asegurarse de entender unos cuantos conceptos clave relativos a los grficos Web. Como sabe, stos parecen bastante similares a los impresos pero, cuando se crean y utilizan imgenes en el Web, intervienen varios factores especficos de este medio. En concreto, los grficos en lnea requieren que considere las limitaciones del color y el formato y tamao de los archivos, adems de posibles cuestiones relacionadas con la transparencia, la descarga y la animacin. Cuando tome conciencia de los tres factores principales (colores, tipos de archivo y tamao de archivo), podr empezar a usar grficos en sus pginas Web y tener un punto de partida que le permita iniciar un estudio ms pormenorizado de los mismos. Por lo tanto, el plan de ataque general es colocar algunos conceptos bsicos de los grficos Web en una esquina craneana o dos antes de abrir su mente a las perspectivas ms creativas (y divertidas) de la utilizacin, recopilacin y creacin de grficos Web. Comencemos examinando el modo en que los grficos muestran el color.

Pxeles, paletas y colores

Jerga: un pxel es un cuadrado de una red de cientos de cuadrados que se colorea individualmente para crear una imagen.

Antes que nada, cada grfico en lnea consta de una serie de pequeos cuadrados coloreados que se entremezclan para formar una imagen. En cierto modo, los grficos en lnea simulan una tcnica de pintura denominada Puntillismo. El Puntillismo, introducido por el pintor francs Georges Seurat (18591891), es el arte de crear imgenes a base de puntos (o pequeos trazos del pincel). A travs del Puntillismo, Seurat divida cada imagen del lienzo en pequeos 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 informticos muestran las imgenes con una tcnica similar al Puntillismo, excepto en que, en lugar en puntos pintados, dividen las imgenes en cuadrados coloreados, denominados pxeles. Por ejemplo, eche un vistazo a las cerezas de la figura 3-1. Esta figura podra ser cualquier grfico que se muestre en su pantalla. Como puede ver, el grfico parece similar a muchas otras imgenes en lnea (o impresas, en este caso) y no hay signos obvios de puntos, cuadrados ni pxeles.

39

Figura 3-1. Una par de cerezas se presentan como grfico tpico. Ahora vamos a mirar el grfico un poco ms de cerca. En la carpeta de archivos de ejercicios de Lesson03 de este curso, busque el archivo cherries_photo.jpg y bralo en una aplicacin de edicin de grficos como Jasc Paint Shop Pro, Adobe Photoshop o Microsoft Paint. Si a continuacin ampla drsticamente la imagen, podr ver los tamaos reales (pxeles) que la conforman, segn se muestra en la figura 3-2. Si ampla las cerezas en el monitor, ver que los colores y formas de la imagen varan de un pxel a otro, o de un cuadrado a otro.

Sugerencia
Si no tiene una aplicacin de edicin de grficos en el sistema o si desea probar una completita de uso generalizado, visite el sitio www.jasc.com (en ingls) y descargue una versin gratuita de prueba de Paint Shop Pro. Hablaremos ms acerca de las aplicaciones de edicin de grficos ms adelante en esta leccin.

40

Figura 3-2. Cuando ampla una imagen en lnea, puede ver sus pxeles.

Prubelo!
Con el archivo cherries_photo.jpg abierto en el programa de grficos, ample la imagen con la opcin Zoom o Magnifying Glass (Ampliar) del programa. Para ilustrar mejor el funcionamiento de los pxeles, decremente gradualmente la vista de la imagen (o aleje la vista) hasta un tamao ms visible, segn se muestra aqu:

Si lo hace lentamente, puede ver cmo se mezclan los pxeles para crear una imagen ntida.

41

Jerga: una paleta contiene el conjunto de colores usados en un grfico.

Ahora que conoce los pxeles, podemos hablar un poco sobre paletas. Una paleta es, simplemente, la tabla de colores usados en un grfico. Algunos grficos Web (en concreto los guardados con el formato de archivo GIF, segn se describe en la seccin siguiente) usan una coleccin limitada de colores. Puede asignar una paleta a una imagen o puede dejar que el programa de grficos genere una automticamente a medida que crea y edita la imagen. Una paleta GIF puede contener hasta 256 colores pero algunas imgenes usan menos. Por ejemplo, si examina la figura 3-3, en el grfico de las cerezas se usan 8 colores mientras que en el de las guindillas se utilizan 128. Observe el tamao de las imgenes: el grfico de las cerezas tiene 3 KB (es muy pequeo) y el de las guindillas tiene 7 KB (casi tan pequeo como el grfico GIF de las cerezas).

Figura 3-3. La paleta del grfico de las cerezas contiene 8 colores y la de las guindillas contiene 128.

42

Jerga: en algunas aplicaciones de grficos Web y documentacin, tambin 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.

Generalmente, la mayor parte de las aplicaciones grficas permiten ver los colores incluidos en la paleta de un grfico GIF. Adems, puede reducir el tamao de una imagen GIF si reduce o limita el nmero de colores de su paleta. Y, como probablemente sabr, cuanto menor es el tamao de los archivos, ms rpida es su descarga en el Web.

Prubelo!
En la carpeta de archivos de ejercicios Lesson03 de este curso, busque el archivo cherries.gif o firebreath.gif y bralo en una aplicacin de edicin de grficos, 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, despus, seleccione Color Table (Tabla de colores). (Sabemos que cada paquete grfico tiene sus propias opciones de men; proporcionamos los dos comandos anteriores para darle una idea del tipo de comando que debera buscar en la aplicacin de grficos.) Como hemos mencionado, las paletas entran en escena cuando usamos imgenes GIF. Nos damos cuenta de que no hemos definido lo que son las imgenes GIF an, ni ningn otro formato de imagen que se admita en el Web. Sin embargo, ahora que ya ha tanteado la naturaleza de los pxeles y las paletas, avanzaremos y explicaremos los formatos de archivos de grficos que puede usar en el Web. Hablaremos ms acerca de las paletas cuando expliquemos las imgenes GIF ms adelante en esta leccin.

Formatos de archivos grficos

Como puede que recuerde, en la leccin 1 afirmamos que cada grfico de una pgina Web se almacena como archivo independiente. Para refrescar la memoria, vuelva de nuevo a la figura 1-4 de la leccin 1. Observe los nombres de los dos archivos de imgenes. El nombre del archivo de la figura de la barra de ttulo termina con la extensin .gif (afs_title.gif) y el de la otra figura termina con .jpg (4members.jpg). Las extensiones de archivos grficos 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 extensin .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 podra abrirlo en Excel (aunque puede que desee evitar los archivos que se llamen facturas). En relacin a los grficos Web, las pginas Web pueden incluir imgenes grficas que usen las extensiones de archivo .gif o .jpeg (o .jpg) porque los exploradores Web ms populares pueden mostrar los archivos GIF y JPEG.

43

Grficos GIF
Jerga: GIF (Graphics Interchange Format) es un formato de archivo grfico usado para crear imgenes y utilizarlas en Internet. Las imgenes GIF pueden contener hasta 256 colores.

Los grficos GIF constituyen el tipo de imagen que se admite en ms 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 ingls de Graphics Interchange Format (Formato de intercambio de grficos) CompuServe cre este formato en la dcada de los ochenta como un medio eficaz de transmitir imgenes a travs de las redes de datos. La principal ventaja del formato GIF es que las imgenes GIF suelen ser pequeas, lo que significa que se descargan y se muestran rpidamente. Como se ha mencionado anteriormente en esta leccin, las imgenes GIF usan y admiten paletas de hasta 256 colores (lo que los convierte en grficos de 8 bits). Puesto que admiten un nmero limitado de colores, debe usarlos para reas de colores bsicos, logotipos, lneas, iconos, ilustraciones de dibujos animados, botones, reglas horizontales, vietas, fondos y otros elementos grficos que requieran pocos colores. La figura 3-4 muestra algunos ejemplos de usos tpicos de imgenes GIF.

Figura 3-4. Las lneas, reglas horizontales, botones, vietas y texto grfico son algunos usos tpicos de los archivos GIF.

44

Adems de adaptarse a una paleta y ser pequeos y eficaces, los grficos GIF permiten realizar tres efectos especiales: el entrelazado, la transparencia y la animacin.
Si utiliza una conexin a Internet rpida, por ejemplo un mdem por cable, probablemente no ver los efectos del entrelazado.

Grficos 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 diseador de la pgina Web puede cambiar la forma en que un grfico GIF se descarga en el monitor si lo guarda como archivo GIF entrelazado. Un grfico GIF entrelazado se muestra en la pantalla del usuario borroso o dentado al principio y, despus, 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 ms lentas, puede ver cmo 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 tamao ligeramente mayor que las imgenes GIF convencionales (no entrelazadas). Por lo tanto, en los botones, iconos y grficos pequeos, es mejor utilizar el formato GIF convencional.
Grficos GIF transparentes Estos archivos (grficos GIF que usan el formato GIF89a) permiten disear iconos, logotipos y otros elementos que parecen estar recortados y, por lo tanto, posibilitan que el fondo de la pgina Web se vea a travs de ciertas zonas de la imagen. Por ejemplo, como puede ver a la derecha de la figura 3-6, el fondo se muestra a travs del GIF transparente para crear la ilusin de una imagen no rectangular.

45

Figura 3-6. Al comparar una imagen GIF estndar con una imagen GIF transparente se aprecia cmo permite la transparencia que el color de fondo de una pgina Web (o trama) se vea.
Si el color de fondo de un grfico GIF coincide con el de la pgina Web, por ejemplo en una imagen con un fondo blanco con una pgina Web tambin con el fondo blanco, se consigue automticamente la ilusin de transparencia.

Al crear un GIF transparente, bsicamente se especifica un color nico en la imagen para que acte como el color transparente. Por ejemplo, podra colorear el fondo de una imagen en rosa fuerte y asignar a continuacin este color como color transparente de la imagen; pero debe asegurarse de que el rosa fuerte no aparezca en ningn otro lugar en ella o crear puntos transparentes que no desea. Cuando un explorador encuentra el color transparente, no muestra ninguna informacin del grfico en el rea que tenga ese color, lo que permite ver el fondo de la pgina Web. Grficos GIF animados El ltimo truco de los GIF tiene que ver con la animacin. Mediante herramientas de animacin GIF y programas de edicin de grficos, puede crear capas de GIF y guardarlas en una pila para crear animaciones sencillas. Cuando un explorador muestra las imgenes GIF apiladas, presenta cada una detrs de la otra. Esta tcnica es similar al modo en que antiguamente se vea una pelcula pasando tarjetas, que era popular mucho antes de que la mayor parte de nosotros existiramos. 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 teora que subyace tras los GIF animados. Como ver posteriormente en esta leccin, puede descargar grficos GIF animados y herramientas de animacin de GIF en el Web.

46

Figura 3-7. Se puede mostrar una serie de imgenes GIF en sucesin para crear animaciones.

Sugerencia
Las imgenes prediseadas de Microsoft Office XP incluyen grficos GIF animados y transparentes que puede usar en sus pginas Web. Para identificar que una imagen prediseada es un GIF animado, busque una estrella dorada en la esquina inferior derecha de la imagen en miniatura, en la Galera multimedia. Para identificar que una imagen prediseada es un fondo transparente, busque elementos que parezcan estar recortados en la Galera multimedia. Puede probar la transparencia de una imagen si inserta la pgina en un documento de Word que tenga un fondo en color.

Colores simplificados para el Web

Jerga: interpolacin hace referencia al modelo de puntos aleatorio que resulta cuando los colores se intentan igualar mezclando otros similares disponibles en una paleta limitada.

Como sabe, todos los sistemas informticos no se crean igual. Muchas personas tardan bastante en seguir el vertiginoso ritmo que experimenta el desarrollo de hardware en el sector informtico. Por lo tanto, cuando disee pginas Web, debera tener en mente que no todas las personas podrn tener acceso a sus pginas si stas requieren el hardware de pantalla ms fantstico y novedoso. De hecho, aproximadamente el 10 por ciento de todos los usuarios que exploran el Web se limitan a ver las pginas Web en 256 colores (aunque muchos de los sistemas nuevos muestran millones de colores, as que el problema del diseo en 256 colores probablemente pronto ser una consideracin del pasado). Por lo tanto, durante el prximo par de aos, cuando disee pginas Web y cree imgenes GIF, podra 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 pgina Web usa colores que no sean los simplificados para el Web, los sistemas que slo admitan 256 colores recurrirn a interpolar aqullos que no sean estndar.

47

Para evitar la interpolacin, limtese a usar los 216 colores simplificados para el Web. (Los otros 40 que faltan hasta 256 se reservan para ser utilizados por el sistema informtico.) Si desea ver la paleta de colores simplificados para el Web, abra el archivo palette216.gif en un programa de grficos. Este archivo se encuentra en la carpeta Lesson03 de este curso, en el disco duro. Para ver los colores en formato de grfico, visite el sitio www.creationguide.com/colorchart (en ingls). Los programas de edicin de grficos suelen proporcionar una paleta simplificada para el Web que puede cargar cuando trabaje con imgenes GIF.

Grficos JPEG
Jerga: JPEG (Joint Photographic Experts Group) es un formato de archivo grfico usado para mostrar imgenes de calidad fotogrfica y otras imgenes en color en Internet. El formato de archivo JPEG puede admitir millones de colores.

Adems de los grficos GIF, sus pginas Web probablemente incluyan imgenes 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. (Tcnicamente hablando, las imgenes JPEG admiten colores de 24 bits, por lo que tambin se conocen como imgenes a todo color o de color verdadero.) Dado que los archivos JPEG pueden contener millones de colores, con frecuencia muestran imgenes fotogrficas en lnea. Al trabajar con grficos JPEG para sus pginas Web, puede especificar si desea guardarlos como JPEG estndar o progresivo:
Estndar Cuando guarda una imagen como archivo JPEG estndar, se carga lnea por lnea desde el principio de la pantalla hacia abajo, del mismo modo que se descargan los GIF de manera predeterminada.

Cuando una imagen JPEG se muestra en un sistema que slo 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 interpolacin.

Progresivo Cuando guarda una imagen como archivo JPEG progresivo, la imagen aparece primero de forma borrosa y, despus, se enfoca a medida que se descargan los datos de la misma (igual que los archivos GIF entrelazados). Con las rpidas velocidades de conexin a Internet, el procesamiento progresivo podra no ser evidente para los usuarios enseguida; en cambio, tras un momento, la imagen parecer emerger en la pgina. Segn nuestra experiencia, los archivos JPEG progresivos parecen crear archivos ms pequeos y se descargan ligeramente ms rpido que los archivos JPEG estndar.

Otro parmetro de configuracin del formato JPEG que puede usar para su provecho es la compresin. La compresin es un proceso que reduce el tamao del archivo de una imagen deshacindose de parte de la informacin del color. La compresin de JPEG se denomina esquema de compresin con prdida porque, una vez comprimida una imagen, la informacin eliminada se pierde. Por suerte, si tiene cuidado, las personas que vean la imagen en lnea no podrn percibir con facilidad la prdida de informacin.

48

Sugerencia
Al incrementar la compresin de una imagen JPEG, guarde siempre primero una copia de la imagen original. Despus, 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 compresin de JPEG, la informacin que se quita se pierde.

Tenga en cuenta que cuanto ms comprima una imagen, ms pequeo se volver el tamao del archivo de la imagen, pero la imagen resultante no ser tan ntida como otra menos comprimida. Por lo tanto, debe experimentar con varias configuraciones de compresin al configurar imgenes JPEG en las pginas Web. En este punto, los conceptos de archivos JPEG progresivos y comprimidos no le deben preocupar, pero an no hemos explicado cmo configurar estas opciones en una imagen JPEG. Afortunadamente, la mayor parte de los programas de edicin de imgenes hacen que la especificacin de parmetros en los archivos JPEG sea bastante sencilla. Para tener acceso a las opciones de configuracin 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 imgenes fruit.jpg provided para este curso que se encuentran en la carpeta Lesson03 del disco duro.) Elija Save As (Guardar como) en el men File (Archivo) para mostrar el cuadro de dilogo Save As (Guardar como). Especifique un nombre de archivo nuevo y, despus, haga clic en Options (Opciones) para tener acceso al cuadro de dilogo Save Options (Guardar opciones), que se muestra en la figura 3-8.

2 3

Figura 3-8. El cuadro de dilogo Save Options (Guardar opciones) permite configurar las opciones de compresin y procesamiento de JPEG en Paint Shop Pro.

49

Especifique una opcin de codificacin (Standard o Progressive, estndar o progresiva, respectivamente), seleccione una opcin de compresin, haga clic en OK (Aceptar) y, despus, haga clic en Save (Guardar).

Para configurar las opciones de JPEG en Photoshop, siga estos pasos:

1 2 3 Abra la imagen JPEG en Photoshop. Elija Save (Guardar) en el men File (Archivo). Especifique un nombre de archivo y haga clic en Save (Guardar). Se abre el cuadro de dilogo JPEG Options (Opciones de JPEG). Mueva el control deslizante Quality (Calidad) para especificar las opciones de compresin en el cuadro de dilogo JPEG Options (Opciones de JPEG) y haga clic en OK (Aceptar).

Grficos PNG
Jerga: PNG (Portable Network Graphics) es un formato de archivo grfico diseado para reemplazar a las imgenes GIF en Internet.

El tercer y ltimo tipo de grfico que trataremos en esta leccin es el formato de archivo PNG. PNG son las siglas en ingls de Portable Network Graphics, que significa grfico porttil de red. Al igual que los archivos GIF, los archivos PNG son pequeos, se cargan con rapidez y admiten la transparencia. Los archivos PNG se transmiten ms rpido que los GIF, pero slo los exploradores ms recientes permiten usarlos. Inicialmente, el formato de archivo PNG se ide porque Unisys, el fabricante del algoritmo de compresin de GIF, decidi hacer cumplir la patente para dicho algoritmo, lo que significa que los proveedores de software tenan 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 imgenes PNG, pero casi ningn diseador Web las usa en deferencia a los usuarios que exploran el Web con exploradores anteriores o menos avanzados tecnolgicamente. Por ello, quizs tampoco deba usar archivos PNG en sus pginas Web.

Nota
Internet Explorer para Microsoft Windows comenz a incorporar algunas imgenes 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 ms actualizados o ms avanzados desde el punto de vista tecnolgico. Desde la perspectiva de un desarrollador, no hay ninguna razn en este momento para arriesgarse a perder visitantes usando el formato de archivo PNG cuando el formato GIF est disponible, es igual de fcil de usar y se reconoce en casi todos los exploradores (con independencia de la versin).

50

Cuestiones de tamao
La ltima consideracin tcnica importante que abarcamos en esta leccin es el tamao 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 (ratn) con impaciencia mientras espera a ver las pginas que tardan ms de 10 segundos en mostrarse o, lo que es ms probable an, haciendo clic en algn otro lugar antes de que la pgina lenta llegue a verse completa alguna vez. Como diseador Web, necesita contener ese sentimiento de impaciencia. Cuando disee pginas Web y utilice arte Web, siempre debe tener un ojo en el diseo y el otro en la perspectiva del usuario. (Eso suena casi doloroso!) Al emplear arte Web, puede sacar provecho de ciertas tcnicas que le ayudarn a conseguir que el tamao de los archivos sea manejable. Ya hemos tratado algunos temas clave en esta leccin que pueden ayudar a reducir el tamao de los archivos y acelerar el tiempo de descarga, como son:
Evitar la interpolacin en imgenes GIF con colores simplificados para el Web siempre que sea posible, especialmente en reas grandes de colores bsicos. (Piense un poco: antes de leer esta leccin, esa frase no habra tenido ningn sentido para usted.) Configurar las imgenes JPEG para que se procesen de forma progresiva. Comprimir las imgenes JPEG para reducir el tamao de los archivos.

Adems de usar las tres tcnicas anteriores en relacin a los archivos grficos, puede controlar la velocidad de las descargas si cambia el tamao de las imgenes, las recorta y usa imgenes en miniatura. En las secciones siguientes describimos brevemente cada tcnica. Tenga en cuenta que la mecnica real que subyace tras la realizacin de ciertas tareas vara en funcin de las herramientas de edicin grfica.

Cambio de tamao de los grficos

Normalmente, deber asegurarse de que el botn de opcin Mantener relacin de aspecto (o el equivalente del programa de grficos que utilice) est activado al cambiar el tamao de los grficos o, de lo contrario, podra distorsionar las imgenes.

Una de las mejores formas de ahorrar tiempo de descarga es cambiar fsicamente el tamao de las imgenes en un editor de grficos. Observe que hablamos de cambiar el tamao de la imagen y no simplemente su visualizacin. Al acercar o alejar una imagen, se cambia la visualizacin de la misma pero ello no repercute en el tamao ni en las dimensiones reales del archivo. Intente que el tamao de las imgenes se aproxime al que desee utilizar para mostrarlas en la pgina Web. La figura 3-9 muestra el cuadro de dilogo Resize (Cambiar tamao) que se usa en Paint Shop Pro para cambiar el tamao de una imagen. Para tener acceso al cuadro de dilogo Resize (Cambiar tamao), abra la imagen y seleccione Resize en el men Image (Imagen).

51

Tenga en cuenta que las imgenes ms pequeas tienen un tamao de archivo menor, con lo que tardan menos en descargarse.

Figura 3-9. Cambiar el amao de las imgenes por el real en Paint Shop Pro ayuda a reducir el tiempo de descarga.

Prubelo!
Para experimentar con el cambio de tamao de las imgenes, abra una imagen JPEG en un editor de grficos y cambie la configuracin 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 continuacin, repita el proceso varias veces con diversas medidas, cambiando el nombre de cada versin por otro nico y significativo (como apples400a.jpg para una imagen cuyo tamao se haya cambiado a 400 pxeles de ancho). Una vez creadas algunas imgenes con varios tamaos, valas de forma local en la ventana del explorador, es decir, explore las figuras mediante la barra de herramientas de direccin del explorador o arrastre los iconos del nombre de archivo de las imgenes JPEG hasta la ventana del mismo.

52

Truco rpido: el tamao de las imgenes debe ser justo el adecuado

Cuando empiece a disear pginas Web por primera vez, quizs no sepa qu tamao deben tener las imgenes. Como ayuda para cambiar el tamao de un grfico por el que desee que tenga en la pgina Web, puede usar un programa de edicin Web, como Microsoft FrontPage. Con el objeto de determinar el tamao ptimo de un grfico Web, siga estos pasos:
1 Inserte el grfico en una pgina Web en blanco en FrontPage, por ejemplo, y arrastre los controladores de seleccin de la imagen para cambiar su tamao. Cuando la imagen tenga el tamao que desee, muestre sus propiedades (en FrontPage, haga clic con el botn secundario del mouse en el grfico y seleccione Picture Properties (Propiedades de imagen) en el men emergente), observe los parmetros de ancho y alto de la imagen, y antelos. Vuelva a abrir la imagen en el programa de edicin de grficos y cambie el tamao del grfico especificando los nmeros que copi en FrontPage (o en el programa de edicin Web que haya usado) en el cuadro de dilogo correspondiente. Por ejemplo, en Paint Shop Pro, para abrir el cuadro de dilogo Resize (Cambiar tamao), debe elegir Resize en el men Image (Imagen) y, en MS Paint, el cuadro de dilogo Attributes (Atributos) se abre al elegir Attributes en el men Image (Imagen).

Recorte de las imgenes

Jerga: recortar una imagen es eliminar una parte de la misma, por ejemplo, las porciones innecesarias de un grfico.

Adems de cambiar el tamao de una imagen, puede recortarla para reducir su tamao. 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 fotografa. Por ejemplo, podra 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 lneas de recorte (los guiones que rodean a la porcin de la imagen que desea conservar) en la imagen apples.jpg, que tiene un tamao de 50 KB, y el resultado de recortar la imagen apples.jpg. La versin recortada tiene 6 KB, nicamente.

53

Figura 3-10. Las marcas de recorte indican la porcin de una imagen que se va a usar como grfico Web. La imagen recortada slo contiene la informacin limitada por las marcas de recorte.

Prubelo!
Para recortar una imagen, siga estos pasos:
1 2 Abra una imagen en un editor de grficos. Haga clic en la herramienta de seleccin (que suele tener forma de rectngulo o cuadrado con guiones en la barra de herramientas de la aplicacin). Haga clic en la imagen y arrstrela para trazar el contorno del rea de la imagen que desee conservar. (Si se equivoca, presione la tecla Esc y vuelva a intentarlo.) Cuando tenga un rea seleccionada, elija Crop To Selection (Recortar la seleccin), en Paint Shop Pro, o Crop (Recortar), en Photoshop, en el men Image (Imagen) o seleccione un comando similar en su programa de edicin de grficos.

54

Uso de vistas en miniatura

Jerga: una vista en miniatura es una versin o una parte ms pequea de un grfico. Con frecuencia, en las pginas Web, los grficos en miniatura tienen hipervnculos a las versiones de mayor tamao de los mismos.

Cuando domine las artes que le permiten cambiar el tamao de las imgenes y recortarlas, estar en disposicin de usar vistas en miniatura. Una vista en miniatura es una imagen pequea 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 pgina, sus visitantes podrn optar por ver la imagen pequea y apaarse 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 opcin de descargar las imgenes grandes si estn dispuestos a soportar tiempos de descarga ms prolongados. El truco para usar vistas en miniatura es crear dos grficos con nombres diferentes. Normalmente, debe usar la misma imagen para ambos grficos y hacer que una sea pequea, y el tiempo que se tarda en descargarla es menor, mientras que la otra es ms grande (aunque lo mejor optimizada que se pueda, por supuesto) y su tiempo de descarga es ms largo. A continuacin, se muestra la imagen pequea en la pgina 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 porcin recortada del grfico vinculado. La figura 3-11 tambin presenta el grfico 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 versin de la imagen apples.jpg cuyo tamao puede modificarse.

55

Uso de fotografas
Probablemente, en su casa tendr, como mnimo, una caja llena de recursos de arte Web de primera clase: las fotografas. Puede usar tanto las nuevas como las antiguas con el fin de aportar arte a sus pginas Web. El truco es conseguir que la imagen impresa se convierta en informacin que pueda entender un equipo informtico. Para ello, puede usar alguna de las opciones siguientes:
Escneres Bsicamente, un escner toma una imagen de la fotografa y guarda informacin 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 grficos. Puede usar cualquier escner plano del mercado para crear grficos Web. No necesita conseguir la mejor mquina. Nosotros utilizamos escneres con un precio moderado para digitalizar la mayor parte de nuestras imgenes. Si no dispone de un escner y no piensa comprar ninguno, puede pagar para que le digitalicen sus imgenes. Por ejemplo, muchos centros de fotocopias tambin digitalizan las imgenes por un mdico precio. Servicios de revelado de pelculas y fotografa en lnea La prxima vez que deje un carrete para que lo revelen, compruebe los servicios adicionales que le ofrecen. Muchos servicios de revelado de pelculas adems de revelarlas pueden copiarlas en CD, exponer las imgenes en el Web, enviarlas a travs de correo electrnico, crear impresiones de calidad a partir de imgenes digitales y proporcionar otros numerosos servicios de procesamiento digital. Cmaras digitales Una tercera opcin para obtener imgenes fotogrficas es usar una cmara digital. Las cmaras digitales permiten tomar una fotografa e, instantneamente, enviar la imagen a un equipo. Si est pensando en comprar una cmara digital, a continuacin se enumeran algunas cuestiones que debera considerar: Costo Sepa cul es su presupuesto antes de comprar: la mayor parte de la gente no necesita la mejor cmara digital de la gama para hacer su trabajo. Pero, una vez dicho esto, no acepte el modelo del ao pasado slo por ahorrar algo de dinero. Los fabricantes estn respondiendo a la creciente demanda de cmaras digitales; por lo tanto, estn produciendo ms cmaras, con lo que se reduce el costo por unidad, y mejorando sus caractersticas. En consecuencia, comprar una cmara nueva en una tienda especializada con frecuencia puede dar mejor resultado que adquirir un modelo anterior en un almacn de saldos.

56

Jerga: un megapxel hace referencia a un milln de pxeles y es un trmino usado en relacin a la resolucin de dispositivos grficos, como los escneres, la cmaras digitales y los monitores.

Caractersticas Las caractersticas de una cmara digital son numerosas pero, si es usted principiante, compruebe que disponga tanto de automticas como manuales. Probablemente desee usar las opciones automticas al principio para llegar a dominar la fotografa digital. Despus, cuando se encuentre cmodo usando la cmara, puede empezar a experimentar con las configuraciones manuales. Adems, si compra la cmara slo con el fin de obtener imgenes para el Web, puede apaarse con una de 1 megapxel o menos, pero si desea poder usarlas en lnea y en copias impresas, podra intentar conseguir una cmara de 1 megapxel como mnimo, preferiblemente de 2 3 megapxeles, si puede elegir. Las cmaras con ms megapxeles crean mejores imgenes y le permiten imprimir fotografas de calidad a mayor tamao que el de una instantnea estndar. Finalmente, recuerde que las cmaras digitales son, bsicamente, PCs de mano. Si va a tomar imgenes en toda clase de circunstancias y condiciones, compruebe que elige una cmara que resista una tormenta. Si piensa practicar la fotografa en condiciones verdaderamente extremas, examine algunos de los modelos impermeables. Formato de los archivos Por ltimo, una cuestin importante que debe considerar cuando compra una cmara es determinar lo fcil que va a resultarle sacar las fotografas de ella y pasarlas a un equipo. Va a necesitar cables? Puede usar puertos infrarrojos? Almacena la cmara las imgenes en un CD? Compruebe que sabe cmo transfiere la cmara las imgenes y que le satisface el mtodo antes de comprarla.

Para finalizar, como ltimo consejo de esta leccin, independientemente de cmo y cundo obtenga los grficos para las pginas Web, recuerde optimizar las imgenes y guardarlas como archivos GIF y JPEG. Asegrese de que el tamao de los archivos de las imgenes es lo ms pequeo posible sin comprometer la calidad. Adems, almacene las imgenes en una ubicacin central en el disco duro y no olvide dar a cada grfico un nombre nico y significativo.

57

Puntos clave
Los grficos en lnea estn compuestos de pxeles. La mayor parte de los exploradores admiten imgenes GIF y JPEG.

Las imgenes GIF son pequeas, slo pueden usar una paleta de 256 colores y se descargan rpidamente. Los archivos GIF pueden ser entrelazados, transparentes o animados. Las imgenes JPEG pueden contener millones de colores y se suelen usar para mostrar fotografas. De forma predeterminada, los archivos GIF y JPEG se muestran lnea por lnea de arriba abajo, pero esto se puede cambiar si se crean imgenes GIF entrelazadas o archivos JPEG progresivos. El esquema de compresin de JPEG permite reducir el tamao de las imgenes JPEG, pero la compresin se realiza con prdida, por lo que debe efectuarla con cuidado (recuerde, cuanto ms comprima una imagen, menor calidad tendr). Cambie el tamao de los grficos en un programa de edicin para que sea lo ms pequeo posible. Recortar las imgenes reduce el tamao de los archivos.

Considere usar vistas en miniatura para vincularlas a grficos en lnea ms grandes. Los elementos grficos de las pginas Web incluyen fotografas, ilustraciones, botones, logotipos, iconos, vietas, reglas horizontales, texto grfico y fondos. Puede adquirir grficos Web en colecciones de imgenes prediseadas de CD-ROM, software gratuito en lnea, proveedores de grficos en lnea y diseadores grficos. Puede crear imgenes personalizadas con diversos programas de software y digitalizando dibujos realizados a mano. Las fotografas se pueden convertir en archivos de imagen en servicios de revelado y a travs de escneres y cmaras digitales.

58

LECCIN 4

Acopio de utensilios
Una vez completada esta leccin, podr:
Saber lo que va a necesitar para mostrar pginas Web en lnea. Buscar espacio para un sitio Web en un servidor en Internet. Elegir software para crear, modificar y tratar las pginas Web. Probar las pginas Web en varios exploradores. Cuando cree pginas Web, al menos deber tener un par de herramientas de creacin de pginas Web, probablemente ms. 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 informtico adems de, posiblemente, acceso a un escner, una impresora y una cmara (digital o estndar). En esta leccin, nuestro inters recae en la serie de programas que puede usar para crear, modificar y tratar pginas Web. Como le mostramos en las siguientes lecciones, puede crear, modificar y publicar pginas 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 ms bsicas que necesitar en su proceso de creacin Web: una conexin a Internet y espacio en un servidor.

Conexin a Internet y espacio en un servidor

No importa lo asombrosa que sea su pgina Web, vivir en el anonimato virtual si no puede conectarse a Internet y transferir sus archivos a un servidor. Recuerde de la leccin 1 que un servidor es un equipo muy eficaz que se conecta a las lneas de datos de la red troncal de Internet, almacena archivos de pginas Web y responde a las solicitudes de los usuarios para ver las pginas Web almacenadas. Debe estar conectado a Internet o tener acceso a una conexin a la gran red si desea demostrar su presencia en lnea. Es verdad que puede crear muchas pginas Web sin una conexin a Internet pero fallar en el intento cuando llegue el momento de publicarlas en lnea.

Sugerencia
Si usa su equipo para explorar el Web, puede tener la certeza de que dispone de una conexin a Internet. Con una conexin a Internet de acceso telefnico estndar, puede copiar los archivos de las pginas Web desde un equipo a un servidor que est conectado a Internet.

59

Adems de disponer de conexin a Internet como requisito bsico, 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) podra darle 30 MB, por ejemplo, de espacio gratuito en el servidor adems de su conexin a Internet. La nocin de espacio gratuito atrapa a muchos por sorpresa, pero existe y es una prctica en aumento en la red. No es de extraar, sin embargo, que encuentre beneficios en comprar espacio en un servidor adems de usar el gratuito.

Espacio gratuito en lnea

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 ningn software adicional ni cuentas de Internet de pago, slo precisa su texto y unas cuantas imgenes, 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 direccin Web larga y, posiblemente, a ciertas restricciones en las opciones del diseo de la pgina), pero, dependiendo de cul sea su objetivo ltimo, estas limitaciones podran no afectarle demasiado. As que considrese informado: hay espacio gratuito en el Web. Como mencionamos anteriormente, nos hemos encontrado con ms de una persona que se qued sinceramente impresionada al descubrir este hecho.
Jerga: un grupo o comunidad en lnea es un rea virtual en el Web donde las personas con intereses similares renen y comparten informacin.

La forma ms habitual de convertirse en el orgulloso propietario de una pgina Web gratuita es acudir a un grupo o comunidad en lnea. Una de las ventajas de esto, adems del factor de gratuidad, es que la mayor parte de los grupos y comunidades en lnea permiten la creacin de pginas Web proporcionando para ello plantillas o asistentes que puede usar. Entre los numerosos grupos y comunidades gratuitos, rpidamente 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/)

La mayor parte de las compaas que patrocinan los grupos y comunidades en lnea obtienen sus ganancias a travs de los anuncios, de la venta de actualizaciones y caractersticas, y de servicios complementarios.

Las desventajas principales de los grupos y comunidades en lnea son que su direccin Web suele ser bastante larga, generalmente se dispone de una cantidad limitada de espacio en el servidor, las opciones de diseo de pginas resultan, con frecuencia, algo restringidas o dirigidas, puede tener que tolerar anuncios emergentes cada vez que visite su pgina y, si no desea usar las plantillas de un grupo o comunidad, la personalizacin de la pgina puede resultar difcil en ocasiones.

60

De forma similar al uso de los grupos y comunidades en lnea, otra forma gratuita de conseguir un espacio en el Web es crear pginas especficas de un sitio. Al explorar Internet, puede encontrar que algunos sitios Web ofrecen espacio gratuito a los miembros registrados. Por ejemplo, puede crear una pgina Acerca de m en eBay (un sitio de subastas en lnea que se encuentra en www.es.ebay.com), si es uno de los participantes registrados en el sitio. El propsito de las pginas 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 lnea gratuito, que tcnicamente no es tal, es el que obtiene de su ISP. Puesto que lo ms 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 ms 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 admiracin que consegua 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 pgina Web, debe volver a visitar la clusula acerca del espacio gratuito en el servidor de su contrato con el ISP. Los ms probable es que encuentre que tiene en alguna parte entre 10 MB y 50 MB de espacio a su disposicin en un servidor.

Prubelo!
Para buscar espacio gratuito en el Web, escriba free Web space (o espacio gratuito en el Web) en cualquier motor de bsqueda; se le recompensar con un montn de sitios que le permiten alojar sus pginas. O bien, revise el sitio Web 100 Best Free Web Services en www.100best-free-web-space.com (en ingls). En este sitio se proporcionan exmenes 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 tambin podra emplearlo. El inconveniente es que probablemente tendr que convivir con una voluminosa direccin Web, similar a las de las comunidades y grupos en lnea. 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 mayora de las personas, estos formatos son un poco largos y no resultan fciles 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 lnea es que, generalmente, se tiene mayor libertad en relacin a la forma en que se crean y muestran las pginas (lo que podra ser un inconveniente si prefiere trabajar con las plantillas preconfiguradas que parecen ser una prctica estndar en numerosos sitios de comunidades en lnea). Con todo, la cuestin principal en relacin a los sitios gratuitos en lnea es que el espacio en el Web est a su disposicin de forma instantnea. Y, siempre que no tenga inconveniente en usar una direccin Web largusima para su pgina principal, sufrir ciertas limitaciones de diseo y, posiblemente, que aparezcan anuncios emergentes, entonces el espacio gratuito es una estupenda forma de iniciarse en el Web.

Adquisicin de espacio en un servidor

En contraposicin al uso de espacio gratuito en el Web, puede desembolsar algo de dinero para que una pgina Web use la direccin 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 direccin Web (como creationguide.com) y suscribirse a un proveedor que aloje (o almacene) sus pginas Web, a menos que vaya a poner en funcionamiento su propio servidor, pero ese tema es mejor dejarlo para libros ms avanzados. Echemos un vistazo al modo de registrar una direccin Web y obtener un servicio de alojamiento.

Registro de una direccin Web

Antes de seguir, vamos a concretar cierto vocabulario sencillo. Para ser ms precisos, en lugar de direccin Web, realmente deberamos decir nombre de dominio. Someramente (mucho), un nombre de dominio es una direccin Web. Como tal vez sepa, todas las direcciones Web son en realidad grupos de nmeros, denominados nmeros de Protocolo Internet (IP, Internet Protocol), que actan como direcciones de Internet. Siendo un humano, probablemente tambin sabr que, para la mayor parte de la gente, recordar un nombre con sentido es mucho ms fcil que recordar una serie de nmeros 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 nmeros (como 207.155.248.5). Por lo tanto, para que parezca que sabe lo que hace, debera usar el trmino nombre de dominio en lugar de direccin 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 algn 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 ms. Elegir y registrar un nombre de dominio Web es sencillo, una vez que tiene acceso a un sitio de registro legtimo. Afortunadamente, InterNIC (que se encuentra bajo el paraguas del Departamento de comercio de Estados Unidos) aloja una pgina Web que enumera todos los sitios Web de registro de nombres de dominio aceptables. Muchos sitios de alojamiento tambin ofrecen servicios de registro de nombres (como explicamos en la seccin siguiente). Para ver una lista oficial de registradores de nombres de dominio, visite www.internic.net/alpha.html (en ingls). 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 ingls, 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 crdito) y el sitio registra su dominio en InterNIC. El siguiente paso es buscar un ISP que aloje su nombre de dominio y sus pginas Web.

Bsqueda de espacio para un dominio

Si no utiliza su propio servidor, que es lo que hace la mayor parte de la gente, el prximo 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 (segn se describe en la seccin precedente). Puede encontrar numerosos servicios de alojamiento en lnea; escriba Web hosting (la forma inglesa de denominar al servicio de alojamiento de sitios Web) en cualquier motor de bsqueda y puede pasar un da de campo investigando a los diversos proveedores. O, mejor an, visite http://hostindex.com (en ingls), un extenso sitio dedicado a proporcionar informacin 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 ingls) para buscar vnculos a los servicios de alojamiento Web y registradores de nombres de dominio. Independientemente de cmo lleve a cabo la bsqueda de espacio para su sitio Web, recuerde comprobar algunas cuestiones clave, como son las cuotas, la configuracin de la red, si dispone de Extensiones de servidor de Microsoft FrontPage (si utiliza caractersticas de FrontPage) y la confiabilidad. Como promedio, los servicios bsicos de alojamiento Web cobran una cuota mensual nominal adems de otra cuota nica de configuracin (consulte el sitio Web de cada servicio de alojamiento para conocer los precios especficos). A menos que las tarifas le parezcan monstruosas, no deje que determinen su decisin.

63

Antes de firmar ningn contrato con un servicio de alojamiento de sitios Web, averige todos los aspectos relacionados con lo siguiente:
Ancho de banda Muchas compaas de servicios de alojamientoWeb se conectan a Internet mediante lneas T1 y T3; si no llegan a esto, bien podra elegir otra compaa. Bsicamente, una lnea T1 puede transportar hasta 1,5 megabits de datos por segundo mientras que una lnea T3 puede transportar 45 megabits por segundo. Por lo tanto, una conexin T3 proporciona mucho ms ancho de banda y permite una mayor velocidad. Adems de las conexiones a Internet, debe comprobar cuntos clientes se alojan en cada equipo. Si un servicio de alojamiento sobrecarga sus equipos, el rendimiento se ver afectado a pesar de las lneas de conexin de alta velocidad. Espacio Cuando se suscribe a los servicios de alojamiento Web, los ISP y las compaas 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 mayora de los ISP y servicios de alojamiento ofrecen ms espacio en sus servidores de lo que necesitar (al menos inicialmente). Sin embargo, debe conseguir 10 MB como mnimo. Muchos hosts proporcionan a partir de 25 MB. Soporte tcnico ste es un elemento importante en la eleccin de una compaa de alojamiento de sitios Web. Si tiene problemas, desear acudir a alguien que pueda ayudarle. La consideracin ms bsica sobre el soporte tcnico que debe tener en cuenta es el nmero de horas al da que el personal de este servicio est disponible. Muchos sitios lo ofrecen de forma ininterrumpida, as que busque esta caracterstica cuando est eliminando posibles compaas. Un soporte tcnico continuado es importante porque es muy probable que actualice sus pginas durante las horas que tenga libres, as que en ese momento es cuando seguramente ms ayuda necesite. Adems, 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 compaa ofrece el servicio, incluyendo los nmeros de telfono (mire si hay nmeros gratuitos), nmeros de fax, direcciones de correo electrnico, informes en lnea, listas de preguntas ms frecuentes y una direccin de correo disponible.

64

Extras Es posible que desee comprobar qu extras ofrece cada compaa para atraer clientes. Por ejemplo, muchos servicios de alojamiento Web proporcionan cuentas de correo electrnico 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 electrnico con un nico contrato de alojamiento Web. Otras caractersticas que podra 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 trfico, si visitan su sitio ms personas de lo previsto; si se admite el uso de Extensiones de servidor de FrontPage (si utiliza FrontPage) y de la transmisin de multimedia; y si se dispone de servicios complementarios, como la adicin de grupos de charla y caractersticas de bsqueda.

Ahora que ha estudiado su nombre de dominio, los servicios de alojamiento y las opciones bsicas de espacio Web, podemos quedarnos ms cerca de casa y hablar sobre las aplicaciones de escritorio. En la seccin siguiente, echaremos un vistazo a las aplicaciones de software que puede usar en su sistema para crear, modificar y publicar pginas Web, y sus elementos.

Herramientas de creacin de pginas Web

En esta seccin, damos una idea general de los tipos de herramientas que podra necesitar para crear pginas Web, enumeramos algunas que encontramos de utilidad y le sealamos el camino para hallar otras que se adapten mejor a sus necesidades. Como podra imaginar, gracias a la popularidad en auge del Web, muchos proveedores de software se han puesto manos a la obra para producir programas de creacin de pginas Web. En esta leccin, presentamos numerosas herramientas (pero de ningn modo nos acercamos a todas las utilidades disponibles) y en las lecciones siguientes mostramos cmo 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 ms cmodo. Para simplificar nuestro enfoque de esta leccin, hemos dividido las herramientas de desarrollo de pginas Web bsicas en las tres categoras principales siguientes:
Procesadores de texto y editores HTML Aplicaciones de grficos Utilidades FTP

65

Procesadores de texto y editores HTML

Sobre todo, cuando cree pginas 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 pginas Web. Puede trabajar con un editor bsico, en el que especifica el cdigo HTML de forma manual, o con uno ms avanzado del tipo WYSIWYG (siglas correspondientes a What You See Is What You Get, en ingls, que traducido es algo as como lo que ve es lo que consigue), que crea cdigo HTML de forma automtica mientras usted escribe el texto, inserta las imgenes y arrastra los elementos en una vista de diseo de pginas Web. Finalmente, y como caba esperar, algunas aplicaciones ponen un pie en ambos campos al calificarse como editores bsicos mejorados pero no tanto como las aplicaciones de edicin WYSIWYG (damos un repaso rpido a los tres tipos de editores en las siguientes pginas).

Sugerencia
Puede descargar muchas de las aplicaciones (o versiones de demostracin) mencionadas en esta leccin en sitios de shareware como www.tucows.com, www.shareware.com o www.download.com (los tres en ingls). La mxima del shareware podra ser prubelo antes de comprarlo. Cuando descarga un programa de shareware, lo prueba durante un tiempo de forma gratuita. Si le gusta, enva a su creador la cuota que le solicita. Por desgracia, en ocasiones es ms una estrategia mercantil que otra cosa.

Procesadores de texto y editores HTML bsicos

Si utiliza un procesador de texto bsico, debe escribir todos los comandos HTML y el texto de la pgina Web en un documento vaco. El ms bsico de los procesadores de texto de este tipo es la aplicacin 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 diseadores Web acuden al Bloc de notas cuando codifican a mano documentos HTML. Puede que se pregunte por qu los diseadores Web optaran por codificar manualmente las pginas Web. La respuesta vara pero, en su mayor parte, lo hacen por alguna de las razones siguiente:
Control La codificacin a mano permite usar los cdigos que se desea en lugar de los que inserta un editor WYSIWYG. Por ejemplo, puede que desee utilizar dos saltos de lnea en blanco pero un editor WYSIWYG podra insertar un marcador de prrafo. Adems, algunos editores WYSIWIG crean cdigo confuso; la codificacin a mano puede mantener el cdigo ordenado y fcil de leer, y su alineacin se puede configurar segn las preferencias del diseador. Correcciones rpidas Saber cmo crear y modificar manualmente cdigo HTML permite a los diseadores Web hacer cambios en una pgina Web con rapidez, con independencia de cmo 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 tardara simplemente en abrir la pgina en un editor WYSIWYG.

67

Limpieza del cdigo Muchos editores HTML avanzados (como se explica ms adelante en esta leccin) agregan cdigo adicional a los documentos. Si sabe cmo crear y modificar cdigo HTML estndar, puede limpiar al cdigo extra y reducir el tamao de los archivos HTML. Y recuerde: en el Web, el tamao importa y cuanto ms pequeo mejor. Adems, puesto que los editores HTML slo estn diseados por personas, a veces, pueden codificar mal las pginas. En estos casos, puede ahorrarse mucho tiempo e irritaciones si cambia el cdigo HTML directamente en lugar de seguir la pista a la opcin del cuadro de dilogo apropiado del editor HTML. Precisin Otro hbito 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 cdigo 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 pginas en un procesador de texto. En la leccin 6, le guiamos en la utilizacin de HTML con el fin de crear una pgina Web para que se haga una idea del formato HTML. (No se preocupe: puede hacerlo.) Sin embargo, esa leccin slo es una introduccin. 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 coleccin de libros sobre dicho tema ocupando las estanteras de las libreras de su ciudad. Tambin puede encontrar pginas y pginas de informacin en lnea. (Hemos hecho una lista de algunas referencias de HTML al final de la leccin 6.) Los procesadores de texto pueden variar desde los que apenas le echan una mano a los que vienen totalmente equipados con caractersticas personalizadas especficas de HTML. Como ayuda para ilustrar la variedad, hemos proporcionado una breve descripcin de algunos de los ms usados en este momento:
BBEdit (www.barebones.com/products/bbedit.html) (en ingls) 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 caractersticas con diversos fines adems de otras desarrolladas especficamente para satisfacer las necesidades de los creadores de cdigo HTML. HomeSite (www.macromedia.com/software/homesite) (en ingls) Macromedia HomeSite es una herramienta de diseo de cdigo HTML muy usada entre diversos desarrolladores profesionales de sitios Web. Este editor de texto incluye caractersticas especficas de HTML que sirven de ayuda en la creacin de pginas HTML efectivas y claras. Por ejemplo, incluye caractersticas de inspeccin de etiquetas HTML, edicin en ventanas divididas, mapas de imgenes y algunas otras funcionalidades. Puede descargar una versin de prueba de 30 das 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 ms largos, tendr que usar WordPad (que se describe ms adelante en esta lista). NoteTab (www.notetab.com) (en ingls) El procesador de textos NoteTab, de Fookes Software, es el Bloc de notas con esteroides (fortalecido, queremos decir). Este programa incluye varias caractersticas que pueden simplificar la codificacin a mano de pginas Web. Por ejemplo, puede mostrar utilidades HTML en el lateral izquierdo del panel de la ventana en la barra de clips. A continuacin, puede insertar cdigo HTML haciendo doble clic en los elementos de mens y, por ejemplo, puede hacer clic en el elemento de men Nueva pgina Web para insertar la estructura bsica del cdigo para todo un documento HTML. Un inconveniente, tpico de muchos procesadores de texto, es que el programa gratuito de prueba slo permite deshacer una operacin; si desea deshacer varias acciones, tendr que restaurar la informacin manualmente. TextPad (www.textpad.com) (en ingls) Este programa, creado por Helios Software Solutions, sirve como otra versin 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 prctico cuando se juega con HTML. UltraEdit (www.ultraedit.com) (en ingls) IDM Computer Solutions proporciona este programa como paquete de edicin de texto que se puede usar durante un perodo de prueba de 45 das. Una vez descargada e instalada la aplicacin, debe hacer clic en About UltraEdit (Acerca de UltraEdit) en el men Help (Ayuda) y, despus, cerrar la ventana Help para activar el programa. Aunque esta aplicacin est diseada para usuarios algo avanzados, como los programadores, incluye caractersticas que podran venirle bien. Por ejemplo, puede mostrar vistas previas de las pginas en el explorador con facilidad y usar el diccionario que le acompaa para corregir la ortografa de los documentos. WordPad Este programa es un paso ms all del Bloc de notas. Si utiliza Windows, puede abrir WordPad si hace clic en Inicio, selecciona Programas y Accesorios, y despus hace clic en WordPad. Este programa ofrece ms caractersticas de procesamiento de textos que el Bloc de notas y admite documentos ms 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.

Prubelo!
Muestre la pgina Web que prefiera en un explorador y haga clic en Source (Cdigo fuente) o View Source (Ver cdigo fuente) en el men View (Ver). Se abre un documento del Bloc de notas que muestra una versin de texto del cdigo HTML de la pgina.
Al igual que Word versin 2002, otros programas de Office XP (versin 2002), como Microsoft Excel y Microsoft PowerPoint, permiten guardar los documentos como pginas Web.

Procesadores de texto y editores HTML de grado medio

El siguiente escalafn en los editores HTML empieza a entrar en el territorio de WYSIWYG. Podramos llamar a los procesadores de texto de grado medio aplicaciones WYSIWYG ligeras porque ofrecen caractersticas 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, slo aconsejamos una aplicacin de esta categora: Microsoft Word versin 2002. Word 2002 permite usar una interfaz de procesamiento de texto conocida para crear documentos HTML a travs del comando Guardar como. Cuando guarda un documento de Word como pgina Web, Word crea automticamente el cdigo fuente HTML. En la figura 4-3 se ilustra un documento HTML en las vistas Diseo Web y Cdigo fuente HTML.

70

Figura 4-3. Word 2002 ofrece una vista Diseo Web y otra vista Cdigo fuente HTML.

Editores HTML avanzados

El tercer grupo de editores HTML incluye las aplicaciones avanzadas que permiten crear y modificar pginas Web mediante interfaces grficas. En la mayor parte de los editores avanzados, puede ver y modificar el cdigo fuente HTML directamente adems de trabajar en la interfaz WYSIWYG. Asimismo, la mayora de los editores avanzados ofrecen una caracterstica de presentacin de vista previa que permite ver cmo aparecer una pgina Web en lnea antes de verla en el explorador. Las caractersticas especficas para el Web se suelen incorporar tambin en los editores HTML avanzados. (Sabemos que esto ltimo suena un poco impreciso, pero al crear una pgina Web en FrontPage, en la leccin 7, le introduciremos en el uso de algunas herramientas especficas para el Web de modo que podr saber a lo que nos referimos.) Los editores HTML avanzados ms utilizados estn muy bien documentados en lnea as que, en lugar de desperdiciar espacio en estas pginas resumiendo las estadsticas en lnea, 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 ms populares. (Revise la direccin del sitio Web de cada producto para poder comparar ms fcilmente las caractersticas y precios.)
Adobe GoLive (www.adobe.es/products/golive/main.html) CoffeeCup HTML Editor (coffeecup.com/editor) (en ingls)

HotDog Professional (http://www.sausage.com/hotdogprofessional.html) (en ingls) UltraEdit (www.ultraedit.com) (en ingls); este editor puede estar disponible en su versin localizada Macromedia Dreamweaver (www.macromedia.com/es/software/dreamweaver)

71

Microsoft FrontPage 2002 (www.microsoft.com/spain/Office/frontpage/default.asp); tambin se incluye con el conjunto de programas Microsoft Office 2000 XP Developer NetObjects Fusion MX (www.netobjects.com/products/html/nfmx.html) (en ingls)

Nota
Adems de HotDog Professional, Sausage Software ofrece un editor HTML WYSIWYG para principiantes, denominado HotDog PageWiz, y un editor HTML para nios mayores de seis aos, denominado HotDog Junior. Explore la pgina principal de Sausage Software y encontrar otras herramientas tiles de creacin de pginas Web. Despus de todo, si nos pregunta, cualquier compaa llamada Sausage Software (Software Salchicha) que ofrezca editores HTML que se llamen HotDog (Perrito caliente) merece un poco de atencin adicional.

Entre las aplicaciones anteriores, Dreamweaver probablemente sea el editor Web ms popular (aunque el ms difcil de aprender) entre los profesionales de diseo, por diversas razones, como es el hecho de que mantiene el cdigo escrito a mano, permite a los usuarios obtener una vista previa de las pginas en varios exploradores y realiza comprobaciones automticas 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 ms sencillo de aprender para los principiantes y proporciona cdigo HTML bastante limpio. Adems, es popular entre los usuarios empresariales. Como hemos mencionado anteriormente, se har una idea de cmo crear pginas Web en FrontPage en la leccin 7.

Nota
Tenga en cuenta que el entorno de creacin de una pgina Web no es fijo. En ocasiones, es ms rpido usar una aplicacin WYSIWYG avanzada (en especial, al cambiar el tamao de las tablas), pero otras veces, un cambio rpido en el Bloc de notas nos ser ms til.

72

Figura 4-4. Microsoft FrontPage es un programa avanzado de desarrollo Web muy utilizado, que resulta bastante fcil de aprender.

Aplicaciones de grficos
Cuando se trata de desarrollar una pgina Web, las aplicaciones de grficos ocupan un segundo meritoso lugar detrs de los muy importantes editores HTML o procesadores de texto. Despus de todo, la mayor parte de las pginas usa grficos y tendr que crear o retocar los que incluya en las suyas. Por lo tanto, necesitar tener un paquete de grficos instalado en su sistema. Nuestros programas favoritos (o al menos los que parece que usamos con ms frecuencia) son Jasc Paint Shop Pro y Adobe Photoshop; ambos aparecen en la lista de aplicaciones de grficos con la que est a punto de toparse a continuacin del prrafo siguiente.

73

Con independencia del paquete de grficos que utilice, las cinco habilidades ms importantes que tiene que adquirir al usar un programa de grficos son recortar, cortar, cambiar el tamao, cambiar el color y guardar los archivos en otro formato diferente. Por tanto, revise los archivos de ayuda de su aplicacin para pulir su tcnica. Ahora, aqu tiene cinco programas de grficos 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 aplicacin es fcil de usar y especialmente cmoda cuanto se necesita crear botones y otros grficos bsicos para un sitio Web. Macromedia desarroll Fireworks especficamente para la creacin de grficos Web. LView Pro (www.lview.com/index1024.htm) (en ingls) Este programa de grficos shareware es muy conocido. Incluye varias caractersticas tpicas de grficos adems de utilidades de pginas Web, por ejemplo, una herramienta para crear pginas de galeras de fotografas en lnea. Paint Microsoft Paint es un programa de grficos que se incluye con Windows. Se trata de un paquete de grficos con menos funciones en comparacin con otros pero resulta una herramienta grfica prctica cuando se est en un apuro o se desea hacer rpidamente algunos ajustes poco importantes. Paint Shop Pro (www.jasc.com/products/paintshoppro) (en ingls) Este programa de grficos tiene muchas caractersticas y un precio razonable, y lo utilizan muchos diseadores. Visite el sitio Web de Jasc y descargue un programa de demostracin gratuito. Photoshop (www.adobe.es/products/photoshop/main.html) Probablemente sea el programa de edicin de imgenes ms importante. Puede resultarle un poco difcil de utilizar cuando empiece a aprenderlo pero una vez que domine los comandos, le gustar mucho la flexibilidad de la aplicacin. Con frecuencia, imitamos los sitios donde se usa Photoshop antes de crear pginas Web reales en un editor HTML. Su principal desventaja es que es bastante caro para los diseadores casuales.
Jerga: los grficos basados en vectores son imgenes hechas con lneas y formas en lugar de con pxeles y sombras.

Adems de las aplicaciones de grficos anteriores, tambin puede usar programas de ilustraciones para crear grficos basados en vectores. En un grfico basado en un vector, puede mover, cambiar el tamao 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 prcticos al crear pginas 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).

74

Prubelo!
Si desea incluir un GIF animado en una pgina Web pero no le entusiasma la idea de comenzar desde el principio, se alegrar de or que el CD-ROM de multimedia de Office XP contiene varias animaciones pequeas que puede usar en las pginas Web. Para insertar un GIF animado:
1 2 Abra Word (u otra aplicacin de Office), muestre el men Insertar, elija Imagen y, despus, haga clic en Galera de imgenes. En el panel de Galera de imgenes, busque un elemento de la galera y haga doble clic en alguna imagen que muestre una estrella dorada. Para ver una animacin en accin, abra el men Archivo y haga clic en Vista previa de pginas Web.

Si sigue nuestra sugerencia anterior, debera insertar los componentes animados con moderacin. Las animaciones pueden llegar a resultar molestas, lo que quitara mrito a su pgina en lugar de aportarle encanto.

Programas de animacin de grficos GIF, de mapas de imgenes, de creacin de pancartas y mucho ms

Las pginas Web incorporan todo tipo de baratijas, incluidos elementos desarrollados con tecnologas muy sonoras como Pginas Active Server, Java, Flash, etctera. Adems, puede crear archivos de audio y vdeo para usarlos en el Web. Aunque nos fascinan tanto estos temas como las tcnicas de diseo de pginas Web bsicas, la creacin de estos elementos no es uno de los objetivos de estas lecciones. Nuestro fin es lograr que consiga crear y utilizar pginas Web. Por lo tanto, nos guardaremos los caprichos para otro curso. Si tiene ganas de adquirir algunas maas adicionales para la elaboracin de sus pginas, le sugerimos que empiece por aprender a crear GIF animados, mapas de imgenes y pancartas. A continuacin se enumeran algunos sitios que puede encontrar de utilidad:
l

Tenga en cuenta que puede encontrar un buen nmero de programas de creacin de archivos GIF animados, de pancartas y de mapas de imgenes en lnea. Adems, algunos de los programas de grficos que mencionamos anteriormente en esta leccin (como Fireworks y Paint Shop Pro) tienen integradas caractersticas de mapas de imgenes e imgenes GIF animadas. Las tres

75

aplicaciones anteriores se enumeran simplemente como ejemplos que pueden ayudarle a comenzar su bsqueda.

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 mencin a las siglas FTP ante personas que nunca las haban odo antes, el color parece huir de su cara. Bsicamente, las utilidades FTP son programas que permiten copiar archivos enteros de un equipo a otro a travs de Internet. Por ejemplo, siempre que completamos una leccin, copiamos con FTP sus grficos 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 pgina Web en un grupo o comunidad en lnea. Asimismo, si usa el Asistente para la publicacin en Web de Microsoft, Mis sitios de red o una utilidad de publicacin de un editor HTML avanzado con el fin de cargar las pginas, no tendr que usar un programa FTP en principio. Sin embargo, finalmente podra desear usarlo para eliminar, copiar y administrar de cualquier otra forma los archivos en lnea. En la leccin 8, le ponemos al corriente de los detalles de la administracin de archivos en lnea, porque sentirse cmodo usando una aplicacin FTP puede resultarle prctico.

Puede encontrar numerosos programas FTP en lnea, muchos de los cuales son aplicaciones shareware. Los programas FTP ms usados son, entre otros:
BulletProof FTP (www.bpftp.com) (en ingls) Esta aplicacin proporciona una intuitiva interfaz con la funcionalidad de arrastrar y colocar, al igual que otros de los programas FTP ms usados.

76

CoffeeCup Direct FTP (www.coffeecup.com/software) (en ingls) Este programa sirve como aplicacin FTP que tambin permite la edicin de pginas HTML en lnea. En la pgina de descargas del sitio, encontrar que CoffeeCup Software tambin proporciona aplicaciones de mapas de imgenes, creacin de botones y creacin de GIF animados, entre otros productos. CuteFTP (www.globalscape.com/cuteftp) (en ingls) Esta popular aplicacin FTP de fcil uso lleva mucho tiempo utilizndose 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 tambin ofrece un editor HTML (CuteHTML) y una aplicacin de mapas de imgenes (CuteMAP). Fetch (www.fetchsoftworks.com) (en ingls) Recientemente, Fetch se ha actualizado con la versin 4.0.2 (antes, llevaba sin actualizarse desde 1997!). El diseo de Fetch est enfocado a hacer que el acceso a los sitios FTP sea lo ms sencillo posible. Est disponible gratuitamente para instituciones educativas y organizaciones sin nimo de lucro; los dems 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 aplicacin FTP y podr cargar sus pginas en cuanto las cree, pero no tiene que hacerlo ahora. Le ayudaremos con los programas FTP y con la administracin de los archivos en la leccin 8. Pero antes, deseamos ocuparnos de cosas ms divertidas en el resto de las lecciones.

Un poco acerca de exploradores

Dos procesadores (o incluso dos versiones de un explorador) no procesan el cdigo HTML exactamente del mismo modo; por lo tanto, al disear pginas Web, valas en tantos exploradores como sea posible antes de publicar el sitio.

Estaramos completamente perdidos si concluyramos esta leccin sin ocuparnos de la herramienta de aplicacin de software ms obvia de todas: un explorador. Necesita tener un explorador (o varios) instalado para poder obtener una vista previa de sus pginas antes de publicarlas en lnea. Recuerde que los exploradores son las aplicaciones que interpretan las pginas HTML. Por desgracia, no todos lo hacen exactamente de la misma forma. En consecuencia, una pgina que disee y vea en Microsoft Internet Explorer podra mostrarse muy fcilmente como un revoltijo espantoso en otro explorador. Incluso las pginas bien diseadas parecen algo diferentes en distintos exploradores. Para ver una ilustracin de este fenmeno, observe las diversas capturas de pantalla de la figura 4-5.

77

En la figura 4-5, puede ver las anomalas siguientes:

Las vietas 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 mrgenes (o desplazamiento) alrededor de los permetros de la pgina vara en cada explorador. Observe que las ventanas del explorador Internet Explorer dejan ms espacio de margen alrededor del grfico de la parte superior izquierda que las ventanas del explorador Navigator.

Figura 4-5. Al ver la misma pgina Web en varios exploradores, se demuestran las pequeas anomalas que surgen en las pginas cuando se ven en lnea.
El tamao de fuente predeterminado es ms pequeo 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 pgina Web aparecen cantidades variables de informacin. El ancho de las ventanas de los exploradores difiere. Observe cmo abarca el grfico de la barra de ttulo toda la ventana en un par de casos y cmo aparece con un espacio en blanco adicional en los dems.

78

Diseamos la pgina 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 diseador. En el Web existen varios exploradores. Puede que desee o no comprobar que sus pginas se muestran como deben en todos ellos. Para la mayor parte de los diseadores, con asegurarse de que las pginas se muestran de modo correcto en los ms importantes (Internet Explorer y Navigator) es suficiente; conjuntamente, estos dos exploradores suman ms 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, sera mejor que se asegurara de si ve bien en l. Para contribuir a aumentar sus conocimientos, a continuacin incluimos una lista breve de otros exploradores que puede encontrar al acecho en el Web:
America Online usa una versin adaptada de Internet Explorer (webmaster.info.aol.com) (en ingls). Lynx es un explorador de texto (lynx.isc.org/current) (en ingls).

Mozilla es un explorador Web diseado para quienes desean crear productos y paquetes basados en Mozilla (una gran parte del explorador Netscape Communicator se basa en el cdigo de Mozilla), pero el pblico general puede usar el explorador tambin (www.mozilla.org) (en ingls). Opera es una pequea aplicacin que exhibe un tiempo de descarga extremadamente bajo (www.opera.com/download), (en ingls).

Puede ser aconsejable descargar otros exploradores para ver cmo se muestran sus pginas en ellos. Obtener una vista previa de las pginas Web simplemente implica mostrar los archivos HTML en la ventana del explorador de forma local, as que el proceso es rpido y sencillo. Sin embargo, lo ms importante es que se asegure de tener acceso al menos a una versin (para PC o Macintosh) de Internet Explorer y de Navigator de modo que pueda realizar pruebas y ver cmo quedan las pginas. No se preocupe: en los siguientes captulos le recordaremos algunas veces ms la importancia de ver las pginas Web en varios exploradores y en varias versiones de cada explorador, si es posible.

79

Puntos clave
Necesita una conexin a Internet y espacio en un servidor para mostrar una pgina Web en lnea. Averiguar que hay espacio gratuito disponible en lnea en el Web, particularmente en los grupos y comunidades en lnea. Puede adquirir un nombre de dominio y comprar espacio en un servidor para controlar por completo su sitio Web y direccin Web. Puede utilizar procesadores de texto para crear pginas Web.

Los editores HTML abarcan desde programas que slo usan texto a interfaces WYSIWYG. Las aplicaciones de grficos permiten crear grficos Web, modificar imgenes y crear maquetas de las futuras pginas Web. Puede encontrar programas de animaciones de grficos GIF, sitios de creacin de pancartas y utilidades de mapas de imgenes (adems 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 estn diseados igual: pueden mostrar la misma pgina Web de diversas formas. Siempre debe ver sus pginas Web en Internet Explorer y en Netscape Navigator (como mnimo) antes de publicarlas en lnea.

80

LECCIN 5

Plan de ataque
Una vez completada esta leccin, podr:
Definir los objetivos de un sitio Web. Analizar la audiencia. Crear un a plano tcnico de un sitio Web. Disear una pgina 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 cuestin de consolidar la informacin en algunos puntos y listas de comprobacin que debe revisar. Como probablemente habr odo a lo largo de su vida, pararse a pensar un poco antes de actuar puede ahorrarle ms de un dolor de cabeza. No es de extraar que esta filosofa siga siendo vlida tambin en el desarrollo para el Web: un poco de preparacin y previsin adelantan mucho camino en la consecucin del xito. Esperamos que vea esta leccin como un puente entre la teora y la prctica en relacin al Web. En las lecciones 1 a 5, hemos cubierto numerosos conceptos bsicos del diseo Web; en las lecciones 6 a 8, tendr la oportunidad de aplicar lo que ha aprendido a los ejercicios prcticos y proyectos en los que crear la estructura general de tres sitios Web (uno en cada leccin). En las lecciones 6 a 8, puede volver a crear las pginas Web exactamente como describimos o bien usar las pginas 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 pgina real. En las lecciones 6 a 8 incluimos asimismo una breve seccin acerca del planeamiento, as que sabr cmo ha evolucionado cada pgina durante la fase del planeamiento del sitio y por dnde va en el desarrollo prctico del proyecto. Si va a personalizar alguno de los sitios Web que hemos incluido como ejemplos, tendr que dedicar tambin 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, diseamos esta leccin 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, disear un marco de trabajo o crear sus propias pginas Web, retome este curso y vuelva a esta leccin para ayudarle a poner en marcha sus procesos de pensamiento.

81

Como apoyo para ilustrar el proceso de planeamiento, vamos a observar la evolucin del sitio Web de Curiosity Shoppe. En la figura 5-1 se muestra la versin final de la pgina Web, en ingls, de esta tienda (www.creationguide.com/cshoppe) (en ingls). 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 diseo final.

Figura 5-1. La pgina principal de Curiosity Shoppe presenta un escaparate de un sitio Web para una tienda de artculos coleccionables.

Definicin de los objetivos

Antes de crear una pgina Web o un sitio Web, primero debe abordar el proyecto desde una perspectiva ms amplia. Tiene que considerar claramente la finalidad del sitio y sus objetivos. En concreto, debe responder a las preguntas siguientes:
Por qu deseo una pgina o un sitio Web? Cules son mis metas inmediatas para el sitio Web? Cules son mis metas a largo plazo para el sitio? Cul 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 fcilmente accesible a ms clientes a travs de su presencia en lnea. Sus objetivos inmediatos eran informar a la gente acerca de la tienda, proporcionar un medio de contacto y anunciar sus productos y ubicacin. Sus planes a largo plazo son ofrecer toda su gama de productos para vender en lnea y actualizar la pgina principal diariamente con una oferta especial. Por ltimo, la escala de tiempo de los propietarios del sitio se puede resumir como sigue: l sitio esttico en lnea (a disposicin de los visitantes) deba estar preparado 2 meses despus del comienzo de la pgina principal; la caracterstica de venta deba ser totalmente funcional 6 meses despus de poner en el Web la pgina principal; y una gama completa de productos en lnea deba 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 currculum, publicarlo en el Web durante un mes y agregar actualizaciones ocasionalmente, cuando sea necesario.

Llegar a conocer al pblico

Cuando haya definido los objetivos de su sitio, tendr que considerar quin va a visitar sus pginas Web. En otras palabras, debe pensar en los destinatarios o pblico pretendido. Debe tener al menos cierta percepcin de las personas que desea que visiten su espacio Web. Necesita abordar este paso del planeamiento en el proceso porque muchas decisiones referentes al diseo y contenido se basan en quines constituyen su pblico. 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 pginas. Por ejemplo, si est creando un sitio para la familia, llame a sus familiares y averige lo que les gustara ver en l. Adems, considere la forma en que los usuarios se conectarn a la pgina. Son usuarios Web tpicos que usan conexiones de acceso telefnico? Si es as, haga que sus pginas sean pequeas y el diseo bastante sencillo. Est diseando un sitio para jugadores en lnea? Entonces saque provecho de las conexiones de alta velocidad y las tecnologas ms punteras. Disea un sitio para jvenes? Los colores brillantes funcionan bien. Tiene la idea. Como ayuda para analizar los destinatarios de su sitio, responda a las cuestiones siguientes:
Quines conforman el ncleo del publico previsto? Su respuesta podra incluir categoras como clientes, alumnos, empresarios, miembros de una familia, almas gemelas, miembros de un club y muchos ms. Qu desean descubrir en el sitio? Esta cuestin difiere de preguntarse qu desea usted contarles: aqu es donde en realidad debe escuchar a los probables usuarios del sitio para poder disearlo 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 sern principiantes, exploradores casuales del Web o campeones del ciberespacio. Conocer el grado de pericia de los usuarios es fundamental porque, aunque los ms experimentados pueden comprender con frecuencia lo que est ocurriendo en sitios complejos o con un diseo exclusivo, por lo general los principiantes requieren algo ms de orientacin. Por ejemplo, si dedica el sitio a usuarios novatos, debera hacer un esfuerzo por identificar de forma clara y coherente su estructura con elementos sencillos de exploracin; guarde los diseos y esquemas de exploracin vanguardistas para un pblico ms avanzado. Qu tipos de conexiones a Internet y capacidades de ancho de banda tendrn los usuarios? Conocer si los destinatarios se conectan a travs de un simple mdem, una red corporativa interna (conocida como una intranet) o una conexin de alta velocidad como una Lnea de suscriptor digital (DSL, Digital Subscriber Line) marcar la diferencia en el modo en que tendr que disear el sitio Web, incluidos los tipos de elementos que incorporar. Por ejemplo, si tiene la seguridad de que los usuarios que vean su pgina van a obtener acceso al sitio Web a travs de conexiones de alta velocidad, dispondr de ms libertad para incluir clips de vdeo y numerosos grficos con un riesgo mnimo de perder a alguno. Sin embargo, si incluye vdeo y muchos grficos en un sitio Web al que tienen accesos usuarios con conexiones de acceso telefnico, se arriesgar a perderlos antes de que puedan ver el sitio por completo porque, comprensiblemente, se cansarn de esperar a que los elementos grandes se descarguen. Dnde se encuentra su pblico principal? Tendr que determinar si las personas visitan su sitio mientras estn 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 especificacin tiene una estrecha relacin con la cuestin precedente: si sabe dnde se encuentra la audiencia clave, tendr ms probabilidad de hacerse una idea acertada de los tipos de conexiones que usarn en el acceso al sitio. Adems, la ubicacin puede entrar en el juego si est diseando un sitio regional en lugar de uno nacional. Por ejemplo, un sitio de David Bowie podra tener una audiencia internacional, mientras que un sitio de vigilancia de bloques de pisos probablemente se destinara al barrio. Esta diferenciacin es similar a las variaciones de la informacin que se encuentra en una seccin de primera plana de un peridico, que se correspondera con un sitio Web con un enfoque nacional o internacional, en comparacin con la seccin local, que se correspondera con un sitio Web orientado a una localidad.

84

Cul es el grupo de edad tpico entre los destinatarios? Tendr inters en asegurarse de que su sitio atrae al grupo de edad al que est destinado. Esta cuestin se deriva del sentido comn: tanto si le gusta como si no, puede hacer algunas suposiciones generalizadas (aunque cautelosas) relativamente poco importantes en funcin de la edad del pblico y estas suposiciones pueden ayudarle en el proceso de creacin de la pgina Web. Conocer la edad tpica de los destinatarios del sitio (donde tpica es la palabra clave) ayuda a tomar decisiones de diseo apropiadas. Por ejemplo, los fondos en rosa Barbie para los preadolescentes no quedan bien en sitios de deportes que estn destinados a hombres de entre 18 y 40 aos. Asimismo, los parmetros de edad ayudan a elegir las palabras (particularmente, el argot y los coloquialismos) de forma acertada. Adems, la informacin de edad permite crear metforas significativas. Finalmente, los detalles de la edad pueden ayudar a determinar los tipos de informacin que se incluir en las pginas Web. Por ejemplo, si est creando un sitio para jvenes, no ofrecer informacin de plizas de seguros a todo riesgo pero podra considerar seriamente la posibilidad de incluir un juego de trivialidades sobre Harry Potter. Cmo encontrarn los usuarios el sitio? Desear saber si los visitantes de su sitio tienen noticias de l a travs del boca a boca, en directorios en lnea, en directorios Web impresos o libretas de telfonos, a travs de vnculos de una pgina primaria, como resultado de una consulta en un motor de bsqueda, gracias a anuncios comerciales pagados en TV o radio, etctera. As sabr mejor cmo anunciar y hacer propaganda de su sitio.

Sugerencia
Despus de haber entrevistado, encuestado y hablado con la gente; escuchado sus comentarios; y resumido su informacin, recuerde visualizar especficamente a una persona real en lugar de un perfil genrico mientras crea el sitio Web y disea sus pginas.

85

Esquematizacin de los planos tcnicos del sitio

Una vez establecidos sus objetivos y definido su pblico, estar preparado para disear 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 diseo. La organizacin del contenido, o al menos de sus conceptos principales, puede ayudarle a organizar el sitio en conjunto de una manera lgica. Cuando haya reunido las principales clases de informacin que desea incluir en el sitio (el texto y los grficos no tienen que estar pulidos en este momento), debe averiguar la mejor forma de presentar la informacin. Por ejemplo, puede organizar el sitio de diversas maneras, como son:
Alfabticamente Cronolgicamente Grficamente Jerrquicamente Numricamente Aleatoriamente (no se recomienda, pero ah est) Por temas

La mayor parte de los sitios se organizan de forma jerrquica. Un sitio jerrquico presenta una pgina principal que contiene un texto pegadizo de introduccin a sus pginas principales. Esta estructura la utilizan los diseadores y la aprecian en gran medida los usuarios (que en su mayora slo desean usar las pginas Web y no comprender cmo se organizan). Otro aspecto crtico (aunque ciertamente menos excitante) de la organizacin del sitio tiene que ver con la asignacin de nombre a los archivos. Despus de todo, bsicamente el sitio est formado en su totalidad por archivos, as que su organizacin debe incluir la sistematizacin de los mismos. Antes de que lleguemos a la lista de comprobacin del planeamiento de los sitios, vamos a echar un vistazo a algunas de las costumbres existentes en relacin a la denominacin de los archivos, que tendr tiempo de implementar ms adelante pero sobre las que puede meditar ahora.

86

Mantenga controlados los archivos

Como ya sabe, las pginas Web suelen constar de algunos archivos que se combinan para crear la apariencia de una sola pgina. Asimismo, un sitio Web consta de varias pginas Web (que a su vez estn formadas por diversos archivos). Debido a esta naturaleza multiarchivo de las pginas 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 cmo hemos organizado los archivos de cada sitio, as que tendr muchas oportunidades de hacerse con la idea de cmo 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 imgenes. Puede proporcionar cualquier nombre para este directorio cuando disee sus pginas en el equipo local. Al cargar las pginas en un servicio de alojamiento de sitios Web (host), probablemente colocar el contenido de la carpeta del directorio principal en una carpeta en lnea denominada Web y copiar toda la carpeta de imgenes (la carpeta y todo su contenido) en ella. Directorio de imgenes Contiene los archivos de imgenes GIF y JPEG (o JPG) que se usan en las pginas 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 pginas principales del sitio Web. Tenga en cuenta que el nombre de un archivo HTML es el que aparece en la direccin URL de la pgina Web. Por ejemplo, para visitar la pgina de productos de Curiosity Shoppe, especificara www.creationguide.com/cshoppe/products.html (en ingls). Como puede ver, la direccin URL anterior consta del nombre de dominio (www.creationguide.com) (en ingls), el nombre del directorio o carpeta (cshoppe) y un nombre de archivo (products.html). En la mayora de pginas principales y en muchas subpginas, puede haber notado que no tiene que especificar un nombre de archivo. Por ejemplo, cuando visita la pgina principal de Microsoft, simplemente escribe el nombre de dominio de Microsoft, www.microsoft.com/spain/, o, si visita la pgina Creation Guide Resources, escribe www.creationguide.com/resources (en ingls). Si no se indica ningn nombre de archivo HTML despus de un nombre de dominio o directorio (carpeta), muchos servidores mostrarn un archivo con un nombre concreto de forma predeterminada, como indice.html, que vara en funcin de los servidores. Pregunte en el servicio de alojamiento Web qu nombre debe usar para su pgina principal (o haga algunas pruebas con nombres de archivo en lnea para ver cul funciona de forma predeterminada); 9 de cada 10 veces, la pgina principal se llama index.html y es la apuesta ms segura si duda.
Compruebe que todos los nombres de archivo HTML tienen la extensin .htm o .html, y que los nombres de archivo de imagen tienen la extensin .gif, .jpeg o .jpg.

Dado que los nombres de archivo HTML aparecern dentro de la direccin URL de la pgina 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 pgina Web directamente, as que haga que la direccin URL les resulte fcil de escribir y recordar. Por ejemplo, use un archivo denominado productos.html en lugar de p1-2002m.html. Evite el uso de smbolos y signos de puntuacin Muchas personas encuentran que escribir smbolos y aadir signos de puntuacin ralentiza su escritura considerablemente y disminuye de forma drstica la precisin en la redaccin. Adems, los smbolos y los signos de puntuacin pueden crear nuevos caminos para la confusin. Por ejemplo, si la pgina se llama www.creation-guide.com, los usuarios podran olvidar fcilmente el guin y escribir www.creationguide.com (con lo que se perderan su pgina y visitaran la nuestra por error!).

88

Use un carcter 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 smbolos y signos de puntuacin: los espacios se olvidan con facilidad y dejan hueco para los errores (en gran cantidad). Use todas las letras en minsculas 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 maysculas y minsculas, y una letra escrita en maysculas al azar puede perder a ms de un visitante. Los nombres de archivo con todas las letras en minsculas son fciles de escribir y de recordar.

Asignacin de nombre para las imgenes

Adems de asignar nombre a los archivos HTML, tendr que designar los archivos de imgenes. Por lo general, los usuarios no tienen acceso a los archivos de imgenes directamente, sino que las pginas HTML hacen referencia a estos archivos cada vez que necesitan mostrarlos. Por lo tanto, tiene una cierta libertad de accin en lo que respecta a la denominacin de las imgenes. Un truco prctico que utilizamos para denominar las imgenes 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 imgenes con p_, b_ o t_. Una imagen p_ es una verdadera imagen (p, de picture, en ingls). Por ejemplo, p_mscara indica que el archivo es la imagen de una mscara. Una imagen b_ es un botn. Por ejemplo, b_productos indica que la imagen es la barra de exploracin del botn Productos. Y una imagen t_ hace referencia a una barra de ttulo. Por ejemplo, t_contactos especifica que la imagen es la barra de ttulo usada en la pgina Contactos. En este momento, debe entender que la organizacin desempea un papel importante en el planeamiento de un sitio Web. Debe ordenar sus pensamientos y empezar a considerar cmo sistematizar los archivos (que, de nuevo, son bsicamente las pginas Web y grficos de los sitios Web). Puede hacer ms eficaz la fase de organizacin del sitio si realiza las tareas y resuelve las cuestiones que se presentan en la siguiente lista de comprobacin 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 pginas del sitio y la informacin con el fin de garantizar que ha creado un diseo claro del mismo que incluya todos los datos en un formato fcilmente accesible. La figura 5-3 muestra uno de los esquemas iniciales de Curiosity Shoppe. Puede crear esquemas incluso ms detallados que el mostrado en la figura 5-3 si incluye una descripcin breve de lo que va a aparecer en cada pgina. Por ejemplo, en el esquema de la figura 5-3, podra agregar notas como La pgina contact.html contiene un vnculo de correo electrnico y un mapa que muestra la ubicacin de la tienda.

Figura 5-3. El esquema de la pgina de Curiosity Shoppe muestra los nombres de archivo usados dentro del sitio inicial.

Lista de comprobacin del planeamiento de un sitio

Los elementos de esta lista de comprobacin definen las tareas bsicas que debe realizar mientras planea un sitio Web. Aborde cada una de las tareas y cuestiones enumeradas, y esboce las relaciones de la informacin del sitio a medida que realiza su plan:
Visite sitios similares para ver lo que le gusta y lo que no, y averige cmo puede hacer que su sitio sea nico. Compruebe que el sitio especifica quin es usted y, si es apropiado, la identidad de su empresa.

90

Elija colores que evoquen una emocin 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 rpido de lo que son los colores simplificados para el Web, consulte la leccin 3. Para ver la paleta de colores simplificada para el Web, abra el archivo palette216.gif en un programa de grficos. 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 pginas, ni falta; adems, asegrese de que cada pgina indica claramente su propsito. No desea que los usuarios visiten su pgina principal o busquen su sitio a travs 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 diseo, etiquete el sitio como comercial, informativo, educativo, de entretenimiento, de navegacin, para la comunidad, artstico, personal o de algn otro tipo. Disee el sitio para reflejar el modo en que es ms probable que los usuarios exploren sus pginas. Puede hacerse una idea de lo que desean durante la fase de anlisis del pblico destinatario. Compruebe que incluye temas paraguas (temas importantes, no nimiedades) en la pgina principal y que proporciona vnculos ms especficos en cada subpgina. Por ejemplo, incluya un vnculo Contactos en la pgina principal y vnculos a los departamentos de la pgina Contactos. Asegrese de que el sitio ofrece a quienes lo ven unas cuantas formas de ponerse en contacto con usted: la direccin fsica, la direccin de correo electrnico, el nmero de telfono, una paloma mensajera, etctera. Denomine sus archivos de forma apropiada, como se ha explicado anteriormente en esta leccin. Cree nombres de botones fciles de comprender que reflejen con claridad la estructura del sitio. Los botones crpticos pueden parecer imponentes pero tienden a confundir a los lectores, en especial cuando su esotrica creacin no viene acompaa por ningn texto explicativo. Divida el contenido en unidades lgicas. No divida una pgina en dos slo porque parezca que es demasiado larga. Por otro lado, si ve una divisin lgica en una pgina larga, divdala (pero asegrese de que no pierde la pgina recin creada al sepultar su vnculo en el sitio).

91

Analice la informacin y haga que la ms importante sea la ms 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 vnculos de exploracin coherentes en cada pgina. Tenga en cuenta que los aspectos de diseo ms concretos en relacin a la apariencia y el tema del sitio se examinan con ms profundidad en la siguiente fase del planeamiento, cuando se esbozan la pgina principal y las subpginas. Incluya al menos un elemento que invite a los usuarios a volver, por ejemplo, un componente que se actualice diaria o semanalmente, o un saln de chat.

Prubelo!
Rpidamente, piense en tres sitios que haya visitado hace poco. Ahora analice por qu y la forma en que esos tres sitios le han causado impresin. Hay algn elemento que pueda adoptar y modificar para su sitio? Eran fciles de explorar? Alguno de los elementos que no le gust destaca en su mente? Use su experiencia personal en su beneficio. Despus de todo, sabe lo que le gusta cuando explora el Web.

Sentando las bases de su pgina principal

Una vez se haya depositado el polvo suficiente en el esquema de planeamiento del sitio (con lo que lo habr meditado tambin de forma suficiente), puede limpiar la pizarra y empezar a disear su pgina principal y sus subpginas. En este momento, debe tener una idea muy concisa de lo que la pgina principal debe incluir: el logotipo, la barra de ttulo y vnculos a las pginas ms importantes del sitio, entre otros elementos. Sobre todo, debe haberse preocupado por la faceta prctica del diseo de pginas, por ejemplo, por determinar la estructura de la asignacin de nombres de archivo, el anlisis de su pblico, la determinacin de las limitaciones de hardware, etctera. En este momento, sus jugos creativos consiguen hacerse paso mientras su sinapsis organizativa descansa y rejuvenece. En esta fase de diseo, debe centrar su atencin en el modo en que puede presentar con creatividad todos los componentes necesarios de la pgina 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 almacn 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 diseos y pensamientos. Empezar a ver lo que funciona mejor y las propias ideas harn que surjan otras hasta llegar a un diseo que funcione. La figura 5-4 muestra un esbozo de la pgina principal de Curiosity Shoppe. Dado que diseamos la pgina principal para crear una impresin nica, su esquema es notablemente diferente del correspondiente a las subpginas del sitio. Por lo tanto, tambin dibujamos la pgina de productos para ilustrar cmo se mostraran la barra de ttulo y los vnculos de exploracin en las subpginas, como se muestra en la figura 5-5. Al dibujar la pgina principal, remtase a la lista de comprobacin del planeamiento de una, posteriormente en esta leccin, para comprobar que ha tenido en cuenta todos sus principios.

Figura 5-4. El dibujo de la pgina principal de Curiosity Shoppe contiene su informacin bsica.

93

Figura 5-5. El dibujo de la pgina de productos de Curiosity Shoppe muestra cmo difieren significativamente las subpginas del sitio Web de la pgina principal.

Lista de comprobacin del planeamiento de una pgina principal

Debe comprobar que su pgina principal incluye los elementos enumerados en la lista. Si omite algunos a propsito, asegrese 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 alfabticamente para evitar que ninguno prevalezca sobre los dems. (Somos tan astutos como para eso.) Compruebe que de una forma u otra aborda todos los elementos siguientes en relacin al diseo de su pgina principal:
La fecha de creacin o revisin Los vnculos de exploracin o los botones se identifican fcilmente y se muestran de forma coherente El icono de la pgina principal o el logotipo se puede usar en todo el sitio La informacin importante se muestra claramente El ttulo es informativo

El tema o efecto emocional intencionado se crea mediante las palabras, los colores, la disposicin, las fuentes u otros elementos Hay un logotipo u otro grfico identificativo, como un escudo familiar o un cdigo de departamento

94

La pgina de inicio engancha para captar el inters del visitante (las pginas principales por lo general varan al menos ligeramente de las subpginas) Se ha buscado una solucin que agiliza la descarga (es cierto, las imgenes gigantescas quedan realmente mal como fondo y en realidad no necesita mostrar 90 imgenes en la pgina principal) El propsito del sitio est claro y los visitantes saben lo que deben hacer despus (aparte de hacer clic en el botn Atrs) El texto largo se divide en prrafos con encabezados secundarios (si es necesario) Los vnculos 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 organizacin

Sugerencia
Incluso aunque la lista de comprobacin del planeamiento de una pgina principal parezca larga, su pgina principal no debe serlo. Por todos los medios, evite sobrecargarla. Es mejor agregar un par de vnculos al men de exploracin en lugar de llenar de informacin cada esquina (y ms all) de la pantalla de los usuarios.

Acopio de utensilios y preparacin

Despus de haber especificado sus objetivos, conocido a su audiencia, organizado su sitio y diseado la composicin de su pgina principal, falta un componente final del planeamiento: reunir las herramientas y utensilios que necesita. En esta fase tambin debe asegurarse de que todo el texto est bien escrito y corregido, los grficos tienen un tamao apropiado (que posiblemente tenga que retocar un poquito cuando el proceso de diseo real de la pgina comience), las imgenes estn digitalizadas de algn modo (con un escner o de otra forma) y dispone de las herramientas para organizar todos los elementos en las pginas 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 ms larga, podemos describir el proceso de un modo bastante sucinto. Bsicamente, antes de crear su pgina Web, debe reunir los elementos enumerados en la siguiente lista de comprobacin.

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 recopilacin, creacin y modificacin del texto y los grficos casi siempre parece tardar algo ms de lo previsto; al menos esa ha sido nuestra experiencia y no slo 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 creacin de pginas Web de una forma ms rpida e inteligente. Con tal fin, en las lecciones 6 y 7, hemos enumerado los elementos necesarios para crear las pginas Web de la leccin. No tema: las etapas de caza y recoleccin incluidas en las lecciones 6 y 7 son breves e indoloras.

Lista de comprobacin de utensilios

Antes de empezar a crear pginas Web, debe tener los elementos siguientes a mano y poder disponer de ellos fcilmente, o al menos haber finalizado una gran parte de este proceso:
El texto: corregido, revisado ortogrficamente y reledo Las fotografas, grficos e ilustraciones (incluyendo los botones, las barras de ttulo y un logotipo de gran calidad)
Recuerde: si decide adquirir un nombre de dominio, debe ser breve, sencillo y tener relacin con el propsito de su sitio Web.

Dibujos de las pginas y plantillas

Un editor HTML, un procesador de texto o una herramienta de creacin de pginas Web Un programa de grficos Un nombre de dominio (ya sea comprado o asignado) Espacio en un servidor

Ahora que ha concluido la explicacin de las fases de teora y planeamiento, est listo para mancharse las manos y enfrentarse a la segunda mitad de este curso. As que, remnguese: el momento de crear ha llegado!

Puntos clave
Defina los objetivos del sitio Web. Conozca a su pblico.

Defina la jerarqua, flujo organizativo y apariencia global del sitio Web. Dibuje la pgina principal y las subpginas. Rena las herramientas y utensilios necesarios. Preprese para crear pginas Web y pasarlas al mundo real!

96

LECCIN 6

HTML bsico sin misterios

Una vez completada esta leccin, podr:
Entender los fundamentos de la codificacin HTML. Usar etiquetas HTML. Planear un sitio HTML. Crear una tabla con HTML. Ensamblar una pgina principal y sus subpginas con HTML. Puede recordar el intenso y premeditado esfuerzo que le llev aprender los sonidos y formas del alfabeto? Al final, tras mucha prctica, lo consigui. Despus de aprender las letras, lentamente comenz a entender cmo combinarlas en palabras, combinar las palabras en frases, las frases en prrafos y as sucesivamente. En este momento, es probable que leer le parezca algo natural. Y lo ms seguro es que lea el peridico y explore el Web sin pensar demasiado en cada sonido y forma de las letras. Eso se debe a que, con los aos, ha desarrollado los conceptos bsicos 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 cmo funciona HTML, es bastante parecido a aprender a leer. El proceso puede precisar algo de paciencia y mucha prctica al principio, pero si se toma el tiempo necesario para estudiar HTML ahora, al final podr usarlo para crear pginas Web de una forma casi tan natural como puede leer.

Acopio de los utensilios para el proyecto

Para crear las pginas Web descritas en esta leccin, necesitar los siguientes utensilios:
Un procesador bsico 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 pginas Web de esta leccin, que se enumeran en la pgina siguiente.

97

b_background.gif b_background2.gif b_competitions.gif b_competitions2.gif b_contact.gif b_contact2.gif b_home.gif b_home2.gif b_lessons.gif

b_lessons2.gif b_performances.gif b_performances2.gif b_recitals.gif b_recitals2.gif bg.gif footer.gif logo.gif p_chris.jpg

picture.gif sendnote.gif t_background.gif t_competitions.gif t_contact.gif t_home.gif t_lessons.gif t_performances.gif t_recitals.gif

Si desea saber los pasos detallados necesarios para configurar los archivos de ejercicios, consulte la seccin Poner en su lugar las carpetas y los grficos, ms adelante en esta leccin.

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 pgina Web se construyen incluyendo comandos HTML (tambin conocidos como etiquetas HTML) dentro del cuerpo de un documento de texto bsico. Aunque otras tecnologas, como el Lenguaje de marcado extensible (XML, Extensible Markup Language) y Hoja de estilos en cascada (CSS, Cascading Style Sheet), estn empezando a tener una repercusin significativa en el desarrollo de pginas Web, HTML constituye la base de la mayor parte de las pginas Web en este momento y, si va a crearlas, necesita conocer este lenguaje. Ahora bien, entendemos que podra no sentirse muy dispuesto a crear una pgina Web desde cero usando nicamente un documento en blanco y una tecnologa que le suena vagamente familiar, denominada HTML. Pero, lo crea o no, est preparado, de modo que intntelo. Hacemos que use HTML en el primer proyecto con pginas Web de este curso porque se dar cuenta de que conocer sus fundamentos le resultar extremadamente prctico cuando cree pginas Web en el futuro, no importa cundo. Por lo tanto, vamos a tomar una aproximacin de bautismo de fuego en esta leccin, lo que significa que va a escribir sus propios documentos HTML en breve. En ciertas formas, podra encontrar que el proyecto de esta leccin es el ms importante de esta mitad del curso. Si va a crear pginas Web, tendr mucho ganado si domina algunos conceptos y comandos HTML bsicos. Algn da, cuando tenga mucha ms soltura con la creacin de pginas Web, conocer al menos un poco de HTML le permitir modificar y retocar pginas para adaptarlas a sus preferencias, incluso si han sido generadas por un editor HTML. Adems, 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 pginas Web. Al quitar los cdigos innecesarios, puede hacer que sus documentos HTML sean ms pequeos, lo que a su vez significa que las pginas se cargarn antes.

98

Finalmente, a medida que adquiera ms habilidad en el uso de comandos HTML, podra encontrar que puede hacer cambios con ms rapidez y precisin si agrega, elimina o modifica el cdigo HTML en lugar de modificar una pgina Web en un editor HTML. Ahora estamos listos para empezar. El primer cometido en este empeo, antes de comenzar a crear un sitio Web, es revisar brevemente (muy brevemente) la teora bsica de HTML. Por cierto, cuando decimos teora, nos referimos a informacin clara y til, y no a retrica compleja. Considere la explicacin terica siguiente como si extendiera una manta antes de iniciar una merienda en el campo; tambin podra sentirse algo desanimado ante los bichos con los que se encontrar.

De modo que ha odo algo acerca de CSS

Hojas de estilo en cascada (o CSS) es una tecnologa que permite definir el formato de una pgina 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 pgina Web. Segn el criterio de muchos diseadores y desarrolladores del Web, todo el mundo debera usar CSS lo antes posible. Pero la realidad de la situacin 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 tcnicas de formato ms antiguas junto con los nuevos comandos CSS. En lo que le incumbe, el objetivo de esta leccin es ensearle HTML; por lo tanto, hemos decidido omitir la explicacin de cmo utilizar hojas de estilo en esta leccin. Cuando aprenda HTML, podr continuar y aprender CSS con tranquilidad (quin 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 cmo modificar las hojas de estilo generadas automticamente en el proyecto de la leccin 7. En relacin a CSS, podra or que algunas de las etiquetas y atributos HTML que le mostramos en esta leccin estn 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 cules se clasifican como desaprobadas (deprecated) en www.w3.org/ TR/1999/REC-html40119991224/index/elements.html (en ingls).

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 pginas Web si especifica si cumplen estrictamente los estndares ms recientes, si son de transicin (incluyen elementos HTML desaprobados) o si tienen marcos (incluyen elementos HTML desaprobados y marcos dentro del sitio Web). Para ello, debe incluir una versin particular de la etiqueta HTML <! DOCTYPE...> en las pginas Web, segn se describe aqu adems de en los pasos del proyecto, en esta leccin:
Si su pgina Web cumple los estndares 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 pgina Web cumple los estndares HTML 4.01 e incluye elementos y atributos HTML desaprobados (muchos de los cuales conciernen a la presentacin visual), inserte: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> Si la pgina Web es compatible con HTML 4.01 e incluye elementos y atributos HTML desaprobados, adems 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 leccin incluye elementos HTML desaprobados pero no tramas, sus documentos usarn la segunda instruccin de la lista anterior, la que indica que el cdigo es de transicin. Le mostraremos cmo agregar esta instruccin en un documento HTML en los pasos del proyecto, ms adelante en esta leccin.

Fundamentos de HTML
Bsicamente, los comandos HTML sirven como instrucciones que le indican a un explorador cmo mostrar el contenido de una pgina Web. En otras palabras, los comandos HTML proporcionan informacin de formato que controla la presentacin del texto y los grficos de la pgina Web. Tenga en mente el propsito de los comandos HTML. Ver ms adelante cmo se entretejen alrededor del contenido de la pgina Web en un documento HTML, pero, en esencia, un documento HTML contiene dos tipos de informacin:
La informacin del contenido, incluido el texto y punteros a los grficos Comandos HTML, que se usan para indicar cmo se muestra el contenido

100

En esta leccin, le mostramos cmo especificar los comandos HTML y el contenido de la pgina en un documento de texto para crear pginas Web. Adems, vincular las pginas que cree de modo que se combinen para crear un sitio Web. Para llevar a cabo esta hazaa, necesitar un procesador de texto, como los mencionados en la leccin 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 cmo se muestran los documentos completamente codificados en HTML en TextEdit, WordPad y el Bloc de notas, respectivamente. Cuando empiece el proyecto de esta leccin, comenzar con una pgina en blanco. Para abrir el Bloc de notas, haga clic en Inicio, seleccione Programas, Accesorios y, despus, haga clic en Bloc de notas. Para abrir WordPad, haga clic en Inicio, seleccione Programas, Accesorios y, despus, 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 conglomeracin de comandos HTML mostrados en la figura 6-2. HTML puede parecer complejo, pero en realidad slo consta de combinaciones de letras, nmeros y smbolos con algo de organizacin. Como es obvio, conocer las letras, nmeros y smbolos, 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 pginas. Por el contrario, el contenido es la informacin que se muestra en la pgina (texto, grficos, encabezados, etctera). En otras palabras, HTML se ocupa de la forma en que se presenta la informacin (negrita, cursiva, alienacin a la izquierda y dems) y el contenido especifica lo que se muestra. Saber cmo incorporar las etiquetas apropiadas en todo el contenido de una pgina Web es la clave para crear una en un procesador de texto. Por lo tanto, vamos a explicar cmo se usan las etiquetas HTML.

101

Figura 6-2. Visualizacin de un documento HTML en TextEdit, WordPad y el Bloc de notas.

Uso de etiquetas HTML

En esta seccin, introducimos las reglas bsicas de HTML junto con algunas etiquetas comunes. Tenga en cuenta que no definimos cada etiqueta HTML existente; hay un buen nmero de ellas y en muchos libros dedicados a HTML se ofrecen extensas listas de comandos. (Si desea averiguar ms acerca de HTML de lo que abarcamos aqu, revise algunas de nuestras referencias de HTML favoritas, que enumeramos en la seccin Recursos adicionales, casi al final de esta leccin.) Nuestra filosofa es que si aprende las reglas bsicas de la utilizacin de etiquetas HTML, podr usar cualesquiera de las que descubra en lnea o en los libros sobre HTML. Comenzaremos nuestra explicacin de las etiquetas HTML con una regla sencilla: las etiquetas HTML constan de comandos que aparecen dentro de parntesis angulares (<>).

102

Jerga: el cdigo fuente hace referencia al contenido del documento HTML que crea una pgina Web. La mayor parte de los exploradores permiten ver el cdigo fuente de una pgina Web. Por ejemplo, para mostrar el cdigo fuente de una pgina Web en Microsoft Internet Explorer, muestre una pgina Web, haga clic en el men Ver y, despus, en Cdigo fuente.

Por ejemplo, una de la primeras etiquetas en el cdigo fuente de una pgina Web suele ser <HTML>. Esta etiqueta le indica a un explorador, sin ningn gnero de duda, que el documento de texto es un documento HTML. El explorador sabe que cualquier texto dentro de los parntesis 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 maysculas y minsculas. 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 parntesis angulares est en maysculas o en minsculas. Por lo tanto, <B> y <b> son, esencialmente, la misma etiqueta (que, a propsito, indica al explorador que muestre en negrita el texto que le sigue). De igual modo, <HTML>, <html>, <HtMl> y cualquier otra combinacin de letras maysculas y minsculas representa la misma etiqueta. A continuacin, vea la regla nmero tres: las etiquetas HTML casi siempre vienen en pares. Puesto que la mayora 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 tambin se hace referencia como etiquetas de apertura y de cierre, respectivamente). Este emparejamiento permite indicar a los exploradores dnde debe comenzar un atributo de formato en particular (como la negrita) y dnde debe terminar. Acurdese 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 ocuparn sus amigos. Si fueran etiquetas HTML, le diran al explorador que todos los asientos situados entre ellos deberan tener el mismo formato que el de sus asientos. Las etiquetas de inicio y de fin tienen un propsito muy especfico, en concreto, una etiqueta de inicio indica cundo debe iniciarse una accin y una de fin cundo se debe terminar. (Como ve, esto no es la ciencia de la fsica cuntica.) Aunque las etiquetas de inicio y de fin parecen muy similares, presentan una pequea diferencia, aunque esencial. Las etiquetas de fin se diferencian de las de inicio por la inclusin de un carcter de barra diagonal (/) justo despus del parntesis izquierdo, como aqu: </HTML>. El ltimo elemento de los documentos HTML suele ser el comando </HTML>, que indica el final de la presentacin de la pgina 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 recin llegado pregunta al que se sienta en el pasillo si los asientos estn ocupados. ste contestara algo as como: S, todos los asientos que hay hasta donde est aquella persona con la camisa roja estn ocupados.. Esta es la funcin de una etiqueta de inicio. La persona que lleva la camisa roja actuara 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>.

103

Para mejorar la ilustracin, veamos un ejemplo de texto que usa pares de etiquetas HTML. En la instruccin siguiente se incluyen etiquetas HTML de inicio y de fin que dan formato a la frase como un prrafo (<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, podra verla con formato en un explorador, como se muestra aqu. La frase tambin 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 prrafo (<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 podra parecer un poco confusa, de modo que veamos un ejemplo. Bsicamente, 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 prrafo (<P>), que se anidan dentro de las etiquetas de identificacin de documento (<HTML>). Esta disposicin resultara en un texto en negrita dentro de un prrafo dentro de un documento HTML. La siguiente tambin funcionara: <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 estn anidados dentro del par de etiquetas de prrafo.

104

Ahora vamos a aligerar la explicacin un poco y nos fijaremos en una regla ms 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 preocupacin en el Web por diversas razones (principalmente, porque los diseadores tienen que ocuparse del contenido que cambia de tamao y de ubicacin, problemas que no se dan en los documentos impresos). En un documento HTML, al agregar cualquier nmero de espacios dentro del cdigo mediante la barra espaciadora, la tecla Tabulador o la tecla Entrar, slo se consigue agregar un espacio. Por lo tanto, podra incrustar los cuatro fragmentos de cdigo siguientes en un documento HTML: <P><I>Instruccin musical</I> <P><I>Instruccin musical</I> <P><I> Instruccin musical </I> <P><I> Instruccin 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 aade algo de picante a las etiquetas HTML: algunas etiquetas HTML de apertura pueden contener propiedades (tambin 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 continuacin: Dicen que el <FONT COLOR="green">csped</FONT> es ms verde. Si insertara la frase anterior en un documento HTML, en el texto se mostrara la palabra csped en verde.

105

Finalmente, aqu tiene la ltima regla de esta seccin: existen numerosas variaciones en relacin 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 tecnologa es tan coherente como las reglas de ortografa, lo que significa que, con frecuencia, encontrar excepciones a las reglas. Por ejemplo, si desea agregar un salto de lnea en HTML, debe especificar <BR>. No hay ninguna etiqueta de cierre para un salto de lnea: 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 confusin. Empezar a tener una idea ms clara de HTML a medida que trabaje en el proyecto del sitio Web de esta leccin. No hay nada como la experiencia prctica para aprender. Le introduciremos en otras etiquetas HTML y conceptos adicionales en el proyecto segn 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 Funcin

<A HREF="xxx.xxx">< /A> Marca el punto delimitador de un hipervnculo, en el que se puede hacer clic. El atributo HREF seala la informacin que se debe mostrar al hacer clic en el contenido del delimitador. El contenido del delimitador se especifica entre las etiquetas de delimitacin (<A></A>) y uede incluir texto e imgenes. <B></B>
Indica que se muestre en negrita el texto incluido entre las etiquetas <B> y </B>. Desplaza un prrafo del texto normal del cuerpo, por lo general, con una sangra a la izquierda del prrafo y mrgenes a la derecha. Marca el inicio y el final del contenido que se puede mostrar de la pgina Web. Inserta un salto de lnea. La etiqueta <BR> no tiene una etiqueta de cierre y se suele usar de forma consecutiva para crear un espacio en blanco en una pgina Web.

<BLOCKQUOTE> </BLOCKQUOTE>

<BODY></BODY> <BR>

106

(contina)

Etiquetas
<CENTER></CENTER> <!DOCTYPE...>

Funcin
Centra la informacin delimitada en la pgina o dentro de la celda de una tabla. Especifica la definicin de tipo de documento (DTD, Document Type Definition) de la pgina Web; por ejemplo, si la pgina usa codificacin HTML estricta y CSS, codificacin HTML de transicin (incluidas etiquetas HTML desaprobadas) o tramas. Permite especificar el color de la fuente, su tipo y su tamao. Especifica el texto de encabezado. Los tamaos de encabezado abarcan desde H1 hasta H6, donde H1 es el mayor. Proporciona un rea en la que puede mostrar el ttulo de la pgina Web, incluir informacin para el motor de bsqueda e informacin avanzada de formato, incrustar cdigo 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 informacin no se muestra directamente a los usuarios. Delinea el inicio y el final de un documento HTML. Indica que el texto que aparece entre las etiquetas <I> e </I> se ponga en cursiva. Muestra una imagen en una pgina Web. El atributo SRC seala a la imagen particular que se debe mostrar. Identifica un elemento de una lista sin numerar (con vietas) <UL> o de una lista ordenada (numerada) <OL>. Especifica una lista ordenada (numerada).

<FONT></FONT> <H1></H1>

<HEAD></HEAD>

<HTML></HTML> <I></I>

<IMG SRC="xxx.xxx">

<LI></LI>

<OL></OL>

107

(contina)

Etiquetas
<P></P>

Funcin
Indica el principio y el final de un prrafo. De forma predeterminada, los prrafos 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 prrafo nuevo para dar formato al contenido HTML sin escribir </P> al final de cada prrafo. Hemos incluido la etiqueta </P> de cierre en esta leccin para clarificar la explicacin. Los exploradores suelen insertar una lnea en blanco (ms un pequeo espacio adicional) antes de iniciar un prrafo. Indica el principio y el final de una tabla. Define el inicio y el final de una celda en una tabla. Las etiquetas <TD> se anidan dentro de otras etiquetas <TR>. Permite insertar el texto de la pgina Web que se debera mostrar en la barra de ttulo del explorador. Indica una fila de una tabla. Las etiquetas <TR> se anidan dentro de un par de etiquetas <TABLE>. Especifica una lista sin numerar (con vietas).

<TABLE></TABLE> <TD></TD>

<TITLE></TITLE>

<TR></TR>

<UL></UL>

Slo como ltima nota de esta seccin, deseamos hacer una pequea rectificacin. Aunque estamos seguros de que puede crear un documento HTML a partir de cero, tenga en cuenta que esta leccin slo sirve de introduccin a la creacin de pginas Web en HTML. Lamentablemente, abarcar todos los comandos HTML disponibles en una sola leccin es poco realista, pero en sta puede encontrar sugerencias que le resultarn de utilidad en la codificacin y algunas indicaciones de buenas referencias de HTML, en la seccin Recursos adicionales, casi al final de la leccin. Si crea el sitio Web descrito en el proyecto de esta leccin, dominar los conceptos bsicos de la codificacin HTML, adems de disponer de una plantilla que puede personalizar para crear pginas Web nicas. (Incluso le indicamos cmo usar el sitio como plantilla ms adelante en esta leccin.)

108

Tratamiento de documentos HTML y grficos Web

Cuando crea pginas Web, suele trabajar con varios archivos. Tendr el archivo HTML de la pgina principal (que a veces se denomina index.html, index.htm o ndice.html), un archivo grfico de cada elemento grfico de la pgina y otros archivos HTML adicionales para las pginas vinculadas. Por lo tanto, antes de empezar la fase de creacin, tiene que idear un esquema organizativo para no volverse loco despus. 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 imgenes. A continuacin, puede almacenar todos sus documentos HTML en la carpeta principal y colocar los grficos en la carpeta de imgenes. Como ilustracin, vea la figura 6-5, que muestra los documentos HTML y las imgenes necesarios para crear el sitio del proyecto de esta leccin. Mantener organizados los archivos es un imperativo cuando se agregan grficos y se crean hipervnculos, porque debe incluir instrucciones en el documento HTML en relacin a dnde debe buscar el explorador un grfico o pgina vinculada en particular. Adems, la organizacin puede simplificar en gran medida el proceso de carga de archivos cuando est en disposicin 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 creacin del sitio Web y en las pginas Web. Adems de observar una minuciosa organizacin, debera guardar religiosamente sus pginas 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 lgica.

109

Guardar y ver los documentos HTML

Guardar, guardar, guardar! debera ser una de sus mximas cuando trabaje con un equipo informtico.

Al crear las pginas Web, en especial si realiza la codificacin HTML a mano, debe guardarlas y obtener una vista previa de las mismas sin reparos. Segn 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 tambin puede aplicarse en cualquier situacin en la que trabaje con un archivo en un equipo informtico (Si en los monitores creciera el csped, nuestro mouse desgastara el camino en diagonal hacia el botn Guardar, por no mencionar nuestra voluntaria contribucin a la leve erosin de las teclas Ctrl y G que se produce al presionarlas con tanta frecuencia.) Adems de guardar a menudo sus archivos, debe obtener una vista previa de las pginas Web que cree varias veces a lo largo del proceso de creacin. Ello simplemente conlleva mirar el documento HTML en uno o dos exploradores, frente a tener que examinar el texto y la versin del cdigo 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 presentacin en un primer momento. Con frecuencia, alteraremos la composicin de un sitio porque lo que parece acertado sobre el papel no se transpone bien en una pgina en lnea. Para obtener una vista previa de una pgina 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 ubicacin 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 seccin siguiente, le sugerimos algunos puntos concretos en los que debera guardar el sitio Web del proyecto y verlo en un explorador. Sin embargo, puede guardar los archivos y verlos ms a menudo de lo que sugerimos, en especial si se toma un descanso mientras los est creando.

110

Ya hemos cubierto una buena parte de teora; ahora llega la hora de las brujas. Si ha ledo las pginas anteriores, est en disposicin de abordar el proyecto de creacin de pginas Web HTML. Debera tener un conocimiento prctico de las etiquetas HTML bsicas, ser consciente de que debe guardar sus documentos HTML e imgenes en las carpetas designadas y reconocer la importancia de guardar las pginas Web y de verlas con frecuencia a lo largo del proceso de creacin. 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 pgina Web para Chris Soll, msico profesional e instructora de msica. El primero paso del planeamiento implicaba reunirse con Chris y averiguar el tipo de informacin que deseaba incluir en su sitio Web. En nuestra consulta inicial, encontramos que tena varios temas profesionales y otros especficos de los alumnos que le gustara incorporar. Segn esta informacin, intentamos inicialmente disear una barra de exploracin con dos niveles pero el diseo empez a resultar demasiado confuso. Determinamos que podamos crear un sitio ms limpio si especificbamos botones con nombre y proporcionbamos una seccin de informacin general del sitio en la pgina principal. El diseo final result en una composicin clara y flexible. Cuando cree el sitio Web de Chris Soll (al que pronto comenzamos a hacer referencia como el sitio de msica durante nuestras consultas, debido a la abrumadora presencia en el estudio de un piano de cola, una coleccin de flautas y montones de partituras musicales y libros de msica), puede usar su documento HTML como plantilla para crear sitios Web similares que tengan una apariencia y funcionamiento completamente diferentes. No se preocupe, describimos cmo usar el cdigo del sitio de msica como plantilla ms adelante en esta leccin. En la figura 6-6 se ilustra el esquema que propusimos para ilustrar las pginas que desebamos incluir en el sitio. La figura 6-7 muestra el esbozo final de la pgina principal del sitio de msica.

Figura 6-6. La estructura del sitio permite el acceso a cada una de sus pginas desde cualquier ubicacin.

111

Figura 6-7. El dibujo muestra la composicin bsica del diseo de la pgina principal del sitio de msica.

Nota
Observe en la figura 6-7 que inicialmente pensamos insertar la informacin de direccin debajo de los vnculos de texto en la parte inferior de la pgina. Despus, durante el proceso de diseo, nos dimos cuenta de que colocar la direccin encima de los vnculos tena ms sentido. Los vnculos ya aparecan en la barra de exploracin a la izquierda, de modo que preferimos presentar la informacin de la direccin nueva y ms importante antes de repetir la informacin de los vnculos de texto.

112

Poner en su lugar las carpetas y los grficos

Como mencionamos anteriormente en esta leccin, su primer cometido es crear una carpeta para los archivos Web y organizar sus grficos. A continuacin le indicamos el proceso que le sugerimos que siga (aunque puede cambiar la ubicacin de las carpetas y el nombre segn sus preferencias):
1 2 3 4 Cree una carpeta en la unidad C:\ y asgnele el nombre music. Abra la carpeta music y cree una subcarpeta denominada images. Busque la carpeta Lesson06 en la carpeta Web Design Fundamentals\Practice del disco duro. Copie todos los archivos de la carpeta Lesson06 a la subcarpeta images que cre en el paso 2.

Cuando finalice esta leccin y termine de experimentar con el sitio Web de msica, puede eliminar la carpeta C:\music, si lo desea.

A medida que copie los archivos de la carpeta Lesson06 a la subcarpeta images, observe el esquema de denominacin que hemos usado para etiquetar las imgenes:
b_xxx Especifica que la imagen es un botn. Un grfico b_ al que se anexa el nmero 2 (por ejemplo, b_background2.gif) indica una segunda versin del botn que se muestra siempre con la pgina asociada. (Ver lo que significa esto posteriormente.) Por lo tanto, b_background.gif es el botn Antecedentes (la traduccin de background en este caso) y b_background2.gif es la versin de la pgina actual del botn Antecedentes, como se ilustra en la figura 6-8.

Figura 6-8. Cada botn del sitio de msica consta de un botn normal y de una versin para la pgina actual del mismo.

113

bg.gif Especifica el grfico de fondo. Se usa el mismo grfico de fondo en todo el sitio de msica, de modo que slo se requiere un archivo bg.gif. footer.gif Identifica el grfico como una imagen de pie de pgina en movimiento, que se utiliza en la parte inferior de las pginas del sitio. logo.gif Identifica el grfico del logotipo. En todo el sitio de msica se usa el mismo grfico de logotipo, pero podra tener unas cuantas versiones del mismo, en especial, si utilizara una versin ms pequea o modificada en las subpginas.
La imagen picture.gif es un grfico marcador de posicin usado en la plantilla que se explica ms adelante en la leccin. No usar el archivo picture.gif en el sitio de msica.

p_xxx Especifica que el grfico es una imagen. En el sitio de msica slo hay una fotografa, que se encuentra en la pgina principal. sendnote.gif Identifica el grfico como el icono de enviar mensaje de correo electrnico. Posteriormente, vincular este icono en el sitio de msica de manera que los usuarios puedan hacer clic en el grfico sendnote.gif para abrir un mensaje de correo electrnico con una direccin predeterminada cuando deseen enviar un mensaje a Chris Soll. t_xxx Especifica que la imagen es un grfico de pancarta para la barra de ttulo. Por ejemplo, t_background.gif es el grfico de la pancarta de la barra de ttulo de la pgina Antecedentes, que muestra la palabra Antecedentes y se coloca al principio de la pgina que ofrece informacin acerca de Chris Soll, como se ilustra en la figura 6-9.

Figura 6-9. Un archivo grfico se usa para crear la pancarta de una barra de ttulo en cada pgina en el sitio de msica. Cuando cree sus propias pginas Web y grficos Web, probablemente preferir idear su propio esquema de denominacin. Le hemos mostrado el mtodo que usamos nosotros para denominar nuestros grficos 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 denominacin de grficos bien planeado a medida que empiece a insertar cdigo HTML en breve.

114

Preparacin del archivo de la pgina principal

Cuando tenga las carpetas y archivos grficos en su lugar, estar en disposicin de crear la pgina principal del sitio. Para empezar el proceso de creacin, tendr que crear un documento HTML que contenga las etiquetas estndar que aparecen en todos los documentos HTML. Las etiquetas estndar son las siguientes (vea la tabla 6-1, anteriormente en esta leccin):

<!DOCTYPE...> <HTML></HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY>

Observe que, con la excepcin de la etiqueta <!DOCTYPE...>, las etiquetas estndar vienen en parejas. En la figura 6-10 se demuestra la forma apropiada de anidar los pares de etiquetas HTML estndar en un documento HTML y cmo insertar el texto del ttulo. Cuando haya escrito las etiquetas HTML estndar en un documento de texto, tendr que guardar el documento de texto como documento HTML, segn se describe en el procedimiento siguiente.

Figura 6-10. Este documento contiene las etiquetas HTML estndar con algo de texto incluido entre las etiquetas <TITLE>.

115

Nota
Recuerde que en HTML no se distinguen maysculas y minsculas, de modo que puede escribir <HTML>, <html>, <HtMl> o cualquier otra combinacin de letras en maysculas o minsculas, y la etiqueta ser correcta. En esta leccin, usamos siempre letras en maysculas para las etiquetas HTML con el objeto de reconocerlas ms fcilmente.

Para comenzar a crear la pgina principal del sitio de msica y guardarla en forma de archivo HTML, siga estos pasos:
1 2 Abra el Bloc de notas, WordPad o TextEdit. En todo el proyecto usamos el Bloc de notas. Haga clic en un nuevo documento en blanco y escriba la siguiente definicin 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"> Presione Entrar dos veces. Escriba <HTML> y presione Entrar dos veces. Escriba <HEAD> y presione Entrar. Escriba <TITLE>Instruccin musical de Chris Soll</TITLE> y presione Entrar. Escriba </HEAD> y presione Entrar dos veces. Escriba <BODY>, presione Entrar varias veces (para dejar algo de espacio cuando especifique la informacin del contenido de la pgina Web), escriba </BODY> y presione Entrar dos veces.

3 4 5 6 7 8

Nota
El texto del contenido, que se muestra entre las etiquetas HTML y fuera, se presenta de la misma forma, con maysculas o minsculas, 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 minsculas en la pgina Web. Adems, recuerde que no tiene que preocuparse de si pone demasiados espacios (incluidas lneas en blanco) entre el texto del contenido y las etiquetas HTML. Cuando un explorador presente el documento, pasar por alto los espacios adicionales.

116

Escriba </HTML> para completar la configuracin de las etiquetas HTML estndar.

Ahora puede nombrar y guardar el archivo en la carpeta C:\music.

10 11 En el men Archivo, haga clic en Guardar. En el cuadro de dilogo Guardar como, en el cuadro Nombre de archivo escriba index.html y compruebe que en la lista desplegable Guardar como est seleccionada la opcin Documentos de texto. (Si es necesario, haga clic en la flecha para seleccionar la opcin Documentos de texto.) Use la lista desplegable Guardar en y vaya a la carpeta C:\music del equipo. Haga clic en Guardar y cierre el Bloc de notas.

12 13

El archivo debera mostrarse ahora como index.html en la carpeta C:\music y el icono debera indicar que es un documento HTML. En este punto, ya puede ver su archivo en el explorador. Para ver el archivo HTML recin creado, haga doble clic en index.html. Se debe abrir en su explorador Web. Observe que el nico contenido es el texto del ttulo de la pgina Web, que se presenta en la barra de ttulo del explorador. Ahora que el ttulo de la pgina Web y las etiquetas HTML estn en su lugar, vamos a agregar los colores predeterminados de los vnculos y de la imagen de fondo.

Especificacin de los colores del fondo y de los vnculos

Puede incluir atributos en la etiqueta <BODY> para agregar los colores de fondo, las imgenes de fondo, los colores predeterminados de los vnculos y otras caractersticas, segn se describe en los pasos siguientes:
1 Abra el Bloc de notas, WordPad o TextEdit, y despus abra el archivo C:\music\index.html en el procesador de texto. Si no ve el archivo index.html en el cuadro de dilogo Abrir, asegrese de que en el cuadro de lista Tipo de archivo aparece Todos los archivos (*.*). Si usa Mac OS X, TextEdit muestra automticamente los documentos HTML como pginas Web, de forma predeterminada. Para abrir y mostrar el cdigo HTML en lugar de la pgina Web, active la casilla de verificacin Ignore Rich Text Commands (Pasar por alto comandos de texto) en el cuadro de dilogo Open File (Abrir archivo); observe que puede seleccionar esta opcin tambin en el cuadro de dilogo Preferences (Preferencias) del programa, si no desea activar la casilla de verificacin 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 botn secundario del mouse (ratn) 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 despus 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 msica se usa un grfico para el fondo, definimos un fondo blanco para quienes vean el sitio con las imgenes 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 nmero hexadecimal que indica el color blanco.
Jerga: poner en mosaico significa repetir una imagen en toda el rea de una ventana hasta que se llene con la imagen repetida.

BACKGROUND permite especificar un archivo grfico para usarlo como imagen de fondo. Recuerde que los exploradores colocan en mosaico las imgenes de fondo para rellenar la ventana del explorador. En la pgina del sitio de msica 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 direccin 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, tendra que especificar la direccin completa para indicar dnde se encuentra. LINK permite especificar el color en el que se muestran los hipervnculos de texto que no se han visitado. VLINK permite especificar el color en el que se muestran los hipervnculos de texto que se han visitado. En otras palabras, una vez que un usuario visite la pgina Contactos, cualquier vnculo que seale a esta pgina aparecer en el color correspondiente a los vnculos visitados (prpura, en este caso). ALINK permite indicar el color en el que se muestran los vnculos mientras el usuario hace clic en ellos. Mostrar los vnculos en un color diferente mientras los usuarios hacen clic en ellos les indica claramente que estn activando un hipervnculo.

118

Su cdigo HTML debera 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 cdigo recin aadido se resalta en color naranja.)

Sugerencia
Siempre que escriba cdigo HTML, compruebe que ha incluido todos los parntesis angulares (<>) y las comillas ("") en l adems de que los comandos HTML estn escritos correctamente. Si faltan elementos o los comandos estn mal escritos, la pgina Web puede mostrarse de forma inapropiada o no mostrarse. Hemos incluido capturas de pantalla del cdigo que est creando en esta leccin para que pueda comprobar fcilmente su trabajo.
Si los cambios que haga en su documento HTML no se muestran en la vista previa en el explorador, haga clic en el botn Actualizar para actualizar la vista.

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 ms recientes.) El archivo index.html debe mostrar la imagen de fondo en la ventana del explorador.

Ahora que ha definido las etiquetas HTML estndar, la imagen de fondo predeterminada y los colores de los vnculos, el siguiente paso es comenzar a dar formato al rea <BODY> de la pgina Web.

Creacin de una tabla

En esta seccin, explicamos cmo crear una tabla que contendr todos los elementos de la pgina Web. Controlarlos es un poco dificultoso debido a la naturaleza variable de los exploradores y sus ventanas, por lo que muchos sitios se disean con tablas que tienen bordes ocultos para ayudar a componer las pginas Web. A la larga, el formato y alineacin de las pginas Web se llevar a cabo mediante hojas de estilo, pero por ahora miles y miles de pginas Web se basan en tablas para controlar la presentacin de sus elementos. Por supuesto, no todas las pginas Web usan una tabla pero encontrar que son una herramienta muy til.

119

Bsicamente, las tablas usan tres etiquetas:

<TABLE></TABLE> seala 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 msica, crear una tabla de dos columnas y tres filas:

1 Si es necesario, abra el Bloc de notas, WordPad o TextEdit, y despus 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 (*.*). 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 seccin 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 continuacin puede ver el propsito de cada uno de los atributos incluidos en la etiqueta <TABLE>: BORDER define el ancho de la tabla en pxeles. Por ahora, estamos mostrando un borde de 1 pxel para ver la tabla mientras realiza el diseo. Una vez que se complete el diseo de la pgina, cambiar BORDER="1" por BORDER="0" para ocultar los bordes de la tabla en la pgina Web. WIDTH define el ancho exacto de la tabla en pxeles o especifica el porcentaje de la ventana del explorador que ocupar la tabla. Nosotros usamos una tabla para dar formato a toda la pgina, as que su tamao es del cien por cien del espacio de la ventana del explorador. CELLPADDING crea un espacio (medido en pxeles) entre el contenido de la celda y el borde de la tabla. Despus de probar algunos parmetros de espacio, encontramos que al aadir un valor de CELLPADDING igual "5" se consegua el mejor efecto. Este tipo de opcin ejemplifica lo que supone probar la configuracin, guardar y obtener una vista previa de la pgina HTML durante el proceso de creacin.
Como ayuda, puede remitirse a la figura 6-12 mientras trabaja en todo el proceso de creacin de la tabla.

CELLSPACING especifica la cantidad de espacio (en pxeles) entre celdas. En el sitio de msica, no necesitamos especificar ningn espacio entre las celdas, de forma que establecimos a "0" el valor del atributo.

120

3 4

Escriba <TR> para comenzar con la primera fila de la tabla. Presione Entrar, presione la tecla Tab para facilitar la lectura del cdigo 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. Adems, de forma predeterminada, el contenido de la celda se alinea a la izquierda. (Ms adelante mostramos cmo cambiar la alineacin predeterminada y centramos el contenido dentro de una celda.) Presione Entrar dos veces, presione la tecla Tab y escriba </TD> para marcar el final de la primera celda en la primera fila. Presione Entrar dos veces, presione la tecla Tab y escriba <TD VALIGN="top"> para crear la segunda celda de la primera fila. Presione Entrar dos veces, presione la tecla Tab y escriba </TD> para marcar el final de la segunda celda en la primera fila. Presione Entrar y escriba </TR> para completar la primera fila de la tabla. Presione Entrar y repita los pasos 3 a 8 para crear la segunda fila de la tabla (o copie y pegue todo el cdigo desde la etiqueta <TR> hasta la etiqueta </TR> para crear una segunda fila, segn se describe en la sugerencia). Presione Entrar despus de crear la segunda fila de la tabla y, a continuacin, vuelva a escribir los comandos de los pasos 3 a 8 o copie y peque el cdigo de la fila para crear una tercera. Cuando haya especificado la tercera fila de la tabla, presione Entrar y escriba </TABLE> para completar sus etiquetas.

5 6 7 8 9

10

11

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 continuacin, presione Ctrl+C para copiar el cdigo seleccionado. Haga clic despus del comando </TR>, presione Entrar y presione Ctrl+V para pegar el cdigo 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 pxeles. De forma predeterminada, si no incluye el atributo WIDTH en las celdas de la tabla, el tamao de las columnas de la tabla se calcula en funcin del tamao del contenido de la celda y de la ventana del explorador. Tiene que agregar el atributo WIDTH slo 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 opcin mayor de forma predeterminada). Para mantener nuestra configuracin 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 automticamente su tamao en funcin del elemento ms ancho de cada una y del tamao de la ventana del explorador. 1 En la primera celda de la primera fila, haga clic despus de "top", presione la barra espaciadora y escriba WIDTH="170" para establecer el ancho de la columna a 170 pxeles. En la segunda celda de la primera fila, haga clic despus de "top", presione la barra espaciadora y escriba WIDTH="*". El asterisco en lugar de un nmero de pxeles 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 tamao 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. Guarde su documento HTML. El cdigo HTML debera 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 cdigo de la tabla crea la estructura para el contenido de la pgina Web. (El cdigo aadido de la tabla se muestra en color naranja.)

Insercin y vinculacin del logotipo

Estamos creando el diseo de una pgina estndar, de modo que optamos por insertar el logotipo en la esquina superior izquierda (la ms selecta). Pensamos usar la pgina principal como plantilla para todas las subpginas, as que vamos a vincular el logotipo a la pgina principal. De esa forma, cuando use la pgina principal como plantilla, todas las subpginas incluirn automticamente un logotipo que se vincule a la pgina principal index.htm del sitio. Al insertar un logotipo, bsicamente est insertando una imagen. Para insertar una imagen en un documento HTML, se utiliza la etiqueta <IMG> con el atributo SRC, que seala a un grfico en particular. Por ejemplo, para especificar el logotipo del sitio de msica, escribira <IMG SRC="images/logo.gif">. De igual modo, al insertar el logotipo y darle formato como hipervnculo, se utilizan los mismos cdigos HTML que al vincular cualquier grfico. Por lo tanto, debe poner atencin a los pasos siguientes: se descubrir utilizando bastante estos comandos. En primer lugar, vamos a insertar el grfico del logotipo (vincularemos el grfico en breve):
1 Si es necesario, abra el procesador de texto y el archivo index.html.

123

En la primera celda de la primera fila, haga clic despus de la etiqueta <TD VALIGN="top" WIDTH="170">, presione Entrar, presione Tab y escriba la siguiente etiqueta HTML, que seala a la imagen del logotipo:

<IMG SRC="images/logo.gif" ALT="Instruccin musical de Chris" WIDTH="170" HEIGHT="68" BORDER="0">

Sugerencia
Agregar espacios y saltos de lnea en el cdigo HTML no afectar a la apariencia de la pgina Web, por lo que no necesitar hacerlo en el documento HTML para que coincida con los ejemplos del texto. Nuestros ejemplos de texto tenan que acortarse para caber en el diseo de las pginas del curso. Su cdigo se puede escribir como se muestra en las figuras de referencia de HTML del proyecto incluidas en esta leccin.

Con la excepcin del atributo SRC, los atributos de la etiqueta <IMG> usados en el sitio de msica 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. Debera indicar el tamao de las imgenes porque de ese modo los exploradores pueden mostrar la composicin de la pgina Web con ms facilidad y rapidez. Tenga en cuenta que, si cambia el tamao de la imagen (por ejemplo, si la ampla o la reduce), debe hacerlo en el programa de edicin de imgenes y no mediante los atributos WIDTH y HEIGHT del documento HTML; idealmente, preferir que las imgenes tengan un tamao lo ms cercano posible al que se utilizar para mostrarlas en las pginas Web. BORDER especifica el grosor del borde alrededor de la imagen. De forma predeterminada, se muestra un borde de 1 pxel alrededor de los grficos que se han configurado como hipervnculos. Por lo general, los diseadores cambian el valor predeterminado estableciendo el atributo BORDER como "0".

124

Jerga: un delimitador es el componente de texto o grfico en el que se puede hacer clic en un hipervnculo o un rea de destino especificada dentro de un documento. El texto del delimitador se rodea con el par de etiquetas

<A></A>

A continuacin, dar formato a la imagen logo.gif para que acte como hipervnculo a la pgina principal. Bsicamente, la creacin de un hipervnculo conlleva marcar un texto o grfico como delimitador mediante el par de etiquetas <A></A> alrededor del texto o la imagen que desea que acte como hipervnculo y, a continuacin, se especifica al explorador lo que debera mostrarse cuando se haga clic en elemento delimitador. Para hacer que el logotipo sea un hipervnculo, 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 pgina principal. (Como se ha mencionado anteriormente, esta informacin de vinculacin resultar prctica cuando copie la pgina principal para crear subpginas.) Haga clic despus del parntesis angular de cierre > de la etiqueta <IMG...> y escriba </A> para especificar el final del contenido del delimitador.

en los documentos HTML.

Sugerencia
Si usa el Bloc de notas y el cdigo supera el filo de la ventana, abra el men Formato y elija Ajusta de lnea. Cuando se activa Ajuste de lnea, el Bloc de notas ajusta automticamente el texto y lo muestra todo en la ventana actual. 3 Guarde el archivo index.html. Su cdigo HTML debera ser similar al mostrado en la figura 6-13.

Figura 6-13. El cdigo que ha agregado ahora inserta un logotipo y vincula su imagen a la pgina principal.

125

Insercin del grfico de la pancarta de la pgina principal

Una vez insertado el logotipo, insertar el grfico de la pancarta de la pgina 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 grfico, de modo que el procedimiento es bastante fcil. La nica peculiaridad que presenta la insercin del grfico 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 grfico de pancarta en la pgina principal, siga estos pasos:
1 2 Si es necesario, abra el procesador de texto y el archivo index.html. En la segunda celda de la primera fila, haga clic despus de la etiqueta <TD VALIGN="top" WIDTH="*">, presione Entrar, presione Tab y escriba lo siguiente:

<CENTER><IMG SRC="images/t_home.gif" ALT="Instruccin musical de Chris Soll" WIDTH="415" HEIGHT="62" BORDER="0" ALIGN="middle"></CENTER>
3 Guarde el archivo index.html. Su cdigo HTML debera ser similar al de la figura 6-14.

Figura 6-14. El cdigo de la imagen de pancarta especifica a los exploradores qu imagen se debera mostrar como pancarta en la pgina Web index.html.

126

Abra el archivo index.html en el explorador. (Si el archivo index.html ya est abierto en el explorador, haga clic en el botn Actualizar para actualizar la vista.) El explorador debera mostrar su versin 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 grficos insertados. Mantenga el cursor sobre el logotipo o grfico 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 ms recientes no se muestran en el explorador, compruebe que ha guardado su documento HTML. Si sigue sin verlos, haga clic en el botn Actualizar del explorador para asegurarse de que est viendo la versin ms actualizada de su pgina.

Figura 6-15. En este punto, el archivo index.html se ve en un explorador con el logotipo vinculado y el grfico de pancarta de la pgina principal, que se colocan en su posicin mediante una tabla. En la seccin siguiente, comprobar cmo crear una barra de exploracin que puede usar en todo el sitio de msica.

127

Adicin de vnculos de exploracin

La creacin de una barra de exploracin para el sitio de msica implica insertar grficos de botones y vincular cada grfico a una pgina Web. Ya ha incluido el logotipo y el grfico de la pancarta, de modo que sabe cmo usar la etiqueta <IMG>. Adems, ha vinculado el logotipo, con lo que ya le resultan conocidas las etiquetas de delimitacin <A></A>. La nica parte ligeramente delicada del uso de botones de exploracin en el sitio de msica es que cada pgina muestra un botn personalizado para la pgina actual. Por ejemplo, siempre que un usuario visita la pgina principal, se muestra la versin negra del botn Pgina principal y cuando visita otra pgina del sitio, dicho botn se presenta en color rojo oscuro. Esta configuracin se clarificar a medida que avance en esta leccin. Para crear una barra de exploracin en la pgina principal, siga estos pasos:
1 Si es necesario, abra el procesador de texto y el archivo index.html. Colocar la barra de exploracin en la primera columna de la segunda fila de la tabla, con lo que se mostrar en el lateral izquierdo de la pgina. Despus de la segunda etiqueta <TR>, haga clic en la primera etiqueta <TD VALIGN="top">, presione Entrar, presione Tab y escriba <BR> para insertar una lnea en blanco entre el grfico de logotipo y la siguiente barra de exploracin.

En los siguientes pasos, incrustar la etiqueta de imagen de cada botn dentro de una etiqueta de delimitacin que vincule el botn a una pgina Web denominada de forma apropiada. No ha creado las subpginas an, por lo que debe tomar nota de los nombres de archivo proporcionados en las etiquetas de delimitacin. Los nombres de archivo de las subpginas tendrn que coincidir con los de las referencias de los delimitadores. En total, necesita agregar siete botones. Comenzar agregando la versin de la pgina actual del botn Pgina principal. (Recuerde que descarg dos versiones de cada botn: la versin de la pgina actual de un botn tiene un 2 al final del nombre de archivo del botn.)
3 Presione Entrar, presione Tab y escriba lo siguiente:

<A HREF="index.html"><IMG SRC="images/b_home2.gif" ALT="Pgina principal" WIDTH="170" HEIGHT="24" BORDER="0"></A>

4 Escriba <BR><BR> para agregar dos lneas vacas, presione Entrar y presione Tab.

Ahora puede introducir el vnculo y el grfico del siguiente botn.

128

Sugerencia
Puede escribir varias veces el cdigo HTML con varias referencias de archivos HREF, nombres de archivo SRC e informacin ALT, o puede copiar el cdigo que escribi en los pasos 3 y 4, y pegarlo en la celda de la tabla seis veces. A continuacin, 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 lneas adicionales se incluyen porque tambin deseamos insertar el icono Envenos una nota para ofrecer a los usuarios una forma sencilla de enviar mensajes de correo electrnico a Chris.

129

Cuando crea un vnculo de correo electrnico, usa un formato de HREF especial en la etiqueta de delimitacin, como se explica a continuacin. 11 Presione Entrar un par de veces para separar el cdigo HTML de Envenos una nota del cdigo HTML de la barra de exploracin principal, presione Tab y escriba

<A HREF="mailto:mm@creationguide.com"> pero reemplace mm@creationguide.com con su propia

direccin de correo electrnico para que los usuarios puedan abrir un mensaje de correo electrnico en blanco con su direccin cuando hagan clic en el icono Envenos una nota. 12 Inserte el icono Envenos una nota y escriba el texto siguiente para cerrar la referencia de delimitacin:

<IMG SRC="images/sendnote.gif" ALT="Correo electrnico para Chris" WIDTH="170" HEIGHT="77" BORDER="0"></A>

13 Guarde el archivo index.html. Su cdigo HTML debera ser similar al mostrado en la figura 6-16.

Figura 6-16. El cdigo HTML de la barra de exploracin se inserta en una celda de la tabla.

130

14

Abra el archivo index.html en el explorador. Su pgina principal debe incluir ahora una barra de exploracin en la parte izquierda, como se muestra en la figura 6-17. Observe que el botn Pgina principal se muestra de forma diferente a los otros botones para indicar a los usuarios que estn viendo la pgina principal. Haga clic en el logotipo y en el botn Pgina principal para comprobar que la pgina principal se vuelve a mostrar. (Al hacer clic en cualquier otro botn de la barra de exploracin, se producir un error porque an no ha creado esas pginas.) Pase con el cursor sobre cada botn para comprobar que el texto ALT es correcto en cada caso. Haga clic en el icono Envenos una nota para asegurarse de que se abre un mensaje de correo electrnico en blanco y se le enva.

Figura 6-17. Puede probar parte de su cdigo HTML si hace clic en el botn Pgina principal y en la imagen Envenos una nota en la barra de exploracin.

Insercin de la informacin del pie de pgina

Si necesita ms ayuda, vea la figura 6-18 cuando inserte la informacin del pie de pgina del sitio Web.

A continuacin, tiene que agregar la informacin del pie de pgina. El pie de pgina del sitio de msica incluye un grfico de pie de pgina, informacin de la direccin y el nmero de telfono, vnculos de texto que se corresponden con los vnculos de la barra de exploracin y texto de copyright.

131

El proceso de insercin de un grfico de pie de pgina es similar al de insercin del grfico de encabezado descrito anteriormente en esta leccin. La diferencia principal en el rea del pie de pgina es que va a colocar el grfico correspondiente en la segunda celda de la tercera fila y va a insertar cierta informacin adicional en la celda junto con el grfico (segn se describe en la seccin siguiente). Puesto que va a incluir otra informacin debajo del grfico del pie de pgina, anidar el grfico dentro de las etiquetas de prrafo (<P></P>) para asegurarse de que se va a incluir ese espacio sobre el grfico. Vamos a empezar a crear el elemento de pie de pgina insertando el grfico de pie de pgina:
1 2 Si es necesario, abra el procesador de texto y el archivo index.html. En la tercera fila de la tabla, haga clic despus de la segunda etiqueta <TD VALIGN="top">, presione Entrar, presione Tab y, despus, escriba <P ALIGN="CENTER"> para indicar el inicio de un prrafo y especificar que su contenido se alinee al centro. De forma predeterminada, los prrafos se alinean a la izquierda. Especifique la informacin de la imagen del pie de pgina; para ello, inserte la etiqueta de imagen con los atributos siguientes:

<IMG SRC="images/footer.gif" ALT="Instruccin musical de Chris Soll" WIDTH="415" HEIGHT="62" BORDER="0" ALIGN="middle">
4 Escriba </P> para indicar el final de la seccin de prrafo. La etiqueta </P> de cierre es opcional pero, si se agrega, se clarifica el cdigo.

Despus, insertar un segundo prrafo que centre la informacin de la direccin y el nmero de telfono.
5 Presione Entrar dos veces, presione Tab y escriba: Observe la etiqueta <BR> en el cdigo HTML anterior entre el texto de la direccin y el nmero de telfono. Al agregar la etiqueta <BR>, inserta un salto de pgina y muestra el nmero de telfono debajo de la direccin en la lnea siguiente. Ahora, agregar varios vnculos de texto en el rea del pie de pgina que corresponde a los botones de la barra de exploracin; de esa forma, si algn usuario tiene los grficos desactivados, podr seguir explorando su sitio. Para agregar vnculos de texto, debe seguir un procedimiento similar al de creacin de vnculos grficos. La diferencia entre ambas tareas es que debe encerrar el texto entre vnculos de delimitacin en lugar de en una etiqueta IMG, como se muestra en los pasos siguientes. Primero, debe centrar el prrafo que contiene los vnculos de texto.

132

6 7

Presione Entrar dos veces, presione Tab y escriba

<P ALIGN="CENTER">.
Presione Entrar, presione Tab y escriba lo siguiente:

<A HREF="index.html">Pgina principal</A> |

En el vnculo anterior, las palabras Pgina principal se mostrarn como hipertexto en la pgina Web. Si los usuarios hacen clic en las palabras Pgina principal, se visualizar el archivo index.html. Observe tambin la barra vertical (|). Este smbolo se escribe entre cada vnculo de texto para facilitar su diferenciacin. El smbolo es opcional pero se usa bastante. Ahora est preparado para agregar el resto de los vnculos de texto.

Sugerencia
No tiene que presionar Entrar y Tab entre cada una de las entradas de vnculos de texto en los pasos 8 a 14. Los exploradores mostrarn los vnculos en una fila independientemente del espacio que agregue en el documento HTML. Elegimos dar formato a los vnculos de texto del modo descrito para que trabajar con la informacin resultara ms fcil. 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">Informacin de contacto</A> |

La entrada final del vnculo de texto es el equivalente de texto del icono Envenos una nota que insert anteriormente. Por lo tanto, este vnculo de texto usa el componente mailto: en el atributo HREF. Recuerde reemplazar mm@creationguide.com con su direccin de correo electrnico en el paso siguiente.
14 Presione Entrar, presione Tab y escriba:

133

<A HREF="mailto:mm@creationguide.com">Correo electrnico para Chris</A>

15 Para completar el prrafo del vnculo de texto, presione Entrar, presione Tab y escriba </P>.

El componente final del pie de pgina es la informacin de copyright. En esta seccin, crea un prrafo centrado y especifica la informacin de copyright. Una peculiaridad interesante aqu es que puede usar una referencia de una entidad de carcter especial para crear un smbolo de copyright.

Sugerencia
Una referencia de entidad de carcter es una combinacin especial de teclas que incluye el smbolo Y comercial (&) y que le permite mostrar caracteres que no son estndar, como los acentos, los smbolos de marca registrada y otros, en las pginas Web. 16 Presione Entrar dos veces, presione Tab y escriba:

<P ALIGN="CENTER">&copy 2002 Chris Soll. Todos los derechos reservados</P>

17 18 Guarde el archivo index.html. Su cdigo HTML debera ser similar al mostrado en la figura 6-18. Abra el archivo index.html en el explorador. El pie de pgina del archivo index.html debera tener una apariencia semejante a la informacin de pie de pgina en la pgina mostrada en la figura 6-19.

Figura 6-18. En el sitio de msica, la informacin de pie de pgina se agrega a la ltima celda de la tabla.

134

Figura 6-19. Puede ver la forma en que un explorador interpreta el cdigo HTML de pie de pgina si obtiene una vista previa de la pgina index.html del sitio de msica. Puede que se haya cuenta de que ha diseado todo lo que aparece en la pgina principal excepto el contenido bsico. Le encantar or que hay una razn. Ahora que tiene creada la estructura bsica de la pgina principal y dado que piensa imitar dicha estructura en las subpginas, puede utilizar el archivo index.html para crear rpidamente las pginas bsicas en las subpginas, segn se describe en la seccin siguiente.

Copiar el marco de trabajo de la pgina principal para las subpginas

Probablemente, ya haya adivinado que necesitamos crear algunas pginas para vincularlas a la barra de exploracin y a los vnculos de texto. En concreto, en el sitio de msica se llama a las pginas siguientes:
index.html (en cuyo proceso de creacin se encuentra inmerso) lessons.html recitals.html competitions.html performances.html background.html contact.html

135

En esta seccin, va a crear las seis pginas HTML adicionales que conforman el sitio de msica. Podra copiar todo el cdigo de index.html, pegarlo en un documento de texto en blanco y a continuacin guardar el documento en forma de archivo HTML, pero somos demasiado perezosos para eso. A continuacin explicamos cmo nos las arreglamos para crear la mayor parte del cdigo de las subpginas:
1 2 3 4 Abra la carpeta C:\music. Haga clic con el botn secundario del mouse en el archivo index.html y haga clic en Copiar, en el men contextual. Haga clic con el botn secundario del mouse en la carpeta y haga clic en Pegar. Repita cinco veces el paso 3 (de modo que tenga seis copias del archivo index.html). Su carpeta music debera ser similar a la mostrada en la figura 6-20. Haga clic con el botn 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 precisin y con todas las letras en minsculas; si cambia los nombres de los archivos en este momento, los vnculos que haya creado en su cdigo HTML no funcionarn.

Figura 6-20. Al copiar el archivo index.html seis veces se crean plantillas para sus seis subpginas.
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. Abra el procesador de texto, abra el archivo lessons.html y, despus, realice los seis cambios siguientes, que se resaltan en color en la figura 6-21:

136

En la etiqueta <TITLE>, haga clic despus de la palabra Instruccin 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.

Tambin en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instruccin musical de Chris Soll" por el texto ALT="Lecciones".
En el cdigo HTML de la barra de exploracin, cambie el texto del botn Pgina principal b_home2.gif por b_home.gif. Asimismo, en el cdigo HTML de la barra de exploracin, cambie el texto del botn Lecciones b_lessons.gif por b_lessons2.gif.

Figura 6-21. Para usar una copia de index.html como subpgina, tiene que modificar ligeramente el cdigo HTML y adaptar cada pgina.
8
El uso de una pgina de base rellenada para crear las subpginas es un procedimiento rpido y favorece la coherencia en el sitio.

Guarde el archivo lessons.html.

En este momento ha completado el documento bsico para la pgina Lecciones. No ha sido tan difcil! Para comprobar la pgina, haga doble clic en lessons.html con el objeto de ver la pgina 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 personalizacin en los documentos del resto de las subpginas.

137

Abra el archivo recitals.html en el procesador de texto y haga los cambios siguientes:

En la etiqueta <TITLE>, haga clic despus de la palabra Instruccin 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.

Tambin en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instruccin musical de Chris Soll" por el texto ALT="Recitales". En el cdigo HTML de la barra de exploracin, cambie el texto del botn Pgina principal b_home2.gif por b_home.gif. Asimismo, en el cdigo HTML de la barra de exploracin, cambie el texto del botn Recitales b_recitals.gif por b_recitals2.gif. 10 11 Guarde el archivo recitals.html. Abra el archivo competitions.html en el procesador de texto y haga los cambios siguientes:

En la etiqueta <TITLE>, haga clic despus de la palabra Instruccin 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.

Tambin en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instruccin musical de Chris Soll" por el texto ALT="Concursos". En el cdigo HTML de la barra de exploracin, cambie el texto del botn Pgina principal b_home2.gif por b_home.gif. Asimismo, en el cdigo HTML de la barra de exploracin, cambie el texto del botn Concursos b_competitions.gif por b_competitions2.gif. 12 13 Guarde el archivo competitions.html. Abra el archivo performances.html en el procesador de texto y haga los cambios siguientes:

En la etiqueta <TITLE>, haga clic despus de la palabra Instruccin 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

Tambin en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instruccin musical de Chris Soll" por el texto ALT="Actuaciones".

En el cdigo HTML de la barra de exploracin, cambie el texto del botn Pgina principal b_home2.gif por b_home.gif.
Asimismo, en el cdigo HTML de la barra de exploracin, cambie el texto del botn Actuaciones b_performances.gif por b_performances2.gif. 14 15 Guarde el archivo performances.html. Abra el archivo background.html en el procesador de texto y haga los cambios siguientes:

En la etiqueta <TITLE>, haga clic despus de la palabra Instruccin 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.

Tambin en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instruccin musical de Chris Soll" por el texto ALT="Antecedentes". En el cdigo HTML de la barra de exploracin, cambie el texto del botn Pgina principal b_home2.gif por b_home.gif. Asimismo, en el cdigo HTML de la barra de exploracin, cambie el texto del botn Antecedentes b_background.gif por b_background2.gif. 15 16 Guarde el archivo background.html. Abra el archivo contact.html en el procesador de texto y haga los cambios siguientes:

En la etiqueta <TITLE>, haga clic despus de la palabra Instruccin 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.

Tambin en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instruccin musical de Chris Soll" por el texto ALT="Contacto". En el cdigo HTML de la barra de exploracin, cambie el texto del botn Pgina principal b_home2.gif por b_home.gif. Asimismo, en el cdigo HTML de la barra de exploracin, cambie el texto del botn Contacto b_contact.gif por b_contact2.gif.

139

17 18

Guarde el archivo contact.html. Abra el archivo index.html en el explorador. Haga clic en cada botn de la barra de exploracin para comprobar su trabajo. Cuando haga clic en un botn, debe mostrarse una pgina de base; cada subpgina tiene que incluir el texto de la barra de ttulo de la pgina actual, un grfico de pancarta del ttulo personalizado y un botn de barra de exploracin (en negro) de la pgina actual que se corresponda con la pgina mostrada. Adems, en las subpginas no deben mostrarse las lneas del borde de la tabla (ya que cambi el atributo BORDER en la etiqueta <TABLE> por "0" en cada subpgina). En la figura 6-22 se ilustra cmo se debe mostrar la pgina Lecciones en la ventana del explorador.

Figura 6-22. Cada subpgina muestra ahora una pancarta de ttulo personalizado y un botn negro activo. Enhorabuena! Ha creado la estructura de todo el sitio de msica. Ahora insertaremos algo de contenido en la pgina principal.

Insercin de texto en el cuerpo de la pgina principal

En esta seccin, va a insertar un fragmento de texto en el cuerpo de la pgina principal del sitio de msica. Este paso se reduce en realidad a practicar con el formato de texto. El contenido bsico de la pgina principal consta de un par de encabezados, texto en un prrafo, citas coloreadas y una lista sin numerar vinculada. Por lo tanto, como puede imaginar, discutiremos cmo crear estos tipos de elementos en las pginas siguientes.

140

Creacin de encabezados
En el cdigo HTML, puede definir seis niveles de encabezados mediante los pares de etiquetas <H1></H1>, <H2></H2> y sucesivamente hasta <H6></H6>, donde el tamao del encabezado 1 es el mayor y el 6 el menor. La figura 6-23 ilustra un ejemplo de los diversos tamaos de los encabezados.

Figura 6-23. Los encabezados HTML estndar tienen seis tamaos predeterminados. El sitio de msica utiliza una etiqueta de encabezado en la pgina principal, que da formato al mensaje de bienvenida al principio de la pgina:
1 2 Abra el procesador de texto y el archivo C:\music\index.html. En la segunda fila y la segunda celda de la tabla (la celda siguiente a la informacin de la barra de exploracin), haga clic despus 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 estn 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 continuacin, agregar un salto de lnea y un encabezado de bienvenida en la pgina principal del sitio de msica.
4 Presione Entrar, presione Tab, escriba <BR> para agregar un salto de lnea, presione Entrar, presione Tab y escriba la informacin de encabezado siguiente con el tamao 3:

<H3>Bienvenidos al recurso en lnea de Chris Soll, donde se proporciona informacin de sus actuaciones e instruccin musical.</H3>
5 Guarde el archivo index.html. Su cdigo debera ser similar al de la figura 6-24.

Figura 6-24. El cdigo agregado especifica un estilo de fuente e inserta un encabezado de tamao 3.

Adicin de un prrafo de texto

Despus del encabezado de bienvenida que cre en la seccin anterior, agregar texto al cuerpo. Las etiquetas <P></P> son las bsicas que usar al especificar texto en un prrafo, que es lo que va a hacer a continuacin.
1 Haga clic despus de la etiqueta </H3> que cre en la seccin previa, presione Entrar, presione Tab y escriba <P>Conozcan a

Chris!</P>.

142

Presione Entrar, presione Tab y escriba lo siguiente:

<P>En su calidad de profesora de msica con gran experiencia y reconocimiento internacional, ensea piano y flauta a msicos 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 ao, 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 enseanza de Chris:</P>

5 Guarde el archivo index.html.

Su cdigo HTML debera ser similar al de la figura 6-25. Adems, si obtiene una vista previa del archivo index.html en el explorador, la pgina principal debera parecerse a la de la figura 6-26. Su pgina est configurada casi por completo; slo falta agregar una cita o dos, lo que constituye el tema de la seccin siguiente.

Figura 6-25. Este cdigo muestra el texto del prrafo que se agrega a la pgina principal del sitio de msica.

143

Figura 6-26. En este punto, en la pgina principal debera mostrarse el texto de los encabezados y del prrafo.

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 sangra a los mrgenes izquierdo y derecho del texto incluido en ellas. Si realmente desea aplicar sangra al prrafo, puede anidar un comando de cita dentro de otro, como en este ejemplo: <BLOCKQUOTE><BLOCKQUOTE> </BLOCKQUOTE></BLOCKQUOTE>. En esta seccin, 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 despus de Chris:</P> en la segunda celda de la segunda fila de la tabla, presione Entrar dos veces y presione la tecla Tab. Escriba <BLOCKQUOTE><BLOCKQUOTE> para crear una cita anidada dentro de otra. Presione Entrar, presione Tab y escriba lo siguiente:

2 3

<FONT COLOR="maroon"><P><I>Chris es, con mucho, la mejor profesora de msica que he tenido. Me ense ms de lo que podra 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 prrafo.

144

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 7 8 Presione Entrar dos veces, presione Tab y escriba:

<P ALIGN="RIGHT"><I>- Vincent Vanngo</I></P>

Presione Entrar, presione Tab y escriba </FONT> para finalizar el formato de color de fuente rojo oscuro. Presione Entrar dos veces, presione Tab y escriba </BLOCKQUOTE></BLOCKQUOTE> para finalizar la configuracin e formato de cita. Guarde el archivo index.html.

El texto de la cita debera 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 pginas Web para desplazar el texto.

145

Figura 6-28. Para mostrar las citas, Internet Explorer aplica sangra al texto en los mrgenes izquierdo y derecho.

146

Creacin de una lista sin numerar vinculada

El tipo final del texto que crear para la pgina principal del sitio de msica es una lista sin numerar. Este tipo de lista aparece como lista con vietas en una pgina Web, como se muestra en la figura 6-29.

Figura 6-29. De forma predeterminada, las listas sin numerar se muestran con vietas.

Nota
Puede usar los comandos HTML <OL></OL> para crear listas numeradas (ordenadas) o los comandos <UL></UL> para crear listas sin numerar (con vietas). Cada elemento de estas listas se identifica mediante el par de etiquetas <LI></LI>.

En esta seccin, primero agregar un pequeo fragmento de texto que introduce la lista sin numerar y, despus, crear la lista (que incluye vnculos a las pginas 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, despus, escriba el prrafo 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 Amrica.</P>

147

Presione Entrar dos veces, presione Tab y escriba lo siguiente: <P><B>Informacin general del sitio</B></P> En el paso 3, insertar la etiqueta <UL> para comenzar la lista sin numerar. 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 hipervnculo a otra pgina del sitio.
4 Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="lessons.html">Lecciones</A> Informacin sobre cmo recibir instruccin musical de Chris, incluyendo disponibilidad y cuotas.</LI> Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="recitals.html">Recitales</A> Programas, alumnos que participan y ttulos de las piezas representadas en los recitales de los alumnos.</LI> Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="competitions.html">Concursos</A> Fechas, cuotas, normas, programas e informacin de la ceremonia de entrega de premios de los prximos concursos de alumnos.</LI> 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, ubicacin, piezas e informacin de las entradas.</LI> Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="background.html">Antecedentes</A> Formacin, actuaciones y experiencia docente.</LI> Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="contact.html">Contacto</A> Direcciones de correo electrnico, direcciones fsicas, nmeros de telfono y vnculos de mapas que pueden ayudarle cuando solicite recibir las lecciones y desee asistir a las actuaciones o ponerse en contacto con Chris.</LI> Presione Entrar, presione Tab y escriba </UL> para terminar la lista sin numerar. Presione Entrar, presione Tab y escriba </FONT> para completar el texto del cuerpo y finalizar la especificacin de la familia de la fuente. Guarde el archivo index.html.

10 11 12

148

El cdigo de la lista sin numerar debera ser similar al mostrado en la figura 6-30 (y su pgina index.html se debera parecer a la mostrada anteriormente en la figura 6-29).

Figura 6-30. El cdigo HTML resaltado incluye texto de los prrafos y una lista sin numerar, con hipervnculos. Por ltimo, aunque no por ello con menor importancia, insertar una fotografa vinculada en el rea del cuerpo de la pgina principal del sitio de msica.

Insercin y vinculacin de una imagen

En este momento, ya debera estar habituado a insertar y vincular grficos. (Ha adquirido mucha prctica hace un momento mientras creaba la barra de exploracin!) En esta pgina, preferimos mostrar la imagen debajo del encabezado de tamao 3 en la parte derecha de la pgina. Adems, puesto que la fotografa es una imagen de Chris, la vinculamos a la pgina Antecedentes. Para insertar una imagen vinculada dentro del texto del cuerpo de su pgina, siga estos pasos:
1 Abra el archivo index.html en un procesador de texto, si es necesario, haga clic despus 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

Escriba la informacin de imagen y el vnculo 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 aadidos a la etiqueta <IMG>, que se definen como sigue: HSPACE le permite especificar espacio adicional (en pxeles) entre la imagen y el texto en los laterales izquierdo y derecho de la misma. VSPACE permite especificar espacio adicional (en pxeles) entre la imagen y el texto por encima y por debajo de la imagen. ALIGN indica que se alinee la imagen en la pgina y el texto se ajuste en consecuencia. En este ejemplo, la imagen se alinea en el lateral derecho de la pgina. 3 Guarde el archivo index.html.

Finalizando la pgina principal

Por ltimo, debe quitar los bordes de la tabla en la pgina principal para poder anunciar que su proyecto est terminado. Adems, debe comprobar los vnculos y ver todas las pginas con el fin de asegurarse de que el cdigo HTML que ha escrito es correcto. Primero, vamos a deshacernos de los bordes en la pgina principal:
1 2 3 Abra el archivo index.html en un procesador de texto. En la etiqueta <TABLE>, cambie el atributo BORDER de "1" a "0". Guarde el archivo index.html.

Ahora vamos a hacer clic en los vnculos, grficos, texto ALT y otros elementos de la pgina, y los comprobaremos. Por ejemplo, tiene que asegurarse de que en ninguna de las pginas 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, despus, haga clic en cada vnculo (incluidas las imgenes vinculadas, el logotipo, el icono Envenos una nota y los vnculos de texto) para comprobar que funcionan apropiadamente y que las pginas se muestran de forma correcta. Si algn vnculo no responde como se espera, abra el documento HTML correspondiente en el procesador de texto y compruebe el cdigo HTML minuciosamente. Revise los grficos de los botones y las pancartas para asegurarse de que ha incluido los apropiados en cada pgina.

150

Nota
Puede que haya observado que slo hemos proporcionado contenido para la pgina principal. En este momento, pensamos que est suficientemente preparado como para especificar el contenido del resto de las pginas si desea obtener ms prctica en el uso de HTML.

Uso del marco de trabajo del sitio de msica como plantilla

Despus de todo el duro trabajo que le supuesto crear el sitio de msica, deseamos que tenga una plantilla HTML til que pueda personalizar con facilidad. Por lo tanto, vamos a contarle un pequeo secreto. Puede crear un sitio Web con la plantilla del sitio de msica incluso si no tiene ningn grfico. No es necesario que disponga de ninguna imagen de fondo, grficos de pancartas ni botones. Por el contrario, puede crear un sitio Web con los vnculos de texto y los fondos en color si reemplaza los elementos de contenido en las pginas Web del sitio de msica. En la figura 6-31 se ilustra una pgina Web que usa el sitio Web de msica sin grficos.

Figura 6-31. Puede crear un sitio Web basado en texto que use el sitio de msica como plantilla.

151

Sugerencia
Los grficos pequeos de la pgina de ejemplo de la figura 6-35 son imgenes prediseadas que se descargan y se pegan conjuntamente para crear una imagen sencilla. Si prefiere no incluir ningn grfico en la pgina, basta con que elimine la etiqueta <IMG> de su documento HTML.

En la figura 6-32 se muestra la pgina de la plantilla y en la figura 6-33 se ilustra parte de su cdigo fuente. Si desea agilizar el proceso cuando utilice una plantilla para crear una pgina personalizada, haga clic en el men Ver y, despus, en Cdigo fuente para mostrar el cdigo fuente de la plantilla. A continuacin, en la ventana de cdigo fuente, haga clic en el men Archivo, haga clic en Guardar como y guarde el cdigo fuente en el equipo. Ahora, puede modificar su versin local de la plantilla si reemplaza el texto marcador de posicin con su contenido personalizado.

Figura 6-32. Puede modificar la plantilla basada en texto para crear una pgina personalizada.

152

Figura 6-33. Puede copiar el cdigo fuente de la plantilla para tener un buen punto de partida para el cdigo de su pgina personalizada.

Sugerencia
En la figura 6-33, puede ver entradas de cdigo HTML que comienzan con un signo de admiracin y dos guiones: <!-- logo -->. Estos tipos de entradas se denominan comentarios. Los comentarios no se muestran en la pgina 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 cdigo fuente.

Finalmente, observe en la figura 6-33 que el atributo BGCOLOR de la etiqueta <BODY> se ha cambiado de blanco (#ffffff) a prpura (#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 pgina adems 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 pginas Web y los libros de HTML. A continuacin indicamos algunos de nuestros recursos de HTML favoritos:
Castro, Elizabeth. HTML for the World Wide Web. 4 edicin ed. Berkeley, CA: Peachpit Press, 2000. (ISBN: 0-201-35493-4) Este libro muestra visualmente cmo 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 pginas Web con HTML. Una caracterstica agradable de este libro es que ofrece varias oportunidades de aprender de forma prctica. Pgina de recursos de Creation Guide (www.creationguide.com/resources, en ingls) que se actualiza continuamente para incluir los recursos relacionados con el desarrollo Web ms actuales. El sitio Web del World Wide Web Consortium (www.w3.org, en ingls) es el sitio principal en lnea para la mayor parte de las especificaciones de HTML ms recientes. En el momento de redactar este documento, HTML 4.01 es la especificacin aceptada. Use los vnculos Table of Contents, Elements y Attributes (Tabla de contenido, Elementos y Atributos, respectivamente) en la pgina para buscar los comandos HTML y su descripcin. Puede encontrar una lista muy til de elementos HTML en www.w3.org/TR/1999/REC-html401-19991224/index/elements.html (en ingls). Web Developers Virtual Library (www.wdvl.com, en ingls) proporciona recursos, cdigo de ejemplo y tutoriales para desarrolladores Web. webmonkey (http//hotwired.lycos.com/webmokey/, en ingls) proporciona numerosos recursos para desarrolladores en lnea.

154

Puntos clave
Los comandos HTML sirven como instrucciones que indican a un explorador cmo mostrar el contenido de una pgina Web. Los comandos HTML aparecen entre marcas < >, que suelen venir en pares, y en ellos no se distinguen maysculas y minsculas. Las etiquetas HTML de apertura suelen contener atributos que permiten refinar sus instrucciones. Las etiquetas estndar para los documentos HTML son las siguientes: <!DOCTYPE...> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> Si es posible, almacene todos los documentos y grficos de un sitio Web dentro de la misma carpeta principal. Cree una carpeta de imgenes para los grficos del sitio Web dentro de la carpeta principal. Para hacerle la vida ms fcil, idee un sistema de denominacin de grficos que le ayude a diferenciar los diversos tipos de imgenes, como los botones, pancartas, fotografas, etctera. Cuando cree pginas Web, guarde los documentos HTML y valas en un explorador con frecuencia. Compruebe siempre que ha incluido todos los parntesis angulares (<>) y comillas ("") en el cdigo. Si faltan elementos o los comandos HTML estn mal escritos, la pgina puede mostrarse de forma inapropiada o no mostrarse en ningn explorador.

155

LECCIN 7

Creacin de sitios Web con FrontPage

Una vez completada esta leccin, podr:
Usar FrontPage para automatizar la creacin de pginas Web. Disear subpginas a partir de una plantilla estndar, insertar tablas y agregar botones de exploracin y pies de pgina. Definir hojas de estilo en cascada (CSS) para dar formato a las pginas Web. Crear mapas de imgenes y formularios para conseguir que un sitio sea ms interactivo. Utilizar FrontPage para crear una pgina principal. Cuando ve las noticias en la televisin, el nico equipamiento que necesita es el aparato y un lugar donde sentarse. Pero y cuando alquila un vdeo o solicita una pelcula de pago por visin que est repleta de estupendos efectos especiales y tiene una banda sonora imponente? En lugar de acudir a la televisin de 13 pulgadas de andar por casa, es probable que prefiera usar lo ltimo en sistemas para entretenimiento domstico: es decir, el exclusivo sistema que se puede controlar fcilmente mediante un nico control remoto y que tiene una televisin de pantalla grande ultra ntida, con cable digital, estreo Dolby y componentes de sonido envolvente, todo mezclado en las sombras y colocado estratgicamente para lograr una visualizacin ptica y una sensacin acstica de lo ms 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 bsico) puede semejarse a la forma de crear pginas Web con el televisin, la silla y el control remoto, mientras que FrontPage proporciona la solucin al estilo del sistema de lujo para el entretenimiento domstico en el desarrollo de sitios Web. En esta leccin, vamos a ocuparnos de los extras. Para crear las pginas Web descritas en esta leccin, necesitar los siguientes utensilios:
Una copia de Microsoft FrontPage (preferiblemente la versin 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 grficos que usar en el sitio Web que cree con FrontPage.

156

Para empezar a realizar las actividades de esta leccin, 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 leccin.) 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. Cree una carpeta images en C:\sky y copie en ella los siguientes archivos grficos (que se encuentran en la subcarpeta Lesson07 de la carpeta Practice, en el disco duro): b_aboutus.gif b_aboutus2.gif b_contact.gif b_contact2.gif b_gallery.gif b_gallery2.gif b_links.gif b_links2.gif b_meetings.gif b_meetings2.gif b_skyguide.gif b_skyguide2.gif bg.gif bigdip1.gif bigdip2.gif bigdip3.gif bigdip4.gif bigdip5.gif bullet_star.gif corner_botm_left.gif corner_botm_right.gif corner_top_left.gif corner_top_right.gif logo.gif mars.jpg neptune.jpg saturn.jpg solarsystem.gif t_aboutus.gif t_contact.gif t_gallery.gif t_links.gif t_meetings.gif t_skyguide.gif titlebar-home.gif titlebar.gif

Planeamiento del sitio Web con FrontPage

Cuando planeamos inicialmente el sitio del proyecto de esta leccin, pretendamos crear una pgina para un equipo de bisbol 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 astronoma. Terminamos incorporando en l muchas de las funcionalidades que habamos planeado originalmente para el sitio de bisbol. Por ejemplo, en lugar de hacer un mapa de imgenes de una fotografa del equipo en la que se poda hacer clic en la cabeza de cada persona para tener acceso a una pgina personal o de estadsticas, usamos un mapa de imgenes del sistema solar en la que se puede hacer clic en cada planeta para ver una pgina de informacin acerca de l. Esperamos que a medida que experimente con las tcnicas 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 astronoma se adaptara a nuestros propsitos, decidimos que debera constar de una pgina principal personalizada vinculada a subpginas con un formato estndar. El uso de una pgina principal diferente es una tcnica de diseo comn en los sitios Web, que se usa para hacer que la pgina principal destaque de las subpginas. Dado que FrontPage ofrece tantas opciones, cremos que mostrar una pgina principal distinta sera una buena prctica de diseo y tambin nos permitira ensearle algunas caractersticas 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 pgina principal. La figura 7-4 muestra el dibujo de la composicin estndar de la subpgina. Y, finalmente, la figura 7-5 ilustra el esquema del sitio del club de astronoma.

Figura 7-3. Esquema de la pgina principal del club de astronoma que muestra la Osa mayor y contiene vnculos a las subpginas principales del sitio.

158

Figura 7-4. Dibujo de una subpgina tpica del club de astronoma que ilustra que las subpginas se estructurarn de forma diferente a la pgina principal.

159

Figura 7-5. El esquema del sitio Web del club de astronoma clarifica su jerarqua. Debido a la relativa complejidad de la pgina principal, va a crearla en ltimo lugar. En este proyecto, para comenzar el proceso de diseo, consolidar la composicin estndar del sitio para las subpginas creando un documento subpgina.htm que puede usar como plantilla al crear las pginas del sitio. Pero, en primer lugar y antes de comenzar a crear pginas Web, debe indicarle a FrontPage que desea crear un nuevo Web.

160

Creacin de un nuevo Web

Como hemos mencionado en la seccin anterior, el primer paso para disear un sitio Web es indicar su intencin de crear pginas Web en FrontPage mediante la creacin de un nuevo Web. Para ello, siga estos pasos:
FrontPage hace referencia a los sitios Web como Webs.

Compruebe que ha creado una carpeta denominada C:\sky\images en la que haya colocado las imgenes que copi de la subcarpeta Lesson07, que se encuentra en la carpeta Practice, en el disco duro. Adems, debe asegurarse de que ha copiado los archivos mars.doc y thankyou.htm de la carpeta Lesson07 y los ha almacenado en C:\sky. Abra FrontPage y cierre el documento en blanco, si se muestra alguno. Si el panel Pgina o Web no aparece, abra el men Archivo, seleccione Nuevo y haga clic en Pgina o Web. En la seccin Nuevo, haga clic en la opcin Sitio Web vaco y se abrir el cuadro de dilogo Plantillas de sitio Web. Haga clic en el cuadro de texto Especifique la ubicacin del nuevo sitio Web, resalte el texto existente, escriba C:\sky o haga clic en Examinar y vaya a C:\sky, y, a continuacin, haga clic en Aceptar. Despus 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 ttulo de FrontPage cambia a Microsoft FrontPage -C:\sky, lo que significa que est preparado para la accin. 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 grficos almacenados en la carpeta C:\sky\images y los archivos mars.doc y thankyou.htm almacenados en C:\sky.

2 3 4

Nota
Aunque es conveniente tener preparadas de antemano todas las imgenes que piense usar en su sitio Web, no es necesario. Pero, puesto que los grficos del club de la astronoma estn ya disponibles (y dado que este curso trata de la creacin de pginas Web y no de grficos Web), puede simplificar la creacin del Web en este proyecto (o de cualquier otro con respecto a esa cuestin) si organiza los grficos del sitio antes de empezar a crearlo. 6 Haga clic en el icono Pgina de la barra de vistas y en el botn Crear una pgina normal nueva en la barra de herramientas estndar para abrir una pgina en blanco (observe que el texto de la barra de ttulo de FrontPage cambia a Microsoft FrontPage -C:\sky\pagina_nueva_1.htm).

Ahora est listo para crear una subpgina estndar que puede usar como plantilla en el sitio Web del club de astronoma.

161

Creacin de la composicin de la subpgina

En esta seccin, crear la composicin de una subpgina estndar que podr copiar y usar con el fin de crear pginas de base para cada subpgina del sitio. En primer lugar, configurar las propiedades de pgina de la subpgina.

Configuracin de las propiedades de pgina

Para empezar, compruebe que en FrontPage aparece un rea de trabajo en blanco. Si sigui los pasos de la seccin anterior, debe ver la pgina. A continuacin se enumeran los pasos necesarios para crear una subpgina bsica:
1 Haga clic con el botn secundario del mouse (ratn) en la pgina y seleccione Propiedades de pgina. Se abre el cuadro de dilogo Propiedades de pgina. En el cuadro de texto Ttulo, en la ficha General, escriba Club de la astronoma, como se ilustra en la figura 7-6.

Para ver una vista en miniatura de una imagen seleccionada en el cuadro de dilogo Seleccionar imagen de fondo, haga clic en la flecha de lista desplegable Vistas en la barra de herramientas del cuadro de dilogo y seleccione Vista previa.

Figura 7-6. Puede especificar el texto del ttulo en el cuadro de dilogo Propiedades de pgina.
3 Haga clic en la ficha Fondo, active la casilla de verificacin Imagen de fondo para especificar que desea que la pgina use una imagen de fondo y, despus, haga clic en Examinar.

162

En el cuadro de dilogo Seleccionar imagen de fondo, haga doble clic en la carpeta images en C:\sky y, despus, haga clic en bg.gif, como se ilustra en la figura 7-7. Haga clic en Abrir para seleccionar la imagen de fondo y vuelva al cuadro de dilogo Propiedades de pgina.

Figura 7-7. Para asignar una imagen de fondo a la pgina Web, seleccione bg.gif en el cuadro de dilogo Seleccionar imagen de fondo.
6 Continuando en la ficha Fondo, haga clic en la casilla de verificacin Habilitar efectos de conversin de hipervnculos y, despus, haga clic en el botn Estilo de conversin. Se abre el cuadro de dilogo Fuente. En el rea Fuente, conserve la seleccin (Fuente predeterminada) y, en el cuadro de texto Estilo de fuente, seleccione Normal. 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 opcin especifica que los vnculos de texto se muestren en rojo siempre que el cursor del mouse del usuario pase sobre el vnculo de texto. Despus, en la ficha Fondo, haga clic en la flecha de lista desplegable Fondo y haga clic en el cuadro de color negro, a continuacin, 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, debera configurar el color del texto predeterminado en negro incluso aunque el fondo tambin tenga configurado este color.
Jerga: un hipervnculo activo hace referencia a un hipervnculo en el que se ha hecho clic. Si establece en rojo la propiedad de color para los hipervnculos activos, un hipervnculo se mostrar en rojo mientras el usuario haga clic en el vnculo.

Haga clic en la flecha de lista desplegable Hipervnculo y en el cuadro de color azul; haga clic en la flecha de lista desplegable Hipervnculo visitado y en el cuadro de color prpura; a continuacin, haga clic en la flecha de lista desplegable Hipervnculo activo y haga clic en el cuadro de color rojo. La ficha Fondo debera 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 pgina Web actual.

164

Incluso aunque en el proyecto se usen los colores predeterminados para los hipervnculos, debera hacer clic en los cuadros de color de cada componente para reemplazar la configuracin de color automtica de cada elemento. Si no reemplaza los colores automticos con los especificados, algunos exploradores podran insertar colores personalizados para los hipervnculos que pueden no funcionar bien en su sitio; por ejemplo, si los hipervnculos que visita un usuario se configuran con el color negro, los vnculos desaparecern en el fondo negro cuando los usuarios hagan clic en ellos. 10 Haga clic en Aceptar para implementar la configuracin de Propiedades de pgina y cerrar el cuadro de dilogo Propiedades de pgina.

Guardar su trabajo
Antes de ir ms lejos, debe guardar su trabajo. Podr usar la misma configuracin bsica en todas las subpginas, as que guardar la pgina que est creando en este momento como plantilla genrica que puede copiar para crear todas las subpginas del sitio. Para guardar el archivo actual, siga estos pasos:
1 2 En el men Archivo, haga clic en Guardar. En el cuadro de dilogo Guardar como, haga clic en el botn Cambiar ttulo (que se encuentra en la parte inferior derecha del cuadro de dilogo) para abrir el cuadro de dilogo Establecer ttulo de la pgina y cambie el texto por Club de la astronoma: pgina genrica, como se muestra en la figura 7-9. A continuacin, haga clic en Aceptar.

Figura 7-9. El cuadro de dilogo Establecer ttulo de pgina se configura para modificar el texto del ttulo de una pgina.
3 En el cuadro Nombre de archivo, escriba subpgina y, a continuacin, haga clic en Guardar.

165

Adicin del logotipo y el grfico de la pancarta de ttulo

En esta seccin, continuar configurando la plantilla de las subpginas; para ello, insertar el logotipo del club de astronoma y el grfico de la pancarta de ttulo, que aparecen en la parte superior de cada pgina:
1 En el documento C:\sky\subpgina.htm (que debe estar abierto en FrontPage si contina con el proyecto a partir de la seccin anterior), haga clic en el men Insertar, seleccione Imagen y, despus, elija Desde el archivo.

Sugerencia
Si cerr el documento subpgina.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 dilogo Abrir y hace doble clic en subpgina.htm. 2 En el cuadro de dilogo Imagen, muestre el contenido de la carpeta de imgenes 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 pgina. En la barra de herramientas estndar, haga clic en el botn Insertar imagen desde archivo y haga doble clic en el archivo titlebar.gif. La imagen de la barra de ttulo se inserta junto al logotipo. Haga clic con el botn 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 seccin Representaciones alternativas, escriba Logotipo del Club de la astronoma y haga clic en Aceptar. Haga clic con el botn 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 seccin Representaciones alternativas, escriba Club de la astronoma y haga clic en Aceptar. Vuelva a hacer clic con el botn secundario del mouse en la imagen del logotipo, seleccione Hipervnculo, escriba index.htm en el cuadro de texto Direccin y haga clic en Aceptar.

166

En este punto, el logotipo se vincula a la pgina principal (futura) y ambos grficos se insertan y se alinean a la izquierda, de forma predeterminada. En la mayor parte de los exploradores, la alineacin a la izquierda ayudar a mantener los grficos juntos pero puesto que las dos imgenes ocupan la parte superior de la pgina, la barra de ttulo podra ajustarse en la lnea siguiente en algunos exploradores, si los usuarios cambian el tamao de la ventana de su explorador por uno muy pequeo, en cuyo caso el logotipo se mostrara en la lnea superior y la barra de ttulo se desplazara a la izquierda debajo del grfico del logotipo en la lnea siguiente, efecto que no es el que se persigue en este sitio Web. Slo para asegurarnos, puede agregar las etiquetas HTML que impiden realizar un salto de lnea (<NOBR></NOBR>) al cdigo fuente de la pgina con el fin de especificar que los dos grficos se deben mantener juntos independientemente del tamao de la ventana del explorador.
7 En FrontPage, haga clic en la opcin de vista HTML. El cdigo 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 cdigo.
8 9 Haga clic en Herramientas, haga clic en Opciones de pgina y muestre la ficha Cdigo fuente HTML. En la seccin General, haga clic en Cambiar el formato con las reglas siguientes, active la casilla de verificacin Permitir saltos de lnea dentro de etiquetas en la seccin Formato y haga clic en Aceptar. Ahora podr ver el cdigo HTML sin tener que desplazarse a la izquierda y a la derecha demasiado, lo que significa que ya puede agregar las etiquetas <NOBR></NOBR>. En el cdigo fuente, haga clic despus de la etiqueta de apertura de prrafo (<p>), escriba <NOBR>, haga clic antes de la etiqueta de cierre de prrafo (</p>) y escriba </NOBR>. La figura 7-10 muestra las etiquetas HTML recin agregadas (en color naranja) que garantizarn que los grficos se muestren siempre uno junto al otro.

10

167

Figura 7-10. Al agregar las etiquetas <NOBR> y </NOBR> al cdigo fuente de una pgina, se asegura de que un salto de lnea no separe elementos particulares.
11 Haga clic en Guardar (el cdigo en maysculas cambiar automticamente y se pondr en minsculas) y, despus, haga clic en la ficha vista Normal para volver a mostrar la representacin grfica de subpgina.htm en su rea de trabajo. La pgina debera ser similar a la de la figura 7-11.

Figura 7-11. En este punto, el archivo subpgina.htm incluye imgenes de fondo, del logotipo y de la barra de ttulo.

168

Insercin de una tabla

En esta seccin, crear la tabla de base que se usa para contener el texto del cuerpo de cada subpgina en el sitio Web del club de astronoma. Tmese su tiempo en los pasos siguientes: es ms fcil configurar la tabla correctamente la primera vez que intentar buscar una configuracin errnea. Adems, aunque podra parecer que esta seccin 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 tambin. 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 grfico y presione Mays+Entrar para colocar el cursor donde desee insertar la tabla. En la barra de herramientas estndar, haga clic en el botn Insertar tabla, arrastre para seleccionar dos filas y cinco columnas de cuadros en la ventana emergente y, despus, suelte el botn para insertar la tabla en la pgina. En la figura 7-12 se ilustra el proceso de creacin de la tabla. Como puede ver, los bordes se muestran cuando inserta por primera vez una tabla. En efecto, los bordes de la tabla estn configurados para mostrarse con 1 pxel de ancho. Despus, cuando rellene la tabla, cambiar la configuracin de los bordes con el valor cero (0) para ocultar las lneas.

Figura 7-12. De forma predeterminada, FrontPage crea las tablas con un borde de 1 pxel.

169

Haga clic con el botn 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 opcin Tamao en Bordes est configurado como 1 y haga clic en Aceptar. Haga clic con el botn secundario del mouse en la fila 1, columna 1. En el men contextual, seleccione Propiedades de celda. En el cuadro de dilogo Propiedades de celda, configure la opcin Alineacin horizontal como Centrar, la opcin Alineacin vertical como Superior, compruebe que la casilla de verificacin Especificar ancho est activada, escriba 130 en el cuadro de texto Especificar ancho y seleccione la opcin En pxeles, como se muestra en la figura 7-13.

4 5

Figura 7-13. El cuadro de dilogo Propiedades de celda se usa para configurar una celda de una tabla.

170

6
No olvide guardar con frecuencia su trabajo!

Haga clic en Aceptar para activar la configuracin. Haga clic con el botn secundario del mouse en la fila 2, columna 1. En el men contextual, seleccione Propiedades de celda. En el cuadro de dilogo Propiedades de celda, configure la opcin Alineacin horizontal como Centrar, Alineacin vertical como Inferior, Especificar ancho como 130 pxeles, active la casilla de verificacin Especificar alto, configure la opcin Especificar alto como 15 pxeles y haga clic en Aceptar. Haga clic con el botn secundario del mouse en la celda de la fila 1, columna 2. Seleccione Propiedades de celda. Configure la opcin Alineacin horizontal como Izquierda, la opcin Alineacin vertical como Superior, la opcin Especificar ancho como 1 pxel y haga clic en Aceptar (no se preocupe si no ve un cambio en la tabla en este momento, la celda no cambiar de tamao hasta que tambin le d formato debajo). Haga clic con el botn secundario del mouse en la celda de la fila 2, columna 2. Seleccione Propiedades de celda. Configure la opcin Alineacin horizontal como Izquierda, la opcin Alineacin vertical como Inferior, la opcin Especificar ancho como 1 pxel, active la casilla de verificacin Especificar alto, configure la opcin Especificar alto como 15 pxeles y haga clic en Aceptar. (Ahora la segunda columna de la tabla debe tener 1 pxel de ancho.) Haga clic con el botn secundario del mouse en la celda de la fila 1, columna 3. En el men contextual, seleccione Propiedades de celda, configure la opcin Alineacin horizontal como Izquierda, la opcin Alineacin vertical como Superior, la opcin Especificar ancho como 15 pxeles, especifique Color de fondo como Blanco y haga clic en Aceptar. Haga clic con el botn secundario del mouse en la celda de la fila 2, columna 3. En el men contextual, seleccione Propiedades de celda, configure la opcin Alineacin horizontal como Izquierda, la opcin Alineacin vertical como Inferior, la opcin Especificar ancho como 15 pxeles, haga clic en la casilla de verificacin Especificar alto, configure la opcin Especificar alto como 15 pxeles, especifique Blanco como Color de fondo y haga clic en Aceptar. Haga clic con el botn secundario del mouse en la celda de la fila 1, columna 4. En el men contextual, seleccione Propiedades de celda, configure Alineacin horizontal como Izquierda, Alineacin vertical como Superior, desactive la casilla de verificacin Especificar ancho (no establezca ningn ancho para esta columna porque tendr que cambiar el tamao de forma que quepa en la ventana del explorador de cada usuario), especifique Blanco como Color de fondo y haga clic en Aceptar.

7 8

10

11

12

13

171

14

Haga clic con el botn secundario del mouse en la celda de la fila 2, columna 4. En el men contextual, seleccione Propiedades de celda, configure la opcin Alineacin horizontal como Izquierda, la opcin Alineacin vertical como Inferior, desactive la casilla de verificacin Especificar ancho, active la casilla de verificacin Especificar alto, configure la opcin Especificar alto como 15 pxeles, especifique Blanco como Color de fondo y haga clic en Aceptar. Haga clic con el botn secundario del mouse en la celda de la fila 1, columna 5. En el men contextual, seleccione Propiedades de celda, configure la opcin Alineacin horizontal como Derecha, la opcin Alineacin vertical como Superior, la opcin Especificar ancho como 15 pxeles, especifique Blanco como Color de fondo y haga clic en Aceptar. Haga clic con el botn secundario del mouse en la celda de la fila 2, columna 5. En el men contextual, seleccione Propiedades de celda, configure la opcin Alineacin horizontal como Derecha, la opcin Alineacin vertical como Inferior, la opcin Especificar ancho como 15 pxeles, la opcin Especificar alto como 15 pxeles, especifique Blanco como Color de fondo y haga clic en Aceptar. La tabla ahora debera ser similar a la mostrada en la figura 7-14.

15

16

Figura 7-14. Puede modificar la composicin 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 grficos pequeos a las celdas de la esquina del rea de color blanco para crear la ilusin 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 cmo quedan los grficos en la esquina, vea los grficos curvos pequeos en un programa de pintura u obtenga una vista previa de la imagen en el cuadro de dilogo Insertar imagen. Puede imaginar fcilmente el modo en que la curva pequea puede crear la ilusin 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 estndar y haga doble clic en la imagen corner_botm_left.gif en la carpeta C:\sky\images. Haga clic con el botn secundario del mouse en la imagen corner_botm_left.gif recin 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 Alineacin y haga clic en Aceptar. Haga clic en la celda de la fila 1, columna 5 (dado que dio formato a la celda para alinear la informacin a la derecha, el cursor aparecer a la derecha de la celda). Haga clic en Insertar imagen desde archivo en la barra de herramientas estndar y haga doble clic en la imagen corner_top_right.gif en la carpeta C:\sky\images. 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. Haga clic con el botn secundario del mouse en la imagen corner_botm_right.gif recin 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 Alineacin y haga clic en Aceptar.

19

20

21

22

173

23

Haga clic en Guardar en la barra de herramientas. En este punto, su tabla debera mostrarse como en la figura 7-15.

Figura 7-15. Los grficos pequeos agregados a las celdas de la tabla crean la apariencia de que las esquinas son redondeadas.

Adicin de botones de exploracin

Ahora que la tabla est creada, puede empezar a rellenar sus celdas. En primer lugar, hay que agregar algunos botones de exploracin a la primera columna. FrontPage ofrece algunos botones con efectos especiales bonitos, que va a usar en este proyecto:
1 2 Haga clic en la celda de la fila 1, columna 1. En el men Insertar, seleccione Componente Web, seleccione Efectos dinmicos en la seccin Tipo de componente, elija Botn activable en la seccin Elegir un efecto (observe que la descripcin del componente se muestra a continuacin de los cuadros de lista en el cuadro de dilogo Insertar componente Web; a medida que haga clic en los efectos, la descripcin cambia) y haga clic en Finalizar.

174

Configure el cuadro de dilogo Propiedades de botn activable, como se muestra en la figura 7-16, con las opciones siguientes:

Opcin Texto de botn Vincular a Color del botn Efecto Ancho Color de fondo Color de efecto Alto

Valor Pgina principal index.htm Azul marino Brillo 120 Automtico Azul 24

Figura 7-16. FrontPage permite crear botones activables si configura el cuadro de dilogo Propiedades de botn activable.
4 5 Haga clic en Aceptar. Presione Entrar. En la barra de herramientas estndar, haga clic en Componente Web, compruebe que las opciones Efectos dinmicos y Botn activable estn seleccionadas, y haga clic en Finalizar. Escriba Acerca de nosotros en el cuadro de texto Texto de botn, escriba aboutus.htm en el cuadro de texto Vincular a, especifique el resto de las opciones segn se indica en el paso 3 y haga clic en Aceptar. Presione Entrar. Haga clic en Componente Web, compruebe que las opciones Efectos dinmicos y Botn activable estn seleccionadas y haga clic en Finalizar. Escriba Contactar en el cuadro de texto Texto de botn, escriba contact.htm en el cuadro de texto Vincular a, especifique el resto de las opciones segn se indica en el paso 3 (que es la predeterminada) y haga clic en Aceptar.

175

Presione Entrar. Haga clic en Componente Web, compruebe que las opciones Efectos dinmicos y Botn activable estn seleccionadas y haga clic en Finalizar. Escriba Reuniones en el cuadro de texto Texto de botn, escriba meetings.htm en el cuadro de texto Vincular a, especifique el resto de las opciones segn se indica en el paso 3 y, despus, haga clic en Aceptar. Presione Entrar. En el men Insertar, haga clic en Componente Web, compruebe que las opciones Efectos dinmicos y Botn activable estn seleccionadas, y haga clic en Finalizar. Escriba Mapa del cielo en el cuadro de texto Texto de botn, escriba skyguide.htm en el cuadro de texto Vincular a, especifique el resto de las opciones segn se indica en el paso 3 y, despus, haga clic en Aceptar. Presione Entrar. Haga clic en Componente Web, compruebe que las opciones Efectos dinmicos y Botn activable estn seleccionadas y haga clic en Finalizar. Escriba Galera de fotos en el cuadro de texto Texto de botn, escriba gallery.htm en el cuadro de texto Vincular a, especifique el resto de las opciones segn se indica en el paso 3 y haga clic en Aceptar. Presione Entrar. Haga clic en Componente Web, compruebe que las opciones Efectos dinmicos y Botn activable estn seleccionadas y haga clic en Finalizar. Escriba Vnculos de astronoma en el cuadro de texto Texto de botn, escriba links.htm en el cuadro de texto Vincular a, especifique el resto de las opciones segn se indica en el paso 3 y, despus, haga clic en Aceptar. Haga clic en Guardar. La subpgina debera verse en las vistas Normal y Vista previa como se ilustra en la figura 7-17.

10

11

Figura 7-17. La tabla y los botones de exploracin se ven en la vista Normal pero todava no en Vista previa.

176

Como puede ver en la figura 7-17, FrontPage 2002 tropieza con un pequeo fallo tcnico cuando se insertan los botones activables; bsicamente, no puede obtener una vista previa de ellos en la pantalla Vista previa de forma automtica (observe las imgenes de vnculo errneo en la pantalla de Vista previa que se ven en la figura 7-17). Con el tiempo, Microsoft podra ofrecer una revisin para corregir esto pero, por ahora, dispone de dos opciones para evitar este problema:
Para obtener una vista previa de sus imgenes 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 cdigo de cada botn activable para corregir el problema. Si elige obtener una vista previa de sus pginas Web en el explorador durante el resto de este ejercicio, siga adelante, omita la siguiente seccin y elija Vista previa en el explorador, en el men archivo, o haga clic en el botn Vista previa en el explorador, en la barra de herramientas estndar, cada vez que le sugiramos que puede ver su pgina Web. Si prefiere retocar el cdigo HTML un poco para evitar que se abra el explorador en la leccin, a continuacin le indicamos cmo. Los pasos son fciles de seguir y constituyen un primer ejemplo que ilustra cmo conocer un poco de cdigo HTML puede servir de ayuda cuando se trabaja con editores HTML. Haga clic en HTML en la parte inferior de la ventana para mostrar el cdigo HTML de su pgina.

12

El cdigo de cada botn activable aparece entre un par de etiquetas <applet> </applet>, de modo que debe ver siete de estos pares en HTML. Puede indicar a qu botn se aplica un subprograma si observa el atributo value del parmetro que define el texto del botn. Por ejemplo, a continuacin puede ver todo el cdigo del subprograma de un botn; observe que la quinta lnea indica que se aplica al botn Pgina 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="Pgina principal"> <param name="effect" value="glow"> <param name="url" valuetype="ref" value="index.htm"> </applet><p>

177

El problema en este cdigo de botn activable radica en el atributo codebase="./" de la primera lnea 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 pgina Web, con lo que no es necesario que los exploradores lo busquen en un subdirectorio. Aunque esta explicacin podra sonar un poco obtusa, la solucin es simple: slo 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 continuacin. 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 botn secundario del mouse y elija Eliminar). Repita el paso 13 en el cdigo del subprograma de cada botn (recuerde: tiene siete botones, por lo que debera eliminar codebase="./" siete veces). Guarde su archivo y haga clic en Vista previa en la parte inferior de la ventana de FrontPage. Cuando haya guardado los cambios del cdigo, los botones activables se deberan ver en el modo Vista previa tal como se esperaba.

14

15

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 cdigo de cada botn.

178

Sugerencia
Si encuentra problemas mientras trabaja en FrontPage (o en cualquier otra aplicacin de Microsoft), un recurso fantstico al que puede acudir es Microsoft Knowledge Base en lnea. Para tener acceso a Knowledge Base, visite http:/ support.microsoft.com/default.aspx?LN=ES en el explorador y haga clic en el vnculo Buscar en Knowledge Base.

Adicin de la informacin del pie de pgina debajo de la tabla

Los componentes finales que va a agregar a la plantilla de la subpgina antes de empezar a crear pginas de sitios reales son los elementos de la parte inferior de la pgina: una barra de exploracin de texto e informacin de copyright. Como explicamos anteriormente en este curso, las pginas Web deben incluir vnculos de exploracin de texto para los usuarios que desactivan los grficos o tienen acceso al Web con exploradores que no los admiten. Asimismo, debera incluir informacin de copyright para proteger su creacin. Si desea agregar informacin al final de la pgina en el sitio Web del club de astronoma, siga estos pasos:
1 En la vista Normal, haga clic en el rea a continuacin de la tabla, haga clic en la flecha de lista desplegable en el botn Color de fuente de la barra de herramientas Formato y haga clic en el cuadro del color blanco. Escriba (incluyendo los caracteres de barra vertical) Pgina principal | Acerca de nosotros | Contactar | Reuniones | Mapa del cielo | Galera de fotos | Vnculos Seleccione la lnea o el texto que ha escrito, muestre la lista desplegable en la barra de herramientas Formato y elija Comic Sans (o Comic Sans MS). Haga clic en el botn Centrar de la barra de herramientas Formato para centrar el texto. Haga clic al final de la lnea de texto, presione Entrar y escriba Tiene cuestiones o comentarios acerca del sitio Web? Enve un mensaje de correo electrnico al administrador del Web. Presione Entrar, muestre la lista desplegable Tamao de fuente en la barra de herramientas Formato, elija 1 (8 pt) y, despus, escriba Copyright [el ao actual] [su nombre o el nombre de su organizacin]. Presione Entrar y haga clic en Guardar en la barra de herramientas estndar.

4 5

179

Tambin puede presionar Alt+Ctrl+K para abrir el cuadro de dilogo Insertar hipervnculo.

Ahora puede vincular el texto de la barra de exploracin y agregar un vnculo Enviar correo a al texto Enve un mensaje de correo electrnico al administrador del Web:
8 Seleccione Pgina principal en la barra de exploracin de texto, haga clic con el botn secundario del mouse en el texto seleccionado y haga clic en Hipervnculo. En el cuadro de dilogo Insertar hipervnculo, compruebe que en la lista desplegable Buscar en aparece sky, haga clic en el cuadro de texto Direccin, escriba index.htm (asegrese de eliminar http:// si aparece), como se muestra en la figura 7-19, y haga clic en Aceptar o presione Entrar.

Si desea agregar informacin de pantalla a sus hipervnculos, haga clic en el botn Informacin de pantalla en el cuadro de dilogo Insertar hipervnculo.

Figura 7-19. El cuadro de dilogo Insertar hipervnculo permite configurar fcilmente hipervnculos en FrontPage.
10 Repita los pasos 8 y 9 con los parmetros siguientes:

Seleccione y haga clic con el botn secundario del mouse Acerca de nosotros Contactar Reuniones Mapa del cielo Galera de fotos Vnculos

Especifique en el cuadro de texto Direccin

aboutus.htm contact.htm meetings.htm skyguide.htm gallery.htm links.htm

180

11

Seleccione el texto Enve un mensaje de correo electrnico al administrador del Web, haga clic con el botn secundario del mouse en el texto seleccionado y haga clic en Hipervnculo para abrir el cuadro de dilogo Insertar hipervnculo. En el cuadro de dilogo Insertar hipervnculo, haga clic en el botn Direccin de correo electrnico en la seccin Vincular a, segn se ilustra en la figura 7-20.

12

Figura 7-20.

Puede crear hipervnculos que abran automticamente un formulario de mensaje con una direccin predeterminada.
13 Especifique su direccin de correo electrnico en el cuadro de texto Direccin de correo electrnico, escriba Club de la astronoma en el cuadro de texto Asunto (vea la figura 7-20), haga clic en Aceptar y, despus, guarde su trabajo. La parte inferior de la plantilla de la subpgina debera ser similar a la de la figura 7-21, que se muestra en la pantalla Vista previa (recuerde: si no modific el cdigo del subprograma del botn activable, tendr que elegir Vista previa en el explorador, en el men Archivo, para que la vista previa de la pgina Web de la subpgina se vea correctamente). Observe igualmente que la fecha de copyright y el nombre de la organizacin dependern de la informacin que suministre.

181

Figura 7-21. La informacin del pie de pgina de la subpgina proporciona a los visitantes vnculos de texto, acceso al administrador del Web e informacin de copyright.
14 Cierre el archivo subpgina.htm.

Ahora tiene una plantilla de subpginas preparada para utilizarla.

Uso del diseo de la subpgina para crear pginas Web

Ahora va a usar el archivo subpgina.htm con el fin de crear un par de subpginas para el sitio Web del club de astronoma. El sitio requiere seis subpginas principales:
aboutus.htm contact.htm meetings.htm skyguide.htm gallery.htm links.htm

182

En esta seccin, completar las pginas contact.htm y skyguide.htm, adems de una subpgina (mars.htm) de la pgina skyguide.htm. Aunque no explicamos paso a paso cmo crear todas las subpginas, las imgenes que copi en la carpeta C:\sky\images desde la subcarpeta Lesson07 de la carpeta Practice incluyen grficos de barra de ttulo de modo que puede completar todas las subpginas solo, si lo desea. Decidimos ensearle cmo completar mars.htm, skyguide.htm y contact.htm porque en el procedimiento de creacin de cada una de estas pginas se incluye informacin de cmo agregar una funcionalidad concreta a las pginas Web, por ejemplo:
mars.htm Muestra cmo usar la caracterstica de vistas en miniatura en FrontPage adems de copiar texto de un documento de Word y modificar las hojas de estilo en cascada. Asimismo, esta pgina tiene vnculos a la pgina Mapa del cielo (skyguide.htm). skyguide.htm Ensea cmo crear un mapa de imgenes en FrontPage. contact.htm Proporciona una introduccin rpida al modo de crear un formulario en FrontPage.

Despus de crear las tres subpginas descritas en este proyecto, estar totalmente preparado para experimentar y completar el resto de las pginas usted mismo.

Preparacin para crear subpginas

La preparacin para crear subpginas es sencilla, ahora que ha adquirido conocimientos prcticos slidos al crear la plantilla subpgina.htm. Para usarla, simplemente tiene que guardar copias del archivo subpgina.htm con nombres diferentes y algo de texto, como se explica a continuacin:
1 2 Abra el archivo C:\sky\subpgina.htm en FrontPage. En el men Archivo, haga clic en Guardar como para abrir el cuadro de dilogo Guardar como, y compruebe que en el cuadro de texto Guardar en parece la carpeta C:\sky. En la seccin Ttulo de pgina, haga clic en el botn Cambiar ttulo, escriba Club de la astronoma: acerca de nosotros en el cuadro de dilogo Establecer el ttulo de la pgina y haga clic en Aceptar.

Sugerencia
Puede cambiar el texto del ttulo de una pgina Web en cualquier momento. Para ello, en el men Archivo, haga clic en Propiedades, cambie el texto de Ttulo y haga clic en Aceptar. Agreg texto para los ttulos de cada pgina a medida que las ha ido creando en la seccin anterior.

183

En el cuadro de texto Nombre de archivo, escriba aboutus.htm y haga clic en Guardar. Observe que la ficha de la pgina Web cambia (debajo de las barras de herramientas) para reflejar el nuevo nombre del documento actual. 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 ttulo que se indican en la tabla de la pgina siguiente:

Guardar como nombre de archivo contact.htm

meetings.htm skyguide.htm gallery.htm links.htm mars.htm

Texto del ttulo de la pgina Club de la astronoma: Contactar Club de la astronoma: Reuniones Club de la astronoma: Mapa del cielo Club de la astronoma: Galera de fotos

Sugerencia Tiene que denominar a las subpginas de la misma forma en que hizo referencia a ellas cuando vincul los botones de exploracin y vnculos de hipertexto. Por ejemplo, la subpgina Acerca de nosotros debe guardarse con el nombre aboutus.htm. No altere los nombres de archivo en este momento. 6 7 Cierre FrontPage, abra la carpeta C:\sky y compruebe que contiene un archivo para cada pgina Web de su sitio Web. Cuando haya comprobado la lista de archivos que ha creado, cierre la carpeta C:\sky.

184

Adicin de texto y de un grfico para la barra de ttulo

Una vez creados archivos nuevos basados en el archivo subpgina.htm, puede abrir los documentos nuevos en FrontPage y personalizar su contenido. La primera subpgina que va a crear es de informacin acerca del planeta Marte. En esta seccin, va a agregar texto y un grfico para la barra de ttulo.
1 Abra FrontPage, haga clic en el botn Abrir en la barra de herramientas, muestre el contenido de la carpeta C:\sky en el cuadro de dilogo Abrir y haga doble clic en el archivo mars.htm. Haga clic a la derecha del grfico de la barra de ttulo, presione Mays+Entrar, haga clic en Insertar imagen desde archivo en la barra de herramientas estndar, muestre el contenido de C:\sky\images y haga doble clic en t_skyguide.gif. La pgina mars.htm es una subpgina de Mapa del cielo, de modo que debera mostrar la barra de subttulo Mapa del cielo. Con el cursor colocado todava al final del grfico del mapa del cielo, presione la tecla Eliminar dos veces para acercar la tabla a la imagen t_skyguide.gif. Haga clic con el botn 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 pgina Web.

5 6 Abra C:\sky y haga doble clic en mars.doc (no en mars.htm) para abrir el documento de Word. Organice el escritorio de modo que pueda ver una parte del texto del documento de Word adems de mars.htm en FrontPage, como en la disposicin mostrada a la izquierda en la figura 7-22. 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 pgina para que no tenga que volver a escribir la informacin. Tambin puede copiar y pegar la informacin en FrontPage o puede usar el comando Archivo del men Insertar para importar texto de otro archivo.

185

Arrastre el texto seleccionado en el documento de Word hasta la parte grande en blanco de la tabla de mars.htm (que, tcnicamente, es la cuarta celda de la primera fila de la tabla). El texto debera 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 pgina 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 pgina Web y cierre el documento de Word.

Modificacin de la configuracin de hojas de estilo en cascada (CSS)

Jerga: una hoja de estilo en cascada contiene cdigo que define la apariencia y formato de una pgina Web o un grupo de pginas Web.

Como ayuda para dar formato al contenido de sus pginas 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 cdigo de formato se coloca en un documento independiente al que se vincula la pgina Web, mientras que una hoja de estilo incrustada coloca el cdigo de formato dentro del cdigo fuente de la pgina Web actual. Cuando se usan opciones de hojas de estilo, se define el estilo para un elemento particular de la pgina, por ejemplo, un encabezado 3 o el elemento de una lista con vietas, y los exploradores (y FrontPage) aplicarn automticamente la configuracin de estilo cada vez que aparezca el elemento. Por ejemplo, si desea que todos los encabezados de tipo 3 se muestren en azul, slo tiene que modificar la configuracin de estilo del elemento h3. Cuando guarde la configuracin modificada, todos los encabezados de tipo 3 aparecern en azul.

186

En esta seccin, usar FrontPage para definir una hoja de estilo incrustada y personalizar los estilos. Por lo tanto, los estilos que defina en la pgina mars.htm slo se aplicarn a dicha pgina. Para definir estilos incrustados en FrontPage, siga estos pasos:
1 2 Compruebe que el archivo mars.htm se muestra en la vista Normal en FrontPage y haga clic en Estilo, en el men Formato. En el cuadro de dilogo 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 tamao de 12 puntos. En la lista Estilos, elija h3, segn 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 dilogo Estilo.
4 Haga clic en Modificar, haga clic en Formato en el cuadro de texto Modificar estilo y haga clic en Fuente.

187

En el cuadro de dilogo Fuente, haga clic en 12 pt en el cuadro de lista Tamao, 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 dilogo abiertos. Tanto el encabezado Descripcin: como el encabezado Datos del planeta: deberan aparecer ahora en azul y con un tamao de 12 puntos. En este momento, va a reemplazar las vietas negras normales en la lista con vietas por otras personalizadas. 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. En el cuadro de dilogo Modificar estilo, haga clic en Formato y en Numeracin. En el cuadro de dilogo Vietas y numeracin, haga clic en Examinar, muestre el contenido de la carpeta C:\sky\images en el cuadro de dilogo Seleccionar imagen y haga doble clic en bullet_star.gif para completar el cuadro de dilogo Vietas y numeracin. Haga clic en Aceptar tres veces para cerrar los cuadros de dilogo abiertos. La lista con vietas de su pgina debera mostrar imgenes de estrellas en la vista Normal, como se ilustra en la figura 7-24, y el cdigo fuente debe incluir ahora estilos incrustados, segn se ilustra en la figura 7-25 (el color naranja se utiliza para resaltar la informacin de formato que agreg en los pasos anteriores). Guarde el archivo mars.html y asegrese de que se ve en la vista Normal como preparacin para la seccin siguiente.

7 8

10

Figura 7-24. El estilo recin definido muestra en azul los encabezados de tipo 3 y en forma de estrellas las vietas de la lista.

188

Figura 7-25. FrontPage genera automticamente la informacin de los estilos incrustados.

Insercin de una imagen en miniatura

Ahora que ha importado y dado formato al texto de su pgina Web de Marte, est en disposicin de agregar una imagen. En esta seccin, insertar una imagen en miniatura de Marte, lo que significa que los visitantes de la pgina podrn hacer clic en una imagen pequea para ver una versin mayor de la misma. Al suministrar una imagen en miniatura, acelera la descarga de la pgina y proporciona a sus visitantes la opcin de descargar una versin 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 lnea superior del texto insertado), haga clic en Insertar imagen desde archivo en la barra de herramientas estndar 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. Haga clic en Marte y, a continuacin, muestre la barra de herramientas Imgenes (si no aparece automticamente, seleccione Barras de herramientas en el men Ver y, despus, elija Imgenes). En la figura 7-26 se muestra la imagen de Marte junto con la barra de herramientas Imgenes.

189

Figura 7-26. Puede crear una vista en miniatura de Marte directamente en FrontPage.
3 Con la imagen de Marte todava seleccionada, haga clic en el botn Vista en miniatura automtica, en la barra de herramientas Imgenes (el tercer botn desde la izquierda). Se crea una versin de Marte de 100 por 100 pxeles a partir de la versin mayor del archivo mars.jpg. El grfico ms pequeo se denomina automticamente mars_small.jpg. Haga clic con el botn 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:

Opcin Alineacin Grosor del borde Espaciado horizontal Espaciado vertical

Valor Derecha 0 15 10

Sugerencia
Si desea que la vista en miniatura se muestre mayor de 100 por 100 pxeles, puede activar la casilla de verificacin Especificar tamao, en el cuadro de dilogo Propiedades de imagen, y cambiar el tamao de la imagen en miniatura.

190

5 6

Haga clic en Aceptar y en el texto para cancelar la seleccin del grfico. Haga clic con el botn secundario del mouse en alguna parte de la tabla y elija Propiedades. Se abre el cuadro de dilogo Propiedades de tabla. En la seccin Bordes, escriba 0 en el cuadro de texto Tamao y, despus, haga clic en Aceptar. Haga clic en Guardar, haga clic en Cambiar carpeta en el cuadro de dilogo 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 pgina mars.htm debera ser similar ahora a la de la figura 7-27 y el grfico pequeo se vincula automticamente a mars.jpg.

Para probar el vnculo de la vista en miniatura, haga clic en la ficha Vista previa y, despus, haga clic en la imagen en miniatura de Marte. Haga clic en la ficha Vista normal para volver a la vista de trabajo.

7 8

Figura 7-27. Si hace clic en el grfico en miniatura mientras obtiene una vista previa de la pgina, debe aparecer una imagen en grande de Marte.
9 Cierre el archivo mars.htm.

Nota
Los archivos de imgenes del proyecto proporcionados para esta leccin incluyen neptune.jpg y saturn.jpg, que son imgenes de Neptuno y de Saturno (respectivamente), y puede usarlas si desea seguir practicando y crear pginas informativas de otros planetas. Enhorabuena! Ha completado su primera pgina del sitio Web del club de astronoma. No hay ninguna razn para que se detenga ahora; en la seccin siguiente, aprender a agregar un mapa de imgenes.

191

Creacin de un mapa de imgenes

En esta seccin, crear un mapa de imgenes en la subpgina principal del Mapa del cielo. Va a crear el mapa de imgenes 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 grfico de Marte, se muestre la pgina mars.htm que cre en la seccin anterior. Para lograrlo (es ms fcil de lo que parece), siga estos pasos:
1 2 Abra FrontPage, haga clic en el icono Carpetas de la barra de vistas y haga doble clic en el archivo skyguide.htm. Haga clic a la derecha del grfico de la barra de ttulo, presione Mays+Entrar, haga clic en Insertar imagen desde archivo en la barra de herramientas estndar y haga doble clic en t_skyguide.gif. Con el cursor colocado todava al final del grfico del mapa del cielo, presione la tecla Eliminar dos veces para acercar la tabla a la imagen t_skyguide.gif. Haga clic con el botn 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 pgina Web. Haga clic en la celda de la tabla grande situada a la derecha del botn Pgina principal y escriba Tema de este mes: nuestro sistema solar. 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. Haga clic a continuacin de la palabra solar y presione Mays+Entrar dos veces. Escriba Haga clic en un planeta para ir a la pgina de informacin del mismo. Nota: en este momento slo hay informacin de Marte. Haga clic en el rea en blanco entre los dos componentes de texto que agreg en los pasos 5 y 8. En la barra de herramientas estndar, haga clic en Insertar imagen desde archivo, vaya a la carpeta C:\sky\images si es necesario y haga doble clic en solarsystem.gif.

7 8

9 10

192

11

Haga clic con el botn secundario del mouse en cualquier parte de la tabla, elija Propiedades de tabla, establezca el Tamao de borde a 0 en el cuadro de dilogo Propiedades de tabla y haga clic en Aceptar. Haga clic en Guardar en la barra de herramientas. A continuacin, obtenga una vista previa de su pgina Web. Debe parecerse a la de la figura 7-28.

12

Figura 7-28. Utilizar la imagen del sistema solar para crear un mapa de imgenes.
13
Jerga: una zona activa es un rea en la que puede hacer clic en una imagen que est vinculada a otra pgina Web o a otra rea de la pgina actual.

Vuelva a la vista Normal en FrontPage. Haga clic en la imagen del sistema solar. La barra de herramientas Imgenes se debe abrir automticamente. Observe las herramientas Zona activa rectangular, Zona activa circular y Zona activa en forma de polgono que se encuentran en el extremo derecho de la barra de herramientas Imgenes.

14

193

15

Haga clic en la herramienta Zona activa en forma de polgono y, despus, haga clic en varios puntos alrededor de Marte y de la etiqueta Marte del grfico del sistema solar para crear un polgono, como se muestra en la figura 7-29. Cuando complete el polgono, el cuadro de dilogo Insertar hipervnculo se abrir automticamente. Si es necesario, haga clic en Archivo o pgina Web existente en la seccin Vincular a:

Figura 7-29. Las herramientas de zona activa de la barra de herramientas Imgenes permiten dibujar reas donde se puede hacer clic en los grficos.
16 En el cuadro de dilogo Insertar hipervnculo, haga doble clic en mars.htm (no en mars.doc) en la lista de archivos de la carpeta C:\sky. Cree formas alrededor del resto de los planetas, si lo desea, que sealen a futuras pginas, como mercury.htm, venus.htm, earth.htm, jupiter.htm, saturn.htm, uranus.htm, neptune.htm y pluto.htm. Guarde el archivo skyguide.htm, obtenga una vista previa de la pgina 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 vnculo funciona. Haga clic en la ficha vista Normal, cierre el archivo skyguide.htm y cierre FrontPage.

Si crea una lnea que no desea usar, haga clic con el botn secundario del mouse para quitar las lneas existentes y vuelva a empezar.

17

18

19

Va por buen camino para crear el sitio Web del club de astronoma. La subpgina final que va a crear es un formulario dentro de la pgina contact.htm.

194

Creacin de formularios
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 publicacin de FrontPage.

En este momento, debe estar habituado a agregar elementos y a configurar opciones en FrontPage. Como mencionamos al principio de la leccin, el truco es saber dnde buscar las herramientas y mens de configuracin. En esta seccin, crear un formulario en lnea. Un formulario en lnea permite a los usuarios especificar informacin en cuadros de texto. Despus, cuando los usuarios hagan clic en el botn Enviar del formulario, los resultados se enviarn a la direccin 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 cdigo que impide que la pgina se publique correctamente. Cuando cree un formulario, debe publicarlo en el Web y obtener despus una vista previa del mismo en FrontPage o en un explorador.

Preparacin de la pgina Contactos

El primer paso para crear un formulario en la pgina Contactos es agregar una barra de ttulo e insertar texto en el ttulo, para preparar la pgina, segn se describe en los pasos siguientes:
1 2 Abra FrontPage, haga clic en Carpeta en la barra de vistas y haga doble clic en el archivo contact.htm. Haga clic a la derecha de la barra de ttulo, presione Mays+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. Con el cursor colocado todava al final del grfico de Informacin de contacto, presione la tecla Eliminar dos veces para acercar ms la tabla a la imagen t_contact.gif. Haga clic con el botn secundario del mouse en la imagen t_contact.gif, seleccione Propiedades de imagen, haga clic en la ficha General, escriba Pgina de contacto en el cuadro de texto Representaciones alternativas y haga clic en Aceptar.

195

Insercin de un rea de formulario y adicin de etiquetas

Ahora que la pgina Contactos est lista para la accin, puede crear un formulario en lnea. En primer lugar, insertar el cuadro de formulario estndar y, despus, las etiquetas para los cuadros de texto, los botones de opcin y los cuadros de seleccin del formulario:
1 Haga clic en la celda de la tabla grande a la derecha del botn Pgina 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, segn se muestra en la figura 7-30 de la pgina siguiente.

Figura 7-30. El primer paso para crear un formulario es insertar un componente formulario, que incluye automticamente los botones Enviar y Restablecer.
2 3 4 5 6 Con el cursor colocado a la izquierda del botn Enviar, escriba Nombre: y presione Mays+Entrar. Escriba Direccin de correo electrnico: y presione Entrar. Escriba Es ya miembro del club? y presione Entrar. Escriba Si es as, con qu frecuencia asiste a nuestras reuniones mensuales? y presione Entrar. Escriba Permtanos saber cmo encontr nuestro sitio Web (seleccione todo lo que corresponda):, presione Mays+Entrar, escriba Asist a una reunin, presione Mays+Entrar, escriba Lo encontr en un motor de bsqueda, presione Mays+Entrar, escriba Un amigo me inform y, despus, presione Entrar.

196

Escriba Especifique sus comentarios o cuestiones aqu:, presione Mays+Entrar y, despus, presione Entrar. El formulario debera tener una apariencia similar al de la figura 7-31.

Figura 7-31. El formulario que se est creando slo muestra el texto y botones bsicos.

Creacin 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 informacin.
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.

1 2

Haga clic a continuacin de Nombre:, presione la barra espaciadora, seleccione Formulario en el men Insertar y elija Cuadro de texto. Haga clic a continuacin de Direccin de correo electrnico:, presione la barra espaciadora, seleccione Formulario en el men Insertar y elija Cuadro de texto. Haga clic a continuacin de Es ya miembro del club?, seleccione Formulario en el men Insertar, elija Botn de opcin, escriba S, presione la barra espaciadora, seleccione Formulario en el men Insertar, elija Botn de opcin y, despus, escriba No. Haga clic a continuacin 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.

197

Haga clic antes de Asist a una reunin, seleccione Formulario en el men Insertar, elija Casilla de verificacin y presione la barra espaciadora. Haga clic antes de Lo encontr en un motor de bsqueda, seleccione Formulario en el men Insertar, elija Casilla de verificacin y presione la barra espaciadora. Haga clic antes de Un amigo me inform, seleccione Formulario en el men Insertar, elija Casilla de verificacin y presione la barra espaciadora. Haga clic debajo de Especifique sus comentarios o cuestiones aqu, seleccione Formulario en el men Insertar y elija rea de texto. Haga clic en Guardar. El formulario ahora debera ser similar al mostrado en la figura 7-32.

8 9

Figura 7-32. El formulario debera incluir ahora etiquetas y campos de formulario sin formato.

198

Configuracin 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 2 Haga clic con el botn secundario del mouse en el campo situado junto a Nombre y seleccione Propiedades de campo de formulario. En el campo Nombre del cuadro de dilogo Propiedades de cuadro de texto, escriba Nombre, configure el valor de Ancho en caracteres como 25 (segn se muestra en la figura 7-33), escriba 1 en el cuadro de texto Orden de tabulacin y, despus, haga clic en Aceptar.

Figura 7-33. Para establecer las propiedades de un cuadro de texto, se usa el cuadro de dilogo Propiedades de cuadro de texto.
El campo de formulario Orden de tabulacin 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.

Haga clic con el botn secundario del mouse en el campo situado junto a Direccin de correo electrnico, seleccione Propiedades de campo de formulario, escriba Correo_electrnico, configure el valor de Ancho en caracteres como 30, especifique 2 en el cuadro de texto Orden de tabulacin y, despus, haga clic en Aceptar.

199

Haga clic con el botn secundario del mouse en el botn 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 seccin Estado inicial est seleccionada la opcin Seleccionado, escriba 3 en el cuadro de texto Orden de tabulacin y haga clic en Aceptar. Haga clic con el botn secundario del mouse en el botn 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 seccin Estado inicial est seleccionada la opcin No seleccionado y haga clic en Aceptar.

Nota
Tenga en cuenta que no tiene que establecer un orden de tabulacin 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 continuacin, pueden seleccionar una opcin con las teclas de direccin. Cuando est preparado para pasar a la seccin siguiente del formulario, puede presionar la tecla Tab. 6 Haga clic con el botn 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 dilogo Propiedades de cuadro desplegable. Escriba Asistencia en el cuadro de texto Nombre, especifique 4 en el cuadro de texto Orden de tabulacin y, despus, haga clic en Agregar. Se abre el cuadro de dilogo Agregar opcin. En el cuadro de dilogo Agregar opcin, especifique A todas las reuniones, elija la opcin Seleccionada en la seccin Estado inicial y haga clic en Aceptar. Haga clic en Agregar, escriba Cada dos meses y haga clic en Aceptar. Haga clic en Agregar, escriba Varias veces al ao y haga clic en Aceptar.

9 10

200

11

Haga clic en Agregar, escriba Nunca y haga clic en Aceptar. Debera aparecer un cuadro de dilogo Propiedades de cuadro desplegable similar al de la figura 7-34.

Figura 7-34. El cuadro de dilogo Propiedades de cuadro desplegable muestra todas las opciones y la opcin que se seleccionar de forma predeterminada.
12 13 Haga clic en Aceptar. Haga clic con el botn secundario del mouse en la primera casilla de verificacin, elija Propiedades de campo de formulario, escriba SitioWebEncontrado en el cuadro de texto Nombre, especifique Asist a una reunin en el cuadro de texto Valor, especifique 5 en el cuadro de texto Orden de tabulacin y haga clic en Aceptar. Haga clic con el botn secundario del mouse en la segunda casilla de verificacin, elija Propiedades de campo de formulario, escriba SitioWebEncontrado en el cuadro de texto Nombre, especifique Motor de bsqueda en el cuadro de texto Valor, especifique 6 en el cuadro de texto Orden de tabulacin y haga clic en Aceptar.

14

201

15

Haga clic con el botn secundario del mouse en la tercera casilla de verificacin, 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 tabulacin y haga clic en Aceptar. Haga clic con el botn 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 tabulacin, escriba 3 en el cuadro de texto Nmero de lneas y haga clic en Aceptar. Haga clic con el botn secundario del mouse en el botn Enviar, elija Propiedades de campo de formulario, especifique Enviar en el cuadro de texto Nombre, especifique 9 en el cuadro de texto Orden de tabulacin y haga clic en Aceptar. Haga clic con el botn secundario del mouse en el botn 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 tabulacin y haga clic en Aceptar. Haga clic en la flecha Atrs una vez y presione la barra espaciadora para insertar un espacio entre los botones Enviar y Borrar formulario. Haga clic antes de la etiqueta Nombre: en la parte superior del formulario y presione Mays+Entrar. A continuacin, 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).

16

17

18

19

20

202

Denominacin de los campos

Generalmente, debe suministrar un nombre para cada campo del formulario. Los nombres de los campos ayudan a identificar la informacin una vez enviada, adems 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 configuracin le ayudar a ver rpidamente qu informacin se envi en respuesta a la entrada de cada campo del formulario. Por ejemplo, a continuacin se ilustra cmo podran verse un formulario rellenado en lnea y la pgina de confirmacin:

Despus, recibira un mensaje de correo electrnico con la informacin enviada, similar al siguiente:

Las imgenes 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 pgina Contactos

Para completar la pgina Contactos, tiene que ocultar los bordes de la tabla y establecer las propiedades del formulario.
1 Haga clic con el botn secundario del mouse en cualquier parte de la tabla, elija Propiedades de tabla, especifique 0 en el cuadro de texto Tamao, en el rea Bordes, y haga clic en Aceptar. Haga clic con el botn secundario del mouse en el formulario y elija Propiedades de formulario. Se abre el cuadro de dilogo Propiedades de formulario. En el cuadro de dilogo Propiedades de formulario, compruebe que est seleccionada la opcin Enviar a, especifique su propia direccin de correo electrnico en el cuadro de texto Direccin de correo electrnico y Formulario de contacto del Club de la astronoma en el cuadro de texto Nombre de formulario. En el cuadro de dilogo Propiedades de formulario, haga clic en Opciones, haga clic en la ficha Resultados por correo electrnico, compruebe que la casilla de verificacin Incluir nombres de campo est activada y especifique Informacin de contacto del Club de la astronoma en el cuadro de texto Lnea de asunto. Al seleccionar la opcin Incluir nombres de campo, se especifica que los nombres de campo deben acompaar a la informacin enviada y el texto de la lnea de asunto aparecer en los mensajes de correo electrnico que reciba cuando los usuarios hagan clic en el botn Enviar. Haga clic en la ficha Pgina de confirmacin, escriba thankyou.htm en el cuadro de texto Direccin URL de la pgina de confirmacin, haga clic en Aceptar dos veces y, despus, haga clic en No. Guarde y cierre el archivo contact.htm, y cierre FrontPage.

6
Para ver una versin publicada de la pgina de contactos, visite www.creationguide.com/ sky/contact.htm (en ingls).

Hasta aqu ha llegado en la experimentacin con las subpginas para este proyecto. Ha trabajado en unas cuantas caractersticas de FrontPage que debera poder usar cuando cree su propio sitio Web. Pero antes de terminar con este proyecto, tenemos que crear la pgina principal del club de astronoma.

204

Creacin de una pgina principal en FrontPage

Por ltimo, aunque no menos importante, puede crear la pgina principal. Crear esta pgina podra parecer un poco difcil y estamos dispuestos a admitir que probablemente sea el procedimiento ms adelantado que hemos descrito en este curso. Por muy desafiante que parezca, sin embargo, deseamos darle una idea de dnde puede ir a partir de aqu si le hemos inspirado para que contine diseando sitios Web. (Y esperamos que lo haga!) Asimismo, pensamos que podra resultarle interesante ver cmo se utilizan en ocasiones las tablas y los grficos para crear diseos avanzados de pginas. De todas maneras, vamos a empezar por definir el marco de trabajo de la pgina principal.

Configuracin del marco de trabajo de la pgina principal

Para empezar, siga estos pasos:
1 Abra FrontPage, abra el archivo C:\sky\subpgina.htm, elija Guardar como en el men Archivo, haga clic en el botn Cambiar ttulo, especifique Sitio Web oficial del Club de la astronoma en el cuadro de dilogo Establecer el ttulo de la pgina, haga clic en Aceptar, especifique index.htm en el cuadro de texto Nombre de archivo y haga clic en Guardar. Haga clic con el botn secundario del mouse en un rea en blanco de la pgina, haga clic sucesivamente en Propiedades de pgina, en la ficha Fondo y en el cuadro Texto en la seccin Colores, elija Blanco y haga clic en Aceptar. Coloque el cursor antes del vnculo Pgina principal en la barra de exploracin de texto, arrastre para seleccionar todo lo que haya encima de la barra de exploracin de texto (incluida la barra de ttulo y el grfico del logotipo), haga clic con el botn secundario del mouse en los elementos seleccionados y haga clic en Cortar. Presione Entrar y, despus, presione el botn de flecha de direccin arriba (o haga clic en el espacio por encima de la barra de exploracin de texto). Haga clic en Insertar imagen desde archivo, muestre el contenido de la carpeta C:\sky\images, si es necesario, haga doble clic en titlebarhome.gif y presione Entrar.

205

Haga clic en Componente Web en la barra de herramientas estndar, elija Efectos dinmicos y haga doble clic en Marquesina. Se abre el cuadro de dilogo Propiedades de marquesina. En el cuadro de dilogo Propiedades de marquesina, escriba Nuestra prxima reunin es el 21 de febrero. Reserve su plaza hoy. En el cuadro de texto Texto. ste es el mensaje que se desplazar en la pgina. Elija la opcin Deslizar en la seccin Comportamiento, desactive la casilla de verificacin Continuamente en la seccin 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 slo un nmero predeterminado de veces.
9 Haga clic sucesivamente en el botn 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 dilogo abiertos.

206

10

Presione la tecla de flecha derecha para cancelar la seleccin del componente de marquesina, presione Entrar, haga clic en el botn Tabla en la barra de herramientas y cree una tabla de una fila y cinco columnas. La pgina index.htm debe parecerse a la mostrada en la figura 7-36.

Figura 7-36. La pgina principal del club de astronoma se basa en una tabla personalizada.
11 Haga clic con el botn secundario del mouse en la tabla, elija Propiedades de tabla, haga clic en la lista desplegable Alineacin, seleccione Centrar, compruebe que la casilla de verificacin Especificar ancho est activada, especifique 580 en el cuadro de texto Especificar ancho, elija la opcin En pxeles, compruebe que las opciones Espacio desde el borde al centro y Espaciado de celdas se configuran como 0 y haga clic en Aceptar. Seleccione las cinco celdas de la tabla, haga clic en el botn secundario del mouse en las celdas seleccionadas, elija Propiedades de celda, configure Alineacin vertical como Superior y haga clic en Aceptar. Haga clic con el botn secundario del mouse en el grfico titlebarhome.gif, elija Propiedades de imagen, haga clic en la ficha General, escriba Bienvenidos al sitio Web del Club de la astronoma en el cuadro de texto Representaciones alternativas y haga clic en Aceptar. Haga clic en Guardar.

12

13

14

207

Ensamblado del grfico 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 razn por la que dividimos la imagen en grficos independientes es que desebamos usar HTML dinmico (DHTML) para crear un efecto de conversin siempre que los usuarios coloquen el cursor sobre un rea con un hipervnculo. Si no hubiramos deseado ensear el efecto de conversin (y demostrar cmo puede dividir y volver a unir las imgenes cuando sea necesario), podramos haber creado un mapa de imgenes similar al del sistema solar que cre en la pgina Mapa del cielo anteriormente en esta leccin.

Figura 7-37. La imagen de la Osa mayor que se ve aqu se dividi en fragmentos para este proyecto.

Nota
HTML dinmico (DHTML, Dynamic HTML) es una tecnologa que proporciona pginas Web con la capacidad de realizar cambios y actualizaciones en respuesta a las acciones de un usuario, por ejemplo, puede mostrar un grfico o informacin 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 estndar, muestre el contenido de la carpeta C:\sky\images y haga doble clic en bigdip1.gif. Haga clic en la celda 2 e inserte el archivo b_aboutus.gif. Haga clic en la celda 3, inserte el grfico bigdip2.gif (un grfico transparente que le ayudar a alinear el resto de los grficos), presione Mays+Entrar, inserte el grfico b_contact.gif, presione Mays+Entrar, inserte el grfico b_meetings.gif, presione Mays+Entrar e inserte el grfico b_skyguide.gif. Haga clic en la celda 4 e inserte el grfico bigdip3.gif.

2 3

208

Haga clic en la celda 5 e inserte bigdip4.gif (otra imagen transparente), presione Mays+Entrar, inserte b_gallery.gif, presione Mays+Entrar, inserte bigdip5.gif, presione Mays+Entrar e inserte b_links.gif. La pgina index.htm debe aparecer como en la figura 738.

Figura 7-38. Cuando haya modelado los fragmentos de la imagen de la Osa mayor, podr vincularlos en las subpginas.

Creacin de vnculos dentro del grfico principal

El siguiente paso es vincular cada imagen que contenga un nombre de botn en el grfico de la Osa mayor a la subpgina apropiada:
1 Haga clic con el botn secundario del mouse en el texto Acerca de nosotros, elija Hipervnculo, compruebe que la carpeta sky aparece en el cuadro de texto Buscar en, escriba aboutus.htm en el cuadro de texto Direccin (o seleccione el archivo aboutus.htm en la lista de archivos) y haga clic en Aceptar. Vincule el resto de los grficos como se indica a continuacin:

Para acelerar el proceso de creacin de hipervnculos, puede hacer doble clic en los nombres de archivo en la lista de archivos del cuadro de dilogo Insertar hipervnculo, en lugar de escribir cada nombre de archivo en el cuadro de texto Direccin.

Grfico Contactar Reuniones Mapa del cielo Galera de fotos Vnculos de astronoma
3 Haga clic en Guardar.

Vincular a contact.htm meetings.htm skyguide.htm gallery.htm links.htm

209

Adicin de HTML dinmico al grfico principal

A continuacin, agregar el efecto de conversin a cada rea con un hipervnculo en la tabla mediante la barra de herramientas DHTML de FrontPage:
1 Seleccione el botn Acerca de nosotros y elija Efectos de HTML dinmico 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 dinmicos a las pginas Web.
2 3 En la lista desplegable en, elija Pasar el mouse. En la lista desplegable Aplicar, elija Intercambiar imgenes, haga clic en la lista desplegable Elegir configuracin, seleccione Elegir imagen y haga doble clic en b_aboutus2.gif en la carpeta C:\sky\images. Repita los pasos 1 a 3 para cada rea vinculada, con el fin de vincular los grficos secundarios de la forma siguiente:

Vnculo Contactar Reuniones Mapa del cielo Galera de fotos Vnculos de astronoma
5 6

Archivo de imagen b_contact2.gif b_meetings2.gif b_skyguide2.gif b_gallery2.gif b_links2.gif

Cierre la barra de herramientas Efectos DHTML. Haga clic con el botn secundario del mouse en la tabla, elija Propiedades de tabla, especifique 0 en el cuadro de texto Tamao, en la seccin Bordes, haga clic en Aplicar y haga clic en Aceptar. Haga clic en Guardar y, despus, vea cmo queda su trabajo en la vista previa. Haga clic en la ficha vista Normal para volver al rea de trabajo.

7 8

210

Toques finales de la pgina principal

Finalmente, para completar la pgina principal, insertar un contador y la fecha en que se modific por ltima vez. Para insertar un contador, siga estos pasos:
Los elementos de contador no se mostrarn hasta que publique el Web de FrontPage.

En index.htm, haga clic despus del hipervnculo Vnculos en la barra de exploracin de texto, presione Entrar, seleccione Componente Web en el men Insertar y elija Contador de visitas a la pgina en la lista Tipo de componente. Haga clic en Finalizar y aparecer el cuadro de dilogo Propiedades de contador de visitas a la pgina. En la lista Estilo de contador, seleccione el estilo de nmero digital verde (el ltimo estilo de la lista), a continuacin active la casilla de verificacin Nmero fijo de dgitos, acepte la configuracin predeterminada de 5 dgitos y haga clic en Aceptar. Presione Entrar, elija Fecha y hora en el men Insertar y haga clic en Aceptar, en el cuadro de dilogo Fecha y hora. La fecha se actualizar automticamente siempre que modifique la pgina. Guarde el archivo index.htm y, despus, haga clic en Vista previa. Su pgina debera ser similar a la mostrada en la figura 7-40. Cuando publique su sitio Web de sky, la pgina principal mostrar el contador el lugar del texto marcador de posicin.

Figura 7-40. El archivo index.htm completo se muestra aqu en el modo Vista previa.

211

Ha completado la pgina principal y la mayor parte de las subpginas del sitio Web del club de astronoma. Ha hecho un fantstico trabajo! Ahora debera entender algunas de las capacidades ms fabulosas de FrontPage. Esperamos que este recin adquirido conocimiento le sirva de ayuda para disear y crear sus propios sitios Web.
Para ver una versin en accin del sitio Web del club de astronoma creado en este proyecto, visite www.creationguide.com/sky/c ontact.htm (en ingls).

En lo que respecta al sitio del club de la astronoma, el nico paso que falta es publicar el Web de C:\sky mediante la caracterstica Publicar de FrontPage. Asegrese de leer la seccin siguiente antes de cargar el sitio Web del club de astronoma en el espacio del servidor.

Unas palabras acerca de la publicacin

Cuando crea Webs en FrontPage, es conveniente cargar las pginas con la caracterstica 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 opcin Publicar Web en el men Archivo. Ya debera tener solucionadas las cuestiones referentes al espacio del servidor y a su direccin. Asimismo, debe haber comprobado que el servicio de alojamiento de sitios Web admite Extensiones de servidor de FrontPage. Para obtener ms informacin acerca de cmo publicar Webs de FrontPage y usar Extensiones de servidor de FrontPage, pngase en contacto con su proveedor de servicios Internet (ISP) y remtase a los archivos de ayuda de FrontPage.

Recursos adicionales
A continuacin 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 documentacin de FrontPage. www.microsoft.com/spain/Office/frontpage/default.asp es el recurso en lnea definitivo acerca de FrontPage.

212

Puntos clave
FrontPage es un programa de edicin HTML muy completo. Puede usar FrontPage para crear fcilmente pginas Web avanzadas como efectos de conversin en botones, mapas de imgenes, vistas en miniatura, formularios, contadores y otros componentes de pginas Web. La interfaz de FrontPage permite mostrar las pginas 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 utilizacin de otros editores HTML avanzados porque ejemplifica los tipos de capacidades que stos pueden proporcionar. Antes de crear pginas 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 pginas Web en FrontPage, debera configurar un Web, lo que proporciona un formato especial a la carpeta seleccionada. Puede simplificar el proceso de creacin de un sitio Web si crea una plantilla estndar que puede guardar como subpginas. La clave para crear Webs en FrontPage es conservar sus archivos organizados, saber dnde buscar las herramientas y opciones de mens de FrontPage, y experimentar con diversas opciones. Para lograr los mejores resultados, cargue los archivos de FrontPage con la caracterstica Publicar Web.

213

LECCIN 8

Introduccin de las pginas Web en el mundo real

Una vez completada esta leccin, podr:
Transferir sus archivos a Internet. Elegir un mtodo para exponer sus pginas Web. Usar Mis sitios de red de Microsoft para mantener su sitio Web. Revisar las pginas Web antes de transferirlas a Internet. Cuando cree pginas Web, finalmente estar preparado para mostrarlas en lnea. De esto trata esta leccin: del paso de las pginas desde el escritorio slo para sus ojos de su PC al espacio de los ojos de todo el mundo en Internet. Con probabilidad, ha creado pginas Web, de modo que puede manifestar su presencia en el Web, no slo como ejercicio intelectual, as que continuaremos con esa suposicin. La clave para pasar al mundo real sus pginas y colocarlas en el Web es copiar los documentos HTML y los archivos de imagen en un servidor. En la leccin 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 leccin 4. Si prefiere avanzar, a continuacin se enumeran las cuestiones que deber tener en cuenta para poder pasar las pginas 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 conexin a Internet.) Una aplicacin de software que permita transferir los archivos desde su equipo a un servidor. (Explicaremos este requisito ms adelante en esta leccin.) Una direccin Web. Debe adquirir un nombre de dominio y registrarlo con un servicio de alojamiento de sitios Web, configurar una direccin Web en un servidor gratuito u obtener una direccin 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).

214

En este punto del curso, la lista anterior no debera sonarle demasiado desalentadora. Asimismo, en un momento describimos con exactitud qu aplicaciones de transferencia de archivos puede usar y cmo 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. Adems de transferir sus archivos a un servidor, tiene un par de tareas adicionales a las que prestar atencin. En concreto, tendr que comprobar las pginas Web cuando transfiera sus archivos a un servidor adems de hacer saber a los dems que su sitio puede verse. Estas tres tareas posteriores a la fase de creacin (transferencia de archivos, comprobacin de las pginas Web en el mundo real y comunicacin de tal hecho) son los puntos principales a los que aludimos en esta leccin. Si tiene a mano todos sus archivos, una conexin a Internet y algo de espacio en un servidor, su sitio puede estar disponible en lnea al finalizar esta leccin.

Transferencia de los archivos a Internet

Jerga: el trmino 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 grficos del sitio Web Creation Guide para completar los proyectos de las lecciones 6 y 7 de este curso).

Si tiene los archivos de imagen y HTML adems de espacio en un servidor y una conexin a Internet, significa que ya est preparado para exponer sus pginas Web. Puede transferir los archivos a travs de Internet de varias formas. A continuacin enumeramos algunos de los mtodos de que dispone para transferir archivos:
Programas FTP Carpetas Web y Mis sitios de red Asistentes para publicacin en Web Interfaces de ISP y editores HTML Exploradores

En realidad no hay que darle ms vueltas: va a tener que usar algn mtodo para exponer sus pginas. Despus de todo, una de las transacciones ms comunes que los diseadores Web tienen con un servidor es cargar documentos HTML, imgenes 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.
Jerga: FTP es un protocolo cliente-servidor que permite usar un equipo para transferir archivos entre equipos en Internet.

Siempre que carga archivos de su escritorio a Internet, utiliza FTP. El truco para transferir archivos con FTP es usar una aplicacin o interfaz que est diseada especficamente para servir como agente FTP. Aunque ese truco no parece muy agudo, afirmar lo obvio tambin 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 tecnologas de creacin de pginas Web, el uso de FTP para cargar archivos de pginas Web no es en absoluto amedrentador una vez que se haya puesto al da en unos cuantos conceptos bsicos.

215

Aplicaciones FTP
En nuestra opinin, las aplicaciones FTP estndar proporcionan uno de los mtodos ms sencillos para cargar archivos en Internet. En apariencia, no lo debemos de pensar slo 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 lnea (que se pueden descargar y tambin comprar) y en tiendas de software informtico.

Sugerencia
Debera poder adquirir un buen programa FTP por un precio muy razonable. En general, comprar una aplicacin FTP significa que dispondr de una mayor funcionalidad en comparacin con las utilidades de shareware y de software gratuito ms limitadas. Tenga en cuenta que, probablemente, su ISP le proporcione una aplicacin FTP con su paquete de inicio. Si es as, pngase en contacto con su proveedor u hojee la documentacin del ISP para encontrar las instrucciones especficas de la aplicacin.

La figura 8-1 muestra la interfaz de CuteFTP, que es una interfaz de aplicacin FTP bastante tpica.

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 ms 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 leccin 6) y el espacio del servidor en el panel de la derecha. Para cargar los archivos de sus pginas 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 ms intimidante de la utilizacin de una aplicacin FTP es configurar la conexin inicial. Por suerte, una vez que configure inicialmente una conexin, la mayora de las aplicaciones FTP conserva los datos de conexin 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 informacin de configuracin 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 aplicacin de shareware y recuperar la informacin de su configuracin.

Incluso aunque cada aplicacin FTP tiene una interfaz personalizada para reunir la informacin de las cuentas, tendr que proporcionar ciertos datos bsicos para establecer una conexin FTP con un servidor con independencia de la aplicacin que use:
Etiqueta del sitio FTP Nombre que proporciona para la cuenta FTP que est creando. El nico propsito de la etiqueta del sitio es ayudarle a recordar qu cuenta FTP se corresponde con cada servidor. Denomine sus conexiones de forma lgica. Direccin de host FTP La direccin de su espacio en el servidor. Por ejemplo, la direccin 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 direccin de correo electrnico, 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 slo se necesitara indicar admin. Contrasea del sitio FTP Una contrasea asociada con su nombre de usuario que le permite tener acceso a su espacio en el servidor.

217

Prubelo!
Visite www.tucows.com (en ingls) o www.download.com (en ingls) para encontrar listas de programas FTP disponibles. Descargue e instale el programa FTP que prefiera y, despus, ponga la aplicacin 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 conexin FTP, tambin se le preguntar si desea transferir la informacin en ASCII, en formato binario o con deteccin automtica. La forma predeterminada suele ser la deteccin automtica (o alguna variacin de ese trmino) y le recomendamos que la conserve siempre que sea posible.

Nota
Podra ser aconsejable que anote su contrasea y la guarde en algn lugar seguro (que no sea su equipo). Cuando la especifique en las aplicaciones FTP y en la mayor parte de los asistentes para publicacin en Web, en su lugar se muestran puntos.

Para crear una conexin FTP, debe insertar la informacin apropiada en los campos respectivos (en CuteFTP, en el cuadro de dilogo Configuracin del sitio para el nuevo sitio) y, para finalizar la configuracin, haga clic en Aceptar, en Finalizar o en Conectar (segn la aplicacin). Cuando configure una conexin FTP al espacio del servidor, puede conectarse a Internet, activar la conexin FTP y cargar las pginas. (Llame a su ISP o visite sus pginas de ayuda si tiene algn problema al conectarse.)

Nota
Los archivos HTML se deben transferir en modo ASCII, de texto o DOS. Todos los archivos, incluidos las imgenes, los sonidos y los vdeos, se deben transferir en modo binario. Comprobar que la opcin Automtico, Deteccin automtica, Todos los archivos o Datos sin formato est seleccionada en las opciones de su aplicacin FTP generalmente significa que la aplicacin puede diferenciar entre los tipos de archivo comunes, de forma que no tendr que preocuparse de especificar si se trata de imgenes o archivos HTML. De forma predeterminada, CuteFTP (y casi todas las dems aplicaciones FTP) se configura para detectar automticamente los tipos de archivo comunes.

218

En este punto, nos gustara mencionar un par de reglas que debe seguir religiosamente al copiar los archivos de sus pginas 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 vnculos errneos 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, podra 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 pginas Web: conserve la estructura de carpetas y archivos de sus pginas Web. En otras palabras, si su pgina Web consta de un documento ndice.html y de una carpeta denominada imgenes, asegrese de cargar el archivo ndice.html y copiar despus la carpeta imgenes o volver a crearla en el espacio en el servidor y copiar los grficos almacenados en su carpeta imgenes local a la carpeta imgenes en lnea. Como hemos mencionado, conservar la estructura de su sitio es crucial para evitar que los vnculos sean errneos en las pginas. ste es otro punto extremadamente importante: denomine a las carpetas en lnea 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 imgenes de pginas Web. (Por cierto, la creacin accidental de una carpeta denominada imagen si se debe llamar imgenes constituye un cambio de nombre; asimismo, alterar las maysculas y minsculas, y quitar espacios dentro de los nombres de archivos o carpetas tambin se califica como una prctica inaceptable de cambio de nombre.) El motivo para conservar la estructura de denominacin existente es sencilla: su documento HTML probablemente contenga comandos HTML que indican a los exploradores dnde buscar los grficos. Las instrucciones de imgenes (contenidas dentro de la etiqueta <IMG>, si trabaj en el proyecto HTML de la leccin 6) sealan especficamente a las imgenes almacenadas en una carpeta con un nombre concreto. Si cambia el nombre de una carpeta sin cambiar los comandos HTML, los exploradores no sabrn dnde buscar los grficos de la pgina Web y no se mostrarn en ella. De nuevo, el momento de cargar las carpetas y los archivos de las pginas Web no es el apropiado para cambiarles el nombre. De hecho, lo opuesto s que es cierto: cuando cargue los archivos de una pgina Web en un servidor, debe replicar su configuracin de la forma ms exacta posible.

219

Cuando haya copiado correctamente los archivos de sus pginas Web en un servidor, termine su conexin FTP, abra el explorador y especifique la direccin URL de la pgina Web en la barra de direcciones del explorador. La direccin URL de la pgina Web es similar a la direccin FTP que mencionamos anteriormente, excepto en que aparece www en lugar de ftp (por ejemplo, la direccin FTP para el sitio Creation Guide es ftp.creationguide.com mientras que la direccin Web es www.creationguide.com). Si ha cargado un documento HTML index.htm o index.html en el directorio raz del dominio, debera poder tener acceso a su nueva pgina principal especificando su direccin 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 pgina principal de Creation Guide. Como puede ver, la mayor parte de las aplicaciones FTP sirven para el nico propsito de proporcionar un medio de transferir y tratar (cambiar el nombre, eliminar, mover, etctera) archivos a travs de una red. Si est buscando otras opciones de transferencia de archivos o una solucin ms automatizada, encontrar que numerosas aplicaciones tienen integradas funciones FTP, como va a descubrir en la seccin siguiente.

Sugerencia
Los ISP suelen indicarle dnde debe almacenar los archivos de sus pginas Web dentro de su espacio en un servidor. En nuestro espacio en un servidor para el sitio Creation Guide, copiamos toda nuestra informacin en una carpeta generada por el ISP denominada web. Consulte a su ISP si debe trabajar dentro de parmetros similares. Algunos ISP simplemente le proporcionan la carpeta de nivel superior que puede usar para almacenar los archivos de sus pginas Web.

Carpetas Web y Mis sitios de red

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.

Microsoft proporciona otro mtodo 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 caracterstica se conoca estrictamente como Carpetas Web y era un poco ms engorrosa que Mis sitios de red). Con Mis sitios de red, podr usar la conocida interfaz de Windows para realizar las tareas de administracin de archivos y carpetas necesarias para crear y mantener un sitio Web.

220

Advertencia
Para poder configurar un vnculo a su espacio Web en Mis sitios de red, debe comprobar que el servidor Web admite sitios de red. La caracterstica 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 pginas de preguntas ms frecuentes en lnea del mismo para comprobar si su espacio Web est preparado para aprovechar la tecnologa 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 cuestin de unos pocos clics del mouse (ratn) (en funcin de si su servicio de alojamiento admite el sitio Web). Para averiguar cmo usar Extensiones de servidor de FrontPage en el servicio de alojamiento, realice una bsqueda rpida en la seccin de soporte tcnico del mismo o llame a su nmero de soporte tcnico.

Bsicamente, cuando usa la caracterstica de sitios de red, puede crear accesos directos a las ubicaciones de red que contienen las carpetas almacenadas en su espacio Web. Despus de crear un vnculo 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 lnea 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 vnculos existentes. Crear un sitio de red nuevo o vincularlo a un sitio de red existente desde dentro de una aplicacin 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 aplicacin.

221

Nota
En vistas diferentes a Mis sitios de red, Windows tambin 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), segn se describe ms adelante en esta seccin. 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 caracterstica sirve a los usuarios que desean compartir, transferir y almacenar documentos codificados en un lenguaje distinto a HMTL en el Web adems de pginas Web e imgenes.

Como hemos mencionado, puede ver sus sitios de red si abre Mis sitios de red, segn se ilustra en la figura 8-2. Observe que Mis sitios de red incluye un vnculo denominado Agregar un sitio de red en la seccin Tareas de red, en el lateral izquierdo de la ventana. (Probablemente pueda adivinar el propsito de esta pequea 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 lnea junto con sus direcciones Web asociadas (direcciones URL), segn se ilustra en la figura 8-3. Dentro de la carpeta Web, puede mover, copiar, cambiar el nombre y eliminar carpetas y archivos adems de ver sus propiedades. Tambin 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 administracin de los archivos del sitio Web sea tan sencilla como la administracin 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 rpido a dos mtodos que puede utilizar para crear sitios de red en el sistema. En ambos casos, necesitar la informacin siguiente:
La informacin de dominio, que es la direccin Internet de su sitio Web (por ejemplo, www.creationguide.com). El nombre de usuario y la contrasea para tener acceso a su espacio en el servidor

Creacin 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 vnculo Agregar un sitio de red en la seccin Tareas de red. En el Asistente para agregar sitio de red, haga clic en Siguiente. El Asistente para agregar sitio de red tiene acceso a Internet y, despus, proporciona una opcin para configurar un sitio de red en MSN o en otra ubicacin de red. En la mayor parte de los casos, configurar un sitio de red en otra ubicacin diferente al sitio Web de MSN. Seleccione la opcin Elija otra ubicacin de red y haga clic en Siguiente. En el cuadro de texto Direccin de red o Internet, escriba la direccin de Internet de su ubicacin de red (por ejemplo, www.creationguide.com). Haga clic en Siguiente. Si su espacio Web requiere que escriba un nombre de usuario y la contrasea, ver un cuadro de dilogo donde se solicite esta informacin, como se muestra en la figura 8-4.

3 4

223

Figura 8-4. En la mayora de los casos, tendr que especificar su nombre de usuario y la contrasea al crear un sitio de red.
6 7 Escriba su nombre de usuario y contrasea, y haga clic en Aceptar. 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 ms adelante. Haga clic en Siguiente y, despus, en Finalizar para completar el proceso.

Ahora debera ver un vnculo 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 conexin, compruebe que el servidor Web tiene la configuracin apropiada para controlar los sitios de red (como se menciona anteriormente en esta leccin). Ahora que ha creado la carpeta Web, puede transferir los archivos a su sitio Web arrastrndolos a su carpeta Web en su sitio de red recin creado o guardndolos directamente desde cualquier programa de Office 2000 o de una versin posterior. Descubrir que puede usar sitios de red para modificar y mantener sus pginas Web en diversas formas. Por ejemplo, podr abrir un sitio de red y hacer clic con el botn 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 informacin actualizada, y modificar de alguna otra forma los documentos de pginas Web y directorios.

224

Creacin 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 dilogo Guardar como. En los pasos siguientes, le mostramos cmo crear un sitio de red con el cuadro de dilogo 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 2 En Word, haga clic en Archivo y, despus, en Guardar como. Aparece el cuadro de dilogo Guardar como. En el cuadro de dilogo 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 dilogo Guardar como para crear un sitio de red.

225

En el cuadro de dilogo 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, segn se muestra en la figura 8-6.

Figura 8-6. Tiene la opcin de crear un vnculo a un sitio de red o crear una carpeta nueva en un sitio de red.
Cuando haya creado un acceso directo a una ubicacin de red, (segn se describe en el paso 5), podr tener acceso al sitio de red en el cuadro de dilogo Guardar como y a la ventana Mis sitios de red si hace doble clic en el icono de la ubicacin.

Elija la opcin Crear acceso directo a un elemento de Sitio de red existente, si desea crear un vnculo a su espacio Web, y haga clic en Siguiente. En el cuadro de texto Ubicacin, especifique la direccin de su sitio Web (por ejemplo, www.creationguide.com) y, en el cuadro de texto Nombre de acceso directo, escriba un nombre para la conexin, como se ilustra en la imagen 8-7, y haga clic en Finalizar.

226

Figura 8-7. En este procedimiento, escribe la direccin de Internet del sitio de red y el nombre del acceso directo en un cuadro de dilogo.
6 Escriba su nombre de usuario y contrasea, y haga clic en Aceptar. El contenido del sitio de red se muestra en el cuadro de dilogo Guardar como. Ahora, puede guardar su documento de Word en una carpeta Web del sitio de red (y, de ese modo, cargar su pgina Web) en la misma forma que guarda otros documentos de Word. En el cuadro de lista desplegable Guardar como tipo, especifique Pgina Web o Pgina Web, filtrada, especifique el nombre del documento en el cuadro de texto Nombre de archivo, haga clic en el botn Cambiar ttulo si desea especificar el texto del ttulo de la pgina Web, haga clic en la carpeta Web en la que desee exponer el documento HTML y haga clic en Guardar.

Tendr que establecer una conexin a Internet para poder guardar un documento Web en un sitio de red.

Despus de guardar un documento HTML en una carpeta Web de un sitio de red, puede ver la pgina en lnea si especifica la direccin de la pgina Web en la barra de direcciones del explorador.

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 publicacin en Web, como el Asistente para publicacin en Web incluido con Windows Los servicios en lnea de los ISP y editores HTML, como FrontPage Exploradores, como Microsoft Internet Explorer

Asistentes para publicacin en Web

El Asistente para publicacin 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 pginas Web (a menos que est trabajando en un sitio de un grupo de MSN). Pero puede cargar y almacenar fcilmente los documentos Web y otros archivos (incluidas las imgenes) mediante el Asistente para publicacin en Web en Windows. Es posible que desee usar esta caracterstica mientras crea documentos como medio de almacenamiento de reserva o para compartir con otros los documentos en los que trabaja. El Asistente para publicacin en Web funciona de la misma forma que otros asistentes: proporciona una serie de cuadros de dilogo que se deben completar para cargar una carpeta o archivo o un proveedor de servicios en lnea, como MSN o Xdrive. Si se convierte en un diseador Web serio y tiene su propio espacio en el Web, rpidamente 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 publicacin 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.
El Asistente para publicacin en Web est disponible en la mayor parte de las versiones de Windows; se agreg por primera vez a Windows en la versin OSR2.5 de Windows 95.

La mejor forma de entender cmo funciona el Asistente para publicacin en Web es seguir el proceso. Puesto que el proceso se sigue con los formularios del asistente, no hay ningn motivo para mostrarle las pginas que puede ver en su equipo. Para tener acceso al asistente, complete los pasos siguientes:
1 2 Abra Mi PC y seleccione un archivo o carpeta que desee publicar en su espacio Web. En la seccin 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).

228

Para iniciar el asistente, haga clic en el botn Siguiente. A continuacin, prosiga a travs de cada pgina y proporcione la informacin apropiada. Cuando seleccione publicar una carpeta, el asistente presenta un cuadro de dilogo en el que puede elegir los archivos que desee publicar activando o desactivando las casillas de verificacin, 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 informacin correcta, el proceso debe llevarse a cabo sin problemas y la informacin recin agregada se mostrar en el explorador de forma predeterminada.

Figura 8-8. El Asistente para publicacin en Web proporciona la oportunidad de elegir los archivos que desee cargar dentro de una carpeta seleccionada.

229

Prubelo!
Seleccione un archivo o carpeta que desee cargar en el Web. A continuacin, siga el proceso del Asistente para publicacin 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, slo 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. Despus de publicar un archivo o carpeta, se agrega un vnculo 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 lnea (para tener acceso al contenido de la carpeta, haga doble clic en el vnculo en la ventana Mis sitios de red) de la misma forma que agrega y elimina los archivos y carpetas locales.

Caractersticas 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 hbridos de aplicaciones FTP, la caracterstica de sitios de red y el Asistente para publicacin en Web. Las ventanas principales de las caractersticas de los ISP y de los editores HTML son que las herramientas suelen ser fcilmente 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 administracin de archivos que ofrece. Nuestro servicio de alojamiento proporciona varias caractersticas de calidad, por ejemplo, estadsticas de registro (como el seguimiento del nmero de visitas a una pgina y la cantidad de visitantes) y mucho espacio, de modo que pasamos por alto la caracterstica algo insuficiente del administrador de archivos porque sabamos que podamos conseguir unas cuantas pginas a travs de una aplicacin FTP con bastante rapidez. En nuestra opinin, si piensa usar una interfaz de transferencia de archivos de un ISP, compruebe que la herramienta en lnea sea al menos tan intuitiva como una aplicacin FTP o como el Asistente para publicacin en Web.

230

Igual que los formularios FTP en lnea de un ISP, varios editores HTML, incluido FrontPage, ofrecen caractersticas de carga de archivos automtica (como se explica en la leccin 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 dnde. Adems, debe saber cundo reemplaza los archivos en lnea existentes (lo que siempre es aconsejable independientemente de cmo cargue los archivos); de lo contrario, es posible que no pueda volver a usar una pgina anterior si decide que no desea conservar las modificaciones ms recientes. Como ilustracin, si usa Internet Explorer y tiene instalado FrontPage, puede visitar su sitio Web y hacer clic en el botn Edicin, en la barra de herramientas de Internet Explorer, para abrir una versin local de su pgina Web en FrontPage. A continuacin, puede hacer modificaciones en la pgina y hacer clic en Guardar para guardar y cargar la pgina modificada directamente en el servidor. Cuando haga esto, si no cambia el nombre de la pgina recin modificada, la pgina existente se reemplaza con la actualizada. Por lo tanto, generalmente reservamos esta caracterstica para correcciones sencillas, por ejemplo, en errores tipogrficos o en la actualizacin de fechas. Cuando modifique y guarde una pgina con la caracterstica de acceso en lnea 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 pginas Web que cre en esta utilidad. El uso de la herramienta de publicacin de FrontPage garantiza que las caractersticas de FrontPage que se basan en Extensiones de servidor de FrontPage se implementen correctamente. Incluso si no ha agregado ninguna capacidad avanzada a sus pginas 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 caractersticas de carga de un editor HTML, remtase a los archivos de ayuda de la aplicacin o a la documentacin publicada. Hay demasiadas variaciones entre los sistemas como para proporcionar una descripcin adecuada de cada procedimiento en esta leccin.

231

Exploradores como clientes FTP

Para tener acceso a la caracterstica de carga de archivos de AOL, use la palabra clave myplace o myftpspace. Si va a crear una pgina en AOL, la direccin URL de su pgina Web ser members.aol.com/ screenname/nombredearchivo.

Por ltimo, puede usar exploradores como clientes FTP (dependiendo de la configuracin 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 tambin pueden cargar archivos y carpetas en algunos exploradores, incluido Internet Explorer. Tenga en cuenta que su servicio de alojamiento debe admitir esta caracterstica; 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 caracterstica, el mtodo es sencillo: debe usar la barra de direcciones para mostrar el contenido de la carpeta de su servidor y, despus, 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 botn secundario del mouse en los archivos y carpetas en lnea para tener acceso a un men contextual que le permita cambiar el nombre, mover y eliminar los archivos en lnea. Para mostrar sus carpetas en lnea, debe especificar la informacin siguiente en la barra de direcciones de Internet Explorer: ftp://nombredeusuario:contrasea@ftp.dominio.com. Por ejemplo, una entrada podra 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 pginas Web y arrastre los archivos y carpetas a la ventana del explorador para copiar los componentes de la pgina 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 configuracin del servidor Web, en ocasiones puede usar Internet Explorer para transferir y administrar archivos Web.

232

En esta leccin, introducimos varias herramientas que puede usar para transferir los archivos locales de sus pginas Web a un servidor. Pruebe algunas opciones y vea cules funcionan mejor en su caso. Puesto que existen numerosas variaciones dentro de cada categora, estaramos emprendiendo una tarea poco realista si intentramos 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 continuacin. Si se le plantean dudas, visite los archivos de ayuda de la aplicacin o la documentacin impresa (o envenos un mensaje por correo electrnico, si est realmente atascado). Si no le gusta algn proceso, pruebe con otro. Confiamos en que, si recopila la informacin apropiada para la conexin y la especifica correctamente, podr conectarse a su espacio Web y conseguir que sus pginas aparezcan en lnea.

Revisin de su trabajo
Cuando haya cargado las pginas Web, lo primero que debe hacer es explorarlas y comprobar la presentacin de su sitio Web. Como explicamos en las lecciones 6 y 7, debe obtener una vista previa de sus pginas Web en todo el proceso de creacin y aqu se considera la fase de carga del mismo. Por tanto, compruebe sus pginas en el mundo real. Si ha tenido cuidado, no debera encontrarse demasiadas sorpresas cuando ponga sus pginas 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 pginas Web. Cuando muestre la pgina principal, compruebe los detalles siguientes:
Compruebe que todas las imgenes se presentan de forma adecuada. No desea que aparezca ningn marcador de imagen errnea en su pgina. Haga clic en sus vnculos para comprobar que funcionan, incluidos los botones de la barra de exploracin, los grficos de los logotipos vinculados, los vnculos de texto y los mapas de imgenes, si aparecen en su pgina. Compruebe si la pgina y sus elementos caben dentro de la ventana estndar del explorador. Recuerde que los usuarios consideran muy molesto tener que desplazarse a la izquierda y la derecha para ver una pgina Web. Complete y envese un formulario de prueba a usted mismo si se usan formularios en su sitio. Lea el ttulo de cada pgina y la barra de ttulo para comprobar su precisin. Compruebe que el texto y los vnculos de texto son fciles de leer en comparacin con los fondos de las pginas Web.

233

Bsicamente, tmese tiempo para examinar su sitio. Haga clic en todas partes, pruebe cada elemento interactivo y emplee su ojo crtico. Es mejor tomarse un poco ms de tiempo comprobando su trabajo despus de cargar una pgina que un visitante le enve un mensaje para decirle que su sitio Web es poco til porque no se ve bien o no responde como deba. La ltima tarea posterior a la fase de creacin que abarcamos en esta leccin es comunicar que su sitio Web existe. La forma ms comn de empezar a publicitar un sitio es comprobar que los motores y directorios de bsqueda ya pueden reconocer su pgina 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 publicacin en Web, formularios en lnea de ISP, editores HTML y exploradores, como Internet Explorer. Si su servidor admite sitios de red, puede usar la caracterstica 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 parmetros exactos de denominacin y organizativos de los archivos y carpetas del equipo local. Cuando haya cargado pginas Web, valas siempre en lnea para comprobar si contienen errores o vnculos errneos. Para publicitar su sitio Web, regstrese en motores de bsqueda.

Considere agregar etiquetas META a sus documentos HTML para controlar en cierta medida la forma en que los motores de bsqueda clasifican el sitio. Finalmente, deje que los dems sepan que su sitio est activo, mediante el boca a boca y a travs de otros canales de comunicacin tpicos, y comience el intercambio de informacin en lnea!