Diseno web basico

Diseño Web - Contenido Introducción 2 Lección 1 Páginas principales sin misterios 12 Lección 2 Creación y forma del texto para el Web 26 Lección 3 Creación y utilización de arte en el Web 37 Lección 4 Acopio de utensilios 58 Lección 5 Plan de ataque 80 Lección 6 HTML básico sin misterios 96 Lección 7 Creación de sitios Web con FrontPage 155 Lección 8 Introducción de las páginas Web en el mundo real 213

2 Introducción Ahora más que nunca, los adultos tienen que reinventarse a sí mismos en muchas ocasiones para estar al día de los grandes cambios que se producen en el mundo del siglo XXI. Microsoft® Unlimited Potential (UP) es un programa global centrado en mejorar el aprendizaje de jóvenes y adultos al proporcionar conocimientos tecnológicos a través de centros comunitarios de aprendizaje tecnológico (CTLC). Microsoft cree que fomentando la enseñanza de conocimientos técnicos podemos ayudar a crear oportunidades sociales y económicas que ayuden a cambiar las vidas de las personas y a transformar las comunidades. Al participar en los cursos UP, los alumnos se centrarán en los conocimientos técnicos que necesitan para utilizar diversas aplicaciones. Todos los cursos UP enseñan conocimientos tecnológicos de manera práctica que resaltan las aplicaciones reales de la tecnología, desde informática básica y alfabetización informática hasta fotografía digital, diseño de páginas Web o software de productividad. Los cursos UP están pensados para su uso dentro de la comunidad y en centros de enseñanza de tecnología, ya sea en el contexto de un aula o para autoaprendizaje. En el caso de los cursos relacionados con información introductoria y tecnologías de comunicaciones (alfabetización informática, Internet, World Wide Web, medios digitales y aplicaciones de productividad), no se supone experiencia previa con la tecnología o el software. A quién va dirigido este programa Todos los cursos del programa Microsoft UP están diseñados para motivar a los jóvenes y adultos que desean aprender nuevas tecnologías o aumentar sus conocimientos tecnológicos actuales, ya sea por razones personales o profesionales. Los cursos tienen en cuenta el hecho de que los adultos suelen llegar a las experiencias de aprendizaje con una amplia variedad de experiencias previas, expectativas y conocimientos: ■ Los alumnos comunitarios desean emplear su tiempo y su dinero sabiamente. Este programa se ha diseñado para prever, comprender y centrarse en la necesidad de estos alumnos de una instrucción eficiente y efectiva. ■ Una instrucción bien diseñada tiene en cuenta los conocimientos previos de los alumnos comunitarios y aporta nuevos conocimientos. Este programa da cabida a una amplia variedad de conocimientos y habilidades ya existentes. Cada curso tiene en cuenta tareas y niveles de conocimientos comunes.

3 ■ Los alumnos comunitarios van a aprender y esperan que se les trate como personas independientes, únicas y capaces. Este programa puede utilizarse en un aula o como herramienta para el autoaprendizaje a su propio ritmo. ■ Los alumnos comunitarios, orientados a la acción, esperan que lo aprendido sea aplicable directamente a sus responsabilidades profesionales, así como a sus fines personales. Este programa contiene muchos ejemplos prácticos del mundo real y aplicaciones diseñadas para atraer a una amplia gama de alumnos adultos. Por encima de todo, cada curso UP está diseñado para enseñar conocimientos de tecnología pero siempre teniendo presente el uso de la tecnología para mejorar las oportunidades individuales, la productividad, la preparación para el trabajo y la calidad de vida. Ofertas y objetivos de los cursos El programa UP cumple los estándares educativos de Microsoft e internacionales. Como tal, el programa de estudios ofrece los siguientes cursos introductorios sobre equipos, software y tecnología digital: ■ Conceptos básicos de informática Este curso ofrece a los alumnos una base sólida de los conceptos básicos de la informática y los fundamentos de hardware, software, sistemas operativos, Internet, etc. ■ Conceptos básicos de medios digitales Este curso enseña a los alumnos cómo empezar con los medios digitales, incluyendo fotografía digital, audio y vídeo digital. ■ Conceptos básicos de Internet y del World Wide Web Este curso enseña cómo explorar el Web, utilizar motores de búsqueda, trabajar con correo electrónico y crear páginas Web. ■ Conceptos básicos de diseño Web Este curso explica todo el proceso de diseño de páginas Web, desde los fundamentos de HTML hasta las estrategias para diseñar y crear un sitio Web completo. ■ Conceptos básicos de procesamiento de textos Este curso se centra en cómo utilizar un procesador de textos para escribir y revisar diversos documentos personales y comerciales, desde cartas y memorandos sencillos hasta documentos complejos que contienen gráficos y tablas.

4 ■ Conceptos básicos de presentaciones Este curso trata todo lo necesario para crear presentaciones electrónicas convincentes, desde la creación de presentaciones con diapositivas básicas hasta cómo agregar gráficos, vídeo y audio para conseguir presentaciones multimedia completas. ■ Conceptos básicos de bases de datos Este curso presenta los fundamentos del uso de una base de datos relacional para crear tablas, formularios e informes. ■ Conceptos básicos de hojas de cálculo Este curso enseña a los alumnos los conceptos básicos de las hojas de cálculo incluyendo la creación de hojas de cálculo, la modificación de datos, la creación de diagramas y gráficos, y la publicación de una hoja de cálculo en el Web. Cada curso utiliza tareas y proyectos para desarrollar competencias en cuanto a la tecnología de información básica y las aplicaciones de productividad de sobremesa mediante el tratamiento de los temas siguientes: ■ Conceptos básicos de la tecnología de la información ■ Uso del equipo y administración de archivos ■ Procesamiento de textos ■ Hojas de cálculo ■ Bases de datos ■ Presentaciones ■ Alfabetización sobre Internet, World Wide Web y correo electrónico Entre las áreas temáticas principales se incluyen las siguientes: ■ Fundamentos de la informática (hardware, software, sistema operativo) ■ Principales aplicaciones de software (aplicaciones de productividad) ■ Internet, World Wide Web y correo electrónico El programa UP ofrece materiales para los alumnos y para los instructores que son flexibles, confiables, económicos y orientados a los resultados. De acuerdo con el contrato de copyright, los instructores pueden duplicar y personalizar todos los materiales y archivos para mejorar el proceso de aprendizaje.

5 Cómo está organizado el curso Cada curso del programa Microsoft UP empieza con los conceptos básicos y pasa rápidamente hacia conocimientos y técnicas intermedios. Los tutoriales prácticos construyen de forma experta sus conocimientos paso a paso. Al estudiar con un enfoque basado en tareas, aprende algo más que simplemente las características del software. Aprende a realizar tareas de la vida real, de forma que pueda aumentar su productividad inmediatamente utilizando la tecnología. Cada lección empieza con unos objetivos de aprendizaje en viñetas. Cada objetivo especifica una tarea determinada que podrá realizar cuando complete la lección. Los tutoriales paso a paso son el eje central de cada lección. Las lecciones se basan en tareas que puede encontrar en el mundo laboral cotidiano. Este enfoque le permite ver rápidamente la importancia del aprendizaje. El enfoque basado en tareas está imbricado en toda la serie, incluyendo la organización de lecciones dentro de cada unidad, los títulos de las lecciones y las situaciones de ejemplo elegidas para los archivos de prácticas. Los conceptos se presentan e ilustran con ejemplos de muchas situaciones de la vida real, la tecnología se explica claramente y los ejercicios prácticos le permiten empezar a aplicar inmediatamente lo que sabe. La mayoría de las lecciones terminan con 4 ó 5 ejercicios prácticos de dificultad creciente, y desafían al alumno a entender y aplicar lo aprendido. Características especiales ■ Objetivos de aprendizaje. Establecen claramente los objetivos de enseñanza para cada lección, de forma que entienda lo que aprenderá. Los objetivos de aprendizaje se tratan de manera coherente y constituyen la estructura de las lecciones, lo que le ayuda a captar la información más importante y a preparar las habilidades de aprendizaje. ■ Tutoriales paso a paso. Los pasos numerados contienen instrucciones detalladas paso a paso que le ayudan a aprender. Cada tutorial incluye numerosas ilustraciones que le guían por el proceso de aprendizaje. Con cada curso se ofrecen archivos de ejemplo. ■ Sugerencias. En toda la lección se incluyen sugerencias útiles y formas alternativas de realizar las tareas que le ofrecen información adicional, métodos abreviados y posibles problemas, así como comentarios acerca de lo que está aprendiendo. ■ Notas. En todo el texto de la lección encontrará información adicional que le permite profundizar más en un tema. ■ Importante. Las notas especiales ofrecen precauciones o instrucciones especiales.

6 ■ Barras laterales. Las barras laterales de algunos de los cursos contienen temas parentéticos, información adicional o explicaciones más extensas, como momentos interesantes en la historia de la informática, los entresijos de la ley del copyright o lo que tiene que saber acerca de los “colores seguros” que hay que utilizar en una página Web. ■ Jerga. Estas notas al margen de algunos de los cursos ofrecen definiciones de términos técnicos. ■ ¡Pruébelo! Estas barras laterales especiales de algunos cursos ofrecen minitutoriales rápidos para comprobar sus conocimientos. ■ Archivos de prácticas. Unos documentos de ejemplo le ayudan a completar los ejercicios presentados al final de las lecciones de varios cursos. Las lecciones basadas en proyectos empiezan con una lista de todos los archivos que necesitará para completar el proyecto. ■ Puntos clave o Resumen de la lección. Los resúmenes de lo que ha aprendido en una lección sirven como recordatorio de los puntos clave y le indican lo que debe hacer a continuación. ■ Ejercicio corto. Los ejercicios cortos incluidos al final de cada lección evalúan lo que ha aprendido y cómo podría aplicarlo. Esta evaluación al final de la lección va más allá de una simple recapitulación de lo aprendido, al pedirle que explique cómo realizar ciertas tareas. ■ Resumen de conceptos. Estos ejercicios incluidos al final de cada lección le permiten practicar la aplicación de lo aprendido a proyectos del mundo real. Muchos de estos ejercicios se basan unos en otros para ofrecer un conjunto creciente de desafíos que ponen a prueba sus conocimientos. ■ Apéndices. Los objetivos para el examen de especialista en Microsoft Office de cada curso se enumeran en un apéndice al final del libro. Archivos de prácticas En varios de estos cursos se incluyen documentos de ejemplo y otros archivos para acelerar el aprendizaje y ofrecer ejemplos “terminados” que puede comparar con su propio trabajo. En cada lección se explica cuándo y cómo utilizar los archivos de prácticas para esa lección. Muchas de las lecciones se basan en situaciones de la vida real para que pueda aplicar fácilmente los conocimientos aprendidos a su propia situación. Por ejemplo, Conceptos básicos de diseño Web incluye todos los ingredientes para crear varios sitios Web con FrontPage: los archivos de texto, los archivos gráficos y los archivos HTML necesarios para crear un sitio Web atractivo.

7 Puede elegir entre trabajar con estos archivos como parte de la instrucción en el aula en los centros comunitarios de tecnología y aprendizaje o bien puede utilizarlos para aprender por su cuenta. El instructor instalará todos los archivos de prácticas en la unidad de disco duro de cada equipo. Dependiendo del curso concreto que vaya a realizar, los archivos se almacenarán en la carpeta Practice de cada curso. Los archivos de cada curso se encuentran en las carpetas del curso correspondiente, bajo la carpeta Unlimited Potential de la unidad C: . Su instructor le explicará cómo ir a los archivos del curso que va a realizar. Requisitos del sistema Todos los equipos del aula o del centro comunitario de aprendizaje deben cumplir las condiciones mínimas siguientes para ejecutar Microsoft Office XP y permitir a los alumnos el trabajo con los archivos de prácticas empleados en muchas de las lecciones. ■ Un equipo personal que ejecute Microsoft Office XP con un procesador Pentium a 133 megahercios (MHz) o superior. ■ Sistema operativo Windows XP. ■ 128 MB de RAM como mínimo, además de 8 MB de RAM adicionales para cada programa de Office que se ejecute simultáneamente. ■ Al menos 58 MB de espacio disponible en disco (después de instalar Microsoft Office XP). ■ Una unidad de CD-ROM. ■ Un monitor con resolución Super VGA (800 x 600) o superior con 256 colores; se recomienda un monitor de 15 pulgadas como mínimo. ■ Un mouse (ratón), IntelliMouse u otro dispositivo señalador compatible.

8 Acerca del equipo de autores Gran parte del material de estos cursos se basa en los puntos fuertes del enfoque ya probado que Microsoft desarrolló y refinó para sus series Step by Step Courseware, y sus series de libros Step by Step y Faster Smarter. Los instructores, especialistas de diseño educativo, autores y expertos en tecnología que aportaron el contenido de estos libros y cursos poseen unos extensos conocimientos en tecnología y gran experiencia didáctica. Parte del material de este curso se ha adaptado de Faster Smarter Web Page Creation, publicado por Microsoft Press. Existe una versión más completa de este material en las ediciones impresas originales de estos libros. Animamos a los instructores y alumnos a que consulten estos libros cuando deseen ampliar sus conocimientos de las tecnologías de información e informática. Edición original de Faster Smarter Web Page Creation by Mary Millhollon. Los libros de Microsoft Press pueden adquirirse en librerías y distribuidores de todo el mundo. Para obtener más información acerca de las ediciones internacionales, póngase en contacto con su librería local o póngase en contacto con Microsoft Press International directamente en el número de fax (425) 936-7329. Visite nuestro sitio Web en www.microsoft.com/mspress para obtener más información acerca de estos libros y los autores que los crearon.

9 Convenciones utilizadas en este curso Este curso utiliza fuentes, símbolos y convenciones de títulos especiales para resaltar la información importante o para llamar su atención sobre pasos especiales. Para obtener más información acerca de las características disponibles en cada lección, consulte la sección “Características especiales” de esta Introducción. Convención Significado Texto en cursiva Este formato indica un término clave utilizado por primera vez, como banda ancha o World Wide Web. Texto en negrita Este formato indica el texto que usted debe escribir. O bien Indica un término clave que se emplea por primera vez. Fuente Sans-serif Este formato se utiliza para resaltar texto que forma parte de los pasos de los tutoriales. nota Las notas ofrecen información adicional que le permite profundizar en un tema. sugerencia Ofrecen sugerencias útiles y formas alternativas de realizar tareas. importante Las notas especiales ofrecen precauciones o instrucciones especiales. Puede buscar y descargar Las notas al margen recuadradas software antivirus en Internet. ofrecen información adicional y comentarios sobre el texto.

10 Características de las lecciones Los objetivos de la lección establecen claramente los objetivos de enseñanza para cada lección, de forma que entienda lo que aprenderá. Cada tema empieza con información que explica conceptos y técnicas. Las notas Los pasos numerados al margen ofrecen instrucciones incluyen detalladas para realizar sugerencias e una tarea. información adicional. Las notas importantes contienen instrucciones especiales. Las sugerencias ofrecen consejos útiles, métodos abreviados y formas alternativas de realizar una tarea. Los términos importantes se muestran en negrita y se definen la primera vez que se utilizan. Las ilustraciones ofrecen información visual mientras que estudia la lección.

11 Resumen de la lección trata problemas restantes de la administración de archivos para terminar la lección. Los ejercicios de Resumen de conceptos le desafían a que aplique lo que ha aprendido y le obligan a aplicar los conocimiento s de una Las preguntas de forma nueva. Ejercicio corto, con respuestas breves, le plantean preguntas sobre los conceptos expuestos en la lección.

12 LECCIÓN 1 Páginas principales sin misterios Una vez completada esta lección, podrá:  Explicar la diferencia entre Internet y el World Wide Web.  Comprender la anatomía de una página Web típica.  Crear una página HTML sencilla y verla en un explorador. Es muy probable que le resulte bastante conocida la no tan modernísima Jerga: Internet es el invención denominada Internet. Y lo que es más, estamos dispuestos a apostar hardware que se interconecta que, si está contemplando la idea de hacerse notar en el Web, sabe cómo usar para crear una red mundial en cierto modo un equipo informático. También suponemos que ha explorado enorme. el Web, puede usar aplicaciones básicas (por ejemplo, paquetes de procesamiento de texto) y puede hacer clic en un mouse (ratón). Por suerte, su conocimiento básico de informática es todo lo que precisa para poder crear páginas Web. Eso junto con estas lecciones, ¡por supuesto! Su primer cometido en el camino para llegar a convertirse en desarrollador de páginas Web supone comenzar a partir de lo que ya sabe. Por ejemplo, además de unas capacidades informáticas moderadas, debe tener una idea de cómo se relacionan entre sí Internet, el Web y las páginas Web. Por lo tanto, en aras de nuestro objetivo de mantener la claridad y simplicidad, reduciremos la marcha en esta lección y describiremos brevemente los elementos principales de la mayor red del mundo: Internet, el Web y las páginas Web. Cuando hayamos conseguido quitarnos de en medio una serie de conceptos básicos, pasaremos el resto de las lecciones hablando acerca del planeamiento y la creación de páginas Web. Internet: simplemente un montón de hardware Para simplificar, Internet, o la gran red, es hardware: muchísimos dispositivos Jerga: los enrutadores son componentes de de hardware interconectados para crear una red enorme en todo en mundo. retransmisión entre redes. El hardware de Internet abarca todos los componentes que una persona puede tocar físicamente, como son equipos, enrutadores, cables, líneas de teléfono, circuitos de datos de alta velocidad y otros dispositivos físicos de red.

13 Por ahora, eso es en realidad todo lo que precisa saber acerca de Internet: es hardware. No hay necesidad de agasajarle con una larga diatriba acerca de cómo la paranoia de la guerra fría del gobierno de Estados Unidos incitó el desarrollo de una red informática descentralizada. Si siente curiosidad por la historia de Internet, puede encontrar información en línea y en las bibliotecas o librerías de su barrio. (Además, vea la sección de recursos en www.creationguide.com/resources, (en inglés), para consultar algunos vínculos útiles.) Ahora que hemos identificado con claridad que Internet es el hardware, vamos a dar el siguiente paso lógico. Como todo el hardware informático (piense en su equipo portátil o de escritorio), Internet necesita software o, de lo contrario, sus componentes de hardware simplemente estarían ahí acumulando polvo (en su mayor parte), de forma globalizada. Entre en el World Wide Web. El Web: software para el hardware El World Wide Web (también conocido como WWW o, simplemente, “el Jerga: el Web consta de software que permite Web”) es un poco más esotérico que Internet. Esto es así porque consta de compartir la información software (como son programas, documentos y archivos) que permite a la de Internet. información viajar a través del hardware de Internet. Como ayuda para ilustrar la función del Web en relación a Internet, a continuación relatamos una breve historia que contamos por primera vez hace algunos años al explicar la función del Web a neófitos en Internet: Hace mucho tiempo (cuando los insectos y los arácnidos podían hablar), había una araña de intelecto inusualmente brillante llamada Tim. Tras ver a las hormigas trabajar todo el día, Tim se reunió con la hormiga jefe por entonces, Bill. Las hormigas, como es habitual, demostraban una increíble destreza acumulando y almacenando comida, pero Tim pensó que las arañas podían asociarse con ellas con el fin de hacer la vida más fácil para ambas. Tim se dirigió a Bill con este plan, quien vio cierta lógica en él. De hecho, sugirió que incorporaran a otras criaturas en el equipo también. Pronto, Tim y Bill reclutaron a los saltamontes, a las moscas y a las lombrices para que se asociaran en la empresa de conseguir comida. Las criaturas pensaron que aquélla era una idea espléndida, así que se reunieron y crearon un elaborado laberinto de hormigueros, telas de araña, madrigueras y túneles para servirles de ayuda en la empresa. El sistema ya estaba implantado y parecía perfecto. Era el momento de empezar a trabajar. Pero, con gran decepción para las criaturas, surgió el caos. Incluso aunque todos los caminos y conexiones estaban ahí, las moscas lo pasaban muy mal explorando los túneles, los saltamontes tenían dificultad para permanecer en los hilos, las lombrices eran simplemente demasiado pesadas para andar sobre las telas de araña y, por supuesto, las expectativas de las hormigas eran mucho mayores que las del resto de los grupos. Lo que las criaturas tenían era una red. Lo que precisaban era algo o alguien que pudiera atravesar todos los medios de la red de una forma segura. Necesitaban una criatura universal.

14 Esta corta historia proporciona una buena analogía de la relación entre Internet Jerga: los servidores son equipos vinculados en red y el Web. Como comentamos anteriormente en esta lección, Internet es la de alta capacidad que infraestructura para transmitir información: una infraestructura formada por almacenan archivos y equipos, enrutadores, cables, líneas de teléfono, circuitos de datos de alta responden a las solicitudes de los usuarios que velocidad y bases de información denominadas servidores (a modo de pretenden ver y tener acceso hormigueros, telas de araña y túneles). Por desgracia, al igual que las telas a ellos. Un protocolo es un de araña no pueden soportar el peso de las lombrices, no todos los equipos conjunto de reglas que informáticos pueden admitir todos los formatos de archivo. Incluir cada uno de describe cómo se deben transmitir los datos. los métodos disponibles (o protocolos) para comprender los diversos formatos El Web usa el Protocolo de de documentos de todos los equipos sería poco práctico. Así, la comunidad de transferencia de hipertexto Internet ideó su propia criatura universal, conocida más comúnmente como el (HTTP) para transmitir documentos de Lenguaje World Wide Web. de marcado de hipertexto (HTML). En sus inicios, Tim Berners-Lee concibió y desarrolló el Web en el laboratorio CERN de Suiza para la comunidad de físicos de altas energías. (Por cierto, aunque se considera que el intelecto de Tim es extremadamente avanzado, ¡no es una araña!) El Web atrajo rápidamente mucha atención y se extendió más allá del ámbito de la física. Al igual que con la historia de Internet, puede encontrar montones de información acerca de la historia del Web en línea y en numerosos libros de informática. Para nuestros propósitos, sólo necesita saber que Internet es el hardware y el Web es el software. Bastante sencillo. Ahora, estamos listos para pasar al siguiente nivel: los archivos que el software del Web admite en el hardware de Internet. Páginas Web: unos cuantos archivos en la gran red Ahora nos encontramos cara a cara con el meollo del asunto: las páginas Web. Básicamente, una vez que se destripa todo el pomposo balbuceo tecnológico, las páginas Web son archivos. Para ser más concretos, las páginas Web son archivos HTML. No tiene que poner en blanco los ojos ante la visión de “HTML”; en la lección 6, desvelamos sus misterios. En este momento, todo lo que necesita saber es que las páginas Web son simplemente archivos que el Web admite, igual que los archivos de documentos (.doc) son los archivos que admite Microsoft Word. Puesto que las páginas Web son archivos, no tiene que llevar su imaginación demasiado lejos para darse cuenta de que crear una página Web es, simplemente, el acto de crear un tipo específico de archivo en un equipo. Documentos de Word, hojas de cálculo, bases de datos, páginas Web: todos son tipos de archivos. Claramente, puede ver que las páginas Web no son entidades misteriosas. No pueden abrumarle. Son archivos informáticos y ya ha trabajado con ellos en numerosas ocasiones.

15 Así que no deje que le intimiden. Por supuesto, esto no es lo mismo que afirmar que las páginas Web no tengan algunas idiosincrasias que las diferencien de Jerga: un sitio Web es una otros archivos. Por ejemplo, siempre incorporan varios archivos e colección de páginas Web relacionadas, que suelen hipervínculos, y se suelen reunir en grupos llamados sitios Web. incluir una página principal y subpáginas. La naturaleza “multiarchivo” de las páginas Web Hemos dicho que las páginas Web son simplemente archivos y lo reafirmamos. Pero debemos aportar un poco más de claridad en relación a los tipos de archivos a los que nos referimos. Mientras lee el siguiente par de párrafos, podría pensar que estamos proporcionando demasiada información en este punto, pero en realidad no es así. Debería tener al menos una idea (no necesariamente un conocimiento consolidado, aún) de los componentes e interacciones de las páginas Web antes de avanzar demasiado. Hecha la rectificación, sigamos con la información. Jerga: un documento de En primer lugar, en el nivel más básico, cada página Web es un documento de texto es un archivo que texto. Un documento de texto es un archivo que contiene palabras, letras y contiene palabras, letras y números sin ningún formato. números sin ningún formato. Por ejemplo, al abrir el Bloc de notas o WordPad en Microsoft Windows (haga clic en Inicio, seleccione Programas o Todos los programas, haga clic en Accesorios y, después, seleccione Bloc de notas o WordPad) y escribir su nombre, una frase pegadiza, varias letras, algunos números o cualquier cosa, en realidad está creando un documento de texto (no una página Web, cuidado, simplemente un documento de texto). La figura 1-1 muestra un ejemplo sencillo de documento de texto abierto en el Bloc de notas. Figura 1-1. Un documento de texto contiene solo eso: ¡texto!

16 Para convertir el documento de texto en una posible página Web, basta con agregar comandos HTML específicos, según se muestra en la figura 1-2. Figura 1-2. Este documento de texto contiene comandos HTML básicos junto con algo de texto y una línea de texto en el cuerpo de la página. Páginas Web y exploradores Para ver páginas Web, se usa un explorador (como Microsoft Internet Explorer). En la mayor parte de los casos, en el equipo local (donde está trabajando) hay una aplicación de este tipo. Puede eliminar, instalar, actualizar y personalizar el explorador igual que elimina, instala, actualiza y personaliza otras aplicaciones de software (incluidos los programas de Microsoft Office, como Word y Microsoft Excel). Ocasionalmente, surge una ligera confusión en relación al lugar finaliza Internet y dónde comienza el equipo. La clarificación se vislumbra fácilmente: cuando vea una página Web en el explorador, las barras de herramientas, las barras de menú y demás elementos alrededor de una página Web son parte del explorador, que reside en el equipo; el contenido que se muestra dentro de la ventana principal del explorador refleja el contenido de Internet. Una vez agregados los comandos HTML, guarda el documento de texto con la extensión .html o .htm en lugar de las extensiones .txt o .doc. (No se preocupe por los detalles ahora.) Entonces, puede abrir el documento en un programa explorador, como Internet Explorer.

17 La figura 1-3 muestra la forma en que el documento de texto con los comandos HTML mostrado en la figura 1-2 aparece en un explorador. Observe que en la figura 1-3 sólo aparece el texto del cuerpo y el de la barra de título, y no los comandos HTML. Ello se debe a que éstos simplemente proporcionan instrucciones a los exploradores en relación a cómo mostrar la información y no a qué se debe mostrar. Figura 1-3. Puede ver en un explorador un documento de texto básico con comandos configurado correctamente. No se preocupe si esta explicación de HTML parece un poco vaga en este momento. Le guiaremos en el proceso de creación de un sitio Web con HTML en el Bloc de notas o en WordPad posteriormente, en la lección 6. Verá entonces que HTML resulta bastante nítido si avanza paso a paso. (Y, si desea algo más de inspiración, en otras lecciones averiguará que puede crear páginas Web sin saber nada de HTML.) En este momento, lo que necesita principalmente es reconocer la premisa básica: las páginas Web son documentos de texto. Podría haber notado que aquí parece surgir una paradoja porque hemos afirmado categóricamente que las páginas Web son documentos de texto. Y, si lo son ¿por qué está el Web desbordado de gráficos? Por suerte, en el Web puede usar los documentos de texto HTML junto con tipos concretos de archivos de gráficos. Más concretamente, el Web admite los archivos de gráficos con las extensiones .gif, .jpeg y .png, pero vamos a ahorrarnos la explicación de los formatos de archivos gráficos para la lección 3. Aquí tiene un adelanto. Para mostrar un gráfico en una página Web, un documento HTML (de texto) incluye comandos que indican al explorador dónde encontrar un gráfico en particular y cómo mostrarlo en la página (incluyendo la posición, el tamaño y demás). Por lo tanto, queda desvelada la naturaleza “multiarchivo” de las páginas Web. Generalmente, cuando mira una página Web en línea, está viendo unos cuantos archivos: un archivo HTML (de texto) y algunos archivos gráficos.

18 ¡Pruébelo! Puede ver por sí mismo cómo funciona HTML. En primer lugar, asegúrese de que Windows está configurado para mostrar extensiones de archivo: 1 Abra el Panel de control (en Windows XP, elija Panel de control en el menú Inicio; en versiones anteriores de Windows, haga clic en Inicio, seleccione Configuración y, después, haga clic en Panel de control). 2 En el Panel de control, haga doble clic en Opciones de carpeta y, después, haga clic en la ficha Ver. 3 Desactive la casilla de verificación Ocultar las extensiones de archivo para tipos de archivo conocidos y, después, haga clic en Aceptar. Una vez configurado Windows para mostrar las extensiones de archivo, escriba en un documento del Bloc de notas el texto HTML que se muestra en la figura 1-2. Seleccione Documento de texto en el cuadro Tipo, para guardar el documento del Bloc de notas en el escritorio (así, podrá eliminarlo con facilidad posteriormente) como archivo de texto (.txt), y cierre el Bloc de notas. A continuación, muestre el escritorio, haga clic con el botón secundario del mouse en el archivo recién creado y seleccione Cambiar nombre. Reemplace la extensión .txt por .html. Cuando en el sistema Windows se muestra un cuadro de mensaje en el que se pregunta si realmente desea cambiar el tipo de archivo (y se le advierte de sus potenciales “peligros”), haga clic en Sí; no está causando ningún estrago en este caso. Ahora, ya puede ver el documento en el explorador. Para ello, puede: ■ Hacer doble clic en el archivo HTML recién creado. ■ Abrir el explorador y arrastrar el icono del archivo HTML a la ventana del explorador. ■ Abrir el explorador y escribir la ruta de acceso del archivo HTML en la barra de direcciones. Tenga en cuenta que, cuando cambie un archivo TXT por un tipo de archivo HTML, tendrá que abrir el documento desde dentro del Bloc de notas si desea modificar el texto. Para ilustrar el concepto de “multiarchivo”, eche un vistazo a la versión pasada de la página principal de Arizona Film Society en la figura 1-4. Como puede ver, consta de tres archivos: un documento HTML (index.html) y dos archivos de gráficos (afs_title.gif y 4members.jpg). La figura 1-5 representa una vista de carpeta de Windows de los archivos usados para crear la página principal ilustrada en la figura 1-4. (Observe que la carpeta de Windows contiene los mismos archivos de gráficos y HTML.)

19 Nota Como probablemente sabrá, una de las principales atracciones del Web es su naturaleza dinámica. Muchas páginas Web se actualizan y modifican con frecuencia. Para complementar nuestra explicación, hemos congelado una copia de una de las páginas principales antiguas de Arizona Film Society en el sitio www.creationguide.com/afs (en inglés). Para ver el flujo de páginas Web en acción, visite la página Web actual en el sitio www.azfilmsociety.com y observe que se ha modificado. (De hecho, ha sufrido varias modificaciones desde que congelamos la página principal de ejemplo para esta lección.) Un poco más de HTML El texto y los comandos HTML usados para crear una página Web se conocen en conjunto como su código fuente. (El código fuente hace referencia al texto y a los comandos HTML usados para crear una página Web.) La mayor parte de los exploradores permiten mostrarlo. Por ejemplo, para mostrar código fuente con Internet Explorer, debe elegir Código fuente en el menú Ver, como se muestra a continuación:

20 Figura 1-4. Un archivo de texto HTML y dos archivos gráficos se combinan para crear la página principal de Arizona Film Society (www.creationguide.com/afs) (en inglés). Figura 1-5. La vista de las carpetas de la página principal de Arizona Film Society muestra que se combinan tres archivos para mostrar la página en línea.

21 Cuando haya examinado las figuras 1-4 y 1-5, estará preparado para asimilar otro concepto “básico”. Fundamentalmente, debe concluir esta explicación con la información siguiente: Cuando observa una página Web en un explorador de Internet, normalmente está viendo varios archivos que se combinan para crear una única página. Habiendo puesto a buen recaudo la idea de que una página Web consta de varios archivos, ahora debe considerar de forma consciente que una página Web no sólo es un tipo de comunicado, como un panfleto de los que le dejan en el parabrisas. Por el contrario, una página Web siempre usa hipervínculos para vincularse a otras. Hipervínculos y sitios Web Tal como afirmamos al principio de esta lección, suponemos que si desea crear una página Web es porque ha explorado el Web. Por lo tanto, es muy probable Jerga: los hipervínculos que haya hecho clic en numerosos hipervínculos. Como seguramente sabrá, los son texto o gráficos donde hipervínculos son texto o gráficos donde puede hacer clic y que permiten tener se puede hacer clic para acceso a recursos de Internet y páginas Web adicionales. En un lenguaje más tener acceso a recursos técnico, los hipervínculos son elementos que se incluyen en documentos adicionales en Internet, como otra ubicación en la página HTML y que señalan a otras páginas Web o documentos de Internet (de forma Web actual, otra página Web similar a cómo los comandos HTML señalan a los archivos de gráficos) o a u otro archivo que descargar. otras áreas de la misma página. En la figura 1-6 se ilustra el modo en que un par de hipervínculos de la página principal de Arizona Film Society señalan a otras páginas Web. Al hacer clic en un hipervínculo, se muestra otra área de la página actual o de otra página Web, que puede ser cualquiera de Internet (y no sólo una que usted haya creado), ubicada en cualquier parte del mundo. Como desarrollador de páginas Web, el uso de hipervínculos lleva de forma natural hacia la utilización de varias páginas Web. En general, normalmente preferirá no colocar toda su información en una única página principal grande y larga. En su lugar, es probable que desee crear una serie de páginas Web más pequeñas que se relacionen y vinculen entre sí. Esta colección de páginas Web relacionadas conforma un sitio Web.

22 Figura 1-6. Los hipervínculos llevan a quien está viendo la página Web a otras páginas Web, otras áreas de la misma página u otros recursos de Internet. De su cabeza al Web (y de vuelta otra vez) En este punto de la lección, todos los componentes están sobre la mesa: Internet, el Web, exploradores, páginas Web, hipervínculos y sitios Web. Esta enumeración de componentes es un buen comienzo, pero nos enfrentamos al pequeño detalle de cómo un archivo de texto y unos archivos gráficos que ha creado en su equipo se convierten en una página Web en Internet. Antes de que nos adentremos demasiado hondo en los entresijos de la transferencia de páginas Web, vamos a desenmascarar un mito sorprendentemente popular: las personas que ven sus páginas Web tienen acceso a su equipo de escritorio. La afirmación anterior no es verdad. Podemos asegurarle que las páginas Web no se almacenan en los equipos personales, sino en servidores.

23 La naturaleza cliente-servidor del Web Los servidores son, simplemente, equipos extremadamente eficientes que almacenan los archivos de Internet y ejecutan software especial diseñado para responder a las solicitudes de los clientes. Por supuesto, ahora hemos introducido el término cliente. Vamos a detener esta aproximación indirecta y nos dedicaremos un momento a explicar esta jerga. Básicamente, los archivos Web se transmiten usando lo que se conoce como modelo cliente-servidor. En el modelo cliente-servidor, un sistema (el servidor) conectado a una red atiende la solicitud de otro sistema (el cliente). En lo que respecta al diseño Web, un cliente es un nombre imaginativo para un explorador (como Internet Explorer) que se ejecuta en el equipo de un usuario y un servidor es la combinación de un equipo muy eficaz que almacena las páginas Web y el software que responde a las solicitudes para mostrar estas páginas Web almacenadas en él. Por lo tanto, cuando tiene acceso a una página Web, tiene lugar el proceso siguiente: Jerga: URL son las siglas de 1 Conecta su equipo a Internet y abre el explorador. A continuación, Uniform Resource Locator. especifica una dirección Web (URL) en la barra de direcciones y Una dirección URL hace presiona Entrar, o hace clic en un hipervínculo de la página de referencia a una dirección inicio del explorador. de Internet que indica al explorador Web donde mirar 2 El cliente (su explorador) envía la dirección URL escrita o la en Internet para encontrar dirección URL asociada con un hipervínculo a través de las líneas una página Web específica. de teléfono, los cables o, quizás, los enrutadores a su proveedor de servicios Internet (ISP, Internet Service Provider). El ISP es la compañía a la que paga para que le proporcione acceso a Internet. 3 El ISP envía entonces su solicitud de dirección URL en Internet a través de más cables, enrutadores y otros circuitos de datos de alta velocidad al sistema (el servidor) que mantiene la página Web solicitada. 4 El servidor envía la información de la página Web a través de Internet al ISP y, finalmente, éste la reenvía a su equipo. Tenga en cuenta que esta Desde la perspectiva de un desarrollador de páginas Web, una vez creada una, lección presenta una debe copiar sus archivos al servidor que la alojará, de forma similar a como se explicación simplificada copia un archivo del disco duro a un disquete, excepto por una diferencia: los (aunque precisa) del proceso de recuperación básico de archivos de la página Web se copian a través de los hilos de Internet, como se páginas Web. describe posteriormente en este libro, en la lección 8. Mediante las aplicaciones actuales del Protocolo de transferencia de archivos (FTP, File Transfer Protocol), las carpetas Web (y Mis sitios de red) o los asistentes para publicación en Web, el proceso de copia de los archivos de páginas Web a un servidor puede ser tan sencillo como arrastrarlos desde su carpeta local a una carpeta del servidor que esté usando para alojar su sitio Web. Por lo tanto, cuando otras personas ven su página Web publicada, están teniendo acceso al servidor que almacena las copias de los archivos y no a su equipo.

24 Con esto concluye nuestro repaso de conceptos básicos. En este momento, está preparado para seguir avanzando en el diseño y la implementación de páginas Web, como se describe en las siguientes páginas de este libro. Pero antes de terminar esta lección, nos gustaría informarle de lo que va a encontrar en las siguientes lecciones. Avanzando a un ritmo regular Como podría sospechar, una gran parte del trabajo de creación de una página Web la constituye el planeamiento de la misma (y del sitio Web) antes de sentarse ante su equipo. Tiene que emplear al menos algo de tiempo en pensar en el contenido, tanto el texto como los gráficos, y además de en idear el diseño de la página. Aunque el diseño de páginas Web es un proceso creativo, no es una magia negra desprovista de estructura. En el curso de este libro, vamos repasando unos cuantos principios básicos que ayudarán a hacer el proceso de creación de páginas Web más sencillo. Nuestra pericia se deriva no sólo de nuestros propios años de experiencia en la red sino también de los numerosos estudios de utilización que muchos otros diseñadores, ingenieros y especialistas de la información han realizado. Con estos recursos, hemos sacado algunas conclusiones básicas acerca del texto, los gráficos y los colores que se usan en el Web y que hemos probado en la práctica. Por lo tanto, las lecciones 2 a 5 tratan de la información que debería conocer acerca del diseño de páginas Web, incluidas cuestiones relacionadas con el texto, los gráficos, los colores, programas útiles y planeamiento de páginas Web. Encontrará las siguientes lecciones repletas de información importante relativa a la creación de páginas Web; si la utiliza bien, sus futuros trabajos de diseño Web serán más fructíferos. Por lo tanto, le recomendamos encarecidamente que lea las lecciones 2 a 5 antes de sumergirse en las lecciones 6 a 8, o que al menos las ojee. Para finalizar, con independencia de la forma en que desmigaje este libro y emprenda su trabajo en el Web, cuando todo esté dicho y hecho, recuerde repasar la lección 8. La lección 8 describe cómo “pasar al mundo real” sus páginas Web (si utiliza algún método de publicación de páginas Web que no sea MSN u otro servicio de alojamiento gratuito). Con todo, cuando complete estas lecciones, habrá dominado los fundamentos de la creación de páginas Web de diversas formas. Ya no se encogerá cuando oiga expresiones como HTML y nombre de dominio, y sus conocimientos le servirán como una sólida base que podrá utilizar para crear una amplia variedad de páginas Web más avanzadas.

25 Puntos clave ■ Internet es el hardware. ■ El Web es el software (que incluye programas y documentos). ■ Los exploradores son aplicaciones que permiten ver páginas Web. ■ Las páginas Web más básicas constan de varios archivos: un archivo HTML (de texto) y archivos gráficos. ■ Un sitio Web es un grupo de páginas Web relacionadas. ■ Los hipervínculos proporcionan acceso a otras páginas Web, otras áreas de la misma página u otros recursos de Internet. ■ Internet usa el modelo cliente-servidor, en el que un servidor responde a las solicitudes de información de los clientes. ■ Los usuarios de Internet tienen acceso a las páginas Web que se almacenan en servidores. ■ Si puede utilizar un equipo, ¡puede crear una página Web!

26 LECCIÓN 2 Creación y forma del texto para el Web Una vez completada esta lección, podrá:  Describir lo que hace que una página Web sea “fácilmente ojeable”.  Identificar los elementos de texto claves de una página Web.  Crear texto para el Web que sea claro, conciso y legible.  Elegir varias técnicas para usar la tipografía como un elemento de diseño. Cuando las personas contemplan la creación de páginas Web, normalmente piensan en el diseño primero; es decir, en cómo se verá la página en lugar de lo que debería decir. Y eso es comprensible y también deseable. De hecho, una parte de este libro está dedicado al diseño de páginas Web. Pero, en el corazón de cada página Web, se encuentra el contenido. Después de todo, la mayor parte de la gente crea páginas Web porque tiene un mensaje que desea compartir, incluso si simplemente proclama: “¡Mirad lo que he estado haciendo últimamente!”. Para ser un éxito, una página Web debe proporcionar información que capte rápidamente la atención de quien la observa o, de lo contrario, no siga mirándola más de un par de segundos y probablemente no vuelva al sitio donde se encuentra. Por lo tanto, debería empezar por pensar en el contenido de su página Web antes de llegar demasiado lejos en su diseño. Si sigue leyendo este texto, estará en camino de conseguir que el contenido de sus páginas Web tenga una estructura y corrección admirables al final de la lección. Pero, incluso si no llega tan lejos en la creación de contenido para un sitio Web en particular, podrá identificar y crear buenos textos para el Web en general. Además, sabrá cómo puede sacar el máximo provecho del texto de las páginas Web que cree en el futuro. Con estos conocimientos en mente, podrá combinar el contenido y el diseño con facilidad cuando empiece a crear sus páginas Web. Ahora, volvamos al tema que nos ocupa: el texto en línea. Razonablemente, podría estar pensando que es bastante capaz de usar las palabras, así que en realidad no necesita leer acerca de los textos de páginas Web. Pero tenga la seguridad de que, incluso si su ocupación es la de escritor, puede aprovechar las sugerencias de esta lección. Aunque un buen texto en línea tiene mucho en común con uno impreso de similar calidad, también se diferencia de éste en diversas formas. Verá, a medida que avance en esta lección, que la creación de texto efectivo en línea implica el dominio y combinación de las artes de la claridad, la mercadotecnia, el atractivo visual, las limitaciones de la tecnología y un ápice de la psicología del lector.

27 Aproximación de los lectores a las páginas en línea El primer concepto que necesita abordar es que los lectores responden a las páginas Web de forma diferente a como reaccionan ante las páginas impresas. En los primeros estudios sobre esta materia, los entendidos en el Web encontraron que en leer un bloque de texto en línea se tardaba aproximadamente un 25 por ciento más que en leer el mismo texto en una página impresa. En otras palabras, en la cantidad de tiempo que emplea leyendo 75 palabras en línea, podría leer 100 si estuvieran en un libro. Los expertos de ahora debaten sobre si la velocidad de lectura en línea ha aumentado debido a la mejora en los monitores, al uso del color o a la familiaridad cada vez más generalizada con este tipo de textos. Sin reparar en los porcentajes exactos, la mayoría de expertos coincide en que la velocidad de lectura de las personas se reduce significativamente cuando leen texto en línea, en comparación con la lectura en papel, incluso aunque se está produciendo una mejora en muchos casos. Una de las formas de adaptación desarrolladas para conseguir superar la lentitud de la lectura de texto en línea es que ahora las personas suelen ojear el texto en lugar de leer cada palabra que se muestra en el monitor. Como promedio, la mayor Básicamente, un usuario ojea una página Web para encontrar un elemento de parte de los visitantes de una interés que le anime a hacer clic en un vínculo o a copiar el contenido y leerlo página Web determinan en con más detenimiento. Si una página Web no atrae a un usuario con rapidez (en 10 segundos si contiene la información que desean o los siguientes 10 segundos, según la mayoría de estudios de uso, probablemente necesitan. Si parece que se irá a otra página (o a otro sitio). La creación de páginas que se pueden ojear satisface sus necesidades, la con facilidad también incrementa la credibilidad de la página Web, al tiempo mayor parte siguen viéndola que aumentan sus posibilidades de clasificarse antes en los motores de menos de 30 segundos. búsqueda, ya que sus ideas principales son más fáciles de identificar. Por lo tanto, siempre que cree contenido para una página Web, tenga este concepto al frente de sus procesos mentales. En esta lección, describimos diversos métodos que puede emplear para mejorar la facilidad con que se pueden ojear sus páginas Web.

28 Para ilustrar el concepto de ojear, compare las figuras 2-1 y 2-2. La figura 2-1 muestra una página Web que no observa las prácticas recomendadas para la creación de buen texto en línea, mientras que la figura 2-2 sigue el consejo comentado en esta lección. Observe la mayor rapidez con la que puede identificar los puntos principales del texto en la figura 2-2 en relación a la figura 2-1. A continuación se explica el porqué y se ofrecen indicaciones que puede tener en cuenta al crear su propio texto en línea. Figura 2-1. Una presentación ineficaz de texto en un página Web puede desviar la atención de los lectores antes de que lean una palabra del contenido.

29 Figura 2-2. Una presentación efectiva del texto de una página Web hace posible que se ojee con más rapidez, con lo que los lectores pueden encontrar la información que precisan más fácilmente. Ahora que hemos expuesto un caso para hacerle pensar en su texto y reconocer cómo se aproximan los clientes a las páginas Web, vamos a echar un breve vistazo a las funciones fundamentales que desempeña el texto en una página Web. A continuación, discutiremos los detalles relativos a la forma y eficacia del texto en línea.

30 Elementos de texto de una página Web La mayor parte de las páginas Web usan diversos componentes de texto, según se ilustra en la figura 2-3. Como puede observar en la figura, además de en muchas páginas Web, en ellas aparecen los elementos de texto descritos en las subsecciones siguientes. Figura 2-3. Las páginas Web efectivas contienen diversos elementos de texto comunes.

31 Barra de título Cuando crea una página Web, crea el texto que aparece en la barra de título de la ventana de un explorador. La clave para el título es que sea conciso, claro y útil. Tenga en cuenta que, al abrir una página Web, el texto del título de la misma también aparece en la barra de tareas de Microsoft Windows. La barra de tareas simplifica el trabajo de un usuario cuando pasa de una ventana abierta a otra. Por lo tanto, aunque puede incluir texto inteligente o ingenioso si lo desea, en general debe inclinarse en cambio hacia el uso de texto útil y claro. Observe los textos de las barras de título poco convincente y útil, respectivamente, que se muestran en las figuras 2-1 y 2-2. Sugerencia Para aumentar la claridad (especialmente en los botones de la barra de tareas), omita los artículos iniciales (el, un, una) en el texto de la barra de título de una página Web. El uso de títulos conocidos y descriptivos contribuye a que las páginas destaquen en el área de trabajo de los usuarios además de en los resultados de los motores de búsqueda que organizan las páginas Web por el título. Contenido El contenido de una página Web hace referencia a su sustancia: la razón por la que la gente visita el sitio. Como se describe en las secciones siguientes, el contenido de una página Web debe ser claro, breve, fácil de ojear, informativo, oportuno y gramaticalmente correcto (además de tener otras cualidades). Tenga en cuenta que no importa lo bonito que sea un sitio Web, la característica más atractiva de Internet es el texto. Después de todo, además de visitar los sitios Web, unos cuantos cientos de millones de personas confían regularmente en el texto en línea para enviar mensajes de correo electrónico, charlar con mensajería instantánea y exponer sus opiniones en grupos de discusión. Sugerencia Una forma de obtener el contenido de sus páginas Web es aprovecharse de los proveedores de contenido Web. Algunas agencias nuevas, centros de multimedia, grupos de intereses especiales, empresas privadas y otros especialistas de la información ofrecen contenido Web a los sitios Web de forma regular, generalmente a cambio de unos honorarios. Para buscar un proveedor de contenido, visite el motor de búsqueda que prefiera (a nosotros nos gusta www.google.es) y busque proveedores de contenido Web.

32 Hipervínculos Observe que usamos Los hipervínculos proporcionan forma y claridad a un grupo de páginas Web las palabras vínculo e (o a una página Web larga) al vincular la página principal, y las auxiliares, a hipervínculo indistintamente. áreas que contienen información específica relacionada. En otras palabras, los hipervínculos le ayudan a organizar su información y permiten que los demás tengan acceso a ella con rapidez y facilidad. Los hipervínculos de texto deben ser claros y coherentes, además de estar colocados de forma apropiada, como se explica posteriormente en esta lección. Logotipos, texto gráfico y WordArt Jerga: texto gráfico es un Puede usar logotipos, texto gráfico y WordArt para aportar una apariencia término general que hace profesional a sus páginas Web. Como se explica en la lección 3, puede usar referencia al texto que se usa para crear elementos texto gráfico para conferir una apariencia y funcionamiento coherentes a un gráficos en las páginas Web, grupo de páginas Web relacionadas. Hacer que todos los componentes de un por ejemplo, botones, sitio Web aparezcan interrelacionados indica claramente a los usuarios que pancartas o títulos estilizados. WordArt es una siguen dentro del territorio de su sitio Web incluso aunque hagan clic de una característica de Microsoft página a otra. Además, los logotipos, el texto gráfico y WordArt se usan con Word que permite crear gráficos basados en texto frecuencia para proporcionar un vínculo gráfico afín a la página principal de un estilizado, como sitio. Puede que haya descubierto mientras explora el Web que, por lo general, encabezados y logotipos. puede hacer clic en el logotipo de una compañía para volver a la página Por ejemplo, en las figuras 2-1 y 2-2, hemos creado el principal del sitio. (Si aún no ha descubierto este secreto, debería probarlo logotipo “Ant! Online” con la durante su próxima sesión en el Web.) Siempre que sea posible, aproveche esta característica WordArt de Word y, en la figura 2-3, práctica y vincule su logotipo con la página principal en todo el sitio Web. el texto gráfico “Sign Up Today!” es un elemento Opciones de exploración con texto de WordArt. Muchos diseñadores Web optan por dar formato a los elementos de exploración (botones) y a la barra de menús sólo como gráficos (en la figura 2-3, los botones del área superior izquierda actúan esencialmente como barra de exploración de la página principal). El uso de elementos gráficos de exploración es acertado, pero le recomendamos que también muestre sus hipervínculos de exploración como texto simple conjuntamente con sus elementos gráficos. Si el diseño de su página Web usa una barra de menús o botones gráficos, puede evitar desbaratarlo si muestra hipervínculos de texto en la parte interior de la pantalla. Ofrecer una alternativa a los vínculos basados en gráficos resulta útil porque algunas personas desactivan las capacidades gráficas del explorador para acelerar la descarga de páginas Web. Si no proporciona componentes de exploración basados en texto, algunos usuarios podrían no descubrir cómo llegar a las páginas secundarias de su sitio. Sugerencia Como sugerencia suplementaria, la adición de vínculos de exploración basados en texto al final de las páginas Web ayuda a los usuarios a ir a otras páginas del mismo sitio Web sin tener que desplazarse al principio de

33 la página actual para tener acceso a los vínculos principales de exploración.

34 Información de fecha o de última modificación Generalmente, debe incluir un elemento de fecha en sus páginas Web. La fecha puede ser tan sosa como una pequeña línea de texto situada cerca de la parte inferior de la página. Sin embargo, si actualizar el contenido con regularidad es uno de los atractivos principales de su página, puede ser aconsejable que la fecha sea mucho más aparente y colocarla más alto, cerca del área superior izquierda, más “selecta”. Por otro lado, si no piensa actualizar su sitio asiduamente, puede optar por no publicar la fecha en que se modificó por última vez. (Con franqueza, no recomendamos que prevea no actualizar su sitio pero, en ciertas circunstancias, podría apañárselas con una página estática o dos.) Información de copyright Usted posee el copyright de todo el texto y los gráficos originales que crea. Por lo tanto, para proteger su propiedad, debería agregar un aviso de copyright en sus páginas Web. Tenga en cuenta que si usa software que sea gratuito (por ejemplo, gráficos sin copyright que haya descargado de otro sitio Web) en la página Web, es gratuito para todos los demás y pueden usarlo también. Para crear © en Microsoft Cuando agrega texto de copyright, la información puede ser tan sencilla como Word, presione Ctrl+Alt+C. © Copyright 2002 Su nombre o El nombre de su compañía. Todos los derechos reservados. Además, la información de copyright se debe colocar cerca del final de la página y en un tamaño de fuente que sea evidentemente menor que el del texto del cuerpo de la página Web. Ahora que hemos aludido a los elementos básicos de texto de las páginas Web, ya puede dar forma al contenido y redactarlo. Consideración del texto como elemento de diseño Como sabe, el texto de una página Web informa además de aportar su presencia al diseño de conjunto de la misma. (Vea la figura 2-3.) Debe empezar a meditar sobre las cuestiones básicas del diseño de texto mientras lo recopila. Por lo tanto, a medida que cree su contenido y lea la lección 3, tenga en cuenta las siguientes cuestiones relacionadas con el diseño: ■ Cree títulos y encabezados gráficos para agregar un efecto artístico. ■ Muestre citas y barras laterales para aligerar las páginas con mucho texto. ■ Agregue WordArt, logotipos, texto gráfico y pancartas para proporcionar una apariencia y funcionamiento coherentes en todo el sitio. ■ Use iconos de fácil compresión en lugar de palabras, similares a los iconos “nuevo” y “lo último” que salpican el Web.

35 ■ Aplique juiciosamente el color u otro formato tipográfico (como la negrita o la cursiva) para atraer la atención hacia las palabras y conceptos importantes. ■ Use letras capitales o iniciales altas (las primeras letras de mayor tamaño en un párrafo) para indicar el principio de una sección. ■ Asegúrese de que los fondos no interfieren con la legibilidad del texto. ■ Incluya los datos importantes (como la información de contacto, el nombre de su compañía, etcétera) como texto, incluso si la información aparece en forma de gráfico en algún otro lugar de la página. Algunas personas desactivan la presentación de gráficos para acelerar la exploración, lo que significa que pierden la información gráfica de la página. ■ Evite la letra pequeñita; si duda, deje que los usuarios definan el tamaño de texto con la configuración predeterminada de su explorador. ■ Use fuentes admitidas en la mayor parte de las plataformas y que sean fáciles de leer. Actualmente, las fuentes más compatibles con los equipos Apple Macintosh y los basados en Windows son Arial, Arial Narrow, Comic Sans, Courier New, Times New Roman y Verdana. Finalmente, como sugerencia de despedida sobre el texto después de todo lo dicho en esta lección en relación a lo que debe y no debe hacerse, nos gustaría sugerir que se divierta con el contenido de su página Web. El Web le concede la libertad de comunicar la información de manera rápida y creativa en formas nuevas. Piense lo que desea decir con exactitud y escriba entonces su mensaje tan clara y enérgicamente como sea posible. Una vez que comience a escribir frases concisas y directas, estará bien encaminado. Puntos clave ■ Los usuarios ojean las páginas Web en lugar de leerlas linealmente. ■ Los títulos, contenido, hipervínculos, logotipos, creaciones de WordArt, elementos gráficos de texto, formatos, menús, opciones de exploración, fechas de modificación de la página e información de copyright representan los usos típicos del texto de una página Web. ■ El texto de una página Web atrae la atención de los usuarios antes que los gráficos. ■ La información de las páginas Web debe imitar aproximadamente la tradicional pirámide invertida de la metodología de redacción de noticias.

36 ■ Busque ideas para clarificar los puntos principales, encabezados y vínculos de su página Web. ■ Escriba frases precisas y directas, y párrafos estructuralmente correctos y concisos. ■ Haga que los encabezados e hipervínculos sean claros y descriptivos. ■ Use listas con viñetas y una jerarquía de encabezados para ayudar a los lectores a identificar con rapidez los puntos clave. ■ Incluya la información importante en forma de texto para que puedan verla los usuarios que optan por no descargar los gráficos del Web. ■ Corrija, corrija y vuelva a corregir la ortografía (y no olvide imprimir y leer el texto en voz alta). ■ Compruebe la gramática. ■ Empiece a pensar en los elementos de diseño del texto, incluyendo el formato tipográfico, el color y los elementos de texto gráfico. ■ Y, lo más importante de todo, una vez que tenga en cuenta las posibilidades y limitaciones de la redacción para el Web, deje que la experiencia de escribir sea un proceso creativo y agradable.

37 LECCIÓN 3 Creación y utilización de arte en el Web Una vez completada esta lección, podrá:  Comprender los fundamentos de los gráficos Web.  Ver y tratar gráficos Web en un programa de gráficos.  Describir los diferentes tipos de formatos de archivos gráficos.  Elegir colores “simplificados” para el Web.  Recortar una imagen gráfica. En esta lección, simplificamos el tema de los gráficos Web. En un mundo perfecto, dedicaríamos páginas y páginas a los matices del uso de gráficos en el Web (principalmente porque nos gustan), pero entonces nunca llegaría al resto de las lecciones. Tampoco deseamos que se sienta abrumado cuando tenga la oportunidad de usar gráficos Web. Como tal vez haya descubierto, puede encontrar fácilmente una superabundancia de información acerca de gráficos avanzados si mira en Internet o en cualquier librería. Afortunadamente, puede usar gráficos Web de forma eficaz sin tener que sumergirse en la teoría gamma y la rasterización. Por lo tanto, hemos optado por adoptar la solución práctica de presentar lo que juzgamos que es la información más significativa y fundamental acerca de los gráficos para páginas Web. Piense en esta lección como su curso de iniciación personal en el arte Web. Cuando llegue a la sección “Puntos clave”, al final de la lección, tendrá mucho en qué pensar, unos cuantos trucos debajo de la manga, una o dos ocurrencias que decir en una fiesta y varios lugares a los que acudir cuando tenga que buscar, adquirir, crear y preparar arte para el Web. Los archivos de ejercicios de esta lección se pueden encontrar en la subcarpeta Lesson03 de la carpeta Web Design FundamentalsPractice, que se encuentra en el disco duro. Los archivos usados en esta lección son: apples.jpg, cherries_photo.jpg, cherries.gif, firebreath.gif, palette216.gif, fruit_standard.jpg, fruit_compressed72.jpg, fruit_progressive.jpg y fruit_progressive_compressed72,jpg.

38 Mecánica de los gráficos Web Antes de que empiece a ojear esta lección para examinar las imágenes y desenterrar las direcciones de nuestros ejemplos en línea, tenga en cuenta que realmente necesita leerla para asegurarse de entender unos cuantos conceptos clave relativos a los gráficos Web. Como sabe, éstos parecen bastante similares a los impresos pero, cuando se crean y utilizan imágenes en el Web, intervienen varios factores específicos de este medio. En concreto, los gráficos en línea requieren que considere las limitaciones del color y el formato y tamaño de los archivos, además de posibles cuestiones relacionadas con la transparencia, la descarga y la animación. Cuando tome conciencia de los tres factores principales (colores, tipos de archivo y tamaño de archivo), podrá empezar a usar gráficos en sus páginas Web y tener un punto de partida que le permita iniciar un estudio más pormenorizado de los mismos. Por lo tanto, el plan de ataque general es colocar algunos conceptos básicos de los gráficos Web en una esquina craneana o dos antes de abrir su mente a las perspectivas más creativas (y divertidas) de la utilización, recopilación y creación de gráficos Web. Comencemos examinando el modo en que los gráficos muestran el color. Píxeles, paletas y colores Jerga: un píxel es un Antes que nada, cada gráfico en línea consta de una serie de pequeños cuadrado de una red de cuadrados coloreados que se entremezclan para formar una imagen. En cierto cientos de cuadrados que modo, los gráficos en línea simulan una técnica de pintura denominada se colorea individualmente para crear una imagen. Puntillismo. El Puntillismo, introducido por el pintor francés Georges Seurat (1859–1891), es el arte de crear imágenes a base de puntos (o pequeños trazos del pincel). A través del Puntillismo, Seurat dividía cada imagen del lienzo en pequeños puntos de colores. Cuando mira de cerca una pintura puntillista, puede ver cada punto. A medida que se aleja de la pintura, los puntos se combinan para crear una imagen. Los equipos informáticos muestran las imágenes con una técnica similar al Puntillismo, excepto en que, en lugar en puntos pintados, dividen las imágenes en cuadrados coloreados, denominados píxeles. Por ejemplo, eche un vistazo a las cerezas de la figura 3-1. Esta figura podría ser cualquier gráfico que se muestre en su pantalla. Como puede ver, el gráfico parece similar a muchas otras imágenes en línea (o impresas, en este caso) y no hay signos obvios de puntos, cuadrados ni píxeles.

39 Figura 3-1. Una par de cerezas se presentan como gráfico típico. Ahora vamos a mirar el gráfico un poco más de cerca. En la carpeta de archivos de ejercicios de Lesson03 de este curso, busque el archivo cherries_photo.jpg y ábralo en una aplicación de edición de gráficos como Jasc Paint Shop Pro, Adobe Photoshop o Microsoft Paint. Si a continuación amplía drásticamente la imagen, podrá ver los tamaños reales (píxeles) que la conforman, según se muestra en la figura 3-2. Si amplía las cerezas en el monitor, verá que los colores y formas de la imagen varían de un píxel a otro, o de un cuadrado a otro. Sugerencia Si no tiene una aplicación de edición de gráficos en el sistema o si desea probar una “completita” de uso generalizado, visite el sitio www.jasc.com (en inglés) y descargue una versión gratuita de prueba de Paint Shop Pro. Hablaremos más acerca de las aplicaciones de edición de gráficos más adelante en esta lección.

40 Figura 3-2. Cuando amplía una imagen en línea, puede ver sus píxeles. ¡Pruébelo! Con el archivo cherries_photo.jpg abierto en el programa de gráficos, amplíe la imagen con la opción Zoom o Magnifying Glass (Ampliar) del programa. Para ilustrar mejor el funcionamiento de los píxeles, decremente gradualmente la vista de la imagen (o “aleje” la vista) hasta un tamaño más visible, según se muestra aquí: Si lo hace lentamente, puede ver cómo se mezclan los píxeles para crear una imagen nítida.

41 Jerga: una paleta contiene el Ahora que conoce los píxeles, podemos hablar un poco sobre paletas. Una paleta conjunto de colores usados es, simplemente, la tabla de colores usados en un gráfico. Algunos gráficos Web en un gráfico. (en concreto los guardados con el formato de archivo GIF, según se describe en la sección siguiente) usan una colección limitada de colores. Puede asignar una paleta a una imagen o puede dejar que el programa de gráficos genere una automáticamente a medida que crea y edita la imagen. Una paleta GIF puede contener hasta 256 colores pero algunas imágenes usan menos. Por ejemplo, si examina la figura 3-3, en el gráfico de las cerezas se usan 8 colores mientras que en el de las guindillas se utilizan 128. Observe el tamaño de las imágenes: el gráfico de las cerezas tiene 3 KB (es muy pequeño) y el de las guindillas tiene 7 KB (casi tan pequeño como el gráfico GIF de las cerezas). Figura 3-3. La paleta del gráfico de las cerezas contiene 8 colores y la de las guindillas contiene 128.

42 Jerga: en algunas Generalmente, la mayor parte de las aplicaciones gráficas permiten ver los aplicaciones de gráficos Web colores incluidos en la paleta de un gráfico GIF. Además, puede reducir el y documentación, también se tamaño de una imagen GIF si reduce o limita el número de colores de su paleta. hace referencia a una paleta como una tabla de consulta Y, como probablemente sabrá, cuanto menor es el tamaño de los archivos, más de colores (CLUT, Color rápida es su descarga en el Web. Look-up Table ) o, simplemente, como una tabla de colores. ¡Pruébelo! En la carpeta de archivos de ejercicios Lesson03 de este curso, busque el archivo cherries.gif o firebreath.gif y ábralo en una aplicación de edición de gráficos, como Jasc Paint Shop Pro, Adobe Photoshop o Microsoft Paint. Para mostrar la paleta de la imagen en Paint Shop Pro, seleccione Edit Palette (Editar paleta) en el menú Colors (Colores). En Photoshop, seleccione Mode (Modo) en el menú Image (Imagen) y, después, seleccione Color Table (Tabla de colores). (Sabemos que cada paquete gráfico tiene sus propias opciones de menú; proporcionamos los dos comandos anteriores para darle una idea del tipo de comando que debería buscar en la aplicación de gráficos.) Como hemos mencionado, las paletas entran en escena cuando usamos imágenes GIF. Nos damos cuenta de que no hemos definido lo que son las imágenes GIF aún, ni ningún otro formato de imagen que se admita en el Web. Sin embargo, ahora que ya ha tanteado la naturaleza de los píxeles y las paletas, avanzaremos y explicaremos los formatos de archivos de gráficos que puede usar en el Web. Hablaremos más acerca de las paletas cuando expliquemos las imágenes GIF más adelante en esta lección. Formatos de archivos gráficos Como puede que recuerde, en la lección 1 afirmamos que cada gráfico de una página Web se almacena como archivo independiente. Para refrescar la memoria, vuelva de nuevo a la figura 1-4 de la lección 1. Observe los nombres de los dos archivos de imágenes. El nombre del archivo de la figura de la barra de título termina con la extensión .gif (afs_title.gif) y el de la otra figura termina con .jpg (4members.jpg). Las extensiones de archivos gráficos se basan en los mismos principios que el resto de formatos de archivo. Por ejemplo, si ve un archivo en el escritorio denominado lista_regalos_vacaciones.doc, sabe por la extensión .doc que probablemente se trate de un documento de Microsoft Word y deseará abrirlo en Word (especialmente, si sospecha que usted es una de las personas que aparecen en la lista de regalos). De forma similar, si ve un archivo en el escritorio denominado facturas.xls, sabe que .xls indica que se trata de un documento de Microsoft Excel, con lo que podría abrirlo en Excel (aunque puede que desee evitar los archivos que se llamen facturas). En relación a los gráficos Web, las páginas Web pueden incluir imágenes gráficas que usen las extensiones de archivo .gif o .jpeg (o .jpg) porque los exploradores Web más populares pueden mostrar los archivos GIF y JPEG.

43 Gráficos GIF Los gráficos GIF constituyen el tipo de imagen que se admite en más sitios del Jerga: GIF (Graphics Web, lo que significa que casi todos los exploradores (los viejos, los nuevos y Interchange Format) es un formato de archivo gráfico los de en medio) pueden mostrarlos. GIF son las siglas en inglés de Graphics usado para crear imágenes Interchange Format (Formato de intercambio de gráficos) CompuServe creó y utilizarlas en Internet. este formato en la década de los ochenta como un medio eficaz de transmitir Las imágenes GIF pueden contener hasta 256 colores. imágenes a través de las redes de datos. La principal ventaja del formato GIF es que las imágenes GIF suelen ser pequeñas, lo que significa que se descargan y se muestran rápidamente. Como se ha mencionado anteriormente en esta lección, las imágenes GIF usan y admiten paletas de hasta 256 colores (lo que los convierte en gráficos de 8 bits). Puesto que admiten un número limitado de colores, debe usarlos para áreas de colores básicos, logotipos, líneas, iconos, ilustraciones de dibujos animados, botones, reglas horizontales, viñetas, fondos y otros elementos gráficos que requieran pocos colores. La figura 3-4 muestra algunos ejemplos de usos típicos de imágenes GIF. Figura 3-4. Las líneas, reglas horizontales, botones, viñetas y texto gráfico son algunos usos típicos de los archivos GIF.

44 Además de adaptarse a una paleta y ser pequeños y eficaces, los gráficos GIF permiten realizar tres efectos especiales: el entrelazado, la transparencia y la animación. Si utiliza una conexión a ■ Gráficos GIF entrelazados Normalmente, una imagen GIF Internet rápida, por ejemplo aparece en la pantalla fila por fila, de arriba a bajo, como si se un módem por cable, desplegara una persiana. Si lo desea, como diseñador de la página probablemente no verá los Web puede cambiar la forma en que un gráfico GIF se descarga en efectos del entrelazado. el monitor si lo guarda como archivo GIF entrelazado. Un gráfico GIF entrelazado se muestra en la pantalla del usuario borroso o dentado al principio y, después, se va definiendo gradualmente. La figura 3-5 muestra un archivo GIF entrelazado en medio de la descarga. La figura de la izquierda muestra la imagen antes de descargarse completamente y la de la derecha cuando se ha descargado del todo. Figura 3-5. En conexiones de Internet más lentas, puede ver cómo un archivo GIF entrelazado se muestra borroso antes de completarse su descarga. El uso de archivos GIF entrelazados es conveniente cuando se desea transmitir la idea principal de una imagen a los lectores mientras esperan a que finalice la descarga. Su desventaja es que tienen un tamaño ligeramente mayor que las imágenes GIF convencionales (no entrelazadas). Por lo tanto, en los botones, iconos y gráficos pequeños, es mejor utilizar el formato GIF convencional. ■ Gráficos GIF transparentes Estos archivos (gráficos GIF que usan el formato GIF89a) permiten diseñar iconos, logotipos y otros elementos que parecen estar recortados y, por lo tanto, posibilitan que el fondo de la página Web se vea a través de ciertas zonas de la imagen. Por ejemplo, como puede ver a la derecha de la figura 3-6, el fondo se muestra a través del GIF transparente para crear la ilusión de una imagen no rectangular.

45 Figura 3-6. Al comparar una imagen GIF estándar con una imagen GIF transparente se aprecia cómo permite la transparencia que el color de fondo de una página Web (o trama) se vea. Si el color de fondo de un Al crear un GIF transparente, básicamente se especifica un color gráfico GIF coincide con el único en la imagen para que actúe como el color transparente. Por de la página Web, por ejemplo, podría colorear el fondo de una imagen en rosa fuerte y ejemplo en una imagen con un fondo blanco con una asignar a continuación este color como color transparente de la página Web también con el imagen; pero debe asegurarse de que el rosa fuerte no aparezca fondo blanco, se consigue en ningún otro lugar en ella o creará puntos transparentes que no automáticamente la ilusión desea. Cuando un explorador encuentra el color transparente, no de transparencia. muestra ninguna información del gráfico en el área que tenga ese color, lo que permite ver el fondo de la página Web. ■ Gráficos GIF animados El último “truco” de los GIF tiene que ver con la animación. Mediante herramientas de animación GIF y programas de edición de gráficos, puede crear capas de GIF y guardarlas en una “pila” para crear animaciones sencillas. Cuando un explorador muestra las imágenes GIF apiladas, presenta cada una detrás de la otra. Esta técnica es similar al modo en que antiguamente se veía una película pasando tarjetas, que era popular mucho antes de que la mayor parte de nosotros existiéramos. Los iconos en movimiento, los botones giratorios y algunos anuncios en pancartas son los principales ejemplos de GIF animados. La figura 3-7 ilustra la teoría que subyace tras los GIF animados. Como verá posteriormente en esta lección, puede descargar gráficos GIF animados y herramientas de animación de GIF en el Web.

46 Figura 3-7. Se puede mostrar una serie de imágenes GIF en sucesión para crear animaciones. Sugerencia Las imágenes prediseñadas de Microsoft Office XP incluyen gráficos GIF animados y transparentes que puede usar en sus páginas Web. Para identificar que una imagen prediseñada es un GIF animado, busque una estrella dorada en la esquina inferior derecha de la imagen en miniatura, en la Galería multimedia. Para identificar que una imagen prediseñada es un fondo transparente, busque elementos que parezcan estar “recortados” en la Galería multimedia. Puede probar la transparencia de una imagen si inserta la página en un documento de Word que tenga un fondo en color. Colores “simplificados” para el Web Jerga: interpolación hace Como sabe, todos los sistemas informáticos no se crean igual. Muchas personas referencia al modelo de tardan bastante en seguir el vertiginoso ritmo que experimenta el desarrollo de puntos aleatorio que resulta hardware en el sector informático. Por lo tanto, cuando diseñe páginas Web, cuando los colores se intentan igualar mezclando debería tener en mente que no todas las personas podrán tener acceso a sus otros similares disponibles páginas si éstas requieren el hardware de pantalla más fantástico y novedoso. en una paleta limitada. De hecho, aproximadamente el 10 por ciento de todos los usuarios que exploran el Web se limitan a ver las páginas Web en 256 colores (aunque muchos de los sistemas nuevos muestran millones de colores, así que el problema del diseño en 256 colores probablemente pronto será una consideración del pasado). Por lo tanto, durante el próximo par de años, cuando diseñe páginas Web y cree imágenes GIF, podría plantearse utilizar únicamente colores que los monitores de 256 colores puedan mostrar sin dificultad. Los colores universales se conocen como simplificados para el Web o simplificados para los exploradores. Si una página Web usa colores que no sean los simplificados para el Web, los sistemas que sólo admitan 256 colores recurrirán a interpolar aquéllos que no sean estándar.

47 Para evitar la interpolación, limítese a usar los 216 colores simplificados para el Web. (Los otros 40 que faltan hasta 256 se reservan para ser utilizados por el sistema informático.) Si desea ver la paleta de colores simplificados para el Web, abra el archivo palette216.gif en un programa de gráficos. Este archivo se encuentra en la carpeta Lesson03 de este curso, en el disco duro. Para ver los colores en formato de gráfico, visite el sitio www.creationguide.com/colorchart (en inglés). Los programas de edición de gráficos suelen proporcionar una paleta simplificada para el Web que puede cargar cuando trabaje con imágenes GIF. Gráficos JPEG Además de los gráficos GIF, sus páginas Web probablemente incluyan Jerga: JPEG (Joint Photographic Experts Group) imágenes JPEG. El formato de archivo de imagen JPEG fue creado por Joint es un formato de archivo Photographic Experts Group y adoptó su nombre. Este formato de imagen gráfico usado para mostrar admite millones de colores y pueden utilizarlo los exploradores casi de forma imágenes de calidad fotográfica y otras imágenes universal. (Técnicamente hablando, las imágenes JPEG admiten colores de 24 en color en Internet. El bits, por lo que también se conocen como imágenes a todo color o de color formato de archivo JPEG verdadero.) Dado que los archivos JPEG pueden contener millones de colores, puede admitir millones de con frecuencia muestran imágenes fotográficas en línea. colores. Al trabajar con gráficos JPEG para sus páginas Web, puede especificar si desea guardarlos como JPEG estándar o progresivo: ■ Estándar Cuando guarda una imagen como archivo JPEG estándar, se carga línea por línea desde el principio de la pantalla hacia abajo, del mismo modo que se descargan los GIF de manera predeterminada. Cuando una imagen JPEG ■ Progresivo Cuando guarda una imagen como archivo JPEG se muestra en un sistema progresivo, la imagen aparece primero de forma borrosa y, que sólo admite color de 8 después, se enfoca a medida que se descargan los datos de la bits (256 colores), el misma (igual que los archivos GIF entrelazados). Con las rápidas explorador reduce los colores de la imagen para usar los de velocidades de conexión a Internet, el procesamiento progresivo la paleta Web y se produce podría no ser evidente para los usuarios enseguida; en cambio, cierta interpolación. tras un momento, la imagen parecerá “emerger” en la página. Según nuestra experiencia, los archivos JPEG progresivos parecen crear archivos más pequeños y se descargan ligeramente más rápido que los archivos JPEG estándar. Otro parámetro de configuración del formato JPEG que puede usar para su provecho es la compresión. La compresión es un proceso que reduce el tamaño del archivo de una imagen deshaciéndose de parte de la información del color. La compresión de JPEG se denomina esquema de compresión con pérdida porque, una vez comprimida una imagen, la información eliminada se pierde. Por suerte, si tiene cuidado, las personas que vean la imagen en línea no podrán percibir con facilidad la pérdida de información.

48 Sugerencia Al incrementar la compresión de una imagen JPEG, guarde siempre primero una copia de la imagen original. Después, use el comando Guardar como cada vez que vuelva a comprimir el archivo para crear otro nuevo. Una vez comprimida una imagen con el esquema de compresión de JPEG, la información que se quita se pierde. Tenga en cuenta que cuanto más comprima una imagen, más pequeño se volverá el tamaño del archivo de la imagen, pero la imagen resultante no será tan nítida como otra menos comprimida. Por lo tanto, debe experimentar con varias configuraciones de compresión al configurar imágenes JPEG en las páginas Web. En este punto, los conceptos de archivos JPEG progresivos y comprimidos no le deben preocupar, pero aún no hemos explicado cómo configurar estas opciones en una imagen JPEG. Afortunadamente, la mayor parte de los programas de edición de imágenes hacen que la especificación de parámetros en los archivos JPEG sea bastante sencilla. Para tener acceso a las opciones de configuración de un archivo JPEG en Paint Shop Pro, siga estos pasos: 1 Abra la imagen JPEG en Paint Shop Pro. (Puede practicar con cualquiera de las imágenes fruit.jpg provided para este curso que se encuentran en la carpeta Lesson03 del disco duro.) 2 Elija Save As (Guardar como) en el menú File (Archivo) para mostrar el cuadro de diálogo Save As (Guardar como). 3 Especifique un nombre de archivo nuevo y, después, haga clic en Options (Opciones) para tener acceso al cuadro de diálogo Save Options (Guardar opciones), que se muestra en la figura 3-8. Figura 3-8. El cuadro de diálogo Save Options (Guardar opciones) permite configurar las opciones de compresión y procesamiento de JPEG en Paint Shop Pro.

49 4 Especifique una opción de codificación (Standard o Progressive, estándar o progresiva, respectivamente), seleccione una opción de compresión, haga clic en OK (Aceptar) y, después, haga clic en Save (Guardar). Para configurar las opciones de JPEG en Photoshop, siga estos pasos: 1 Abra la imagen JPEG en Photoshop. 2 Elija Save (Guardar) en el menú File (Archivo). 3 Especifique un nombre de archivo y haga clic en Save (Guardar). Se abre el cuadro de diálogo JPEG Options (Opciones de JPEG). Mueva el control deslizante Quality (Calidad) para especificar las opciones de compresión en el cuadro de diálogo JPEG Options (Opciones de JPEG) y haga clic en OK (Aceptar). Gráficos PNG El tercer y último tipo de gráfico que trataremos en esta lección es el formato Jerga: PNG (Portable Network Graphics) es un de archivo PNG. PNG son las siglas en inglés de Portable Network Graphics, formato de archivo gráfico que significa gráfico portátil de red. Al igual que los archivos GIF, los archivos diseñado para reemplazar a las imágenes GIF PNG son pequeños, se cargan con rapidez y admiten la transparencia. Los en Internet. archivos PNG se transmiten más rápido que los GIF, pero sólo los exploradores más recientes permiten usarlos. Inicialmente, el formato de archivo PNG se ideó porque Unisys, el fabricante del algoritmo de compresión de GIF, decidió hacer cumplir la patente para dicho algoritmo, lo que significa que los proveedores de software tenían que pagar para usarlo. Pero en realidad no necesita conocer los detalles del debate entre PNG y GIF. Simplemente tiene que saber que la mayor parte de los exploradores nuevos (incluidos Microsoft Internet Explorer 5 y las versiones posteriores) pueden mostrar las imágenes PNG, pero casi ningún diseñador Web las usa en deferencia a los usuarios que exploran el Web con exploradores anteriores o menos avanzados tecnológicamente. Por ello, quizás tampoco deba usar archivos PNG en sus páginas Web. Nota Internet Explorer para Microsoft Windows comenzó a incorporar algunas imágenes PNG en 1997 y a proporcionar compatibilidad con este formato en las versiones para Macintosh de Internet Explorer en 2000. Por lo tanto, el formato de archivo PNG está empezando lentamente a implantarse a medida que los desarrolladores observan el porcentaje de usuarios que tienen acceso a los exploradores más actualizados o más avanzados desde el punto de vista tecnológico. Desde la perspectiva de un desarrollador, no hay ninguna razón en este momento para arriesgarse a perder visitantes usando el formato de archivo PNG cuando el formato GIF está disponible, es igual de fácil de usar y se reconoce en casi todos los exploradores (con independencia de la versión).

50 Cuestiones de tamaño La última consideración “técnica” importante que abarcamos en esta lección es el tamaño del archivo, que está directamente relacionado con la velocidad de la descarga. Como aficionado a explorar el Web, probablemente se haya encontrado a sí mismo tamborileando con el dedo sobre el mouse (ratón) con impaciencia mientras espera a ver las páginas que tardan más de 10 segundos en mostrarse o, lo que es más probable aún, haciendo clic en algún otro lugar antes de que la página lenta llegue a verse completa alguna vez. Como diseñador Web, necesita contener ese sentimiento de impaciencia. Cuando diseñe páginas Web y utilice arte Web, siempre debe tener un ojo en el diseño y el otro en la perspectiva del usuario. (¡Eso suena casi doloroso!) Al emplear arte Web, puede sacar provecho de ciertas técnicas que le ayudarán a conseguir que el tamaño de los archivos sea manejable. Ya hemos tratado algunos temas clave en esta lección que pueden ayudar a reducir el tamaño de los archivos y acelerar el tiempo de descarga, como son: ■ Evitar la interpolación en imágenes GIF con colores simplificados para el Web siempre que sea posible, especialmente en áreas grandes de colores básicos. (Piense un poco: antes de leer esta lección, esa frase no habría tenido ningún sentido para usted.) ■ Configurar las imágenes JPEG para que se procesen de forma progresiva. ■ Comprimir las imágenes JPEG para reducir el tamaño de los archivos. Además de usar las tres técnicas anteriores en relación a los archivos gráficos, puede controlar la velocidad de las descargas si cambia el tamaño de las imágenes, las recorta y usa imágenes en miniatura. En las secciones siguientes describimos brevemente cada técnica. Tenga en cuenta que la mecánica real que subyace tras la realización de ciertas tareas varía en función de las herramientas de edición gráfica. Cambio de tamaño de los gráficos Una de las mejores formas de ahorrar tiempo de descarga es cambiar Normalmente, deberá asegurarse de que el botón físicamente el tamaño de las imágenes en un editor de gráficos. Observe de opción Mantener relación que hablamos de cambiar el tamaño de la imagen y no simplemente su de aspecto (o el equivalente visualización. Al acercar o alejar una imagen, se cambia la visualización de la del programa de gráficos que utilice) está activado al misma pero ello no repercute en el tamaño ni en las dimensiones reales del cambiar el tamaño de los archivo. Intente que el tamaño de las imágenes se aproxime al que desee gráficos o, de lo contrario, utilizar para mostrarlas en la página Web. La figura 3-9 muestra el cuadro de podría distorsionar las diálogo Resize (Cambiar tamaño) que se usa en Paint Shop Pro para cambiar el imágenes. tamaño de una imagen. Para tener acceso al cuadro de diálogo Resize (Cambiar tamaño), abra la imagen y seleccione Resize en el menú Image (Imagen).

51 Tenga en cuenta que las imágenes más pequeñas tienen un tamaño de archivo menor, con lo que tardan menos en descargarse. Figura 3-9. Cambiar el amaño de las imágenes por el real en Paint Shop Pro ayuda a reducir el tiempo de descarga. ¡Pruébelo! Para experimentar con el cambio de tamaño de las imágenes, abra una imagen JPEG en un editor de gráficos y cambie la configuración de ancho o alto de la misma. Use la imagen Use the apples.jpg de la carpeta Lesson03, en el disco duro, correspondiente a este curso. Guarde la imagen JPEG y, a continuación, repita el proceso varias veces con diversas medidas, cambiando el nombre de cada versión por otro único y significativo (como apples400a.jpg para una imagen cuyo tamaño se haya cambiado a 400 píxeles de ancho). Una vez creadas algunas imágenes con varios tamaños, véalas de forma local en la ventana del explorador, es decir, explore las figuras mediante la barra de herramientas de dirección del explorador o arrastre los iconos del nombre de archivo de las imágenes JPEG hasta la ventana del mismo.

52 Truco rápido: el tamaño de las imágenes debe ser justo el adecuado Cuando empiece a diseñar páginas Web por primera vez, quizás no sepa qué tamaño deben tener las imágenes. Como ayuda para cambiar el tamaño de un gráfico por el que desee que tenga en la página Web, puede usar un programa de edición Web, como Microsoft FrontPage. Con el objeto de determinar el tamaño óptimo de un gráfico Web, siga estos pasos: 1 Inserte el gráfico en una página Web en blanco en FrontPage, por ejemplo, y arrastre los controladores de selección de la imagen para cambiar su tamaño. 2 Cuando la imagen tenga el tamaño que desee, muestre sus propiedades (en FrontPage, haga clic con el botón secundario del mouse en el gráfico y seleccione Picture Properties (Propiedades de imagen) en el menú emergente), observe los parámetros de ancho y alto de la imagen, y anótelos. 3 Vuelva a abrir la imagen en el programa de edición de gráficos y cambie el tamaño del gráfico especificando los números que copió en FrontPage (o en el programa de edición Web que haya usado) en el cuadro de diálogo correspondiente. Por ejemplo, en Paint Shop Pro, para abrir el cuadro de diálogo Resize (Cambiar tamaño), debe elegir Resize en el menú Image (Imagen) y, en MS Paint, el cuadro de diálogo Attributes (Atributos) se abre al elegir Attributes en el menú Image (Imagen). Recorte de las imágenes Además de cambiar el tamaño de una imagen, puede recortarla para reducir su Jerga: recortar una imagen es eliminar una parte de la tamaño. Al recortar una imagen, elimina la parte de la misma que no desea usar. misma, por ejemplo, las El recorte se usa con frecuencia para quitar las partes no deseadas o innecesarias porciones innecesarias de una fotografía. Por ejemplo, podría recortar la imagen apples.jpg de la figura de un gráfico. 3-9 para mostrar un primer plano de la manzana verde situada en medio de las rojas en el escurridor. En la figura 3-10 se muestran líneas de recorte (los guiones que rodean a la porción de la imagen que desea conservar) en la imagen apples.jpg, que tiene un tamaño de 50 KB, y el resultado de recortar la imagen apples.jpg. La versión recortada tiene 6 KB, únicamente.

53 Figura 3-10. Las marcas de recorte indican la porción de una imagen que se va a usar como gráfico Web. La imagen recortada sólo contiene la información limitada por las marcas de recorte. ¡Pruébelo! Para recortar una imagen, siga estos pasos: 1 Abra una imagen en un editor de gráficos. 2 Haga clic en la herramienta de selección (que suele tener forma de rectángulo o cuadrado con guiones en la barra de herramientas de la aplicación). 3 Haga clic en la imagen y arrástrela para trazar el contorno del área de la imagen que desee conservar. (Si se equivoca, presione la tecla Esc y vuelva a intentarlo.) 4 Cuando tenga un área seleccionada, elija Crop To Selection (Recortar la selección), en Paint Shop Pro, o Crop (Recortar), en Photoshop, en el menú Image (Imagen) o seleccione un comando similar en su programa de edición de gráficos.

54 Uso de vistas en miniatura Cuando domine las artes que le permiten cambiar el tamaño de las imágenes Jerga: una vista en miniatura es una versión o una parte y recortarlas, estará en disposición de usar vistas en miniatura. Una vista en más pequeña de un gráfico. miniatura es una imagen pequeña que está vinculada a una mayor. (La imagen Con frecuencia, en las mayor suele ser la misma que la vista en miniatura aunque, en su momento, páginas Web, los gráficos en miniatura tienen vimos algunos usos creativos de las miniaturas.) Si utiliza vistas en miniatura hipervínculos a las versiones en una página, sus visitantes podrán optar por ver la imagen pequeña y de mayor tamaño de los apañarse con ella, o hacer clic en la vista en miniatura para ver la imagen mismos. mayor. En otras palabras, al utilizar vistas en miniatura, les ofrece la opción de descargar las imágenes grandes si están dispuestos a soportar tiempos de descarga más prolongados. El truco para usar vistas en miniatura es crear dos gráficos con nombres diferentes. Normalmente, debe usar la misma imagen para ambos gráficos y hacer que una sea pequeña, y el tiempo que se tarda en descargarla es menor, mientras que la otra es más grande (aunque lo mejor optimizada que se pueda, por supuesto) y su tiempo de descarga es más largo. A continuación, se muestra la imagen pequeña en la página Web y se vincula a la mayor. La figura 3-11 exhibe dos vistas en miniatura. La de la izquierda muestra toda la imagen vinculada y la de la derecha una porción recortada del gráfico vinculado. La figura 3-11 también presenta el gráfico mayor que está vinculado a las vistas en miniatura. Al hacer clic en alguna de las vistas en miniatura mostradas en la figura 3-11, puede abrir una ventana que presente una vista de la imagen apples.jpg. Figura 3-11. Ambas vistas en miniatura de las manzanas se vinculan a una versión de la imagen apples.jpg cuyo tamaño puede modificarse.

55 Uso de fotografías Probablemente, en su casa tendrá, como mínimo, una caja llena de recursos de arte Web de primera clase: las fotografías. Puede usar tanto las nuevas como las antiguas con el fin de aportar arte a sus páginas Web. El truco es conseguir que la imagen impresa se convierta en información que pueda entender un equipo informático. Para ello, puede usar alguna de las opciones siguientes: ■ Escáneres Básicamente, un escáner toma una imagen de la fotografía y guarda información de la misma en forma de archivo en un equipo. Una vez digitalizada la imagen, puede tratar el archivo de igual modo que otros archivos gráficos. Puede usar cualquier escáner plano del mercado para crear gráficos Web. No necesita conseguir la mejor máquina. Nosotros utilizamos escáneres con un precio moderado para digitalizar la mayor parte de nuestras imágenes. Si no dispone de un escáner y no piensa comprar ninguno, puede pagar para que le digitalicen sus imágenes. Por ejemplo, muchos centros de fotocopias también digitalizan las imágenes por un módico precio. ■ Servicios de revelado de películas y fotografía en línea La próxima vez que deje un carrete para que lo revelen, compruebe los servicios adicionales que le ofrecen. Muchos servicios de revelado de películas además de revelarlas pueden copiarlas en CD, exponer las imágenes en el Web, enviarlas a través de correo electrónico, crear impresiones de calidad a partir de imágenes digitales y proporcionar otros numerosos servicios de procesamiento digital. ■ Cámaras digitales Una tercera opción para obtener imágenes fotográficas es usar una cámara digital. Las cámaras digitales permiten tomar una fotografía e, instantáneamente, enviar la imagen a un equipo. Si está pensando en comprar una cámara digital, a continuación se enumeran algunas cuestiones que debería considerar: Costo Sepa cuál es su presupuesto antes de comprar: la mayor parte de la gente no necesita la mejor cámara digital de la gama para hacer su trabajo. Pero, una vez dicho esto, no acepte el modelo del “año pasado” sólo por ahorrar algo de dinero. Los fabricantes están respondiendo a la creciente demanda de cámaras digitales; por lo tanto, están produciendo más cámaras, con lo que se reduce el costo por unidad, y mejorando sus características. En consecuencia, comprar una cámara nueva en una tienda especializada con frecuencia puede dar mejor resultado que adquirir un modelo anterior en un almacén de saldos.

56 Jerga: un megapíxel hace Características Las características de una cámara digital referencia a un millón de son numerosas pero, si es usted principiante, compruebe píxeles y es un término que disponga tanto de automáticas como manuales. usado en relación a la Probablemente desee usar las opciones automáticas al resolución de dispositivos gráficos, como los principio para llegar a dominar la fotografía digital. escáneres, la cámaras Después, cuando se encuentre cómodo usando la cámara, digitales y los monitores. puede empezar a experimentar con las configuraciones manuales. Además, si compra la cámara sólo con el fin de obtener imágenes para el Web, puede apañarse con una de 1 megapíxel o menos, pero si desea poder usarlas en línea y en copias impresas, podría intentar conseguir una cámara de 1 megapíxel como mínimo, preferiblemente de 2 ó 3 megapíxeles, si puede elegir. Las cámaras con más megapíxeles crean mejores imágenes y le permiten imprimir fotografías de calidad a mayor tamaño que el de una instantánea estándar. Finalmente, recuerde que las cámaras digitales son, básicamente, PCs de mano. Si va a tomar imágenes en toda clase de circunstancias y condiciones, compruebe que elige una cámara que resista una tormenta. Si piensa practicar la fotografía en condiciones verdaderamente extremas, examine algunos de los modelos “impermeables”. ■ Formato de los archivos Por último, una cuestión importante que debe considerar cuando compra una cámara es determinar lo fácil que va a resultarle sacar las fotografías de ella y pasarlas a un equipo. ¿Va a necesitar cables? ¿Puede usar puertos infrarrojos? ¿Almacena la cámara las imágenes en un CD? Compruebe que sabe cómo transfiere la cámara las imágenes y que le satisface el método antes de comprarla. Para finalizar, como último consejo de esta lección, independientemente de cómo y cuándo obtenga los gráficos para las páginas Web, recuerde optimizar las imágenes y guardarlas como archivos GIF y JPEG. Asegúrese de que el tamaño de los archivos de las imágenes es lo más pequeño posible sin comprometer la calidad. Además, almacene las imágenes en una ubicación central en el disco duro y no olvide dar a cada gráfico un nombre único y significativo.

57 Puntos clave ■ Los gráficos en línea están compuestos de píxeles. ■ La mayor parte de los exploradores admiten imágenes GIF y JPEG. ■ Las imágenes GIF son pequeñas, sólo pueden usar una paleta de 256 colores y se descargan rápidamente. ■ Los archivos GIF pueden ser entrelazados, transparentes o animados. ■ Las imágenes JPEG pueden contener millones de colores y se suelen usar para mostrar fotografías. ■ De forma predeterminada, los archivos GIF y JPEG se muestran línea por línea de arriba abajo, pero esto se puede cambiar si se crean imágenes GIF entrelazadas o archivos JPEG progresivos. ■ El esquema de compresión de JPEG permite reducir el tamaño de las imágenes JPEG, pero la compresión se realiza “con pérdida”, por lo que debe efectuarla con cuidado (recuerde, cuanto más comprima una imagen, menor calidad tendrá). ■ Cambie el tamaño de los gráficos en un programa de edición para que sea lo más pequeño posible. ■ Recortar las imágenes reduce el tamaño de los archivos. ■ Considere usar vistas en miniatura para vincularlas a gráficos en línea más grandes. ■ Los elementos gráficos de las páginas Web incluyen fotografías, ilustraciones, botones, logotipos, iconos, viñetas, reglas horizontales, texto gráfico y fondos. ■ Puede adquirir gráficos Web en colecciones de imágenes prediseñadas de CD-ROM, software gratuito en línea, proveedores de gráficos en línea y diseñadores gráficos. ■ Puede crear imágenes personalizadas con diversos programas de software y digitalizando dibujos realizados a mano. ■ Las fotografías se pueden convertir en archivos de imagen en servicios de revelado y a través de escáneres y cámaras digitales.

58 LECCIÓN 4 Acopio de utensilios Una vez completada esta lección, podrá:  Saber lo que va a necesitar para mostrar páginas Web en línea.  Buscar espacio para un sitio Web en un servidor en Internet.  Elegir software para crear, modificar y tratar las páginas Web.  Probar las páginas Web en varios exploradores. Cuando cree páginas Web, al menos deberá tener un par de herramientas de creación de páginas Web, probablemente más. Le advertimos de que no hablamos de hardware: tenemos la certeza de que se ha dado cuenta de la importancia de disponer de un equipo informático además de, posiblemente, acceso a un escáner, una impresora y una cámara (digital o estándar). En esta lección, nuestro interés recae en la serie de programas que puede usar para crear, modificar y tratar páginas Web. Como le mostramos en las siguientes lecciones, puede crear, modificar y publicar páginas Web con diversas aplicaciones y herramientas software, y encontramos que las armas que preferimos se mezclan y coinciden con frecuencia. Igualmente, conocer sus opciones le ayudará a crear el entorno de trabajo que mejor se adapte a sus necesidades y estilo personal. Para comenzar, echemos un vistazo a dos de las “herramientas ” más básicas que necesitará en su proceso de creación Web: una conexión a Internet y espacio en un servidor. Conexión a Internet y espacio en un servidor No importa lo asombrosa que sea su página Web, vivirá en el anonimato virtual si no puede conectarse a Internet y transferir sus archivos a un servidor. Recuerde de la lección 1 que un servidor es un equipo muy eficaz que se conecta a las líneas de datos de la red troncal de Internet, almacena archivos de páginas Web y responde a las solicitudes de los usuarios para ver las páginas Web almacenadas. Debe estar conectado a Internet o tener acceso a una conexión a la gran red si desea demostrar su presencia en línea. Es verdad que puede crear muchas páginas Web sin una conexión a Internet pero fallará en el intento cuando llegue el momento de publicarlas en línea. Sugerencia Si usa su equipo para explorar el Web, puede tener la certeza de que dispone de una conexión a Internet. Con una conexión a Internet de acceso telefónico estándar, puede copiar los archivos de las páginas Web desde un equipo a un servidor que esté conectado a Internet.

59 Además de disponer de conexión a Internet como requisito básico, puede que deba adquirir algo de espacio en un servidor para sus archivos Web. Decimos puede porque en numerosas ocasiones el espacio se ofrece gratuitamente o se proporciona junto con otros servicios de pago. Por ejemplo, su proveedor de servicios Internet (ISP, Internet Service Provider) podría darle 30 MB, por ejemplo, de espacio gratuito en el servidor además de su conexión a Internet. La noción de espacio gratuito atrapa a muchos por sorpresa, pero existe y es una práctica en aumento en la red. No es de extrañar, sin embargo, que encuentre beneficios en comprar espacio en un servidor además de usar el gratuito. Espacio gratuito en línea Es cierto. Puede crear y mostrar un sitio Web en este momento gratis, es decir, sin pagar dinero. Todo lo que necesita es emplear un poco de tiempo y esfuerzo creativo. No requiere ningún software adicional ni cuentas de Internet de pago, sólo precisa su texto y unas cuantas imágenes, si desea incluirlas. Desde luego, se enfrenta a un par de limitaciones de poca importancia si sigue este camino (por ejemplo, al uso de una dirección Web larga y, posiblemente, a ciertas restricciones en las opciones del diseño de la página), pero, dependiendo de cuál sea su objetivo último, estas limitaciones podrían no afectarle demasiado. Así que considérese informado: hay espacio gratuito en el Web. Como mencionamos anteriormente, nos hemos encontrado con más de una persona que se quedó sinceramente impresionada al descubrir este hecho. Jerga: un grupo o La forma más habitual de convertirse en el orgulloso propietario de una página comunidad en línea es un área virtual en el Web donde Web gratuita es acudir a un grupo o comunidad en línea. Una de las ventajas de las personas con intereses esto, además del factor de gratuidad, es que la mayor parte de los grupos y similares reúnen y comparten comunidades en línea permiten la creación de páginas Web proporcionando información. para ello plantillas o asistentes que puede usar. La mayor parte de las Entre los numerosos grupos y comunidades gratuitos, rápidamente nos vienen a compañías que patrocinan la mente tres bastante populares: los grupos y comunidades en línea obtienen sus ganancias ■ Grupos Web de MSN a través de los anuncios, de (http://groups.msn.com/home.msnw?pgmarket=es-es) la venta de actualizaciones y características, y de servicios ■ Tripod de Lycos (http://www.tripod.lycos.es) complementarios. ■ Yahoo! GeoCities (http://es.geocities.yahoo.com/) Las desventajas principales de los grupos y comunidades en línea son que su dirección Web suele ser bastante larga, generalmente se dispone de una cantidad limitada de espacio en el servidor, las opciones de diseño de páginas resultan, con frecuencia, algo restringidas o dirigidas, puede tener que tolerar anuncios emergentes cada vez que visite su página y, si no desea usar las plantillas de un grupo o comunidad, la personalización de la página puede resultar difícil en ocasiones.

60 De forma similar al uso de los grupos y comunidades en línea, otra forma gratuita de conseguir un espacio en el Web es crear páginas específicas de un sitio. Al explorar Internet, puede encontrar que algunos sitios Web ofrecen espacio gratuito a los miembros registrados. Por ejemplo, puede crear una página Acerca de mí en eBay (un sitio de subastas en línea que se encuentra en www.es.ebay.com), si es uno de los participantes registrados en el sitio. El propósito de las páginas Acerca de mí de este sitio es presentar a los usuarios de eBay al resto de personas que lo visitan. Y otro tipo de espacio en el Web en línea “gratuito”, que técnicamente no es tal, es el que obtiene de su ISP. Puesto que lo más probable es que firme un cheque para su ISP de forma regular (o al menos compruebe que se le ha cargado el pago en su cuenta), no podemos etiquetar exactamente el espacio en los servidores del ISP como gratuito; es más bien un espacio disponible con prepago. Cuando se suscribió a su ISP actual (suponiendo que tenga alguno), probablemente le informó con voz excitada o con una frase que terminaba en un signo de admiración que conseguía “¡X megabytes de espacio gratuito en el servidor!”. En ese momento, es probable que no supiera lo que eso significaba así que simplemente pensó: “¡Oh, qué bien!” y pasó al siguiente detalle. Ahora que está pensando en crear una página Web, debe volver a visitar la cláusula acerca del “espacio gratuito en el servidor” de su contrato con el ISP. Los más probable es que encuentre que tiene en alguna parte entre 10 MB y 50 MB de espacio a su disposición en un servidor. ¡Pruébelo! Para buscar espacio gratuito en el Web, escriba free Web space (o espacio gratuito en el Web) en cualquier motor de búsqueda; se le recompensará con un montón de sitios que le permiten alojar sus páginas. O bien, revise el sitio Web 100 Best Free Web Services en www.100best-free-web-space.com (en inglés). En este sitio se proporcionan exámenes y clasificaciones de sitios, lo que lo convierte en un gran recurso para localizar y examinar servicios de alojamiento de sitios Web (o hosts).

61 La ventaja de usar el espacio en los servidores de su ISP es que ya está pagando por él, así que también podría emplearlo. El inconveniente es que probablemente tendrá que convivir con una voluminosa dirección Web, similar a las de las comunidades y grupos en línea. Por ejemplo, un par de nuestros ISP (tenemos varios) conceden espacio “gratuito” en sus servidores, pero los formatos de las direcciones Web son www.dominio.com/~nombredeusuario/ nombredearchivo.html y members.dominio.net/ nombredeusuario/ nombredearchivo.html. Para la mayoría de las personas, estos formatos son un poco largos y no resultan fáciles de recordar. Otra virtud de usar el espacio de los servidores de los ISP con respecto al de los de los grupos y comunidades en línea es que, generalmente, se tiene mayor libertad en relación a la forma en que se crean y muestran las páginas (lo que podría ser un inconveniente si prefiere trabajar con las plantillas preconfiguradas que parecen ser una práctica estándar en numerosos sitios de comunidades en línea). Con todo, la cuestión principal en relación a los sitios gratuitos en línea es que el espacio en el Web está a su disposición de forma instantánea. Y, siempre que no tenga inconveniente en usar una dirección Web larguísima para su página principal, sufrir ciertas limitaciones de diseño y, posiblemente, que aparezcan anuncios emergentes, entonces el espacio gratuito es una estupenda forma de iniciarse en el Web. Adquisición de espacio en un servidor En contraposición al uso de espacio gratuito en el Web, puede desembolsar algo de dinero para que una página Web use la dirección Web que prefiera siempre que alguien no haya llegado antes. Si toma este camino, debe recordar las dos consideraciones siguientes: necesita elegir y registrar el nombre de una dirección Web (como creationguide.com) y suscribirse a un proveedor que aloje (o almacene) sus páginas Web, a menos que vaya a poner en funcionamiento su propio servidor, pero ese tema es mejor dejarlo para libros más avanzados. Echemos un vistazo al modo de registrar una dirección Web y obtener un servicio de alojamiento. Registro de una dirección Web Antes de seguir, vamos a concretar cierto vocabulario sencillo. Para ser más precisos, en lugar de dirección Web, realmente deberíamos decir nombre de dominio. Someramente (mucho), un nombre de dominio es una dirección Web. Como tal vez sepa, todas las direcciones Web son en realidad grupos de números, denominados números de Protocolo Internet (IP, Internet Protocol), que actúan como direcciones de Internet. Siendo un humano, probablemente también sabrá que, para la mayor parte de la gente, recordar un nombre con sentido es mucho más fácil que recordar una serie de números divididos por puntos. Por ello, el Sistema de nombres de dominio (DNS, Domain Name System) vio la luz. En esencia, DNS simplemente asigna nombres de texto (como creationguide.com) a las direcciones de Internet con números (como 207.155.248.5). Por lo tanto, para que parezca que sabe lo que hace, debería usar el término nombre de dominio en lugar de dirección Web.

62 Cuando esté listo para obtener su propio nombre de dominio, podrá elegir un nombre (como creationguide.com, aunque podemos decirle ahora mismo que ya lo tiene algún otro), ver si está disponible y, si lo está, registrarlo a su nombre a cambio de una cuota nominal anual. Por nominal, queremos decir un precio cercano a lo que cuesta una buena comida o un poco más. Elegir y registrar un nombre de dominio Web es sencillo, una vez que tiene acceso a un sitio de registro legítimo. Afortunadamente, InterNIC (que se encuentra bajo el paraguas del Departamento de comercio de Estados Unidos) aloja una página Web que enumera todos los sitios Web de registro de nombres de dominio aceptables. Muchos sitios de alojamiento también ofrecen servicios de registro de nombres (como explicamos en la sección siguiente). Para ver una lista oficial de registradores de nombres de dominio, visite www.internic.net/alpha.html (en inglés). Mientras visita el sitio de InterNIC, examine unos cuantos sitios de registro para revisar sus listas de precios y directivas (o visite www.creationguide.com/resources, en inglés, y le dirigiremos a un par de nuestros servicios de alojamiento Web favoritos). Cuando haya encontrado un sitio que le guste, por lo general puede escribir el nombre de dominio propuesto en un cuadro de texto. Entonces, se le informará si está disponible. Si es así, se establece un contrato de pago (normalmente, mediante tarjeta de crédito) y el sitio registra su dominio en InterNIC. El siguiente paso es buscar un ISP que aloje su nombre de dominio y sus páginas Web. Búsqueda de espacio para un dominio Si no utiliza su propio servidor, que es lo que hace la mayor parte de la gente, el próximo paso es buscar un ISP u otro servicio de alojamiento dispuesto a proporcionar un lugar para su nombre de dominio, es decir, si no completó este paso durante el proceso de registro de su dominio (según se describe en la sección precedente). Puede encontrar numerosos servicios de alojamiento en línea; escriba Web hosting (la forma inglesa de denominar al servicio de alojamiento de sitios Web) en cualquier motor de búsqueda y puede pasar un día de campo investigando a los diversos proveedores. O, mejor aún, visite http://hostindex.com (en inglés), un extenso sitio dedicado a proporcionar información acerca de numerosos aspectos de los servicios de alojamiento Web, incluida una lista mensual de los 25 mejores. Para finalizar, como hemos mencionado hace un momento, puede visitar www.creationguide.com/resources (en inglés) para buscar vínculos a los servicios de alojamiento Web y registradores de nombres de dominio. Independientemente de cómo lleve a cabo la búsqueda de espacio para su sitio Web, recuerde comprobar algunas cuestiones clave, como son las cuotas, la configuración de la red, si dispone de Extensiones de servidor de Microsoft FrontPage (si utiliza características de FrontPage) y la confiabilidad. Como promedio, los servicios básicos de alojamiento Web cobran una cuota mensual nominal además de otra cuota única de configuración (consulte el sitio Web de cada servicio de alojamiento para conocer los precios específicos). A menos que las tarifas le parezcan monstruosas, no deje que determinen su decisión.

63 Antes de firmar ningún contrato con un servicio de alojamiento de sitios Web, averigüe todos los aspectos relacionados con lo siguiente: ■ Ancho de banda Muchas compañías de servicios de alojamientoWeb se conectan a Internet mediante líneas T1 y T3; si no llegan a esto, bien podría elegir otra compañía. Básicamente, una línea T1 puede transportar hasta 1,5 megabits de datos por segundo mientras que una línea T3 puede transportar 45 megabits por segundo. Por lo tanto, una conexión T3 proporciona mucho más ancho de banda y permite una mayor velocidad. Además de las conexiones a Internet, debe comprobar cuántos clientes se alojan en cada equipo. Si un servicio de alojamiento sobrecarga sus equipos, el rendimiento se verá afectado a pesar de las líneas de conexión de alta velocidad. ■ Espacio Cuando se suscribe a los servicios de alojamiento Web, los ISP y las compañías de alojamiento le asignan una cierta cantidad de espacio en un servidor (de igual modo que su equipo tiene una cierta cantidad de espacio de disco que puede usar para almacenar archivos). La mayoría de los ISP y servicios de alojamiento ofrecen más espacio en sus servidores de lo que necesitará (al menos inicialmente). Sin embargo, debe conseguir 10 MB como mínimo. Muchos hosts proporcionan a partir de 25 MB. ■ Soporte técnico Éste es un elemento importante en la elección de una compañía de alojamiento de sitios Web. Si tiene problemas, deseará acudir a alguien que pueda ayudarle. La consideración más básica sobre el soporte técnico que debe tener en cuenta es el número de horas al día que el personal de este servicio está disponible. Muchos sitios lo ofrecen de forma ininterrumpida, así que busque esta característica cuando esté eliminando posibles compañías. Un soporte técnico continuado es importante porque es muy probable que actualice sus páginas durante las horas que tenga libres, así que en ese momento es cuando seguramente más ayuda necesite. Además, compruebe si el sitio indica lo que cobra por cada incidencia de soporte. Finalmente, mire si puede identificar con facilidad el modo en que la compañía ofrece el servicio, incluyendo los números de teléfono (mire si hay números gratuitos), números de fax, direcciones de correo electrónico, informes en línea, listas de preguntas más frecuentes y una dirección de correo disponible.

64 ■ Extras Es posible que desee comprobar qué “extras” ofrece cada compañía para atraer clientes. Por ejemplo, muchos servicios de alojamiento Web proporcionan cuentas de correo electrónico que puede usar con su nombre de dominio (como mm@creationguide.com o jc@creationguide.com). Generalmente, puede configurar entre 5 y 20 cuentas de correo electrónico con un único contrato de alojamiento Web. Otras características que podría investigar incluyen el costo de agregar espacio al sitio, si éste crece demasiado como para caber en su espacio asignado originalmente; el costo de aumentar la cuota de tráfico, si visitan su sitio más personas de lo previsto; si se admite el uso de Extensiones de servidor de FrontPage (si utiliza FrontPage) y de la transmisión de multimedia; y si se dispone de servicios complementarios, como la adición de grupos de charla y características de búsqueda. Ahora que ha estudiado su nombre de dominio, los servicios de alojamiento y las opciones básicas de espacio Web, podemos quedarnos más cerca de casa y hablar sobre las aplicaciones de escritorio. En la sección siguiente, echaremos un vistazo a las aplicaciones de software que puede usar en su sistema para crear, modificar y publicar páginas Web, y sus elementos. Herramientas de creación de páginas Web En esta sección, damos una idea general de los tipos de herramientas que podría necesitar para crear páginas Web, enumeramos algunas que encontramos de utilidad y le señalamos el camino para hallar otras que se adapten mejor a sus necesidades. Como podría imaginar, gracias a la popularidad en auge del Web, muchos proveedores de software se han puesto manos a la obra para producir programas de creación de páginas Web. En esta lección, presentamos numerosas herramientas (pero de ningún modo nos acercamos a todas las utilidades disponibles) y en las lecciones siguientes mostramos cómo usar algunas de ellas para crear sitios Web completos. Sin embargo, al final le dejamos a usted la responsabilidad de elegir los paquetes de software con los que se sienta más cómodo. Para simplificar nuestro enfoque de esta lección, hemos dividido las herramientas de desarrollo de páginas Web básicas en las tres categorías principales siguientes: ■ Procesadores de texto y editores HTML ■ Aplicaciones de gráficos ■ Utilidades FTP

65 Procesadores de texto y editores HTML Sobre todo, cuando cree páginas Web, empleará la mayor cantidad de tiempo utilizando un procesador de texto o un editor HTML. Los editores se usan para crear archivos HTML que contienen instrucciones destinadas a los exploradores Web y proporcionan el contenido de las páginas Web. Puede trabajar con un editor básico, en el que especifica el código HTML de forma manual, o con uno más avanzado del tipo WYSIWYG (siglas correspondientes a What You See Is What You Get, en inglés, que traducido es algo así como “lo que ve es lo que consigue”), que crea código HTML de forma automática mientras usted escribe el texto, inserta las imágenes y arrastra los elementos en una vista de diseño de páginas Web. Finalmente, y como cabía esperar, algunas aplicaciones ponen un pie en ambos campos al calificarse como editores básicos mejorados pero no tanto como las aplicaciones de edición WYSIWYG (damos un repaso rápido a los tres tipos de editores en las siguientes páginas). Sugerencia Puede descargar muchas de las aplicaciones (o versiones de demostración) mencionadas en esta lección en sitios de shareware como www.tucows.com, www.shareware.com o www.download.com (los tres en inglés). La máxima del shareware podría ser “pruébelo antes de comprarlo”. Cuando descarga un programa de shareware, lo prueba durante un tiempo de forma gratuita. Si le gusta, envía a su creador la cuota que le solicita. Por desgracia, en ocasiones es más una estrategia mercantil que otra cosa. Procesadores de texto y editores HTML básicos Si utiliza un procesador de texto básico, debe escribir todos los comandos HTML y el texto de la página Web en un documento vacío. El más básico de los procesadores de texto de este tipo es la aplicación Bloc de notas, que se incluye con el sistema operativo Microsoft Windows. En la figura 4-1 se muestra el Bloc de notas con algo de texto HTML.

66 Figura 4-1. Muchos diseñadores Web acuden al Bloc de notas cuando codifican a mano documentos HTML. Puede que se pregunte por qué los diseñadores Web optarían por codificar manualmente las páginas Web. La respuesta varía pero, en su mayor parte, lo hacen por alguna de las razones siguiente: ■ Control La codificación a mano permite usar los códigos que se desea en lugar de los que inserta un editor WYSIWYG. Por ejemplo, puede que desee utilizar dos saltos de línea en blanco pero un editor WYSIWYG podría insertar un marcador de párrafo. Además, algunos editores WYSIWIG crean código “confuso”; la codificación a mano puede mantener el código ordenado y fácil de leer, y su alineación se puede configurar según las preferencias del diseñador. ■ Correcciones rápidas Saber cómo crear y modificar manualmente código HTML permite a los diseñadores Web hacer cambios en una página Web con rapidez, con independencia de cómo se creara inicialmente. Por ejemplo, si desea actualizar la fecha de copyright de su sitio, puede realizar y guardar el cambio en un procesador de texto en menos tiempo del que se tardaría simplemente en abrir la página en un editor WYSIWYG.

67 ■ Limpieza del código Muchos editores HTML avanzados (como se explica más adelante en esta lección) agregan código adicional a los documentos. Si sabe cómo crear y modificar código HTML estándar, puede limpiar al código extra y reducir el tamaño de los archivos HTML. Y recuerde: en el Web, el tamaño importa y cuanto más pequeño mejor. Además, puesto que los editores HTML sólo están diseñados por personas, a veces, pueden codificar mal las páginas. En estos casos, puede ahorrarse mucho tiempo e irritaciones si cambia el código HTML directamente en lugar de seguir la pista a la opción del cuadro de diálogo apropiado del editor HTML. ■ Precisión Otro hábito de los editores HTML avanzados es que, en ocasiones, usan etiquetas HTML que no todos los exploradores admiten. Puede usar procesadores de texto para modificar el código HTML de modo que se ajuste a las capacidades de la mayor parte de los exploradores. Por supuesto, aprender HTML es un requisito primordial para crear páginas en un procesador de texto. En la lección 6, le guiamos en la utilización de HTML con el fin de crear una página Web para que se haga una idea del formato HTML. (No se preocupe: puede hacerlo.) Sin embargo, esa lección sólo es una introducción. Necesitará tener acceso a otros recursos si desea conocer de verdad HTML. Si le interesa aprender HTML o tener cerca una referencia de este lenguaje, encontrará una generosa colección de libros sobre dicho tema ocupando las estanterías de las librerías de su ciudad. También puede encontrar páginas y páginas de información en línea. (Hemos hecho una lista de algunas referencias de HTML al final de la lección 6.) Los procesadores de texto pueden variar desde los que apenas le echan una mano a los que vienen totalmente equipados con características personalizadas específicas de HTML. Como ayuda para ilustrar la variedad, hemos proporcionado una breve descripción de algunos de los más usados en este momento: ■ BBEdit (www.barebones.com/products/bbedit.html) (en inglés) Este editor HTML de Bare Bones Software es popular entre los desarrolladores Web de Macintosh. BBEdit permite modificar, buscar, transformar y tratar texto. Al igual que otros editores HTML, ofrece una serie de características con diversos fines además de otras desarrolladas específicamente para satisfacer las necesidades de los creadores de código HTML. ■ HomeSite (www.macromedia.com/software/homesite) (en inglés) Macromedia HomeSite es una herramienta de diseño de código HTML muy usada entre diversos desarrolladores profesionales de sitios Web. Este editor de texto incluye características específicas de HTML que sirven de ayuda en la creación de páginas HTML efectivas y claras. Por ejemplo, incluye características de inspección de etiquetas HTML, edición en ventanas divididas, mapas de imágenes y algunas otras funcionalidades. Puede descargar una versión de prueba de 30 días para examinar el producto.

68 ■ Bloc de notas Este programa viene con el sistema operativo Microsoft Windows y sus funcionalidades son casi tan limitadas como cuando se usa como procesador de texto. Tenga cuidado, sin embargo: si trabaja en un documento muy largo, no podrá usar el Bloc de notas. En los documentos más largos, tendrá que usar WordPad (que se describe más adelante en esta lista). ■ NoteTab (www.notetab.com) (en inglés) El procesador de textos NoteTab, de Fookes Software, es el Bloc de notas con esteroides (fortalecido, queremos decir). Este programa incluye varias características que pueden simplificar la codificación a mano de páginas Web. Por ejemplo, puede mostrar utilidades HTML en el lateral izquierdo del panel de la ventana en la barra de clips. A continuación, puede insertar código HTML haciendo doble clic en los elementos de menús y, por ejemplo, puede hacer clic en el elemento de menú Nueva página Web para insertar la estructura básica del código para todo un documento HTML. Un inconveniente, típico de muchos procesadores de texto, es que el programa gratuito de prueba sólo permite deshacer una operación; si desea deshacer varias acciones, tendrá que restaurar la información manualmente. ■ TextPad (www.textpad.com) (en inglés) Este programa, creado por Helios Software Solutions, sirve como otra versión reforzada del Bloc de notas. En TextPad, mientras trabaja puede ver un menú de etiquetas HTML junto con las fichas de los documentos. TextPad permite deshacer varias acciones, lo que resulta práctico cuando se juega con HTML. ■ UltraEdit (www.ultraedit.com) (en inglés) IDM Computer Solutions proporciona este programa como paquete de edición de texto que se puede usar durante un período de prueba de 45 días. Una vez descargada e instalada la aplicación, debe hacer clic en About UltraEdit (Acerca de UltraEdit) en el menú Help (Ayuda) y, después, cerrar la ventana Help para activar el programa. Aunque esta aplicación está diseñada para usuarios algo avanzados, como los programadores, incluye características que podrían venirle bien. Por ejemplo, puede mostrar vistas previas de las páginas en el explorador con facilidad y usar el diccionario que le acompaña para corregir la ortografía de los documentos. ■ WordPad Este programa es un paso más allá del Bloc de notas. Si utiliza Windows, puede abrir WordPad si hace clic en Inicio, selecciona Programas y Accesorios, y después hace clic en WordPad. Este programa ofrece más características de procesamiento de textos que el Bloc de notas y admite documentos más largos. La figura 4-2 muestra un documento HTML en WordPad.

69 Figura 4-2. WordPad sirve como un buen procesador de texto cuando el documento en el que se trabaja es demasiado largo para que el Bloc de notas pueda tratarlo. ¡Pruébelo! Muestre la página Web que prefiera en un explorador y haga clic en Source (Código fuente) o View Source (Ver código fuente) en el menú View (Ver). Se abre un documento del Bloc de notas que muestra una versión de texto del código HTML de la página. Al igual que Word versión Procesadores de texto y editores HTML de grado medio 2002, otros programas de Office XP (versión 2002), El siguiente escalafón en los editores HTML empieza a entrar en el territorio como Microsoft Excel y de WYSIWYG. Podríamos llamar a los procesadores de texto de grado medio Microsoft PowerPoint, “aplicaciones WYSIWYG ligeras” porque ofrecen características de procesador permiten guardar los documentos como de texto junto con una serie limitada de capacidades avanzadas de los editores páginas Web. HTML. Dado que la mayor parte de las aplicaciones son procesadores de texto o editores HTML completos, sólo aconsejamos una aplicación de esta categoría: Microsoft Word versión 2002. Word 2002 permite usar una interfaz de procesamiento de texto conocida para crear documentos HTML a través del comando Guardar como. Cuando guarda un documento de Word como página Web, Word crea automáticamente el código fuente HTML. En la figura 4-3 se ilustra un documento HTML en las vistas Diseño Web y Código fuente HTML.

70 Figura 4-3. Word 2002 ofrece una vista Diseño Web y otra vista Código fuente HTML. Editores HTML avanzados El tercer grupo de editores HTML incluye las aplicaciones avanzadas que permiten crear y modificar páginas Web mediante interfaces gráficas. En la mayor parte de los editores avanzados, puede ver y modificar el código fuente HTML directamente además de trabajar en la interfaz WYSIWYG. Asimismo, la mayoría de los editores avanzados ofrecen una característica de presentación de vista previa que permite ver cómo aparecerá una página Web en línea antes de verla en el explorador. Las características específicas para el Web se suelen incorporar también en los editores HTML avanzados. (Sabemos que esto último suena un poco impreciso, pero al crear una página Web en FrontPage, en la lección 7, le introduciremos en el uso de algunas herramientas específicas para el Web de modo que podrá saber a lo que nos referimos.) Los editores HTML avanzados más utilizados están muy bien documentados en línea así que, en lugar de desperdiciar espacio en estas páginas resumiendo las estadísticas en línea, hemos proporcionado varias direcciones URL para los sitios Web donde se ofrecen las aplicaciones que aparecen en nuestra breve lista. Aunque hay otros editores disponibles, estos seis son algunos de los programas más populares. (Revise la dirección del sitio Web de cada producto para poder comparar más fácilmente las características y precios.) ■ Adobe GoLive (www.adobe.es/products/golive/main.html) ■ CoffeeCup HTML Editor (coffeecup.com/editor) (en inglés) ■ HotDog Professional (http://www.sausage.com/hotdog- professional.html) (en inglés) ■ UltraEdit (www.ultraedit.com) (en inglés); este editor puede estar disponible en su versión localizada ■ Macromedia Dreamweaver (www.macromedia.com/es/software/dreamweaver)

71 ■ Microsoft FrontPage 2002 (www.microsoft.com/spain/Office/frontpage/default.asp); también se incluye con el conjunto de programas Microsoft Office 2000 XP Developer ■ NetObjects Fusion MX (www.netobjects.com/products/html/nfmx.html) (en inglés) Nota Además de HotDog Professional, Sausage Software ofrece un editor HTML WYSIWYG para principiantes, denominado HotDog PageWiz, y un editor HTML para niños mayores de seis años, denominado HotDog Junior. Explore la página principal de Sausage Software y encontrará otras herramientas útiles de creación de páginas Web. Después de todo, si nos pregunta, cualquier compañía llamada Sausage Software (Software Salchicha) que ofrezca editores HTML que se llamen HotDog (Perrito caliente) merece un poco de atención adicional. Entre las aplicaciones anteriores, Dreamweaver probablemente sea el editor Web más popular (aunque el más difícil de aprender) entre los profesionales de diseño, por diversas razones, como es el hecho de que mantiene el código escrito a mano, permite a los usuarios obtener una vista previa de las páginas en varios exploradores y realiza comprobaciones automáticas de los posibles conflictos que existan entre ellos. Por otro lado, FrontPage (que se ilustra en la figura 4-4) es el editor HTML avanzado más sencillo de aprender para los principiantes y proporciona código HTML bastante limpio. Además, es popular entre los usuarios empresariales. Como hemos mencionado anteriormente, se hará una idea de cómo crear páginas Web en FrontPage en la lección 7. Nota Tenga en cuenta que el entorno de creación de una página Web no es fijo. En ocasiones, es más rápido usar una aplicación WYSIWYG avanzada (en especial, al cambiar el tamaño de las tablas), pero otras veces, un cambio rápido en el Bloc de notas nos será más útil.

72 Figura 4-4. Microsoft FrontPage es un programa avanzado de desarrollo Web muy utilizado, que resulta bastante fácil de aprender. Aplicaciones de gráficos Cuando se trata de desarrollar una página Web, las aplicaciones de gráficos ocupan un segundo meritoso lugar detrás de los muy importantes editores HTML o procesadores de texto. Después de todo, la mayor parte de las páginas usa gráficos y tendrá que crear o retocar los que incluya en las suyas. Por lo tanto, necesitará tener un paquete de gráficos instalado en su sistema. Nuestros programas favoritos (o al menos los que parece que usamos con más frecuencia) son Jasc Paint Shop Pro y Adobe Photoshop; ambos aparecen en la lista de aplicaciones de gráficos con la que está a punto de toparse a continuación del párrafo siguiente.

73 Con independencia del paquete de gráficos que utilice, las cinco habilidades más importantes que tiene que adquirir al usar un programa de gráficos son recortar, cortar, cambiar el tamaño, cambiar el color y guardar los archivos en otro formato diferente. Por tanto, revise los archivos de ayuda de su aplicación para pulir su técnica. Ahora, aquí tiene cinco programas de gráficos conocidos junto con sus direcciones Web (le recomendamos que visite los sitios Web enumerados con el fin de conseguir los detalles y precios de los productos): ■ Fireworks (www.macromedia.com/es/software/fireworks) Esta aplicación es fácil de usar y especialmente cómoda cuanto se necesita crear botones y otros gráficos básicos para un sitio Web. Macromedia desarrolló Fireworks específicamente para la creación de gráficos Web. ■ LView Pro (www.lview.com/index1024.htm) (en inglés) Este programa de gráficos shareware es muy conocido. Incluye varias características típicas de gráficos además de utilidades de páginas Web, por ejemplo, una herramienta para crear páginas de galerías de fotografías en línea. ■ Paint Microsoft Paint es un programa de gráficos que se incluye con Windows. Se trata de un paquete de gráficos con menos funciones en comparación con otros pero resulta una herramienta gráfica práctica cuando se está en un apuro o se desea hacer rápidamente algunos ajustes poco importantes. ■ Paint Shop Pro (www.jasc.com/products/paintshoppro) (en inglés) Este programa de gráficos tiene muchas características y un precio razonable, y lo utilizan muchos diseñadores. Visite el sitio Web de Jasc y descargue un programa de demostración gratuito. ■ Photoshop (www.adobe.es/products/photoshop/main.html) Probablemente sea el programa de edición de imágenes más importante. Puede resultarle un poco difícil de utilizar cuando empiece a aprenderlo pero una vez que domine los comandos, le gustará mucho la flexibilidad de la aplicación. Con frecuencia, imitamos los sitios donde se usa Photoshop antes de crear páginas Web reales en un editor HTML. Su principal desventaja es que es bastante caro para los diseñadores casuales. Jerga: los gráficos basados Además de las aplicaciones de gráficos anteriores, también puede usar en vectores son imágenes programas de ilustraciones para crear gráficos basados en vectores. En un hechas con líneas y formas gráfico basado en un vector, puede mover, cambiar el tamaño y manipular en lugar de con píxeles y de cualquier otro modo los elementos de una imagen, por ejemplo, puede sombras. girar una forma completa. Los programas de ilustraciones basadas en vectores que suelen resultar prácticos al crear páginas Web son Adobe Illustrator (www.adobe.es/products/illustrator/main.html), Macromedia Freehand (www.macromedia.com/es/software/freehand) y CorelDraw (www.es.corel.com).

74 ¡Pruébelo! Si desea incluir un GIF animado en una página Web pero no le entusiasma la idea de comenzar desde el principio, se alegrará de oír que el CD-ROM de multimedia de Office XP contiene varias animaciones pequeñas que puede usar en las páginas Web. Para insertar un GIF animado: 1 Abra Word (u otra aplicación de Office), muestre el menú Insertar, elija Imagen y, después, haga clic en Galería de imágenes. 2 En el panel de Galería de imágenes, busque un elemento de la galería y haga doble clic en alguna imagen que muestre una estrella dorada. 3 Para ver una animación en acción, abra el menú Archivo y haga clic en Vista previa de páginas Web. Si sigue nuestra sugerencia anterior, debería insertar los componentes animados con moderación. Las animaciones pueden llegar a resultar molestas, lo que quitaría mérito a su página en lugar de aportarle encanto. Programas de animación de gráficos GIF, de mapas de imágenes, de creación de pancartas y mucho más Las páginas Web incorporan todo tipo de baratijas, incluidos elementos desarrollados con tecnologías muy sonoras como Páginas Active Server, Java, Flash, etcétera. Además, puede crear archivos de audio y vídeo para usarlos en el Web. Aunque nos fascinan tanto estos temas como las técnicas de diseño de páginas Web básicas, la creación de estos elementos no es uno de los objetivos de estas lecciones. Nuestro fin es lograr que consiga crear y utilizar páginas Web. Por lo tanto, nos guardaremos los caprichos para otro curso. Si tiene ganas de adquirir algunas mañas adicionales para la elaboración de sus páginas, le sugerimos que empiece por aprender a crear GIF animados, mapas de imágenes y pancartas. A continuación se enumeran algunos sitios que puede encontrar de utilidad: ■ l Tenga en cuenta que puede encontrar un buen número de programas de creación de archivos GIF animados, de pancartas y de mapas de imágenes en línea. Además, algunos de los programas de gráficos que mencionamos anteriormente en esta lección (como Fireworks y Paint Shop Pro) tienen integradas características de mapas de imágenes e imágenes GIF animadas.

75 Las tres aplicaciones anteriores se enumeran simplemente como ejemplos que pueden ayudarle a comenzar su búsqueda. Utilidades FTP En último lugar, puede que necesite alguna de esas misteriosas utilidades FTP. En realidad, las utilidades FTP no son en absoluto misteriosas, pero siempre que hacemos mención a las siglas “FTP” ante personas que nunca las habían oído antes, el color parece huir de su cara. Básicamente, las utilidades FTP son programas que permiten copiar archivos enteros de un equipo a otro a través de Internet. Por ejemplo, siempre que completamos una lección, copiamos con FTP sus gráficos en Microsoft Press, en la ciudad de Redmond (en Washington, Estados Unidos), incluso aunque estemos en el (demasiado) soleado Arizona y en el (demasiado) lluvioso Oregon. Sugerencia Es posible que no necesite usar un programa FTP si va a crear una página Web en un grupo o comunidad en línea. Asimismo, si usa el Asistente para la publicación en Web de Microsoft, Mis sitios de red o una utilidad de publicación de un editor HTML avanzado con el fin de cargar las páginas, no tendrá que usar un programa FTP en principio. Sin embargo, finalmente podría desear usarlo para eliminar, copiar y administrar de cualquier otra forma los archivos en línea. En la lección 8, le ponemos al corriente de los detalles de la administración de archivos en línea, porque sentirse cómodo usando una aplicación FTP puede resultarle práctico. Puede encontrar numerosos programas FTP en línea, muchos de los cuales son aplicaciones shareware. Los programas FTP más usados son, entre otros: ■ BulletProof FTP (www.bpftp.com) (en inglés) Esta aplicación proporciona una intuitiva interfaz con la funcionalidad de “arrastrar y colocar”, al igual que otros de los programas FTP más usados.

76 ■ CoffeeCup Direct FTP (www.coffeecup.com/software) (en inglés) Este programa sirve como aplicación FTP que también permite la edición de páginas HTML en línea. En la página de descargas del sitio, encontrará que CoffeeCup Software también proporciona aplicaciones de mapas de imágenes, creación de botones y creación de GIF animados, entre otros productos. ■ CuteFTP (www.globalscape.com/cuteftp) (en inglés) Esta popular aplicación FTP de fácil uso lleva mucho tiempo utilizándose y es nuestra favorita para PC. Con CuteFTP, puede arrastrar y colocar los archivos para transferirlos desde su equipo a otro equipo remoto y viceversa. Entre otras aplicaciones, GlobalSCAPE también ofrece un editor HTML (CuteHTML) y una aplicación de mapas de imágenes (CuteMAP). ■ Fetch (www.fetchsoftworks.com) (en inglés) Recientemente, Fetch se ha actualizado con la versión 4.0.2 (antes, ¡llevaba sin actualizarse desde 1997!). El diseño de Fetch está enfocado a hacer que el acceso a los sitios FTP sea lo más sencillo posible. Está disponible gratuitamente para instituciones educativas y organizaciones sin ánimo de lucro; los demás deben pagar la cuota de shareware. Ahora que conoce vagamente lo que hacen los programas FTP y que puede descargarlos del Web, no se preocupe demasiado por ellos. En este momento, con que sepa que existen es suficiente: si no puede esperar, puede descargar una aplicación FTP y podrá cargar sus páginas en cuanto las cree, pero no tiene que hacerlo ahora. Le ayudaremos con los programas FTP y con la administración de los archivos en la lección 8. Pero antes, deseamos ocuparnos de cosas más divertidas en el resto de las lecciones. Un poco acerca de exploradores Estaríamos completamente perdidos si concluyéramos esta lección sin Dos procesadores (o incluso dos versiones de un ocuparnos de la herramienta de aplicación de software más obvia de todas: explorador) no procesan el un explorador. Necesita tener un explorador (o varios) instalado para poder código HTML exactamente obtener una vista previa de sus páginas antes de publicarlas en línea. Recuerde del mismo modo; por lo tanto, al diseñar páginas Web, que los exploradores son las aplicaciones que interpretan las páginas HTML. véalas en tantos Por desgracia, no todos lo hacen exactamente de la misma forma. En exploradores como sea consecuencia, una página que diseñe y vea en Microsoft Internet Explorer posible antes de publicar el sitio. podría mostrarse muy fácilmente como un revoltijo espantoso en otro explorador. Incluso las páginas bien diseñadas parecen algo diferentes en distintos exploradores. Para ver una ilustración de este fenómeno, observe las diversas capturas de pantalla de la figura 4-5.

77 En la figura 4-5, puede ver las anomalías siguientes: ■ Las viñetas predeterminadas de Netscape Navigator son mayores, tanto en los equipos Macintosh como en los basados en PC, que las de Internet Explorer. ■ El espacio de los márgenes (o desplazamiento) alrededor de los perímetros de la página varía en cada explorador. Observe que las ventanas del explorador Internet Explorer dejan más espacio de margen alrededor del gráfico de la parte superior izquierda que las ventanas del explorador Navigator. Figura 4-5. Al ver la misma página Web en varios exploradores, se demuestran las pequeñas anomalías que surgen en las páginas cuando se ven en línea. ■ El tamaño de fuente predeterminado es más pequeño en PCs que en equipos Macintosh tanto en Internet Explorer como en Navigator, lo que puede afectar al modo en que se muestra y se ajusta el texto. ■ Como consecuencia de las diferencias en la fuente y el espaciado, encima del final de la página Web aparecen cantidades variables de información. ■ El ancho de las ventanas de los exploradores difiere. Observe cómo abarca el gráfico de la barra de título toda la ventana en un par de casos y cómo aparece con un espacio en blanco adicional en los demás.

78 Diseñamos la página Arts Camps for Kids para que funcionara bien tanto en Internet Explorer como en Navigator, pero puede ver que sigue habiendo ligeras diferencias que escapan del control del diseñador. En el Web existen varios exploradores. Puede que desee o no comprobar que sus páginas se muestran como deben en todos ellos. Para la mayor parte de los diseñadores, con asegurarse de que las páginas se muestran de modo correcto en los más importantes (Internet Explorer y Navigator) es suficiente; conjuntamente, estos dos exploradores suman más del 90 por ciento de todos los exploradores que tienen acceso a Internet. Desde luego, siempre debe considerar su audiencia. Si sabe que los visitantes de su sitio van a usar el explorador Opera, sería mejor que se asegurara de si ve bien en él. Para contribuir a aumentar sus conocimientos, a continuación incluimos una lista breve de otros exploradores que puede encontrar al acecho en el Web: ■ America Online usa una versión adaptada de Internet Explorer (webmaster.info.aol.com) (en inglés). ■ Lynx es un explorador de texto (lynx.isc.org/current) (en inglés). ■ Mozilla es un explorador Web diseñado para quienes desean crear productos y paquetes basados en Mozilla (una gran parte del explorador Netscape Communicator se basa en el código de Mozilla), pero el público general puede usar el explorador también (www.mozilla.org) (en inglés). ■ Opera es una pequeña aplicación que exhibe un tiempo de descarga extremadamente bajo (www.opera.com/download), (en inglés). Puede ser aconsejable descargar otros exploradores para ver cómo se muestran sus páginas en ellos. Obtener una vista previa de las páginas Web simplemente implica mostrar los archivos HTML en la ventana del explorador de forma local, así que el proceso es rápido y sencillo. Sin embargo, lo más importante es que se asegure de tener acceso al menos a una versión (para PC o Macintosh) de Internet Explorer y de Navigator de modo que pueda realizar pruebas y ver cómo quedan las páginas. No se preocupe: en los siguientes capítulos le recordaremos algunas veces más la importancia de ver las páginas Web en varios exploradores y en varias versiones de cada explorador, si es posible.

79 Puntos clave ■ Necesita una conexión a Internet y espacio en un servidor para mostrar una página Web en línea. ■ Averiguará que hay espacio gratuito disponible en línea en el Web, particularmente en los grupos y comunidades en línea. ■ Puede adquirir un nombre de dominio y comprar espacio en un servidor para controlar por completo su sitio Web y dirección Web. ■ Puede utilizar procesadores de texto para crear páginas Web. ■ Los editores HTML abarcan desde programas que sólo usan texto a interfaces WYSIWYG. ■ Las aplicaciones de gráficos permiten crear gráficos Web, modificar imágenes y crear maquetas de las futuras páginas Web. ■ Puede encontrar programas de animaciones de gráficos GIF, sitios de creación de pancartas y utilidades de mapas de imágenes (además de montones de programas de software gratuito y shareware). ■ Las utilidades FTP permiten copiar archivos de un equipo a otro equipo remoto. ■ No todos los exploradores están diseñados igual: pueden mostrar la misma página Web de diversas formas. ■ Siempre debe ver sus páginas Web en Internet Explorer y en Netscape Navigator (como mínimo) antes de publicarlas en línea.

80 LECCIÓN 5 Plan de ataque Una vez completada esta lección, podrá:  Definir los objetivos de un sitio Web.  Analizar la audiencia.  Crear un a plano técnico de un sitio Web.  Diseñar una página principal y prepararse para crear un sitio. Ahora que le desbordan los conocimientos acerca del Web, obtenidos en las lecciones 1 a 4, vamos a guiarle en el proceso de planeamiento de un sitio Web. Conoce todos los elementos que tiene que considerar; ahora es simplemente cuestión de consolidar la información en algunos puntos y listas de comprobación que debe revisar. Como probablemente habrá oído a lo largo de su vida, pararse a pensar un poco antes de actuar puede ahorrarle más de un dolor de cabeza. No es de extrañar que esta filosofía siga siendo válida también en el desarrollo para el Web: un poco de preparación y previsión adelantan mucho camino en la consecución del éxito. Esperamos que vea esta lección como un puente entre la teoría y la práctica en relación al Web. En las lecciones 1 a 5, hemos cubierto numerosos conceptos básicos del diseño Web; en las lecciones 6 a 8, tendrá la oportunidad de aplicar lo que ha aprendido a los ejercicios prácticos y proyectos en los que creará la estructura general de tres sitios Web (uno en cada lección). En las lecciones 6 a 8, puede volver a crear las páginas Web exactamente como describimos o bien usar las páginas Web de ejemplo como plantillas para personalizar las suyas propias. En cada sitio Web que le presentamos en estas lecciones, resumimos el proceso de planeamiento que hemos completado antes de crear la página real. En las lecciones 6 a 8 incluimos asimismo una breve sección acerca del planeamiento, así que sabrá cómo ha evolucionado cada página durante la fase del planeamiento del sitio y por dónde va en el desarrollo práctico del proyecto. Si va a personalizar alguno de los sitios Web que hemos incluido como ejemplos, tendrá que dedicar también algo de tiempo a planearlo. Finalmente, una vez haya asimilado todos los conocimientos de este curso (y tenemos toda la confianza en que lo hará), tendrá que dirigir sus propias sesiones de planeamiento. Por lo tanto, diseñamos esta lección para ofrecer una idea general de cada fase de planeamiento sucintamente y con un formato que facilite la referencia. En el futuro, si alguna vez se impresiona ante las tareas de definir los objetivos de un sitio Web, identificar su audiencia, diseñar un marco de trabajo o crear sus propias páginas Web, retome este curso y vuelva a esta lección para ayudarle a poner en marcha sus procesos de pensamiento.

81 Como apoyo para ilustrar el proceso de planeamiento, vamos a observar la evolución del sitio Web de Curiosity Shoppe. En la figura 5-1 se muestra la versión final de la página Web, en inglés, de esta tienda (www.creationguide.com/cshoppe) (en inglés). En las secciones siguientes, tratamos algunas de las cuestiones que consideramos al planear el sitio Web de Curiosity Shoppe y explicamos el efecto que tuvieron nuestras decisiones en el diseño final. Figura 5-1. La página principal de Curiosity Shoppe presenta un escaparate de un sitio Web para una tienda de artículos coleccionables. Definición de los objetivos Antes de crear una página Web o un sitio Web, primero debe abordar el proyecto desde una perspectiva más amplia. Tiene que considerar claramente la finalidad del sitio y sus objetivos. En concreto, debe responder a las preguntas siguientes: ■ ¿Por qué deseo una página o un sitio Web? ■ ¿Cuáles son mis metas inmediatas para el sitio Web? ■ ¿Cuáles son mis metas a largo plazo para el sitio? ■ ¿Cuál es mi escala de tiempo?

82 Para el sitio de Curiosity Shoppe, las respuestas a las cuestiones precedentes eran bastante sencillas. En primer lugar, los propietarios de Curiosity Shoppe deseaban hacer que su tienda estuviera fácilmente accesible a más clientes a través de su presencia en línea. Sus objetivos inmediatos eran informar a la gente acerca de la tienda, proporcionar un medio de contacto y anunciar sus productos y ubicación. Sus planes a largo plazo son ofrecer toda su gama de productos para vender en línea y actualizar la página principal diariamente con una oferta especial. Por último, la escala de tiempo de los propietarios del sitio se puede resumir como sigue: él sitio estático en línea (a disposición de los visitantes) debía estar preparado 2 meses después del comienzo de la página principal; la característica de venta debía ser totalmente funcional 6 meses después de poner en el Web la página principal; y una gama completa de productos en línea debía estar disponible en los siguientes 12 meses desde dicha fecha. Es muy probable que sus objetivos y su escala de tiempo sean menos complejos que los de Curiosity Shoppe. Por ejemplo, puede que lo que pretenda sea simplemente crear un currículum, publicarlo en el Web durante un mes y agregar actualizaciones ocasionalmente, cuando sea necesario. Llegar a conocer al público Cuando haya definido los objetivos de su sitio, tendrá que considerar quién va a visitar sus páginas Web. En otras palabras, debe pensar en los destinatarios o público pretendido. Debe tener al menos cierta percepción de las personas que desea que visiten su espacio Web. Necesita abordar este paso del planeamiento en el proceso porque muchas decisiones referentes al diseño y contenido se basan en quiénes constituyen su público. La mejor forma de llegar a conocerlos es hablar con ellos, si es posible. Considere la posibilidad de entrevistarles o realizar una encuesta a las personas que vayan a ver sus páginas. Por ejemplo, si está creando un sitio para la familia, llame a sus familiares y averigüe lo que les gustaría ver en él. Además, considere la forma en que los usuarios se conectarán a la página. ¿Son usuarios Web típicos que usan conexiones de acceso telefónico? Si es así, haga que sus páginas sean pequeñas y el diseño bastante sencillo. ¿Está diseñando un sitio para jugadores en línea? Entonces saque provecho de las conexiones de alta velocidad y las tecnologías más punteras. ¿Diseña un sitio para jóvenes? Los colores brillantes funcionan bien. Tiene la idea. Como ayuda para analizar los destinatarios de su sitio, responda a las cuestiones siguientes: ■ ¿Quiénes conforman el núcleo del publico previsto? Su respuesta podría incluir categorías como clientes, alumnos, empresarios, miembros de una familia, almas gemelas, miembros de un club y muchos más. ■ ¿Qué desean descubrir en el sitio? Esta cuestión difiere de preguntarse qué desea usted contarles: aquí es donde en realidad debe escuchar a los probables usuarios del sitio para poder diseñarlo en consecuencia.

83 ■ ¿Qué grado de experiencia con el Web tienen los destinatarios del sitio Web? Tendrá que averiguar si la mayor parte de los usuarios serán principiantes, exploradores casuales del Web o campeones del ciberespacio. Conocer el grado de pericia de los usuarios es fundamental porque, aunque los más experimentados pueden comprender con frecuencia “lo que está ocurriendo” en sitios complejos o con un diseño exclusivo, por lo general los principiantes requieren algo más de orientación. Por ejemplo, si dedica el sitio a usuarios novatos, debería hacer un esfuerzo por identificar de forma clara y coherente su estructura con elementos sencillos de exploración; guarde los diseños y esquemas de exploración vanguardistas para un público más avanzado. ■ ¿Qué tipos de conexiones a Internet y capacidades de ancho de banda tendrán los usuarios? Conocer si los destinatarios se conectan a través de un simple módem, una red corporativa interna (conocida como una intranet) o una conexión de alta velocidad como una Línea de suscriptor digital (DSL, Digital Subscriber Line) marcará la diferencia en el modo en que tendrá que diseñar el sitio Web, incluidos los tipos de elementos que incorporará. Por ejemplo, si tiene la seguridad de que los usuarios que vean su página van a obtener acceso al sitio Web a través de conexiones de alta velocidad, dispondrá de más libertad para incluir clips de vídeo y numerosos gráficos con un riesgo mínimo de perder a alguno. Sin embargo, si incluye vídeo y muchos gráficos en un sitio Web al que tienen accesos usuarios con conexiones de acceso telefónico, se arriesgará a perderlos antes de que puedan ver el sitio por completo porque, comprensiblemente, se cansarán de esperar a que los elementos grandes se descarguen. ■ ¿Dónde se encuentra su público principal? Tendrá que determinar si las personas visitan su sitio mientras están en el trabajo, en la universidad, en la oficina, en la sala de estar de su casa, en un cibercafé, en el barrio o en cualquier otro lugar. Esta especificación tiene una estrecha relación con la cuestión precedente: si sabe dónde se encuentra la audiencia clave, tendrá más probabilidad de hacerse una idea acertada de los tipos de conexiones que usarán en el acceso al sitio. Además, la ubicación puede entrar en el juego si está diseñando un sitio regional en lugar de uno nacional. Por ejemplo, un sitio de David Bowie podría tener una audiencia internacional, mientras que un sitio de vigilancia de bloques de pisos probablemente se destinaría al barrio. Esta diferenciación es similar a las variaciones de la información que se encuentra en una sección de primera plana de un periódico, que se correspondería con un sitio Web con un enfoque nacional o internacional, en comparación con la sección local, que se correspondería con un sitio Web orientado a una localidad.

84 ■ ¿Cuál es el grupo de edad típico entre los destinatarios? Tendrá interés en asegurarse de que su sitio atrae al grupo de edad al que está destinado. Esta cuestión se deriva del sentido común: tanto si le gusta como si no, puede hacer algunas suposiciones generalizadas (aunque cautelosas) relativamente poco importantes en función de la edad del público y estas suposiciones pueden ayudarle en el proceso de creación de la página Web. Conocer la edad típica de los destinatarios del sitio (donde “típica” es la palabra clave) ayuda a tomar decisiones de diseño apropiadas. Por ejemplo, los fondos en rosa Barbie para los preadolescentes no quedan bien en sitios de deportes que estén destinados a hombres de entre 18 y 40 años. Asimismo, los parámetros de edad ayudan a elegir las palabras (particularmente, el argot y los coloquialismos) de forma acertada. Además, la información de edad permite crear metáforas significativas. Finalmente, los detalles de la edad pueden ayudar a determinar los tipos de información que se incluirá en las páginas Web. Por ejemplo, si está creando un sitio para jóvenes, no ofrecerá información de pólizas de seguros a todo riesgo pero podría considerar seriamente la posibilidad de incluir un juego de trivialidades sobre Harry Potter. ■ ¿Cómo encontrarán los usuarios el sitio? Deseará saber si los visitantes de su sitio tienen noticias de él a través del boca a boca, en directorios en línea, en directorios Web impresos o libretas de teléfonos, a través de vínculos de una página “primaria”, como resultado de una consulta en un motor de búsqueda, gracias a anuncios comerciales pagados en TV o radio, etcétera. Así sabrá mejor cómo anunciar y hacer propaganda de su sitio. Sugerencia Después de haber entrevistado, encuestado y hablado con la gente; escuchado sus comentarios; y resumido su información, recuerde visualizar específicamente a una persona real en lugar de un perfil genérico mientras crea el sitio Web y diseña sus páginas.

85 Esquematización de los planos técnicos del sitio Una vez establecidos sus objetivos y definido su público, estará preparado para diseñar el marco del sitio Web. Si es posible, el primer paso que siempre debe dar es recopilar el contenido antes de llevar a cabo el diseño. La organización del contenido, o al menos de sus conceptos principales, puede ayudarle a organizar el sitio en conjunto de una manera lógica. Cuando haya reunido las principales clases de información que desea incluir en el sitio (el texto y los gráficos no tienen que estar pulidos en este momento), debe averiguar la mejor forma de presentar la información. Por ejemplo, puede organizar el sitio de diversas maneras, como son: ■ Alfabéticamente ■ Cronológicamente ■ Gráficamente ■ Jerárquicamente ■ Numéricamente ■ Aleatoriamente (no se recomienda, pero ahí está) ■ Por temas La mayor parte de los sitios se organizan de forma jerárquica. Un sitio jerárquico presenta una página principal que contiene un texto pegadizo de introducción a sus páginas principales. Esta estructura la utilizan los diseñadores y la aprecian en gran medida los usuarios (que en su mayoría sólo desean usar las páginas Web y no comprender cómo se organizan). Otro aspecto crítico (aunque ciertamente menos excitante) de la organización del sitio tiene que ver con la asignación de nombre a los archivos. Después de todo, básicamente el sitio está formado en su totalidad por archivos, así que su organización debe incluir la sistematización de los mismos. Antes de que lleguemos a la lista de comprobación del planeamiento de los sitios, vamos a echar un vistazo a algunas de las costumbres existentes en relación a la denominación de los archivos, que tendrá tiempo de implementar más adelante pero sobre las que puede meditar ahora.

86 Mantenga controlados los archivos Como ya sabe, las páginas Web suelen constar de algunos archivos que se combinan para crear la apariencia de una sola página. Asimismo, un sitio Web consta de varias páginas Web (que a su vez están formadas por diversos archivos). Debido a esta naturaleza multiarchivo de las páginas y sitios Web, va a tener que seguir un plan para asignar nombre a los archivos de su sitio Web y organizarlos. (En las lecciones 6 y 7, explicamos cómo hemos organizado los archivos de cada sitio, así que tendrá muchas oportunidades de hacerse con la idea de cómo se denominan y organizan los archivos antes de finalizar este curso.) En su mayor parte, un sitio Web normal está formado por la siguiente estructura simple, que se muestra en la figura 5-2: ■ Directorio principal Contiene archivos HTML y un directorio de imágenes. Puede proporcionar cualquier nombre para este directorio cuando diseñe sus páginas en el equipo local. Al cargar las páginas en un servicio de alojamiento de sitios Web (host), probablemente colocará el contenido de la carpeta del directorio principal en una carpeta en línea denominada “Web” y copiará toda la carpeta de imágenes (la carpeta y todo su contenido) en ella. ■ Directorio de imágenes Contiene los archivos de imágenes GIF y JPEG (o JPG) que se usan en las páginas Web. Este directorio suele almacenarse dentro del principal. Figura 5-2. Los directorios y archivos del sitio Web se almacenan de forma local antes de copiarlos a un servidor conectado a Internet.

87 Observe en la figura 5-2 que el directorio principal contiene en este momento cuatro archivos HTML: contact.html, history.html, index.html y products.html, uno para cada una de las páginas principales del sitio Web. Tenga en cuenta que el nombre de un archivo HTML es el que aparece en la dirección URL de la página Web. Por ejemplo, para visitar la página de productos de Curiosity Shoppe, especificaría www.creationguide.com/cshoppe/products.html (en inglés). Como puede ver, la dirección URL anterior consta del nombre de dominio (www.creationguide.com) (en inglés), el nombre del directorio o carpeta (cshoppe) y un nombre de archivo (products.html). En la mayoría de páginas principales y en muchas subpáginas, puede haber notado que no tiene que especificar un nombre de archivo. Por ejemplo, cuando visita la página principal de Microsoft, simplemente escribe el nombre de dominio de Microsoft, www.microsoft.com/spain/, o, si visita la página Creation Guide Resources, escribe www.creationguide.com/resources (en inglés). Si no se indica ningún nombre de archivo HTML después de un nombre de dominio o directorio (carpeta), muchos servidores mostrarán un archivo con un nombre concreto de forma predeterminada, como indice.html, que varía en función de los servidores. Pregunte en el servicio de alojamiento Web qué nombre debe usar para su página principal (o haga algunas pruebas con nombres de archivo en línea para ver cuál funciona de forma predeterminada); 9 de cada 10 veces, la página principal se llama index.html y es la apuesta más segura si duda. Compruebe que todos los Dado que los nombres de archivo HTML aparecerán dentro de la dirección nombres de archivo HTML URL de la página Web, debe seguir una reglas sencillas para facilitarle la vida tienen la extensión .htm o tanto a usted, como a los usuarios: .html, y que los nombres de archivo de imagen tienen la ■ Haga que los nombres de archivo sean breve, sencillos y extensión .gif, .jpeg o .jpg. significativos Es posible que los usuarios deseen tener acceso a una página Web directamente, así que haga que la dirección URL les resulte fácil de escribir y recordar. Por ejemplo, use un archivo denominado “productos.html” en lugar de “p1-2002m.html”. ■ Evite el uso de símbolos y signos de puntuación Muchas personas encuentran que escribir símbolos y añadir signos de puntuación ralentiza su escritura considerablemente y disminuye de forma drástica la precisión en la redacción. Además, los símbolos y los signos de puntuación pueden crear nuevos caminos para la confusión. Por ejemplo, si la página se llama www.creationguide.com, los usuarios podrían olvidar fácilmente el guión y escribir www.creationguide.com (¡con lo que se perderían su página y visitarían la nuestra por error!).

88 ■ Use un carácter de subrayado (_) para indicar un espacio Algunos servidores antiguos no reconocen los espacios, así que debe usar guiones bajos para indicar los espacios en blanco. Asimismo, se produce el mismo problema con los espacios que con los símbolos y signos de puntuación: los espacios se olvidan con facilidad y dejan hueco para los errores (en gran cantidad). ■ Use todas las letras en minúsculas De nuevo, piense en la “facilidad de uso” para los visitantes del sitio Web. En los nombres de archivo de las direcciones URL se distinguen mayúsculas y minúsculas, y una letra escrita en mayúsculas al azar puede perder a más de un visitante. Los nombres de archivo con todas las letras en minúsculas son fáciles de escribir y de recordar. Asignación de nombre para las imágenes Además de asignar nombre a los archivos HTML, tendrá que designar los archivos de imágenes. Por lo general, los usuarios no tienen acceso a los archivos de imágenes directamente, sino que las páginas HTML hacen referencia a estos archivos cada vez que necesitan mostrarlos. Por lo tanto, tiene una cierta libertad de acción en lo que respecta a la denominación de las imágenes. Un truco práctico que utilizamos para denominar las imágenes es identificar su finalidad con un prefijo sencillo incorporado al nombre de los archivos, lo que nos ayuda a identificarlos y encontrarlos con rapidez cuando los necesitamos. En concreto, anteponemos el nombre de las imágenes con p_, b_ o t_. Una imagen p_ es una verdadera imagen (p, de picture, en inglés). Por ejemplo, p_máscara indica que el archivo es la imagen de una máscara. Una imagen b_ es un botón. Por ejemplo, b_productos indica que la imagen es la barra de exploración del botón Productos. Y una imagen t_ hace referencia a una barra de título. Por ejemplo, t_contactos especifica que la imagen es la barra de título usada en la página Contactos. En este momento, debe entender que la organización desempeña un papel importante en el planeamiento de un sitio Web. Debe ordenar sus pensamientos y empezar a considerar cómo sistematizar los archivos (que, de nuevo, son básicamente las páginas Web y gráficos de los sitios Web). Puede hacer más eficaz la fase de organización del sitio si realiza las tareas y resuelve las cuestiones que se presentan en la siguiente lista de comprobación del planeamiento de un sitio.

89 Cuando haya solventado dichas cuestiones, o mientras tanto, debe preparar un esquema de la estructura del sitio. En otras palabras, debe ilustrar las relaciones entre las páginas del sitio y la información con el fin de garantizar que ha creado un diseño claro del mismo que incluya todos los datos en un formato fácilmente accesible. La figura 5-3 muestra uno de los esquemas iniciales de Curiosity Shoppe. Puede crear esquemas incluso más detallados que el mostrado en la figura 5-3 si incluye una descripción breve de lo que va a aparecer en cada página. Por ejemplo, en el esquema de la figura 5-3, podría agregar notas como “La página contact.html contiene un vínculo de correo electrónico y un mapa que muestra la ubicación de la tienda”. Figura 5-3. El esquema de la página de Curiosity Shoppe muestra los nombres de archivo usados dentro del sitio inicial. Lista de comprobación del planeamiento de un sitio Los elementos de esta lista de comprobación definen las tareas básicas que debe realizar mientras planea un sitio Web. Aborde cada una de las tareas y cuestiones enumeradas, y esboce las relaciones de la información del sitio a medida que realiza su plan: ■ Visite sitios similares para ver lo que le gusta y lo que no, y averigüe cómo puede hacer que su sitio sea único. ■ Compruebe que el sitio especifica quién es usted y, si es apropiado, la identidad de su empresa.

90 ■ Elija colores que evoquen una emoción apropiada para el sitio. Compruebe que el esquema de colores presenta un claro contraste para facilitar la lectura, analice si los colores contribuyen a conseguir los objetivos del sitio e intente usar colores de la paleta simplificada para el Web de 216 colores. Como repaso rápido de lo que son los colores simplificados para el Web, consulte la lección 3. Para ver la paleta de colores simplificada para el Web, abra el archivo palette216.gif en un programa de gráficos. Este archivo se encuentra en la carpeta Lesson03 de este curso, en el disco duro. Compruebe que el punto principal de su sitio se identifica de forma visible al principio y que no se halla sepultado tras una o dos páginas, ni falta; además, asegúrese de que cada página indica claramente su propósito. No desea que los usuarios visiten su página principal o busquen su sitio a través de una puerta trasera y se pregunten lo que se supone que deben hacer entonces, tras encontrar dicho sitio Web. ■ Clasifique su sitio en su propio esquema mental para no perder su enfoque. Con miras en el diseño, etiquete el sitio como comercial, informativo, educativo, de entretenimiento, de navegación, para la comunidad, artístico, personal o de algún otro tipo. ■ Diseñe el sitio para reflejar el modo en que es más probable que los usuarios exploren sus páginas. Puede hacerse una idea de lo que desean durante la fase de análisis del público destinatario. Compruebe que incluye temas “paraguas” (temas importantes, no nimiedades) en la página principal y que proporciona vínculos más específicos en cada subpágina. Por ejemplo, incluya un vínculo Contactos en la página principal y vínculos a los departamentos de la página Contactos. ■ Asegúrese de que el sitio ofrece a quienes lo ven unas cuantas formas de ponerse en contacto con usted: la dirección física, la dirección de correo electrónico, el número de teléfono, una paloma mensajera, etcétera. ■ Denomine sus archivos de forma apropiada, como se ha explicado anteriormente en esta lección. ■ Cree nombres de botones fáciles de comprender que reflejen con claridad la estructura del sitio. Los botones crípticos pueden parecer imponentes pero tienden a confundir a los lectores, en especial cuando su esotérica creación no viene acompaña por ningún texto explicativo. ■ Divida el contenido en unidades lógicas. No divida una página en dos sólo porque parezca que es demasiado larga. Por otro lado, si ve una división lógica en una página larga, divídala (pero asegúrese de que no pierde la página recién creada al sepultar su vínculo en el sitio).

91 ■ Analice la información y haga que la más importante sea la más obvia y accesible. ■ Determine formas que le permitan crear una apariencia o tema uniforme en todo el sitio. No olvide incluir un logotipo y usar vínculos de exploración coherentes en cada página. Tenga en cuenta que los aspectos de diseño más concretos en relación a la apariencia y el tema del sitio se examinan con más profundidad en la siguiente fase del planeamiento, cuando se esbozan la página principal y las subpáginas. ■ Incluya al menos un elemento que invite a los usuarios a volver, por ejemplo, un componente que se actualice diaria o semanalmente, o un salón de chat. ¡Pruébelo! Rápidamente, piense en tres sitios que haya visitado hace poco. Ahora analice por qué y la forma en que esos tres sitios le han causado impresión. ¿Hay algún elemento que pueda adoptar y modificar para su sitio? ¿Eran fáciles de explorar? ¿Alguno de los elementos que no le gustó destaca en su mente? Use su experiencia personal en su beneficio. Después de todo, sabe lo que le gusta cuando explora el Web. Sentando las bases de su página principal Una vez se haya depositado el polvo suficiente en el esquema de planeamiento del sitio (con lo que lo habrá meditado también de forma suficiente), puede limpiar la pizarra y empezar a diseñar su página principal y sus subpáginas. En este momento, debe tener una idea muy concisa de lo que la página principal debe incluir: el logotipo, la barra de título y vínculos a las páginas más importantes del sitio, entre otros elementos. Sobre todo, debe haberse preocupado por la faceta práctica del diseño de páginas, por ejemplo, por determinar la estructura de la asignación de nombres de archivo, el análisis de su público, la determinación de las limitaciones de hardware, etcétera. En este momento, sus jugos creativos consiguen hacerse paso mientras su sinapsis organizativa descansa y rejuvenece. En esta fase de diseño, debe centrar su atención en el modo en que puede presentar con creatividad todos los componentes necesarios de la página principal de manera que refleje los objetivos del sitio, optimice su tema y obtenga de los usuarios la respuesta “emocional” apropiada. Por ejemplo, los propietarios de la tienda Curiosity Shoppe deseaban comunicar el sentimiento de que el almacén vende tesoros que se han descubierto por todo el mundo. Por lo tanto, les sugerimos el tema del mapa del tesoro y el logotipo N-S-E-W “C”.

92 Cuando haya empezado a pensar en formas creativas de presentar sus ideas, comience a dibujar diseños y pensamientos. Empezará a ver lo que funciona mejor y las propias ideas harán que surjan otras hasta llegar a un diseño que funcione. La figura 5-4 muestra un esbozo de la página principal de Curiosity Shoppe. Dado que diseñamos la página principal para crear una impresión única, su esquema es notablemente diferente del correspondiente a las subpáginas del sitio. Por lo tanto, también dibujamos la página de productos para ilustrar cómo se mostrarían la barra de título y los vínculos de exploración en las subpáginas, como se muestra en la figura 5-5. Al dibujar la página principal, remítase a la lista de comprobación del planeamiento de una, posteriormente en esta lección, para comprobar que ha tenido en cuenta todos sus principios. Figura 5-4. El dibujo de la página principal de Curiosity Shoppe contiene su información básica.

93 Figura 5-5. El dibujo de la página de productos de Curiosity Shoppe muestra cómo difieren significativamente las subpáginas del sitio Web de la página principal. Lista de comprobación del planeamiento de una página principal Debe comprobar que su página principal incluye los elementos enumerados en la lista. Si omite algunos a propósito, asegúrese de saber el porqué. Tenga en cuenta que no se clasifica la importancia de los elementos por el orden; de hecho, la lista está ordenada alfabéticamente para evitar que ninguno prevalezca sobre los demás. (Somos tan astutos como para eso.) Compruebe que de una forma u otra aborda todos los elementos siguientes en relación al diseño de su página principal: ■ La fecha de creación o revisión ■ Los vínculos de exploración o los botones se identifican fácilmente y se muestran de forma coherente ■ El icono de la página principal o el logotipo se puede usar en todo el sitio ■ La información importante se muestra claramente ■ El título es informativo ■ El tema o efecto emocional intencionado se crea mediante las palabras, los colores, la disposición, las fuentes u otros elementos ■ Hay un logotipo u otro gráfico identificativo, como un escudo familiar o un código de departamento

94 ■ La página de inicio ” engancha” para captar el interés del visitante (las páginas principales por lo general varían al menos ligeramente de las subpáginas) ■ Se ha buscado una solución que agiliza la descarga (es cierto, las imágenes gigantescas quedan realmente mal como fondo y en realidad no necesita mostrar 90 imágenes en la página principal) ■ El propósito del sitio está claro y los visitantes saben lo que deben hacer después (aparte de hacer clic en el botón Atrás) ■ El texto largo se divide en párrafos con encabezados secundarios (si es necesario) ■ Los vínculos de texto se muestran en la parte inferior de la pantalla ■ La esquina superior izquierda se dedica a un uso adecuado, preferiblemente a mostrar su logotipo ■ Muestra su identidad o la de su organización Sugerencia Incluso aunque la lista de comprobación del planeamiento de una página principal parezca larga, su página principal no debe serlo. Por todos los medios, evite sobrecargarla. Es mejor agregar un par de vínculos al menú de exploración en lugar de llenar de información cada esquina (y más allá) de la pantalla de los usuarios. Acopio de utensilios y preparación Después de haber especificado sus objetivos, conocido a su audiencia, organizado su sitio y diseñado la composición de su página principal, falta un componente final del planeamiento: reunir las herramientas y utensilios que necesita. En esta fase también debe asegurarse de que todo el texto está bien escrito y corregido, los gráficos tienen un tamaño apropiado (que posiblemente tenga que retocar un poquito cuando el proceso de diseño real de la página comience), las imágenes están digitalizadas de algún modo (con un escáner o de otra forma) y dispone de las herramientas para organizar todos los elementos en las páginas Web. Como puede ver, lo que tiene que hacer en esta etapa es muy concreto y sencillo, pero llevarlo todo a cabo suele llevar una significativa cantidad de tiempo, así que debe planearlo apropiadamente. Por suerte, aunque esta fase suele ser la más larga, podemos describir el proceso de un modo bastante sucinto. Básicamente, antes de crear su página Web, debe reunir los elementos enumerados en la siguiente lista de comprobación.

95 Nota No intentamos desanimarle al afirmar que esta fase de aprovisionamiento en el juego del Web puede llevar mucho tiempo. Simplemente debe saber que la recopilación, creación y modificación del texto y los gráficos casi siempre parece tardar algo más de lo previsto; al menos esa ha sido nuestra experiencia y no sólo porque tendemos de forma inherente a divertirnos creando, modificando y jugando con ellos. Por suerte, no tiene que preocuparse por la clase de demoras que puede sufrir durante el “acopio de utensilios”. Recuerde que nuestro objetivo en este curso es la creación de páginas Web de una forma más rápida e inteligente. Con tal fin, en las lecciones 6 y 7, hemos enumerado los elementos necesarios para crear las páginas Web de la lección. No tema: las etapas de caza y recolección incluidas en las lecciones 6 y 7 son breves e indoloras. Lista de comprobación de utensilios Antes de empezar a crear páginas Web, debe tener los elementos siguientes a mano y poder disponer de ellos fácilmente, o al menos haber finalizado una gran parte de este proceso: ■ El texto: corregido, revisado ortográficamente y releído ■ Las fotografías, gráficos e ilustraciones (incluyendo los botones, las barras de título y un logotipo de gran calidad) ■ Dibujos de las páginas y plantillas Recuerde: si decide adquirir ■ Un editor HTML, un procesador de texto o una herramienta de un nombre de dominio, debe creación de páginas Web ser breve, sencillo y tener relación con el propósito ■ Un programa de gráficos de su sitio Web. ■ Un nombre de dominio (ya sea comprado o asignado) ■ Espacio en un servidor Ahora que ha concluido la explicación de las fases de teoría y planeamiento, está listo para mancharse las manos y enfrentarse a la segunda mitad de este curso. Así que, remánguese: ¡el momento de crear ha llegado! Puntos clave ■ Defina los objetivos del sitio Web. ■ Conozca a su público. ■ Defina la jerarquía, flujo organizativo y apariencia global del sitio Web. ■ Dibuje la página principal y las subpáginas. ■ Reúna las herramientas y utensilios necesarios. ■ ¡Prepárese para crear páginas Web y pasarlas al mundo real!

96 LECCIÓN 6 HTML básico sin misterios Una vez completada esta lección, podrá:  Entender los fundamentos de la codificación HTML.  Usar etiquetas HTML.  Planear un sitio HTML.  Crear una tabla con HTML.  Ensamblar una página principal y sus subpáginas con HTML. ¿Puede recordar el intenso y premeditado esfuerzo que le llevó aprender los sonidos y formas del alfabeto? Al final, tras mucha práctica, lo consiguió. Después de aprender las letras, lentamente comenzó a entender cómo combinarlas en palabras, combinar las palabras en frases, las frases en párrafos y así sucesivamente. En este momento, es probable que leer le parezca algo natural. Y lo más seguro es que lea el periódico y explore el Web sin pensar demasiado en cada sonido y forma de las letras. Eso se debe a que, con los años, ha desarrollado los conceptos básicos que son las letras y las palabras hasta llegar a demostrar una capacidad aparentemente innata para leer. Aprender a crear documentos HTML desde cero, con etiquetas y sabiendo cómo funciona HTML, es bastante parecido a aprender a leer. El proceso puede precisar algo de paciencia y mucha práctica al principio, pero si se toma el tiempo necesario para estudiar HTML ahora, al final podrá usarlo para crear páginas Web de una forma casi tan natural como puede leer. Acopio de los “utensilios” para el proyecto Para crear las páginas Web descritas en esta lección, necesitará los siguientes “utensilios”: ■ Un procesador básico de texto, como el Bloc de notas de Microsoft o WordPad (aplicaciones que se incluyen con Microsoft Windows) o TextEdit (que viene con Macintosh OS X). ■ Un explorador. ■ 27 archivos de ejercicios, que se pueden encontrar en la subcarpeta Lesson06 de la carpeta Web Design FundamentalsPractice, en el disco duro. Estos archivos se usan para crear las páginas Web de esta lección, que se enumeran en la página siguiente.

97 b_background.gif b_lessons2.gif picture.gif b_background2.gif b_performances.gif sendnote.gif b_competitions.gif b_performances2.gif t_background.gif b_competitions2.gif b_recitals.gif t_competitions.gif b_contact.gif b_recitals2.gif t_contact.gif b_contact2.gif bg.gif t_home.gif b_home.gif footer.gif t_lessons.gif b_home2.gif logo.gif t_performances.gif b_lessons.gif p_chris.jpg t_recitals.gif Si desea saber los pasos detallados necesarios para configurar los archivos de ejercicios, consulte la sección “Poner en su lugar las carpetas y los gráficos”, más adelante en esta lección. ¿Por qué HTML? En las lecciones 1 a 5 introdujimos de forma breve el Lenguaje de marcado de hipertexto (HTML, Hypertext Markup Language). Esencialmente, explicamos que los documentos de una página Web se construyen incluyendo comandos HTML (también conocidos como etiquetas HTML) dentro del cuerpo de un documento de texto básico. Aunque otras tecnologías, como el Lenguaje de marcado extensible (XML, Extensible Markup Language) y Hoja de estilos en cascada (CSS, Cascading Style Sheet), están empezando a tener una repercusión significativa en el desarrollo de páginas Web, HTML constituye la base de la mayor parte de las páginas Web en este momento y, si va a crearlas, necesita conocer este lenguaje. Ahora bien, entendemos que podría no sentirse muy dispuesto a crear una página Web desde cero usando únicamente un documento en blanco y una tecnología que le suena vagamente familiar, denominada HTML. Pero, lo crea o no, está preparado, de modo que inténtelo. Hacemos que use HTML en el primer proyecto con páginas Web de este curso porque se dará cuenta de que conocer sus fundamentos le resultará extremadamente práctico cuando cree páginas Web en el futuro, no importa cuándo. Por lo tanto, vamos a tomar una aproximación de bautismo de fuego en esta lección, lo que significa que va a escribir sus propios documentos HTML en breve. En ciertas formas, podría encontrar que el proyecto de esta lección es el más importante de esta mitad del curso. Si va a crear páginas Web, tendrá mucho ganado si domina algunos conceptos y comandos HTML básicos. Algún día, cuando tenga mucha más soltura con la creación de páginas Web, conocer al menos un poco de HTML le permitirá modificar y retocar páginas para adaptarlas a sus preferencias, incluso si han sido generadas por un editor HTML. Además, saber HTML implica que podrá quitar todos los comandos HTML innecesarios (y, en ocasiones, propiedad de otro) que muchos editores HTML tienden a agregar en los documentos de páginas Web. Al quitar los códigos innecesarios, puede hacer que sus documentos HTML sean más pequeños, lo que a su vez significa que las páginas se cargarán antes.

98 Finalmente, a medida que adquiera más habilidad en el uso de comandos HTML, podría encontrar que puede hacer cambios con más rapidez y precisión si agrega, elimina o modifica el código HTML en lugar de modificar una página Web en un editor HTML. Ahora estamos listos para empezar. El primer cometido en este empeño, antes de comenzar a crear un sitio Web, es revisar brevemente (muy brevemente) la teoría básica de HTML. Por cierto, cuando decimos teoría, nos referimos a información clara y útil, y no a retórica compleja. Considere la explicación teórica siguiente como si extendiera una manta antes de iniciar una merienda en el campo; también podría sentirse algo desanimado ante los bichos con los que se encontrará. De modo que ha oído algo acerca de CSS Hojas de estilo en cascada (o CSS) es una tecnología que permite definir el formato de una página de un sitio Web en un único lugar, ya sea en un documento independiente o en un área especial dentro de un documento de una página Web. Según el criterio de muchos diseñadores y desarrolladores del Web, todo el mundo debería usar CSS lo antes posible. Pero la realidad de la situación es que el Web está lejos de ser completamente compatible con CSS y muchos sitios Web no incorporan hojas de estilo. Por suerte, el Web sigue admitiendo las técnicas de formato más antiguas junto con los nuevos comandos CSS. En lo que le incumbe, el objetivo de esta lección es enseñarle HTML; por lo tanto, hemos decidido omitir la explicación de cómo utilizar hojas de estilo en esta lección. Cuando aprenda HTML, podrá continuar y aprender CSS con tranquilidad (¡quién sabe, puede que escriba un libro acerca de CSS como ayuda en su camino!). Para ayudar a estimular su apetito cognitivo de CSS, le mostramos cómo modificar las hojas de estilo generadas automáticamente en el proyecto de la lección 7. En relación a CSS, podría oír que algunas de las etiquetas y atributos HTML que le mostramos en esta lección están desaprobadas, como la etiqueta . Un elemento desaprobado se puede usar (y se usa) en el Web, simplemente está destinado a eliminarse a la larga. Puede ver una lista de las etiquetas HTML junto con anotaciones referentes a cuáles se clasifican como desaprobadas (deprecated) en www.w3.org/ TR/1999/REC-html401- 19991224/index/elements.html (en inglés).

99 Finalmente, debido a los diversos niveles de compatibilidad con CSS y HTML que hay en el Web actualmente, puede ayudar a los exploradores a interpretar sus páginas Web si especifica si cumplen estrictamente los estándares más recientes, si son de transición (incluyen elementos HTML desaprobados) o si tienen marcos (incluyen elementos HTML desaprobados y marcos dentro del sitio Web). Para ello, debe incluir una versión particular de la etiqueta HTML <!DOCTYPE...> en las páginas Web, según se describe aquí además de en los pasos del proyecto, en esta lección: ■ Si su página Web cumple los estándares CSS y HTML 4.01, inserte: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ■ Si su página Web cumple los estándares HTML 4.01 e incluye elementos y atributos HTML desaprobados (muchos de los cuales conciernen a la presentación visual), inserte: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> ■ Si la página Web es compatible con HTML 4.01 e incluye elementos y atributos HTML desaprobados, además de tramas, inserte: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Puesto que el proyecto de esta lección incluye elementos HTML desaprobados pero no tramas, sus documentos usarán la segunda instrucción de la lista anterior, la que indica que el código es de transición. Le mostraremos cómo agregar esta instrucción en un documento HTML en los pasos del proyecto, más adelante en esta lección. Fundamentos de HTML Básicamente, los comandos HTML sirven como instrucciones que le indican a un explorador cómo mostrar el contenido de una página Web. En otras palabras, los comandos HTML proporcionan información de formato que controla la presentación del texto y los gráficos de la página Web. Tenga en mente el propósito de los comandos HTML. Verá más adelante cómo se entretejen alrededor del contenido de la página Web en un documento HTML, pero, en esencia, un documento HTML contiene dos tipos de información: ■ La información del contenido, incluido el texto y punteros a los gráficos ■ Comandos HTML, que se usan para indicar cómo se muestra el contenido

100 En esta lección, le mostramos cómo especificar los comandos HTML y el contenido de la página en un documento de texto para crear páginas Web. Además, vinculará las páginas que cree de modo que se combinen para crear un sitio Web. Para llevar a cabo esta hazaña, necesitará un procesador de texto, como los mencionados en la lección 4, por ejemplo el Bloc de notas o WordPad (si utiliza Windows), o Text Edit (si usa Mac OS X, o SimpleText si emplea Mac 9x o un sistema operativo anterior). En la figura 6-2 se ilustra cómo se muestran los documentos completamente codificados en HTML en TextEdit, WordPad y el Bloc de notas, respectivamente. Cuando empiece el proyecto de esta lección, comenzará con una página en blanco. Para abrir el Bloc de notas, haga clic en Inicio, seleccione Programas, Accesorios y, después, haga clic en Bloc de notas. Para abrir WordPad, haga clic en Inicio, seleccione Programas, Accesorios y, después, haga clic en WordPad. Para abrir TextEdit, haga doble clic en el icono TextEdit en el disco duro. Nota No se alarme ante la aparentemente incomprensible conglomeración de comandos HTML mostrados en la figura 6-2. HTML puede parecer complejo, pero en realidad sólo consta de combinaciones de letras, números y símbolos con algo de organización. Como es obvio, conocerá las letras, números y símbolos, así que tenga por seguro que aprender a usar los comandos HTML se incluirá igualmente entre sus habilidades. Como hemos mencionado antes, las etiquetas HTML cuidan del formato de las páginas. Por el contrario, el contenido es la información que se muestra en la página (texto, gráficos, encabezados, etcétera). En otras palabras, HTML se ocupa de la forma en que se presenta la información (negrita, cursiva, alienación a la izquierda y demás) y el contenido especifica lo que se muestra. Saber cómo incorporar las etiquetas apropiadas en todo el contenido de una página Web es la clave para crear una en un procesador de texto. Por lo tanto, vamos a explicar cómo se usan las etiquetas HTML.

101 Figura 6-2. Visualización de un documento HTML en TextEdit, WordPad y el Bloc de notas. Uso de etiquetas HTML En esta sección, introducimos las reglas básicas de HTML junto con algunas etiquetas comunes. Tenga en cuenta que no definimos cada etiqueta HTML existente; hay un buen número de ellas y en muchos libros dedicados a HTML se ofrecen extensas listas de comandos. (Si desea averiguar más acerca de HTML de lo que abarcamos aquí, revise algunas de nuestras referencias de HTML favoritas, que enumeramos en la sección “Recursos adicionales”, casi al final de esta lección.) Nuestra filosofía es que si aprende las reglas básicas de la utilización de etiquetas HTML, podrá usar cualesquiera de las que descubra en línea o en los libros sobre HTML. Comenzaremos nuestra explicación de las etiquetas HTML con una regla sencilla: las etiquetas HTML constan de comandos que aparecen dentro de paréntesis angulares (<>).

102 Jerga: el código fuente hace Por ejemplo, una de la primeras etiquetas en el código fuente de una página referencia al contenido del Web suele ser <HTML>. Esta etiqueta le indica a un explorador, sin ningún documento HTML que crea género de duda, que el documento de texto es un documento HTML. una página Web. La mayor El explorador sabe que cualquier texto dentro de los paréntesis angulares (<>) parte de los exploradores permiten ver el código fuente es un comando HTML que debe procesar y que todo el texto que esté fuera es de una página Web. Por contenido que hay que mostrar. ejemplo, para mostrar el código fuente de una página Aquí tiene la segunda regla que debe recordar: en las etiquetas HTML no se Web en Microsoft Internet distinguen mayúsculas y minúsculas. Explorer, muestre una página Web, haga clic en el menú Esta regla no es nada del otro mundo, pero es conveniente conocerla. Significa Ver y, después, en Código que a los exploradores no les importa que el texto situado entre los paréntesis fuente. angulares esté en mayúsculas o en minúsculas. Por lo tanto, y son, esencialmente, la misma etiqueta (que, a propósito, indica al explorador que muestre en negrita el texto que le sigue). De igual modo, <HTML>, <html>, <HtMl> y cualquier otra combinación de letras mayúsculas y minúsculas representa la misma etiqueta. A continuación, vea la regla número tres: las etiquetas HTML casi siempre vienen en pares. Puesto que la mayoría de las etiquetas HTML se usan principalmente para formato, suelen venir de dos en dos: una etiqueta de inicio y otra de fin (a las que también se hace referencia como etiquetas de apertura y de cierre, respectivamente). Este emparejamiento permite indicar a los exploradores dónde debe comenzar un atributo de formato en particular (como la negrita) y dónde debe terminar. Acuérdese de cuando va al cine con algunos amigos y dos de ellos se adelantan para guardar los sitios mientras el resto del grupo va a por palomitas. Las dos personas que guardan los asientos se sientan separados en cada uno de los extremos que marcan el inicio y el final de la hilera que ocuparán sus amigos. Si fueran etiquetas HTML, le dirían al explorador que todos los asientos situados entre ellos deberían tener el mismo formato que el de sus asientos. Las etiquetas de inicio y de fin tienen un propósito muy específico, en concreto, una etiqueta de inicio indica cuándo debe iniciarse una acción y una de fin cuándo se debe terminar. (Como ve, esto no es la ciencia de la física cuántica.) Aunque las etiquetas de inicio y de fin parecen muy similares, presentan una pequeña diferencia, aunque esencial. Las etiquetas de fin se diferencian de las de inicio por la inclusión de un carácter de barra diagonal (/) justo después del paréntesis izquierdo, como aquí: </HTML>. El último elemento de los documentos HTML suele ser el comando </HTML>, que indica el final de la presentación de la página Web. Volviendo de nuevo al ejemplo del cine, digamos que uno de sus amigos, los que guardan los sitios, se sienta en un asiento lateral y el otro en la mitad de la fila. El que está en la mitad de la fila lleva una camisa roja. De repente, un recién llegado pregunta al que se sienta en el pasillo si los asientos están ocupados. Éste contestaría algo así como: “Sí, todos los asientos que hay hasta donde está aquella persona con la camisa roja están ocupados.”. Esta es la función de una etiqueta de inicio. La persona que lleva la camisa roja actuaría entonces como etiqueta de fin. Por ejemplo, una etiqueta le dice al explorador: “Pon en negrita todo el texto desde aquí hasta la etiqueta ”.

103 Para mejorar la ilustración, veamos un ejemplo de texto que usa pares de etiquetas HTML. En la instrucción siguiente se incluyen etiquetas HTML de inicio y de fin que dan formato a la frase como un párrafo ( ), muestran la frase sabor a mantequilla en cursiva () y dan formato a la palabra palomitas en negrita (), como se muestra en la figura 6-3: ¿Desea las palomitas con sabor a mantequilla o las prefiere normales? Figura 6-3. Si la pregunta se incluye en un documento HTML, podría verla con formato en un explorador, como se muestra aquí. La frase también ilustra un concepto interesante denominado anidamiento. En los documentos HTML, el anidamiento no tiene nada que ver con ramitas y plumas sino con el orden en que aparecen las etiquetas HTML. En la frase de las palomitas, el conjunto de etiquetas de cursiva () y el de negrita () se anidan dentro de las etiquetas de párrafo (). Ésta es una regla clave que debe seguir al anidar etiquetas HTML: las etiquetas HTML anidadas se ceben cerrar en orden inverso en el que se han abierto. La regla podría parecer un poco confusa, de modo que veamos un ejemplo. Básicamente, las etiquetas HTML de apertura y de cierre no se deben cruzar. Éste es un modelo correcto: <HTML> </HTML> En este ejemplo, las etiquetas de negrita () se anidan dentro de las de párrafo (), que se anidan dentro de las etiquetas de identificación de documento (<HTML>). Esta disposición resultaría en un texto en negrita dentro de un párrafo dentro de un documento HTML. La siguiente también funcionaría: <HTML> </HTML> Observe que en este ejemplo de anidamiento se usa el mismo modelo que en la frase de las palomitas. En este ejemplo, el par de etiquetas de cursiva y el de negrita no se anidan uno dentro del otro pero ambos están anidados dentro del par de etiquetas de párrafo.

104 Ahora vamos a aligerar la explicación un poco y nos fijaremos en una regla más concisa: de forma predeterminada, los documentos HTML muestran un único espacio entre los elementos de texto. Parece que huelga mencionar esta regla, pero los problemas de espaciado son una gran preocupación en el Web por diversas razones (principalmente, porque los diseñadores tienen que ocuparse del contenido que cambia de tamaño y de ubicación, problemas que no se dan en los documentos impresos). En un documento HTML, al agregar cualquier número de espacios dentro del código mediante la barra espaciadora, la tecla Tabulador o la tecla Entrar, sólo se consigue agregar un espacio. Por lo tanto, podría incrustar los cuatro fragmentos de código siguientes en un documento HTML: Instrucción musical Instrucción musical Instrucción musical Instrucción musical y el texto aparecerá en cualquier caso como se muestra en la figura 6-4. Figura 6-4. El texto se muestra con un único espacio entre palabras, incluso cuando se agrega espacio adicional entre las palabras del documento HTML. Ahora está preparado para la siguiente regla, que añade algo de picante a las etiquetas HTML: algunas etiquetas HTML de apertura pueden contener propiedades (también conocidas como atributos), que refinan las instrucciones de una etiqueta HTML. En otras palabras, con frecuencia, puede personalizar las instrucciones relativas a un comando de formato HTML. Por ejemplo, puede agregar un atributo COLOR al comando para cambiar el color del texto que se muestra, como se indica a continuación: Dicen que el césped es más verde. Si insertara la frase anterior en un documento HTML, en el texto se mostraría la palabra césped en verde.

105 Finalmente, aquí tiene la última regla de esta sección: existen numerosas variaciones en relación al anidamiento HTML, a las propiedades y al uso de conjuntos de etiquetas. Como con todas las reglas, descubrirá que, aunque la mayor parte de HTML es predecible, la tecnología es tan coherente como las reglas de ortografía, lo que significa que, con frecuencia, encontrará excepciones a las reglas. Por ejemplo, si desea agregar un salto de línea en HTML, debe especificar . No hay ninguna etiqueta de cierre para un salto de línea: o lo inserta o no. De la misma forma, para insertar una regla horizontal, se utiliza la etiqueta <HR>; de nuevo, no se requiere una etiqueta de cierre. No se preocupe si esto le causa una ligera confusión. Empezará a tener una idea más clara de HTML a medida que trabaje en el proyecto del sitio Web de esta lección. No hay nada como la experiencia práctica para aprender. Le introduciremos en otras etiquetas HTML y conceptos adicionales en el proyecto según vayamos avanzando. Como ayuda, puede ser aconsejable que tenga a mano la tabla 6-1 mientras trabaja. Tabla 6-1. Etiquetas HTML usadas en el proyecto HTML Etiquetas Función <A HREF="xxx.xxx">< /A> Marca el punto delimitador de un hipervínculo, en el que se puede hacer clic. El atributo HREF señala la información que se debe mostrar al hacer clic en el contenido del delimitador. El contenido del delimitador se especifica entre las etiquetas de delimitación (<A></A>) y uede incluir texto e imágenes. Indica que se muestre en negrita el texto incluido entre las etiquetas y . <BLOCKQUOTE> Desplaza un párrafo del texto normal del </BLOCKQUOTE> cuerpo, por lo general, con una sangría a la izquierda del párrafo y márgenes a la derecha. <BODY></BODY> Marca el inicio y el final del contenido que se puede mostrar de la página Web. Inserta un salto de línea. La etiqueta no tiene una etiqueta de cierre y se suele usar de forma consecutiva para crear un espacio en blanco en una página Web.

106 (continúa) Etiquetas Función <CENTER></CENTER> Centra la información delimitada en la página o dentro de la celda de una tabla. <!DOCTYPE...> Especifica la definición de tipo de documento (DTD, Document Type Definition) de la página Web; por ejemplo, si la página usa codificación HTML estricta y CSS, codificación HTML de transición (incluidas etiquetas HTML desaprobadas) o tramas. Permite especificar el color de la fuente, su tipo y su tamaño. <H1></H1> Especifica el texto de encabezado. Los tamaños de encabezado abarcan desde H1 hasta H6, donde H1 es el mayor. <HEAD></HEAD> Proporciona un área en la que puede mostrar el título de la página Web, incluir información para el motor de búsqueda e información avanzada de formato, incrustar código CSS o vincular a una hoja de estilos, y escribir secuencias de comandos. Aparte del texto incluido entre las etiquetas <TITLE></TITLE> incrustadas, la mayor parte de la información no se muestra directamente a los usuarios. <HTML></HTML> Delinea el inicio y el final de un documento HTML. Indica que el texto que aparece entre las etiquetas e se ponga en cursiva. <IMG SRC="xxx.xxx"> Muestra una imagen en una página Web. El atributo SRC señala a la imagen particular que se debe mostrar. <LI></LI> Identifica un elemento de una lista sin numerar (con viñetas) <UL> o de una lista ordenada (numerada) <OL>. <OL></OL> Especifica una lista ordenada (numerada).

107 (continúa) Etiquetas Función Indica el principio y el final de un párrafo. De forma predeterminada, los párrafos se muestran alineados a la izquierda. La etiqueta de cierre es opcional. En otras palabras, puede insertar simplemente la etiqueta al comienzo de cada párrafo nuevo para dar formato al contenido HTML sin escribir al final de cada párrafo. Hemos incluido la etiqueta de cierre en esta lección para clarificar la explicación. Los exploradores suelen insertar una línea en blanco (más un pequeño espacio adicional) antes de iniciar un párrafo. <TABLE></TABLE> Indica el principio y el final de una tabla. <TD></TD> Define el inicio y el final de una celda en una tabla. Las etiquetas <TD> se anidan dentro de otras etiquetas <TR>. <TITLE></TITLE> Permite insertar el texto de la página Web que se debería mostrar en la barra de título del explorador. <TR></TR> Indica una fila de una tabla. Las etiquetas <TR> se anidan dentro de un par de etiquetas <TABLE>. <UL></UL> Especifica una lista sin numerar (con viñetas). Sólo como última nota de esta sección, deseamos hacer una pequeña rectificación. Aunque estamos seguros de que puede crear un documento HTML a partir de cero, tenga en cuenta que esta lección sólo sirve de introducción a la creación de páginas Web en HTML. Lamentablemente, abarcar todos los comandos HTML disponibles en una sola lección es poco realista, pero en ésta puede encontrar sugerencias que le resultarán de utilidad en la codificación y algunas indicaciones de buenas referencias de HTML, en la sección “Recursos adicionales”, casi al final de la lección. Si crea el sitio Web descrito en el proyecto de esta lección, dominará los conceptos básicos de la codificación HTML, además de disponer de una plantilla que puede personalizar para crear páginas Web únicas. (Incluso le indicamos cómo usar el sitio como plantilla más adelante en esta lección.)

108 Tratamiento de documentos HTML y gráficos Web Cuando crea páginas Web, suele trabajar con varios archivos. Tendrá el archivo HTML de la página principal (que a veces se denomina index.html, index.htm o índice.html), un archivo gráfico de cada elemento gráfico de la página y otros archivos HTML adicionales para las páginas vinculadas. Por lo tanto, antes de empezar la fase de creación, tiene que idear un esquema organizativo para no volverse loco después. Le recomendamos que cree una carpeta para contener todos los archivos HTML usados en el sitio Web y que, dentro de la carpeta principal, cree una subcarpeta para las imágenes. A continuación, puede almacenar todos sus documentos HTML en la carpeta principal y colocar los gráficos en la carpeta de imágenes. Como ilustración, vea la figura 6-5, que muestra los documentos HTML y las imágenes necesarios para crear el sitio del proyecto de esta lección. Mantener organizados los archivos es un imperativo cuando se agregan gráficos y se crean hipervínculos, porque debe incluir instrucciones en el documento HTML en relación a dónde debe buscar el explorador un gráfico o página vinculada en particular. Además, la organización puede simplificar en gran medida el proceso de carga de archivos cuando esté en disposición de “pasarlos al mundo real” y los transfiera desde su PC local a un servidor Web. Lo mejor que puede hacer es crear una carpeta que pueda usar constantemente en el proceso de creación del sitio Web y en las páginas Web. Además de observar una minuciosa organización, debería guardar religiosamente sus páginas Web y verlas a menudo en un explorador durante el proceso de desarrollo. Figura 6-5. Debe mantener los archivos y carpetas del sitio Web organizados de una forma sencilla aunque lógica.

109 Guardar y ver los documentos HTML “¡Guardar, guardar, guardar!” Al crear las páginas Web, en especial si realiza la codificación HTML a mano, debería ser una de sus debe guardarlas y obtener una vista previa de las mismas sin reparos. Según máximas cuando trabaje nuestra propia experiencia, la frase “No podemos creer que hayamos perdido con un equipo informático. todos los datos” no es inusual, de modo que le recomendamos guardar sin reservas su trabajo frecuentemente, lo que también puede aplicarse en cualquier situación en la que trabaje con un archivo en un equipo informático (Si en los monitores creciera el césped, nuestro mouse desgastaría el camino en diagonal hacia el botón Guardar, por no mencionar nuestra voluntaria contribución a la leve erosión de las teclas Ctrl y G que se produce al presionarlas con tanta frecuencia.) Además de guardar a menudo sus archivos, debe obtener una vista previa de las páginas Web que cree varias veces a lo largo del proceso de creación. Ello simplemente conlleva mirar el documento HTML en uno o dos exploradores, frente a tener que examinar el texto y la versión del código HTML del documento en un procesador de textos. Al realizar este ejercicio, puede apreciar el formato que se da al contenido con HTML y puede solucionar los problemas de presentación en un primer momento. Con frecuencia, alteraremos la composición de un sitio porque lo que parece acertado sobre el papel no se transpone bien en una página en línea. Para obtener una vista previa de una página Web en un explorador, siga alguno de estos procedimientos una vez creado un archivo HTML: ■ Muestre el contenido de la carpeta que contenga el documento HTML y haga doble clic en el icono del documento HTML. ■ Abra el explorador (por ejemplo, Internet Explorer) y escriba la ubicación del archivo HTML. ■ Abra el explorador, abra la carpeta que contenga el documento HTML y arrastre el icono del archivo HTML de su carpeta a la ventana o a la barra de direcciones del explorador. Nota En la sección siguiente, le sugerimos algunos puntos concretos en los que debería guardar el sitio Web del proyecto y verlo en un explorador. Sin embargo, puede guardar los archivos y verlos más a menudo de lo que sugerimos, en especial si se toma un descanso mientras los está creando.

110 Ya hemos cubierto una buena parte de teoría; ahora llega la hora de las brujas. Si ha leído las páginas anteriores, está en disposición de abordar el proyecto de creación de páginas Web HTML. Debería tener un conocimiento práctico de las etiquetas HTML básicas, ser consciente de que debe guardar sus documentos HTML e imágenes en las carpetas designadas y reconocer la importancia de guardar las páginas Web y de verlas con frecuencia a lo largo del proceso de creación. Nos satisface que haya llegado a este punto, de modo que vamos a poner en marcha el proyecto. Planeamiento del sitio HTML Como proyecto HTML, decidimos crear una página Web para Chris Soll, músico profesional e instructora de música. El primero paso del planeamiento implicaba reunirse con Chris y averiguar el tipo de información que deseaba incluir en su sitio Web. En nuestra consulta inicial, encontramos que tenía varios temas profesionales y otros específicos de los alumnos que le gustaría incorporar. Según esta información, intentamos inicialmente diseñar una barra de exploración con dos niveles pero el diseño empezó a resultar demasiado confuso. Determinamos que podíamos crear un sitio más limpio si especificábamos botones con nombre y proporcionábamos una sección de información general del sitio en la página principal. El diseño final resultó en una composición clara y flexible. Cuando cree el sitio Web de Chris Soll (al que pronto comenzamos a hacer referencia como “el sitio de música” durante nuestras consultas, debido a la abrumadora presencia en el estudio de un piano de cola, una colección de flautas y montones de partituras musicales y libros de música), puede usar su documento HTML como plantilla para crear sitios Web similares que tengan una apariencia y funcionamiento completamente diferentes. No se preocupe, describimos cómo usar el código del sitio de música como plantilla más adelante en esta lección. En la figura 6-6 se ilustra el esquema que propusimos para ilustrar las páginas que deseábamos incluir en el sitio. La figura 6-7 muestra el esbozo final de la página principal del sitio de música. Figura 6-6. La estructura del sitio permite el acceso a cada una de sus páginas desde cualquier ubicación.

111 Figura 6-7. El dibujo muestra la composición básica del diseño de la página principal del sitio de música. Nota Observe en la figura 6-7 que inicialmente pensamos insertar la información de dirección debajo de los vínculos de texto en la parte inferior de la página. Después, durante el proceso de diseño, nos dimos cuenta de que colocar la dirección encima de los vínculos tenía más sentido. Los vínculos ya aparecían en la barra de exploración a la izquierda, de modo que preferimos presentar la información de la dirección “nueva” y más importante antes de repetir la información de los vínculos de texto.

112 Poner en su lugar las carpetas y los gráficos Como mencionamos anteriormente en esta lección, su primer cometido es crear una carpeta para los archivos Web y organizar sus gráficos. A continuación le indicamos el proceso que le sugerimos que siga (aunque puede cambiar la ubicación de las carpetas y el nombre según sus preferencias): 1 Cree una carpeta en la unidad C: y asígnele el nombre music. 2 Abra la carpeta music y cree una subcarpeta denominada images. 3 Busque la carpeta Lesson06 en la carpeta Web Design FundamentalsPractice del disco duro. 4 Copie todos los archivos de la carpeta Lesson06 a la subcarpeta images que creó en el paso 2. Cuando finalice esta lección A medida que copie los archivos de la carpeta Lesson06 a la subcarpeta images, y termine de experimentar observe el esquema de denominación que hemos usado para etiquetar las con el sitio Web de música, imágenes: puede eliminar la carpeta C:music, si lo desea. ■ b_xxx Especifica que la imagen es un botón. Un gráfico b_ al que se anexa el número 2 (por ejemplo, b_background2.gif) indica una segunda versión del botón que se muestra siempre con la página asociada. (Verá lo que significa esto posteriormente.) Por lo tanto, b_background.gif es el botón Antecedentes (la traducción de background en este caso) y b_background2.gif es la versión de la “página actual” del botón Antecedentes, como se ilustra en la figura 6-8. Figura 6-8. Cada botón del sitio de música consta de un botón normal y de una versión para la página actual del mismo.

113 ■ bg.gif Especifica el gráfico de fondo. Se usa el mismo gráfico de fondo en todo el sitio de música, de modo que sólo se requiere un archivo bg.gif. ■ footer.gif Identifica el gráfico como una imagen de pie de página en movimiento, que se utiliza en la parte inferior de las páginas del sitio. ■ logo.gif Identifica el gráfico del logotipo. En todo el sitio de música se usa el mismo gráfico de logotipo, pero podría tener unas cuantas versiones del mismo, en especial, si utilizara una versión más pequeña o modificada en las subpáginas. La imagen picture.gif es un ■ p_xxx Especifica que el gráfico es una imagen. En el sitio de gráfico marcador de posición música sólo hay una fotografía, que se encuentra en la página usado en la plantilla que se principal. explica más adelante en la lección. No usará el archivo ■ sendnote.gif Identifica el gráfico como el icono de “enviar mensaje picture.gif en el sitio de de correo electrónico”. Posteriormente, vinculará este icono en el música. sitio de música de manera que los usuarios puedan hacer clic en el gráfico sendnote.gif para abrir un mensaje de correo electrónico con una dirección predeterminada cuando deseen enviar un mensaje a Chris Soll. ■ t_xxx Especifica que la imagen es un gráfico de pancarta para la barra de título. Por ejemplo, t_background.gif es el gráfico de la pancarta de la barra de título de la página Antecedentes, que muestra la palabra Antecedentes y se coloca al principio de la página que ofrece información acerca de Chris Soll, como se ilustra en la figura 6-9. Figura 6-9. Un archivo gráfico se usa para crear la pancarta de una barra de título en cada página en el sitio de música. Cuando cree sus propias páginas Web y gráficos Web, probablemente preferirá idear su propio esquema de denominación. Le hemos mostrado el método que usamos nosotros para denominar nuestros gráficos con el fin de proporcionarle una idea de lo útil que puede resultar tener un sistema de nomenclatura. Apreciará la ventaja de disponer de un esquema de denominación de gráficos bien planeado a medida que empiece a insertar código HTML en breve.

114 Preparación del archivo de la página principal Cuando tenga las carpetas y archivos gráficos en su lugar, estará en disposición de crear la página principal del sitio. Para empezar el proceso de creación, tendrá que crear un documento HTML que contenga las etiquetas estándar que aparecen en todos los documentos HTML. Las etiquetas estándar son las siguientes (vea la tabla 6-1, anteriormente en esta lección): ■ <!DOCTYPE...> ■ <HTML></HTML> ■ <HEAD></HEAD> ■ <TITLE></TITLE> ■ <BODY></BODY> Observe que, con la excepción de la etiqueta <!DOCTYPE...>, las etiquetas estándar vienen en parejas. En la figura 6-10 se demuestra la forma apropiada de anidar los pares de etiquetas HTML estándar en un documento HTML y cómo insertar el texto del título. Cuando haya escrito las etiquetas HTML estándar en un documento de texto, tendrá que guardar el documento de texto como documento HTML, según se describe en el procedimiento siguiente. Figura 6-10. Este documento contiene las etiquetas HTML estándar con algo de texto incluido entre las etiquetas <TITLE>.

115 Nota Recuerde que en HTML no se distinguen mayúsculas y minúsculas, de modo que puede escribir <HTML>, <html>, <HtMl> o cualquier otra combinación de letras en mayúsculas o minúsculas, y la etiqueta será correcta. En esta lección, usamos siempre letras en mayúsculas para las etiquetas HTML con el objeto de reconocerlas más fácilmente. Para comenzar a crear la página principal del sitio de música y guardarla en forma de archivo HTML, siga estos pasos: 1 Abra el Bloc de notas, WordPad o TextEdit. En todo el proyecto usamos el Bloc de notas. 2 Haga clic en un nuevo documento en blanco y escriba la siguiente definición de tipo de documento (que indica que contiene etiquetas desaprobadas): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 Presione Entrar dos veces. 4 Escriba <HTML> y presione Entrar dos veces. 5 Escriba <HEAD> y presione Entrar. 6 Escriba <TITLE>Instrucción musical de Chris Soll</TITLE> y presione Entrar. 7 Escriba </HEAD> y presione Entrar dos veces. 8 Escriba <BODY>, presione Entrar varias veces (para dejar algo de espacio cuando especifique la información del contenido de la página Web), escriba </BODY> y presione Entrar dos veces. Nota El texto del contenido, que se muestra entre las etiquetas HTML y fuera, se presenta de la misma forma, con mayúsculas o minúsculas, que si se especificara en el documento de texto. Por lo tanto, si escribe chris soll en lugar de Chris Soll en el paso 4, el nombre de Chris aparecerá en letras minúsculas en la página Web. Además, recuerde que no tiene que preocuparse de si pone demasiados espacios (incluidas líneas en blanco) entre el texto del contenido y las etiquetas HTML. Cuando un explorador presente el documento, pasará por alto los espacios adicionales.

116 9 Escriba </HTML> para completar la configuración de las etiquetas HTML estándar. Ahora puede nombrar y guardar el archivo en la carpeta C:music. 10 En el menú Archivo, haga clic en Guardar. 11 En el cuadro de diálogo Guardar como, en el cuadro Nombre de archivo escriba index.html y compruebe que en la lista desplegable Guardar como está seleccionada la opción Documentos de texto. (Si es necesario, haga clic en la flecha para seleccionar la opción Documentos de texto.) 12 Use la lista desplegable Guardar en y vaya a la carpeta C:music del equipo. 13 Haga clic en Guardar y cierre el Bloc de notas. El archivo debería mostrarse ahora como index.html en la carpeta C:music y el icono debería indicar que es un documento HTML. En este punto, ya puede ver su archivo en el explorador. Para ver el archivo HTML recién creado, haga doble clic en index.html. Se debe abrir en su explorador Web. Observe que el único contenido es el texto del título de la página Web, que se presenta en la barra de título del explorador. Ahora que el título de la página Web y las etiquetas HTML están en su lugar, vamos a agregar los colores predeterminados de los vínculos y de la imagen de fondo. Especificación de los colores del fondo y de los vínculos Puede incluir atributos en la etiqueta <BODY> para agregar los colores de fondo, las imágenes de fondo, los colores predeterminados de los vínculos y otras características, según se describe en los pasos siguientes: 1 Abra el Bloc de notas, WordPad o TextEdit, y después abra el archivo C:musicindex.html en el procesador de texto. Si no ve el archivo index.html en el cuadro de diálogo Abrir, asegúrese de que en el cuadro de lista Tipo de archivo aparece Todos los archivos (*.*). Si usa Mac OS X, TextEdit muestra automáticamente los documentos HTML como páginas Web, de forma predeterminada. Para abrir y mostrar el código HTML en lugar de la página Web, active la casilla de verificación Ignore Rich Text Commands (Pasar por alto comandos de texto) en el cuadro de diálogo Open File (Abrir archivo); observe que puede seleccionar esta opción también en el cuadro de diálogo Preferences (Preferencias) del programa, si no desea activar la casilla de verificación cada vez que se necesite.

117 Sugerencia Debe abrir el archivo HTML mediante el comando Open (Abrir) del procesador de texto, arrastrando el icono del documento en la ventana de dicho programa o haciendo clic con el botón secundario del mouse (ratón) en el archivo HTML y eligiendo Bloc de notas en el menú Abrir con. Si hace doble clic en un archivo HTML en la vista de carpetas, mostrará el documento HTML en el explorador Web. 2 En la etiqueta <BODY>, haga clic después de la Y y antes de >, presione la barra espaciadora y vuelva a especificar los siguientes atributos y valores, incluidas las comillas: BGCOLOR="#ffffff" BACKGROUND="images/bg.gif" LINK="blue" VLINK="purple" ALINK="red" Los atributos <BODY> que ha agregado se definen como sigue: ■ BGCOLOR define un color de fondo. Aunque en el sitio de música se usa un gráfico para el fondo, definimos un fondo blanco para quienes vean el sitio con las imágenes desactivadas. En la paleta mostrada en el archivo palette216.gif, que se encuentra en la carpeta Lesson03 de este curso, puede ver que #ffffff es un número hexadecimal que indica el color blanco. Jerga: poner en mosaico ■ BACKGROUND permite especificar un archivo gráfico para usarlo significa repetir una imagen como imagen de fondo. Recuerde que los exploradores colocan en toda el área de una en mosaico las imágenes de fondo para rellenar la ventana del ventana hasta que se llene explorador. En la página del sitio de música se usa el archivo bg.gif, con la imagen repetida. que se almacena en la subcarpeta images de la carpeta music, como imagen de fondo. Dado que tanto el documento index.html como la carpeta images residen en la carpeta music, no tiene que indicar la dirección completa de la imagen. Si la imagen estuviera guardada en otro sitio, es decir, no dentro de una subcarpeta de la carpeta que contiene al documento index.html, tendría que especificar la dirección completa para indicar dónde se encuentra. ■ LINK permite especificar el color en el que se muestran los hipervínculos de texto que no se han visitado. ■ VLINK permite especificar el color en el que se muestran los hipervínculos de texto que se han visitado. En otras palabras, una vez que un usuario visite la página Contactos, cualquier vínculo que señale a esta página aparecerá en el color correspondiente a los vínculos visitados (púrpura, en este caso). ■ ALINK permite indicar el color en el que se muestran los vínculos mientras el usuario hace clic en ellos. Mostrar los vínculos en un color diferente mientras los usuarios hacen clic en ellos les indica claramente que están activando un hipervínculo.

118 Su código HTML debería ser ahora como el de la figura 6-11. Figura 6-11. Dentro de la etiqueta <BODY> se pueden agregar algunos atributos de formato. (El código recién añadido se resalta en color naranja.) Sugerencia Siempre que escriba código HTML, compruebe que ha incluido todos los paréntesis angulares (<>) y las comillas ("") en él además de que los comandos HTML están escritos correctamente. Si faltan elementos o los comandos están mal escritos, la página Web puede mostrarse de forma inapropiada o no mostrarse. Hemos incluido capturas de pantalla del código que está creando en esta lección para que pueda comprobar fácilmente su trabajo. Si los cambios que haga en 3 Guarde su documento HTML, abra el explorador y vea el archivo su documento HTML no se index.html en la ventana del explorador. (No tiene que cerrar el muestran en la vista previa documento de texto, pero debe asegurarse de que ha guardado los en el explorador, haga clic cambios más recientes.) El archivo index.html debe mostrar la en el botón Actualizar para actualizar la vista. imagen de fondo en la ventana del explorador. Ahora que ha definido las etiquetas HTML estándar, la imagen de fondo predeterminada y los colores de los vínculos, el siguiente paso es comenzar a dar formato al área <BODY> de la página Web. Creación de una tabla En esta sección, explicamos cómo crear una tabla que contendrá todos los elementos de la página Web. Controlarlos es un poco dificultoso debido a la naturaleza variable de los exploradores y sus ventanas, por lo que muchos sitios se diseñan con tablas que tienen bordes ocultos para ayudar a componer las páginas Web. A la larga, el formato y alineación de las páginas Web se llevará a cabo mediante hojas de estilo, pero por ahora miles y miles de páginas Web se basan en tablas para controlar la presentación de sus elementos. Por supuesto, no todas las páginas Web usan una tabla pero encontrará que son una herramienta muy útil.

119 Básicamente, las tablas usan tres etiquetas: ■ <TABLE></TABLE> señala el inicio y el final de una tabla. ■ <TR></TR> indica una fila de la tabla. Las etiquetas <TR> se anidan dentro de un par de etiquetas <TABLE>. ■ <TD></TD> define el inicio y el final de una celda en una tabla. Las etiquetas <TD> se anidan dentro de un par de etiquetas <TR>. En el sitio de música, creará una tabla de dos columnas y tres filas: 1 Si es necesario, abra el Bloc de notas, WordPad o TextEdit, y después abra el archivo C:musicindex.html desde el procesador de texto. Si no ve el archivo index.html, recuerde comprobar que en el cuadro de lista Tipo de archivo aparece Todos los archivos (*.*). 2 En el archivo index.html, haga clic debajo de la etiqueta de apertura <BODY> (la etiqueta <BODY> debe contener ahora los atributos que agregó en la sección anterior), escriba <TABLE BORDER="1" WIDTH="100%" CELLPADDING="5" CELLSPACING="0"> y presione Entrar. Observe las comillas alrededor de los valores de los atributos. Compruebe que incluye comillas de apertura y de cierre en todo el fragmento. A continuación puede ver el propósito de cada uno de los atributos incluidos en la etiqueta <TABLE>: ■ BORDER define el ancho de la tabla en píxeles. Por ahora, estamos mostrando un borde de 1 píxel para ver la tabla mientras realiza el diseño. Una vez que se complete el diseño de la página, cambiará BORDER="1" por BORDER="0" para ocultar los bordes de la tabla en la página Web. ■ WIDTH define el ancho exacto de la tabla en píxeles o especifica el porcentaje de la ventana del explorador que ocupará la tabla. Nosotros usamos una tabla para dar formato a toda la página, así que su tamaño es del cien por cien del espacio de la ventana del explorador. ■ CELLPADDING crea un espacio (medido en píxeles) entre el contenido de la celda y el borde de la tabla. Después de probar algunos parámetros de espacio, encontramos que al añadir un valor de CELLPADDING igual "5" se conseguía el mejor efecto. Este tipo de opción ejemplifica lo que supone probar la configuración, guardar y obtener una vista previa de la página HTML durante el proceso de creación. Como ayuda, puede remitirse ■ CELLSPACING especifica la cantidad de espacio (en píxeles) a la figura 6-12 mientras entre celdas. En el sitio de música, no necesitamos especificar trabaja en todo el proceso ningún espacio entre las celdas, de forma que establecimos a de creación de la tabla. "0" el valor del atributo.

120 3 Escriba <TR> para comenzar con la primera fila de la tabla. 4 Presione Entrar, presione la tecla Tab para facilitar la lectura del código y escriba <TD VALIGN="top"> para empezar con la primera celda de la primera fila. El atributo VALIGN="top" indica que desea alinear el contenido de la celda en la parte superior de la misma (de forma predeterminada, se alinea el medio). Puede alinear el contenido de la celda con los valores top, middle, bottom o baseline. Además, de forma predeterminada, el contenido de la celda se alinea a la izquierda. (Más adelante mostramos cómo cambiar la alineación predeterminada y centramos el contenido dentro de una celda.) 5 Presione Entrar dos veces, presione la tecla Tab y escriba </TD> para marcar el final de la primera celda en la primera fila. 6 Presione Entrar dos veces, presione la tecla Tab y escriba <TD VALIGN="top"> para crear la segunda celda de la primera fila. 7 Presione Entrar dos veces, presione la tecla Tab y escriba </TD> para marcar el final de la segunda celda en la primera fila. 8 Presione Entrar y escriba </TR> para completar la primera fila de la tabla. 9 Presione Entrar y repita los pasos 3 a 8 para crear la segunda fila de la tabla (o copie y pegue todo el código desde la etiqueta <TR> hasta la etiqueta </TR> para crear una segunda fila, según se describe en la sugerencia). 10 Presione Entrar después de crear la segunda fila de la tabla y, a continuación, vuelva a escribir los comandos de los pasos 3 a 8 o copie y peque el código de la fila para crear una tercera. 11 Cuando haya especificado la tercera fila de la tabla, presione Entrar y escriba </TABLE> para completar sus etiquetas. Sugerencia Si prefiere no volver a escribir los comandos de la fila de la tabla cuando cree la segunda y tercera filas, haga clic antes del comando <TR> de la primera fila y arrastre para seleccionar todo el texto hasta el comando de cierre </TR>, incluido. A continuación, presione Ctrl+C para copiar el código seleccionado. Haga clic después del comando </TR>, presione Entrar y presione Ctrl+V para pegar el código HTML copiado en su documento de texto. Vuelva a presionar Ctrl+V para crear la tercera fila de la tabla.

121 Finalmente, agregará un atributo WIDTH a las dos etiquetas de celda (<TD>) de la primera fila de la tabla. Puede asignar el ancho de la columna como un porcentaje (por ejemplo, a la columna izquierda se le puede asignar el 50 por ciento de la ventana del explorador) o puede insertar una medida exacta en píxeles. De forma predeterminada, si no incluye el atributo WIDTH en las celdas de la tabla, el tamaño de las columnas de la tabla se calcula en función del tamaño del contenido de la celda y de la ventana del explorador. Tiene que agregar el atributo WIDTH sólo a una celda de una columna (y si tiene medidas que entren en conflicto en las celdas de la misma columna, el explorador usará la opción mayor de forma predeterminada). Para mantener nuestra configuración ordenada, agregaremos el atributo WIDTH a las celdas de la primera columna: Nota Si no define el ancho de las columnas de la tabla mediante el atributo WIDTH de las etiquetas <TD>, los exploradores calculan automáticamente su tamaño en función del elemento más ancho de cada una y del tamaño de la ventana del explorador. 1 En la primera celda de la primera fila, haga clic después de "top", presione la barra espaciadora y escriba WIDTH="170" para establecer el ancho de la columna a 170 píxeles. 2 En la segunda celda de la primera fila, haga clic después de "top", presione la barra espaciadora y escriba WIDTH="*". El asterisco en lugar de un número de píxeles indica que el explorador debe permitir que la segunda columna tenga el ancho necesario para que ocupe el ancho restante de la tabla. Puesto que el formato de esta tabla indica que su tamaño es del 100 por cien de la ventana del explorador, el asterisco indica al explorador que expanda la segunda columna para llenar el resto del área de su ventana. 3 Guarde su documento HTML. El código HTML debería ser similar al de la figura 6-12. Ahora que tiene una tabla, puede incluir contenido en ella. Lo primero que debe hacer es insertar el logotipo en la esquina superior izquierda.

122 Figura 6-12. El código de la tabla crea la estructura para el contenido de la página Web. (El código añadido de la tabla se muestra en color naranja.) Inserción y vinculación del logotipo Estamos creando el diseño de una página estándar, de modo que optamos por insertar el logotipo en la esquina superior izquierda (la más selecta). Pensamos usar la página principal como plantilla para todas las subpáginas, así que vamos a vincular el logotipo a la página principal. De esa forma, cuando use la página principal como plantilla, todas las subpáginas incluirán automáticamente un logotipo que se vincule a la página principal index.htm del sitio. Al insertar un logotipo, básicamente está insertando una imagen. Para insertar una imagen en un documento HTML, se utiliza la etiqueta <IMG> con el atributo SRC, que señala a un gráfico en particular. Por ejemplo, para especificar el logotipo del sitio de música, escribiría <IMG SRC="images/logo.gif">. De igual modo, al insertar el logotipo y darle formato como hipervínculo, se utilizan los mismos códigos HTML que al vincular cualquier gráfico. Por lo tanto, debe poner atención a los pasos siguientes: se descubrirá utilizando bastante estos comandos. En primer lugar, vamos a insertar el gráfico del logotipo (vincularemos el gráfico en breve): 1 Si es necesario, abra el procesador de texto y el archivo index.html.

123 2 En la primera celda de la primera fila, haga clic después de la etiqueta <TD VALIGN="top" WIDTH="170">, presione Entrar, presione Tab y escriba la siguiente etiqueta HTML, que señala a la imagen del logotipo: <IMG SRC="images/logo.gif" ALT="Instrucción musical de Chris" WIDTH="170" HEIGHT="68" BORDER="0"> Sugerencia Agregar espacios y saltos de línea en el código HTML no afectará a la apariencia de la página Web, por lo que no necesitará hacerlo en el documento HTML para que coincida con los ejemplos del texto. Nuestros ejemplos de texto tenían que acortarse para caber en el diseño de las páginas del curso. Su código se puede escribir como se muestra en las figuras de referencia de HTML del proyecto incluidas en esta lección. Con la excepción del atributo SRC, los atributos de la etiqueta <IMG> usados en el sitio de música son opcionales (aunque muy útiles) y se definen de la forma siguiente: ■ SRC especifica el nombre de archivo de la imagen (el origen de la imagen) que se tiene que mostrar. ■ ALT permite proporcionar texto descriptivo que aparece cuando el cursor se coloca sobre el área de la imagen. ■ WIDTH y HEIGHT especifican el ancho y alto de la imagen. Debería indicar el tamaño de las imágenes porque de ese modo los exploradores pueden mostrar la composición de la página Web con más facilidad y rapidez. Tenga en cuenta que, si cambia el tamaño de la imagen (por ejemplo, si la amplía o la reduce), debe hacerlo en el programa de edición de imágenes y no mediante los atributos WIDTH y HEIGHT del documento HTML; idealmente, preferirá que las imágenes tengan un tamaño lo más cercano posible al que se utilizará para mostrarlas en las páginas Web. ■ BORDER especifica el grosor del borde alrededor de la imagen. De forma predeterminada, se muestra un borde de 1 píxel alrededor de los gráficos que se han configurado como hipervínculos. Por lo general, los diseñadores cambian el valor predeterminado estableciendo el atributo BORDER como "0".

124 Jerga: un delimitador es el A continuación, dará formato a la imagen logo.gif para que actúe como componente de texto o hipervínculo a la página principal. Básicamente, la creación de un hipervínculo gráfico en el que se puede conlleva marcar un texto o gráfico como delimitador mediante el par de hacer clic en un hipervínculo o un área de destino etiquetas <A></A> alrededor del texto o la imagen que desea que actúe especificada dentro de un como hipervínculo y, a continuación, se especifica al explorador lo que debería documento. El texto del mostrarse cuando se haga clic en elemento delimitador. Para hacer que el delimitador se rodea con el par de etiquetas logotipo sea un hipervínculo, siga estos pasos: <A></A> 1 Haga clic antes de la etiqueta <IMG...> y escriba en los documentos HTML. <A HREF="index.html"> para especificar que cuando los usuarios hagan clic en el logotipo, se les dirigirá a la página principal. (Como se ha mencionado anteriormente, esta información de vinculación resultará práctica cuando copie la página principal para crear subpáginas.) 2 Haga clic después del paréntesis angular de cierre > de la etiqueta <IMG...> y escriba </A> para especificar el final del contenido del delimitador. Sugerencia Si usa el Bloc de notas y el código supera el filo de la ventana, abra el menú Formato y elija Ajusta de línea. Cuando se activa Ajuste de línea, el Bloc de notas ajusta automáticamente el texto y lo muestra todo en la ventana actual. 3 Guarde el archivo index.html. Su código HTML debería ser similar al mostrado en la figura 6-13. Figura 6-13. El código que ha agregado ahora inserta un logotipo y vincula su imagen a la página principal.

125 Inserción del gráfico de la pancarta de la página principal Una vez insertado el logotipo, insertar el gráfico de la pancarta de la página principal le resultará muy sencillo. Este paso conlleva insertar una imagen en la segunda celda de la primera fila de la tabla. No tendrá que vincular este gráfico, de modo que el procedimiento es bastante fácil. La única peculiaridad que presenta la inserción del gráfico de la pancarta es que tendrá que centrarlo dentro de la celda de la tabla, para lo que habrá que anidar la etiqueta <IMG> dentro del par de etiquetas <CENTER></CENTER>. Para insertar un gráfico de pancarta en la página principal, siga estos pasos: 1 Si es necesario, abra el procesador de texto y el archivo index.html. 2 En la segunda celda de la primera fila, haga clic después de la etiqueta <TD VALIGN="top" WIDTH="*">, presione Entrar, presione Tab y escriba lo siguiente: <CENTER><IMG SRC="images/t_home.gif" ALT="Instrucción musical de Chris Soll" WIDTH="415" HEIGHT="62" BORDER="0" ALIGN="middle"></CENTER> 3 Guarde el archivo index.html. Su código HTML debería ser similar al de la figura 6-14. Figura 6-14. El código de la imagen de pancarta especifica a los exploradores qué imagen se debería mostrar como pancarta en la página Web index.html.

126 4 Abra el archivo index.html en el explorador. (Si el archivo index.html ya está abierto en el explorador, haga clic en el botón Actualizar para actualizar la vista.) El explorador debería mostrar su versión del archivo index.html como se muestra en la figura 6-15. En ella, observe que los bordes de la tabla de la primera fila se ven alrededor de los gráficos insertados. Mantenga el cursor sobre el logotipo o gráfico de la pancarta para mostrar el texto ALT de la imagen. Sugerencia Debe guardar el documento HTML para poder ver los cambios del mismo en la ventana de un explorador. Si los cambios más recientes no se muestran en el explorador, compruebe que ha guardado su documento HTML. Si sigue sin verlos, haga clic en el botón Actualizar del explorador para asegurarse de que está viendo la versión más actualizada de su página. Figura 6-15. En este punto, el archivo index.html se ve en un explorador con el logotipo vinculado y el gráfico de pancarta de la página principal, que se colocan en su posición mediante una tabla. En la sección siguiente, comprobará cómo crear una barra de exploración que puede usar en todo el sitio de música.

127 Adición de vínculos de exploración La creación de una barra de exploración para el sitio de música implica insertar gráficos de botones y vincular cada gráfico a una página Web. Ya ha incluido el logotipo y el gráfico de la pancarta, de modo que sabe cómo usar la etiqueta <IMG>. Además, ha vinculado el logotipo, con lo que ya le resultan conocidas las etiquetas de delimitación <A></A>. La única parte ligeramente delicada del uso de botones de exploración en el sitio de música es que cada página muestra un botón personalizado para la página actual. Por ejemplo, siempre que un usuario visita la página principal, se muestra la versión negra del botón Página principal y cuando visita otra página del sitio, dicho botón se presenta en color rojo oscuro. Esta configuración se clarificará a medida que avance en esta lección. Para crear una barra de exploración en la página principal, siga estos pasos: 1 Si es necesario, abra el procesador de texto y el archivo index.html. Colocará la barra de exploración en la primera columna de la segunda fila de la tabla, con lo que se mostrará en el lateral izquierdo de la página. 2 Después de la segunda etiqueta <TR>, haga clic en la primera etiqueta <TD VALIGN="top">, presione Entrar, presione Tab y escriba para insertar una línea en blanco entre el gráfico de logotipo y la siguiente barra de exploración. En los siguientes pasos, incrustará la etiqueta de imagen de cada botón dentro de una etiqueta de delimitación que vincule el botón a una página Web denominada de forma apropiada. No ha creado las subpáginas aún, por lo que debe tomar nota de los nombres de archivo proporcionados en las etiquetas de delimitación. Los nombres de archivo de las subpáginas tendrán que coincidir con los de las referencias de los delimitadores. En total, necesita agregar siete botones. Comenzará agregando la versión de la página actual del botón Página principal. (Recuerde que descargó dos versiones de cada botón: la versión de la página actual de un botón tiene un “2” al final del nombre de archivo del botón.) 3 Presione Entrar, presione Tab y escriba lo siguiente: <A HREF="index.html"><IMG SRC="images/b_home2.gif" ALT="Página principal" WIDTH="170" HEIGHT="24" BORDER="0"></A> 4 Escriba para agregar dos líneas vacías, presione Entrar y presione Tab. Ahora puede introducir el vínculo y el gráfico del siguiente botón.

128 Sugerencia Puede escribir varias veces el código HTML con varias referencias de archivos HREF, nombres de archivo SRC e información ALT, o puede copiar el código que escribió en los pasos 3 y 4, y pegarlo en la celda de la tabla seis veces. A continuación, puede reemplazar las referencias de archivo HREF, los nombres de archivo SRC y las definiciones de texto ALT en cada entrada, como se muestra en la figura 6-16. 5 Escriba lo siguiente: <A HREF="lessons.html"><IMG SRC="images/b_lessons.gif" ALT="Lecciones" WIDTH="170" HEIGHT="24" BORDER="0"></A> 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> 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> 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> 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> 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> Observe que hay cuatro etiquetas al final del paso 10. Las líneas adicionales se incluyen porque también deseamos insertar el icono Envíenos una nota para ofrecer a los usuarios una forma sencilla de enviar mensajes de correo electrónico a

129 Chris. Cuando crea un vínculo de correo electrónico, usa un formato de HREF especial en la etiqueta de delimitación, como se explica a continuación. 11 Presione Entrar un par de veces para separar el código HTML de Envíenos una nota del código HTML de la barra de exploración principal, presione Tab y escriba <A HREF="mailto:mm@creationguide.com"> pero reemplace mm@creationguide.com con su propia dirección de correo electrónico para que los usuarios puedan abrir un mensaje de correo electrónico en blanco con su dirección cuando hagan clic en el icono Envíenos una nota. 12 Inserte el icono Envíenos una nota y escriba el texto siguiente para cerrar la referencia de delimitación: <IMG SRC="images/sendnote.gif" ALT="Correo electrónico para Chris" WIDTH="170" HEIGHT="77" BORDER="0"></A> 13 Guarde el archivo index.html. Su código HTML debería ser similar al mostrado en la figura 6-16. Figura 6-16. El código HTML de la barra de exploración se inserta en una celda de la tabla.

130 14 Abra el archivo index.html en el explorador. Su página principal debe incluir ahora una barra de exploración en la parte izquierda, como se muestra en la figura 6-17. Observe que el botón Página principal se muestra de forma diferente a los otros botones para indicar a los usuarios que están viendo la página principal. Haga clic en el logotipo y en el botón Página principal para comprobar que la página principal se vuelve a mostrar. (Al hacer clic en cualquier otro botón de la barra de exploración, se producirá un error porque aún no ha creado esas páginas.) Pase con el cursor sobre cada botón para comprobar que el texto ALT es correcto en cada caso. Haga clic en el icono Envíenos una nota para asegurarse de que se abre un mensaje de correo electrónico en blanco y se le envía. Figura 6-17. Puede probar parte de su código HTML si hace clic en el botón Página principal y en la imagen Envíenos una nota en la barra de exploración. Inserción de la información del pie de página A continuación, tiene que agregar la información del pie de página. El pie de Si necesita más ayuda, vea la figura 6-18 cuando inserte página del sitio de música incluye un gráfico de pie de página, información de la información del pie de la dirección y el número de teléfono, vínculos de texto que se corresponden con página del sitio Web. los vínculos de la barra de exploración y texto de copyright.

131 El proceso de inserción de un gráfico de pie de página es similar al de inserción del gráfico de encabezado descrito anteriormente en esta lección. La diferencia principal en el área del pie de página es que va a colocar el gráfico correspondiente en la segunda celda de la tercera fila y va a insertar cierta información adicional en la celda junto con el gráfico (según se describe en la sección siguiente). Puesto que va a incluir otra información debajo del gráfico del pie de página, anidará el gráfico dentro de las etiquetas de párrafo () para asegurarse de que se va a incluir ese espacio sobre el gráfico. Vamos a empezar a crear el elemento de pie de página insertando el gráfico de pie de página: 1 Si es necesario, abra el procesador de texto y el archivo index.html. 2 En la tercera fila de la tabla, haga clic después de la segunda etiqueta <TD VALIGN="top">, presione Entrar, presione Tab y, después, escriba para indicar el inicio de un párrafo y especificar que su contenido se alinee al centro. De forma predeterminada, los párrafos se alinean a la izquierda. 3 Especifique la información de la imagen del pie de página; para ello, inserte la etiqueta de imagen con los atributos siguientes: <IMG SRC="images/footer.gif" ALT="Instrucción musical de Chris Soll" WIDTH="415" HEIGHT="62" BORDER="0" ALIGN="middle"> 4 Escriba para indicar el final de la sección de párrafo. La etiqueta de cierre es opcional pero, si se agrega, se clarifica el código. Después, insertará un segundo párrafo que centre la información de la dirección y el número de teléfono. 5 Presione Entrar dos veces, presione Tab y escriba: Observe la etiqueta en el código HTML anterior entre el texto de la dirección y el número de teléfono. Al agregar la etiqueta , inserta un salto de página y muestra el número de teléfono debajo de la dirección en la línea siguiente. Ahora, agregará varios vínculos de texto en el área del pie de página que corresponde a los botones de la barra de exploración; de esa forma, si algún usuario tiene los gráficos desactivados, podrá seguir explorando su sitio. Para agregar vínculos de texto, debe seguir un procedimiento similar al de creación de vínculos gráficos. La diferencia entre ambas tareas es que debe encerrar el texto entre vínculos de delimitación en lugar de en una etiqueta IMG, como se muestra en los pasos siguientes. Primero, debe centrar el párrafo que contiene los vínculos de texto.

132 6 Presione Entrar dos veces, presione Tab y escriba . 7 Presione Entrar, presione Tab y escriba lo siguiente: <A HREF="index.html">Página principal</A> | En el vínculo anterior, las palabras Página principal se mostrarán como hipertexto en la página Web. Si los usuarios hacen clic en las palabras Página principal, se visualizará el archivo index.html. Observe también la barra vertical (|). Este símbolo se escribe entre cada vínculo de texto para facilitar su diferenciación. El símbolo es opcional pero se usa bastante. Ahora está preparado para agregar el resto de los vínculos de texto. Sugerencia No tiene que presionar Entrar y Tab entre cada una de las entradas de vínculos de texto en los pasos 8 a 14. Los exploradores mostrarán los vínculos en una fila independientemente del espacio que agregue en el documento HTML. Elegimos dar formato a los vínculos de texto del modo descrito para que trabajar con la información resultara más fácil. 8 Presione Entrar, presione Tab y escriba: <A HREF="lessons.html">Lecciones</A> | 9 Presione Entrar, presione Tab y escriba: <A HREF="recitals.html">Recitales</A> | 10 Presione Entrar, presione Tab y escriba: <A HREF="competitions.html">Concursos<A> | 11 Presione Entrar, presione Tab y escriba: <A HREF="performances.html">Actuaciones</A> | 12 Presione Entrar, presione Tab y escriba: <A HREF="background.html">Antecedentes</A> | 13 Presione Entrar, presione Tab y escriba: <A HREF="contact.html">Información de contacto</A> | La entrada final del vínculo de texto es el equivalente de texto del icono Envíenos una nota que insertó anteriormente. Por lo tanto, este vínculo de texto usa el componente mailto: en el atributo HREF. Recuerde reemplazar mm@creationguide.com con su dirección de correo electrónico en el paso siguiente. 14 Presione Entrar, presione Tab y escriba:

133 <A HREF="mailto:mm@creationguide.com">Correo electrónico para Chris</A> 15 Para completar el párrafo del vínculo de texto, presione Entrar, presione Tab y escriba . El componente final del pie de página es la información de copyright. En esta sección, crea un párrafo centrado y especifica la información de copyright. Una peculiaridad interesante aquí es que puede usar una referencia de una entidad de carácter especial para crear un símbolo de copyright. Sugerencia Una referencia de entidad de carácter es una combinación especial de teclas que incluye el símbolo Y comercial (&) y que le permite mostrar caracteres que no son estándar, como los acentos, los símbolos de marca registrada y otros, en las páginas Web. 16 Presione Entrar dos veces, presione Tab y escriba: &copy 2002 Chris Soll. Todos los derechos reservados 17 Guarde el archivo index.html. Su código HTML debería ser similar al mostrado en la figura 6-18. 18 Abra el archivo index.html en el explorador. El pie de página del archivo index.html debería tener una apariencia semejante a la información de pie de página en la página mostrada en la figura 6- 19. Figura 6-18. En el sitio de música, la información de pie de página se agrega a la última celda de la tabla.

134 Figura 6-19. Puede ver la forma en que un explorador interpreta el código HTML de pie de página si obtiene una vista previa de la página index.html del sitio de música. Puede que se haya cuenta de que ha diseñado todo lo que aparece en la página principal excepto el contenido básico. Le encantará oír que hay una razón. Ahora que tiene creada la estructura básica de la página principal y dado que piensa imitar dicha estructura en las subpáginas, puede utilizar el archivo index.html para crear rápidamente las páginas básicas en las subpáginas, según se describe en la sección siguiente. Copiar el marco de trabajo de la página principal para las subpáginas Probablemente, ya haya adivinado que necesitamos crear algunas páginas para vincularlas a la barra de exploración y a los vínculos de texto. En concreto, en el sitio de música se llama a las páginas siguientes: ■ index.html (en cuyo proceso de creación se encuentra inmerso) ■ lessons.html ■ recitals.html ■ competitions.html ■ performances.html ■ background.html ■ contact.html

135 En esta sección, va a crear las seis páginas HTML adicionales que conforman el sitio de música. Podría copiar todo el código de index.html, pegarlo en un documento de texto en blanco y a continuación guardar el documento en forma de archivo HTML, pero somos demasiado perezosos para eso. A continuación explicamos cómo nos las arreglamos para crear la mayor parte del código de las subpáginas: 1 Abra la carpeta C:music. 2 Haga clic con el botón secundario del mouse en el archivo index.html y haga clic en Copiar, en el menú contextual. 3 Haga clic con el botón secundario del mouse en la carpeta y haga clic en Pegar. 4 Repita cinco veces el paso 3 (de modo que tenga seis copias del archivo index.html). Su carpeta music debería ser similar a la mostrada en la figura 6-20. 5 Haga clic con el botón secundario del mouse en la primera copia de index.html, haga clic en Cambiar nombre en el menú contextual, escriba lessons.html y presione Entrar. Compruebe que cambia el nombre de los archivos copiados con precisión y con todas las letras en minúsculas; si cambia los nombres de los archivos en este momento, los vínculos que haya creado en su código HTML no funcionarán. Figura 6-20. Al copiar el archivo index.html seis veces se crean plantillas para sus seis subpáginas. 6 Con el procedimiento descrito en el paso 5, cambie el nombre de los archivos recitals.html, competitions.html, performances.html, background.html y contact.html. 7 Abra el procesador de texto, abra el archivo lessons.html y, después, realice los seis cambios siguientes, que se resaltan en color en la figura 6-21:

136 En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y escriba: Lecciones. ■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0". ■ En la segunda celda de la primera fila de la tabla, cambie t_home.gif por t_lessons.gif. También en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instrucción musical de Chris Soll" por el texto ALT="Lecciones". ■ En el código HTML de la barra de exploración, cambie el texto del botón Página principal b_home2.gif por b_home.gif. ■ Asimismo, en el código HTML de la barra de exploración, cambie el texto del botón Lecciones b_lessons.gif por b_lessons2.gif. Figura 6-21. Para usar una copia de index.html como subpágina, tiene que modificar ligeramente el código HTML y adaptar cada página. 8 Guarde el archivo lessons.html. El uso de una página de En este momento ha completado el documento básico para la página Lecciones. base rellenada para crear ¡No ha sido tan difícil! Para comprobar la página, haga doble clic en las subpáginas es un lessons.html con el objeto de ver la página en un explorador. Si todo parece procedimiento rápido y favorece la coherencia correcto (como se muestra en la figura 6-22), ya puede continuar. El siguiente en el sitio. paso es repetir el breve proceso de personalización en los documentos del resto de las subpáginas.

137 9 Abra el archivo recitals.html en el procesador de texto y haga los cambios siguientes: En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y escriba: Recitales. ■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0". ■ En la segunda celda de la primera fila de la tabla, cambie t_home.gif por t_recitals.gif. ■ También en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instrucción musical de Chris Soll" por el texto ALT="Recitales". ■ En el código HTML de la barra de exploración, cambie el texto del botón Página principal b_home2.gif por b_home.gif. ■ Asimismo, en el código HTML de la barra de exploración, cambie el texto del botón Recitales b_recitals.gif por b_recitals2.gif. 10 Guarde el archivo recitals.html. 11 Abra el archivo competitions.html en el procesador de texto y haga los cambios siguientes: En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y escriba: Concursos. ■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0". En la segunda celda de la primera fila de la tabla, cambie t_home.gif por t_competitions.gif. ■ También en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instrucción musical de Chris Soll" por el texto ALT="Concursos". ■ En el código HTML de la barra de exploración, cambie el texto del botón Página principal b_home2.gif por b_home.gif. ■ Asimismo, en el código HTML de la barra de exploración, cambie el texto del botón Concursos b_competitions.gif por b_competitions2.gif. 12 Guarde el archivo competitions.html. 13 Abra el archivo performances.html en el procesador de texto y haga los cambios siguientes: En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y escriba: Actuaciones. ■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0". ■ En la segunda celda de la primera fila de la tabla, cambie t_home.gif por t_performances.gif.

138 ■ También en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instrucción musical de Chris Soll" por el texto ALT="Actuaciones". En el código HTML de la barra de exploración, cambie el texto del botón Página principal b_home2.gif por b_home.gif. ■ Asimismo, en el código HTML de la barra de exploración, cambie el texto del botón Actuaciones b_performances.gif por b_performances2.gif. 14 Guarde el archivo performances.html. 15 Abra el archivo background.html en el procesador de texto y haga los cambios siguientes: En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y escriba: Antecedentes. ■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0". ■ En la segunda celda de la primera fila de la tabla, cambie t_home.gif por t_background.gif. ■ También en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instrucción musical de Chris Soll" por el texto ALT="Antecedentes". ■ En el código HTML de la barra de exploración, cambie el texto del botón Página principal b_home2.gif por b_home.gif. ■ Asimismo, en el código HTML de la barra de exploración, cambie el texto del botón Antecedentes b_background.gif por b_background2.gif. 15 Guarde el archivo background.html. 16 Abra el archivo contact.html en el procesador de texto y haga los cambios siguientes: En la etiqueta <TITLE>, haga clic después de la palabra Instrucción y escriba: Contacto. ■ En la etiqueta <TABLE>, cambie el atributo BORDER por "0". ■ En la segunda celda de la primera fila de la tabla, cambie t_home.gif por t_contact.gif. ■ También en la segunda celda de la primera fila de la tabla, reemplace el texto ALT="Instrucción musical de Chris Soll" por el texto ALT="Contacto". ■ En el código HTML de la barra de exploración, cambie el texto del botón Página principal b_home2.gif por b_home.gif. ■ Asimismo, en el código HTML de la barra de exploración, cambie el texto del botón Contacto b_contact.gif por b_contact2.gif.

139 17 Guarde el archivo contact.html. 18 Abra el archivo index.html en el explorador. Haga clic en cada botón de la barra de exploración para comprobar su trabajo. Cuando haga clic en un botón, debe mostrarse una página de base; cada subpágina tiene que incluir el texto de la barra de título de la página actual, un gráfico de pancarta del título personalizado y un botón de barra de exploración (en negro) de la página actual que se corresponda con la página mostrada. Además, en las subpáginas no deben mostrarse las líneas del borde de la tabla (ya que cambió el atributo BORDER en la etiqueta <TABLE> por "0" en cada subpágina). En la figura 6-22 se ilustra cómo se debe mostrar la página Lecciones en la ventana del explorador. Figura 6-22. Cada subpágina muestra ahora una pancarta de título personalizado y un botón negro “activo”. ¡Enhorabuena! Ha creado la estructura de todo el sitio de música. Ahora insertaremos algo de contenido en la página principal. Inserción de texto en el cuerpo de la página principal En esta sección, va a insertar un fragmento de texto en el cuerpo de la página principal del sitio de música. Este paso se reduce en realidad a practicar con el formato de texto. El contenido básico de la página principal consta de un par de encabezados, texto en un párrafo, citas coloreadas y una lista sin numerar vinculada. Por lo tanto, como puede imaginar, discutiremos cómo crear estos tipos de elementos en las páginas siguientes.

140 Creación de encabezados En el código HTML, puede definir seis niveles de encabezados mediante los pares de etiquetas <H1></H1>, <H2></H2> y sucesivamente hasta <H6></H6>, donde el tamaño del encabezado 1 es el mayor y el 6 el menor. La figura 6-23 ilustra un ejemplo de los diversos tamaños de los encabezados. Figura 6-23. Los encabezados HTML estándar tienen seis tamaños predeterminados. El sitio de música utiliza una etiqueta de encabezado en la página principal, que da formato al mensaje de bienvenida al principio de la página: 1 Abra el procesador de texto y el archivo C:musicindex.html. 2 En la segunda fila y la segunda celda de la tabla (la celda siguiente a la información de la barra de exploración), haga clic después de <TD VALIGN="top">, presione Entrar y presione la tecla Tab. En primer lugar, definirá el estilo de fuente para el texto del cuerpo de la celda: 3 Escriba lo siguiente: Observe en el paso 3 los tres nombres de fuente del atributo FACE. Dado que no sabe qué fuentes van a tener instaladas los usuarios en su sistema, debe proporcionar un plan de repuesto cuando defina los estilos de fuente. En el paso 3, si el equipo de un usuario tiene instalada la fuente Verdana, el explorador mostrará el texto del cuerpo siguiente en este estilo de fuente. Si Verdana no está instalada en el equipo del usuario, el explorador buscará la familia de la fuente Arial. Si ni Verdana ni Arial están instaladas en el sistema del usuario, el explorador mostrará el texto del cuerpo en un estilo Sans Serif. Si las fuentes enumeradas en la etiqueta de fuente no se encuentran en el equipo del usuario, el explorador mostrará el texto en su estilo de fuente predeterminado.

141 A continuación, agregará un salto de línea y un encabezado de bienvenida en la página principal del sitio de música. 4 Presione Entrar, presione Tab, escriba para agregar un salto de línea, presione Entrar, presione Tab y escriba la información de encabezado siguiente con el tamaño 3: <H3>Bienvenidos al recurso en línea de Chris Soll, donde se proporciona información de sus actuaciones e instrucción musical.</H3> 5 Guarde el archivo index.html. Su código debería ser similar al de la figura 6-24. Figura 6-24. El código agregado especifica un estilo de fuente e inserta un encabezado de tamaño 3. Adición de un párrafo de texto Después del encabezado de bienvenida que creó en la sección anterior, agregará texto al cuerpo. Las etiquetas son las básicas que usará al especificar texto en un párrafo, que es lo que va a hacer a continuación. 1 Haga clic después de la etiqueta </H3> que creó en la sección previa, presione Entrar, presione Tab y escriba ¡Conozcan a Chris!.

142 2 Presione Entrar, presione Tab y escriba lo siguiente: En su calidad de profesora de música con gran experiencia y reconocimiento internacional, enseña piano y flauta a músicos en ciernes, aficionados y profesionales. 3 Presione Entrar, presione Tab y escriba lo siguiente: Para complementar su considerado programa instructivo, realiza actuaciones regularmente en todo el mundo y, cada año, organiza recitales y concursos en los que participan sus alumnos. 4 Finalmente, presione Entrar, presione Tab y escriba lo siguiente: Sus testimonios resumen las bondades del éxito de la enseñanza de Chris: 5 Guarde el archivo index.html. Su código HTML debería ser similar al de la figura 6-25. Además, si obtiene una vista previa del archivo index.html en el explorador, la página principal debería parecerse a la de la figura 6-26. Su página está configurada casi por completo; sólo falta agregar una cita o dos, lo que constituye el tema de la sección siguiente. Figura 6-25. Este código muestra el texto del párrafo que se agrega a la página principal del sitio de música.

143 Figura 6-26. En este punto, en la página principal debería mostrarse el texto de los encabezados y del párrafo. Formato de las citas y color del texto Puede dar formato al texto como una cita para desplazarlo del texto que lo rodea. Generalmente, los exploradores interpretan las parejas de etiquetas <BLOCKQUOTE></BLOCKQUOTE> aplicando sangría a los márgenes izquierdo y derecho del texto incluido en ellas. Si realmente desea aplicar sangría al párrafo, puede anidar un comando de cita dentro de otro, como en este ejemplo: <BLOCKQUOTE><BLOCKQUOTE> </BLOCKQUOTE></BLOCKQUOTE>. En esta sección, creará citas con el texto en color rojo oscuro: 1 Abra el archivo index.html en un procesador de texto, si es necesario, haga clic después de Chris: en la segunda celda de la segunda fila de la tabla, presione Entrar dos veces y presione la tecla Tab. 2 Escriba <BLOCKQUOTE><BLOCKQUOTE> para crear una cita anidada dentro de otra. 3 Presione Entrar, presione Tab y escriba lo siguiente: Chris es, con mucho, la mejor profesora de música que he tenido. Me enseñó más de lo que podría haber aprendido en toda una vida con Viktor McTonedeaf, el profesor de Royal Music. Observe que el atributo COLOR de la etiqueta FONT se usa para modificar el color del texto del párrafo.

144 4 Presione Entrar dos veces, presione Tab y escriba lo siguiente: - Moe Zart 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: Chris Soll es la mejor profesora que tuve antes de que "un incidente" terminara mi carrera musical. Es una verdadera maestra. 6 Presione Entrar dos veces, presione Tab y escriba: - Vincent Vanngo 7 Presione Entrar, presione Tab y escriba para finalizar el formato de color de fuente rojo oscuro. 8 Presione Entrar dos veces, presione Tab y escriba </BLOCKQUOTE></BLOCKQUOTE> para finalizar la configuración e formato de cita. 9 Guarde el archivo index.html. El texto de la cita debería aparecer en su documento HTML como se ilustra en la figura 6-27. La figura 6-28 muestra el texto de la cita cuando se ve en un explorador. Figura 6-27. Se agregan citas a las páginas Web para desplazar el texto.

145 Figura 6-28. Para mostrar las citas, Internet Explorer aplica sangría al texto en los márgenes izquierdo y derecho.

146 Creación de una lista sin numerar vinculada El tipo final del texto que creará para la página principal del sitio de música es una lista sin numerar. Este tipo de lista aparece como lista con viñetas en una página Web, como se muestra en la figura 6-29. Figura 6-29. De forma predeterminada, las listas sin numerar se muestran con viñetas. Nota Puede usar los comandos HTML <OL></OL> para crear listas numeradas (ordenadas) o los comandos <UL></UL> para crear listas sin numerar (con viñetas). Cada elemento de estas listas se identifica mediante el par de etiquetas <LI></LI>. En esta sección, primero agregará un pequeño fragmento de texto que introduce la lista sin numerar y, después, creará la lista (que incluye vínculos a las páginas apropiadas): 1 Abra el archivo index.html en un procesador de texto, si es necesario, haga clic al final de </BLOCKQUOTE>, en la segunda celda de la segunda fila de la tabla, presione Entrar dos veces, presione Tab y, después, escriba el párrafo siguiente: Solicite recibir sus lecciones hoy y únase a la élite de pianistas y flautistas que estudian con una de las mejores profesoras de Norte América.

147 2 Presione Entrar dos veces, presione Tab y escriba lo siguiente: Información general del sitio En el paso 3, insertará la etiqueta <UL> para comenzar la lista sin numerar. 3 Presione Entrar dos veces, presione Tab y escriba <UL>. En los pasos 4 a 9, para crear los elementos de la lista, incluirá cada elemento dentro del par de etiquetas <LI></LI>. Asimismo, dará formato a la primera palabra de cada entrada de la lista como hipervínculo a otra página del sitio. 4 Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="lessons.html">Lecciones</A> Información sobre cómo recibir instrucción musical de Chris, incluyendo disponibilidad y cuotas.</LI> 5 Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="recitals.html">Recitales</A> Programas, alumnos que participan y títulos de las piezas representadas en los recitales de los alumnos.</LI> 6 Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="competitions.html">Concursos</A> Fechas, cuotas, normas, programas e información de la ceremonia de entrega de premios de los próximos concursos de alumnos.</LI> 7 Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="performances.html">Actuaciones</A> Calendario de las actuaciones personales de Chris Soll, que incluye fechas, ubicación, piezas e información de las entradas.</LI> 8 Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="background.html">Antecedentes</A> Formación, actuaciones y experiencia docente.</LI> 9 Presione Entrar, presione Tab y escriba lo siguiente: <LI><A HREF="contact.html">Contacto</A> Direcciones de correo electrónico, direcciones físicas, números de teléfono y vínculos de mapas que pueden ayudarle cuando solicite recibir las lecciones y desee asistir a las actuaciones o ponerse en contacto con Chris.</LI> 10 Presione Entrar, presione Tab y escriba </UL> para terminar la lista sin numerar. 11 Presione Entrar, presione Tab y escriba para completar el texto del cuerpo y finalizar la especificación de la familia de la fuente.

148 12 Guarde el archivo index.html. El código de la lista sin numerar debería ser similar al mostrado en la figura 6-30 (y su página index.html se debería parecer a la mostrada anteriormente en la figura 6-29). Figura 6-30. El código HTML resaltado incluye texto de los párrafos y una lista sin numerar, con hipervínculos. Por último, aunque no por ello con menor importancia, insertará una fotografía vinculada en el área del cuerpo de la página principal del sitio de música. Inserción y vinculación de una imagen En este momento, ya debería estar habituado a insertar y vincular gráficos. (¡Ha adquirido mucha práctica hace un momento mientras creaba la barra de exploración!) En esta página, preferimos mostrar la imagen debajo del encabezado de tamaño 3 en la parte derecha de la página. Además, puesto que la fotografía es una imagen de Chris, la vinculamos a la página Antecedentes. Para insertar una imagen vinculada dentro del texto del cuerpo de su página, siga estos pasos: 1 Abra el archivo index.html en un procesador de texto, si es necesario, haga clic después de la etiqueta </H3> en la segunda celda de la segunda fila de la tabla, presione Entrar dos veces y presione la tecla Tab.

149 2 Escriba la información de imagen y el vínculo siguientes: <A HREF="background.html"><IMG SRC="images/p_chris.jpg" ALT="pic: Chris Soll" WIDTH="170" HEIGHT="250" BORDER="0" HSPACE="25" VSPACE="10" ALIGN="right"></A> En este paso, puede ver algunos atributos añadidos a la etiqueta <IMG>, que se definen como sigue: ■ HSPACE le permite especificar espacio adicional (en píxeles) entre la imagen y el texto en los laterales izquierdo y derecho de la misma. ■ VSPACE permite especificar espacio adicional (en píxeles) entre la imagen y el texto por encima y por debajo de la imagen. ■ ALIGN indica que se alinee la imagen en la página y el texto se ajuste en consecuencia. En este ejemplo, la imagen se alinea en el lateral derecho de la página. 3 Guarde el archivo index.html. Finalizando la página principal Por último, debe quitar los bordes de la tabla en la página principal para poder anunciar que su proyecto está terminado. Además, debe comprobar los vínculos y ver todas las páginas con el fin de asegurarse de que el código HTML que ha escrito es correcto. Primero, vamos a deshacernos de los bordes en la página principal: 1 Abra el archivo index.html en un procesador de texto. 2 En la etiqueta <TABLE>, cambie el atributo BORDER de "1" a "0". 3 Guarde el archivo index.html. Ahora vamos a hacer clic en los vínculos, gráficos, texto ALT y otros elementos de la página, y los comprobaremos. Por ejemplo, tiene que asegurarse de que en ninguna de las páginas aparecen dos botones negros. 4 Abra el explorador, muestre index.html (o, si el documento ya está abierto en el explorador, haga clic en Actualizar) y, después, haga clic en cada vínculo (incluidas las imágenes vinculadas, el logotipo, el icono Envíenos una nota y los vínculos de texto) para comprobar que funcionan apropiadamente y que las páginas se muestran de forma correcta. Si algún vínculo no responde como se espera, abra el documento HTML correspondiente en el procesador de texto y compruebe el código HTML minuciosamente. Revise los gráficos de los botones y las pancartas para asegurarse de que ha incluido los apropiados en cada página.

150 Nota Puede que haya observado que sólo hemos proporcionado contenido para la página principal. En este momento, pensamos que está suficientemente preparado como para especificar el contenido del resto de las páginas si desea obtener más práctica en el uso de HTML. Uso del marco de trabajo del sitio de música como plantilla Después de todo el duro trabajo que le supuesto crear el sitio de música, deseamos que tenga una plantilla HTML útil que pueda personalizar con facilidad. Por lo tanto, vamos a contarle un pequeño secreto. Puede crear un sitio Web con la plantilla del sitio de música incluso si no tiene ningún gráfico. No es necesario que disponga de ninguna imagen de fondo, gráficos de pancartas ni botones. Por el contrario, puede crear un sitio Web con los vínculos de texto y los fondos en color si reemplaza los elementos de contenido en las páginas Web del sitio de música. En la figura 6-31 se ilustra una página Web que usa el sitio Web de música sin gráficos. Figura 6-31. Puede crear un sitio Web basado en texto que use el sitio de música como plantilla.

151 Sugerencia Los gráficos pequeños de la página de ejemplo de la figura 6-35 son imágenes prediseñadas que se descargan y se pegan conjuntamente para crear una imagen sencilla. Si prefiere no incluir ningún gráfico en la página, basta con que elimine la etiqueta <IMG> de su documento HTML. En la figura 6-32 se muestra la página de la plantilla y en la figura 6-33 se ilustra parte de su código fuente. Si desea agilizar el proceso cuando utilice una plantilla para crear una página personalizada, haga clic en el menú Ver y, después, en Código fuente para mostrar el código fuente de la plantilla. A continuación, en la ventana de código fuente, haga clic en el menú Archivo, haga clic en Guardar como y guarde el código fuente en el equipo. Ahora, puede modificar su versión local de la plantilla si reemplaza el texto marcador de posición con su contenido personalizado. Figura 6-32. Puede modificar la plantilla basada en texto para crear una página personalizada.

152 Figura 6-33. Puede copiar el código fuente de la plantilla para tener un buen punto de partida para el código de su página personalizada. Sugerencia En la figura 6-33, puede ver entradas de código HTML que comienzan con un signo de admiración y dos guiones: . Estos tipos de entradas se denominan comentarios. Los comentarios no se muestran en la página Web; se usan como notas que permiten a los desarrolladores etiquetar fragmentos del documento HTML. Los comentarios se han agregado a la plantilla de ejemplo para ayudarle a identificar los componentes HTML cuando personalice el código fuente. Finalmente, observe en la figura 6-33 que el atributo BGCOLOR de la etiqueta <BODY> se ha cambiado de blanco (#ffffff) a púrpura (#ccccff) y que la primera etiqueta <TD> de cada fila de la tabla contiene un atributo BGCOLOR configurado como dorado (#ffcc00). Puede usar el atributo BGCOLOR para colorear el fondo de la página además de las celdas de la tabla, si no usa ninguna imagen de fondo. Puede obtener una apariencia bastante creativa si aplica un color al fondo y colorea las celdas de la tabla selectivamente con otro color diferente. (No tiene que colorear igual todas las celdas de la tabla.)

153 Recursos adicionales Como hemos mencionado, abundan las páginas Web y los libros de HTML. A continuación indicamos algunos de nuestros recursos de HTML favoritos: ■ Castro, Elizabeth. HTML for the World Wide Web. 4ª edición ed. Berkeley, CA: Peachpit Press, 2000. (ISBN: 0-201-35493-4) Este libro muestra visualmente cómo usar la mayor parte de los comandos HTML. Las explicaciones son breves pero útiles cuando se usan conjuntamente con las referencias visuales. ■ Morrison, Michael. Faster Smarter HTML & XML. Redmond, WA: Microsoft Press, 2002. (ISBN: 0-7356-1861-5) Este libro se destina a los usuarios interesados pero inexpertos que deseen desarrollar páginas Web con HTML. Una característica agradable de este libro es que ofrece varias oportunidades de aprender de forma práctica. ■ Página de recursos de Creation Guide (www.creationguide.com/resources, en inglés) que se actualiza continuamente para incluir los recursos relacionados con el desarrollo Web más actuales. ■ El sitio Web del World Wide Web Consortium (www.w3.org, en inglés) es el sitio principal en línea para la mayor parte de las especificaciones de HTML más recientes. En el momento de redactar este documento, HTML 4.01 es la especificación aceptada. Use los vínculos Table of Contents, Elements y Attributes (Tabla de contenido, Elementos y Atributos, respectivamente) en la página para buscar los comandos HTML y su descripción. Puede encontrar una lista muy útil de elementos HTML en www.w3.org/TR/1999/REC-html401-19991224/index/elements.html (en inglés). ■ Web Developer’s Virtual Library (www.wdvl.com, en inglés) proporciona recursos, código de ejemplo y tutoriales para desarrolladores Web. ■ webmonkey (http//hotwired.lycos.com/webmokey/, en inglés) proporciona numerosos recursos para desarrolladores en línea.

154 Puntos clave ■ Los comandos HTML sirven como instrucciones que indican a un explorador cómo mostrar el contenido de una página Web. ■ Los comandos HTML aparecen entre marcas < >, que suelen venir en pares, y en ellos no se distinguen mayúsculas y minúsculas. ■ Las etiquetas HTML de apertura suelen contener atributos que permiten refinar sus instrucciones. ■ Las etiquetas estándar para los documentos HTML son las siguientes: ■ <!DOCTYPE...> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> ■ Si es posible, almacene todos los documentos y gráficos de un sitio Web dentro de la misma carpeta principal. Cree una carpeta de imágenes para los gráficos del sitio Web dentro de la carpeta principal. ■ Para hacerle la vida más fácil, idee un sistema de denominación de gráficos que le ayude a diferenciar los diversos tipos de imágenes, como los botones, pancartas, fotografías, etcétera. ■ Cuando cree páginas Web, guarde los documentos HTML y véalas en un explorador con frecuencia. ■ Compruebe siempre que ha incluido todos los paréntesis angulares (<>) y comillas ("") en el código. Si faltan elementos o los comandos HTML están mal escritos, la página puede mostrarse de forma inapropiada o no mostrarse en ningún explorador.

155 LECCIÓN 7 Creación de sitios Web con FrontPage Una vez completada esta lección, podrá:  Usar FrontPage para automatizar la creación de páginas Web.  Diseñar subpáginas a partir de una plantilla estándar, insertar tablas y agregar botones de exploración y pies de página.  Definir hojas de estilo en cascada (CSS) para dar formato a las páginas Web.  Crear mapas de imágenes y formularios para conseguir que un sitio sea más interactivo.  Utilizar FrontPage para crear una página principal. Cuando ve las noticias en la televisión, el único “equipamiento” que necesita es el aparato y un lugar donde sentarse. Pero ¿ y cuando alquila un vídeo o solicita una película de pago por visión que está repleta de estupendos efectos especiales y tiene una banda sonora imponente? En lugar de acudir a la televisión de 13 pulgadas de andar por casa, es probable que prefiera usar lo último en sistemas para entretenimiento doméstico: es decir, el exclusivo sistema que se puede controlar fácilmente mediante un único control remoto y que tiene una televisión de pantalla grande ultra nítida, con cable digital, estéreo Dolby y componentes de sonido envolvente, todo mezclado en las sombras y colocado estratégicamente para lograr una visualización óptica y una sensación acústica de lo más placenteros, entre los confortables pliegues de un enorme sofá de piel. Reconozcamos que estos “extras” no son estrictamente necesarios, pero, con seguridad, pueden marcar una gran diferencia en ocasiones. Lo mismo se puede decir de los editores HTML. El Bloc de notas (un procesador de texto básico) puede semejarse a la forma de crear páginas Web “con el televisión, la silla y el control remoto”, mientras que FrontPage proporciona la solución al estilo del “sistema de lujo para el entretenimiento doméstico” en el desarrollo de sitios Web. En esta lección, vamos a ocuparnos de los “extras”. Para crear las páginas Web descritas en esta lección, necesitará los siguientes “utensilios”: ■ Una copia de Microsoft FrontPage (preferiblemente la versión 2002). ■ 39 archivos de ejercicios, que se pueden encontrar en la subcarpeta Lesson07 de la carpeta Practice, en el disco duro. Estos archivos son mars.doc, thankyou.htm y 37 archivos gráficos que usará en el sitio Web que cree con FrontPage.

156 Para empezar a realizar las actividades de esta lección, siga estos pasos: 1 Cree una carpeta denominada “sky” en el disco duro. (Por comodidad, nos referiremos al disco duro como unidad C: en toda la lección.) 2 Copie los archivos mars.doc y thankyou.htm de la subcarpeta Lesson07 de la carpeta Practice a la carpeta C:sky que ha creado en el paso anterior. 3 Cree una carpeta images en C:sky y copie en ella los siguientes archivos gráficos (que se encuentran en la subcarpeta Lesson07 de la carpeta Practice, en el disco duro): b_aboutus.gif bg.gif mars.jpg b_aboutus2.gif bigdip1.gif neptune.jpg b_contact.gif bigdip2.gif saturn.jpg b_contact2.gif bigdip3.gif solarsystem.gif b_gallery.gif bigdip4.gif t_aboutus.gif b_gallery2.gif bigdip5.gif t_contact.gif b_links.gif bullet_star.gif t_gallery.gif b_links2.gif corner_botm_left.gif t_links.gif b_meetings.gif corner_botm_right.gif t_meetings.gif b_meetings2.gif corner_top_left.gif t_skyguide.gif b_skyguide.gif corner_top_right.gif titlebar-home.gif b_skyguide2.gif logo.gif titlebar.gif Planeamiento del sitio Web con FrontPage Cuando planeamos inicialmente el sitio del proyecto de esta lección, pretendíamos crear una página para un equipo de béisbol ficticio. Por desgracia, no pudimos sobornar lo suficiente a nuestros amigos para que posaran para la imagen del equipo, de modo que optamos por crear un sitio Web para un club de astronomía. Terminamos incorporando en él muchas de las funcionalidades que habíamos planeado originalmente para el sitio de béisbol. Por ejemplo, en lugar de hacer un mapa de imágenes de una fotografía del equipo en la que se podía hacer clic en la cabeza de cada persona para tener acceso a una página personal o de estadísticas, usamos un mapa de imágenes del sistema solar en la que se puede hacer clic en cada planeta para ver una página de información acerca de él. Esperamos que a medida que experimente con las técnicas que presentamos en este proyecto, comience a pensar formas de variarlas para crear sitios Web personalizados.

157 Tras determinar que el sitio de un club de astronomía se adaptaría a nuestros propósitos, decidimos que debería constar de una página principal personalizada vinculada a subpáginas con un formato estándar. El uso de una página principal diferente es una técnica de diseño común en los sitios Web, que se usa para hacer que la página principal destaque de las subpáginas. Dado que FrontPage ofrece tantas opciones, creímos que mostrar una página principal distinta sería una buena práctica de diseño y también nos permitiría enseñarle algunas características adicionales de FrontPage. Para ver nuestro proceso de planeamiento, eche un vistazo a las figuras 7-3 a 7-5. La figura 7-3 contiene un dibujo de la Osa mayor que sugerimos para la página principal. La figura 7-4 muestra el dibujo de la composición estándar de la subpágina. Y, finalmente, la figura 7-5 ilustra el esquema del sitio del club de astronomía. Figura 7-3. Esquema de la página principal del club de astronomía que muestra la Osa mayor y contiene vínculos a las subpáginas principales del sitio.

158 Figura 7-4. Dibujo de una subpágina típica del club de astronomía que ilustra que las subpáginas se estructurarán de forma diferente a la página principal.

159 Figura 7-5. El esquema del sitio Web del club de astronomía clarifica su jerarquía. Debido a la relativa complejidad de la página principal, va a crearla en último lugar. En este proyecto, para comenzar el proceso de diseño, consolidará la composición estándar del sitio para las subpáginas creando un documento subpágina.htm que puede usar como plantilla al crear las páginas del sitio. Pero, en primer lugar y antes de comenzar a crear páginas Web, debe indicarle a FrontPage que desea crear un nuevo “Web”.

160 Creación de un nuevo Web Como hemos mencionado en la sección anterior, el primer paso para diseñar un sitio Web es indicar su intención de crear páginas Web en FrontPage mediante la creación de un nuevo Web. Para ello, siga estos pasos: FrontPage hace referencia a 1 Compruebe que ha creado una carpeta denominada C:skyimages los sitios Web como Webs. en la que haya colocado las imágenes que copió de la subcarpeta Lesson07, que se encuentra en la carpeta Practice, en el disco duro. Además, debe asegurarse de que ha copiado los archivos mars.doc y thankyou.htm de la carpeta Lesson07 y los ha almacenado en C:sky. 2 Abra FrontPage y cierre el documento en blanco, si se muestra alguno. 3 Si el panel Página o Web no aparece, abra el menú Archivo, seleccione Nuevo y haga clic en Página o Web. 4 En la sección Nuevo, haga clic en la opción Sitio Web vacío y se abrirá el cuadro de diálogo Plantillas de sitio Web. Haga clic en el cuadro de texto Especifique la ubicación del nuevo sitio Web, resalte el texto existente, escriba C:sky o haga clic en Examinar y vaya a C:sky, y, a continuación, haga clic en Aceptar. Después de un breve proceso en el que FrontPage agrega Extensiones de servidor de FrontPage a la carpeta Web (C:sky), verá que la barra de título de FrontPage cambia a Microsoft FrontPage -C:sky, lo que significa que está preparado para la acción. 5 En la barra de vistas en el lateral izquierdo de la ventana de FrontPage, haga clic en el icono Informes. Aparece el resumen de un sitio. Este informe se presenta porque tiene gráficos almacenados en la carpeta C:skyimages y los archivos mars.doc y thankyou.htm almacenados en C:sky. Nota Aunque es conveniente tener preparadas de antemano todas las imágenes que piense usar en su sitio Web, no es necesario. Pero, puesto que los gráficos del club de la astronomía están ya disponibles (y dado que este curso trata de la creación de páginas Web y no de gráficos Web), puede simplificar la creación del Web en este proyecto (o de cualquier otro con respecto a esa cuestión) si organiza los gráficos del sitio antes de empezar a crearlo. 6 Haga clic en el icono Página de la barra de vistas y en el botón Crear una página normal nueva en la barra de herramientas estándar para abrir una página en blanco (observe que el texto de la barra de título de FrontPage cambia a Microsoft FrontPage - C:skypagina_nueva_1.htm). Ahora está listo para crear una subpágina estándar que puede usar como plantilla en el sitio Web del club de astronomía.

161 Creación de la composición de la subpágina En esta sección, creará la composición de una subpágina estándar que podrá copiar y usar con el fin de crear páginas de base para cada subpágina del sitio. En primer lugar, configurará las propiedades de página de la subpágina. Configuración de las propiedades de página Para empezar, compruebe que en FrontPage aparece un área de trabajo en blanco. Si siguió los pasos de la sección anterior, debe ver la página. A continuación se enumeran los pasos necesarios para crear una subpágina básica: 1 Haga clic con el botón secundario del mouse (ratón) en la página y seleccione Propiedades de página. Se abre el cuadro de diálogo Propiedades de página. 2 En el cuadro de texto Título, en la ficha General, escriba Club de la astronomía, como se ilustra en la figura 7-6. Para ver una vista en miniatura de una imagen seleccionada en el cuadro de diálogo Seleccionar imagen de fondo, haga clic en la flecha de lista desplegable Vistas en la barra de herramientas del cuadro de diálogo y seleccione Vista previa. Figura 7-6. Puede especificar el texto del título en el cuadro de diálogo Propiedades de página. 3 Haga clic en la ficha Fondo, active la casilla de verificación Imagen de fondo para especificar que desea que la página use una imagen de fondo y, después, haga clic en Examinar.

162 4 En el cuadro de diálogo Seleccionar imagen de fondo, haga doble clic en la carpeta images en C:sky y, después, haga clic en bg.gif, como se ilustra en la figura 7-7. 5 Haga clic en Abrir para seleccionar la imagen de fondo y vuelva al cuadro de diálogo Propiedades de página. Figura 7-7. Para asignar una imagen de fondo a la página Web, seleccione bg.gif en el cuadro de diálogo Seleccionar imagen de fondo. 6 Continuando en la ficha Fondo, haga clic en la casilla de verificación Habilitar efectos de conversión de hipervínculos y, después, haga clic en el botón Estilo de conversión. Se abre el cuadro de diálogo Fuente. En el área Fuente, conserve la selección (Fuente predeterminada) y, en el cuadro de texto Estilo de fuente, seleccione Normal. 7 Haga clic en el cuadro desplegable Color, haga clic en el cuadrado de color rojo (éste es el color predeterminado) y haga clic en Aceptar. Esta opción especifica que los vínculos de texto se muestren en rojo siempre que el cursor del mouse del usuario pase sobre el vínculo de texto. 8 Después, en la ficha Fondo, haga clic en la flecha de lista desplegable Fondo y haga clic en el cuadro de color negro, a continuación, haga clic en la flecha de lista desplegable Texto y en el cuadro de color negro.

163 Nota El paso 8 no contiene un error: debe establecer el color tanto del fondo como del texto en negro. En este proyecto, la mayor parte del texto que escriba se mostrará en las celdas de una tabla blanca, de modo que, para ahorrar tiempo posteriormente, debería configurar el color del texto predeterminado en negro incluso aunque el fondo también tenga configurado este color. Jerga: un hipervínculo activo 9 Haga clic en la flecha de lista desplegable Hipervínculo y en el hace referencia a un cuadro de color azul; haga clic en la flecha de lista desplegable hipervínculo en el que se ha Hipervínculo visitado y en el cuadro de color púrpura; a hecho clic. Si establece en rojo la propiedad de color continuación, haga clic en la flecha de lista desplegable para los hipervínculos activos, Hipervínculo activo y haga clic en el cuadro de color rojo. La un hipervínculo se mostrará ficha Fondo debería ser similar ahora a la de la figura 7-8. en rojo mientras el usuario haga clic en el vínculo. Figura 7-8. La ficha Fondo rellena muestra los colores predeterminados que seleccionó para la página Web actual.

164 Incluso aunque en el proyecto se usen los colores predeterminados para los hipervínculos, debería hacer clic en los cuadros de color de cada componente para reemplazar la configuración de color “automática” de cada elemento. Si no reemplaza los colores automáticos con los especificados, algunos exploradores podrían insertar colores personalizados para los hipervínculos que pueden no funcionar bien en su sitio; por ejemplo, si los hipervínculos “que visita” un usuario se configuran con el color negro, los vínculos desaparecerán en el fondo negro cuando los usuarios hagan clic en ellos. 10 Haga clic en Aceptar para implementar la configuración de Propiedades de página y cerrar el cuadro de diálogo Propiedades de página. Guardar su trabajo Antes de ir más lejos, debe guardar su trabajo. Podrá usar la misma configuración básica en todas las subpáginas, así que guardará la página que está creando en este momento como plantilla genérica que puede copiar para crear todas las subpáginas del sitio. Para guardar el archivo actual, siga estos pasos: 1 En el menú Archivo, haga clic en Guardar. 2 En el cuadro de diálogo Guardar como, haga clic en el botón Cambiar título (que se encuentra en la parte inferior derecha del cuadro de diálogo) para abrir el cuadro de diálogo Establecer título de la página y cambie el texto por Club de la astronomía: página genérica, como se muestra en la figura 7-9. A continuación, haga clic en Aceptar. Figura 7-9. El cuadro de diálogo Establecer título de página se configura para modificar el texto del título de una página. 3 En el cuadro Nombre de archivo, escriba subpágina y, a continuación, haga clic en Guardar.

165 Adición del logotipo y el gráfico de la pancarta de título En esta sección, continuará configurando la plantilla de las subpáginas; para ello, insertará el logotipo del club de astronomía y el gráfico de la pancarta de título, que aparecen en la parte superior de cada página: 1 En el documento C:skysubpágina.htm (que debe estar abierto en FrontPage si continúa con el proyecto a partir de la sección anterior), haga clic en el menú Insertar, seleccione Imagen y, después, elija Desde el archivo. Sugerencia Si cerró el documento subpágina.htm, puede volver a abrirlo si abre FrontPage, hace clic en el icono Abrir (o hace clic en Abrir en el menú Archivo), va a C:sky en el cuadro de diálogo Abrir y hace doble clic en subpágina.htm. 2 En el cuadro de diálogo Imagen, muestre el contenido de la carpeta de imágenes en C:skyimages, seleccione el archivo logo.gif y haga clic en Insertar (o, simplemente, haga doble clic en el archivo logo.gif). El logotipo (que es Saturno junto con algunas lunas) aparece en la página. 3 En la barra de herramientas estándar, haga clic en el botón Insertar imagen desde archivo y haga doble clic en el archivo titlebar.gif. La imagen de la barra de título se inserta junto al logotipo. 4 Haga clic con el botón secundario del mouse en la imagen logo.gif (la imagen de Saturno), seleccione Propiedades de imagen, haga clic en la ficha General, haga clic en el cuadro Texto de la sección Representaciones alternativas, escriba Logotipo del Club de la astronomía y haga clic en Aceptar. 5 Haga clic con el botón secundario del mouse en la imagen titlebar.gif, seleccione Propiedades de imagen, haga clic en la ficha General, haga clic en el cuadro Texto de la sección Representaciones alternativas, escriba Club de la astronomía y haga clic en Aceptar. 6 Vuelva a hacer clic con el botón secundario del mouse en la imagen del logotipo, seleccione Hipervínculo, escriba index.htm en el cuadro de texto Dirección y haga clic en Aceptar.

166 En este punto, el logotipo se vincula a la página principal (futura) y ambos gráficos se insertan y se alinean a la izquierda, de forma predeterminada. En la mayor parte de los exploradores, la alineación a la izquierda ayudará a mantener los gráficos juntos pero puesto que las dos imágenes ocupan la parte superior de la página, la barra de título podría ajustarse en la línea siguiente en algunos exploradores, si los usuarios cambian el tamaño de la ventana de su explorador por uno muy pequeño, en cuyo caso el logotipo se mostraría en la línea superior y la barra de título se desplazaría a la izquierda debajo del gráfico del logotipo en la línea siguiente, efecto que no es el que se persigue en este sitio Web. Sólo para asegurarnos, puede agregar las etiquetas HTML que impiden realizar un salto de línea () al código fuente de la página con el fin de especificar que los dos gráficos se deben mantener juntos independientemente del tamaño de la ventana del explorador. 7 En FrontPage, haga clic en la opción de vista HTML. El código fuente HTML se muestra en la ventana del área de trabajo de FrontPage. Antes de agregar las etiquetas , vamos a facilitar el trabajo en FrontPage haciendo que ajuste el texto del código. 8 Haga clic en Herramientas, haga clic en Opciones de página y muestre la ficha Código fuente HTML. 9 En la sección General, haga clic en Cambiar el formato con las reglas siguientes, active la casilla de verificación Permitir saltos de línea dentro de etiquetas en la sección Formato y haga clic en Aceptar. Ahora podrá ver el código HTML sin tener que desplazarse a la izquierda y a la derecha demasiado, lo que significa que ya puede agregar las etiquetas . 10 En el código fuente, haga clic después de la etiqueta de apertura de párrafo (), escriba , haga clic antes de la etiqueta de cierre de párrafo () y escriba . La figura 7-10 muestra las etiquetas HTML recién agregadas (en color naranja) que garantizarán que los gráficos se muestren siempre uno junto al otro.

167 Figura 7-10. Al agregar las etiquetas y al código fuente de una página, se asegura de que un salto de línea no separe elementos particulares. 11 Haga clic en Guardar (el código en mayúsculas cambiará automáticamente y se pondrá en minúsculas) y, después, haga clic en la ficha vista Normal para volver a mostrar la representación gráfica de subpágina.htm en su área de trabajo. La página debería ser similar a la de la figura 7-11. Figura 7-11. En este punto, el archivo subpágina.htm incluye imágenes de fondo, del logotipo y de la barra de título.

168 Inserción de una tabla En esta sección, creará la tabla de base que se usa para contener el texto del cuerpo de cada subpágina en el sitio Web del club de astronomía. Tómese su tiempo en los pasos siguientes: es más fácil configurar la tabla correctamente la primera vez que intentar buscar una configuración errónea. Además, aunque podría parecer que esta sección incluye muchos pasos, éstos son bastante repetitivos, de modo que el proceso no es demasiado complejo. (En otras palabras, no deje que la cantidad de pasos le abrume.) Cuando cree sus propias tablas, probablemente tenga que experimentar con algunas configuraciones antes de conseguir que le gusten, que es exactamente lo que nosotros hacemos también. Para crear su tabla en este proyecto, siga estos pasos: 1 Presione la tecla de flecha abajo una vez para colocar el cursor debajo del gráfico y presione Mayús+Entrar para colocar el cursor donde desee insertar la tabla. 2 En la barra de herramientas estándar, haga clic en el botón Insertar tabla, arrastre para seleccionar dos filas y cinco columnas de cuadros en la ventana emergente y, después, suelte el botón para insertar la tabla en la página. En la figura 7-12 se ilustra el proceso de creación de la tabla. Como puede ver, los bordes se muestran cuando inserta por primera vez una tabla. En efecto, los bordes de la tabla están configurados para mostrarse con 1 píxel de ancho. Después, cuando rellene la tabla, cambiará la configuración de los bordes con el valor cero (0) para ocultar las líneas. Figura 7-12. De forma predeterminada, FrontPage crea las tablas con un borde de 1 píxel.

169 3 Haga clic con el botón secundario del mouse en alguna parte de la tabla, elija Propiedades de tabla, compruebe que Margen de celdas desde el borde al texto está configurado como 0, Espaciado entre celdas está configurado como 0, Especificar ancho está configurado como 100 por cien, la opción Tamaño en Bordes está configurado como 1 y haga clic en Aceptar. 4 Haga clic con el botón secundario del mouse en la fila 1, columna 1. En el menú contextual, seleccione Propiedades de celda. 5 En el cuadro de diálogo Propiedades de celda, configure la opción Alineación horizontal como Centrar, la opción Alineación vertical como Superior, compruebe que la casilla de verificación Especificar ancho está activada, escriba 130 en el cuadro de texto Especificar ancho y seleccione la opción En píxeles, como se muestra en la figura 7-13. Figura 7-13. El cuadro de diálogo Propiedades de celda se usa para configurar una celda de una tabla.

170 6 Haga clic en Aceptar para activar la configuración. ¡No olvide guardar con 7 Haga clic con el botón secundario del mouse en la fila 2, columna frecuencia su trabajo! 1. En el menú contextual, seleccione Propiedades de celda. 8 En el cuadro de diálogo Propiedades de celda, configure la opción Alineación horizontal como Centrar, Alineación vertical como Inferior, Especificar ancho como 130 píxeles, active la casilla de verificación Especificar alto, configure la opción Especificar alto como 15 píxeles y haga clic en Aceptar. 9 Haga clic con el botón secundario del mouse en la celda de la fila 1, columna 2. Seleccione Propiedades de celda. Configure la opción Alineación horizontal como Izquierda, la opción Alineación vertical como Superior, la opción Especificar ancho como 1 píxel y haga clic en Aceptar (no se preocupe si no ve un cambio en la tabla en este momento, la celda no cambiará de tamaño hasta que también le dé formato debajo). 10 Haga clic con el botón secundario del mouse en la celda de la fila 2, columna 2. Seleccione Propiedades de celda. Configure la opción Alineación horizontal como Izquierda, la opción Alineación vertical como Inferior, la opción Especificar ancho como 1 píxel, active la casilla de verificación Especificar alto, configure la opción Especificar alto como 15 píxeles y haga clic en Aceptar. (Ahora la segunda columna de la tabla debe tener 1 píxel de ancho.) 11 Haga clic con el botón secundario del mouse en la celda de la fila 1, columna 3. En el menú contextual, seleccione Propiedades de celda, configure la opción Alineación horizontal como Izquierda, la opción Alineación vertical como Superior, la opción Especificar ancho como 15 píxeles, especifique Color de fondo como Blanco y haga clic en Aceptar. 12 Haga clic con el botón secundario del mouse en la celda de la fila 2, columna 3. En el menú contextual, seleccione Propiedades de celda, configure la opción Alineación horizontal como Izquierda, la opción Alineación vertical como Inferior, la opción Especificar ancho como 15 píxeles, haga clic en la casilla de verificación Especificar alto, configure la opción Especificar alto como 15 píxeles, especifique Blanco como Color de fondo y haga clic en Aceptar. 13 Haga clic con el botón secundario del mouse en la celda de la fila 1, columna 4. En el menú contextual, seleccione Propiedades de celda, configure Alineación horizontal como Izquierda, Alineación vertical como Superior, desactive la casilla de verificación Especificar ancho (no establezca ningún ancho para esta columna porque tendrá que cambiar el tamaño de forma que quepa en la ventana del explorador de cada usuario), especifique Blanco como Color de fondo y haga clic en Aceptar.

171 14 Haga clic con el botón secundario del mouse en la celda de la fila 2, columna 4. En el menú contextual, seleccione Propiedades de celda, configure la opción Alineación horizontal como Izquierda, la opción Alineación vertical como Inferior, desactive la casilla de verificación Especificar ancho, active la casilla de verificación Especificar alto, configure la opción Especificar alto como 15 píxeles, especifique Blanco como Color de fondo y haga clic en Aceptar. 15 Haga clic con el botón secundario del mouse en la celda de la fila 1, columna 5. En el menú contextual, seleccione Propiedades de celda, configure la opción Alineación horizontal como Derecha, la opción Alineación vertical como Superior, la opción Especificar ancho como 15 píxeles, especifique Blanco como Color de fondo y haga clic en Aceptar. 16 Haga clic con el botón secundario del mouse en la celda de la fila 2, columna 5. En el menú contextual, seleccione Propiedades de celda, configure la opción Alineación horizontal como Derecha, la opción Alineación vertical como Inferior, la opción Especificar ancho como 15 píxeles, la opción Especificar alto como 15 píxeles, especifique Blanco como Color de fondo y haga clic en Aceptar. La tabla ahora debería ser similar a la mostrada en la figura 7-14. Figura 7-14. Puede modificar la composición interna de una tabla si ajusta las propiedades de las celdas. Observe en la figura 7-14 que el grupo de celdas de la derecha de la tabla se presenta como un área rectangular de color blanco. Ahora va a agregar gráficos pequeños a las celdas de la esquina del área de color blanco para crear la ilusión de que la tabla tiene esquinas redondeadas:

172 17 Haga clic en la celda de la fila 1, columna 3. En el menú Insertar, seleccione Imagen y elija Desde el archivo. Seleccione la imagen corner_top_left.gif en la carpeta C:skyimages y haga clic en Insertar. Sugerencia Para hacerse una idea de cómo quedan los gráficos en la esquina, vea los gráficos curvos pequeños en un programa de pintura u obtenga una vista previa de la imagen en el cuadro de diálogo Insertar imagen. Puede imaginar fácilmente el modo en que la curva pequeña puede crear la ilusión de una esquina redondeada cuando se inserta en la celda de una tabla. 18 Haga clic en la celda de la fila 2, columna 3. Haga clic en Insertar imagen desde archivo en la barra de herramientas estándar y haga doble clic en la imagen corner_botm_left.gif en la carpeta C:skyimages. 19 Haga clic con el botón secundario del mouse en la imagen corner_botm_left.gif recién insertada. En el menú contextual, haga clic en Propiedades de imagen, haga clic en la ficha Apariencia, si es necesario, seleccione Inferior en la lista desplegable Alineación y haga clic en Aceptar. 20 Haga clic en la celda de la fila 1, columna 5 (dado que dio formato a la celda para alinear la información a la derecha, el cursor aparecerá a la derecha de la celda). Haga clic en Insertar imagen desde archivo en la barra de herramientas estándar y haga doble clic en la imagen corner_top_right.gif en la carpeta C:skyimages. 21 Haga clic en la celda de la fila 2, columna 5. Haga clic en Insertar imagen desde archivo y haga doble clic en la imagen corner_botm_right.gif en la carpeta C:skyimages. 22 Haga clic con el botón secundario del mouse en la imagen corner_botm_right.gif recién insertada. En el menú contextual, haga clic en Propiedades de imagen, haga clic en la ficha Apariencia, si es necesario, seleccione Inferior en la lista desplegable Alineación y haga clic en Aceptar.

173 23 Haga clic en Guardar en la barra de herramientas. En este punto, su tabla debería mostrarse como en la figura 7-15. Figura 7-15. Los gráficos pequeños agregados a las celdas de la tabla crean la apariencia de que las esquinas son redondeadas. Adición de botones de exploración Ahora que la tabla está creada, puede empezar a rellenar sus celdas. En primer lugar, hay que agregar algunos botones de exploración a la primera columna. FrontPage ofrece algunos botones con efectos especiales bonitos, que va a usar en este proyecto: 1 Haga clic en la celda de la fila 1, columna 1. 2 En el menú Insertar, seleccione Componente Web, seleccione Efectos dinámicos en la sección Tipo de componente, elija Botón activable en la sección Elegir un efecto (observe que la descripción del componente se muestra a continuación de los cuadros de lista en el cuadro de diálogo Insertar componente Web; a medida que haga clic en los efectos, la descripción cambia) y haga clic en Finalizar.

174 3 Configure el cuadro de diálogo Propiedades de botón activable, como se muestra en la figura 7-16, con las opciones siguientes: Opción Valor Texto de botón Página principal Vincular a index.htm Color del botón Azul marino Efecto Brillo Ancho 120 Color de fondo Automático Color de efecto Azul Alto 24 Figura 7-16. FrontPage permite crear botones activables si configura el cuadro de diálogo Propiedades de botón activable. 4 Haga clic en Aceptar. 5 Presione Entrar. En la barra de herramientas estándar, haga clic en Componente Web, compruebe que las opciones Efectos dinámicos y Botón activable están seleccionadas, y haga clic en Finalizar. Escriba Acerca de nosotros en el cuadro de texto Texto de botón, escriba aboutus.htm en el cuadro de texto Vincular a, especifique el resto de las opciones según se indica en el paso 3 y haga clic en Aceptar. 6 Presione Entrar. Haga clic en Componente Web, compruebe que las opciones Efectos dinámicos y Botón activable están seleccionadas y haga clic en Finalizar. Escriba Contactar en el cuadro de texto Texto de botón, escriba contact.htm en el cuadro de texto Vincular a, especifique el resto de las opciones según se indica en el paso 3 (que es la predeterminada) y haga clic en Aceptar.

175 7 Presione Entrar. Haga clic en Componente Web, compruebe que las opciones Efectos dinámicos y Botón activable están seleccionadas y haga clic en Finalizar. Escriba Reuniones en el cuadro de texto Texto de botón, escriba meetings.htm en el cuadro de texto Vincular a, especifique el resto de las opciones según se indica en el paso 3 y, después, haga clic en Aceptar. 8 Presione Entrar. En el menú Insertar, haga clic en Componente Web, compruebe que las opciones Efectos dinámicos y Botón activable están seleccionadas, y haga clic en Finalizar. Escriba Mapa del cielo en el cuadro de texto Texto de botón, escriba skyguide.htm en el cuadro de texto Vincular a, especifique el resto de las opciones según se indica en el paso 3 y, después, haga clic en Aceptar. 9 Presione Entrar. Haga clic en Componente Web, compruebe que las opciones Efectos dinámicos y Botón activable están seleccionadas y haga clic en Finalizar. Escriba Galería de fotos en el cuadro de texto Texto de botón, escriba gallery.htm en el cuadro de texto Vincular a, especifique el resto de las opciones según se indica en el paso 3 y haga clic en Aceptar. 10 Presione Entrar. Haga clic en Componente Web, compruebe que las opciones Efectos dinámicos y Botón activable están seleccionadas y haga clic en Finalizar. Escriba Vínculos de astronomía en el cuadro de texto Texto de botón, escriba links.htm en el cuadro de texto Vincular a, especifique el resto de las opciones según se indica en el paso 3 y, después, haga clic en Aceptar. 11 Haga clic en Guardar. La subpágina debería verse en las vistas Normal y Vista previa como se ilustra en la figura 7-17. Figura 7-17. La tabla y los botones de exploración se ven en la vista Normal pero todavía no en Vista previa.

176 Como puede ver en la figura 7-17, FrontPage 2002 tropieza con un pequeño fallo técnico cuando se insertan los botones activables; básicamente, no puede obtener una vista previa de ellos en la pantalla Vista previa de forma automática (observe las imágenes de vínculo erróneo en la pantalla de Vista previa que se ven en la figura 7-17). Con el tiempo, Microsoft podría ofrecer una revisión para corregir esto pero, por ahora, dispone de dos opciones para evitar este problema: ■ Para obtener una vista previa de sus imágenes en el explorador, seleccione Vista previa en el explorador en el menú Archivo, elija el explorador que desee usar y haga clic en Vista previa. ■ Modifique el código de cada botón activable para corregir el problema. Si elige obtener una vista previa de sus páginas Web en el explorador durante el resto de este ejercicio, siga adelante, omita la siguiente sección y elija Vista previa en el explorador, en el menú archivo, o haga clic en el botón Vista previa en el explorador, en la barra de herramientas estándar, cada vez que le sugiramos que puede ver su página Web. Si prefiere retocar el código HTML un poco para evitar que se abra el explorador en la lección, a continuación le indicamos cómo. Los pasos son fáciles de seguir y constituyen un primer ejemplo que ilustra cómo conocer un poco de código HTML puede servir de ayuda cuando se trabaja con editores HTML. 12 Haga clic en HTML en la parte inferior de la ventana para mostrar el código HTML de su página. El código de cada botón activable aparece entre un par de etiquetas <applet> </applet>, de modo que debe ver siete de estos pares en HTML. Puede indicar a qué botón se aplica un subprograma si observa el atributo value del parámetro que define el texto del botón. Por ejemplo, a continuación puede ver todo el código del subprograma de un botón; observe que la quinta línea indica que se aplica al botón Página principal: <applet code="fphover.class" codebase="./" width="120" height="24"> <param name="color" value="#000080"> <param name="hovercolor" value="#0000FF"> <param name="textcolor" value="#FFFFFF"> <param name="text" value="Página principal"> <param name="effect" value="glow"> <param name="url" valuetype="ref" value="index.htm"> </applet>

177 El problema en este código de botón activable radica en el atributo codebase="./" de la primera línea de cada etiqueta <applet>. Este atributo le indica a FrontPage que busque el archivo fphover.class en un subdirectorio. En realidad, FrontPage almacena este archivo de clases en la misma carpeta que su página Web, con lo que no es necesario que los exploradores lo busquen en un subdirectorio. Aunque esta explicación podría sonar un poco obtusa, la solución es simple: sólo debe eliminar codebase="./" de cada etiqueta <applet> (vea la figura 7-18, donde hemos resaltado algunas de las apariciones del atributo codebase="./"), como se describe a continuación. 13 En la primera etiqueta <applet>, seleccione codebase="./" como se muestra en la figura 7-18 y presione la tecla Retroceso (o haga clic con el botón secundario del mouse y elija Eliminar). 14 Repita el paso 13 en el código del subprograma de cada botón (recuerde: tiene siete botones, por lo que debería eliminar codebase="./" siete veces). 15 Guarde su archivo y haga clic en Vista previa en la parte inferior de la ventana de FrontPage. Cuando haya guardado los cambios del código, los botones activables se deberían ver en el modo Vista previa tal como se esperaba. Figura 7-18. Si desea obtener una vista previa de los botones activables en el modo Vista previa de FrontPage, tiene que retocar ligeramente el código de cada botón.

178 Sugerencia Si encuentra problemas mientras trabaja en FrontPage (o en cualquier otra aplicación de Microsoft), un recurso fantástico al que puede acudir es Microsoft Knowledge Base en línea. Para tener acceso a Knowledge Base, visite http:/ support.microsoft.com/default.aspx?LN=ES en el explorador y haga clic en el vínculo Buscar en Knowledge Base. Adición de la información del pie de página debajo de la tabla Los componentes finales que va a agregar a la plantilla de la subpágina antes de empezar a crear páginas de sitios reales son los elementos de la parte inferior de la página: una barra de exploración de texto e información de copyright. Como explicamos anteriormente en este curso, las páginas Web deben incluir vínculos de exploración de texto para los usuarios que desactivan los gráficos o tienen acceso al Web con exploradores que no los admiten. Asimismo, debería incluir información de copyright para proteger su creación. Si desea agregar información al final de la página en el sitio Web del club de astronomía, siga estos pasos: 1 En la vista Normal, haga clic en el área a continuación de la tabla, haga clic en la flecha de lista desplegable en el botón Color de fuente de la barra de herramientas Formato y haga clic en el cuadro del color blanco. 2 Escriba (incluyendo los caracteres de barra vertical) Página principal | Acerca de nosotros | Contactar | Reuniones | Mapa del cielo | Galería de fotos | Vínculos 3 Seleccione la línea o el texto que ha escrito, muestre la lista desplegable en la barra de herramientas Formato y elija Comic Sans (o Comic Sans MS). 4 Haga clic en el botón Centrar de la barra de herramientas Formato para centrar el texto. 5 Haga clic al final de la línea de texto, presione Entrar y escriba ¿Tiene cuestiones o comentarios acerca del sitio Web? Envíe un mensaje de correo electrónico al administrador del Web. 6 Presione Entrar, muestre la lista desplegable Tamaño de fuente en la barra de herramientas Formato, elija 1 (8 pt) y, después, escriba Copyright [el año actual] – [su nombre o el nombre de su organización]. 7 Presione Entrar y haga clic en Guardar en la barra de herramientas estándar.

179 También puede presionar Ahora puede vincular el texto de la barra de exploración y agregar un Alt+Ctrl+K para abrir el vínculo Enviar correo a al texto Envíe un mensaje de correo electrónico al cuadro de diálogo Insertar administrador del Web: hipervínculo. 8 Seleccione Página principal en la barra de exploración de texto, haga clic con el botón secundario del mouse en el texto seleccionado y haga clic en Hipervínculo. 9 En el cuadro de diálogo Insertar hipervínculo, compruebe que en la lista desplegable Buscar en aparece sky, haga clic en el cuadro de texto Dirección, escriba index.htm (asegúrese de eliminar http:// si aparece), como se muestra en la figura 7-19, y haga clic en Aceptar o presione Entrar. Si desea agregar información de pantalla a sus hipervínculos, haga clic en el botón Información de pantalla en el cuadro de diálogo Insertar hipervínculo. Figura 7-19. El cuadro de diálogo Insertar hipervínculo permite configurar fácilmente hipervínculos en FrontPage. 10 Repita los pasos 8 y 9 con los parámetros siguientes: Seleccione y haga clic Especifique en el con el botón secundario cuadro de texto del mouse Dirección Acerca de nosotros aboutus.htm Contactar contact.htm Reuniones meetings.htm Mapa del cielo skyguide.htm Galería de fotos gallery.htm Vínculos links.htm

180 11 Seleccione el texto Envíe un mensaje de correo electrónico al administrador del Web, haga clic con el botón secundario del mouse en el texto seleccionado y haga clic en Hipervínculo para abrir el cuadro de diálogo Insertar hipervínculo. 12 En el cuadro de diálogo Insertar hipervínculo, haga clic en el botón Dirección de correo electrónico en la sección Vincular a, según se ilustra en la figura 7-20. Figura 7-20. Puede crear hipervínculos que abran automáticamente un formulario de mensaje con una dirección predeterminada. 13 Especifique su dirección de correo electrónico en el cuadro de texto Dirección de correo electrónico, escriba Club de la astronomía en el cuadro de texto Asunto (vea la figura 7-20), haga clic en Aceptar y, después, guarde su trabajo. La parte inferior de la plantilla de la subpágina debería ser similar a la de la figura 7-21, que se muestra en la pantalla Vista previa (recuerde: si no modificó el código del subprograma del botón activable, tendrá que elegir Vista previa en el explorador, en el menú Archivo, para que la vista previa de la página Web de la subpágina se vea correctamente). Observe igualmente que la fecha de copyright y el nombre de la organización dependerán de la información que suministre.

181 Figura 7-21. La información del pie de página de la subpágina proporciona a los visitantes vínculos de texto, acceso al administrador del Web e información de copyright. 14 Cierre el archivo subpágina.htm. Ahora tiene una plantilla de subpáginas preparada para utilizarla. Uso del diseño de la subpágina para crear páginas Web Ahora va a usar el archivo subpágina.htm con el fin de crear un par de subpáginas para el sitio Web del club de astronomía. El sitio requiere seis subpáginas principales: ■ aboutus.htm ■ contact.htm ■ meetings.htm ■ skyguide.htm ■ gallery.htm ■ links.htm

182 En esta sección, completará las páginas contact.htm y skyguide.htm, además de una subpágina (mars.htm) de la página skyguide.htm. Aunque no explicamos paso a paso cómo crear todas las subpáginas, las imágenes que copió en la carpeta C:skyimages desde la subcarpeta Lesson07 de la carpeta Practice incluyen gráficos de barra de título de modo que puede completar todas las subpáginas solo, si lo desea. Decidimos enseñarle cómo completar mars.htm, skyguide.htm y contact.htm porque en el procedimiento de creación de cada una de estas páginas se incluye información de cómo agregar una funcionalidad concreta a las páginas Web, por ejemplo: ■ mars.htm Muestra cómo usar la característica de vistas en miniatura en FrontPage además de copiar texto de un documento de Word y modificar las hojas de estilo en cascada. Asimismo, esta página tiene vínculos a la página Mapa del cielo (skyguide.htm). ■ skyguide.htm Enseña cómo crear un mapa de imágenes en FrontPage. ■ contact.htm Proporciona una introducción rápida al modo de crear un formulario en FrontPage. Después de crear las tres subpáginas descritas en este proyecto, estará totalmente preparado para experimentar y completar el resto de las páginas usted mismo. Preparación para crear subpáginas La preparación para crear subpáginas es sencilla, ahora que ha adquirido conocimientos prácticos sólidos al crear la plantilla subpágina.htm. Para usarla, simplemente tiene que guardar copias del archivo subpágina.htm con nombres diferentes y algo de texto, como se explica a continuación: 1 Abra el archivo C:skysubpágina.htm en FrontPage. 2 En el menú Archivo, haga clic en Guardar como para abrir el cuadro de diálogo Guardar como, y compruebe que en el cuadro de texto Guardar en parece la carpeta C:sky. 3 En la sección Título de página, haga clic en el botón Cambiar título, escriba Club de la astronomía: acerca de nosotros en el cuadro de diálogo Establecer el título de la página y haga clic en Aceptar. Sugerencia Puede cambiar el texto del título de una página Web en cualquier momento. Para ello, en el menú Archivo, haga clic en Propiedades, cambie el texto de Título y haga clic en Aceptar. Agregó texto para los títulos de cada página a medida que las ha ido creando en la sección anterior.

183 4 En el cuadro de texto Nombre de archivo, escriba aboutus.htm y haga clic en Guardar. Observe que la ficha de la página Web cambia (debajo de las barras de herramientas) para reflejar el nuevo nombre del documento actual. 5 Sin cerrar el documento actual (que en este momento es aboutus.htm), repita los pasos 2 a 4 utilizando los nombres de archivo y el texto del título que se indican en la tabla de la página siguiente: Guardar como nombre Texto del título de de archivo la página contact.htm Club de la astronomía: Contactar meetings.htm Club de la astronomía: Reuniones skyguide.htm Club de la astronomía: Mapa del cielo gallery.htm Club de la astronomía: Galería de fotos links.htm mars.htm Sugerencia Tiene que denominar a las subpáginas de la misma forma en que hizo referencia a ellas cuando vinculó los botones de exploración y vínculos de hipertexto. Por ejemplo, la subpágina Acerca de nosotros debe guardarse con el nombre aboutus.htm. No altere los nombres de archivo en este momento. 6 Cierre FrontPage, abra la carpeta C:sky y compruebe que contiene un archivo para cada página Web de su sitio Web. 7 Cuando haya comprobado la lista de archivos que ha creado, cierre la carpeta C:sky.

184 Adición de texto y de un gráfico para la barra de título Una vez creados archivos nuevos basados en el archivo subpágina.htm, puede abrir los documentos nuevos en FrontPage y personalizar su contenido. La primera subpágina que va a crear es de información acerca del planeta Marte. En esta sección, va a agregar texto y un gráfico para la barra de título. 1 Abra FrontPage, haga clic en el botón Abrir en la barra de herramientas, muestre el contenido de la carpeta C:sky en el cuadro de diálogo Abrir y haga doble clic en el archivo mars.htm. 2 Haga clic a la derecha del gráfico de la barra de título, presione Mayús+Entrar, haga clic en Insertar imagen desde archivo en la barra de herramientas estándar, muestre el contenido de C:skyimages y haga doble clic en t_skyguide.gif. La página mars.htm es una subpágina de Mapa del cielo, de modo que debería mostrar la barra de subtítulo Mapa del cielo. 3 Con el cursor colocado todavía al final del gráfico del mapa del cielo, presione la tecla Eliminar dos veces para acercar la tabla a la imagen t_skyguide.gif. 4 Haga clic con el botón secundario del mouse en la imagen t_skyguide.gif, seleccione Propiedades de imagen, haga clic en la ficha General, escriba Mapa del cielo en el cuadro de texto Representaciones alternativas y haga clic en Aceptar. Ahora agregará un fragmento de texto a la tabla de la página Web. 5 Abra C:sky y haga doble clic en mars.doc (no en mars.htm) para abrir el documento de Word. 6 Organice el escritorio de modo que pueda ver una parte del texto del documento de Word además de mars.htm en FrontPage, como en la disposición mostrada a la izquierda en la figura 7-22. 7 Haga clic dentro del documento de Word y presione Ctrl+E para seleccionar todo el contenido. Sugerencia Puede escribir el texto directamente en la tabla (como verá posteriormente en este proyecto), pero proporcionamos texto para esta página para que no tenga que volver a escribir la información. También puede copiar y pegar la información en FrontPage o puede usar el comando Archivo del menú Insertar para importar texto de otro archivo.

185 8 Arrastre el texto seleccionado en el documento de Word hasta la parte grande en blanco de la tabla de mars.htm (que, técnicamente, es la cuarta celda de la primera fila de la tabla). El texto debería rellenar la celda, como se muestra a la derecha en la figura 7-22. Figura 7-22. En este proyecto, puede arrastrar el texto de un documento de Word a su página Web. Puesto que no especificó limitaciones de ancho o de alto en la celda, ésta se expande para que quepa el texto copiado. 9 Guarde su página Web y cierre el documento de Word. Modificación de la configuración de hojas de estilo en cascada (CSS) Jerga: una hoja de estilo en Como ayuda para dar formato al contenido de sus páginas Web, puede crear cascada contiene código que hojas de estilo en cascada (CSS, Cascading Style Sheets) externas o incrustadas define la apariencia y formato desde FrontPage. Una hoja de estilo externa implica que el código de formato de una página Web o un grupo de páginas Web. se coloca en un documento independiente al que se vincula la página Web, mientras que una hoja de estilo incrustada coloca el código de formato dentro del código fuente de la página Web actual. Cuando se usan opciones de hojas de estilo, se define el estilo para un elemento particular de la página, por ejemplo, un encabezado 3 o el elemento de una lista con viñetas, y los exploradores (y FrontPage) aplicarán automáticamente la configuración de estilo cada vez que aparezca el elemento. Por ejemplo, si desea que todos los encabezados de tipo 3 se muestren en azul, sólo tiene que modificar la configuración de estilo del elemento h3. Cuando guarde la configuración modificada, todos los encabezados de tipo 3 aparecerán en azul.

186 En esta sección, usará FrontPage para definir una hoja de estilo incrustada y personalizar los estilos. Por lo tanto, los estilos que defina en la página mars.htm sólo se aplicarán a dicha página. Para definir estilos incrustados en FrontPage, siga estos pasos: 1 Compruebe que el archivo mars.htm se muestra en la vista Normal en FrontPage y haga clic en Estilo, en el menú Formato. 2 En el cuadro de diálogo Estilo, haga clic en la flecha de lista desplegable Lista y elija Etiquetas HTML. En la lista Estilos se muestra una lista de las etiquetas HTML. En primer lugar, va a especificar que se muestren en azul todos los elementos de encabezado de tipo 3 y con un tamaño de 12 puntos. 3 En la lista Estilos, elija h3, según se ilustra en la figura 7-23. Figura 7-23. Puede definir estilos HTML si selecciona el estilo al que desea dar formato en la lista de etiquetas HTML del cuadro de diálogo Estilo. 4 Haga clic en Modificar, haga clic en Formato en el cuadro de texto Modificar estilo y haga clic en Fuente.

187 5 En el cuadro de diálogo Fuente, haga clic en 12 pt en el cuadro de lista Tamaño, haga clic en la flecha de lista desplegable Color, haga clic en el cuadrado de color azul y haga clic en Aceptar tres veces para cerrar los cuadros de diálogo abiertos. Tanto el encabezado Descripción: como el encabezado Datos del planeta: deberían aparecer ahora en azul y con un tamaño de 12 puntos. En este momento, va a reemplazar las viñetas negras normales en la lista con viñetas por otras personalizadas. 6 Haga clic en Estilo en el menú Formato, haga clic en Etiquetas HTML en el cuadro Lista, seleccione li en la lista Estilos y haga clic en Modificar. 7 En el cuadro de diálogo Modificar estilo, haga clic en Formato y en Numeración. 8 En el cuadro de diálogo Viñetas y numeración, haga clic en Examinar, muestre el contenido de la carpeta C:skyimages en el cuadro de diálogo Seleccionar imagen y haga doble clic en bullet_star.gif para completar el cuadro de diálogo Viñetas y numeración. 9 Haga clic en Aceptar tres veces para cerrar los cuadros de diálogo abiertos. La lista con viñetas de su página debería mostrar imágenes de estrellas en la vista Normal, como se ilustra en la figura 7-24, y el código fuente debe incluir ahora estilos incrustados, según se ilustra en la figura 7-25 (el color naranja se utiliza para resaltar la información de formato que agregó en los pasos anteriores). 10 Guarde el archivo mars.html y asegúrese de que se ve en la vista Normal como preparación para la sección siguiente. Figura 7-24. El estilo recién definido muestra en azul los encabezados de tipo 3 y en forma de estrellas las viñetas de la lista.

188 Figura 7-25. FrontPage genera automáticamente la información de los estilos incrustados. Inserción de una imagen en miniatura Ahora que ha importado y dado formato al texto de su página Web de Marte, está en disposición de agregar una imagen. En esta sección, insertará una imagen en miniatura de Marte, lo que significa que los visitantes de la página podrán hacer clic en una imagen pequeña para ver una versión mayor de la misma. Al suministrar una imagen en miniatura, acelera la descarga de la página y proporciona a sus visitantes la opción de descargar una versión mayor si lo desean. Para insertar una imagen en miniatura en FrontPage, siga estos pasos: 1 En FrontPage, haga clic a la derecha de Nuestro sistema solar: Marte (la línea superior del texto insertado), haga clic en Insertar imagen desde archivo en la barra de herramientas estándar y haga doble clic en la imagen mars.jpg en la carpeta C:skyimages. Una imagen muy grande de Marte toma su vista en FrontPage. 2 Haga clic en Marte y, a continuación, muestre la barra de herramientas Imágenes (si no aparece automáticamente, seleccione Barras de herramientas en el menú Ver y, después, elija Imágenes). En la figura 7-26 se muestra la imagen de Marte junto con la barra de herramientas Imágenes.

189 Figura 7-26. Puede crear una vista en miniatura de Marte directamente en FrontPage. 3 Con la imagen de Marte todavía seleccionada, haga clic en el botón Vista en miniatura automática, en la barra de herramientas Imágenes (el tercer botón desde la izquierda). Se crea una versión de Marte de 100 por 100 píxeles a partir de la versión mayor del archivo mars.jpg. El gráfico más pequeño se denomina automáticamente mars_small.jpg. 4 Haga clic con el botón secundario del mouse en la imagen de Marte, elija Propiedades de imagen, seleccione la ficha Apariencia, si es necesario, y configure las propiedades como sigue: Opción Valor Alineación Derecha Grosor del borde 0 Espaciado horizontal 15 Espaciado vertical 10 Sugerencia Si desea que la vista en miniatura se muestre mayor de 100 por 100 píxeles, puede activar la casilla de verificación Especificar tamaño, en el cuadro de diálogo Propiedades de imagen, y cambiar el tamaño de la imagen en miniatura.

190 5 Haga clic en Aceptar y en el texto para cancelar la selección del gráfico. 6 Haga clic con el botón secundario del mouse en alguna parte de la tabla y elija Propiedades. Se abre el cuadro de diálogo Propiedades de tabla. Para probar el vínculo de la 7 En la sección Bordes, escriba 0 en el cuadro de texto Tamaño y, vista en miniatura, haga clic después, haga clic en Aceptar.º en la ficha Vista previa y, después, haga clic en la 8 Haga clic en Guardar, haga clic en Cambiar carpeta en el cuadro imagen en miniatura de de diálogo Guardar archivos incrustados, haga doble clic en la Marte. Haga clic en la ficha carpeta images, haga clic en Aceptar dos veces y, por último haga Vista normal para volver a la vista de trabajo. clic en la ficha Vista previa (o elija Vista previa en el explorador, en el menú Archivo). La página mars.htm debería ser similar ahora a la de la figura 7-27 y el gráfico pequeño se vincula automáticamente a mars.jpg. Figura 7-27. Si hace clic en el gráfico en miniatura mientras obtiene una vista previa de la página, debe aparecer una imagen en grande de Marte. 9 Cierre el archivo mars.htm. Nota Los archivos de imágenes del proyecto proporcionados para esta lección incluyen neptune.jpg y saturn.jpg, que son imágenes de Neptuno y de Saturno (respectivamente), y puede usarlas si desea seguir practicando y crear páginas informativas de otros planetas. ¡Enhorabuena! Ha completado su primera página del sitio Web del club de astronomía. No hay ninguna razón para que se detenga ahora; en la sección siguiente, aprenderá a agregar un mapa de imágenes.

191 Creación de un mapa de imágenes En esta sección, creará un mapa de imágenes en la subpágina principal del Mapa del cielo. Va a crear el mapa de imágenes a partir de una imagen del sistema solar. Dará formato a la imagen del sistema solar para que, cuando los usuarios hagan clic en el gráfico de Marte, se muestre la página mars.htm que creó en la sección anterior. Para lograrlo (es más fácil de lo que parece), siga estos pasos: 1 Abra FrontPage, haga clic en el icono Carpetas de la barra de vistas y haga doble clic en el archivo skyguide.htm. 2 Haga clic a la derecha del gráfico de la barra de título, presione Mayús+Entrar, haga clic en Insertar imagen desde archivo en la barra de herramientas estándar y haga doble clic en t_skyguide.gif. 3 Con el cursor colocado todavía al final del gráfico del mapa del cielo, presione la tecla Eliminar dos veces para acercar la tabla a la imagen t_skyguide.gif. 4 Haga clic con el botón secundario del mouse en la imagen t_skyguide.gif, seleccione Propiedades de imagen, haga clic en la ficha General, escriba Mapa del cielo en el cuadro de texto Representaciones alternativas y haga clic en Aceptar. Ahora agregará un fragmento de texto a la tabla de la página Web. 5 Haga clic en la celda de la tabla grande situada a la derecha del botón Página principal y escriba Tema de este mes: nuestro sistema solar. 6 Seleccione el texto, haga clic en el icono Centrar en la barra de herramientas Formato y seleccione Comic Sans (o Comic Sans MS) en la lista desplegable Fuente. 7 Haga clic a continuación de la palabra solar y presione Mayús+Entrar dos veces. 8 Escriba Haga clic en un planeta para ir a la página de información del mismo. Nota: en este momento sólo hay información de Marte. 9 Haga clic en el área en blanco entre los dos componentes de texto que agregó en los pasos 5 y 8. 10 En la barra de herramientas estándar, haga clic en Insertar imagen desde archivo, vaya a la carpeta C:skyimages si es necesario y haga doble clic en solarsystem.gif.

192 11 Haga clic con el botón secundario del mouse en cualquier parte de la tabla, elija Propiedades de tabla, establezca el Tamaño de borde a 0 en el cuadro de diálogo Propiedades de tabla y haga clic en Aceptar. 12 Haga clic en Guardar en la barra de herramientas. A continuación, obtenga una vista previa de su página Web. Debe parecerse a la de la figura 7-28. Figura 7-28. Utilizará la imagen del sistema solar para crear un mapa de imágenes. 13 Vuelva a la vista Normal en FrontPage. Jerga: una zona activa es un 14 Haga clic en la imagen del sistema solar. La barra de herramientas área en la que puede hacer Imágenes se debe abrir automáticamente. Observe las clic en una imagen que está herramientas Zona activa rectangular, Zona activa circular y Zona vinculada a otra página Web activa en forma de polígono que se encuentran en el extremo o a otra área de la página actual. derecho de la barra de herramientas Imágenes.

193 15 Haga clic en la herramienta Zona activa en forma de polígono y, después, haga clic en varios puntos alrededor de Marte y de la etiqueta Marte del gráfico del sistema solar para crear un polígono, como se muestra en la figura 7-29. Cuando complete el polígono, el cuadro de diálogo Insertar hipervínculo se abrirá automáticamente. Si es necesario, haga clic en Archivo o página Web existente en la sección Vincular a: Figura 7-29. Las herramientas de zona activa de la barra de herramientas Imágenes permiten dibujar áreas donde se puede hacer clic en los gráficos. 16 En el cuadro de diálogo Insertar hipervínculo, haga doble clic en mars.htm (no en mars.doc) en la lista de archivos de la carpeta C:sky. Si crea una línea que no 17 Cree formas alrededor del resto de los planetas, si lo desea, que desea usar, haga clic con el señalen a futuras páginas, como mercury.htm, venus.htm, earth.htm, botón secundario del mouse jupiter.htm, saturn.htm, uranus.htm, neptune.htm y pluto.htm. para quitar las líneas existentes y vuelva a 18 Guarde el archivo skyguide.htm, obtenga una vista previa de la empezar. página en Vista previa, mueva el cursor sobre Marte (observe que el cursor cambia para mostrar una mano) y haga clic en Marte para ver si el vínculo funciona. 19 Haga clic en la ficha vista Normal, cierre el archivo skyguide.htm y cierre FrontPage. Va por buen camino para crear el sitio Web del club de astronomía. La subpágina final que va a crear es un formulario dentro de la página contact.htm.

194 Creación de formularios Cuando use Formularios en En este momento, debe estar habituado a agregar elementos y a configurar un sitio Web, su servidor opciones en FrontPage. Como mencionamos al principio de la lección, el truco debe admitir Extensiones de es saber dónde buscar las herramientas y menús de configuración. En esta servidor de FrontPage y debe publicar el formulario con la sección, creará un formulario en línea. Un formulario en línea permite a los herramienta de publicación usuarios especificar información en cuadros de texto. Después, cuando los de FrontPage. usuarios hagan clic en el botón Enviar del formulario, los resultados se enviarán a la dirección de correo que haya especificado. Advertencia No muestre el formulario en la pantalla Vista previa antes de publicarlo en el Web. Si lo hace, FrontPage 2002 agrega código que impide que la página se publique correctamente. Cuando cree un formulario, debe publicarlo en el Web y obtener después una vista previa del mismo en FrontPage o en un explorador. Preparación de la página Contactos El primer paso para crear un formulario en la página Contactos es agregar una barra de título e insertar texto en el título, para preparar la página, según se describe en los pasos siguientes: 1 Abra FrontPage, haga clic en Carpeta en la barra de vistas y haga doble clic en el archivo contact.htm. 2 Haga clic a la derecha de la barra de título, presione Mayús+Entrar, haga clic en Insertar imagen desde archivo, muestre el contenido de la carpeta C:skyimages y haga doble clic en t_contact.gif. 3 Con el cursor colocado todavía al final del gráfico de Información de contacto, presione la tecla Eliminar dos veces para acercar más la tabla a la imagen t_contact.gif. 4 Haga clic con el botón secundario del mouse en la imagen t_contact.gif, seleccione Propiedades de imagen, haga clic en la ficha General, escriba Página de contacto en el cuadro de texto Representaciones alternativas y haga clic en Aceptar.

195 Inserción de un área de formulario y adición de etiquetas Ahora que la página Contactos está lista para la acción, puede crear un formulario en línea. En primer lugar, insertará el cuadro de formulario estándar y, después, las etiquetas para los cuadros de texto, los botones de opción y los cuadros de selección del formulario: 1 Haga clic en la celda de la tabla grande a la derecha del botón Página principal, seleccione Formulario en el menú Insertar y elija Formulario. Aparece un área resaltada dentro de la tabla que contiene los botones Enviar y Restablecer, según se muestra en la figura 7-30 de la página siguiente. Figura 7-30. El primer paso para crear un formulario es insertar un componente formulario, que incluye automáticamente los botones Enviar y Restablecer. 2 Con el cursor colocado a la izquierda del botón Enviar, escriba Nombre: y presione Mayús+Entrar. 3 Escriba Dirección de correo electrónico: y presione Entrar. 4 Escriba ¿Es ya miembro del club? y presione Entrar. 5 Escriba Si es así, ¿con qué frecuencia asiste a nuestras reuniones mensuales? y presione Entrar. 6 Escriba Permítanos saber cómo encontró nuestro sitio Web (seleccione todo lo que corresponda):, presione Mayús+Entrar, escriba Asistí a una reunión, presione Mayús+Entrar, escriba Lo encontré en un motor de búsqueda, presione Mayús+Entrar, escriba Un amigo me informó y, después, presione Entrar.

196 7 Escriba Especifique sus comentarios o cuestiones aquí:, presione Mayús+Entrar y, después, presione Entrar. El formulario debería tener una apariencia similar al de la figura 7-31. Figura 7-31. El formulario que se está creando sólo muestra el texto y botones básicos. Creación de los campos del formulario Ahora puede especificar los campos del formulario, las áreas en las que los visitantes seleccionan o especifican texto para que puedan enviar información. Daremos formato a los 1 Haga clic a continuación de Nombre:, presione la barra campos del formulario en un espaciadora, seleccione Formulario en el menú Insertar y elija momento, de modo que no Cuadro de texto. se preocupe si los campos no tienen la apariencia 2 Haga clic a continuación de Dirección de correo electrónico:, correcta ahora. presione la barra espaciadora, seleccione Formulario en el menú Insertar y elija Cuadro de texto. 3 Haga clic a continuación de ¿Es ya miembro del club?, seleccione Formulario en el menú Insertar, elija Botón de opción, escriba Sí, presione la barra espaciadora, seleccione Formulario en el menú Insertar, elija Botón de opción y, después, escriba No. 4 Haga clic a continuación de Si asiste a nuestras reuniones, ¿con qué frecuencia lo hace?, presione la barra espaciadora, seleccione Formato en el menú Insertar y elija Cuadro desplegable.

197 5 Haga clic antes de Asistí a una reunión, seleccione Formulario en el menú Insertar, elija Casilla de verificación y presione la barra espaciadora. 6 Haga clic antes de Lo encontré en un motor de búsqueda, seleccione Formulario en el menú Insertar, elija Casilla de verificación y presione la barra espaciadora. 7 Haga clic antes de Un amigo me informó, seleccione Formulario en el menú Insertar, elija Casilla de verificación y presione la barra espaciadora. 8 Haga clic debajo de Especifique sus comentarios o cuestiones aquí, seleccione Formulario en el menú Insertar y elija Área de texto. 9 Haga clic en Guardar. El formulario ahora debería ser similar al mostrado en la figura 7-32. Figura 7-32. El formulario debería incluir ahora etiquetas y campos de formulario sin formato.

198 Configuración de las propiedades de los campos de formulario Ya tiene la mayor parte del formulario creado. El siguiente paso es configurar las propiedades de cada campo del formulario y especificar sus propiedades en conjunto. De modo que esté preparado para hacer clic: está a punto de configurar algunas propiedades del formulario. 1 Haga clic con el botón secundario del mouse en el campo situado junto a Nombre y seleccione Propiedades de campo de formulario. 2 En el campo Nombre del cuadro de diálogo Propiedades de cuadro de texto, escriba Nombre, configure el valor de Ancho en caracteres como 25 (según se muestra en la figura 7-33), escriba 1 en el cuadro de texto Orden de tabulación y, después, haga clic en Aceptar. Figura 7-33. Para establecer las propiedades de un cuadro de texto, se usa el cuadro de diálogo Propiedades de cuadro de texto. El campo de formulario 3 Haga clic con el botón secundario del mouse en el campo situado Orden de tabulación junto a Dirección de correo electrónico, seleccione Propiedades de especifica el orden en que campo de formulario, escriba Correo_electrónico, configure el el cursor se moverá en un valor de Ancho en caracteres como 30, especifique 2 en el cuadro formulario si un usuario presiona la tecla Tab para de texto Orden de tabulación y, después, haga clic en Aceptar. moverse de un campo a otro.

199 4 Haga clic con el botón secundario del mouse en el botón Sí, elija Propiedades de campo de formulario, escriba Miembro en el cuadro de texto Nombre de grupo, escriba Sí en el cuadro de texto Valor, compruebe que en la sección Estado inicial está seleccionada la opción Seleccionado, escriba 3 en el cuadro de texto Orden de tabulación y haga clic en Aceptar. 5 Haga clic con el botón secundario del mouse en el botón No, elija Propiedades de campo de formulario, escriba Miembro en el cuadro de texto Nombre de grupo, escriba No en el cuadro de texto Valor, compruebe que en la sección Estado inicial está seleccionada la opción No seleccionado y haga clic en Aceptar. Nota Tenga en cuenta que no tiene que establecer un orden de tabulación para las opciones Sí y No. Dado que las opciones son miembros del mismo grupo, los usuarios pueden moverse en el grupo si presionan la tecla Tab. A continuación, pueden seleccionar una opción con las teclas de dirección. Cuando esté preparado para pasar a la sección siguiente del formulario, puede presionar la tecla Tab. 6 Haga clic con el botón secundario del mouse en el cuadro de lista desplegable Si es así, ¿con qué frecuencia asiste a nuestras reuniones? y elija Propiedades de campo de formulario. Se abre el cuadro de diálogo Propiedades de cuadro desplegable. 7 Escriba Asistencia en el cuadro de texto Nombre, especifique 4 en el cuadro de texto Orden de tabulación y, después, haga clic en Agregar. Se abre el cuadro de diálogo Agregar opción. 8 En el cuadro de diálogo Agregar opción, especifique A todas las reuniones, elija la opción Seleccionada en la sección Estado inicial y haga clic en Aceptar. 9 Haga clic en Agregar, escriba Cada dos meses y haga clic en Aceptar. 10 Haga clic en Agregar, escriba Varias veces al año y haga clic en Aceptar.

200 11 Haga clic en Agregar, escriba Nunca y haga clic en Aceptar. Debería aparecer un cuadro de diálogo Propiedades de cuadro desplegable similar al de la figura 7-34. Figura 7-34. El cuadro de diálogo Propiedades de cuadro desplegable muestra todas las opciones y la opción que se seleccionará de forma predeterminada. 12 Haga clic en Aceptar. 13 Haga clic con el botón secundario del mouse en la primera casilla de verificación, elija Propiedades de campo de formulario, escriba SitioWebEncontrado en el cuadro de texto Nombre, especifique Asistí a una reunión en el cuadro de texto Valor, especifique 5 en el cuadro de texto Orden de tabulación y haga clic en Aceptar. 14 Haga clic con el botón secundario del mouse en la segunda casilla de verificación, elija Propiedades de campo de formulario, escriba SitioWebEncontrado en el cuadro de texto Nombre, especifique Motor de búsqueda en el cuadro de texto Valor, especifique 6 en el cuadro de texto Orden de tabulación y haga clic en Aceptar.

201 15 Haga clic con el botón secundario del mouse en la tercera casilla de verificación, elija Propiedades de campo de formulario, escriba SitioWebEncontrado en el cuadro de texto Nombre, especifique Amigo en el cuadro de texto Valor, especifique 7 en el cuadro de texto Orden de tabulación y haga clic en Aceptar. 16 Haga clic con el botón secundario del mouse en el cuadro de texto con desplazamiento, elija Propiedades de campo de formulario, escriba Comentarios en el cuadro de texto Nombre, especifique 40 en el cuadro de texto Ancho en caracteres, especifique 8 en el cuadro de texto Orden de tabulación, escriba 3 en el cuadro de texto Número de líneas y haga clic en Aceptar. 17 Haga clic con el botón secundario del mouse en el botón Enviar, elija Propiedades de campo de formulario, especifique Enviar en el cuadro de texto Nombre, especifique 9 en el cuadro de texto Orden de tabulación y haga clic en Aceptar. 18 Haga clic con el botón secundario del mouse en el botón Restablecer, elija Propiedades de campo de formulario, especifique Restablecer en el cuadro de texto Nombre, especifique Borrar formulario en el cuadro de texto Valor/Etiqueta, escriba 10 en el cuadro de texto Orden de tabulación y haga clic en Aceptar. 19 Haga clic en la flecha Atrás una vez y presione la barra espaciadora para insertar un espacio entre los botones Enviar y Borrar formulario. 20 Haga clic antes de la etiqueta Nombre: en la parte superior del formulario y presione Mayús+Entrar. A continuación, guarde su trabajo sin obtener una vista previa del formulario (recuerde que, para que el formulario funcione correctamente, debe publicarlo en el Web antes de obtener una vista previa del mismo).

202 Denominación de los campos Generalmente, debe suministrar un nombre para cada campo del formulario. Los nombres de los campos ayudan a identificar la información una vez enviada, además de permitir que los exploradores diferencien los elementos. Puede configurar el formulario para que muestre el nombre de cada campo junto con los datos enviados. Esta configuración le ayudará a ver rápidamente qué información se envió en respuesta a la entrada de cada campo del formulario. Por ejemplo, a continuación se ilustra cómo podrían verse un formulario rellenado en línea y la página de confirmación: Después, recibiría un mensaje de correo electrónico con la información enviada, similar al siguiente: Las imágenes que se presentan aquí muestran la forma en que el formulario que está creando en este proyecto se va a mostrar cuando publique el formulario de contacto en un servidor Web.

203 Completar la página Contactos Para completar la página Contactos, tiene que ocultar los bordes de la tabla y establecer las propiedades del formulario. 1 Haga clic con el botón secundario del mouse en cualquier parte de la tabla, elija Propiedades de tabla, especifique 0 en el cuadro de texto Tamaño, en el área Bordes, y haga clic en Aceptar. 2 Haga clic con el botón secundario del mouse en el formulario y elija Propiedades de formulario. Se abre el cuadro de diálogo Propiedades de formulario. 3 En el cuadro de diálogo Propiedades de formulario, compruebe que esté seleccionada la opción Enviar a, especifique su propia dirección de correo electrónico en el cuadro de texto Dirección de correo electrónico y Formulario de contacto del Club de la astronomía en el cuadro de texto Nombre de formulario. 4 En el cuadro de diálogo Propiedades de formulario, haga clic en Opciones, haga clic en la ficha Resultados por correo electrónico, compruebe que la casilla de verificación Incluir nombres de campo está activada y especifique Información de contacto del Club de la astronomía en el cuadro de texto Línea de asunto. Al seleccionar la opción Incluir nombres de campo, se especifica que los nombres de campo deben acompañar a la información enviada y el texto de la línea de asunto aparecerá en los mensajes de correo electrónico que reciba cuando los usuarios hagan clic en el botón Enviar. 5 Haga clic en la ficha Página de confirmación, escriba thankyou.htm en el cuadro de texto Dirección URL de la página de confirmación, haga clic en Aceptar dos veces y, después, haga clic en No. 6 Guarde y cierre el archivo contact.htm, y cierre FrontPage. Para ver una versión Hasta aquí ha llegado en la experimentación con las subpáginas para este publicada de la página proyecto. Ha trabajado en unas cuantas características de FrontPage que de contactos, visite debería poder usar cuando cree su propio sitio Web. Pero antes de terminar con www.creationguide.com/ sky/contact.htm (en inglés). este proyecto, tenemos que crear la página principal del club de astronomía.

204 Creación de una página principal en FrontPage Por último, aunque no menos importante, puede crear la página principal. Crear esta página podría parecer un poco difícil y estamos dispuestos a admitir que probablemente sea el procedimiento más adelantado que hemos descrito en este curso. Por muy desafiante que parezca, sin embargo, deseamos darle una idea de dónde puede ir a partir de aquí si le hemos inspirado para que continúe diseñando sitios Web. (¡Y esperamos que lo haga!) Asimismo, pensamos que podría resultarle interesante ver cómo se utilizan en ocasiones las tablas y los gráficos para crear diseños avanzados de páginas. De todas maneras, vamos a empezar por definir el marco de trabajo de la página principal. Configuración del marco de trabajo de la página principal Para empezar, siga estos pasos: 1 Abra FrontPage, abra el archivo C:skysubpágina.htm, elija Guardar como en el menú Archivo, haga clic en el botón Cambiar título, especifique Sitio Web oficial del Club de la astronomía en el cuadro de diálogo Establecer el título de la página, haga clic en Aceptar, especifique index.htm en el cuadro de texto Nombre de archivo y haga clic en Guardar. 2 Haga clic con el botón secundario del mouse en un área en blanco de la página, haga clic sucesivamente en Propiedades de página, en la ficha Fondo y en el cuadro Texto en la sección Colores, elija Blanco y haga clic en Aceptar. 3 Coloque el cursor antes del vínculo Página principal en la barra de exploración de texto, arrastre para seleccionar todo lo que haya encima de la barra de exploración de texto (incluida la barra de título y el gráfico del logotipo), haga clic con el botón secundario del mouse en los elementos seleccionados y haga clic en Cortar. 4 Presione Entrar y, después, presione el botón de flecha de dirección arriba (o haga clic en el espacio por encima de la barra de exploración de texto). 5 Haga clic en Insertar imagen desde archivo, muestre el contenido de la carpeta C:skyimages, si es necesario, haga doble clic en titlebar-home.gif y presione Entrar.

205 6 Haga clic en Componente Web en la barra de herramientas estándar, elija Efectos dinámicos y haga doble clic en Marquesina. Se abre el cuadro de diálogo Propiedades de marquesina. 7 En el cuadro de diálogo Propiedades de marquesina, escriba Nuestra próxima reunión es el 21 de febrero. Reserve su plaza hoy. En el cuadro de texto Texto. Éste es el mensaje que se desplazará en la página. 8 Elija la opción Deslizar en la sección Comportamiento, desactive la casilla de verificación Continuamente en la sección Repetir y escriba 1 en el cuadro de texto Repetir, como se muestra en la figura 7-35. Figura 7-35. Entre otras propiedades, puede especificar si el texto de la marquesina se desplaza continuamente o sólo un número predeterminado de veces. 9 Haga clic sucesivamente en el botón Estilo, en Formato y en Fuente, elija Comic Sans (o Comic Sans MS) en el cuadro de lista de fuente, elija Blanco en el cuadro Color y haga clic en Aceptar tres veces para cerrar todos los cuadros de diálogo abiertos.

206 10 Presione la tecla de flecha derecha para cancelar la selección del componente de marquesina, presione Entrar, haga clic en el botón Tabla en la barra de herramientas y cree una tabla de una fila y cinco columnas. La página index.htm debe parecerse a la mostrada en la figura 7-36. Figura 7-36. La página principal del club de astronomía se basa en una tabla personalizada. 11 Haga clic con el botón secundario del mouse en la tabla, elija Propiedades de tabla, haga clic en la lista desplegable Alineación, seleccione Centrar, compruebe que la casilla de verificación Especificar ancho está activada, especifique 580 en el cuadro de texto Especificar ancho, elija la opción En píxeles, compruebe que las opciones Espacio desde el borde al centro y Espaciado de celdas se configuran como 0 y haga clic en Aceptar. 12 Seleccione las cinco celdas de la tabla, haga clic en el botón secundario del mouse en las celdas seleccionadas, elija Propiedades de celda, configure Alineación vertical como Superior y haga clic en Aceptar. 13 Haga clic con el botón secundario del mouse en el gráfico titlebar- home.gif, elija Propiedades de imagen, haga clic en la ficha General, escriba Bienvenidos al sitio Web del Club de la astronomía en el cuadro de texto Representaciones alternativas y haga clic en Aceptar. 14 Haga clic en Guardar.

207 Ensamblado del gráfico principal Ahora va a insertar los fragmentos de una imagen que se ha cortado para que quepa en la tabla. En la figura 7-37 se muestra la imagen antes de dividirla. La razón por la que dividimos la imagen en gráficos independientes es que deseábamos usar HTML dinámico (DHTML) para crear un efecto de conversión siempre que los usuarios coloquen el cursor sobre un área con un hipervínculo. Si no hubiéramos deseado enseñar el efecto de conversión (y demostrar cómo puede dividir y volver a unir las imágenes cuando sea necesario), podríamos haber creado un mapa de imágenes similar al del sistema solar que creó en la página Mapa del cielo anteriormente en esta lección. Figura 7-37. La imagen de la Osa mayor que se ve aquí se dividió en fragmentos para este proyecto. Nota HTML dinámico (DHTML, Dynamic HTML) es una tecnología que proporciona páginas Web con la capacidad de realizar cambios y actualizaciones en respuesta a las acciones de un usuario, por ejemplo, puede mostrar un gráfico o información adicional en respuesta al movimiento del mouse. 1 En el archivo index.htm, haga clic en la celda 1, haga clic en Insertar imagen desde archivo en la barra de herramientas estándar, muestre el contenido de la carpeta C:skyimages y haga doble clic en bigdip1.gif. 2 Haga clic en la celda 2 e inserte el archivo b_aboutus.gif. 3 Haga clic en la celda 3, inserte el gráfico bigdip2.gif (un gráfico transparente que le ayudará a alinear el resto de los gráficos), presione Mayús+Entrar, inserte el gráfico b_contact.gif, presione Mayús+Entrar, inserte el gráfico b_meetings.gif, presione Mayús+Entrar e inserte el gráfico b_skyguide.gif. 4 Haga clic en la celda 4 e inserte el gráfico bigdip3.gif.

208 5 Haga clic en la celda 5 e inserte bigdip4.gif (otra imagen transparente), presione Mayús+Entrar, inserte b_gallery.gif, presione Mayús+Entrar, inserte bigdip5.gif, presione Mayús+Entrar e inserte b_links.gif. La página index.htm debe aparecer como en la figura 7-38. Figura 7-38. Cuando haya modelado los fragmentos de la imagen de la Osa mayor, podrá vincularlos en las subpáginas. Creación de vínculos dentro del gráfico principal El siguiente paso es vincular cada imagen que contenga un nombre de botón en el gráfico de la Osa mayor a la subpágina apropiada: 1 Haga clic con el botón secundario del mouse en el texto Acerca de nosotros, elija Hipervínculo, compruebe que la carpeta sky aparece en el cuadro de texto Buscar en, escriba aboutus.htm en el cuadro de texto Dirección (o seleccione el archivo aboutus.htm en la lista de archivos) y haga clic en Aceptar. Para acelerar el proceso de 2 Vincule el resto de los gráficos como se indica a continuación: creación de hipervínculos, puede hacer doble clic en los Gráfico Vincular a nombres de archivo en la lista de archivos del cuadro de Contactar contact.htm diálogo Insertar hipervínculo, Reuniones meetings.htm en lugar de escribir cada nombre de archivo en el Mapa del cielo skyguide.htm cuadro de texto Dirección. Galería de fotos gallery.htm Vínculos de links.htm astronomía 3 Haga clic en Guardar.

209 Adición de HTML dinámico al gráfico principal A continuación, agregará el efecto de conversión a cada área con un hipervínculo en la tabla mediante la barra de herramientas DHTML de FrontPage: 1 Seleccione el botón Acerca de nosotros y elija Efectos de HTML dinámico en el menú Formato. Aparece la barra de herramientas Efectos DHTML. Va a configurar la barra de herramientas para que se muestre como se ve en la figura 7-39. Figura 7-39. La barra de herramientas Efectos DHTML le ayuda a aplicar efectos dinámicos a las páginas Web. 2 En la lista desplegable en, elija Pasar el mouse. 3 En la lista desplegable Aplicar, elija Intercambiar imágenes, haga clic en la lista desplegable Elegir configuración, seleccione Elegir imagen y haga doble clic en b_aboutus2.gif en la carpeta C:skyimages. 4 Repita los pasos 1 a 3 para cada área vinculada, con el fin de vincular los gráficos secundarios de la forma siguiente: Vínculo Archivo de imagen Contactar b_contact2.gif Reuniones b_meetings2.gif Mapa del cielo b_skyguide2.gif Galería de fotos b_gallery2.gif Vínculos de astronomía b_links2.gif 5 Cierre la barra de herramientas Efectos DHTML. 6 Haga clic con el botón secundario del mouse en la tabla, elija Propiedades de tabla, especifique 0 en el cuadro de texto Tamaño, en la sección Bordes, haga clic en Aplicar y haga clic en Aceptar. 7 Haga clic en Guardar y, después, vea cómo queda su trabajo en la vista previa. 8 Haga clic en la ficha vista Normal para volver al área de trabajo.

210 Toques finales de la página principal Finalmente, para completar la página principal, insertará un contador y la fecha en que se modificó por última vez. Para insertar un contador, siga estos pasos: Los elementos de contador 1 En index.htm, haga clic después del hipervínculo Vínculos en la no se mostrarán hasta que barra de exploración de texto, presione Entrar, seleccione publique el Web de Componente Web en el menú Insertar y elija Contador de visitas a la FrontPage. página en la lista Tipo de componente. Haga clic en Finalizar y aparecerá el cuadro de diálogo Propiedades de contador de visitas a la página. 2 En la lista Estilo de contador, seleccione el estilo de número digital verde (el último estilo de la lista), a continuación active la casilla de verificación Número fijo de dígitos, acepte la configuración predeterminada de 5 dígitos y haga clic en Aceptar. 3 Presione Entrar, elija Fecha y hora en el menú Insertar y haga clic en Aceptar, en el cuadro de diálogo Fecha y hora. La fecha se actualizará automáticamente siempre que modifique la página. 4 Guarde el archivo index.htm y, después, haga clic en Vista previa. Su página debería ser similar a la mostrada en la figura 7-40. Cuando publique su sitio Web de sky, la página principal mostrará el contador el lugar del texto marcador de posición. Figura 7-40. El archivo index.htm completo se muestra aquí en el modo Vista previa.

211 Ha completado la página principal y la mayor parte de las subpáginas del sitio Web del club de astronomía. ¡Ha hecho un fantástico trabajo! Ahora debería entender algunas de las capacidades más fabulosas de FrontPage. Esperamos que este recién adquirido conocimiento le sirva de ayuda para diseñar y crear sus propios sitios Web. Para ver una versión “en En lo que respecta al sitio del club de la astronomía, el único paso que falta es acción” del sitio Web del publicar el Web de C:sky mediante la característica Publicar de FrontPage. club de astronomía creado Asegúrese de leer la sección siguiente antes de cargar el sitio Web del club de en este proyecto, visite www.creationguide.com/sky/c astronomía en el espacio del servidor. Unas palabras acerca de la publicación ontact.htm (en inglés). Cuando crea Webs en FrontPage, es conveniente cargar las páginas con la característica Publicar Web de FrontPage, en especial si ha insertado elementos que se basen en Extensiones de servidor de FrontPage (como formularios y contadores). Para publicar su sitio, seleccione la opción Publicar Web en el menú Archivo. Ya debería tener solucionadas las cuestiones referentes al espacio del servidor y a su dirección. Asimismo, debe haber comprobado que el servicio de alojamiento de sitios Web admite Extensiones de servidor de FrontPage. Para obtener más información acerca de cómo publicar Webs de FrontPage y usar Extensiones de servidor de FrontPage, póngase en contacto con su proveedor de servicios Internet (ISP) y remítase a los archivos de ayuda de FrontPage. Recursos adicionales A continuación enumeramos un par de referencias sobre FrontPage que hemos encontrado de utilidad: ■ Buyens, Jim. Microsoft FrontPage Version 2002 Inside Out. Redmond, WA: Microsoft Press, 2001. Este libro es un recurso con una completa documentación de FrontPage. ■ www.microsoft.com/spain/Office/frontpage/default.asp es el recurso en línea definitivo acerca de FrontPage.

212 Puntos clave ■ FrontPage es un programa de edición HTML muy completo. ■ Puede usar FrontPage para crear fácilmente páginas Web avanzadas como efectos de conversión en botones, mapas de imágenes, vistas en miniatura, formularios, contadores y otros componentes de páginas Web. ■ La interfaz de FrontPage permite mostrar las páginas Web en la vista Normal (de trabajo), en la vista HTML y en el modo Vista previa. ■ Aprender FrontPage le abre las puertas de la utilización de otros editores HTML avanzados porque ejemplifica los tipos de capacidades que éstos pueden proporcionar. ■ Antes de crear páginas Web con FrontPage, debe asegurarse de que el servicio de alojamiento de sitios Web admita Extensiones de servidor de FrontPage. (Actualmente, la mayor parte de los servidores admiten las extensiones en cierto grado.) ■ Antes de empezar a crear páginas Web en FrontPage, debería configurar un Web, lo que proporciona un formato especial a la carpeta seleccionada. ■ Puede simplificar el proceso de creación de un sitio Web si crea una plantilla estándar que puede guardar como subpáginas. ■ La clave para crear Webs en FrontPage es conservar sus archivos organizados, saber dónde buscar las herramientas y opciones de menús de FrontPage, y experimentar con diversas opciones. ■ Para lograr los mejores resultados, cargue los archivos de FrontPage con la característica Publicar Web.

213 LECCIÓN 8 Introducción de las páginas Web en el mundo real Una vez completada esta lección, podrá:  Transferir sus archivos a Internet.  Elegir un método para exponer sus páginas Web.  Usar Mis sitios de red de Microsoft para mantener su sitio Web.  Revisar las páginas Web antes de transferirlas a Internet. Cuando cree páginas Web, finalmente estará preparado para mostrarlas en línea. De esto trata esta lección: del paso de las páginas desde el escritorio “sólo para sus ojos” de su PC al espacio de “los ojos de todo el mundo” en Internet. Con probabilidad, ha creado páginas Web, de modo que puede manifestar su presencia en el Web, no sólo como ejercicio intelectual, así que continuaremos con esa suposición. La clave para “pasar al mundo real” sus páginas y colocarlas en el Web es copiar los documentos HTML y los archivos de imagen en un servidor. En la lección 4, revisamos con detalle el espacio en los servidores, los nombres de dominio y los ISP, por lo tanto no vamos a volver sobre esas cuestiones aquí. Si necesita un recordatorio en profundidad de estos temas, consulte la lección 4. Si prefiere avanzar, a continuación se enumeran las cuestiones que deberá tener en cuenta para poder pasar las páginas Web al mundo real: ■ Archivos HTML y de imagen, denominados y organizados correctamente. ■ Espacio en un servidor. (Puede pagar una cuota mensual a un servicio de alojamiento de sitios Web a cambio de espacio en un servidor, puede usar un espacio gratuito o puede utilizar el espacio que su ISP le proporciona en sus servidores como parte de su cuenta de conexión a Internet.) ■ Una aplicación de software que permita transferir los archivos desde su equipo a un servidor. (Explicaremos este requisito más adelante en esta lección.) ■ Una dirección Web. Debe adquirir un nombre de dominio y registrarlo con un servicio de alojamiento de sitios Web, configurar una dirección Web en un servidor gratuito u obtener una dirección Web de su ISP (el espacio en los servidores de los ISP se suele basar en el nombre de dominio del ISP seguido de su nombre de usuario).

214 En este punto del curso, la lista anterior no debería sonarle demasiado desalentadora. Asimismo, en un momento describimos con exactitud qué aplicaciones de transferencia de archivos puede usar y cómo puede copiarlos en un servidor. Por tanto, incluso si tiene algunas cuestiones acerca de los requisitos anteriores, tenga paciencia: nos ocuparemos de cada uno en breve. Además de transferir sus archivos a un servidor, tiene un par de tareas adicionales a las que prestar atención. En concreto, tendrá que comprobar las páginas Web cuando transfiera sus archivos a un servidor además de hacer saber a los demás que su sitio puede verse. Estas tres tareas posteriores a la fase de creación (transferencia de archivos, comprobación de las páginas Web en “el mundo real” y comunicación de tal hecho) son los puntos principales a los que aludimos en esta lección. Si tiene a mano todos sus archivos, una conexión a Internet y algo de espacio en un servidor, su sitio puede estar disponible en línea al finalizar esta lección. Transferencia de los archivos a Internet Si tiene los archivos de imagen y HTML además de espacio en un servidor y Jerga: el término carga hace referencia al proceso de copia una conexión a Internet, significa que ya está preparado para exponer sus de archivos desde su equipo a páginas Web. Puede transferir los archivos a través de Internet de varias un servidor. La descarga se formas. A continuación enumeramos algunos de los métodos de que dispone refiere a la copia de archivos para transferir archivos: de un servidor a su equipo, como cuando descargó los ■ Programas FTP gráficos del sitio Web Creation Guide para completar los ■ Carpetas Web y Mis sitios de red proyectos de las lecciones 6 ■ Asistentes para publicación en Web y 7 de este curso). ■ Interfaces de ISP y editores HTML ■ Exploradores En realidad no hay que darle más vueltas: va a tener que usar algún método para exponer sus páginas. Después de todo, una de las transacciones más comunes que los diseñadores Web tienen con un servidor es cargar documentos HTML, imágenes y archivos multimedia. Por lo tanto, siga leyendo. El proceso de carga es bastante sencillo siempre que tenga en mente su objetivo principal, que es pasar los archivos de su equipo a un servidor de una manera organizada. Siempre que carga archivos de su escritorio a Internet, utiliza FTP. El truco para Jerga: FTP es un protocolo cliente-servidor que permite transferir archivos con FTP es usar una aplicación o interfaz que esté diseñada usar un equipo para transferir específicamente para servir como agente FTP. Aunque ese “truco” no parece archivos entre equipos en muy agudo, afirmar lo obvio también merece el espacio necesario para clarificar Internet. lo que significa usar FTP. Hemos visto que las personas ponen los ojos en blanco tan pronto como pronunciamos esas tres misteriosas letras: F-T-P. Por suerte, al igual que con otras tecnologías de creación de páginas Web, el uso de FTP para cargar archivos de páginas Web no es en absoluto amedrentador una vez que se haya puesto al día en unos cuantos conceptos básicos.

215 Aplicaciones FTP En nuestra opinión, las aplicaciones FTP estándar proporcionan uno de los métodos más sencillos para cargar archivos en Internet. En apariencia, no lo debemos de pensar sólo nosotros porque hay trillones de aplicaciones FTP disponibles en forma de software gratuito, shareware y software comercial. Principalmente, usamos un programa denominado CuteFTP para PCs que se basan en Microsoft Windows y Fetch para equipos Macintosh. Pero puede encontrar otras muchas aplicaciones FTP en línea (que se pueden descargar y también comprar) y en tiendas de software informático. Sugerencia Debería poder adquirir un buen programa FTP por un precio muy razonable. En general, comprar una aplicación FTP significa que dispondrá de una mayor funcionalidad en comparación con las utilidades de shareware y de software gratuito más limitadas. Tenga en cuenta que, probablemente, su ISP le proporcione una aplicación FTP con su paquete de inicio. Si es así, póngase en contacto con su proveedor u hojee la documentación del ISP para encontrar las instrucciones específicas de la aplicación. La figura 8-1 muestra la interfaz de CuteFTP, que es una interfaz de aplicación FTP bastante típica. Figura 8-1. Con CuteFTP, puede arrastrar los archivos desde su equipo a un directorio de su servidor.

216 El atractivo de las aplicaciones FTP más recientes es que puede arrastrar y colocar los archivos que desee cargar de una venta a otra. Por ejemplo, en CuteFTP, puede mostrar una carpeta local en el panel de la izquierda (en la figura 8-1 se muestra la carpeta music creada en el proyecto de la lección 6) y el espacio del servidor en el panel de la derecha. Para cargar los archivos de sus páginas Web, basta con que seleccione y arrastre los archivos o carpetas del panel de la izquierda al de la derecha. Hemos escuchado decir a muchos usuarios que la parte más intimidante de la utilización de una aplicación FTP es configurar la conexión inicial. Por suerte, una vez que configure inicialmente una conexión, la mayoría de las aplicaciones FTP conserva los datos de conexión “archivados” para utilizarlos en el futuro. Advertencia Cuidado: si usa un programa shareware y transcurre el tiempo asignado para la prueba, corre el riesgo de perder la información de configuración de sus conexiones FTP. Si sucede esto, tiene dos opciones: puede comprar una copia con licencia del programa de shareware o (en algunos casos) puede retrasar temporalmente el reloj del sistema de modo que pueda abrir la aplicación de shareware y recuperar la información de su configuración. Incluso aunque cada aplicación FTP tiene una interfaz personalizada para reunir la información de las cuentas, tendrá que proporcionar ciertos datos básicos para establecer una conexión FTP con un servidor con independencia de la aplicación que use: ■ Etiqueta del sitio FTP Nombre que proporciona para la cuenta FTP que está creando. El único propósito de la etiqueta del sitio es ayudarle a recordar qué cuenta FTP se corresponde con cada servidor. Denomine sus conexiones de forma lógica. ■ Dirección de host FTP La dirección de su espacio en el servidor. Por ejemplo, la dirección de host del sitio Creation Guide es ftp.creationguide.com. ■ Nombre de usuario del sitio FTP El nombre de usuario que utiliza para tener acceso a su espacio en el servidor. Generalmente, el nombre de usuario de un sitio FTP es el mismo que su dirección de correo electrónico, por ejemplo admin@creationguide.com. Algunos proveedores permiten especificar el nombre de usuario sin la parte @dominio.com y, en este caso, en el ejemplo anterior sólo se necesitaría indicar admin. ■ Contraseña del sitio FTP Una contraseña asociada con su nombre de usuario que le permite tener acceso a su espacio en el servidor.

217 ¡Pruébelo! Visite www.tucows.com (en inglés) o www.download.com (en inglés) para encontrar listas de programas FTP disponibles. Descargue e instale el programa FTP que prefiera y, después, ponga la aplicación a prueba. Siempre puede desinstalar el programa FTP que haya descargado y probar otro si el que elija no se adapta a su estilo de trabajo. Si encuentra un programa shareware que le guste, no olvide registrarlo. En numerosos formularios de conexión FTP, también se le preguntará si desea transferir la información en ASCII, en formato binario o con detección automática. La forma predeterminada suele ser la detección automática (o alguna variación de ese término) y le recomendamos que la conserve siempre que sea posible. Nota Podría ser aconsejable que anote su contraseña y la guarde en algún lugar seguro (que no sea su equipo). Cuando la especifique en las aplicaciones FTP y en la mayor parte de los asistentes para publicación en Web, en su lugar se muestran puntos. Para crear una conexión FTP, debe insertar la información apropiada en los campos respectivos (en CuteFTP, en el cuadro de diálogo Configuración del sitio para el nuevo sitio) y, para finalizar la configuración, haga clic en Aceptar, en Finalizar o en Conectar (según la aplicación). Cuando configure una conexión FTP al espacio del servidor, puede conectarse a Internet, activar la conexión FTP y cargar las páginas. (Llame a su ISP o visite sus páginas de ayuda si tiene algún problema al conectarse.) Nota Los archivos HTML se deben transferir en modo ASCII, de texto o DOS. Todos los archivos, incluidos las imágenes, los sonidos y los vídeos, se deben transferir en modo binario. Comprobar que la opción Automático, Detección automática, Todos los archivos o Datos sin formato está seleccionada en las opciones de su aplicación FTP generalmente significa que la aplicación puede diferenciar entre los tipos de archivo comunes, de forma que no tendrá que preocuparse de especificar si se trata de imágenes o archivos HTML. De forma predeterminada, CuteFTP (y casi todas las demás aplicaciones FTP) se configura para detectar automáticamente los tipos de archivo comunes.

218 En este punto, nos gustaría mencionar un par de reglas que debe seguir religiosamente al copiar los archivos de sus páginas Web a un servidor. No puede copiar los archivos y las carpetas de cualquier modo: tendrá que seguir el proceso de forma ordenada o, de lo contrario, se arriesga a crear vínculos erróneos y sobrescribir por error archivos que tengan el mismo nombre. (Por ejemplo, la mayor parte de las subcarpetas contienen un archivo denominado index.html; si no carga los archivos en las carpetas adecuadas, podría reemplazar un archivo index.html inadvertidamente con otro del mismo nombre que no tenga nada que ver.) Aquí tiene el punto clave que debe recordar cuando cargue sus páginas Web: conserve la estructura de carpetas y archivos de sus páginas Web. En otras palabras, si su página Web consta de un documento índice.html y de una carpeta denominada imágenes, asegúrese de cargar el archivo índice.html y copiar después la carpeta imágenes o volver a crearla en el espacio en el servidor y copiar los gráficos almacenados en su carpeta imágenes local a la carpeta imágenes en línea. Como hemos mencionado, conservar la estructura de su sitio es crucial para evitar que los vínculos sean erróneos en las páginas. Éste es otro punto extremadamente importante: denomine a las carpetas en línea exactamente con los mismos nombres que sus carpetas locales. No cambie el nombre de ninguna carpeta o archive cuando las cargue, en especial, no cambie el nombre de ninguna carpeta que contenga imágenes de páginas Web. (Por cierto, la creación accidental de una carpeta denominada imagen si se debe llamar imágenes constituye un cambio de nombre; asimismo, alterar las mayúsculas y minúsculas, y quitar espacios dentro de los nombres de archivos o carpetas también se califica como una práctica inaceptable de cambio de nombre.) El motivo para conservar la estructura de denominación existente es sencilla: su documento HTML probablemente contenga comandos HTML que indican a los exploradores dónde buscar los gráficos. Las instrucciones de imágenes (contenidas dentro de la etiqueta <IMG>, si trabajó en el proyecto HTML de la lección 6) señalan específicamente a las imágenes almacenadas en una carpeta con un nombre concreto. Si cambia el nombre de una carpeta sin cambiar los comandos HTML, los exploradores no sabrán dónde buscar los gráficos de la página Web y no se mostrarán en ella. De nuevo, el momento de cargar las carpetas y los archivos de las páginas Web no es el apropiado para cambiarles el nombre. De hecho, lo opuesto sí que es cierto: cuando cargue los archivos de una página Web en un servidor, debe replicar su configuración de la forma más exacta posible.

219 Cuando haya copiado correctamente los archivos de sus páginas Web en un servidor, termine su conexión FTP, abra el explorador y especifique la dirección URL de la página Web en la barra de direcciones del explorador. La dirección URL de la página Web es similar a la dirección FTP que mencionamos anteriormente, excepto en que aparece www en lugar de ftp (por ejemplo, la dirección FTP para el sitio Creation Guide es ftp.creationguide.com mientras que la dirección Web es www.creationguide.com). Si ha cargado un documento HTML index.htm o index.html en el directorio raíz del dominio, debería poder tener acceso a su nueva página principal especificando su dirección URL en la barra de direcciones del explorador sin tener que escribir un nombre de archivo. Por ejemplo, puede escribir simplemente www.creationguide.com en lugar de www.creationguide.com/index.html para ver la página principal de Creation Guide. Como puede ver, la mayor parte de las aplicaciones FTP sirven para el único propósito de proporcionar un medio de transferir y tratar (cambiar el nombre, eliminar, mover, etcétera) archivos a través de una red. Si está buscando otras opciones de transferencia de archivos o una solución más automatizada, encontrará que numerosas aplicaciones tienen integradas funciones FTP, como va a descubrir en la sección siguiente. Sugerencia Los ISP suelen indicarle dónde debe almacenar los archivos de sus páginas Web dentro de su espacio en un servidor. En nuestro espacio en un servidor para el sitio Creation Guide, copiamos toda nuestra información en una carpeta generada por el ISP denominada web. Consulte a su ISP si debe trabajar dentro de parámetros similares. Algunos ISP simplemente le proporcionan la carpeta de nivel superior que puede usar para almacenar los archivos de sus páginas Web. Carpetas Web y Mis sitios de red Jerga: Mis sitios de red Microsoft proporciona otro método para cargar y administrar los archivos y permite crear accesos carpetas de un sitio Web: usar Mis sitios de red para crear y administrar sitios directos en el escritorio a que contienen carpetas y archivos Web. Mis sitios de red se incluyó por primera archivos y carpetas que se encuentran en Internet o en vez en Microsoft Office 2000 y se sigue incluyendo en Office 2002 (antes de un servidor de una intranet. Office 2000, la característica se conocía estrictamente como Carpetas Web y era un poco más engorrosa que Mis sitios de red). Con Mis sitios de red, podrá usar la conocida interfaz de Windows para realizar las tareas de administración de archivos y carpetas necesarias para crear y mantener un sitio Web.

220 Advertencia Para poder configurar un vínculo a su espacio Web en Mis sitios de red, debe comprobar que el servidor Web admite sitios de red. La característica sitios de red requiere el protocolo Web Extender Client (WEC) y extensiones de Microsoft FrontPage, o el protocolo WebDAV y Servicios de Internet Information Server (IIS). Llame a su servicio de alojamiento de sitios Web o consulte las páginas de preguntas más frecuentes en línea del mismo para comprobar si su espacio Web está preparado para aprovechar la tecnología de sitios de red. Sugerencia Puede que tenga que activar las extensiones de FrontPage en el servicio de alojamiento para crear un sitio de red. Aunque esta tarea puede parecer algo desalentadora, probablemente sea cuestión de unos pocos clics del mouse (ratón) (en función de si su servicio de alojamiento admite el sitio Web). Para averiguar cómo usar Extensiones de servidor de FrontPage en el servicio de alojamiento, realice una búsqueda rápida en la sección de soporte técnico del mismo o llame a su número de soporte técnico. Básicamente, cuando usa la característica de sitios de red, puede crear accesos directos a las ubicaciones de red que contienen las carpetas almacenadas en su espacio Web. Después de crear un vínculo a un sitio de red, puede tratar el contenido de las carpetas Web almacenadas en su espacio Web (generalmente, éste es el espacio que adquiere en el servidor de su servicio de alojamiento) igual que trata los archivos y carpetas locales. La diferencia radica en que los cambios efectuados en los archivos de una carpeta Web se realizan en los archivos en línea cuando se guardan los cambios. En resumen, un sitio de red sirve como acceso directo a las carpetas Web (y al contenido de las mismas) en su espacio en el servidor. Puede tener acceso a los sitios de red y a las carpetas Web de dos formas. En concreto, puede: ■ Mostrar sus sitios de red directamente, haciendo doble clic en Mis sitios de red, en el escritorio, o eligiendo Mis sitios de red en el menú Inicio, lo que permite crear nuevos sitios de red y abrir los vínculos existentes. ■ Crear un sitio de red nuevo o vincularlo a un sitio de red existente desde dentro de una aplicación de Office, como en Microsoft Word. Cuando configura un sitio de red o lo vincula, puede guardar los archivos y carpetas directamente en el sitio de red desde dentro de la aplicación.

221 Nota En vistas diferentes a Mis sitios de red, Windows también proporciona las opciones Publicar esta carpeta en Web o Publicar este archivo en Web (dependiendo del tipo de elemento que esté seleccionado en ese momento), según se describe más adelante en esta sección. Cuando selecciona una carpeta o un archivo, y hace clic en alguna de las opciones anteriores, Windows le permite copiar la carpeta o el archivo en un espacio de almacenamiento Web, como MSN o Xdrive Plus. Esta característica sirve a los usuarios que desean compartir, transferir y almacenar documentos codificados en un lenguaje distinto a HMTL en el Web además de páginas Web e imágenes. Como hemos mencionado, puede ver sus sitios de red si abre Mis sitios de red, según se ilustra en la figura 8-2. Observe que Mis sitios de red incluye un vínculo denominado Agregar un sitio de red en la sección Tareas de red, en el lateral izquierdo de la ventana. (¡Probablemente pueda adivinar el propósito de esta pequeña joya!) Figura 8-2. Puede tener acceso a sitios de red y carpetas Web y configurarlos desde la ventana Mis sitios de red. Cuando abra una carpeta de sitio de red y examine su contenido, verá una lista de las carpetas y archivos en línea junto con sus direcciones Web asociadas (direcciones URL), según se ilustra en la figura 8-3. Dentro de la carpeta Web, puede mover, copiar, cambiar el nombre y eliminar carpetas y archivos además de ver sus propiedades. También puede arrastrar los archivos entre servidores Web (si tiene varios sitios Web) y entre un servidor Web y el disco duro u otro dispositivo de almacenamiento (como un disquete). En otras palabras, las carpetas Web hacen que la administración de los archivos del sitio Web sea tan sencilla como la administración de los archivos locales.

222 Figura 8-3. Ver el contenido de una carpeta Web es similar a ver el contenido de las carpetas del escritorio. Ahora vamos a echar un vistazo rápido a dos métodos que puede utilizar para crear sitios de red en el sistema. En ambos casos, necesitará la información siguiente: ■ La información de dominio, que es la dirección Internet de su sitio Web (por ejemplo, www.creationguide.com). ■ El nombre de usuario y la contraseña para tener acceso a su espacio en el servidor Creación de un sitio de red mediante Mis sitios de red Para crear un sitio de red con Mis sitios de red, siga estos pasos: 1 En el escritorio de Microsoft Windows XP, haga doble clic en Mis sitios de red o haga clic en Mis sitios de red en el menú Inicio, y haga clic en el vínculo Agregar un sitio de red en la sección Tareas de red. 2 En el Asistente para agregar sitio de red, haga clic en Siguiente. El Asistente para agregar sitio de red tiene acceso a Internet y, después, proporciona una opción para configurar un sitio de red en MSN o en otra ubicación de red. En la mayor parte de los casos, configurará un sitio de red en otra ubicación diferente al sitio Web de MSN. 3 Seleccione la opción Elija otra ubicación de red y haga clic en Siguiente. 4 En el cuadro de texto Dirección de red o Internet, escriba la dirección de Internet de su ubicación de red (por ejemplo, www.creationguide.com). 5 Haga clic en Siguiente. Si su espacio Web requiere que escriba un nombre de usuario y la contraseña, verá un cuadro de diálogo donde se solicite esta información, como se muestra en la figura 8-4.

223 Figura 8-4. En la mayoría de los casos, tendrá que especificar su nombre de usuario y la contraseña al crear un sitio de red. 6 Escriba su nombre de usuario y contraseña, y haga clic en Aceptar. 7 Escriba un nombre para el sitio de red en el cuadro de texto Escriba un nombre para este sitio de red (por ejemplo, Creation Guide). El nombre que especifique aquí se muestra en la ventana Mis sitios de red, de modo que sea amable consigo mismo y elija un nombre que siga teniendo sentido más adelante. 8 Haga clic en Siguiente y, después, en Finalizar para completar el proceso. Ahora debería ver un vínculo de sitio de red en su carpeta Mis sitios de red. Puede hacer doble clic en el icono de sitio de red para tener acceso al espacio Web del sitio de red. Si tiene problemas al configurar la conexión, compruebe que el servidor Web tiene la configuración apropiada para controlar los sitios de red (como se menciona anteriormente en esta lección). Ahora que ha creado la carpeta Web, puede transferir los archivos a su sitio Web arrastrándolos a su carpeta Web en su sitio de red recién creado o guardándolos directamente desde cualquier programa de Office 2000 o de una versión posterior. Descubrirá que puede usar sitios de red para modificar y mantener sus páginas Web en diversas formas. Por ejemplo, podrá abrir un sitio de red y hacer clic con el botón secundario del mouse en los nombres de archivo y carpetas para cambiarles el nombre, seleccionar y eliminar archivos y carpetas, reemplazar archivos y carpetas con información actualizada, y modificar de alguna otra forma los documentos de páginas Web y directorios.

224 Creación de un sitio de red desde Word Para crear una carpeta Web mientras trabaja en Word, puede hacer clic en Agregar sitio de red en el panel de tareas de Nuevo documento (haga clic en Nuevo en el menú Archivo) o puede crear un sitio de red con el cuadro de diálogo Guardar como. En los pasos siguientes, le mostramos cómo crear un sitio de red con el cuadro de diálogo Guardar como, pero los pasos para crear un sitio de red desde el elemento Agregar sitio de red en el panel de tareas Nuevo documento son muy similares. 1 En Word, haga clic en Archivo y, después, en Guardar como. Aparece el cuadro de diálogo Guardar como. 2 En el cuadro de diálogo Guardar como, haga clic en el icono Mis sitios de red en el panel Guardar en para mostrar el contenido de la ventana Mis sitios de red, como se ilustra en la figura 8-5. Figura 8-5. Puede usar el cuadro de diálogo Guardar como para crear un sitio de red.

225 3 En el cuadro de diálogo Guardar como, haga doble clic en el icono Agregar sitios de red (mostrado en la figura 8-5). El Asistente para agregar sitio de red se abre, según se muestra en la figura 8-6. Figura 8-6. Tiene la opción de crear un vínculo a un sitio de red o crear una carpeta nueva en un sitio de red. Cuando haya creado un 4 Elija la opción Crear acceso directo a un elemento de Sitio de red acceso directo a una existente, si desea crear un vínculo a su espacio Web, y haga clic en ubicación de red, (según se describe en el paso 5), Siguiente. podrá tener acceso al sitio 5 En el cuadro de texto Ubicación, especifique la dirección de su sitio de red en el cuadro de diálogo Guardar como y a Web (por ejemplo, www.creationguide.com) y, en el cuadro de texto la ventana Mis sitios de red Nombre de acceso directo, escriba un nombre para la conexión, si hace doble clic en el icono como se ilustra en la imagen 8-7, y haga clic en Finalizar. de la ubicación.

226 Figura 8-7. En este procedimiento, escribe la dirección de Internet del sitio de red y el nombre del acceso directo en un cuadro de diálogo. 6 Escriba su nombre de usuario y contraseña, y haga clic en Aceptar. El contenido del sitio de red se muestra en el cuadro de diálogo Guardar como. Ahora, puede guardar su documento de Word en una carpeta Web del sitio de red (y, de ese modo, cargar su página Web) en la misma forma que guarda otros documentos de Word. Tendrá que establecer una 7 En el cuadro de lista desplegable Guardar como tipo, especifique conexión a Internet para Página Web o Página Web, filtrada, especifique el nombre del poder guardar un documento documento en el cuadro de texto Nombre de archivo, haga clic en Web en un sitio de red. el botón Cambiar título si desea especificar el texto del título de la página Web, haga clic en la carpeta Web en la que desee exponer el documento HTML y haga clic en Guardar. Después de guardar un documento HTML en una carpeta Web de un sitio de red, puede ver la página en línea si especifica la dirección de la página Web en la barra de direcciones del explorador.

227 Otras opciones aparte de FTP Aunque no desee instalar un programa FTP en su equipo o configurar Mis sitios de red y Carpetas Web, no está todo perdido. Puede copiar los archivos en un servidor Web igualmente de otras formas. En concreto, puede usar las funciones FTP integradas en alguno de los siguientes tipos de aplicaciones: ■ Asistentes para publicación en Web, como el Asistente para publicación en Web incluido con Windows ■ Los servicios en línea de los ISP y editores HTML, como FrontPage ■ Exploradores, como Microsoft Internet Explorer Asistentes para publicación en Web El Asistente para publicación en Web ofrecido en Windows XP sirve principalmente para permitir el almacenamiento de los archivos y proporcionar funciones para usar los archivos de forma compartida. Por lo tanto, esta herramienta no es la ideal para publicar páginas Web (a menos que esté trabajando en un sitio de un grupo de MSN). Pero puede cargar y almacenar fácilmente los documentos Web y otros archivos (incluidas las imágenes) mediante el Asistente para publicación en Web en Windows. Es posible que desee usar esta característica mientras crea documentos como medio de almacenamiento de reserva o para compartir con otros los documentos en los que trabaja. El Asistente para publicación en Web funciona de la misma forma que otros asistentes: proporciona una serie de cuadros de diálogo que se deben completar para cargar una carpeta o archivo o un proveedor de servicios en línea, como MSN o Xdrive. Si se convierte en un diseñador Web “serio” y tiene su propio espacio en el Web, rápidamente ansiará poder usar la mayor flexibilidad (y simplicidad) que ofrecen las aplicaciones FTP y la herramienta de sitios de red. De nuevo, el Asistente para publicación en Web puede constituir un medio viable cuando llegue el momento de almacenar y compartir archivos así como, posiblemente, publicar su primer sitio Web en MSN. El Asistente para publicación La mejor forma de entender cómo funciona el Asistente para publicación en en Web está disponible en la Web es seguir el proceso. Puesto que el proceso se sigue con los formularios mayor parte de las versiones del asistente, no hay ningún motivo para mostrarle las páginas que puede ver en de Windows; se agregó por primera vez a Windows en su equipo. Para tener acceso al asistente, complete los pasos siguientes: la versión OSR2.5 de 1 Abra Mi PC y seleccione un archivo o carpeta que desee publicar Windows 95. en su espacio Web. 2 En la sección Tareas de archivo y carpeta, haga clic en Publicar esta carpeta en Web (si ha seleccionado una carpeta) o en Publicar este archivo en Web (si ha seleccionado un archivo).

228 Para iniciar el asistente, haga clic en el botón Siguiente. A continuación, prosiga a través de cada página y proporcione la información apropiada. Cuando seleccione publicar una carpeta, el asistente presenta un cuadro de diálogo en el que puede elegir los archivos que desee publicar activando o desactivando las casillas de verificación, como se muestra en la figura 8-8. Cuando haya completado todos los formularios del asistente, tendrá que hacer clic en Finalizar para cargar sus archivos. Si tiene la información correcta, el proceso debe llevarse a cabo sin problemas y la información recién agregada se mostrará en el explorador de forma predeterminada. Figura 8-8. El Asistente para publicación en Web proporciona la oportunidad de elegir los archivos que desee cargar dentro de una carpeta seleccionada.

229 ¡Pruébelo! Seleccione un archivo o carpeta que desee cargar en el Web. A continuación, siga el proceso del Asistente para publicación en Web para practicar la carga de un archivo o carpeta en una carpeta personal de MSN. Cuando coloque archivos en una carpeta personal de MSN, sólo podrá tener acceso a ellos con su cuenta de .NET Passport. Si no tiene una cuenta de Passport, el Asistente de .NET Passport le ayuda a crear una cuando publica un archivo o carpeta en MSN. Después de publicar un archivo o carpeta, se agrega un vínculo al recurso en la ventana Mis sitios de red. Asimismo, puede tener acceso a los archivos y carpetas desde cualquier explorador Web de cualquier equipo y puede agregar y eliminar archivos de su carpeta en línea (para tener acceso al contenido de la carpeta, haga doble clic en el vínculo en la ventana Mis sitios de red) de la misma forma que agrega y elimina los archivos y carpetas locales. Características de editores HTML e interfaces de ISP Otros recursos para transferir archivos son las interfaces de los ISP y los editores HTML. En esencia, estas herramientas son variaciones o híbridos de aplicaciones FTP, la característica de sitios de red y el Asistente para publicación en Web. Las ventanas principales de las características de los ISP y de los editores HTML son que las herramientas suelen ser fácilmente accesibles. Por ejemplo, algunos ISP ofrecen formularios que puede usar para cargar los archivos desde su equipo al servidor. De hecho, el host de Creation Guide proporciona un formulario, pero nos ha parecido complejo, por lo que no lo usamos nunca para administrar los archivos del sitio. Si va a comprar un servicio de alojamiento, investigue los servicios de administración de archivos que ofrece. Nuestro servicio de alojamiento proporciona varias características de calidad, por ejemplo, estadísticas de registro (como el seguimiento del número de visitas a una página y la cantidad de visitantes) y mucho espacio, de modo que pasamos por alto la característica algo insuficiente del administrador de archivos porque sabíamos que podíamos conseguir unas cuantas páginas a través de una aplicación FTP con bastante rapidez. En nuestra opinión, si piensa usar una interfaz de transferencia de archivos de un ISP, compruebe que la herramienta en línea sea al menos tan intuitiva como una aplicación FTP o como el Asistente para publicación en Web.

230 Igual que los formularios FTP en línea de un ISP, varios editores HTML, incluido FrontPage, ofrecen características de carga de archivos automática (como se explica en la lección 7). El uso de un editor HTML para cargar archivos puede ser extremadamente útil. Lo principal es que debe conocer exactamente los archivos que se cargan y dónde. Además, debe saber cuándo reemplaza los archivos en línea existentes (lo que siempre es aconsejable independientemente de cómo cargue los archivos); de lo contrario, es posible que no pueda volver a usar una página anterior si decide que no desea conservar las modificaciones más recientes. Como ilustración, si usa Internet Explorer y tiene instalado FrontPage, puede visitar su sitio Web y hacer clic en el botón Edición, en la barra de herramientas de Internet Explorer, para abrir una versión local de su página Web en FrontPage. A continuación, puede hacer modificaciones en la página y hacer clic en Guardar para guardar y cargar la página modificada directamente en el servidor. Cuando haga esto, si no cambia el nombre de la página recién modificada, la página existente se reemplaza con la actualizada. Por lo tanto, generalmente reservamos esta característica para correcciones sencillas, por ejemplo, en errores tipográficos o en la actualización de fechas. Cuando modifique y guarde una página con la característica de acceso en línea de FrontPage, sobrescribirá su documento HTML existente. Debe tener esto en cuenta. Sugerencia Debe usar el comando Publicar Web de FrontPage para cargar inicialmente las páginas Web que creó en esta utilidad. El uso de la herramienta de publicación de FrontPage garantiza que las características de FrontPage que se basan en Extensiones de servidor de FrontPage se implementen correctamente. Incluso si no ha agregado ninguna capacidad avanzada a sus páginas Web de FrontPage, le recomendamos encarecidamente que use el comando Publicar Web para cargar su sitio Web, al menos la primera vez. Para aprender a usar los formularios de los ISP o las características de carga de un editor HTML, remítase a los archivos de ayuda de la aplicación o a la documentación publicada. Hay demasiadas variaciones entre los sistemas como para proporcionar una descripción adecuada de cada procedimiento en esta lección.

231 Exploradores como clientes FTP Para tener acceso a la Por último, puede usar exploradores como clientes FTP (dependiendo de la característica de carga de configuración de su servidor Web). La mayor parte de las personas saben que archivos de AOL, use la pueden descargar archivos desde la ventana de un explorador pero pocas conocen palabra clave “myplace” o “myftpspace”. Si va a crear que también pueden cargar archivos y carpetas en algunos exploradores, incluido una página en AOL, la Internet Explorer. Tenga en cuenta que su servicio de alojamiento debe admitir dirección URL de su página esta característica; nos hemos encontrado que algunos sitios se ocupan de las Web será members.aol.com/ cargas de los exploradores mejor que otros. Si su servicio de alojamiento screenname/nombredearchivo . funciona bien con esta característica, el método es sencillo: debe usar la barra de direcciones para mostrar el contenido de la carpeta de su servidor y, después, arrastrar los archivos desde las carpetas locales a las del servidor que se muestran en la ventana del explorador. Asimismo, puede hacer clic con el botón secundario del mouse en los archivos y carpetas en línea para tener acceso a un menú contextual que le permita cambiar el nombre, mover y eliminar los archivos en línea. Para mostrar sus carpetas en línea, debe especificar la información siguiente en la barra de direcciones de Internet Explorer: ftp://nombredeusuario:contraseña@ftp.dominio.com. Por ejemplo, una entrada podría tener la apariencia siguiente: ftp:// mmail:cafe2@ftp.microsoft.com o ftp://mmail:cafe2@miembros.nombreISP.com. Cuando aparezca el espacio en el servidor, abra la carpeta que contenga los archivos de sus páginas Web y arrastre los archivos y carpetas a la ventana del explorador para copiar los componentes de la página Web. En la figura 8-9 se muestra el acceso FTP a una carpeta Web. Puede cargar, eliminar y cambiar el nombre de los archivos Web dentro de Internet Explorer. Figura 8-9. Dependiendo de la configuración del servidor Web, en ocasiones puede usar Internet Explorer para transferir y administrar archivos Web.

232 En esta lección, introducimos varias herramientas que puede usar para transferir los archivos locales de sus páginas Web a un servidor. Pruebe algunas opciones y vea cuáles funcionan mejor en su caso. Puesto que existen numerosas variaciones dentro de cada categoría, estaríamos emprendiendo una tarea poco realista si intentáramos describir cada aspecto de todos los medios existentes para transferir archivos a Internet. Lo mejor que puede hacer es elegir qué estilo de carga desea intentar y probarlo a continuación. Si se le plantean dudas, visite los archivos de ayuda de la aplicación o la documentación impresa (o envíenos un mensaje por correo electrónico, si está realmente atascado). Si no le gusta algún proceso, pruebe con otro. Confiamos en que, si recopila la información apropiada para la conexión y la especifica correctamente, podrá conectarse a su espacio Web y conseguir que sus páginas aparezcan en línea. Revisión de su trabajo Cuando haya cargado las páginas Web, lo primero que debe hacer es explorarlas y comprobar la presentación de su sitio Web. Como explicamos en las lecciones 6 y 7, debe obtener una vista previa de sus páginas Web en todo el proceso de creación y aquí se considera la fase de carga del mismo. Por tanto, compruebe sus páginas en “el mundo real”. Si ha tenido cuidado, no debería encontrarse demasiadas sorpresas cuando ponga sus páginas en Internet. No obstante, antes de empezar a llamar a sus amigos y dirigir a la gente a su sitio Web (a menos que les pida que lo revisen), debe ver las páginas Web. Cuando muestre la página principal, compruebe los detalles siguientes: ■ Compruebe que todas las imágenes se presentan de forma adecuada. No desea que aparezca ningún marcador de imagen errónea en su página. ■ Haga clic en sus vínculos para comprobar que funcionan, incluidos los botones de la barra de exploración, los gráficos de los logotipos vinculados, los vínculos de texto y los mapas de imágenes, si aparecen en su página. ■ Compruebe si la página y sus elementos caben dentro de la ventana estándar del explorador. Recuerde que los usuarios consideran muy molesto tener que desplazarse a la izquierda y la derecha para ver una página Web. ■ Complete y envíese un formulario de prueba a usted mismo si se usan formularios en su sitio. ■ Lea el título de cada página y la barra de título para comprobar su precisión. ■ Compruebe que el texto y los vínculos de texto son fáciles de leer en comparación con los fondos de las páginas Web.

233 Básicamente, tómese tiempo para examinar su sitio. Haga clic en todas partes, pruebe cada elemento interactivo y emplee su ojo crítico. Es mejor tomarse un poco más de tiempo comprobando su trabajo después de cargar una página que un visitante le envíe un mensaje para decirle que su sitio Web es poco útil porque no se ve bien o no responde como debía. La última tarea posterior a la fase de creación que abarcamos en esta lección es comunicar que su sitio Web existe. La forma más común de empezar a publicitar un sitio es comprobar que los motores y directorios de búsqueda ya pueden reconocer su página Web. Puntos clave ■ Puede usar aplicaciones FTP para copiar archivos desde su equipo a un servidor. ■ Puede transferir archivos y carpetas mediante aplicaciones FTP, sitios de red y carpetas Web, el Asistente para publicación en Web, formularios en línea de ISP, editores HTML y exploradores, como Internet Explorer. ■ Si su servidor admite sitios de red, puede usar la característica Mis sitios de red para cargar y tratar con facilidad sus archivos y carpetas de su sitio Web del mismo modo que administra las carpetas locales. ■ Al cargar archivos Web en un servidor, conserve la estructura de archivos y carpetas de su sitio Web, incluyendo los parámetros exactos de denominación y organizativos de los archivos y carpetas del equipo local. ■ Cuando haya cargado páginas Web, véalas siempre en línea para comprobar si contienen errores o vínculos erróneos. ■ Para publicitar su sitio Web, regístrese en motores de búsqueda. ■ Considere agregar etiquetas META a sus documentos HTML para controlar en cierta medida la forma en que los motores de búsqueda clasifican el sitio. ■ Finalmente, deje que los demás sepan que su sitio está activo, mediante el boca a boca y a través de otros canales de comunicación típicos, ¡y comience el intercambio de información en línea!

Diseno web basico

by Jose Manuel Pozo Carlos on Oct 11, 2010

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Diseno web basico Document Transcript