Diseno web basico

3,369 views

Published on

Tutoriales Mi curso en linea

Published in: Education
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
3,369
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Diseno web basico

  1. 1. 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. 2. 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. 3. 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. 4. 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. 5. 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. 6. 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. 7. 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. 8. 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. 9. 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. 10. 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. 11. 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. 12. 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. 13. 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. 14. 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. 15. 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. 16. 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. 17. 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. 18. 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. 19. 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. 20. 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. 21. 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. 22. 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. 23. 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. 24. 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. 25. 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. 26. 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. 27. 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. 28. 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. 29. 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. 30. 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. 31. 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. 32. 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. 33. 33 la página actual para tener acceso a los vínculos principales de exploración.
  34. 34. 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. 35. 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. 36. 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. 37. 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. 38. 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. 39. 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. 40. 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. 41. 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. 42. 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. 43. 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. 44. 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. 45. 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.

×