Fundamentacin.

En nuestro entorno est demostrado que estamos involucrados en el

ciberespacio, somos parte de l de diferentes maneras, por ejemplo cuando
estamos visitando una galera de productos, basada en imgenes o en
simulacin (realidad virtual), cuando tenemos una reunin de estudio o
trabajo con nuestros compaeros, donde cada uno est ubicado en diferentes
lugares fsicos, etc.
Los ejemplos descritos anteriormente y otros ms se estn
presentando por la existencia de servicios en internet, que en muchas
ocasiones son de uso gratuito, a los cuales podemos acceder y utilizar con
facilidad, sin tener la necesidad de crear desde lo ms bsico el servicio,
podemos reutilizar el cdigo de ciertas aplicaciones y adaptarlo a nuestro
trabajo, inicindose as lo que se conoce comnmente como La Web
Colaborativa y que posteriormente nos orientar hacia una web Inmersiva.
En esta oportunidad estudiaremos los fundamentos necesarios para
poder estructurar de una manera coherente los contenidos de sus pginas
web y a la vez reutilizar los servicios de otros servidores, con la finalidad de
optimizar el funcionamiento de nuestro sitio web, as mismo culminaremos
explicando como adjuntar sus archivos a un servidor remoto real.
Capacidad.
Implementa y administra un sitio web de forma remota, insertando los
diferentes componentes internos y externos.

Contenidos.
UNIDAD
11

P g i n a | 2

1. Conjunto de Marcos.
2. Vnculos y destinos.
3. Contadores de Pginas.
4. Fondos Animados.
5. Ventanas emergentes.
6. Publicacin y administracin del sitio web.

Actividades.
La actividad a desarrollar en la presenta Unidad es:
Actividad 01: Crea un sitio web para una empresa de asesora y
consultora el cual estar constituido como mnimo por 5 pginas
(archivos) los que contendrn informacin preseleccionada, se debe
incluir el uso de servicios externos, ventanas emergentes, etc. con la
finalidad de mejorar el servicio al usuario final. Posteriormente se crea
una cuenta en un servidor de alojamiento gratuito para administrar su
sitio remoto.

Estrategias Metodolgicas.
Para desarrollar la presente unidad llevaremos a cabo dos tipos de
actividades:
1. Lectura inicial de contenidos, la realizaremos de manera ordenada,
presentando los aspectos tericos. Ante la presencia de alguna duda se
puede realizar lecturas sobre puntos especficos en la seccin de Material
Complementario o en las direcciones electrnicas de sus slabos para la
unidad 11.
2. Actividades a desarrollar en la unidad, se encuentran en el apartado
de Actividades, donde constan: las consignas o indicaciones de cada
actividad propuesta.
Recuerde que el Aula Virtual de la UCV, se emplear como medio de
comunicacin entre el docente y los estudiantes, para efectos de mensajera

P g i n a | 3

interna, foros, evaluaciones virtuales, acciones de tutora acadmica y
comunicacin de resultados de evaluacin de los aprendizajes.

Evaluacin.
En esta Unidad Ud., ser evaluado en:
1. La utilizacin adecuada de marcos.
2. El uso de Servicios externos.
3. El uso de ventanas emergentes.
4. La publicacin y administracin de sitios web remotos.
Es importante que Ud., este en constante comunicacin con su docente
Tutor, ya sea para informar de dificultades, avances de las tareas, etc.
Recuerde que ser calificado de acuerdo a las rbricas de evaluacin de cada
actividad; por ejemplo: se le evaluar por la entrega oportuna de sus
actividades.

Material Complementario.
A continuacin se te presentan algunos enlaces donde encontrars
informacin complementaria para ampliar y profundizar tus conocimientos.
Manual de Dreamweaver CS5
Videos:
Marcos 1
Marcos 2
Marcos 3




http://www.ucv.edu.pe/cis/
cis@ucv.edu.pe







Estructura de Contenidos:
1. Conjunto de Marcos.
2. Vnculos y destinos.
3. Contadores de Pginas.
4. Fondos Animados.
5. Ventanas emergentes.
6. Publicacin y administracin del sitio web.





http://www.ucv.edu.pe/cis/
cis@ucv.edu.pe




UNIDAD
11


Introduccin


Estimado participante:
En nuestro entorno est demostrado que estamos involucrados en el
ciberespacio, somos parte de l de diferentes maneras, por ejemplo cuando
estamos visitando una galera de productos, basado en imgenes o en
simulacin (realidad virtual), cuando tenemos una reunin de estudio o
trabajo con nuestros compaeros, donde cada uno est ubicado en diferentes
lugares fsicos, cuando hacemos un negocio o tenemos un contacto laboral
con representantes de empresas a quienes no conocemos pero sabemos que
existen, etc.
Todos los ejemplos descritos anteriormente y otros que ustedes
puedan identificar se estn presentando gracias a la existencia de los
servicios a los cuales podemos acceder, en muchas ocasiones son de uso
gratuito, con gran facilidad para acceder y ser utilizados, sin tener la
necesidad de crear desde lo ms bsico el servicio, podemos reutilizar el
cdigo de ciertas aplicaciones y adaptarlo a nuestro trabajo, inicindose as lo
que se conoce comnmente como La Web Colaborativa y que posteriormente
nos encontraremos en una web Inmersiva.
En esta oportunidad le damos la bienvenida e invitamos a aprender los
fundamentos necesarios para poder estructurar de una mejor manera los
contenidos de sus pginas web y a la vez reutilizar los servicios de otros
servidores, con la finalidad de optimizar el funcionamiento de nuestro sitio
web, as mismo culminaremos explicando como adjuntar sus archivos a un
servidor remoto real.
Le deseamos xitos en el desarrollo de esta Unidad.
Consulta el siguiente material para incrementar tus conocimientos:
Manual de Dreamweaver CS5

!

P g i n a | 6

ADOBE DREAMWEAVER.

1. Conjunto de Marcos.
Los Marcos son utilizados como una tcnica en Adobe
Dreamweaver que consiste en controlar desde una pgina (de marco) a
otras pginas, con la finalidad de reutilizar componentes y hacer ms
sencillo el mantenimiento del sitio web.
Ejemplo:
Crear pginas personalizadas sobre un perfil personal, perfil
profesional, perfil acadmico y perfil laboral de una persona usando
formatos de vietas y reglas horizontales. Luego integrarlas en un solo
portal.
1) Iniciar Adobe Dreamweaver.
2) Crear las siguientes pginas simples en una carpeta denominada
Aplicacin (puede personalizarlas segn como desee).

1

P g i n a | 7





P g i n a | 8



3) Crear una nueva pgina usando el estilo marcos.


4) Disear las pginas de men (lateral izquierda) e inicio directamente
en los marcos mostrados (En las Propiedades de la Pgina aplicar color
de fondo para su fcil ubicacin).
Puede aadirle cualquier componente (jpg, gif, swf, etc.) para
mejorar su presentacin.


P g i n a | 9




5) Hacemos clic en cada zona y seleccionamos la opcin Guardar marco,
como se indica:

P g i n a | 10


6) Luego, guardar todo lo que falte (marcos segn el estilo).

2. Vnculos y Destinos.
Los vnculos son un recurso de las pginas web que facilitan el
acceso desde una pgina web a otra. Pueden ser internos o externos.
Ejemplo:
1) Vincular las opciones del men hacia las pginas creadas.
Seleccionar el texto, ubicar el archivo desde la propiedad Vnculo y
defina el marco donde se ver (ejemplo: Mainframe)

2

P g i n a | 11




Repetir para el resto de opciones.



P g i n a | 12

Ejemplo:
1) Abrir la pgina de Perfil Laboral (Pag3.html) y enlazar el texto
Empresa Barrick a su portal web :
http://www.barricksudamerica.com


Nota: El destino _blank permite cargar la pgina web en un nueva
ventana.

2) Guardar los cambios y cerrar.
3) Verificar presionando la tecla F12.

3. Contadores de Pginas.
Las pginas web son publicadas en la red de redes con la finalidad
de ser visitadas por los cibernautas de todo el mundo.
Cmo se puede saber si estn visitando mi pgina?
La respuesta es agregar un contador de pginas a tu pgina
principal (ndex).
Ejemplo:
Agregar un contador de pginas que se muestre debajo de las opciones
del men.
1) Localizar en internet algn portal de Contadores de Pginas web
gratuitas y registrarse.
3

P g i n a | 13

http://www.contadorgratis.com/


2) Elegir el estilo deseado, aceptar y continuar con el registro.


3) Seleccionar el cdigo HTML y copiar (Ctrl + C) para ser insertada
(pegado) en la pgina web deseada.

P g i n a | 14


4) Abrir la pgina elegida, ubicar el cursor donde se desea insertar el
contador, mostrar su vista de cdigo y pegar el cdigo generado
copiado anteriormente.


P g i n a | 15


Anexo:
<!-- Cdigo contadorgratis.com ver. 4.3 -->
<script language="javascript"
src="http://www.contadorgratis.com/hitv3.php?digit=a&page
=11dfd1ebac17586f601d1910492fa6da"></script>
<br><font size=1><a href="http://www.contadorgratis.com"
target="_blank">Contador gratis</a></font>
<!-- FIN Codigo contadorgratis.com -->
5) Guardar los cambios y verificar


P g i n a | 16

4. Fondos Animados.
Las pginas pueden ser coloridas o adornadas por imgenes de
fondo sin problema alguno desde el editor de Adobe Dreamweaver. Sin
embargo en la web existen infinidades de fondo animados en forma de
imgenes GIF o realizados en un lenguaje javascript.
Ejemplo:
Ubicar un GIF animado y utilizarlo como fondo de la pgina de
bienvenida:
1) Ubicar una pgina apropiada con imgenes de fondo.
Ejemplo: http://www.gifss.com/agua/burbujas/
2) Ubicar la imagen animada y guardarla en su carpeta de trabajo.


4

P g i n a | 17

3) Editar la pgina deseada y asignarla como imagen de fondo.


4) Guardar los cambios y verificar.


5. Ventanas emergentes.
Una ventana emergente es un recurso web que permite cargar una
ventana adicional mientras carga el portal principal. Se utiliza para
mostrar anuncios temporales.
5

P g i n a | 18

Ejemplo:
1) Mostrar en una ventana emergente una imagen publicitaria deseada.
2) Crear una pgina web llamada emergente que contenga la imagen
deseada para mostrar en una ventana emergente.

3) Editar la pgina principal ndex (o men) en su cdigo antes del
cuerpo (<body>)

4) Agregar la lgica de la funcin que controla la ventana emergente.
<script language="JavaScript" type="text/JavaScript">
<!--
functionpopUp(URL)
{
day = new Date();
id = day.getTime();

P g i n a | 19

eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar
=0,resizable=0,width=480,height=300,left = 500,top =
100');");
}
//-->
</script>

5) Agregar la llamada de la funcin en el evento de carga de la pgina.
<body onLoad="javascript:popUp('emergente.html')">

6) Guardar los cambios y verificar.


6. Publicacin y administracin del sitio web.
La administracin de un sitio web responde a una rutina:
Alojamiento Mantenimiento de archivos web. Existen servidores
gratuitos y soporta distintos tipos de formatos de archivo.
A. Sitios web y URL.
Toda informacin que se expone en internet, tiene dos
caractersticas simples:
1) Estn alojadas en el disco de una computadora potente llamada
Servidor. Si contiene archivos con formato web se les llama
6

P g i n a | 20

Servidor Web. A la carpeta donde se alojan los archivos web se le
llama Sitio Web.
2) Se ubican en la red mediante una expresin de cadena llamada
DIRECCION URL la misma que tiene una sintaxis tal como:
http://www.servidor.giro.pais/ruta
B. Servidores gratuitos.
Existen diversas empresas que brindan el servicio de
alojamiento de archivos web (Hosting), algunas de ellas permiten el
alojamiento sin costo alguno. Este servicio en internet est limitado en
sus recursos y capacidad de almacenamiento.
En esta oportunidad desarrollaremos nuestras prcticas en el
servidor web de Galen.
Ejemplo: Crear un espacio para alojar nuestro sitio web.
1) Registrarse gratis en la pagina recomendada:



P g i n a | 21

2) Elegir un nombre de Usuario para poder acceder a una cuenta con
la que podrs administrar tus archivos, editar tu pgina Web, etc.


3) Seleccionar el tipo de asistente que le guiar en los pasos
siguientes (asistente Galen).



P g i n a | 22

4) Luego escriba el nombre de nuestro dominio, es el nombre con el
que ingresar a nuestra pgina Web: http://alumnoucv.galeon.com


5) Al terminar de registrarnos, podemos acceder a nuestra cuenta en
galen para poder administrarla y subir nuestros archivos.html


Para poder publicar nuestros archivos existen dos maneras:
1) Al ingresar en nuestra cuenta podemos editar las pginas de
nuestro sitio en la opcin Editor de pgina Web colocando el
cdigo que generar nuestra pgina.

P g i n a | 23



2) Si tenemos listos nuestros archivos web podemos adjuntarlos
(subirlo) directamente mediante el Administrador de ficheros con
extensin .html



3) Podemos subir imgenes o archivos que podamos utilizar en
nuestras pginas Web.

P g i n a | 24


Tengamos en cuenta que si nuestro sitio local est organizando
a nuestros archivos en carpetas (directorios) debemos respetar esta
estructura y replicarla en el servidor.
Para crear carpetas, debemos hacer clic en la opcin CREAR
CARPETAS. Las carpetas deben tener de 3 a 20 caracteres, respetando
las maysculas y/o minsculas.




P g i n a | 25

Finalmente cuando hemos terminado de subir nuestros archivos
que dan lugar a nuestro Sitio Web, podemos ingresar a travs de
nuestro dominio, para el ejemplo ser:
http://alumnoucv.galeon.com


Afianza tus conocimientos con el siguiente Video:
Marcos 1
Marcos 2
Marcos 3


Glosario de Trminos
Conjunto de Marcos: Sirven para distribuir mejor los datos dentro de
las pginas web, permiten mantener fijas algunas partes que
queramos, mientras que otras puedan ser modificadas, podemos decir
que son pginas web dentro de otra pgina que las organiza de una
manera determinada.
Vnculos: Nos facilitan el acceso desde una pgina web a otro recurso
web (otra pgina web, video, imagen, etc.); pueden ser internos o
externos.
Ventanas Emergentes: Es un recurso web que permite cargar una
ventana adicional mientras carga la pgina principal. Se utiliza para
mostrar anuncios temporales.
Referencias:
SAWYER MCFARLAND D., Dreamweaver Cs5. Espaa, Edicin 2009.

LUNA V. R., Diseo de Pginas Web Fcil. Per. Edicin 2004-2006.

Charlie, D.J. Videos Tutoriales libres: Adobe fireworks, flash,
dreamweaver cs3.
Disponible en: http://www.savevid.com/tag/www.djcharlie.tk
Theodor , R., & Charles, T. (2012). Camtasia Studio 7.1 and Beyond:
The Complete Guide. Gift-wrap.

P g i n a | 26

AUTOEVALUACIN
I) Marque la alternativa correcta:
1) Se puede afirmar que los marcos:
a. Facilitan la administracin de los contenidos de nuestros
archivos web.
b. Complican la manipulacin de nuestros archivos web.
c. Generan desorden en nuestros archivos web.
d. Ninguna de las Anteriores.
2) Se puede afirmar que los vnculos al usar marcos:
a. Presentan el mismo comportamiento que lo vnculos sin usar
marcos.
b. Son ms rpidos que los enlaces normales sin marcos.
c. Se dan solamente al utilizar marcos.
d. N.A.
3) Un servicio externo como un contador, imgenes, etc. son:
a. Funcionalidades que ofrece otro servidor diferente al nuestro
que nos permite utilizarlo mediante una porcin de cdigo
suministrado.
b. Lo mismo que un servidor externo.
c. Una funcionalidad de alojamiento que se ofrece previo pago.
d. N.A.
4) Se puede afirmar con respecto a una ventana emergente:
a. Posee la misma utilidad que un archivo web.
b. Se usa generalmente para mostrar elementos que llamen la
atencin del usuario.
c. Son elementos ofrecidos como servicio externo.
d. N.A.

5) El Servicio de Alojamiento de un sitio web consiste en:
a. Asignar un nombre para que los archivos de mi sitio puedan
ser accedidos en la web.
b. Guardar los archivos de mi sitio local en un servidor remoto
de accedo pblico.
c. Pagar para que una persona guarde mis archivos en su Pc.
d. N.A.










Actividad de Aprendizaje
Con la presente actividad, el alumno podr reforzar sus conocimientos en
la organizacin de los archivos de su sitio web, as como la optimizacin de la
apariencia de sus pginas y su respectiva publicacin en un servidor de
alojamiento gratuito.

CASO 01:
Se desea desarrollar un sitio web que permita difundir los servicios de
asesora y consultora de un equipo de profesionales, dicho sitio debe
contener al menos 5 pginas (archivos) los cuales contendrn la informacin
a publicar, la informacin estar estructurada mediante marcos con tablas y/o
capas. Incluir una ventana emergente con publicidad. Los servicios externos a
utilizar pueden ser chat, google maps, contadores, etc. pudiendo considerar
componentes externos como archivos de audio, videos, pelculas flash, etc.
Una vez terminada la actividad deber crearse una cuenta en un servidor
gratuito y alojar su sitio web para poder visualizarlo desde el internet.


UNIDAD
11

P g i n a | 28

CONSIGNA:
Caso 01:
1) Seleccionar el mbito de la asesora y consultora a brindar.
2) Preparar el contenido que ser publicado.
3) Disear la estructura en la cual se distribuir el contenido de los
archivos (maquetacin conteniendo marcos con tablas y/o capas).
4) Crear un sitio web en Adobe Dreamweaver.
5) Crear el primer archivo con una bienvenida introductoria al sitio
web, siguiendo la estructura definida en el tem (3), el cual deber
contener como nombre index.html.
6) Crear una ventana emergente con una publicidad alusiva a los
servicios brindados.
7) Crear las siguientes pginas (archivos) manteniendo el diseo del
tem (3) pero con los contenidos seleccionados en el tem (2).
8) Agregar servicios externos que crea convenientes (chat, google
maps, contadores, etc.) para mejorar la interaccin con el usuario
final.
9) Enlazar los archivos creados.
10) Crearse una cuenta en un servidor de alojamiento gratuito.
11) Alojar su sitio local en el servidor remoto.

RBRICA DE EVALUACIN
CRITERIOS
Deficiente
(1)
Regular
(2)
Bueno
(4)
Excelente
(5)
Utilizacin
adecuada de
marcos.
No hace uso
de marcos en
la creacin de
sus archivos.
Usa de
manera
deficiente los
macos en sus
trabajos.
Utiliza
correctamente
los marcos en
su trabajo.
Investiga
nuevas formar
de aplicarlos
marcos en su
trabajo.
Uso de
Servicios
externos.
No hace uso
de servicios
externos.
Hace uso de
servicios
externos en
sus archivos
web con
dificultad y de
manera
bsica.
Hace uso
correcto de los
servicios
externos
estudiados en
sus archivos
web.
Investiga
nuevos
servicios
externos y hace
uso junto con
los estudiados
en clases de
manera
coherente en
sus archivos
web.

P g i n a | 29

Uso de
ventana
emergente.
No hace uso
de ventana
emergente.
Hace uso de
manera
deficiente de
ventana
emergente.
Hace uso
correcto de la
ventana
emergente en
su aplicacin
web.
Hacen uso
diversas
ventanas
emergentes en
su sitio web
manteniendo
una coherencia
lgica.
Publicacin y
administracin
de sitios web.
No logra
publicar su
aplicacin
web.
Logra publicar
y administrar
su sitio web
con
deficiencias.
Publica y
administra
correctamente
su sitio web.
Investiga
nuevos
servidores de
alojamiento y/o
nuevas
funcionalidades
para la
publicacin y
administracin
de su sitio web.





http://www.ucv.edu.pe/cis/
cis@ucv.edu.pe