Este documento presenta un curso sobre diseño web que consta de 8 lecciones. Cada lección cubre un tema diferente relacionado con el diseño web, como páginas principales, creación de texto y arte para la web, herramientas de diseño web, y HTML básico. El documento también describe los objetivos del curso, cómo está organizado, los requisitos técnicos necesarios y los archivos de práctica incluidos para que los estudiantes apliquen lo que aprenden.

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
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
■ 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
■ 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
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
■ 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
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
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
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
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
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
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
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
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
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
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
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
¡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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
la página actual para tener acceso a los vínculos principales de
exploración.

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
■ 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
■ 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
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
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
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
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
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
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
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
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
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.