Mult 1

MULT - I - diseño multimedia I
EDUBP | PER | tercer cuatrimestre
EDUBP | PERIODISMO Y NUEVOS MEDIOS| diseño multimedia I - pag. 1

í ndice
 presentación 3
 programa 5
contenido módulos

 mapa conceptual 7

 macroobjetivos 8
 agenda 8
 material 9
material básico
material complementario
 glosario 12
 módulos *
m1 | 15
m2 | 27
m3 | 49
m4 | 97

* cada módulo contiene:
microobjetivos
contenidos
mapa conceptual
material
actividades
glosario

 evaluación 127
impresión total del documento 127 páginas !
EDUBP | PERIODISMO Y NUEVOS MEDIOS | diseño multimedia I - pag.2

p r e s e n t ación
¡Bienvenidos a Diseño Multimedia I! En esta asignatura, nos adentraremos en el

mundo del Diseño Interactivo.
Usted ya conoce, por el mero hecho de navegar por Internet, sitios web que uti-
lizan distintos recursos visuales, audibles, textos, donde la interacción es un ele-
mento clave desde la llegada de la web 2.0. Pero, ¿qué entendemos por Diseño
Interactivo exactamente? En los próximos párrafos, así como en una presenta-
ción interactiva IC 1, se lo explicamos.
El concepto de Hipertexto es uno de los que darán lugar a la interacción. En el

hipertexto, “somos todos parte”, somos no sólo “lectores” sino autores. Aparece
entonces el concepto de co-autoría. El texto será uno de los componentes de lo
que llamaremos Nodos de Información. Cada página de cada sitio será pues un
nodo diferente al que se podrá acceder a partir de la interacción. ¿Pero cómo
llegamos allí?
Pues, la participación como usuarios, la decisión de cada uno de nosotros,

tendrá incidencia en los recorridos que realicemos por el mar de la web. Vere-
mos que, si la información se muestra de un modo claro, ordenado, es decir,
sabemos hacia dónde dirigirnos, estaremos ante un sitio donde la navegación
es dirigida. En cambio, encontraremos otros en los que buceamos por todos sus
rincones sin saber hacia dónde ir “en busca de la información perdida”. Se tra-
tará entonces de un tipo de navegación exploratoria. Usabilidad y Accesibilidad
serán otros de los temas que deberán abordar este cuatrimestre.
En la captura de pantalla de la versión online del periódico cordobés La Voz del

Interior www.lavoz.com.ar, podemos ver una variedad de recursos que forman
parte de la web. Hallaremos videos, fotografías, textos o titulares que nos brinda-
rán una primera idea de qué podemos encontrar allí; también veremos accesos
a dos de las redes sociales con mayor auge en la actualidad: Facebook y Twitter.
En cualquiera de estos casos, para informarnos acerca de cada uno de los temas
que se presentan de forma breve y concisa “a golpe de vista” debemos apropiar-
nos de la noticia a través de un clic sobre el tema que sea de nuestro interés. Se
hace presente el concepto de interacción, y la participación del usuario resulta
fundamental para que este periódico online tenga “razón de ser”.
La información se nos presenta de un modo no lineal, multilineal o multisecuen-

cial. Es el usuario quien determina el recorrido, el camino a seguir. Y encontrare-
mos tantos caminos como usuarios ingresen al sitio.
Estas “ideas y venidas” del usuario, serán posibles en tanto el texto presente una
serie de palabras resaltadas en otro color, por lo general en azul, y subrayadas.
Estas palabras serán los enlaces o links, que permitirán al usuario saltar entre
nodo y nodo de información.
En la página de McDonald’s, como otro ejemplo, si observa sobre el costado

izquierdo de pantalla verá una serie de ítems subrayados: son links que nos
permiten ingresar a ver el contenido, es decir, un nuevo nodo de información por
cada link.

Ahora bien, encontramos un nuevo concepto también vinculado al Diseño Inte-
ractivo, se trata de los recursos Multimedia. Y a éste se suma la Hipermedia.
Veamos de qué se trata cada uno de ellos.
Volviendo al Multimedia, éstos se conforman de texto, imagen, sonido, entre

otros de los tantos lenguajes que permite la web. Cada recurso multimedia se
encontrará alojado en un nodo de información diferente. Por ende, al comenzar
a vincular un nodo con el otro el usuario va saltando de una página web con
multimedia a otra que también tiene recursos multimedia… va tejiendo una trama
denominada hipermedia.
Ésta será una “obra abierta”, con acceso no lineal, la secuencia “se rompe”, es
decir, no hay una sola secuencia. Esto se da porque en la hipermedia no exis-
ten los llamados factores delimitadores, como sí sucede en un libro impreso. El
libro tiene una determinada cantidad de páginas, un inicio, un nudo y un des-
enlace o fin. La hipermedia es infinita, y el usuario es quien determina cuál será
el comienzo y cuál el desenlace. Se trata entonces de un soporte abierto que
puede ser ampliada por el autor-lector, donde las asociaciones para definir los
recorridos, pueden ser infinitas.
Se desdibuja entonces nuevamente la autoría centralizada, como ya hemos

visto al comienzo de esta presentación, cuando hicimos referencia al concepto
de hipertexto. La hipermedia tiene la misma estructura del hipertexto, sólo que
incorpora otro tipo de lenguajes además del escrito.
La interacción con el usuario es la que va a definir el modo de navegación del

sitio. El usuario puede navegar sin ir a ningún lado, intentando encontrar lo que
busca en el inmenso océano que es la web, aspirando no naufragar en el intento;
este usuario se encuentra en medio de una navegación exploratoria.
Aparece otro concepto, la Interfaz, representación virtual en pantalla, “la cara

visible del producto, servicio o empresa en la web”. Estética, Imagen, los vacíos
cobran protagonismo. Al hablar de Estética hacemos referencia a la proporción,
equilibrio y puntos de atención que se manejen en pantalla. Estilo y homogenei-
dad serán fundamentales a la hora de plantear no sólo una de las pantallas sino
la totalidad de páginas que conforman el sitio. Sin homogeneidad, el usuario
perderá el rumbo.
Este Usuario se dice que ojea en la web, pues no lee de punta a punta como lo
haría en un impreso en papel. Sino que escanea el texto para ver hacia dónde
inicia su recorrido. Uno de los rasgos de este Usuario es la Ansiedad, por lo que
los sitios deben ser ágiles, funcionales y “usables”.
Estos sitios o páginas podrán ser persuasivas, informativas, etc., lo importante al

pensar en el desarrollo de un sitio es no perder de vista el eje comunicacional.
Si están listos…¡a comenzar! ¡Bienvenidos a Diseño Multimedia I!
presentación| IC
información complementaria 1
La información complementaria 1 usted la encontrará disponible en Plataforma.

p r o g rama
Módulo 1: Y la nave va
Unidad 1: Navegando, interactuando, participando
Multimedia. Interactividad. Navegación. Hipermedia, hipertexto, acceso no lineal
a la información, descentralización de la autoría. Navegación exploratoria/ diri-
gida. Nodo, link, enlace, usabilidad. Los usuarios de la Web: comportamientos,
tipos, modos de lectura, preferencias (lector/ usuario/ espectador). Interactividad
e interfaz. Análisis de la interfaz. Recursos. Características compositivas, estéti-
cas y funcionales. Módulos. Texto, imágenes y botones.
Módulo 2: Planificación del sitio

Unidad 2: En busca del dominio perdido…
A qué llamamos dominio. Ejemplos. Dónde y cómo se gestiona un dominio.
Dominios con extensión edu.ar; com; com.ar; etc. Conociendo el sitio www.nic.
ar para gestionar dominios. Entidad registrante, persona responsable, quiénes
se encargan de mantener un dominio. Hosting, FTP, alojamiento web. Servicios
del hosting.
Unidad 3: Primeras líneas: comenzando a bosquejar el sitio

Maquetando el sitio web en Adobe Photoshop. Bocetando el index o página de
inicio. Index como punto de partida para las páginas restantes. Modulando la
interfaz. Elementos del sitio: encabezado, pie o footer, banner, etc. Constantes y
variables de la página. Preparando el material en Adobe Photoshop para Adobe
Dreamweaver. Revisión de formatos: JPG, GIF, PNG.
Unidad 4: Reconociendo el software Adobe Dreamweaver CS4

Tipos de archivos. Introducción al lenguaje HTML y a conceptos tales como
tablas, celdas, marcos, comportamientos, etiquetas, atributos, entre otros. Car-
peta remota y carpeta raíz o local. Introducción al mundo de Adobe Dreamweaver
CS4.
Módulo 3: Dreamweaver CS4. Conceptos básicos.

Unidad 5: Espacio de trabajo. Dreamweaver CS4.
Personalizar el entorno de trabajo. Barra de aplicaciones (menú superior):
archivo, edición, ver (modo código, dividir, diseño), insertar, modificar, formatos,
comando, sitios, ventana, ayuda. Otros botones (contiguos al menú principal).
Barra de herramientas. Barra de estado. Inspector de propiedades. Ventana del
documento. Grupos de paneles (laterales, flotantes): Insertar, Estilos CSS, Ele-
mentos PA, Inspector de etiquetas, Bases de datos, Vinculaciones, Comporta-
mientos del servidor, Componentes, Archivos, Activos, Fragmentos, Marcos e
Historial.
Unidad 6: Configuración y gestión de sitios web

Crear y administrar Sitios en Adobe Dreamweaver. Opciones básicas y avanza-
das. Procedimientos, algunos recursos.
Unidad 7: Hiperenlaces
Creación, características y propiedades. Hiperenlaces o hipervínculos. Rutas
relativas. Rutas absolutas. Ventana de destino (nueva ventana, ventana empa-
rentada, etc.). Correo electrónico como hipervínculo (configuración del vínculo).
Unidad 8: Maquetación de páginas web en Dreamweaver.

Tablas, marcos, capas y plantillas. Manejo de tablas: columnas, filas, intersec-
ción. Celdas: unir, dividir, propiedades en general. Bordes, color, relleno de

celdas. Modo de visualización standard y modo de tablas expandidas. Valores
de celdas. Marcos. Plantillas. Capas. PA: Posición Absoluta. Panel estilos CSS.
Crear hoja de Estilo (vincular).
Módulo 4: Adición y edición de contenidos en Dreamweaver CS4

Unidad 9: Textos
Atributos y estilos de textos. Personalización, formatos, cuerpos, uso del panel
Propiedades. Hojas de estilo CSS (Cascade Sheet Style). Listas y viñetas. San-
gría. Caracteres especiales.
Unidad 10: Imágenes

Manejo de imágenes. Ubicación, aplicación, ajustes, ruteo. Texto a mostrar
(accesibilidad). Botón Editar configuración de imagen. Imagen de sustitución.
Mapa de imágenes. Barra de navegación.
Unidad 11: Archivos y objetos multimedia

Animaciones. Tipos de archivos. Insertar SWF. WMode (modo de ventana). Soni-
dos y videos. Audio: MP3, WAV y MIDI. Video: AVI, MPEG y MOV. Reproducción
automática
Unidad 12: Formularios

Formularios. Insertar. Elementos: Campo de texto. Área de texto. Botón. Casilla
de verificación. Botón de opción. Botón Enviar y Borrar.
Unidad 13: Otros elementos y comportamientos

Marquesinas, fechas comportamientos.

m a p a c o n c eptual

m a c r o o b j etivos
• Comprender los conceptos de navegación, interactividad, usabilidad y

accesibilidad, bases fundamentales de nuestra materia, para aplicarlos
desde la concepción de la idea rectora hasta la realización del sitio en sí
mismo.
• Caracterizar y poder comprender el comportamiento de los usuarios en la

Web para desarrollar materiales interactivos que se ajusten a sus usos y
costumbres.
• Desarrollar la capacidad creativa y agudizar el intelecto en relación al diseño

Web, para plantear una interfaz que promueva la navegación del sitio y
potencie la interacción con el usuario.
• Conocer las herramientas básicas del programa específico, tanto como los
procesos simples y otros más complejos de diseño HTML, para aplicarlos en
el desarrollo de un sitio Web.
a genda
Porcentaje estimativo por módulo según la cantidad y complejidad de conteni-

dos y actividades:
MÓDULOS PORCENTAJES ESTIMADOS

1 22 %
2 22 %
3 34 %
4 22 %
TOTAL 100%
Representación de porcentajes en semanas:
Módulos
Semanas
1 2 3 4
1
2
3
4
5
6
7 Evaluación parcial 1
8
9
10
11
12
13
14
15 Evaluación parcial 2

m a terial
Material básico
Hipertexto/ Hipermedia/ Multimedia IC 1, Diseño visual de materiales digitales

interactivos. Seminario Soportes digitales en educación a distancia. UBP.
http://www.w3.org/standards/webdesign/htmlcss . HTML & CSS (según la W3C)
http://www.w3c.es/Divulgacion/GuiasBreves/Accesibilidad. Accesibilidad. (Con-

sulta realizada en mayo de 2012)
http://www.w3c.es/Eventos/2008/DiaW3C/Presentaciones/ayto_madrid.pdf
Excelente trabajo acerca de la Accesibilidad y Usabilidad IC 2 del sitio del Ayun-

tamiento de Madrid.
http://www.w3c.es/Presentaciones/2006/0712-estandaresGPUL-MA/.Estándares
de la W3C (World Wide Web Consortium)
http://www.w3c.es/Traducciones/es/WAI/intro/accessibility. Para ampliar el tema

Accesibilidad.
SALINAS IBAÑEZ, Jesús: Hipertexto e hipermedia en la enseñanza universitaria

IC 3. Universidad de las Islas Baleares.
SALINAS, Jesús: Multimedia en los procesos de enseñanza - aprendizaje: Ele-

mentos de discusión. Ponencia en el Encuentro de Computación Educativa. San-
tiago de Chile, 2-4 mayo de 1996. Disponible en: http://www.uib.es/depart/gte/
multimedia.html (Consulta realizada en mayo de 2012).
index.psd IC 4 – Archivo de referencia, a modo de ejemplo, acerca de cómo

trazar/ maquetar el sitio web en Adobe Photoshop.
pagina02.psd IC 5 – Archivo de referencia, a modo de ejemplo, acerca de cómo

pagina03.psd IC 6– Archivo de referencia, a modo de ejemplo, acerca de cómo

Prueba con servidores Web y Ftp en Clientes IC 7– Video tutorial acerca de

cómo se realiza la prueba de publicación del sitio web en el servidor (del cliente
al servidor). Se muestra a través del programa Filezilla. Es a modo ilustrativo,
para que vean cómo funciona, cómo lo harían de tener ya pago un alojamiento
web.
Understanding_Web_Extensions.html IC 8– Página web que contiene infor-

mación acerca de las diferentes extensiones que utilizan los sitios web para iden-
tificar servicios, localización, tipo de actividad, etc.
VLC Video Lan Media Player IC 9– como se trata de un software libre y abierto,
se adjunta una versión del programa para que pueda ser instalada en cualquier
PC que funcione con Sistema Operativo de Windows. Para obtener una versión
más actualizada de este programa, consultar en los buscadores por su nombre,
o chequear la siguiente URL: http://www.videolan.org/vlc/

carpeta local IC 10 – Allí encontrarán el sitio bocetado en el módulo 2 en Adobe
Photoshop, ya armado (maquetado) en Adobe Dreamweaver. La página index.
html es la página de inicio, de ahí en más se pueden navegar las restantes. Pero,
para poder ver y entender cada tema de los contenidos, se sugiere abrir ésta y
cada una de las páginas almacenadas en la carpeta páginas con Adobe Dream-
weaver (hacer clic sobre el archivo y con botón derecho del mouse, abrir con…
elegir el Adobe Dreamweaver, siempre que éste se encuentre ya instalado en
nuestra computadora). Listado de páginas internas al sitio modelo:
index.html: le permitirá ver bien los tamaños de celdas en el panel

propiedades, las tablas, los bordes, las imágenes que se encuentran
en cada celda (con las mismas dimensiones), etc. También, puede ver
cómo fueron creados los cambios de estado de cada botón, ingresando
a Modificar>Barra de navegación (dentro de Adobe Dreamweaver).
Allí, seleccionando el nombre de cada botón, nos mostrará los cuatro
cambios de estado y la URL o página a la que vincula ese botón del
menú. Aquí, si se fija, también se incluyeron dos capas a modo de
ejemplo, con una frase de Italo Calvino.
cuentos.html: puede ver cómo está realizado el cambio de imagen

(o imagen de sustitución) al colocar el mouse encima de la imagen
que ilustra el cuento El gato de mirada triste. También esta imagen
está actuando de “botón” ya que se trata de un vínculo que estamos
creando, es decir, desde la imagen, en este caso, vinculo un docu-
mento PDF (puedo vincular un documento, una página interna, una
URL externa, etc.). En esta misma página, al pie o footer encontramos
el mail o cuenta de correo hipervinculado (todos estos parámetros se
establecen en el panel Propiedades).
novedades.html: se puede ver la incorporación de un texto, donde

se trabaja una palabra como hiperenlace. También se pueden ver los
diferentes estilos trabajados desde el panel CSS, o bien, en el Panel
propiedades se pueden abrir/ visualizar desde su nombre.
Ahora, preste atención a la incorporación de imágenes, archivos multi-

media estando almacenados en el mismo sitio (carpeta videos) o bien,
si están alojados, por ejemplo, en un canal de YouTube, cómo se los
“embebe”, es decir, cómo se copia el código desde YouTube y dónde
y cómo se pega en el sitio que estamos trabajando.
hoja de estilo la mágica.css: es la hoja de estilos que, si se abre en

Adobe Dreamweaver, veremos sólo el modo código. Allí, se visualiza
claramente cada uno de los estilos trabajados, con sus respectivos
parámetros. Recordemos: se utiliza una sola hoja de estilos para el
sitio completo. Ver cómo se vincula la misma desde el panel de Estilos
CSS con cada página interna al sitio.
novedades2.html: abriendo esta segunda versión de la página nove-

dades pero desde la misma carpeta, directamente con el Adobe
Dreamweaver, podrán ver cómo se incorpora a la celda de abajo una
animación realizada en Adobe Flash (un archivo swf). Esta página NO
está vinculada al sitio, por eso es necesario abrirla directamente desde
la carpeta páginas.

contacto.html y contacto2.html: son dos versiones, una más com-
pleta que la otra, de formularios incorporados al sitio. También hay
otro archivo, Untitled-1.html que muestra el comportamiento de los
botones Enviar y Borrar (detenerse en ellos al abrirlo con Adobe
Dreamweaver).
Material complementario
Ejemplos de diseños multimedia
http://www.moma.org/ MOMA (mucha imagen, relación con lo que ofrece, muy
bueno)
http://www.scopesys.com/ Scope Systems (un “buen ejemplo” de un “mal sitio”)

Sin palabras.
http://cyberschoolbus.un.org/peaceday/2004/index.asp Cyberschools (bastante

ordenada, demasiado ícono, falta jerarquizar un poco)
http://lajuventudopina.org/ La juventud opina (códigos: íconos, color, jerarquía

de info)
http://pbskids.org/ Kids (imágenes priman sobre textos / animaciones justas e

interactivas)
http://earthtrends.wri.org/ World Resources Institute (equilibrio, orden

accesibilidad=texto)
http://www.nytimes.com/?adxnnl=1&adxnnlx=1331292999-qHnrq7MUcx-
V4A2gn44hIzQ The New York Times (las columnas estructuran y ordenan la info)
Normas APA IC 11. Documento para aprender a citar fuentes.
Adobe Systems Incorporated. (2008): Uso de Adobe Dreamweaver. California,

USA. Disponible en: http://www.manualespdf.es/manual-adobe-dreamweaver-
cs4/ (Consulta realizada en Junio de 2012).
Aulaclic. (2009). Curso de Dreamweaver CS4. Valencia, España. Disponible en:

http://www.aulaclic.es/dreamweaver-cs4/index.htm (Consulta realizada en Junio
de 2012).
material | IC
información complementaria 1 - 11
Las informaciones complementarias 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 y 11 usted las

encontrará disponibles en Plataforma.

g l osario
Bosquejar: bocetar, maquetar, planificar, pensar el sitio.
Capas/ etiqueta: Una capa es un elemento de página HTML (en concreto, una
etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada.
Las capas pueden contener texto, imágenes u otros contenidos que se pueden
situar en el cuerpo de un documento HTML.
Carpeta local: es el directorio de trabajo. En Dreamweaver esta carpeta se

conoce como sitio local. La carpeta local suele ser una carpeta situada en su
disco duro (Ej.:MUL_iI)
carpeta remota: se almacenan los archivos, según el entorno, para fines de

prueba, producción, colaboración y publicación.
Código: Los elementos son la estructura básica de HTML. Los elementos tienen
dos propiedades básicas: atributos y contenido. Cada atributo y contenido
tiene ciertas restricciones para que se considere válido al documento HTML.
Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nom-
bre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-ele-
mento>). Los atributos del elemento están contenidos en la etiqueta de inicio
y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-
elemento atributo=”valor”>Contenido</nombre-de-elemento>). Algunos ele-
mentos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre.
Debajo se listan varios tipos de elementos de marcado usados en HTML.
Css: (Cascade Sheet Style - hojas de estilo de diseño CSS): diseño en cascada,
es decir, se establecen atributos (de texto, familia, cuerpo, etc.) uno sobre otro.
Se aplica una hoja de estilos a todas las páginas.
Enlace en informática, enlace puede referirse al hiperenlace (hyperlink), una

referencia en un documento de hipertexto a otro documento o recurso; el enlace
duro, una referencia a los datos físicos sobre un sistema de archivos; el enlace
simbólico, un acceso a un directorio o fichero que no es real sino es una refe-
rencia a otro.
Etiqueta: HTML utiliza etiquetas o marcas, que consisten en breves instruccio-

nes de comienzo y final, mediante las cuales se determina la forma en la que
debe aparecer en su navegador el texto, así como también las imágenes y los
demás elementos, en la pantalla del ordenador.
Toda etiqueta se identifica porque está encerrada entre los signos menor que y
mayor que (<>), y algunas tienen atributos que pueden tomar algún valor.
FTP es uno de los diversos protocolos de la red Internet, concretamente significa

File Transfer Protocol (Protocolo de Transferencia de Ficheros) y es el ideal para
transferir grandes bloques de datos por la red.
Hipermedia Hipermedia es el término con el que se designa al conjunto de

métodos o procedimientos para escribir, diseñar o componer contenidos que
integren soportes tales como: texto, imagen, video, audio, mapas y otros
soportes de información emergentes, de tal modo que el resultado obtenido,
además tenga la posibilidad de interactuar con los usuarios. Hipermedia podría
considerarse como una forma especial de multimedia interactiva que emplea

estructuras de navegación más complejas que aumentan el control del usuario
sobre el flujo de la información. El término “hiper” se refiere a “navegación”,
de allí los conceptos de “hipertexto” (navegación entre textos) e “hipermedia”
(navegación entre medios).
Hipertexto En computación, hipertexto es un paradigma en la interfaz del

usuario cuyo fin es el de presentar documentos que puedan, según la definición
de Ted Nelson, “bifurcarse o ejecutarse cuando sea solicitado” (branch or
perform on request). La forma más habitual de hipertexto en documentos es la de
hipervínculos o referencias cruzadas automáticas que van a otros documentos.
El hipertexto es una de las formas de la hipermedia, enfocada en diseñar, escribir
y redactar texto en una media.
Hosting El alojamiento web (en inglés web hosting) es el servicio que provee a
los usuarios de Internet un sistema para poder almacenar información, imágenes,
vídeo, o cualquier contenido accesible vía web. Es una analogía de “hospedaje o
alojamiento en hoteles o habitaciones” donde uno ocupa un lugar específico, en
este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al
lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos
etc. en internet o más específicamente en un servidor que por lo general hospeda
varias aplicaciones o páginas web.
HTML El HTML, acrónimo inglés de HyperText Markup Language (lenguaje de

marcas hipertextuales), lenguaje de marcación diseñado para estructurar textos
y presentarlos en forma de hipertexto, que es el formato estándar de las páginas
web.
ID: “El id es un atributo html, que podemos dar a cualquier elemento, y que
lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar
a un elemento en cada página, al que tenga ese ID. En el selector, se escribe
precedido por #” (Aulaclic. 2009).
NDEX: página de inicio de un sitio (index.html).
Maquetación: boceto del sitio, estructura interna (módulos, celdas) y propuesta

estética.
Mouse over: pasar el Mouse sobre uno u otro ítem (en el caso de la Barra de
navegación o Menú, al hacer MouseOver, la imagen cambiará, alternará con la
primera).
Multimedia El término multimedia se utiliza para referirse a cualquier objeto o

sistema que utiliza múltiples medios de expresión (físicos o digitales) para pre-
sentar o comunicar información. De allí la expresión «multimedios». Los medios
pueden ser variados, desde texto e imágenes, hasta animación, sonido, video,
etc. También se puede calificar como multimedia a los medios electrónicos (u
otros medios) que permiten almacenar y presentar contenido multimedia. Mul-
timedia es similar al empleo tradicional de medios mixtos en las artes plásticas,
pero con un alcance más amplio. Tipos de información multimedia:
Texto: sin formatear, formateado, lineal e hipertexto (en el caso del hipertexto,
éste, en algún momento, se cierra).
Gráficos: utilizados para representar esquemas, planos, dibujos lineales...

Imágenes: son documentos formados por píxeles. Pueden generarse por copia
del entorno (escaneado, fotografía digital) y tienden a ser ficheros muy volumi-
nosos.
Animación: presentación de un número de gráficos por segundo que genera en

el observador la sensación de movimiento.
Vídeo: Presentación de un número de imágenes por segundo, que crean en el

observador la sensación de movimiento. Pueden ser sintetizadas o captadas.
Sonido: puede ser habla, música u otros sonidos.
Servidor En informática, un servidor es una computadora que, formando parte

de una red, provee servicios a otras computadoras denominadas clientes. Ser-
vidor de correo: almacena, envía, recibe, enruta y realiza otras operaciones
relacionadas con email para los clientes de la red.
Servidor web: almacena documentos HTML, imágenes, archivos de texto,

escrituras, y demás material Web compuesto por datos (conocidos colectiva-
mente como contenido), y distribuye este contenido a clientes que la piden en
la red.
Tablas: Las tablas se conforman por celdas y filas en las que se ubican los
textos y demás elementos del sitio, y constituyen una herramienta muy eficaz
para presentar datos de tabla y establecer el diseño de texto y gráficos en una
página HTML.
TXT (archivos.txt): son archivos de texto, provenientes del Bloc de notas o Note-
pad.
Usabilidad: El neologismo usabilidad (del inglés usability) se refiere a la facili-

dad con que las personas pueden utilizar una herramienta particular o cualquier
otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto.
La usabilidad también puede referirse al estudio de los principios que hay tras la
eficacia percibida de un objeto. En interacción persona-ordenador, la usabilidad
se refiere a la claridad y la elegancia con que se diseña la interacción con un
programa de ordenador o un sitio web. El modelo conceptual de la usabilidad,
proveniente del diseño centrado en el usuario, no está completo sin la idea utili-
dad. Jackob Nielsen definió la usabilidad como el atributo de calidad que mide
lo fáciles que son de usar las interfaces Web.
WWW La World Wide Web, la Web o WWW, es un sistema de navegador web

para extraer elementos de información llamados “documentos” o “páginas web”.
Puede referirse a “una web” como una página, sitio o conjunto de sitios que
proveen información por los medios descritos, o a “la Web”, que es la enorme
e interconectada red disponible prácticamente en todos los sitios de Internet.

m ó dulos
m1
m1 microobjetivos
• Analizar los diferentes recursos de la Web 2.0, para entender la pertinencia

de incluirlos en un sitio Web.
• Determinar cuándo y cómo llevar adelante la construcción de un hipertexto

a fin de incorporarlo como concepto troncal en el desarrollo de un sitio.
• Entender la importancia de conocer y manejar los diferentes formatos y

pesos de archivos, con el propósito de reconocer un sitio accesible a todos.
• Caracterizar y comprender los requerimientos del diseño de una interfaz en

relación al usuario y a la interacción de un sitio, con el objeto de entender el
concepto de usabilidad.
m1 contenidos
Navegando, interactuando, participando
Hablar de navegar en la Web pareciera ser sinónimo de “embarcarse en Internet”.

Creemos que si buscamos algo en Google, o en cualquiera de los buscadores
actuales, inmediata y mágicamente encontraremos aquello que necesitábamos.
Puede que elijamos el sitio correcto, o bien puede que necesitemos “bucear” un
poco más por aquel mar de palabras.
Cuando pensamos un sitio, no podemos dejar detalles librados al azar. Es decir,

debemos considerar los puntos mencionados en función del perfil del emisor y
el del usuario (receptor, ya veremos por qué se lo llama usuario), los recursos
multimedia, hipermedia, links, nodos…
Veamos algunos de estos recursos, a modo introductorio, y de forma sintética,

sobre el texto Recursos Web.
En la presentación de la materia, hemos visto que Diseño Multimedia I tratará

sobre los diferentes materiales interactivos que podemos desarrollar. Y lo pri-
mero que se nos viene a la cabeza es un sitio web, como por ejemplo, el que
muestra la siguiente imagen: el MOMA (The Museum of Modern Art, http://www.
moma.org/).

¿Qué podemos analizar sobre este sitio, considerando que en realidad esta sería
la página de ingreso al mismo? Pues, veamos. Lo primero que sobresale es la
composición, los pesos visuales que se van compensando, a partir del espa-
cio modulado desde una figura básica como es el cuadrado. Esto, resulta un
elemento significativo a la hora de desarrollar cada pantalla, de idearla, de pen-
sarla y plasmarla. Cómo se denomina a esta “fachada” que posee un sitio como
primer contacto con quien la visita, pues, se la denomina Interfaz.
La interfaz es una especie de ventana para ingresar al mundo virtual, a todo

aquello que el sitio encierra. Del diseño de la interfaz dependerá la eficacia del
sitio, pues si ella está bien planteada, como para que quien la visite se sienta
guiado, situado y con buen nivel de interactividad, entonces estaremos frente
a una interfaz ordenada, armónica, homogénea, tendrá un equilibrio entre lo
técnico y lo estético. Una interfaz donde lo estético es dejado de lado, pues
será una interfaz con vida limitada. Puede funcionar técnicamente, pero si no se
conjugan los criterios compositivos, estéticos y funcionales, entonces la interfaz
no será eficaz.
¿Qué significa esto? Pues, por ejemplo, si una interfaz no posee un diseño, un
estilo, pensado en función de su público meta, pues difícilmente “llegará” a ese
público. Lo mismo, si las páginas internas al sitio, no poseen homogeneidad (es
decir, carecen de unidad como sistema, como partes de un todo, no hay unidad
desde las tipografías, ubicaciones, estilos, colores, estilo de fotografías, etc.)
entonces, quien las visite, se confundirá y hasta podría llegar a pensar que está
navegando otro sitio. Volvamos al ejemplo del MOMA. Para ello, publico aquí
otra imagen.

La imagen que se encuentra arriba, corresponde a la página que se nos abre,
dentro del mismo sitio, a partir de elegir en la página de inicio (home o index),
e ilustra una de las exhibiciones del MOMA: en este caso, la de Diego Rivera.
En ambas interfaces, vemos algunas constantes y variables en relación al estilo,
muy limpio, minimalista, donde priman los blancos, donde se ve claramente una
traza basada en los cuadrados como ya citáramos anteriormente. Los colores,
la tipografía, todo hace pensar que seguimos navegando dentro del sitio del
MOMA.
Veamos otra de sus páginas. Desde el Home puedo ingresar también a la colec-
ción de Dibujos del MOMA.
Nuevamente, los colores, ubicación de elementos, trama de cuadrados para

homogeneizar las imágenes o dibujos, etc., todo nos lleva a pensar en una
interfaz armónica, en un sitio simple pero ordenado, claro, para ser abordado
por quien quiera visitarlo.

Quiero hacer hincapié en esto de modular los espacios, en trabajar la
composición, así como lo hiciéramos en otro momento en InDesign (¿recuerdan
la grilla?), pues aquí también se modulan los espacios, y observemos cómo cada
uno de los Dibujos de la colección, obviamente tienen dimensiones diferentes,
pero que no se hacen visibles hasta que uno quiera verlas. Mientras tanto, las
imágenes son cuadradas. La funcionalidad no es menor, y en esto tendremos
que prestar especial atención a que las imágenes estén en una resolución o
calidad de imagen para pantalla (72dpi ó 96dpi), en RGB (modelo de color para
pantalla), en PNG, GIF o JPG guardados para web (es un brevísimo repaso por
DISIM, ¿recuerdan?). Al manejar imágenes livianas, la “carga” en pantalla será
rápida, dinámica, podremos recorrer el sitio sin estar esperando ver qué es lo
que está leyendo la máquina… pues lo tendremos al instante en pantalla.
Ahora bien, habíamos dicho que la interfaz debía estar planteada en función del
“público meta”. En relación al diseño interactivo, nuestro público meta, quien
visitará nuestra web, se llamará Usuario.
Cuando hacíamos referencia al receptor de nuestros libros armados en InDe-

sign, nos referíamos a los “lectores” de los mismos. Cuando hacemos referencia
a quien mira una película en el cine, lo llamamos “espectador”. Pues quien visita
nuestro sitio web recibe el nombre de Usuario. Es un “receptor” que toma deci-
siones, colabora, construye, aporta y emite. Se dice que el usuario ojea un sitio,
es decir, no lee línea por línea sino que lo hace “a saltos”. Por ello, la cantidad de
información debe ser estudiada, el modo en que se le presenta, la cantidad de
textos e imágenes, etc. Veamos para ello, otro ejemplo de interfaz interesante,
donde es clara la actividad del Usuario: La Juventud Opina (ttp://lajuventudo-
pina.org/).

Esta portada, o home, o página de inicio (en inglés, index, que será la denomina-
ción que luego utilizaremos), ya nos está dando la pauta del nivel de participa-
ción que tenemos como usuarios. El botón +Crea un artículo (de fondo celeste)
nos permite crear, escribir, construir, opinar. Aparece aquí un rasgo muy intere-
sante que nos brinda hoy día Internet: somos Usuarios Activos, hemos dejado
de ser pasivos en la web. Pero me voy a detener un párrafo si se quiere, para
remitirme a los cambios que ha ido viviendo Internet. Un brevísimo pantallazo.
En sus inicios (1991-2003) sólo nos permitía consultar información en formato

texto plano, (limitado, básico, aunque rápida en su carga), es la llamada Web
1.0. La llegada de la Web 2.0 o “web social” (en 2004) suma la participación del
usuario, le da la posibilidad de opinar, comentar, producir en la web. Los blogs,
los foros, las redes sociales, forman parte de esta web 2.0. En 2006, comienza a
hablarse de la Web 3.0 o “web semántica” que sienta sus bases en la inteligencia
artificial, en donde se está trabajando para que las búsquedas puedan realizarse
a partir de conceptos determinados, donde se incluye la tridimensión, donde los
recortes de búsqueda serán cada vez más precisos y personalizados.
Habiendo hecho entonces este resumen de la evolución de Internet, vemos que

nuestro usuario está haciendo uso actualmente, de la web 2.0 en este sitio que
mencionáramos La Juventud Opina. Cando seleccionamos la opción de +Crear
un artículo, debemos estar registrados para poder hacerlo. A su vez, vemos que
este sitio se encuentra vinculado a Twitter y Facebook.

Cada vez que el usuario elige a través de un click ingresar a otra sección del
sitio, está haciendo uso del grado de interactividad del mismo. Y qué es la Inte-
ractividad. A decir de Salinas Ibánez (1996), interactividad es aquella posibili-
dad que “permite determinar al usuario la secuencia mediante la cual acceder
a la información”. Y esta secuencia tendrá que ver con sus gustos, intereses
en la búsqueda, y el control del usuario que la Interfaz consigue a partir de su
diseño y organización de la información. Si el usuario va de un sitio al otro, si va
sin tener en claro hacia dónde se dirige, estaremos en presencia de un tipo de
Navegación Exploratoria. En cambio, si el usuario tiene en claro sus objetivos,
y la interfaz ayuda a que su búsqueda sea clara, y llegue a dónde quiere, la
Navegación será Dirigida.
Veamos otros recursos.
La pantalla anterior, es la página de ingreso, de presentación al usuario, del sitio

PBS Kids (http://pbskids.org/) Sin dudas, la interfaz responde excelentemente
bien al perfil del usuario al que está destinada. Este sitio, tiene predominio de
imágenes por estar dirigida a niños pequeños, que aún no leen demasiado (o
nada). Posee interactividad ya que permite que el usuario navegue ordenada-

mente, si quiere jugar, si busca participar de una actividad, o si prefiere ver
elementos Multimedia (como son los videos).
Un dato importante en relación a los elementos multimedia. Son aquellos que

poseen imagen, audio, textos, pero que componen un material que empieza y
termina en sí mismo. Es decir, son cerrados. Si el usuario, comienza a conectar
diferentes elementos multimedia (va de un video a otro, puede que pase por
alguna fotografía, luego por algún texto, etc.) lo que ese Usuario estará dise-
ñando o determinando será una hipermedia. La hipermedia será un entramado
de diferentes elementos Multimedia que el usuario irá visitando a partir de sus
intereses particulares. La hipermedia es entonces, abierta, no posee ni principio
ni fin. Será el mismo usuario quien lo determine, y habrá tantos comienzos como
tantos finales posibles como usuarios participen de ellas. Nos está faltando abor-
dar temas tales como Hipertexto, Nodos, Links, etc.
Pero para ampliar todo lo que hasta aquí he dio comentando, los invito a que leer
el documento Hipertexto/ Hipermedia/ Multimedia IC 1. Allí, podrán conocer en
detalle a qué llamamos hipermedia, en qué se diferencia de un multimedia, qué
es la interactividad, a qué llamamos hipertexto, etc.
Una vez abordado el texto, les pido que vean el documento Accesibilidad y Usa-
bilidad IC 2 del sitio del Ayuntamiento de Madrid. Es un análisis del sitio de
dicho organismo, enfocado desde la accesibilidad, usabilidad y todo lo referente
al módulo.
Luego de leer el apunte citado, de procesar los conceptos hasta aquí vistos en el
módulo, sería muy bueno que realizaran la actividad central del módulo, que nos
ayudará a ampliar aún más cada uno de estos conceptos, importantísimos para
poder enfrentar luego uno de los desafíos más interesantes de nuestra cursada:
el desarrollo de un sitio web. Pero, no voy a adelantarles nada más. ¡Ánimo! Y
nos vemos en el módulo 2.
Referencias bibliográficas
1 - SALINAS, J.: Multimedia en los procesos de enseñanza - aprendizaje: Ele-
mentos de discusión. Ponencia en el Encuentro de Computación Educativa. San-
tiago de Chile, 2-4 mayo de 1996. Disponible en: http://www.uib.es/depart/gte/
multimedia.html (Consulta realizada en mayo de 2012).

m1 |contenidos | IC
información complementaria 1-2
Las informaciones complementarias 1 y 2 usted las encontrará disponibles en

Plataforma.
m1 material
Diríjase a la página 9 para leer el contenido de este material.
m1 actividades
m1 | actividad 1
Introducción al diseño interactivo
Conociendo un poco …
“Antes de plantear el diseño de una pantalla necesitamos tener presente algunos

conceptos básicos.
Difícilmente podamos diseñar una interfaz NAVEGABLE, USABLE Y ACCESIBLE si

antes no atendemos a los componentes con los que vamos a trabajar. Lo mismo
sucederá con la cantidad de imágenes y textos a implementar, qué sucede con el
usuario, cómo se comporta, por qué se dice que callejea en la Web, cuáles son
los elementos que entran en juego en el diseño de la interfaz …
Veamos entonces algunos contenidos del módulo 1 (sumemos los de la carpeta

material) y vinculemos estos conceptos con ejemplos concretos, es decir, bus-
quemos en la Web sitios que sean paradigmáticos o representativos de cada uno
de ellos, o al menos, de algunos”.
Consignas
a) Luego de leer los contenidos del módulo 1 y los recursos del material de
este módulo, le recomendamos estudiar en profundidad el significado
de los conceptos más importantes, entre ellos: navegación dirigida,
navegación exploratoria, usuario, interfaz, hipermedia, hipertexto, multi-
media, usabilidad, accesibilidad, nodo, enlace, entre otros.

Usted puede ampliar el contenido sobre cada uno de ellos haciendo
búsquedas en Internet (o en otra bibliografía que encuentre al respecto).
No olvide citar las fuentes siguiendo el estilo de las Normas APA. Sobre
estas últimas también le proponemos consultar un texto presentado en
este módulo.
b) Una vez resuelto el punto a), busque 3 (tres) sitios web publicados en
Internet para analizarlos a partir de su Interfaz, tipo de navegación que
encuentra, tipos de recursos multimedia presentes, rasgos de hipertexto
y/o hipermedia, etc. (elija cinco de ellos y profundícelos en su análisis),
es decir, desde los conceptos investigados en el punto a) de la presente
actividad.
¿Qué aspectos considerar al elegir los sitios? Usted puede elegirlos por
temática (por ejemplo, tres sitios de comida rápida), o puede tomar uno
que usted considere que cumple con la mayoría de los recursos aborda-
dos en el punto a), un segundo sitio que sea su opuesto (por ejemplo,
que sea texto plano, sin presencia de links, etc.), y el tercero, que se
encuentre en un punto o nivel intermedio entre el primero y segundo. La
idea es realizar una comparación entre los tres.
c) Elabore conclusiones con relación a la teoría investigada en el punto a) y

su aplicación en los casos prácticos que analizó en el punto b). ¿En los
sitios abordados, están presentes los conceptos que usted seleccionó
para profundizar? ¿Qué sucede con la usabilidad de los sitios? ¿Consi-
dera usted que cumplen con pautas de accesibilidad?, ¿por qué?
Algunas pautas
Para realizar esta actividad les proponemos, como citáramos anteriormente,
indagar acerca de los diferentes temas vistos en el módulo 1, tanto en los conte-
nidos como en el material.
Los textos que formen parte del análisis y conclusiones deben ser de elabora-
ción propia. Analizar no es describir solamente, abriendo la clave de corrección,
podrá ver un ejemplo de análisis de sitio ( C 1). Pueden utilizar tablas, cuadros,
gráficos, etc. Aquí es importante evitar el “COPY PASTE (copiar y pegar)”, a
menos que se trate de una cita.
Capture pantalla de las páginas relevadas que formen parte del análisis (además,
cite la URL, por ejemplo: http://www.wri.org/project/earthtrends/) para ilustrar
lo que va analizando. Recuerde: para capturar la imagen que está viendo en
pantalla, deberá presionar la tecla ImpPnt, y luego Pegar (botón derecho del
Mouse>Pegar) en un procesador de texto en el que vaya a realizar la actividad.
En el caso de realizarla directamente en la Wiki, por favor, lea atentamente el
documento instructivo_wiki IC 1, presente en la carpeta material del módulo,
donde se explica cómo trabajar con este recurso de la web 2.0 dentro de la pla-
taforma de mi.ubp.
Agrupamiento sugerido
La actividad puede realizarse individualmente o bien en grupos de a dos perso-
nas; en este último caso, les solicitamos nos avisen para habilitarles una Wiki,
que será el espacio de trabajo para tal fin. Quien realice la intervención en la
Wiki, deberá publicar el nombre y apellido de su compañero/a de trabajo y vice-
versa (es decir, las intervenciones serán en forma alternada, consúltenos siem-
pre a los tutores).

La Wiki es un espacio de trabajo colaborativo (OPCIONAL en la cursada). En el
caso de elegir trabajar con un compañero del curso, la actividad se irá enrique-
ciendo a partir de los aportes de cada uno de ellos, la mirada del otro, del trabajo
de a dos y no solitario. Como citáramos más arriba, para utilizar la Wiki, lea aten-
tamente el documento que lo orientará para el trabajo con la Wiki.
Deberán tratar más de un concepto por sitio relevado, puesto que van a encon-
trar que se va tejiendo una red entre ellos. Por ejemplo, no deberíamos trabajar
la interfaz sin mencionar al usuario y el grado de interacción que le brinda
dicha interfaz. Uno va de la mano del otro. Para ello, preste especial atención a
la primera parte de los contenidos del módulo 1, en los que se publican algunas
pantallas de sitios relevados y se analizan algunos de estos puntos.
No olviden publicar la URL de cada sitio que encuentren paradigmático o intere-

sante para ser analizado.
¿Cómo entregar lo producido?

Opción 1: En un archivo de texto, en formato Word, A4, enviado por mensajería
de la plataforma.
Opción 2: A través de la Wiki habilitada para Actividad 01 del Módulo 1 (no olvide
avisar al tutor, pues debe habilitarle su participación en dicho recurso).
A 1
C 2
m1 |actividad 1 | IC
m1 |actividad 1 | AA
asistente académico 1
¿Qué material consultar para esta actividad?

Recordamos, los contenidos desarrollados en el Módulo 1 (carpeta material
incluida). Se pretende que usted realice su propia búsqueda, más allá de los
textos dados.
m1 |actividad 1 | CC
clave de corrección 1
Análisis de sitios web
A modo de ejemplo, le proponemos consultar el siguiente análisis del sitio que

se muestra a continuación (de su index o pantalla de ingreso al sitio y una de sus
páginas interiores), a los fines de orientarlos en el enfoque de la actividad 1 del
módulo 1. Su análisis deberá ser completo. Esto es sólo un fragmento.

Imagen 1
Interfaz: Sin dudas, la interfaz responde excelentemente bien al perfil del usu-
ario al que está destinada. Este sitio, tiene predominio de imágenes por estar
dirigida a niños pequeños (Usuarios), que aún no leen demasiado (o casi nada).
Posee un nivel de interactividad alto, y una navegación ordenada y clara para un
niño (que tenderá a un tipo de navegación de carácter exploratorio), quien puede
optar por jugar, o buscar participar de una actividad, o si prefiere ver elementos
Multimedia (como son los videos, ver Imagen 2).
Los colores de la interfaz, su tratamiento plano, etc.
Las formas utilizadas para mostrar las imágenes ayudan a que nuestro usuario
identifique rápidamente grupos o clases de actividades o recursos. Por ejemplo,
el elemento de formato rectangular celeste (Imagen 01, señalado como A), es
un objeto o forma diferente a los restantes de la página. Se trata de un elemento
multimedia (videos) que el usuario puede ver. Una vez aprehendida esa forma,
el usuario, aunque no sepa leer, en una segunda oportunidad sabrá a dónde
ingresar para encontrarlo (más allá de que el recurso “habla” al posicionar
nuestro Mouse encima de él: nos dirá “Video”). Aquí se refleja el concepto de
navegación recursiva, cómo a partir de un elemento trabajado en la interfaz se
organiza la navegación del usuario, se lo orienta, se acorta su búsqueda.

Imagen 2
El agrupamiento de los elementos, también ordenan, organizan la navegación. Si

analizáramos la pantalla desde las leyes de Gestalt, veríamos que los botones…
Así mismo, el elemento principal que es el video se encuentra centrado, rodeado

por el resto de los elementos de la página. Se presenta aquí la jerarquía de lo
Centrado y lo periférico (tema que hemos visto en asignaturas anteriores), que
permite establecer niveles de importancia de los elementos dentro de la página,
propone un punto atencional, transforma la pantalla en un sitio “usable” (una
web que cumple con las pautas de usabilidad, y en este caso en particular, tam-
bién están presentes las de accesibilidad, puesto que el usuario puede saber
qué encontrará al clickear cada botón tanto por la imagen, la palabra escrita o
el recurso audible).
Podríamos continuar con el análisis. La idea es guiarlos en el comienzo, en el

inicio de este desafío. Ahora, deberán escribir su propio camino, esto es sólo
una muestra. Nos debemos proponer aprender a mirar desde otro lugar, ese es
el objetivo del análisis: descubrir, comprender, entender, mirar, para luego, ya
más avanzados en la materia, llegar a plasmar un sitio propio que cumpla con
los requerimientos de la web. Sigamos entonces con la actividad.
¿Qué tomaremos en cuenta al corregir la actividad?
• El grado de precisión y elaboración de los aportes (NO Copy-Paste).

• El manejo del lenguaje específico.
• La destreza en relación al uso correcto de la Wiki.
• La participación en dicho recurso o en Word no sólo con aportes teóricos
sino con ejemplos de sitios que se destaquen y un análisis sólido,
fundamentado, no descriptivo.
• La participación de los integrantes en la toma de decisiones (elección
de los sitios), responsabilidades asumidas (cada integrante relevará y
analizará al menos un sitio), respeto por la palabra del otro.
• El cumplimiento de los puntos planteados.
m1 glosario
Diríjase a la página 12 para leer el contenido de este glosario.

m2
m2 microobjetivos
• Conocer a qué se llama dominio, a fin de llevar adelante las etapas necesa-
rias para registrarlo.
• Analizar las características de los diferentes alojamientos web disponibles,

con el propósito de determinar niveles de pertinencia según los requerimien-
tos de cada proyecto.
• Comprender la importancia de cada componente de la interfaz, con el objeto

de plasmar la maquetación de las páginas del sitio propio.
• Revisar las características de guardado de cada tipo de archivo en tanto for-

mato y peso, a fin de preparar material apto para web.
• Comprender las características del lenguaje HTML, a fin de aprehender el

manejo de las tablas, celdas y archivos y generar sitios usables.
• Entender la importancia de la organización de la carpeta raíz o local para una

correcta visualización del sitio y posterior publicación de la misma en el FTP
como carpeta remota.
m2 contenidos
Planificación del sitio
En el módulo anterior hemos abordado temas vinculados a la navegabilidad,

usuario, interfaz, usabilidad, hipermedia, multimedia, hipertexto.
Han observado y analizado sitios web y otros recursos citados anteriormente,

vinculando un tema con el otro, tramando una red. De este modo, podemos rela-
cionar el concepto de Interfaz con el de Usuario y Navegabilidad. La interfaz
es el medio a través del cual el Usuario puede navegar un sitio, lo retiene en
él o no, lo ayuda a través de una Navegación más dirigida (si lo que el usuario
busca se encuentra ordenado, organizado, si el sitio posee un Mapa de Sitio, si
el concepto de Usabilidad ha sido aplicado) o bien, lo conducirá a una Nave-
gación más Exploratoria si esta Interfaz posee un diseño complejo, poco claro,
desorganizado, si su menú cambia arbitrariamente de lugar, etc.
Hasta aquí, hemos analizado otros sitios. Ahora nos toca desarrollar nuestro
propio sitio. Es decir, la temática será elección de ustedes (no tiene por qué ser
sobre ustedes mismos). En algunos casos, muchos de ustedes, deciden trabajar
con el sitio de su propia consultora de comunicación, o de la productora, o de
sí mismos como periodistas. Otros eligen trabajar con algún emprendimiento
personal o familiar, están aquellos que se vinculan más con una empresa u ONG.
El tema, es a elección. Prefiero que trabajen con un tema que les guste y los
motive. Sólo van a tener que responder a ciertas pautas como para que no les
queden temas de configuración y programación sin abordar.

Pero, qué otros puntos debemos conocer antes de sentarnos a plasmar el sitio.
Veamos algunos conceptos.
Unidad 2: En busca del dominio perdido…

¿Qué será “dominio” en lenguaje de sitios web? Pues bien, llamaremos dominio
de internet a una red de identificación asociada a un grupo de dispositivos o equi-
pos conectados a la red Internet (Wikipedia, 2012). Pero, ¿qué será exactamente
esto de identificación a la red….? De lo que realmente estamos hablando es del
modo en que nombraremos la dirección en Internet de nuestro sitio. Por ejem-
plo, el dominio de la Universidad Blas Pascal es UBP. Cuando ingreso al sitio en
Internet de la Universidad Blas Pascal, debo escribir en mi navegador www.ubp.
edu.ar. Si quiero consultar el Diario Clarín su versión online, pues su dominio
será www.clarín.com y así, cada sitio será identificado entonces, con un dominio.
¿Dónde y cómo gestionamos los dominios? Y, ¿Por qué algunos terminan en

.edu.ar, ó en .com, .com.ar etc.?
Bien, habiendo comprendido a qué llamamos dominio, debemos elegir “uno”
para nuestro sitio, que seguramente estará vinculado al nombre de nuestra
marca, de nuestra organización, tal vez sumemos qué hacemos u ofrecemos,
etc. Veamos algunos ejemplos:
Mercado libre coincide

con su nombre completo
(no se le quitó ninguna
palabra o letra).
Universidad Blas Pascal,

su dominio, se limitó a
la sigla que lo identifica:
UBP.
¿Por qué en algunos casos no se coloca el nombre completo, es decir, por

qué se reducen las palabras? Pues porque los dominios .AR pueden tener un
máximo de hasta 19 caracteres (sin incluir los subdominios) y pueden contener
puntos, guiones medios, entre otros. También puede suceder que el dominio
que queramos utilizar, haya sido creado con antelación por otra persona de otra
compañía, con nombre similar, etc. ¿Cómo saberlo? Pues hay un sitio en inter-
net, que depende de la Presidencia de la Nación, que nos permite averiguar
esta información, registrar uno nuevo que verdaderamente esté disponible, o
bien, brindarnos los datos de contacto de la persona que lo tiene registrado a su

nombre (pues a veces sucede, que registran dominios que luego no utilizan, y
podremos entonces “negociar” su posesión: cesión de derechos o transacción
comercial…En algunas ocasiones, se termina “comprando” a otro el dominio de
su propia organización).
Tengan en cuenta que el registro de dominios es absolutamente gratuito (al

menos, a la fecha).
Extensiones de los dominios
La forma más fácil de identificar un sitio web es a través de su dirección de

dominio, el famoso cualquier-cosa.com. El .com nos familiariza inmediatamente
con los nombres de dominio de internet y finalizan con una extensión que iden-
tifica su tipo o región.
Entre los diferentes tipos de dominios encontramos las extensiones .com, .net,
.org, .mil, .edu, .info, .name, .biz y .gov. De estos, los .com, .net, .org, .biz y .info
pueden ser registrados por cualquier persona, representando los .com, sitios
comerciales, .net, redes o Networks y los .org, Organizaciones mientras que los
.edu están reservados para entidades educativas, los .mil por militares y .gov
para el gobierno (hoy ya está entrando en vigencia el .gob para los países de
habla hispana, recordemos que la extensión “.gov” proviene de “goverment”).
Estas extensiones le han dado vida al web, pero debido a la demanda que ha
existido por los dominios .com, .net y .org se extendieron hacia nuevas opcio-
nes como son .las .info, .biz, .name, .museum, .travel, .mobi y otras.
Otros dominios que se están comercializando por empresas particulares son

por ejemplo .ws y .tv. También existen extensiones que identifican a los países.
Así por ejemplo existe el .gt para Guatemala, .mx para México, .es para España,
.ar para Argentina, entre otros. Para ampliar más aún el tema de las exyensio-
nes, podrán consultar el siguiente link http://www.idcwebs.com/Understanding_
Web_Extensions.htm o bien si no poseen conectividad en este momento, podrán
hacerlo desde la página Understanding_Web_Extensions.html que se encuentra
almacenada en la carpeta Material del presente módulo.
NIC.AR www.nic.ar
Networking Information Centre Argentina, es un “organismo proveedor y pro-
motor del registro de dominios a nivel local” (NIC ARGENTINA), de la Secretaría
Legal y Técnica de la Presidencia de la Nación. Son ellos quienes autorizan y
regulan el uso de cada uno de los dominios gestionados en nuestro país. Es un
trámite muy sencillo, en el que primero se necesita ingresar al sitio www.nic.ar,
allí, se ingresa la sección Trámites vía web (ver Imagen 1).

Verán que hay cuatro columnas: Consultas, Altas, Bajas, Modificaciones. Dentro
de la primera columna, podremos ir al botón Consultas>Dominios. Allí, tendre-
mos una ventana de diálogo donde podremos ingresar el nombre del dominio
que estamos buscando (para chequear que esté disponible o, caso contrario, ver
a nombre de qué persona u organización se encuentra registrado).
En el nombre, se pueden utilizar letras, números o guión medio (NO se debe

usar guiones bajos, puntos, barras, etc.). Una vez escrito el dominio, veremos
que en el sector derecho (a derecha del nombre) aparece la extensión: .com.ar
ó .gov.ar ó .org.ar , etc.
Luego, clickeando en el botón Buscar, nos informará de la disponibilidad del

nombre. Veremos entonces alguna de estas dos respuestas (Imagen 3 y 4).

Para solicitar el registro de este dominio, haga click aqui.
O bien, nos informarán que ese dominio ya ha sido registrado por otra persona
u organización:
En la Imagen 4 les he resaltado tres conceptos importantes:
a. Fecha de Vencimiento: los dominios se renuevan anualmente. Se realiza

el trámite vía web. Cuando llega el mes 11, nos envían a nuestro correo
una notificación, recordándonos que el dominio quedará disponible en
un mes, a menos que lo renovemos.
b. Entidad registrante: allí figuran los datos de quien es realmente dueño

del dominio.
c. Persona responsable: es quien está a cargo de realizar los trámites

web, contactar al proveedor del hosting, etc.
En algunos casos, b) y c) coinciden, pero no es necesario que sea así. Hay más
datos a completar, en todo caso, pueden realizar su propia experiencia, ingre-
sando a www.nic.ar para consultar dominios.

Volviendo a la Imagen 1, de Trámites vía web, en la segunda columna: Altas,
podremos precisamente registrar (antes que el dominio) la Entidad Registrante y
la Persona Responsable. Clickeando en cada uno de estos dos botones, debe-
rán seguir las instrucciones hasta darse de alta en ambos casos. Siempre debe-
mos tener el Alta como Entidad y como Persona para poder registrar un dominio.
Todos estos trámites demoran unos días y se confirman vía web.
¿Qué más necesitamos? Ya tenemos el dominio. Podríamos armar ya el sitio,

pero ¿cómo y dónde lo publicamos en Internet? Es decir, ¿cómo se hace visible
al resto?
Hosting, FTP, … ¿qué serán estos conceptos “en otro idioma?

Para que nuestro sitio sea visible en Internet, debemos contratar lo que se
conoce como Hosting.
El alojamiento web (en inglés web hosting) es el servicio que provee

a los usuarios de Internet un sistema para poder almacenar información,
imágenes, vídeo, o cualquier contenido accesible vía web. Es una analo-
gía de “hospedaje o alojamiento en hoteles o habitaciones” donde uno
ocupa un lugar específico, en este caso la analogía alojamiento web o
alojamiento de páginas web, se refiere al lugar que ocupa una página
web, sitio web, sistema, correo electrónico, archivos etc. en internet o
más específicamente en un servidor que por lo general hospeda varias
aplicaciones o páginas web (Wikipedia, 20121).
Este alojamiento se contrata por un lapso de seis meses o por un año (hay algu-
nos alojamientos a muy bajo costo), y se va renovando en tanto queramos que
el sitio permanezca activo.
Lo que se debe tener en cuenta al momento de elegir un “alojamiento web”,

será la capacidad de almacenamiento que nos brinde para el sitio en sí mismo.
Piensen que todo el material que generamos para el sitio web, debe de estar alo-
jado en la World Wide Web para hacerse visible a los ojos de cualquier usuario
mediante un navegador. Otro punto importante, es la capacidad de transferencia
de datos, pensemos que cuando hacemos click en el link de un sitio, estamos
“llamando a los datos” que están en un nodo de información, esos datos tienen
un peso en MB dependiendo de qué tipo de archivos estemos hablando. Un
archivo multimedia será mucho más pesado que un archivo de texto. ¿Por qué
debemos considerar este dato? Pues porque, según las características del tipo
de servicio o producto se ofrezca en el sitio, necesitará de mayor o menor canti-
dad de megabytes de alojamiento y/ o de transferencia (ver Imagen 05).
1 Consulta realizada: mayo de 2012 – Disponible en: http://es.wikipedia.

org/wiki/Alojamiento_web

Este es sólo un ejemplo de hosting, como para mostrarles las variables de
datos que se pueden manejar al momento de contratarlo.
Hablamos de capacidad de alojamiento y capacidad de transferencia. Pero no

debemos dejar de lado la cantidad de cuentas de correo electrónico que nos
brinda el hosting. Algunos brindan “cuentas de correo ilimitadas”, otros darán
diez correos, etc. Según la necesidad de nuestra organización, tomaremos uno
u otro (ver Imagen 07).

Vemos en la imagen que, según los servicios que nos ofrecen, varía el costo
mensual.
El hosting, en la mayoría de los casos, nos brinda una especie de Panel de

Control dentro del mismo alojamiento y el servicio de webmail. ¿Qué es ésto?
Pues el servicio de webmail permite acceder a las cuentas de correo electrónico
desde el mismo navegador (sin tener que recurrir a un programa o software de
correspondencia en especial). Y el Panel de Control, nos permite acceder a la
carpeta que está alojada en el servidor, para copiar nuestro sitio completo allí
dentro. Pero no nos adelantemos, cuando nos adentremos en el programa de
desarrollo de materiales interactivos como lo es el Adobe Dreamweaver CS4,
entenderemos un poco más acerca de esta carpeta.
A continuación, les muestro una serie de capturas de pantalla de proveedores de

hosting (se pueden encontrar en internet). Veamos en cada pantalla los detalles
de los que hablé más arriba, en cuanto a capacidades, cantidad de cuentas de
correo, etc.

Nos muestra un ejemplo de Panel de Control (corresponde al hosting trabajado
como ejemplo). Desde allí dentro podremos ver las cuentas de correo, usuarios
de correo, acceso al servidor, estadísticas, subdominios, etc.
Esta imagen muestra el panel del servicio de webmail.

Debemos saber también, que existen servicios de alojamiento web gratuitos, que
se encuentran dentro de otros más grandes. Por ejemplo, Fibertel brinda a sus
clientes un hosting gratuito (limitado en capacidad). En este caso, no se requiere
siquiera del registro del dominio en nic.ar ya que el subdominio dependerá del
registro del usuario en el sitio de quien brinda el hosting gratis (en ese caso,
la dirección o URL para nuestro sitio será: www.fibertel.com.ar/NOMBRE_QUE_
YO_PROPONGO.HTM).
El FTP, File Transfer Protocol es una especie de software que permite transferir
datos (explicación simple del término, para no profundizar demasiado, puesto
que no será un tema central de la asignatura). Encontramos el Servidor FTP,
que es un software instalado en el servidor y permite intercambiar datos entre
diferentes servidores. También está el Cliente FTP, que se trata de un software
que se instala en el ordenador del usuario, y que utiliza el protocolo FTP para
conectarse a un servidor FTP y transferir archivos (para descargarlos o subirlos).
Un software de FTP libre es el FileZilla, al que pueden encontrar en http://filezilla-
project.org/. Le ofrecemos además un video tutorial, Prueba con servidores Web
y Ftp en Clientes IC 1, donde se muestra cómo trabajar con FTP en diferentes
servidores (esto, a modo ilustrativo, para conocer más acerca del tema). Recuer-
den: para ver este tipo de videos, se sugiere instalar el programa VLC Media
player (software libre y abierto, que puede descargarse de http://www.videolan.
org/vlc/ - según el sistema operativo que tengan instalado, bajan la versión que
corresponda).
Luego de haber conocido un poco más acerca de los recursos que necesita-
mos para “publicar” nuestro sitio en Internet, los invito entonces a comenzar a
“pensar”, planificar este sitio.
Unidad 3: Primeras líneas: comenzando a bosquejar el sitio
Una vez elegido el tema, es necesario conocer en profundidad algunos puntos.

Por ejemplo, quién está por detrás de este sitio, quién es verdaderamente nues-
tro emisor. Qué hace, qué ofrece, qué quiere mostrar, cuál es su estilo, su trabajo,
servicio, si la empresa tiene más elementos visuales que textuales o viceversa
para mostrar o enviar o bien recibir,… etc. Debemos hacer un buen relevamiento
de campo, entender claramente de qué vamos a “hablar” a través de nuestro sitio
web. No será lo mismo un espacio o interfaz de una productora de audiovisuales
que una diseñada para un estudio jurídico. Sabremos que una es netamente
“visual” (hipermedial) y la segunda será “textual” (seguramente, hipertextual, tal
vez con archivos multimedia, podría tener archivos de audio – podcasts – como
testimonios, etc.). Haremos entonces un relevamiento exhaustivo de elemento y
entrevistaremos a la persona responsable del área de comunicación y/ o mar-
keting (si somos contratados externamente), para obtener objetivos claros de
trabajo, saber qué necesita nuestro cliente, conocer el perfil del usuario, etc.
Bueno, ahora que ya conocemos a nuestro emisor y todas sus características,

debemos conocer a nuestra “competencia”. Quién será nuestra competen-
cia: todos aquellos que ofrezcan servicios o productos similares, y tendremos
entonces que ver (analizar y evaluar) qué ofrece nuestra competencia en la
web. ¿Maneja información similar a la que nosotros vamos a ofrecer?¿Posee
ofertas, tips, algún “punto de enganche” ni bien ingreso al sitio?¿Qué colores
tiene?¿Tipografía, imágenes, textos extensos o breves?¿Nos invita a participar,
es interactiva, puedo realizar consultas? ¿Qué tipo de mensajes posee: per-
suasivo, informativo, … TODO aquello que forme parte del universo web que
manejen, deberán relevarlo para que podamos plantear un rasgo diferenciador,

y seguramente conservará otros que nos permitan vincularnos al “contexto de
clase”, es decir, que nos vincule al grupo o tipología del que formamos parte
(ejemplo: códigos visuales que se manejan dentro del contexto audiovisual o del
jurídico, símbolos que queramos rescatar, que son de lectura universal).
Una vez que tenemos la información del emisor y de la competencia, podremos

comenzar a pensar en una estética para la interfaz, los ítems a sumar en el menú,
si tendrá más o menos imágenes, cómo será la disposición de los elementos,
etc.
Comienza la etapa de Maquetación del Sitio.
Maquetando el sitio web en Adobe Photoshop ( A 1)

Para maquetar el sitio, es decir, para trazar un bosquejo del mismo, podremos
trabajar directamente dentro de Adobe Dreamweaver CS4, o bien, bocetar pri-
mero en Adobe Photoshop CS4. Como sugerencia, puedo plantearle que bocete
en Photoshop (software que ya le es familiar) en el que puede ver de forma
integral la estética, lo funcional, los pesos entre imágenes y textos a utilizar, etc.
Veamos un ejemplo de ello (ver imagen 10).
Este es el boceto del index (página de inicio del sitio). Esta página será la base
del desarrollo de las restantes. Observen que hay una especie de grilla que per-
mite modular la interfaz.
Debemos considerar siempre, que un sitio, tendrá un encabezado superior, en

el que seguramente insertaremos la marca o logo, tal vez una imagen o banner,
algún ícono que indique correo, o mapa de sitio, o inicio (home), un menú (que
puede ser horizontal o vertical), etc.
A continuación, bocetamos una segunda página, una página interna del sitio. En
este ejemplo, he decidido tomar el ítem del primer botón del menú, “Cuentos”.
Respetando la grilla del index, dejamos los elementos que serán “constantes”
(encabezado, menú, pie), y planteamos aquellos módulos que tendrán “varia-

bles”. Debemos pensar un sitio como un sistema de elementos. Las constantes,
permitirán entenderlo como parte de un todo. Al repetir elementos, ayudo al
usuario a entender que está en ese sitio y no en otro (recordemos que al nave-
gar, podemos perder “el rumbo” y no saber en qué sitio estamos), le permito
agilizar su navegación desde el momento en que no le altero la ubicación de los
elementos principales para conectar internamente las páginas, etc. Los elemen-
tos variables, dinamizarán la interfaz, la enriquecerán. Siempre cuidando de no
cambiar el estilo, el equilibrio de imágenes y textos, etc.
Boceto de la página “Cuentos” del sitio.
Así, seguiremos planteando cada una de las pantallas. Y con estos archivos
hasta ahora PSD, empezaremos a “recortar” elemento por elemento para luego
insertarlo ya en el Adobe Dreamweaver CS4, que nos permitirá volverlo interac-
tivo e hipermedial.
¿Cómo recortamos los elementos? Recordemos el uso de la herramienta Recor-

tar (ver imagen 12).

Esta imagen muestra la Herramienta Recortar de Adobe Photoshop CS4.
Si hacemos memoria acerca del uso de la presente herramienta, podremos recor-

tar cada elemento, como muestra la siguiente imagen, en la que se dejó sólo el
Encabezado. Cada imagen deberá ser Guardada para Web y Dispositivos (ver
imagen 13 y 14) para elegir entre el formato JPG (cuando es foto, por ejemplo),
GIF cuando es más simple o PNG cuando necesitamos que se vea bien pero que
a su vez soporte transparencias (fondos transparentes).
Vemos el Encabezado recortado del archivo completo, original.

Una vez recortada, vamos a Archivo>Guardar para web y dispositivos.
Unidad 4
Reconociendo el software Adobe Dreamweaver CS4
Adobe Dreamweaver es un programa que permite desarrollar páginas web.

Permite trabajar diseño y funcionalidad del sitio, en lenguaje HTML (HyperText
Markup Language, «lenguaje de marcado de hipertexto»). Todas las páginas
en Internet están escritas en este lenguaje. En Dreamweaver se puede trabajar
con tablas (con celdas), marcos, capas, comportamientos (JavaScript), etc. Este
lenguaje está basado en etiquetas que marcan el inicio y fin de cada elemento
de la página Web.
Un sitio, como hemos visto, posee una interfaz con la que interactúa el usuario.
Pero por detrás de toda esta “fachada”, encontramos la programación del sitio,
que se trabajará a partir de “códigos que forman parte del lenguaje html”. Por
ejemplo, el título de la página Web, en modo código se escribe entre las etiqu-
etas <title> y </title>. Como vemos, ambas etiquetas consisten en poner un
mismo comando entre los símbolos “<” y “>”. La primera etiqueta indica inicio,
y la segunda, que incluye el símbolo “/”, indica final.

Las etiquetas disponen de atributos que permiten definir características del
elemento sobre el que actúan. Por ejemplo, <table border=”1”> indica que la
que se trata de una tabla, y que tendrá un borde de grosor 1. El modo código lo
abordaremos más adelante.
Este programa incluye una versión de Cliente FTP completo permitiendo actua-
lizar el sitio en el mismo servidor. Tanto la actualización como la publicación del
sitio por vez primera en el Hosting, constará de todos los archivos que lo con-
formen dentro de una carpeta. Esta carpeta, si está subida al servidor, recibirá
el nombre de Carpeta Remota. Mientras que, si la carpeta se halla en nuestro
ordenador, el nombre será Carpeta Local o Raíz. El contenido será el mismo, su
nombre cambia en tanto esté publicada o no en Internet.
Los archivos que coloquemos en esta carpeta, deberán respetar las siguientes
características:
a) Utilizar siempre minúsculas, sin acentos, eñes ni caracteres especiales

(tanto carpetas como archivos);
b) No cambiar de lugar o de nombre tanto carpetas como archivos, una

vez iniciado el proyecto (por ejemplo, no modificar la ubicación de un
archivo, cambiándolo de carpeta). El lenguaje HTML muestra en pantalla
los archivos que conforman de la interfaz, sin embargo, esas imágenes
sólo son mostradas en pantalla, pues el programa “sigue el ruteo de la
imagen” y la muestra, pero no está in situ (sigue estando en la carpeta,
por ende, si la cambio a otra, no el programa desconocerá el ruteo y no
la mostrará). ¿Vieron cuando navegando en Internet, entramos a un sitio,
y aparece un cuadradito con una crucecita en rojo? Ese es el modo de
decirnos que la imagen que iba allí, no ha sido localizada y no puede
mostrarla.
c) En relación al peso (en megabytes – mb - o kilobytes - kb) deberá ser

también considerado, pues cuanto más pese esta carpeta, cuanto más
pesados sean los archivos, más demorará el sitio en ser “cargado”
(mostrado en pantalla), y presentará mayores dificultades para ser
navegado (recordemos los conceptos de usabilidad y accesibilidad).
d) En relación al tipo de archivo, tendremos JPG, PNG, GIF, HTML ó HTM

(puede o no llevar la L), y veremos más adelante que también incluiremos
un archivo de extensión CSS (Cascade Sheet Style, pero esto se verá
en profundidad en otro capítulo). Otros archivos a considerar pueden ser
de audio, de video, de texto, etc.
e) Muy importante: ordenar, organizar el sitio en carpetas desde el inicio

del planteo del sitio. Tendremos entonces, en la carpeta raíz, una
página index.html, una página estilos.css, una carpeta imagenes (sin
acento, el corrector coloca el acento, en ese caso, lo quitan) en la que
colocarán todas ellas, pueden realizar subcarpetas por ejemplo, para
colocar botones, o página por página, etc., otra carpeta videos, otra
de archivos txt, y así, con cada tipo de archivos. ¿Por qué conviene
ordenarlos? Pues porque una vez publicado el sitio en Internet (es
decir, “subido al FTP”), si necesito cambiar una imagen o un video, sé
exactamente su ubicación, y puedo reemplazarlo por otro que lleve sus
mismas dimensiones y nombre.

Ahora sí, vamos a comenzar a recorrer nuestro entorno de trabajo.
Introducción al mundo de Adobe Dreamweaver CS4
Una vez iniciado el programa, a través del ícono de acceso directo que se ha ins-
talado en nuestro escritorio, veremos la siguiente pantalla o ventana de diálogo
(ver imagen 15).
Pantalla de arranque, en donde se han señalado con un recuadro en rojo los for-
matos HTML y CSS (formatos con los que trabajaremos en el desarrollo del sitio.
En esta imagen vemos dos columnas de archivos (dos listados) que podríamos
utilizar. La primera, Abrir un elemento reciente, nos muestra los últimos archi-
vos con los que se ha estado trabajando en el programa. Si ustedes ya vinieran
trabajando con el mismo, seguramente tendrían allí el nombre del archivo de una
o varias páginas del sitio, y podrían abrirlo con sólo hacer click en el nombre.
Como aún no hemos comenzado a trabajar, vamos a pasar a la columna dos,
a la de Crear nuevo, que nos permitirá elegir entre los diferentes formatos de
archivos que permite trabajar Dreamweaver. En nuestro caso, vamos a comenzar
con HTML haciendo click en él. Más adelante, trabajaremos con CSS.
Una vez elegido el tipo de documento, lo abrirá de un modo similar al que mues-
tra la siguiente imagen (ver Imagen 16). Así abrirá el nuevo documento, que se
encuentra en Modo de pantalla: Diseño (es decir, para que trabajemos la inter-
faz desde lo que verá el usuario en pantalla, y no en versión código como les
comentara más arriba, cuando me referí a las etiquetas <title> y </title>.
Para conocer el entorno de trabajo, ver el siguiente tutorial en el link http://www.

aulaclic.com.es/dreamweaver-cs4/secuencias/p02_el_entorno_de_trabajo.htm.
Si bien aquí cerramos los contenidos del módulo 2, estamos abriendo la puerta
hacia un nuevo módulo. Hemos visto elementos necesarios para poder tener el
nombre de un sitio, cómo registrarlo, de qué se trata ese espacio virtual donde
se aloja el sitio web para hacerlo visible, … cuestiones que para muchos, tal vez,

hasta el inicio de la lectura del módulo 2 eran desconocidas. Si bien no somos
expertos en el tema, podemos decir que ya tenemos una buena base para poder
transitar el módulo 3.
Si se anima, lo invito a descubrirlo.
contenidos | IC
información complemetaria 1
contenidos | AA
Se adjuntan tres documentos PSD con la maquetación de un sitio A MODO DE
EJEMPLO. Los mismos corresponden a la página de inicio o index y a dos pági-
nas internas al mismo.
m2 material
m2 actividades
m2 | actividad 1
Buscando alojamiento web
¿Dónde publicaremos nuestro sitio? …
Sabemos que, más allá de abocarnos a la tarea de pensar, bocetar, diseñar,

programar y publicar nuestro sitio, debemos elegir dónde vamos a alojarlo.
Hemos visto en el módulo 2 que necesitamos de un lugar “rentado” en algún
rinconcito del ciber espacio para hacer visible nuestro sitio al resto del mundo.
Es por eso que en esta actividad, vamos a indagar un poco más acerca de los
Hostings o Alojamientos en la web.
Consigna
a) Realice una búsqueda de proveedores de hosting o alojamiento en la

web. Para ello, Internet será el lugar donde relevar los datos (en cual-
quier buscador).

b) Una vez que tengan dos (2) ó tres (3) proveedores, extraiga los datos
necesarios para completar el siguiente cuadro comparativo. Preste aten-
ción a los ítems que se mencionan como categorías a comparar, y sume
aquellas que crea pertinentes en base a los hostings relevados (el Pro-
veedor 01 que se menciona y sus características, son sólo un ejemplo,
usted reemplazará esos datos por el de los proveedores que seleccio-
nen).
Proveedor 01 Proveedor 02 Proveedor 03

(ejemplo)
TANGOWEBS
PLAN 01 Plan: Plan: Plan:
Webhosting I
Capacidad/ espacio 1 GB
de alojamiento
Capacidad de 10 GB
transferencia de
datos
Dominios en Parking 1 dominio +
(página con anuncios) parking ilimi-
tado
Costo de registro de Gratis
dominio
Cuentas de correo ilimitadas
Brinda posibilidad de
incluir Blog, Foros
Biblioteca de script
(secuencia de
comandos)
Servicio de soporte
Aplicativos para
trabajar en el hosting
desde telefonía móvil
Panel de control
Período de vigencia
del abono
Costo de la
suscripción
(especificar mes,
semestre, año…)
Otros: estadísticas,
webmail, etc. (deta-
llar)
c) ¿Cuál de los hostings relevados elegiría si tuviera que preparar un sitio

web para una productora de audiovisuales? Considere el tipo de archi-
vos que manejaría su cliente, pesos de los archivos, cantidad de giga-
bytes o megabytes que utilizaría para enviar (transferir) material desde
el sitio de la productora a uno de sus clientes, etc. ¿Y si se tratara de un
sitio de opinión pública? ¿En qué característica debiera reparar?
A 1


nas; en este último caso, les solicitamos lo aclaren en el archivo de texto (Word)
donde desarrollarán la misma. Además, se publicará un Foro (dentro del Módulo
2) para que quienes quieran, publiquen allí esta actividad, y así socializar la infor-
mación con el resto de los compañeros del curso.
El Foro es un espacio de trabajo colaborativo (opcional en la cursada). En el

caso de elegir publicar la actividad se realizará el aporte en el espacio corres-
pondiente a esta actividad (consultar al tutor). De este modo, ustedes podrán
conocer datos que aporten sus compañeros, y podrán opinar y/o comentar
acerca de los mismos. Para utilizar el Foro de la plataforma de mi.ubp, pida las
instrucciones a su tutor.

Opción 1: En un archivo de texto, en formato Word, A4, enviado por mensajería
de la plataforma.
Opción 2: A través del Foro habilitado para Actividad 01 del Módulo 2.
C 1
¿Cómo desarrollar esta actividad? Algunas pautas
En los buscadores, con sólo colocar la palabra Hosting o bien, escribiendo Alo-
jamiento web, le aparecerán infinitas páginas para consultar. Elijan aquellas que
ustedes consideren relevantes (van a ser muy similares entre sí, algunos brin-
darán más servicios que otros, los costos pueden ser en pesos o dólares según
sean nacionales o extranjeros, etc.).
Extraigan (copie) las características que se les solicitan y sumen aquellas que
les parecen interesantes de incorporar al cuadro, pues pueden ser datos inte-
resantes para compartir (como parte de la actividad, podremos compartir esta
información en un foro de la materia – participación opcional).

incluida). Se pretende que ustedes realicen su propia búsqueda, más allá de los
textos dados.
El grado de precisión y elaboración de los aportes (NO Copy-Paste).
El manejo del lenguaje específico.
La destreza en relación al uso correcto del Foro (en caso de ser utilizado).

La participación en dicho recurso o en Word no sólo con aportes teóricos sino
con ejemplos de hostings o alojamientos web que se destaquen, aportando un
análisis sobre las posibilidades que brinda cada uno de ellos, sus característi-
cas, sus ventajas y desventajas, entre otros (si tiene dudas, consulte al tutor).
La participación de los integrantes en el Foro, respeto por la palabra del otro,

compromiso y responsabilidad en el desarrollo de la actividad.
El cumplimiento de los puntos planteados como pautas y consignas.
m2 | actividad 2
Maquetación
HACIA UNA INTERFAZ…
Necesitamos presentarle a nuestro cliente la propuesta de un sitio en el que

podamos mostrar las últimas novedades, qué hacemos, a qué nos dedicamos,
cómo puede colaborar, cómo contactarnos entre otras cosas. Piense clara-
mente en una estética que contextualice los objetivos y principios de nuestra
institución, organización, producto, que transmita realmente quiénes somos,
ya que se trata de un sitio web que intenta acercar nuestra problemática o
nuestra propuesta a la sociedad, al público meta. Esperamos nos pueda sor-
prender con una presentación interesante y pertinente, con la originalidad que
usted sabe proponer. ¡Se larga la carrera, anímese, y diviértase diseñando!
Consigna
a) Realice una propuesta “por escrito” de un sitio web (temática a su elec-

ción), donde deje en claro los objetivos que persigue con el diseño del
mismo.
b) Una vez que tenga la idea concreta, comience la búsqueda de un estilo,

una estética, tipografía, etc. para diseñar tres pantallas en Adobe Pho-
toshop (como primer paso).
c) Determine una especie de modulación (crear módulos, no necesaria-

mente iguales, a partir del uso de las guías y la cuadrícula de base de
Adobe Photoshop) a fin de determinar espacios de elementos constan-
tes (encabezado, barra de navegación, footer o pie) y otras áreas de
información variable (textos, imágenes, links) que pueden ser pensadas
para renovar con determinada frecuencia.

d) Las tres pantallas a maquetar deben guardar cierto criterio para que se
lean como páginas internas del mismo sitio (una será index, las otras
dos, a criterio del menú que vaya a trabajar, ejemplo: quiénes somos).
e) Hecho esto, comenzará a preparar el material, cortando cada sector

con su dimensión exacta a ser aplicada posteriormente en Adobe Drea-
mweaver (es decir, si mi pantalla completa mide 900 x 700 pixeles, y el
área del encabezado es de 900 x 120 pixeles, deberán utilizar la herra-
mienta Crop de Photoshop y cortar ese sector del archivo). No olvide
Guardar para web cada uno de estos elementos, en el formato que crea
más pertinente según el tipo de imagen que viene trabajando.
f) Organice todos los elementos en carpetas y subcarpetas del sitio. En la

Unidad 4 del Módulo 2 ya se introdujo el tema de la creación y organiza-
ción de la Carpeta Raíz, por lo que ya se encuentra preparando material
para su sitio.
A 1

nas; en este último caso, les solicitamos lo aclaren en el archivo de texto (Word)
donde desarrollarán la propuesta y objetivos.
Además, se publicará un Foro (dentro del Módulo 2) para que quienes quieran,
publiquen allí esta actividad, y así socializar la información con el resto de los
compañeros del curso (en ese caso, deberá incluir todos los elementos dentro
de una carpeta zipeada).
El Foro es un espacio de trabajo colaborativo (opcional en la cursada) que per-

mite que trabajemos asincrónicamente, conociendo los trabajos del resto de los
compañeros del curso (sin estar aislados, creando opiniones, “escuchando” al
otro desde la palabra escrita, sintiéndonos parte de un grupo). En el caso de
elegir publicar la actividad se realizará el aporte en el espacio correspondiente a
esta actividad (consultar al tutor). De este modo, ustedes podrán conocer, como
citáramos anteriormente, las opiniones y críticas que aporten sus compañeros,
y podrán opinar y/o comentar acerca de los mismos. Para utilizar el Foro de la
plataforma de mi.ubp, pida las instrucciones a su tutor.

Opción 1: En un archivo de texto, en formato Word, A4, carpeta zipeada con todo
el material gráfico allí dentro, enviado por mensajería de la plataforma.
Opción 2: los elementos de la opción 1 publicados en el Foro habilitado para
Actividad 02 del Módulo 2.
C 1

¿Cómo desarrollar esta actividad? Algunas pautas
1. Lo primero que deberá hacer es plantear la propuesta por escrito (Word)

incluyendo los objetivos de la misma. No pierdan de vista los objetivos,
pues nos guiarán para no perder de vista qué se propone con la creación
del sitio, qué espera, a qué apunta.
2. En segundo lugar deberá “bocetar” en papel y luego pasar en limpio la

idea en Adobe Photoshop, previendo la preparación del material para el
sitio en sí (trabaje en formato PSD para luego “cropear” y Guardar para
web en formato según corresponda).
3. Recordemos: las imágenes deben plantearse a 72 dpi (definición para

pantalla), máximo 96 dpi.
4. Formato: puede utilizar una base de 900 pixeles de ancho por el alto
que usted defina (recuerde las condicionantes de scroll que vimos en el
módulo 1).
5. Ítems a contemplar en el menú: A / B / C / D / E (la denominación de

cada solapa o página la designará el grupo en función de los requeri-
mientos de cada institución). Piense que cada ítem del menú actuará
como botón.
6. Tiene libertad para generar un sitio atractivo, cautivante, convincente,

que transmita verdaderamente el alma de la institución, de la organiza-
ción, etc.

incluida). Se pretende que usted realice su propia búsqueda, más allá de los
textos dados. El Módulo 1 sirve de apoyo, no olvide los conceptos vistos (aquí
se aplicarán desde lo práctico).
El grado de usabilidad aplicado al diseño de pantallas.
El manejo del campo gráfico (interfaz), secciones, manejo de la grilla (tabla).
La destreza con el software específico.
La participación en el foro acerca de las propuestas restantes (desde el punto de

vista de crítica sobre las páginas propuestas por los otros participantes).

La participación de los integrantes en la toma de decisiones, manejo del
programa, acompañamiento, colaboración, y coparticipación en la propuesta
(trabajo reflejado en clase).
El cumplimiento con los puntos planteados para cada página como así también
con el cronograma y pautas de la propuesta.
La participación de los integrantes en el Foro, respeto por la palabra del otro,

compromiso y responsabilidad en el desarrollo de la actividad.
El cumplimiento de los puntos planteados como pautas y consignas.
m2 glosario
m3
m3 microobjetivos
• Desarrollar habilidades en el manejo de las herramientas básicas del programa

específico de diseño para web, a los fines de conocer los recursos disponibles
para el desarrollo del sitio.
• Conocer los elementos necesarios para la configuración de un sitio, a fin de

aprender a administrarlo desde la plataforma del programa.
• Entender la importancia y usos del panel propiedades, a los fines de aplicar

las diferentes variables que presenta a los distintos recursos necesarios para
el funcionamiento del sitio.
• Conocer el tipo de organización del sitio a partir del uso de tablas, celdas y
marcos con el objeto de desarrollar habilidades para generar la plantilla nece-
saria para el desarrollo de las páginas internas restantes.
m3 contenidos
Dreamweaver CS4: Conceptos básicos
En este módulo abordaremos las funcionalidades principales de Adobe Drea-

mweaver en su calidad de programa que permite diseñar y publicar en línea
páginas web, sobre la base del lenguaje HTML, HyperText Markup Language,
(lenguaje de marcado de hipertexto).
Cabe recalcar que Adobe Dreamweaver, como programa de diseño web, nos
brinda a los usuarios la posibilidad de manejar el diseño y la funcionalidad de
cada componente de nuestros sitios web, sin la necesitar de la manipulación

manual del código HTML, gracias a sus amigables funciones de edición visual.
Además, nos permite actualizar las páginas web en el servidor que las aloja,
mediante su propio software de cliente FTP, File Transfer Protocol, (Protocolo de
Transferencia de Archivos).
Unidad 5: Espacio de trabajo. Dreamweaver CS4.
En Dreamweaver encontramos un entorno de trabajo ampliamente personaliza-

ble. Sus paneles, inspectores y comportamientos se van adecuando de acuerdo
a nuestro propio uso y preferencias como usuarios. Asimismo, estos distintos
aspectos se hallan integrados en una única ventana.
De este modo, cada vez que abrimos un documento html, sea este un archivo
nuevo o uno sobre el que ya hemos empezado a trabajar y diseñar previamente,
nos encontramos con un espacio de trabajo conformado por los siguientes ele-
mentos principales:
Referencias: 1 Barra de aplicaciones / 2 Conmutador de espacios de trabajo / 3

Barra de herramientas del documento / 4 Barra de estado / 5 Inspector de propie-
dades / 6 Ventana del documento / 7 Grupos de paneles
Barra de aplicaciones
En la barra de aplicaciones nos hallamos, mayormente, con las opciones comu-

nes al resto de los programas de diseño y edición de imágenes de ADOBE. Las
opciones con las que cuenta son:

a. Archivo:
Nos posibilita acceder a alternativas tales como abrir y/o cerrar un archivo exis-
tente, crear uno nuevo, guardar un documento en una ubicación específica de
nuestra computadora, guardar como un formato determinado de archivo (.html,
..htm, java, .txt, etc.), o guardar como plantilla, por ejemplo. Además, aquí tene-
mos la posibilidad de imprimir el código de la página web que diseñamos o
abrimos (esto resulta particularmente útil cuando necesitamos comprender qué
etiquetas y/o propiedades estructuran una página web que necesitamos anali-
zar). Esta opción archivo nos permite, también, importar y/o exportar el docu-
mento, y obtener una vista previa en el navegador.

b. Edición:
Sus funciones fundamentales se refieren a las alternativas de rehacer y deshacer

acciones, cortar, copiar, borrar y pegar elementos, y realizar selecciones, entre
otras.
Vale agregar, que cuenta con una alternativa denominada preferencias, que
al igual que en otros programas de Adobe, nos autoriza a fijar parámetros de
manejo y constitución del documento, con múltiples opciones propias de las
necesidades del diseño web, tales como estilos CSS, sugerencias para el
código, y vista previa en el navegador.

Otra particularidad propia de DREAMWEAVER, en cuanto a la opción Edición, es
la alternativa Biblioteca de etiquetas, que suministra un amplio abanico de las
mismas para la composición de una estructura de sitio acorde a las necesidades
de diseño y comunicación.

c. Ver:
Contamos con opciones para hacer zoom in (Acercar) y zoom out (Alejar) dentro
del documento, también con la posibilidad de mostrar/ocultar reglas, cuadricu-
las y guías, que ayudan a la organización de los componentes de la página web.
Destacan las alternativas de vistas de edición “Código”, “Dividir código”,

“Diseño”, “Código y diseño”, que no son otra cosa que cuatro formas de “ver”
los niveles que componen el documento que estamos diseñando/editando.
La vista Código nos muestra en “crudo” la serie de etiquetas que integran la

composición.

Por su parte, la vista Diseño nos ofrece el resultado final, el tejido externo, la
apariencia que devuelve dicho entramado de etiquetas, semejante a cómo se
visualizará desde un programa navegador.
Con respecto a la vista Dividir código, muestra los códigos en dos secciones
distintas para facilitar la edición, mientras que la vista Código y diseño ofrece al
mismo tiempo ambas opciones de visualización. Cabe destacar que la edición se
puede realizar interviniendo desde cualquiera de las vistas citadas.

Por último, es relevante agregar que la barra de aplicaciones dispone de un
botón que permite cambiar entre las opciones de visualización mencionadas:

d. Insertar:
Opción que nos habilita a colocar dentro del documento etiquetas, imágenes,
archivos de media (SWF, FLV, Plug-In, etc.), tablas, formularios, hipervínculos,
vínculos de correo electrónico, fechas y comentarios, entre otros elementos.
e. Modificar:
Es una alternativa sumamente importante en la edición, dado que ofrece la

posibilidad de cambiar órdenes y niveles de lectura de elementos, por ejemplo
mediante la opción “organizar” (traer al frente, enviar al fondo, alinear, etc.),
modificar valores métricos, propiedades y características de ciertos componen-
tes de la página web, tal es el caso de las tablas, vínculos, plantillas, imágenes,

y la propia página web en su conjunto (mediante la opción “Propiedades de la
página…”).
f. Formato:
Contiene las opciones de configuración de sangría, formato de párrafo, alinea-

ción de texto (izquierda, centro, derecha, justificar), definición de fuente, estilos
(cursiva, negrita, subrayado, cita, destacado, etc.), edición de estilos CSS, y
selección de colores.
g. Comandos:
Nos permiten grabar, detener y guardar una serie de acciones de edición para
luego aplicarlas en el futuro. Entre los comandos predeterminados, resalta el
corrector ortográfico.

h. Sitios:
Permite crear nuevos sitios locales donde alojar las páginas webs que diseña-
mos, y su vinculación con sitios remotos. Esta administración de sitios nuevos y
existentes mediante Dreamweaver se abordará en detalle en una próxima unidad
de este módulo.
i. Ventana:
Ofrece el acceso a los múltiples paneles e inspectores que componen el uni-

verso de edición de Dreamweaver.
Tanto los paneles como los inspectores se presentan ante nuestros ojos como
ventanas flotantes. La diferencia entre uno y otro radica en que las opciones que
se despliegan en los inspectores varían en función del componente de la página
web que se halla seleccionado. Por su parte, los paneles despliegan opciones
generales.

Entre los inspectores destacan el de propiedades y etiquetas. En el ámbito de
los paneles, resaltan los siguientes: estilos css, archivos, bases de datos, com-
ponentes, comportamientos, y vinculaciones.
Además, en Ventana también nos hallamos con la posibilidad de Mostrar/Ocultar

todos los paneles a la vez (tecla F4).
j. Ayuda:
Nos brinda alternativas para obtener ayuda sobre el uso de la aplicación, sea
a través de tutoriales y referencias cargadas en nuestra propia computadora,
junto con la instalación del programa, o mediante el acceso a tutoriales, foros de
consulta y guías alojadas en el sitio web de la compañía fabricante del software
(Adobe). A su vez, suministra links de registro y de descarga de actualizaciones
de la aplicación.
Botones contiguos al menú principal:
Referencias: 1 Opciones de cambiar entre las vistas de edición “Código”, “Dividir

código”, “Diseño” y “Código y diseño” / 2 Opción “Extension Manager” y vínculo
a búsquedas de otras extensiones de Dreamweaver / 3 Opciones de creación de
nuevos sitios y de administración de sitios existentes.

Estos tres botones son propios y particulares de la aplicación Dreamweaver. Con
relación al botón de creación y administración de sitios, esta temática se abor-
dará en una unidad específica de este mismo módulo.
Conmutador de espacios de trabajo:
Suministra distintas opciones para modificar el entorno de trabajo de la aplica-

ción, con el fin de ajustarla a las necesidades y preferencias de diseño de cada
usuario. En efecto, permite “elegir entre los espacios de trabajo Desarrollador
de aplicaciones, Desarrollador de aplicaciones avanzado, Programador y Progra-
mador avanzado. Todos estos espacios de trabajo muestran la vista Código de
forma predeterminada (en la ventana de documento completa o en las vistas de
Código y Diseño) y tienen paneles acoplados en la parte izquierda de la pantalla.
Todos ellos menos Desarrollador de aplicaciones avanzado eliminan el inspector
de propiedades de la vista predeterminada. Si ninguno de los espacios de tra-
bajo proporcionados ofrece exactamente lo que necesita, puede personalizar el
diseño de espacio de trabajo abriendo y acoplando paneles en los lugares que
desee y guardando posteriormente la configuración como espacio de trabajo
personalizado” (Adobe Systems Incorporated. 2008: 316).

Barra de herramientas del documento:
Referencias: 1 Opciones de cambiar entre las vistas de edición “Código”, “Dividir

código”, “Diseño” y “Vista en vivo” y “Código en vivo” / 2 Título de la página web
/ 3 Administración de archivos / 4 Vista previa – Depurar en explorador / 5 Actua-
lizar vista de diseño (F5) / 6 Ver opciones / 7 Ayudas visuales / 8 Validar formato /
9 Comprobar compatibilidad con navegadores.
Dreamweaver habilita junto con la apertura de cada documento, una barra de

herramientas en su margen superior, que permite alternar entre distintas vistas
de código y diseño, editar el título de la página web, y administrar el archivo, por
ejemplo, a través de la deshabilitación de la prohibición de “Sólo lectura”.
Esta barra de herramientas además autoriza a obtener una vista previa de la

página web en distintos navegadores (“Vista previa – Depurar en explorador”) y
comprobar la compatibilidad de sus diseños con los mismos (“Comprobar com-
patibilidad con navegadores”). Asimismo, permite visualizar reglas, cuadrículas
y guías (“Ver opciones”), como así también fondos, diseños y contornos de dise-
ños CSS, anchos y bordes de tabla, bordes de marcos, mapas de imágenes y
elementos invisibles (“Ayudas visuales”).
Vale mencionar que se pueden abrir varios documentos a la vez, y cada uno de
ellos aparece identificado con una nueva pestaña con su nombre sobre la barra
de herramientas, y con el símbolo “X” para cerrar estos archivos cuando se lo
desee. Si en alguna de estas pestañas aparece el signo *, significa que no se
han guardado los últimos cambios generados en dicha página web.
Barra de estado:
Referencias: 1 Selector de etiquetas / 2 Herramientas seleccionar / 3 Herramienta

mano / 4 Herramienta zoom / 5 Establecer nivel de aumento / 6 Tamaño de des-
carga – Tiempo de descarga.
La barra de estado es especialmente útil para ver las etiquetas completas de una
selección. En adición, para cambiar los tamaños de las ventanas, de las páginas
webs y sus velocidades de descarga.
Inspector de propiedades:
El inspector de propiedades despliega las principales características del objeto

que seleccionemos. Por ello, sus opciones varían en función del elemento ele-
gido.
Cuando de imagen se trata, nos ofrece la posibilidad de editar ancho y alto en

píxeles (u otra unidad de medida prefijada), ubicación de origen de archivo, y
alineación con relación al documento (superior, media absoluta, izquierda, dere-
cha, etc.), peso, clase, entre otras opciones.

En relación a los textos, permite determinar el formato y clase que se está traba-
jando (párrafo, encabezado, texto, etc.), opciones de color de fondo y ubicación
de celda que los contiene, y características más detalladas mediante el botón
“Propiedades de la página”: fuente, tamaño, color de texto, color de fondo,
imagen de fondo, márgenes, etc.
Ventana del documento:
Muestra la página web con los elementos y objetos que la componen, sea en su
vista diseño y/o código según la alternativa de visualización que se elija.

Grupos de paneles:
La opción “Ventana” de la barra de aplicaciones, permite mostrar u ocultar el

grupo de paneles de Dreamweaver, compuesto por 13 paneles principales:
Insertar, Estilos CSS, Elementos PA, Inpector de etiquetas, Bases de datos, Vin-
culaciones, Comportamientos del servidor, Componentes, Archivos, Activos,
Fragmentos, Marcos e Historial. Cada panel ofrece la posibilidad de cambiar los
valores del elemento del que se ocupa.
Uno de los paneles más importantes es “Insertar”.

Este panel cuenta con una lista desplegable de opciones: Común, Diseños, For-
mularios, Datos, Spry, InContext Editing, Texto, Favoritos, Iconos de colores,
Ocultar etiquetas.
La opción “Común” es la principal, y posibilita insertar elementos tales como

hipervínculos, vínculos de correo electrónico, tablas, comentarios, plantillas,
fechas, imágenes y objetos media, entre otros. Además, al seleccionar alguna
de estas alternativas, despliega una ventana nueva con más posibilidades de
personalización del elemento seleccionado. Por caso, al elegir insertar>fecha,
se abre la siguiente ventana que ofrece la edición del formato del día, fecha y
hora, y la posibilidad de habilitar la actualización automática.

Unidad 6: Configuración y gestión de sitios web
El conjunto de páginas webs que creamos, diseñamos y editamos a la medida

de nuestras necesidades comunicativas, conforman en última instancia un sitio
web. Ciertamente, “un sitio web es un conjunto de archivos y carpetas, relacio-
nados entre sí, con un diseño similar o un objetivo común” (Aulaclic. 2009). Por
ello, resulta de suma importancia, “diseñar y planificar el sitio web antes de crear
las páginas que va a contener” (Aulaclic. 2009). En esta unidad aprenderemos
a crear un sitio web, modificar sus propiedades y atributos, y publicarlos en
Internet.
En esta dirección, es relevante comprender los términos “sitio local o raíz” y

“sitio remoto”. Ambos poseen la misma estructura. Sin embargo, el primero se
aloja en un disco local de la computadora en la que estamos diseñando, mien-
tras que el segundo lo hace en un servidor de Internet, a través del cual se publi-
can en línea el conjunto de páginas que conforman nuestro sitio, gracias a un
programa FTP que posibilita la transferencia del contenido del sitio local hacia
el sitio remoto.
A la hora de elaborar la estructura del sitio web, resulta conveniente agrupar los
archivos HTML en una misma carpeta, y dentro de esta crear carpetas que con-
tengan otros elementos tales como animaciones, imágenes u otro tipo de archi-
vos. Además, “la página inicial de nuestro sitio debe de tener el nombre index.
htm o index.html, ya que cuando se intenta acceder a una URL genérica, el
servidor devuelve la página con ese nombre” (Aulaclic. 2009).
Por último, no deje de recordar los conceptos que aprendió sobre las caracterís-
ticas abordadas en el Módulo 2 Unidad 4, con respecto a los archivos y carpetas
que conforman la carpeta local o raíz, en cuanto a nombres, ubicaciones, pesos,
formatos de archivos y órdenes de los mismos.
Crear y administrar sitios en Dreamweaver
Para crear un nuevo sitio debemos dirigirnos a la barra de aplicaciones y selec-

cionar el botón “Sitio>Nuevo sitio…”, o “Sitio>Administrar sitios…”.

Si utilizamos el camino “Sitio>Nuevo sitio…”, se abre la siguiente ventana:
Esta ventana, en su lengüeta “Básicas”, opera de asistente en la creación del

nuevo sitio, indicándonos que asignemos nombre a nuestro sitio, y señalemos
su dirección HTTP (URL), como así también la ubicación local y remota los archi-
vos que lo conforman. Por otro lado, la lengüeta “Avanzadas” nos permite definir
con mayores detalles los datos de localización del sitio y de acceso al servidor,
mediante el FTP, por ejemplo.

Por su parte, la ruta “Sitio>Administrar sitios…” abre una ventana que nos per-
mite acceder a la ventana anteriormente descripta (con sus opciones “Básicas”
y “Avanzadas”) mediante el botón “Nuevo…”, editar dichas opciones en los sitios
ya creados, como asimismo quitar, duplicar, exportar e importar sitios.

Cabe agregar que el panel Archivos nos brinda un detalle de los archivos locales
del sitio, sus rutas, tamaños, formatos y fecha de modificación. Este panel es
útil para la visualización del mapa del sitio y el acceso rápido a cada uno de sus
documentos.
El botón de la esquina superior derecha del panel Archivos, nos posibilita “Expan-
dir la ventana para mostrar sitio local y remoto”, es decir, nos permite visualizar el
sitio tanto en su versión ubicada en el disco local de nuestra computadora, como
en el disco del servidor que lo publica en Internet:
La ventana que nos muestra el sitio en su versión local y remota, cuenta con un
menú superior a través de cuyos botones podemos sincronizar el sitio remoto
con los archivos locales, subir y bajar archivos, actualizar el sitio, etc.

1 Conectar al servidor remoto / 2 Actualizar (F5) / 3 Archivos del sitio / 4 Servi-
dor de prueba / 5 Archivos de bases de datos / 6 Obtener archivo(s) / 7 Colocar
archivo(s) / 8 Proteger archivo(s) / 9 Desproteger / 10 Sincronizar
Unidad 7: Hiperenlaces. Creación, características y propiedades
La dinámica de un sitio web es generada a través de los vínculos que se generan

tanto entre las páginas y archivos que lo componen, como con aquellos sitios
y recursos externos a los que puede referirse dentro de la compleja e infinita
intertextualidad de la World Wide Web (WWW). En este sentido, los hiperenla-
ces, también llamados hipervínculos, conforman la estructura troncal de esta red
informática mundial. En esta unidad nos adentraremos en las modalidades de
generación y edición de hipervínculos que nos suministra Dreamweaver CS4.
Primeramente, es importante entender la diferencia entre distintos tipos de rutas

de vínculos:
• Rutas absolutas: “Las rutas absolutas proporcionan el URL completo

del documento vinculado, incluido el protocolo que se debe usar
(generalmente, http:// para páginas Web), por ejemplo: http://www.adobe.
com/support/dreamweaver/contents.html. Para vincular un documento
situado en otro servidor, es preciso emplear una ruta absoluta” (Adobe
Systems Incorporated. 2008: 288).
• Rutas relativas: “Las rutas relativas al documento suelen ser las más
adecuadas para vínculos locales en la mayoría de los sitios Web. Resultan
particularmente útiles cuando el documento actual y el documento con
el que se establece el vínculo se encuentran en la misma carpeta y es
probable que vayan a permanecer juntos. También puede utilizar una
ruta relativa al documento para establecer un vínculo con un documento
de otra carpeta, pero especificando la ruta a través de la jerarquía de
carpetas desde el documento actual hasta el vinculado” (Adobe Systems
Incorporated. 2008: 288). De este modo, por ejemplo, supongamos
que contamos con un sitio conformado por la siguiente estructura de
carpetas y archivos:
o HOME.
o 1.html
o 2.html
o Portada.
• diario.html
o CONTACTOS.
o direccion.html

Para generar un enlace de 1.html a 2.html, se usa la ruta relativa “2.html”.
Un vínculo de 1.html a diario.html necesita la barra diagonal (/) para
bajar en la jerarquía de subcarpetas, por lo que la ruta es “Portada/
diario.html”. Y un enlace de 2.html a dirección.html necesita subir en la
jerarquía de carpetas, por lo cual la ruta es “../contactos/dirección.html”.
Una vez que comprendamos la importancia de diferenciar entre rutas relativas y

absolutas de hipervínculos, debemos prestar especial atención al nombre que
les asignamos a los archivos y carpetas, debido a que la especificación de los
mismos, al momento de detallar la ruta, debe ser exacta. En consecuencia, se
recomienda el uso de minúsculas y la omisión del empleo de caracteres espe-
ciales tales como acentos y espacios.
Dreamweaver nos permite crear hiperenlaces mediante el inspector de propie-

dades, por un lado, y a través de la opción Insertar>Hipervínculo del menú
principal, por otro. La última opción supone que posicionemos el cursor en deter-
minado lugar del documento, y con Insertar>Hipervínculo abramos una ventana
donde se especifica la ruta, el nombre asignado al vínculo, el destino, y especi-
ficaciones de programación tales como “Clave de acceso” e “Índice de fichas”:
En la imagen anterior podemos observar la opción “destino”. La misma hace

referencia a la ventana en la que se abrirá el contenido enlazado. Las alternativas
son:
• _blank: “abre el documento vinculado en una nueva ventana o pestaña
del navegador” (Aulaclic. 2009).
• _parent: “abre el documento vinculado en la ventana del marco que

contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se
emplean marcos” (Aulaclic. 2009).
• _self: “es la opción predeterminada, y la que se produce si no indicamos

otra cosa. Abre el documento vinculado en el mismo marco o ventana
que el vínculo” (Aulaclic. 2009).
• _top: “abre el documento vinculado en la ventana completa del

navegador”. Tiene sentido si se emplean marcos” (Aulaclic. 2009).
Retomando las modalidades de creación de hiperenlaces, el inspector de pro-

piedades, una vez seleccionado el texto o imagen que queremos convertir en
vínculo, suministra un espacio donde debemos consignar la ruta del enlace:

1 Archivo de origen de imagen / 2 Ruta del hipervínculo / 3 Marco de destino.
Con respecto al formato de los hiperenlaces, en “Propiedades de la página”

(desde el inspector de propiedades o a través de Modificar>Propiedades de la
página), la categoría “Vínculos (CSS)” nos permite cambiar, en el caso de víncu-
los de texto, la fuente de la letra, su tamaño, y su color en sus distintos estados:
activos, visitados y sustitución. Además, nos posibilita consignar estilo de subra-
yado: siempre subrayar, nunca subrayar, mostrar subrayado únicamente al situar
cursor encima, y ocultar subrayado al situar cursor encima.
Finalmente, Dreamweaver habilita la inserción de vínculos de correo electrónico,

mediante la apertura del programa de correo electrónico predeterminado por el
usuario, siendo el más conocido y popular de todos el Outlook.
El inspector de propiedades, también en la opción vínculo, permite ingresar la

referencia del correo electrónico que se desea enlazar. La fórmula que debemos
usar es la palabra “mailto”, seguido de dos puntos “:” y la dirección de correo
electrónico. En el ejemplo que se cita a continuación, la fórmula completa es
mailto:info@lamagica.com.ar:

Otra manera de generar un vínculo hacia un e-mail, es a través de la alternativa
Insertar>Vínculo de correo electrónico, del menú de la barra de aplicaciones.
Esta opción abre una ventana donde se describe nombre del enlace y correo
electrónico con el que se vincula:
Unidad 8: Maquetación de páginas web. Tablas, marcos, capas y plantillas
Todo sitio web se erige sobre una estructura determinada, sea conceptualmente
más o menos equilibrada, o que apele a la inestabilidad, o quizás, por qué no, a
un juego de organización rítmica de la información. De cualquier manera, todas
las decisiones estéticas que tomemos, suponen llevarse a cabo sobre la base de
una acabada y pensada maquetación, que nos permitirá comunicar aquello que
realmente queremos y de la manera en que deseamos hacerlo.
Y para ello, Dreamweaver nos ofrece herramientas tales como regla, guías y
cuadrícula, a las cuales podemos acceder con la opción “Ver” de la barra de
aplicaciones. Sin embargo, también nos brinda recursos más específicos para
un mejor control de los componentes textuales, gráficos y audiovisuales: tablas,
marcos, plantillas y capas.

Tablas
Las tablas están compuestas por un conjunto de celdas, siendo cada una de
ellas producto de la intersección un una columna con una fila. Para insertar una
tabla nos dirigimos a la opción Insertar>Tabla, opción que se encuentra en la
barra de aplicaciones.
Inmediatamente se abre la ventana donde especificamos tamaño de tabla y

encabezado:

En tamaño de tabla, definimos cantidad de filas y columnas, ancho en píxeles o
porcentaje, el grosor del borde, y relleno y espacio de celda. Sobre la unidad de
medida del ancho de la tabla,
“la diferencia de uno y otro es que el ancho en Píxeles es siempre

el mismo, independientemente del tamaño de la ventana del navega-
dor en la que se visualice la página, en cambio, el ancho en Porcen-
taje indica el porcentaje de la página o del elemento contenedor y se
ajustará al tamaño de la ventana del navegador, esto permite que los
usuarios que tengan pantallas grandes, aprovechen todo el ancho de
pantalla” (Aulaclic. 2009).
En cuanto al relleno y espacio entre celdas, el primero “indica la dis-

tancia entre el contenido de las celdas y los bordes de éstas”, mien-
tras que el segundo “indica la distancia entre las celdas de la tabla”
(Aulaclic. 2009).
El apartado encabezado nos permite detallar su ubicación (izquierda, superior,

ambos) o la carencia del mismo. También podemos escribir un título, que apa-
recerá fuera de la tabla. Finalmente, En resumen “podemos indicar una descrip-
ción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho
texto no aparece en el navegador del usuario” (Aulaclic. 2009).

En el ejemplo, consignamos la creación de una tabla de 2 filas y cuatro colum-
nas, a un ancho de 900 píxeles, con un grosor de borde de 1, y la inexistencia
de encabezado y título.
En cada una de las celdas, se insertaron imágenes para armar el menú de los
cuentos del sitio web. Para esto, posicionamos el cursor en cada celda y selec-
cionamos Insertar>Imagen.
Cabe aclarar que Dreamweaver posibilita visualizar las tablas en dos modos:
Modo estándar y modo de tablas expandidas. Para cambiar de un modo al otro,
nos debemos dirigir a Ver>Modo de tabla:

Modo estándar

Modo de tablas expandidas
Desde el inspector de propiedades podemos alterar los valores que definimos al

momento de crear la tabla:
La opción Modificar>Tabla del menú de la barra de aplicaciones, nos permite

seleccionar la tabla, combinar y dividir celdas, insertar y eliminar columnas o
filas, aumentar o reducir el tamaño de las filas y columnas, borrar el alto o ancho
de una celda, y cambiar los altos y los anchos de porcentajes a píxeles o vice-
versa.

Es importante agregar que es posible agregar una tabla dentro de otra. A esta
acción se la llama anidar tablas. Para realizarlo posicionamos el cursor dentro de
la celda donde deseamos agregar una tabla y elegimos Insertar>Tabla.
Con respecto a combinar y dividir celdas, también podemos hacerlo desde el

inspector de propiedades. Para combinar celdas, seleccionamos las celdas a
combinar y apretamos el botón “Combina las celdas seleccionadas usando
extensores”. Para dividir una celda, elegimos la misma y seleccionamos el botón
“Divide la celdas en filas o columnas”.
1 Combina las celdas seleccionadas usando extensores / 2 Divide la celdas en

filas o columnas

Marcos
La esencia de los marcos o frames consiste en trabajar con una página maestra
que contiene otros documentos HTML, editables y mutables de manera indepen-
diente. Su funcionalidad radica en mantener constantes ciertos elementos, como
por ejemplo un encabezado que contenga un logotipo o información institucio-
nal, mientras que las demás secciones (conformadas por archivos HTML separa-
dos) mutan al realizar determinadas acciones, como seleccionar botones de un
menú. Para crear un marco seleccionamos Insertar>HTML>Marcos, dentro de
la barra de aplicaciones:
Otra manera, otra vez dentro de la barra de aplicaciones, es elegir

Modificar>Conjunto de marcos, y seleccionar entre las alternativas dividir marco
hacia la derecha, izquierda, arriba o abajo:

Una vez creado el o los marcos, podemos editarlos desde el panel marcos y el
inspector de propiedades, seleccionando cada uno de ellos y cambiando sus
nombres y demás atributos:
Para terminar, y sobre la presencia actual de los marcos en los sitios webs, el
problema que acarrean a la hora de ser indexados por los buscadores es un
factor crucial que explica el por qué hoy en día no son usados con frecuencia.
También lo es el hecho de que el trabajo con los marcos debe ser muy preciso y
cuidadoso para que la visualización de la página web sea adecuada en distintas
resoluciones de pantallas.

Plantillas
Las plantillas nos ayudan a mantener un formato uniforme entre las páginas que
constituyen nuestro sitio web. Ciertamente, nos ofrecen una serie de elementos
constantes, como lo pueden ser un isologotipo ubicado en determinado lugar, o
un color de fondo específico, entre otros atributos. Es relevante mencionar que:
“las plantillas son una especie de copia de la página en la que van

a estar basadas el resto de páginas del sitio web, pero que incluyen
la posibilidad de establecer unas zonas editables y otras zonas que
serán fijas, que no podrán ser modificadas. No es posible modificar
las propiedades de una página que está basada en una plantilla,
a excepción del título. Cuando se desea que existan páginas con,
por ejemplo, diferente color de fondo, es necesario crear plantillas
diferentes con los distintos colores, y basar las páginas en una u
otra plantilla, según el color de fondo que se desee para cada una.
Cuando se modifica el diseño de una plantilla, se pueden actualizar
todas las páginas basadas en ella. Esto nos puede ahorrar mucho
trabajo. Las plantillas son archivos con la extensión DWT que se
guardan en el sitio web, dentro de una carpeta llamada Templates”
(Aulaclic. 2009).
Para crear una plantilla, y abierto el documento que queremos convertir en plan-
tilla, seleccionamos dentro de la barra de aplicaciones, Archivo>Guardar como
plantilla…:
En la ventana que se abre, particularizamos el sitio al que pertenecerá y el

nombre que le asignaremos:

Otra forma de crear una plantilla es desde el panel activos, mediante el botón
“Nueva plantilla” localizado en la parte inferior derecha:
1 Actualizar lista del sitio / 2 Nueva plantilla / 3 Editar / 4 Eliminar
Como “todos los elementos de una plantilla están bloqueados por defecto, no
se pueden modificar”. Para hacerlo, debemos “establecer las zonas para que
puedan ser editadas en las páginas que se basen en dicha plantilla” (Aulaclic.

2009). Con Insertar>Objetos de plantillas podemos fijar las regiones editables
de la plantilla con la que estamos trabajando:
En la ventana que se abre, debemos indicar la denominación asignada a dicha

región editable:
“Las zonas editables aparecen representadas en Dreamweaver como un recua-

dro con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la
zona editable” (Aulaclic. 2009).

Capas
Las capas, layer o divisiones, “no son más que unos recuadros, elementos de
bloque, destinados a contener y agrupar otros elementos, igual que los párra-
fos son elementos de bloque destinados a contener texto”. En efecto, “dentro
del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones
flash, y todos los elementos que puede contener un documento HTML” (Aulaclic.
2009). Cada capa se crea con la etiqueta <div></div>, y se caracteriza porque
aplica los atributos que se hallan definido para ella a todos los elementos que
contenga.
Para insertar una capa seleccionamos en la barra de aplicaciones la opción

Insertar>Objetos de diseño, y allí elegimos “Etiqueta Div” (división simple) “Div
PA” (capa con posición absoluta).

Si insertamos una etiqueta Div, se abre una ventana donde debemos consignar,
entre otras características, el nombre de ID o capa:
Seguidamente, aparece la capa en el documento, y en el lugar que fijamos, en

este caso el punto donde habíamos situado el cursor:

Una vez creada la capa, cargamos el contenido que deseamos y lo editamos de
acuerdo a nuestros objetivos.
Con relación a las etiquetas Div PA, aparece directamente una vez seleccionada.
Es decir, no supone la apertura previa de una ventana, como si lo hace la eti-
queta Div.
El inspector de propiedades nos permite modificar el nombre de la capa, fijar sus

dimensiones en alto y ancho y ubicación dentro del documento, como asimismo
determinar otros parámetros como color de fondo.

Para seleccionar una capa podemos seleccionar el pequeño recuadro de
bordes azules, ubicada en el extremo superior izquierdo de cada una de ellas,
o elegirlas dentro del listado de capas que aparece dentro del panel Estilos
CSS>Elementos PA:
Por último, con el panel Estilos CSS podemos acceder a opciones de edición de
la fuente y fondo de las capas:
Hasta aquí, nos hemos adentrado en el entorno de Adobe Dreamweaver, cuáles

son sus herramientas, para qué sirve cada una de ellas, cómo se trabaja dentro
del programa, a qué llamamos tablas, celdas, marcos, entre otras tantas cosas.
Será cuestión de ponerlas en práctica en las actividades del módulo, que ser-
virán para asentar estos procesos básicos y como disparadoras de métodos y
caminos alternativos, de cambios, de instancias de prueba. Descubrir a partir de
la experiencia es otro método de aprendizaje. Anímense a probar, cambiando
parámetros, descubriendo qué pasa si alteramos valores del panel propiedades
por ejemplo. Nos vemos en el módulo 4.

m3 material
m3 actividades
m3 | actividad 1
Configuración del Sitio
Sitio Nuevo/ Administrar Sitios
“Usted va a determinar el sitio, para poder visualizarlo internamente desde el

mismo Adobe Dreamweaver. Dónde está ubicado, cuál es su carpeta imágenes,
etc.”
Consigna
a) Este es un ejercicio que consiste simplemente en definir la configuración del

sitio:
b) Le proponemos entregar este trabajo con captura de pantalla en un Word,

explicando qué pasos se fueron siguiendo para completar o dejar pendiente
algunos datos hasta tanto los conozcamos. Tiene por objetivo simplemente
sirve el aprender a setear el sitio en el disco local (en la computadora) o

bien, si ya conocemos datos más técnicos (URL, tecnología del servidor,
etc.) podríamos estar preparando su configuración para ser visualizado en el
navegador.
c) Envíe este trabajo por mensajería.
Observación: cuando definimos la configuración del sitio, podremos ver en el

Panel Archivos de Dreamweaver todos los archivos locales y su ubicación exacta.
m3 | actividad 2
Armado en Dreamweaver
Insertando elementos
Consigna
a) Vamos a ir colocando en cada celda, la imagen correspondiente, o bien

el texto, o frase, etc.

b) No olviden crear una hoja de estilo (archivo>nuevo>hoja de estilo css.:
Imagen 01: 1) Encabezado / 2) Barra de Navegación, 3) Sección donde

puedo ubicar un elemento constante o variable, que dinamice al sitio; 4)
e este caso es la foto central, 5) un área donde puedo colocar una frase;
6) pie.
c) La pantalla, completa, posee las siguientes dimensiones: 900 pxls x 681

pxls. El tamaño de la pantalla tiene relación directa con la resolución de
los monitores en las que se visualizarán. Es decir, si la mayoría de los
monitores, actualmente trabajan en una resolución de 1024 x 768 pxls (
A 1), las dimensiones pensadas para este sitio, serían correctas (casi
un full screen).
d) Abrimos el Adobe Dreamweaver, elegimos Crear nuevo HTML, y en

Modo Diseño, con el cursor titilando en la Mesa de Trabajo, vamos a
menú superior Insertar>Tabla. Aparece una ventana de diálogo:

Como esta primera tabla será para insertar la imagen del Encabezado,
y el mío es una sola imagen, elijo como Filas: 1 y columnas:1. El ancho
de tabla, será el máximo:900 pxls, y en grosor, relleno y espacio entre
celdas debería quedar en 0 (cero) si es que no quiero verlos (recomen-
dado). Más abajo, donde dice accesibilidad, es importante completarlo,
al igual que el resumen (pues esto ayuda a las personas con discapaci-
dad visual o bien con baja conectividad a conocer previamente qué es lo
que se está cargando en el navegador.
e) Definida la primera celda (esta tabla posee una sola celda), coloco el
cursor al final de la misma, por fuera de la celda (como si fuera al final
del renglón. Vamos nuevamente a Insertar>Tabla, y en mi caso, volvería
a ser 1 fila y 1 columna, pues la Barra de Navegación así lo requiere (son
los botones los que deberán tener el tamaño exacto para que la suma
del total siga dando 900pxls.
En Modo de Tablas expandidas se ve claramente. Así, continuaremos

colocando tantas celdas y columnas como necesitemos.
f) Terminamos de ubicar todas las tablas y celdas, y comenzamos a definir

los tamaños exactos de cada una de ellas, colocando el cursor del
mouse dentro de la celda a dimensionar en el Panel Propiedades.

En este caso, la columna dentro de la que se ve el cursor, necesita “divi-
dirse en 2 filas” (vuelvan a la maqueta). En el panel propiedades está la
opción Dividir.
Dividir celda en este caso, en dos filas.

g) Redimensionen como paso final cada una de las celdas. Luego, pre-
paren las imágenes para posteriormente (no será en esta actividad) se
rellenarán con ellas cada espacio ( A 2).
Algunas pautas
1. Lo primero que deberá hacer es revisar la maqueta hecha en Photoshop
para ver el tamaño exacto de cada elemento.
2. En segundo lugar deberá ir armando las tablas que conformarán el sitio.
3. Luego, redimensionan, dividen o unen celdas, etc.
4. Preparan las imágenes, las dejan guardadas en la carpeta imágenes (sin
acento y con minúscula el nombre de la carpeta).
5. Guardar el documento como index.html (minúscula). Todo, siempre,
organizando la carpeta raíz ya preconfigurada en la actividad 01 del pre-
sente módulo.

textos dados.
nas; en este último caso, les solicitamos lo aclaren por mensajería a su tutor/
tutora.
Además, se publicará un Foro (dentro del Módulo 3) para que quienes quieran,
publiquen allí esta actividad, y así, socializar la información con el resto de los
El Foro es un espacio de trabajo colaborativo (opcional en la cursada) que per-

mite que trabajemos asincrónicamente, conociendo los trabajos del resto de los
compañeros del curso (sin estar aislados, creando opiniones, “escuchando” al
otro desde la palabra escrita, sintiéndonos parte de un grupo). En el caso de
plataforma de mi.ubp, pida instrucciones a su tutor.

Opción 1: El archivo index.html, dentro de la carpeta raíz, con las carpetas res-
tantes.
C 1

Para conocer la resolución de pantalla de su monitor, diríjase al Escritorio de su

computadora, haga clic sobre el fondo de la pantalla con el botón derecho del
mouse. Se le abrirá un menú, haga clic en Resolución de Pantalla:
Las opciones, según el tipo de monitor (Widescreen, Flat, etc.) variará entre:

Si mi pantalla tiene 1280 x 800 pxls para una visualización óptima, ¿cómo se verá
un sitio de 900 x 681 pxls como el que se plantea en la actividad? Pues se verá
más pequeño que la misma pantalla, pues la resolución (el tamaño, sus dimen-
siones) son menores que las de mi monitor.
Ahora bien, si cambio la resolución por la alternativa mínima que permite mi

monitor a 800 x 600 pxls, (porque tengo problemas de vista y necesito ver los
íconos más grandes, ¿sabían que al bajar las dimensiones, los objetos se ven
más grandes como si hiciéramos un zoom in?), ¿cómo veríamos el sitio de 900
x 681 pxls?
Pues lo veríamos “cortado”, es decir, voy a tener que “scrollar” en el lateral dere-
cho y en la parte inferior de la pantalla.
Imágenes: siempre se Guardan para web en Adobe Photoshop. Resolución 72

a 96 ppi.
• El grado de manejo del programa:
• El manejo de las tablas y celdas, panel Propiedades, dimensiones,

preparación de imágenes.
• La destreza con el software específico.
• La participación en el foro acerca de las propuestas restantes (desde

el punto de vista de crítica sobre las páginas propuestas por los otros
participantes).
• La participación de los integrantes en la toma de decisiones, manejo

del programa, acompañamiento, colaboración, y coparticipación en la
propuesta.
• El cumplimiento con los puntos planteados para cada página como así
también con el cronograma y pautas de la propuesta.
• La participación de los integrantes en el Foro, respeto por la palabra del

otro, compromiso y responsabilidad en el desarrollo de la actividad.
• El cumplimiento de los puntos planteados como pautas y consignas.
m3 glosario

m4
m4 microobjetivos
• Aprender el manejo de las hojas de estilo css, a fin de controlar y automatizar

la aplicación de cambios a los textos dentro del sitio web.
• Entender la importancia de trabajar con el formato y peso de imágenes ade-

cuado, con el objeto de generar un sitio liviano y accesible.
• Comprender las características de la imagen de sustitución como elemento

llamador, a fin de crear en el sitio un punto atencional sin caer en distracción
o uso exagerado del recurso.
• Concebir la inclusión de material multimedia y aprender los procesos que

conllevan a incorporarlos al sitio, a fin de desarrollar un proyecto hipertextual
e hipermedial.
• Conocer los elementos necesarios para la configuración del formulario del

sitio, a fin de seleccionar aquellas opciones que sean pertinentes para nues-
tro proyecto.
m4 contenidos
Adición y edición de contenidos en Dreamweaver CS4
En este módulo nos ocuparemos de la adición y edición de diversos contenidos

en documentos que trabajamos con Adobe Dreamweaver, siendo contenidos
principales los textos, las imágenes, los archivos multimedia (sonidos, animacio-
nes y videos), y los formularios.
Unidad 9: Textos
Los textos son elementos fundamentales, protagonistas, de los sitios webs que
diseñamos. En esta unidad, aprenderemos a modificar sus propiedades y a crear
estilos CSS, que nos posibilitan asignarles a los textos estilos y clases de atribu-
tos fijados por nosotros mismos.
Las características de los textos pueden cambiarse y definirse con las alternati-
vas listadas en el botón “Formato” de la barra de aplicaciones:

La opción “Formato” nos permite agregar y/o anular sangría en un texto, instaurar
un formato de párrafo (ninguno, párrafo, encabezado, texto preformateado), fijar
la alineación (izquierda, centro, derecha, justificar), generar listas de información
(lista de definición, ninguna, sin ordenar y ordenada), determinar la fuente (Ver-
dana, Times New Roman, Tahoma, etc.) y el estilo (negrita, cursiva, subrayado,
tachado, teletipo, énfasis, destacado, código, variable, muestra, teclado, cita,
definición, eliminado, insertado), como asimismo el color de la letra y, si así se lo
estableciere, el estilo css (ninguno, fraseindex, pie, título, texto, o nuevo estilo).
Además, y por otro lado, uno de los recursos de uso frecuente que nos brinda
Dreamweaver, para la edición de textos, es el inspector de propiedades. El ins-
pector de propiedades presenta dos categorías: HTML y CSS. La diferencia entre
una y otra radica en que todas las propiedades que define la categoría HTML
“generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero
al final, podremos personalizarlas con CSS para que se vean exactamente como
queramos” (Aulaclic. 2009).
De este modo, la categoría HTML posibilita seleccionar entre variantes predeter-

minadas de formato, estilo (negrita - bold o cursiva - italic), listas (con viñetas o
numeradas) y sangría (agregar o eliminar). Por caso, en cuanto al formato:
“puede ser encabezado, párrafo o formato predeterminado.

Los encabezados se utilizan para establecer títulos dentro de
un documento. El formato predeterminado sirve para que el
texto aparezca tal cual ha sido escrito, por ejemplo, si entre
dos palabras se introducen varios espacios solo se considera
uno, pero al establecer el formato predeterminado se respe-
tará que hayan varios espacios en lugar de solo uno. El texto
normal, debería ir siempre en párrafos, salvo que esté en otros
elementos, como tablas o listas” (Aulaclic. 2009).

1 Propiedades de etiquetas HTML del texto / 2 Propiedades CSS de texto / 3
Formato / 4 Clase de texto: título, pie, fraseindex, ninguna / 5 Estilo o variante de
fuente: Negrita y cursiva / 6 Listas ordenada y sin ordenar: viñetas y numeración
/ 7 Sangría: anular y agregar / 8 Alineación de contenido de una celda: horizontal
y vertical / 9 Convierte la celda en un encabezado / 10 No ajusta el contenido de
una celda.
Por su parte, la categoría CSS (“Cascading Style Sheets”. Traducción: Hojas de

Estilo en Cascada)
“nos permiten formatear nuestra página y darle el diseño que

queramos. Podemos cambiar desde propiedades simples,
como el color de fondo, hasta cosas más vistosas, como hacer
que un bloque se muestre en una posición determinada o que
un elemento cambie al pasar el cursor sobre él” (Aulaclic.
2009).
Vale destacar que, tal y como se desarrollo en la unidad Hipervínculos del

módulo 3, los campos “Vinculo” y “Destino”, posibilitan convertir el texto que
seleccionemos en un enlace. En “Vínculo” se fija la URL que abre y en “Destino”
el tipo de apertura de la ventana.
1 Propiedades CSS de texto / 2 Propiedades de etiquetas HTML del texto / 3

Regla de destino / 4 Fuente / 5 Estilo: negrita y cursiva / 6 Alineación de párrafo:
izquierda, centro, derecha, justificar / 7 Editar regla / 8 Panel CSS / 9 Tamaño de
fuente / 10 Unidad de medida del tamaño de fuente: px, pt, in, cm, mm, pc, em,
ex, % / 11 Color de fuente.
Cabe agregar que la categoría CSS nos ofrece un muestrario de reglas de estilo
(body, texto, fraseindex, pie y título), al mismo tiempo que nos habilita para crear,
editar y eliminar reglas nuevas. Cada una de estas reglas establece perfiles de
textos específicos en tamaños, colores, variantes, alineaciones, posiciones, etc.
Asimismo, desde el panel CSS se pueden visualizar todas las reglas generadas
para un documento y observar la regla que se ha aplicado en ciertos sectores:

Recuerden que, para crear una regla se deberá escribir la misma siempre comen-
zando con un punto (.):
Ejemplo: .texto (tal como se ve en el panel de Estilos CSS en la sección Propie-

dades).
Por otra parte, Dreamweaver ofrece la inserción de caracteres especiales

(copyright, marca registrada, yen, guión, abrir y cerrar comillas, etc.) a través del
botón Insertar>HTML>Caracteres especiales, dentro de la barra de aplicacio-
nes. En adición, también siguiendo esta ruta Insertar>HTML, y seleccionando
la opción “Objetos de texto” podemos agregar a nuestra página web elementos
tales como comillas en versalitas, abreviaturas, acrónimos, entre otros:

Por último, particularizaremos algunos aspectos de las CSS, donde entendemos
que “las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato
que determinan el aspecto del contenido de una página Web. La utilización de
estilos CSS para aplicar formato a una página permite separar el contenido de
la presentación. El contenido de la página (el código HTML) reside en el archivo
HTML, mientras que las reglas CSS que definen la presentación del código
residen en otro archivo (una hoja de estilos externa) o en otra parte del documento
HTML (normalmente, en la sección head). La separación del contenido y la
presentación hace que resulte mucho más fácil mantener el aspecto del sitio
desde una ubicación central, ya que no es necesario actualizar las propiedades
de las distintas páginas cuando se desea realizar algún cambio. La separación
del contenido y la presentación también depura y simplifica el código HTML, lo
que disminuye el tiempo de carga en los navegadores y agiliza la navegación
para personas con problemas de accesibilidad (por ejemplo, para los usuarios
que utilicen lectores de pantalla)” (Ayuda de Adobe Dreamweaver CS4. 2009).
De este modo, con un estilo CSS se puede aplicar, por ejemplo, un formato de
texto determinado a un documento HTML: fuente, tamaño y color, entre otros
atributos. Las reglas CSS que componen dicho estilo pueden localizarse en
alguna de las ubicaciones siguientes:
• Hojas de estilos CSS externas: “Conjuntos de reglas CSS almacenados

en un archivo CSS (.css) independiente externo (no un archivo HTML).
Este archivo se asocia a una o varias páginas de un sitio Web mediante
un vínculo o una regla @import situada en la sección head de un
documento” (Ayuda de Adobe Dreamweaver CS4. 2009).
• Hojas de estilos CSS internas (o incrustadas): “Conjuntos de reglas

CSS incluidos en una etiqueta style de la sección head de un documento
HTML” (Ayuda de Adobe Dreamweaver CS4. 2009).
• Estilos en línea: “Se definen dentro de instancias específicas de etiquetas

en un documento HTML” (Ayuda de Adobe Dreamweaver CS4. 2009).

“Por ejemplo, si queremos que un determinado estilo afecte a un único
elemento y en un caso puntual, podemos crearlo como un estilo en línea.
Esto incrustará el estilo en la propia etiqueta HTML, por lo que si alguna
vez queremos modificarlo, deberemos de ir al elemento. En el Inspector
de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo
en línea>. A continuación, definimos las propiedades del estilo. (…) Esta
opción es la menos flexible y debe empelarse sólo en casos concretos”
(Aulaclic. 2009).
Ahora bien, ¿cómo creamos las reglas CSS? En un documento HTML nuevo,
o sobre el que ya nos encontremos diseñando, nos dirigimos al inspector
de propiedades y seleccionamos la opción “<Nueva regla CSS>” de la lista
desplegable “Regla de destino”, y seguidamente elegimos el botón “Editar
regla”:
En la ventana que se abre debemos consignar el tipo y nombre de selector, y la

definición de la regla, es decir, dónde se aplicará:
En cuanto a “nombre del selector”, nos permite asignarle una denominación,

cualquiera que queramos. Sobre “tipo de selector”, establece los elementos que
serán afectados por el estilo, permite seleccionar entre cuatro tipologías:
1. Clase: “Es el alias que tomará el estilo, y para que afecte a un elemento,
debemos de aplicarle esa clase. El nombre de la clase va precedido por
un punto, y si no lo ponemos lo hará Dreamweaver” (Aulaclic. 2009).

2. ID: “El id es un atributo html, que podemos dar a cualquier elemento,
y que lo identifica de forma única y concreta. Por tanto, el estilo sólo
puede afectar a un elemento en cada página, al que tenga ese ID. En el
selector, se escribe precedido por #” (Aulaclic. 2009).
3. Etiqueta: “El estilo afectará a todas las apariciones de la etiqueta HTML

indicada” (Aulaclic. 2009).
4. Compuesto: “Combina los selectores anteriores. Por ejemplo, p.

resaltado afecta únicamente a los párrafos con la clase resaltado, pero
no a los encabezados con esa clase. También se pueden anidar. Por
ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un
elemento de una lista con el id menú” (Aulaclic. 2009).
Con respecto a “Definición de regla”, nos ofrece la posibilidad de guardar el

estilo en el documento actual (opción “Solo este documento”) o en un nuevo
archivo con formato “.css” (opción “Nueva hoja de estilo”). “Si elegimos (Sólo
este documento) la definición del estilo se guardará en la cabecera de la página,
por lo que sólo estará disponible dentro de ésta. Si elegimos (Nueva hoja de
estilo) se creará un archivo CSS. Podremos emplear estos estilos en cualquier
página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde
guardar el archivo css que contendrá los estilos. Normalmente en la misma
carpeta que las páginas” (Aulaclic. 2009).
Para vincular una hoja de estilos externa a un documento HTML, abrimos el panel
Estilos CSS, y dentro del menú desplegable, ubicado en su esquina superior
derecha, seleccionamos “Adjuntar hoja de estilos…”:
A continuación, en la ventana que se abre fijamos la ubicación de la hoja de estilo

que necesitamos vincular al documento HTML con el que estamos trabajando.
En esta ventana, también podemos elegir “vincular” o “importar” dicho archivo

“.css”:
Unidad 10: Imágenes
Las imágenes, al igual que los textos, son elementos claves en el diseño web.
Inclusive, pueden llegar a cobrar una importancia indiscutida y primordial,
dependiendo del mensaje a comunicar. En esta unidad, nos adentraremos en el
mundo de la inserción y modificación de imágenes en Adobe Dreamweaver CS4.
Para insertar una imagen en un documento necesitamos seleccionar de la barra

de aplicaciones las opciones Insertar>Imagen.

En la ventana que se abre, seleccionamos la ubicación de origen donde se
encuentra la imagen a colocar. Podemos tildar la opción “Vista previa de imagen”,
muy útil para asegurarnos que elegimos la imagen correcta. Dreamweaver
nos brinda el nombre y formato (gif, jpg, jpeg, png, psd, etc.) de cada imagen
que preseleccionamos. Además, posteriormente requerimos consignar la URL
de destino de la imagen, aconsejablemente una carpeta dentro del sitio que
creamos y donde alojamos los documentos HTML que lo conforman. Por otro
lado, en la lista desplegable “Relativa a”:
“es posible especificar si la imagen será relativa al documento

o a la carpeta raíz del sitio. Es preferible que sea relativa
al Documento, ya que si cambiamos la página de carpeta, lo
habitual es cambiar también sus imágenes. Lo mismo ocurre
cuando se selecciona un documento para crear un vínculo. La
ruta en la que se encuentra la imagen aparecerá representada
de una u otra forma en el campo URL de la ventana y en el
campo Origen del inspector de propiedades, dependiendo de
si ha sido insertada como relativa a la carpeta raíz del sitio o
relativa al documento” (Aulaclic. 2009).
Asimismo, también podemos insertar una imagen si la arrastramos desde el

panel Archivos hacia la ventana del documento.

La modificación de las características de la imagen se lleva a cabo mediante el
inspector de propiedades, que nos posibilita mutar sus dimensiones (ancho y
alto) en la unidad de medida que prefijemos, observar su ubicación de origen,
recortarla, retocar su brillo y contraste, perfilarla, convertirla en un vínculo,
aplicarle un estilo CSS creado dentro del campo “Clase” (fraseindex, titulo,
pie, texto, ninguno), asignarle un grosor de borde, elegir la alineación (línea de
base, superior, medio, inferior, texto superior, media absoluta, inferior absoluta,
izquierda, derecha), y determinar la distancia que debe mantener con relación a
los textos (Espacio V y Espacio H).
1 Dimensiones: ancho y alto / 2 Origen del archivo / 3 Edición en photoshop /

4 Editar configuración de imagen / 5 Campo Alt / 6 Actualizar desde original / 7
Clase de estilo CSS / 8 Espacio vertical y horizontal con respecto al texto / 9 Ruta
del vínculo y destino de la ventana / 10 Ancho del borde de imagen en píxeles /
11 Alineación / 12 Perfilar: enfoque y desenfoque / 13 Brillo y contraste / 14 Volver
a muestrear / 15 Recortar.
Además:
“en el campo Alt escribimos el texto que remplazará a la

imagen si ésta no puede mostrarse. Es un atributo muy
importante que deberíamos incluir siempre para hacer páginas
accesibles. Por ejemplo, el texto que se escribe será leído por
los programas lectores para invidentes. Si lo que queremos

es mostrar un ayuda contextual cuando el usuario tenga el
cursor sobre la imagen, debemos de emplear el atributo title.
No podemos insertarlo desde el panel, tenemos que hacerlo
desde el código fuente con el formato title=”Texto a mostrar”.
Internet Explorer muestra Alt como ayuda contextual cuando la
imagen no lleva title, pero el resto de navegadores no lo harán,
respetando el estándar” (Aulaclic. 2009).
Finalmente, cuenta con opciones de edición tales como un botón que permite
cambiar el formato de la imagen y/o generarle transparencias, como asimismo
editarla con un programa externo (Photoshop).
El botón “Editar configuración de imagen” merece un apartado especial. Nos

autoriza a cambiar el formato de la imagen y convertirla en jpeg, gif o png 8,
png 24 y png 32, aumentar o disminuir su calidad en una escala del 1 al 100,
y habilitar/deshabilitar la visualización de navegador progresiva, la eliminación
de los colores no utilizados y el perfilar de los bordes de colores. Además,
nos permite recortar las imágenes, emplear la herramienta zoom, modificar y
restringir las dimensiones, y fijar sus ubicaciones en el plano X e Y.

En otro ámbito, y con respecto al manejo de las imágenes en Dreamweaver,
no podemos dejar de mencionar a las imágenes de sustitución, los mapas de
imagen, y las barras de navegación. Veámoslos.
Imágenes de sustitución
Las imágenes de sustitución, también conocidas como “rollover”, se usan con
frecuencia en los menús de las páginas webs, que contienen botones que guían
la navegación entre las páginas del sitio. Pero, ¿qué entendemos por una imagen
de sustitución? Se trata de:
“una imagen que, al visualizarse en un navegador, cambia

cuando el puntero pasa sobre ella. Debe tener dos imágenes
para crear una imagen de sustitución: la imagen principal (la
que aparece al cargarse inicialmente la página) y la imagen
secundaria (la que aparece al pasar el puntero sobre la imagen
principal). Ambas imágenes deben tener el mismo tamaño. Si
tienen tamaños distintos, Dreamweaver cambia el tamaño de
la segunda imagen para que se ajuste a las propiedades de la
primera. Las imágenes de sustitución están automáticamente
configuradas para que respondan al evento onMouseOver.
Puede definir una imagen para que responda a otro evento
(por ejemplo, un clic del ratón) o cambiar una imagen de
sustitución” (Adobe Systems Incorporated. 2008: 266).
Para agregar un rollover, seleccionamos de la barra de aplicaciones la opción

Insertar>Objetos de imagen>Imagen de sustitución (esto hará que la imagen se
alterne al colocar el mouse encima de la misma).

Seguidamente, en la ventana que se abre consignamos el nombre de la imagen
de sustitución, la ubicación de la imagen original y de la imagen de sustitución,
habilitamos/deshabilitamos la carga previa, y escribimos el texto alternativo y la
ruta del enlace. Es fundamental destacar que:
“es preferible que la opción Carga previa de imagen de

sustitución esté activa. Si se activa, la imagen de sustitución
se carga cuando se carga la página, de este modo se evitan
las demoras debidas a la descarga de la imagen cuando llega
el momento de que aparezca” (Aulaclic. 2009).
Mapas de imagen
Los mapas de imagen son partes de una imagen que han sido seleccionadas para
adjudicarles algún comportamiento determinado. Se crean a través del inspector
de propiedades. Una vez abierta y seleccionada la imagen, el inspector ofrece
cuatro botones que permiten realizar distintos tipos de selecciones: la herramienta
puntero de zona interactiva, y tres botones que habilitan, respectivamente, para
crear los mapas de imagen con forma rectangular, circular o libre:
1 Herramienta Puntero de zona interactiva / 2 Herramienta Zona interactiva

rectangular / 3 Herramienta Zona interactiva circular / 4 Herramienta Zona
interactiva poligonal.
Una vez creado el mapa de imagen, si lo seleccionamos el inspector de

propiedades nos permite asignarle un vínculo y destino. En el ejemplo citado
a continuación, se lo vinculo a la página “novedades.html” y con un destino de
ventana “_blank”:

Barra de navegación
“Una barra de navegación es un conjunto de imágenes que se utilizan como

opciones de menú para navegar dentro de una web. Una página web solo puede
contener una única barra de navegación” (Aulaclic. 2009).
Se inserta seleccionando, dentro de la barra de aplicaciones, la opción

Insertar>Objetos de imagen>Barra de navegación. Seguidamente, se abre una
ventana donde especificamos la cantidad de botones que la constituirán, las
imágenes que los representarán, sus textos alternativos, y sus vínculos:

Los botones “+” y “-” permiten agregar y/o eliminar botones. A su vez, los
mismos pueden ser renombrados en el campo “Nombre de elemento”.
Por otro lado, cada botón puede constar de cuatro estados de imagen: “En Imagen
Arriba indicamos la imagen que quieres mostrar inicialmente (cuando todavía no
se ha hecho clic). En Sobre imagen, pones la imagen que se mostrará cuando
el usuario coloque el cursor sobre el botón y éste estaba mostrando la imagen
asignada en Imagen Arriba. En Imagen abajo, indicamos la imagen a mostrar
después de que el usuario haya hecho clic en la imagen. En Sobre mientras
imagen abajo, indicamos la imagen a mostrar cuando el usuario mueva el
puntero sobre el botón y éste estaba mostrando la imagen asignada en Imagen
Abajo” (Aulaclic. 2009).
Es importante recalcar que, en caso de que ocurra una falla en la carga de

las imágenes, el usuario podrá navegar si se ha completado el campo “Texto
alternativo”. Es útil aclarar que “el Texto alternativo es el texto que aparece al
situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en
el caso de que por algún motivo ésta no pueda ser mostrada en el navegador. (…)
Puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a
través del campo Alt del inspector de propiedades de la imagen seleccionada”
(Aulaclic. 2009).
Unidad 11: Archivos y objetos multimedia
Sonidos, videos y animaciones son los tipos de archivos y objetos multimedia que
podemos colocar en los documentos que diseñamos con Dreamweaver. En esta
unidad, aprenderemos a insertarlos y configurar sus principales propiedades.
Animaciones
Entre las animaciones destacan las películas Flash, con una extensión de
archivo “SWF”, creadas con el programa Adobe Flash (programa que se verá
en el cuatrimestre próximo, pero que en el caso de tener algún SWF previo,
en sus diversas versiones, incluida la CS4. Para poder ser visualizadas en los
navegadores, necesitamos instalar un plug-in de Adobe Flash Player.
¿Cómo se insertar en un documento de Dreamweaver? A través del panel Insertar,

pulsando la opción “SWF” de la categoría Común>Media.

Otra alternativa es eligiendo de la barra de aplicaciones Insertar>Media>SWF.

En ambos casos, se abre una ventana donde debemos particularizar los mismos
datos solicitados para la carga de imágenes: ubicación de origen, nombre y tipo
de archivo, URL y si es relativa al documento o a la raíz del sitio.

Con respecto a las características que se detallan y modifican desde el inspector
de propiedades, además de poder cambiar sus dimensiones (alto y ancho),
observar su ubicación de origen, fijar su alineación con relación a la ventana
del documento, aplicar un estilo CSS, y mutar su color de fondo, también
permite reproducir la animación, establecer la calidad de dicha película (baja,
baja automática, alta y alta automática), consignar su escala (predeterminada
mostrar todo, sin borde, ajuste exacto) y su wmode (modo de ventana), y
habilitar/deshabilitar el bucle (la película vuelve a comenzar cuando termina su
reproducción) y la reproducción automática (inicia la película apenas se carga la
página). También posibilita editar la animación directamente desde Adobe Flash.
1 Bucle / 2 Calidad / 3 Editar en Adobe Flash / 4 Reproducción automática / 5

Escala / 6 Wmode / 7 Reproducir.
Cabe particularizar que el “wmode es el modo de ventana. Si es opaco, otros

elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el
fondo se verá transparente (a no ser que se haya especificado un color de fondo
en el Flash” (Aulaclic. 2009). Además, y por otro lado, que:
“al insertarse animaciones Flash, es frecuente que Dreamweaver

añada algunos archivos que nos permitirán reproducir los
elementos, normalmente creando la carpeta Scripts. Es
importante incluir esta carpeta cuando publiquemos nuestro
sitio, si no los archivos no se verán. De todas formas,
Dreamweaver nos avisará cuando incluya archivos” (Aulaclic.
2009).

Sonidos y videos
Entre los formatos de sonido que se emplean con mayor asiduidad en los sitios
web, podemos nombrar el MP3, WAV y MIDI. Por su parte, los formatos de video
más usados son AVI, MPEG y MOV. Al igual que lo explicado en el apartado
animaciones, su reproducción en los navegadores requiere la instalación del
plug-in pertinente.
Para insertar audio o un video, seleccionamos del menú principal el botón

Insertar>Media>Plug-in. A continuación, se elige el archivo y la opción “Aceptar”.
En cuanto al inspector de propiedades, allí:
“pueden establecerse la altura y la anchura con la que se mostrarán los

controles de audio (video), mediante Al y An. En el caso de no especificar
ningún tamaño, se mostrará el tamaño por defecto de los controles, como
ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche
el sonido en la página, pero que no se muestren los controles de audio
(video), los campos Al y An deben valer cero” (Aulaclic. 2009).

Finalmente:
“los sonidos (videos) se reproducen automáticamente al cargarse la

página, y se reproducen solamente una vez. Estos valores no pueden
definirse como propiedades a través del inspector de propiedades,
pero si los conocemos podemos empelar el botón Parámetros... Por
ejemplo, para que el archivo se reproduzca continuamente se hemos
añadido loop=”true”. Si no queremos que se reproduzca automáticamente,
podemos añadir también autostart=”false”” (Aulaclic. 2009).
Unidad 12: Formularios
Los formularios son recursos por medio de los cuales los usuarios contestan a
preguntas enunciadas desde el sitio web, acercan sus inquietudes, y/o selec-
cionan entre una lista de alternativas, para terminar enviando sus respuestas
gracias a un clic en un botón determinado.
En esta unidad explicaremos cómo crear y validar formularios. Aprenderemos a

insertar campos de texto, menús desplegables, y botones, en orden de diseñar
formularios útiles para recopilar datos de los usuarios de nuestros sitios webs.
Para insertar un formulario, y cada uno de sus componentes, podemos seleccio-

nar de la barra de aplicaciones la opción Insertar>Formulario:

Igualmente, podemos recurrir al panel Insertar, en la categoría “Formularios”,
entre cuyos elementos disponibles para agregar resaltan campo de texto, campo
oculto, área de texto, casilla de verificación, grupo de casillas de verificación,
botón de opción, grupo de botón de opción, lista menú, menú de salto, campo
de imagen, campo de archivo, botón, etiqueta, y juego de campos.

Algunos de los elementos principales de la categoría formularios son los siguien-
tes:
Campo de texto y Área de texto: “el Campo de texto solo permite al usuario
escribir una línea, mientras que el Área de texto permite escribir varias” (Aulaclic.
2009). El inspector de propiedades nos permite seleccionar una u otra opción
marcando la opción “Una línea” o “Multi línea”. Ambas alternativas pueden
establecerse como contraseñas, donde las letras se sustituyen por un carácter
que las oculta. El inspector de propiedades también nos posibilita cambiar el
ancho del cuadro de texto, la cantidad máxima de líneas o caracteres y el valor
inicial del cuadro:

En la ventana que se abre para insertar campo o área de texto, fijamos ID,
nombre, estilo y posición:
Botón: “puede tener asignadas tres opciones: Enviar formulario, Restablecer

formulario (borrar todos los campos del formulario), o Ninguna (para poder
asignarle un comportamiento diferente de los dos anteriores). También es
posible cambiar el texto del botón, a través de la propiedad Valor del inspector
de propiedades” (Aulaclic. 2009).

Casilla de verificación: “es un cuadrito que se puede activar o desactivar, para
indicar si el usuario ha elegido una opción o no. (…) Puede asignársele el Estado
inicial como Activado o como Desactivado” (Aulaclic. 2009).
Botón de opción: “es un pequeño botón redondo que puede activarse o

desactivarse. Si hay varios del mismo formulario con el mismo nombre, sólo
puede haber uno activado. Cuando se activa uno, automáticamente se desactivan
los demás. Esto obliga al usuario a sólo poder elegir una opción” (Aulaclic.
2009). Al igual que la casilla de verificación, permite asignar estado Activado o
Desactivado.
Es importante explicar que “antes de insertar los elementos o controles del

formulario, hemos de crear un formulario. Los elementos los introduciremos
dentro de él, ya que cuando lo demos a enviar, sólo se enviarán los datos de
los elementos de dentro del formulario. (…) Una vez creado un formulario,
este aparecerá en la ventana de Dreamweaver como un recuadro formado por
líneas naranjas discontinuas. (…) Estas líneas son ayudas visuales al trabajar
en diseño, pero no se verán en el formulario final. Entre las propiedades del
formulario, encontramos el campo Acción. En el indicamos a dónde se envían
los datos. Normalmente, una página PHP que se encara de tratarlos. Dentro de
dicho formulario se podrán insertar los elementos de formulario” (Aulaclic. 2009).
Unidad 13: Otros elementos y comportamientos
Los sitios webs pueden componerse de otros elementos y comportamientos,

diferentes a los explicados en las unidades previas. Entre los elementos destacan
las marquesinas y la fecha.

Marquesinas: son textos o imágenes que se desplazan linealmente de un lado
al otro de la ventana. Sólo pueden insertarse desde la vista código, mediante el
uso de las etiquetas <marquee> y </marquee>.
Fecha: se refiere a la fecha de la última modificación de las páginas. Se agregar

desde el botón Insertar>Fecha del menú principal.
Con respecto a los comportamientos, “son acciones que suceden cuando

los usuarios realizan algún evento sobre un objeto, como puede ser mover
el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un
mapa de imagen, etc. Los comportamientos no existen como código HTML,
se programan en JavaScript. Dreamweaver permite insertarlos a través del
panel Comportamientos, por lo que no es necesario escribir ninguna línea de
código JavaScript para programarlos” (Aulaclic. 2009).
Para insertar un comportamiento, abrimos el panel Comportamientos. “En

este panel hay que desplegar el botón “+” pulsando sobre él, y en Mostrar
eventos elegir HTML 4.1. Es la opción por defecto. Esta opción se debe a
que en el pasado, los comportamientos solían ser diferentes dependiendo del
navegador. En la actualidad, los navegadores tienden a seguir el estándar, lo
que hace que ya no tengamos problemas de compatibilidad. Sólo habremos de
cambiarlo si hacemos páginas específicas para navegadores más viejos, ya en
desuso” (Aulaclic. 2009).

Como ejemplo conocido de comportamiento, podemos citar a los mensajes
emergentes. Una vez seleccionados en el panel comportamientos, se abre una
ventana donde debemos escribir el mensaje en cuestión.
Lo que hay que tener en cuenta al momento de decidir el uso de esta acción
es que conviene asociarla al evento onClick (“cuando el usuario hace clic”).
Además, que “mientras se muestre el mensaje, la ventana del navegador quedará
bloqueada” (Aulaclic. 2009).
Bien, hemos llegado al final del recorrido del módulo 4. Si bien estamos termi-
nando la cursada de Diseño Multimedia I, esto no significa que estemos cerre-
mos aquí el tema del desarrollo y diseño web. Tendremos que seguir sumando
nuevos conocimientos, estar atentos a los cambios que los mismos avances tec-
nológicos nos exigen día a día. Recuerden: aquí se abre un nuevo desafío para
seguir conociendo acerca de cómo trabajar un sitio web en lenguaje HTML. La
base está dada por Diseño Multimedia I, pero quienes quieran desarrollos más
complejos, deberán seguir experimentando y actualizándose. ¡Es un mundo
muy interesante por explorar! ¡Suerte!
Referencias
1. Adobe Systems Incorporated: Uso de Adobe Dreamweaver. California, USA.

2008. Disponible en: http://www.manualespdf.es/manual-adobe-dreamweaver-
cs4/ (Consulta realizada en Junio de 2012).
2. Aulaclic: Curso de Dreamweaver CS4. Valencia, España. 2009. Disponible en:

http://www.aulaclic.es/dreamweaver-cs4/index.htm (Consulta realizada en Junio
de 2012).
m4 material

m4 actividades
m4 | actividad 1
Armado en Dreamweaver
Insertando elementos
Consigna
a) Vamos a ir colocando en cada celda, la imagen correspondiente, o bien

el texto, o frase, etc. Los textos se trabajan desde un archivos.txt.
b) No olvide crear una hoja de estilo (archivo>nuevo>hoja de estilo css

( A 1) para luego trabajar los cuerpos, colores, familias, etc. de cada
texto en todas las páginas del sitio.
c) Si la página de inicio o index tendrá una Imagen de sustitución, es

momento de crearla en la celda corresondiente. Al momento de trabajar
la imagen de sustitución, definiremos si la misma conecta con una URL
por ejemplo ( A 2).
d) No olvidar desarrollar la Barra de navegación (el menú con cambio de

estados en los botones).
e) Continuar con el resto del sitio, desde la index.html.
Algunas pautas
1. Retomar la actividad 2 del módulo 3 (abrir el index.html en Dreamweaver).

2. Abrir la carpeta imágenes desde dentro del programa, en el panel Archi-
vos locales .
3. Comenzar a sustituir los espacios o marcadores por las imágenes corres-
pondientes.
4. Trabajar la Barra de navegación.
5. Guardar el documento como index.html (minúscula). Todo, siempre,
organizando la carpeta raíz ya pre configurada.
6. Guardar nuevamente este documento CON OTRO NOMBRE, es decir,
con el de una segunda página, por ejemplo en mi caso, Novedades
(minúscula, sin acentos, dentro de la carpeta páginas).
7. Continuar configurando cada página interna, en base a las maquetas,
uniendo y dividiendo celdas, borrando e insertando nuevas tablas, etc.
8. En una página Contacto, deberán incluir un formulario (en esta instancia,
considere todas las opciones aprendidas, para ver cómo las trabaja).
9. En una página como Novedades, insertar un video (SWF, FLV y un video
de Youtube embebido, cualquier cosa, consulte al tutor).

textos dados.

La actividad puede realizarse individualmente o bien en grupos de a dos per-

sonas; en este último caso, les solicitamos lo aclaren por mensajería a su tutor/
tutora.
Además, se publicará un Foro (dentro del Módulo4) para que quienes quieran,
publiquen allí esta actividad, y así, socializar la información con el resto de los
El Foro es un espacio de trabajo colaborativo (OPCIONAL en la cursada) que

permite que trabajemos asincrónicamente, conociendo los trabajos del resto de
los compañeros del curso (sin estar aislados, creando opiniones, “escuchando”
al otro desde la palabra escrita, sintiéndonos parte de un grupo). En el caso de
plataforma de mi.ubp, lea atentamente el documento Instructivo-FORO IC 1 que
se encuentra en la carpeta material del módulo.
Opción 1: El archivo index.html, y páginas restantes, dentro de la carpeta raíz,

con las otras carpetas.
C 1
La creación de hojas de estilo en cascada se planteó en el módulo 3 y en el

presente módulo. Por favor, revisar y crear los estilos necesarios para el buen
manejo de la lectura, recorridos, llamadores o acentos, etc. Recordar que se
debe empezar creando archivo nuevo>css.
Cuando vamos a vincular una imagen, sea de sustitución o no, simplemente

desde un mapa de imágenes, el ruteo será: http://www.google.com (el sitio al
que queremos apelar, siempre con http://www. … Esto se colocará en el Panel
Propiedades, en el espacio para completar Vínculo. En Destino se elige _blank
cuando se desvía al usuario a una página que complementa la nuestra (pero se
lo obliga a quedar con nuestro sitio abierto al abrir una nueva ventana para el
sitio restante.

m4 |actividad 1 | IC
• El grado de manejo del programa.
• El manejo de las tablas y celdas, panel Propiedades, dimensiones,

preparación de imágenes.
• Manejo de las páginas restantes con criterio, es decir, que se lea como
sistema visual/ gráfico.
• La destreza con el software específico.
• La participación en el foro acerca de las propuestas restantes (desde

el punto de vista de crítica sobre las páginas propuestas por los otros
participantes).
• La participación de los integrantes en la toma de decisiones, manejo

del programa, acompañamiento, colaboración, y coparticipación en la
propuesta.
• El cumplimiento con los puntos planteados para cada página como así
también con el cronograma y pautas de la propuesta.
• La participación de los integrantes en el Foro, respeto por la palabra del

otro, compromiso y responsabilidad en el desarrollo de la actividad.
• El cumplimiento de los puntos planteados como pautas y consignas.

e v a l u ación
La versión impresa no incluye las actividades obligatorias. Las mismas se

encuentran disponibles directamente en plataforma.

Mult 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Mult 1

Transféré par

Droits d'auteur :

Formats disponibles

MULT - I - diseño multimedia I

EDUBP | PER | tercer cuatrimestre

EDUBP | PERIODISMO Y NUEVOS MEDIOS| diseño multimedia I - pag. 1

impresión total del documento 127 páginas !

EDUBP | PERIODISMO Y NUEVOS MEDIOS | diseño multimedia I - pag.2

¡Bienvenidos a Diseño Multimedia I! En esta asignatura, nos adentraremos en el

El concepto de Hipertexto es uno de los que darán lugar a la interacción. En el

Pues, la participación como usuarios, la decisión de cada uno de nosotros,

En la captura de pantalla de la versión online del periódico cordobés La Voz del

La información se nos presenta de un modo no lineal, multilineal o multisecuen-

En la página de McDonald’s, como otro ejemplo, si observa sobre el costado

EDUBP | PERIODISMO Y NUEVOS MEDIOS| diseño multimedia I - pag. 3

Volviendo al Multimedia, éstos se conforman de texto, imagen, sonido, entre

Se desdibuja entonces nuevamente la autoría centralizada, como ya hemos

La interacción con el usuario es la que va a definir el modo de navegación del

Aparece otro concepto, la Interfaz, representación virtual en pantalla, “la cara

Estos sitios o páginas podrán ser persuasivas, informativas, etc., lo importante al

La información complementaria 1 usted la encontrará disponible en Plataforma.

EDUBP | PERIODISMO Y NUEVOS MEDIOS | diseño multimedia I - pag.4

Módulo 2: Planificación del sitio

Unidad 3: Primeras líneas: comenzando a bosquejar el sitio

Unidad 4: Reconociendo el software Adobe Dreamweaver CS4

Módulo 3: Dreamweaver CS4. Conceptos básicos.

Unidad 6: Configuración y gestión de sitios web

Unidad 8: Maquetación de páginas web en Dreamweaver.

EDUBP | PERIODISMO Y NUEVOS MEDIOS| diseño multimedia I - pag. 5

Módulo 4: Adición y edición de contenidos en Dreamweaver CS4

Unidad 10: Imágenes

Unidad 11: Archivos y objetos multimedia

Unidad 12: Formularios

Unidad 13: Otros elementos y comportamientos

EDUBP | PERIODISMO Y NUEVOS MEDIOS | diseño multimedia I - pag.6

EDUBP | PERIODISMO Y NUEVOS MEDIOS| diseño multimedia I - pag. 7

• Comprender los conceptos de navegación, interactividad, usabilidad y

• Caracterizar y poder comprender el comportamiento de los usuarios en la

• Desarrollar la capacidad creativa y agudizar el intelecto en relación al diseño

Porcentaje estimativo por módulo según la cantidad y complejidad de conteni-

MÓDULOS PORCENTAJES ESTIMADOS

Representación de porcentajes en semanas:

EDUBP | PERIODISMO Y NUEVOS MEDIOS | diseño multimedia I - pag.8

Hipertexto/ Hipermedia/ Multimedia IC 1, Diseño visual de materiales digitales

http://www.w3.org/standards/webdesign/htmlcss . HTML & CSS (según la W3C)

http://www.w3c.es/Divulgacion/GuiasBreves/Accesibilidad. Accesibilidad. (Con-

Excelente trabajo acerca de la Accesibilidad y Usabilidad IC 2 del sitio del Ayun-

http://www.w3c.es/Traducciones/es/WAI/intro/accessibility. Para ampliar el tema

SALINAS IBAÑEZ, Jesús: Hipertexto e hipermedia en la enseñanza universitaria

SALINAS, Jesús: Multimedia en los procesos de enseñanza - aprendizaje: Ele-

index.psd IC 4 – Archivo de referencia, a modo de ejemplo, acerca de cómo

pagina02.psd IC 5 – Archivo de referencia, a modo de ejemplo, acerca de cómo

pagina03.psd IC 6– Archivo de referencia, a modo de ejemplo, acerca de cómo

Prueba con servidores Web y Ftp en Clientes IC 7– Video tutorial acerca de

Understanding_Web_Extensions.html IC 8– Página web que contiene infor-

EDUBP | PERIODISMO Y NUEVOS MEDIOS| diseño multimedia I - pag. 9

index.html: le permitirá ver bien los tamaños de celdas en el panel

cuentos.html: puede ver cómo está realizado el cambio de imagen

novedades.html: se puede ver la incorporación de un texto, donde

Ahora, preste atención a la incorporación de imágenes, archivos multi-

hoja de estilo la mágica.css: es la hoja de estilos que, si se abre en

novedades2.html: abriendo esta segunda versión de la página nove-

EDUBP | PERIODISMO Y NUEVOS MEDIOS | diseño multimedia I - pag.10

http://www.scopesys.com/ Scope Systems (un “buen ejemplo” de un “mal sitio”)

http://cyberschoolbus.un.org/peaceday/2004/index.asp Cyberschools (bastante

http://lajuventudopina.org/ La juventud opina (códigos: íconos, color, jerarquía