guia nvu web ucv uead 2009 omiratia1
DESCRIPTION
apuntes de nvuTRANSCRIPT
-
Prctica de NVU
FACILITADOR:
DR. OMAR JOS MIRATA MONCADA (ITDE) Moodle Course Creator Cetification (MCCC)
Caracas, Octubre de 2009
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
2
PRESENTACIN
Las tecnologas de la informacin y la comunicacin permiten una mayor integracin e
interaccin del estudiante que aprende en forma presencial o a distancia con el proceso mismo
y con sus similares. Integrando texto, imagen, sonido y movimiento en la Web, se crea un
ambiente que facilita al estudiante el proceso de enseanza-aprendizaje.
Para De Benito (2000), en el mbito universitario, el potencial de la Web rompe con el
concepto tradicional de enseanza universitaria centrada en el profesor, para pasar a un enfoque
en el que el alumno y la interaccin adquieren mayor protagonismo. Por otra parte, el inters
suscitado por la Web en los profesores y estudiantes en el mbito universitario tanto en
enseanza presencial como a distancia, ha propiciado la proliferacin de herramientas que
facilitan la creacin y distribucin de materiales y proporcionan utilidades para la gestin de los
alumnos. Mediante la Web se crean vnculos para acceder a la informacin de cualquier parte
del mundo y ponerla al alcance los estudiantes.
Las posibilidades que ofrece la Web en el mbito educativo son muchas. Actualmente una
gran cantidad de universidades e instituciones de educacin superior crean sus pginas Web
para suministrar a los estudiantes informacin referente a los cursos y proyectos semestrales de
clase. Para el autor, el uso de la Web, facilitar mucho ms a los usuarios crear y comunicar sus
propios materiales.
El presente Curso-Taller, pretende servir de gua al docente para el diseo, creacin y
publicacin de pginas Web con fines acadmicos, mediante el uso del programa NVU
[software libre], a travs de una serie de ejercicios, que le permitirn crear su propia pgina
Web, y subirla a la Internet, con lo cual, el docente podr entrar al mundo de los Entornos
Virtuales de Aprendizaje Interactivos (EVAI), y as apoyar sus actividades de clase, tanto en
educacin presencial y mixta, como a distancia, administrar el curso y entregar los materiales
instruccionales a los estudiantes.
Prof. Omar Mirara (Ed.D.) Unidad de Educacin a Distancia
Coordinacin de Extensin Facultad de Ciencias-UCV
Caracas-Venezuela
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
3
CONTENIDO
Trminos importantes
Qu es World Wide Web (WWW)?
World Wide Web (Telaraa mundial) es un trmino que se utiliza para describir toda la
informacin y el contenido multimedia disponible en Internet. Para tener acceso a esta
informacin se utiliza una aplicacin llamada explorador de la Web.
El Explorador o navegador permite buscar, localizar, ver y transferir informacin en
Internet mediante el uso de los hipertextos. El "hipertexto" permite desplazarse fcilmente por
el Web. Al utilizar el formato de archivos "HTML" (Hypertext Markup Language), el
"hipertexto" permite saltar mediante un hipervnculo de una pgina de Web a otras; dichas
pginas pueden contener informacin, noticias, imgenes, vdeos, sonidos, grficos en 3D,
prcticamente cualquier cosa. Las pginas y archivos pueden estar situados en cualquier lugar
de Internet. Los "hipervnculos" son los enlaces de conexin que conforman el World Wide
Web. Al conectarse al Web, se tiene igual acceso a informacin en cualquier lugar del mundo;
sin restricciones o costos de "larga distancia".
La World Wide Web (el Web o WWW) proporciona una interfaz grfica por la que es fcil
desplazarse para buscar documentos en Internet. Estos documentos, as como los vnculos
entre ellos, componen una red de informacin comnmente llamada la WEB.
La Web permite saltar mediante un "hipervnculo" de una pgina a otra. Imagine que el
Web es una gran biblioteca. Los sitios Web son los libros de la biblioteca y las "pginas" de
Web pginas concretas de los libros. Un grupo de pginas Web se denomina sitio Web. Estas
pginas pueden estar situadas en sistemas en cualquier lugar del mundo.
Puede iniciar su viaje a travs del Web, desde un determinado lugar de la Web. Una
"pgina principal" es el punto de inicio de un sitio Web. Sera el equivalente a la cubierta o el
ndice de un libro.
Qu es una pgina Web?
Una pgina Web es un sistema distribuido de informacin basado en hipertexto, que
provee una manera relacional de moverse de una fuente de informacin a otra (Muoz, 1998,
p. 3). As, las pginas estn interconectadas en el Web. La conexin en una misma pgina o a
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
4
otras pginas se realiza haciendo clic sobre texto o grficos llamados hipertexto, hiperimgen o
hipervnculos. Los hipervnculos son palabras y grficos subrayados o con un recuadro, que
tienen direcciones de Web incrustadas. Al hacer clic en un hipervnculo, se salta a una pgina
concreta de un determinado sitio Web. Los hipervnculos pueden diferenciarse fcilmente, ya
que aparecen en un color distinto al resto del texto del sitio Web.
Qu es hipertexto e hipermedia?
"Hipertexto" e "hipermedia" son texto o grficos que tienen vnculos incrustados. Los
vnculos de hipertexto e hipermedia, tambin llamados hipervnculos, se activan haciendo clic
sobre una palabra subrayada o un grfico resaltado en una pgina de Web. Al hacer clic sobre
un hipervnculo se traslada a otro documento. Estos documentos pueden ser otras pginas de
informacin, otros sitios Web, pelculas, fotografas o sonidos.
En qu consiste NVU?
NVU, es un software libre y gratuito que permite disear y crear pginas Web,
desarrollado bajo la modalidad Open Source [incluyendo su cdigo fuente por si se necesita
hacer algn cambio y adaptarlo las necesidades de la institucin donde ser utilizado]. Puede
ser utilizado en los sistemas: Windows, Mac y Linux.
NVU esta diseado para ser fcil de usar, siendo ideal para los usuarios menos
experimentados que quieran crear una Web atractiva y de diseo profesional sin necesidad de
conocer sobre HTML u otros lenguajes o cdigos Web. Puede ser descargado de la pgina
http://www.nvu.com/ o http://nvu.softonic.com/. Es un programa relativamente nuevo, su
ltima apareci el 14 de Abril de 2005 [Nvu 1.0 Preview Release].
Es importante sealar que existen otros programas para la creacin de pginas Web entre
los que se puede mencionar: FreeMind, OpenOffice, Office, FrontPage, Dreamwever, Flash,
Hotdog, Composer de Netscape, MindManager, entre otros.
Antes de entrar a NVU para crear una pgina Web, es importante identificar en una pgina
ya elaborada y funcional, los elementos que consideraremos bsicos en este taller, como parte
fundamental de cualquier pgina Web. Estos elementos son: a) el texto; b) las imgenes y los
enlaces o hipervnculos. Tambin, convenimos en aceptar que toda pgina Web en su estructura
consta de: a) Ttulo; b) Introduccin; c) Cuerpo; d) Pie de pgina.
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
5
Para cargar una pgina funcional ejecute el programa Internet Explorer en el men de
Inicio, Programas de Windows. Luego, en la direccin URL escriba www.nova.edu
De inmediato le aparecer una ventana similar a la siguiente. Coloque el puntero del mouse
en cada uno de los puntos sealados.
Hipervnculos Enlaces o vnculos
Actividad prctica: Creacin de una pgina Web utilizando NVU.
En lo adelante, se le guiar para que elabore una pgina Web mediante la utilizacin de la herramienta NVU:
1.- En el men de Inicio de Windows, seleccione la opcin Todos los programas y luego haga clic en NVU. Tambin puede ubicar el icono de NVU en el escritorio de Windows
De inmediato se carga el programa NVU y aparece una ventana similar a la siguiente.
I N T R O D C C I N
C U E R P O
P I E
Imagen
Texto
Ttulo Elementos de una pgina Web
Nota: si la pgina Web anterior ha cambiado, trate de identificar los elementos en la nueva pgina.
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
6
Como puede observar, una vez carga el programa, ya se tienen en la ventana una pgina Web en blanco de nombre Sin ttulo en la cual se puede comenzar a trabajar.
2.- Verifique que aparezcan abiertas todas las barras sealadas, de no ser as, vaya al men Ver y actvelas en la opcin.Mostrar/Ocultar haciendo Clic sobre cada una de ellas.
rea de trabajo de la pgina Web en blanco de nombre Sin ttulo (edicin)
Barra de ttulo Barra men Barra de redaccin (Composicin)
Barra de formato (Estilos)
Barra de Modos de Edicin [diferentes formas de ver la pgina
Administrador de Sitios
NVU
Barra de Estado
Regla
Tipo de letra
Formato de
prrafo
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
7
3.- En el men de archivo seleccione las opciones Nuevo Ctrl + N, de inmediato le aparece la ventana Crear un nuevo documento o plantilla similar a la siguiente, con la cual puede crear Un documento vaco tipo XHTML o Strict DTD, o Un nuevo documento basado en una plantilla Web que puede editar y modificar con NVU.
4.- Haga Clic en la opcin Un documento vaco y luego haga Clic en el botn Crear
5.- Haga clic en el lado superior izquierdo del rea de trabajo y escriba el siguiente
texto: UNIVERSIDAD CENTRAL DE VENEZUELA (use letra Verdana, tamao
mediana, negrita, centre el texto y oprima la tecla Enter y escriba FACULTAD DE
CIENCIAS. Si lo desea, oprima la tecla F9 para que desactive el Administrador de sitios
y se le ample la ventana o rea de trabajo en NVU.
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
8
Nota: en el Men de Formato, encontrar el Tipo de letra y Tamao, Color de
texto entre otros, tal como se muestra en la siguiente ventana [observe las otras opciones]:
6.- Oprima ocho (8) veces la tecla Enter, luego vaya al men de Tabla y seleccione la
opcin Insertar.
7.- Cuando el sistema le muestre la ventana Insertar tabla haga Clic en pestaa
Preciso, coloque 13 fijas, 1 columna, 98 de anchos, en pxeles y borde en 0. Luego haga
clic en aceptar.
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
9
8.- Haga Clic en la primera fila y escriba Presentacin Personal (Currculum),
oprima Enter Haga clic en la segunda fila, deje una sangra de siete espacios y escriba
Este es el lugar para colocar el currculum del docente., Lugo oprima Enter.
9.- Antes de continuar, es conveniente guardar la pgina. Para ello, en el men Archivo
seleccione la opcin Guardar como. Cuando le aparezca una ventana similar a la siguiente
Ttulo de la pgina, escriba prueba y luego haga Clic en Aceptar.
10.- De inmediato le aparecer la ventana similar a la siguiente:
Ubique la carpeta Mis Webs, y en esta la carpeta AAAA_TallerWeb (previamente
creada) en el disco duro C:\, haga Clic en la misma y luego en el botn Guardar.
Nota: La carpeta AAAA_TallerWeb la debe haber bajado de Materiales Necesarios para el Curso-Taller en el Aula virtual del mismo.
Este es el directorio donde deber guardar su pgina o archivo prueba
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
10
11.- Luego repita el paso anterior (10) hasta que haya completado de llenar los sub-
encabezados y el cuerpo de su pgina quede con la informacin mostrada en el modelo dado a
continuacin. Recuerde que el Color de Texto lo encontrar en el men de Formato
UNIVERSIDAD CENTRAL DE VENEZUELA FACULTAD DE CIENCIAS
Presentacin Personal (Currculum) En esta parte colocars un resumen de tu currculum personal.
Volver al principioObjetivos Este es el lugar para colocar los objetivos de la asignatura.
Volver al principioMateriales Este es el lugar para colocar los materiales instruccionales.
Volver al principioReferencias Este es el lugar para colocar la lista de referencias o bibliografa.
Volver al principioContactos Este es el lugar para colocar las direcciones de correo electrnico, los telfonos, etc, para que los estudiantes interesados, se pongan en contacto con usted.
Volver al principio
12.- Por precaucin, se le recomienda que guarde con el nombre prueba el archivo en la
carpeta AAAA_TallerWeb (previamente creada) en el disco duro C. Para ello, seleccione la
opcin Guardar como... del men de archivo.
13.- Para colocar una imagen por encima del titulo UNIVERSIDAD CENTRAL DE
VENEZUELA, coloque el cursor delante de la palabra UNIVERSIDAD y oprima la
tecla de entrada [Enter] para que abra un espacio sobre el ttulo, luego haga clic sobre
C
IN T R O D C C I N
C
U
E
R
P
O
P I E
T I T U L O
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
11
Universidad, vaya al men Insertar y seleccione la opcin Imagen, de inmediato le
aparece una ventana similar a la siguiente [tambin puede hacer Clic en el botn Imagen en
la barra de Redaccin (composicin)) ].
14.- En el botn Elegir archivo, ubique la carpeta AAAA_TallerWeb [Mis Webs] en el
disco duro C. Luego ubique la carpeta imagenes, en sta, seleccione el archivo
logoUCV.Gif, haga un clic en el mismo, active la opcin No usar texto alternativo y
luego en el botn Aceptar. De inmediato aparecer en su pgina Web el logo de la
universidad, centre el mismo y ajstelo a un tamao adecuado, cualquier duda, consulte al
facilitador.
15.- Debajo del logo de la universidad escriba la palabra Inicio [cntrela], utilice letra
Arial, tamao muy pequeo [men de formato].
16.- Haga clic en cada una de las pestaas de la Barra de modos de edicin: Etiquetas
HTML, Cdigo fuente, Vista preliminar (al final de la pgina), Qu observa? Para
volver a modo de edicin de la pgina, haga clic en la pestaa Normal [izquierda].
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
12
Nota: si no funciona la vista previa, otra forma de observar su pgina, es ir a la carpeta donde est guardando la misma [AAAA_TallerWeb] y hacer doble clic sobre el archivo prueba.html, el cual se abrir con el navegador que tanga instalado por defecto [Firefox, Internet Explorer, otro] y le mostrar su pgina Web.
17.- Ahora, seleccione la palabra Inicio, luego en el men de Formato seleccione
Color de texto y seleccione el color blanco. Examine de nuevo la Vista previa. Qu
observa...?. Efectivamente, la palabra Inicio no aparece (est oculta). Sabes por qu o para
qu? Ms adelante ser utilizada para establecer el enlace o vnculo Volver al principio.
18.- Haga clic debajo del ttulo FACULTA DE CIENCIAS, oprima Enter unas tres
veces, luego vaya al men Insertar y seleccione la opcin Tabla y haga clic en la pestaa
preciso. De inmediato le aparece una ventana similar a la siguiente:
19.- Cambie la opcin Tamao Filas en 3, Columnas en 1, Anchura 98 % de la
ventana y Borde a 3. Luego haga clic en el botn aceptar. Recuerde guardar
peridicamente su pgina (Ctrl. + S).
20.- En la fila 1 coloque la palabra Contenido, en negrita, centrada, letra Arial tamao
muy grande [men de formato].
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
13
21.- Haga clic en la fila 2, e inserte una tabla de una (1) fila y cinco (5) columnas, luego
escriba en cada celda, en letra Tahoma, grande, centrada y en negrita, cada una de las palabras
siguientes: Presentacin, Objetivos, Materiales, Referencias, Contactos.
22.- Haga clic en la fila 3, e inserte una tabla de una (1) sola fila y dos (2) columnas.
23.- En la columna de la izquierda inserte una imagen de nombre Nubes que se
encuentra en la carpeta imagenes (AAAA_TallerWeb) en el disco duro C, guese por el paso
N 13, centre la imagen y ajstela (reduzca su tamao).
24.- En la columna de la derecha (la fila 3), coloque el siguiente texto: Educacin con
visin, visin con futuro (en negrita, letra Times New Roman tamao grande, y alineado a
la derecha). Oprima Enter y escriba Proverbio francs (letra Times New Roman tamao
medio, y alineado a la derecha, sin negrita).
25.- Guarde el archivo de nuevo en este momento para evitar perdida de informacin en
caso de cualquier problema con la mquina.
Ahora es el momento de crear los enlaces en su pgina Web, para lo cual se debe crear los
marcadores e hipervnculos. Para ello, realice con mucho detenimiento lo siguiente:
26.- Seleccione el ttulo Presentacin personal (Currculo). Luego vaya al men
Insertar y seleccione la opcin Enlace interno, de inmediato se abre la siguiente ventana:
Escriba en el recuadro nombre del marcador el texto Presentacin Personal Currculum y
haga clic en aceptar.
Qu observa?
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
14
27.- Para crear el hipervnculo o enlace con el texto anterior, seleccione en la tabla, la
palabra Presentacin en la celda que se encuentra debajo de la palabra Contenido, luego
en el men insertar seleccione Enlace (ctrl. c). De inmediato le aparecer una ventana
similar a la siguiente:
Haga clic en la pestaa que se encuentra al lado derecho del recuadro en blanco,
cuando le aparezca una ventana similar a la siguiente [Propiedades del enlace:], haga clic en
Presentacin personal. Observe qu sucede?
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
15
Luego en Aceptar. De inmediato le aparecer una ventana similar a la siguiente:
Qu observa...?, efectivamente la palabra Presentacin del men de opciones
[Contenido] cambia de color y se subraya, lo cual indica que es un hipervnculo (enlace). Si
hace clic en Vista previa o abre el archivo prueba.html, se le mostrar la forma como va
quedando su pgina Web. Si ahora hace clic en Presentacin debe ir al enlace Presentacin
personal (Currculo), con lo cual habr probado el hipervnculo. Si funciona correctamente,
siga con el paso 28, de lo contrario, si no funciona, repita el proceso o consulte a su
Tutor/Facilitador.
28.-Ahora repita el procedimiento anterior creando los enlaces internos (marcadores) y
los enlaces (vnculos) [pasos 25 a 27] con cada uno de los ttulos que se encuentran en el
cuerpo de su pgina Web que enlazarn son los ttulos que se encuentran en cada una de las
celdas de la tabla ubicada debajo del men Contenido respectivamente. Al concluir, habr
creado los enlaces o vnculos entre los elementos de su pgina Web. Recuerde grabar su pgina
en este momento.
Nota: Recuerda que para crear un Hipervnculo [texto, imagen, grfico, entre otros, siempre es necesario crear primero el Enlace interno (marcador) y luego el enlace (vnculo) en el men de insertar].
Para crear los enlaces de retorno de las diferentes partes de su pgina al comienzo de las
mismas debe realizar algunas acciones similares a las descritas en los pasos 25 a 27.
29.- Cree el enlace interno (marcador) para la palabra Inicio que se encuentra al
comienzo de su pgina Web, recuerdas dnde? exacto, debajo del logo de la universidad.
30.- Luego seleccione la opcin Volver al principio correspondiente al ttulo
Presentacin personal (Currculo), y cree el enlace (hipervnculo) con la palabra Inicio.
Repita este proceso con cada una de las frases Volver al principio que se encuentran en las
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
16
diferentes partes de la pgina, o si lo prefiere, tambin puede seleccionar la frase volver al
principio que acaba de vincular con la palabra Inicio copiarla y pegarla, reemplazando cada
una de las frases volver al principio. Esta accin copia no slo la frase volver al principio,
sino tambin las caractersticas de hipervnculo de la misma con la palabra Inicio.
Todos los enlaces o hipervnculos creados anteriormente corresponden a enlaces o vnculos
en una misma pgina. Se puede crear un hiperenlace o una hiperimagen a un vnculo que
se encuentra en otra pgina, servidor o archivo. Por ejemplo, para crear un hipervnculo a la
pgina de la UNIVERSIDAD CENTRAL DE VENEZUELA (UCV), proceda de la
siguiente manera:
31.- Seleccione el texto UNIVERSIDAD CENTRAL DE VENEZUELA.
32.- Luego seleccione la opcin insertar enlace (hipervnculo) y cuando le muestre la
ventana Propiedades del enlace mostrada en el paso 27 (pgina 15), escriba en el recuadro
en blanco la Direccin URL: http://www.ucv.ve
Ms propiedades
Destino
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
17
Luego haga clic en la pestaa ms propiedades y cuando le muestre una ventana
similar a la anterior, haga clic en Destino y marque la opcin El enlace se abrir y
seleccione en una nueva ventana, luego haga clic en aceptar. De esta manera, ha creado un
hipervnculo o hiperenlace con nombre de la universidad y el texto o direccin de la pgina
Web de la UCV, lo que significa que cada vez que usted o alguien haga clic sobre el texto
UNIVERSIDAD CENTRAL DE VENEZUELA, se abrir el sitio Web de la misma.
Examine de nuevo la Vista previa, o haga doble clic sobre el nombre de su pgina Web y
pruebe el enlace. Qu observa? Si an tienen abierta su pgina desde el Navegador, solo
recargue la misma.
33.- Repita el proceso anterior para crear una hiperimagen, tomando como enlace el logo
de la UCV que se encuentra al comienzo de su pgina. Recuerde guardar su pgina.
34.- Vuelva a guardar su pgina pero ahora con el nombre index, para ello, seleccione la
opcin Guardar como... del men de archivo y guarde en el disco duro C:\, en la carpeta
AAAA_TallerWeb, la pgina Web (Prueba), con el nombre index.
Nota: Generalmente los Navegadores o Buscadores para ejecutar (visualizar) una pgina Web buscan el archivo index o default que son los nombres que se dan por defecto a una Web.
35.- Haga clic en la etiqueta Vista previa y pruebe (valide) cada uno de los hipervnculos
creados en la pgina Web diseada por usted, incluyendo los de la frase Volver al principio.
Luego cierre el NVU.
Cmo visualizar la pgina Web Creada?
Hay varias formas de visualizar la pgina tal como se mostrara en la Web: a) Utilizando
la Vista previa de NVU, b) Mediante el uso de un Navegador: Firefox de Mozilla,
Internet Explorer, Netscape, entre otros; c) Haciendo doble clic en el archivo index.htnl
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
18
desde el Explorador de Windows o desde Mi PC. La primera (a) ya la ha utilizado al
examinar la Vista previa (de NVU).
36.- La segunda (b), tambin fue usada, pero para recordar, en el men de inicio,
seleccione el programa Firefox de Mozilla, Internet Explorer, entre otros, (dependiendo
del que tenga instalado en su mquina). Espere a que se cargue el navegador.
37.- Luego, en el men de archivo de FireFox de Mozilla, Internet Explorer, entre
otros, seleccione la opcin Abrir archivo, con lo cual le aparecer una ventana similar a la
siguiente:
38.- Haga clic en el botn examinar y localice el archivo index.html en la carpeta
AAAA_TallerWeb que se encuentra en su disco duro C:\Mis Webs. Luego haga clic en
Abrir y en Aceptar. De inmediato le aparecer en pantalla la pgina Web que acaba de
crear. Revise el contenido de la misma, pruebe que funcionen cada uno de los enlaces e
hipervnculos y que la misma tenga los elementos bsicos de toda pgina Web. Un modelo de
la pgina creada lo encontrar en la pgina 22 de este material (anexo 1).
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
19
De ser necesario o para realizar alguna modificacin, vuelva a editar la pgina y proceda
con el programa NVU como lo hizo a partir de la actividad N 1. Al finalizar, cierre el Internet
Explorer y el NVU.
Sern la pgina Prueba.html e index.html la misma pgina? Por qu cree Ud., que
guardamos la Prueba.html con el nombre de index.html? S, efectivamente la respuesta
es porque las pginas Web principales, por defecto se guardan con el nombre de index o
default, de esta forma son fcilmente localizadas por los programas Navegadores [Firefox,
Explorer, Netscape, otros] y Buscadores [Google, Yahoo, Altavista, entre otros].
39.- Para que lleve a casa su trabajo en una unidad de almacenamiento externa portable
(diskette, pendrive, disco duro externo o unidad zip), una vez cerradas todas las ventanas, con
la ayuda del Explorador de Windows o Mi PC, copie todo el contenido de la carpeta
AAAA_TallerWeb a su unidad de almacenamiento. Si la informacin no cabe por disponer
de poco espacio en su unidad, comprima la misma o borre de la carpeta imgenes aquellas
que no est utilizando. Cualquier duda consulte al Tutor/Facilitador.
Anmese a crear otras pginas para que practique lo desarrollado hasta ahora.
40.- Ahora solo le falta enlazar dos o ms pginas Web. Lo invito a que desde el men de
archivos (abrir archivo o Ctrl. O) de NVU, vaya a la carpeta AAAA_TallerWeb y localice el
archivo curriculum1.html, bralo, modifquelo y compltelo con sus datos curriculares.
Luego cree un enlace (hipervnculo) desde la palabra Currculum) que se encuentra en la
opcin Presentacin Personal (Currculum) de la pgina principal (index.html) a la pgina
Web curriculum1.html, para ello proceda de acuerdo a los pasos 31 y 32 de la pgina 17.
41.-Para completar su trabajo, slo le falta publicar (subir la pgina) a un servidor de red,
haciendo uso del FTP, para que sea vista en la Web, mediante el uso de la plataforma Internet.
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
20
Se le recomienda revisar las siguientes direcciones de Internet, donde encontrar informacin y los programas para hacer FTP y subir su pgina a la Web (Internet).
Direcciones: 1) FileZilla: http://filezilla.softonic.com/ 2) SmartFtp: http://www.smartftp.com/ 3) WinFtp: http://ws-ftp.softonic.com/descargar 4) CuteFTP http://cuteftp-pro.softonic.com/descargar En la pgina 23 de este material encontrar las instrucciones de CMO PUBLICAR
(SUBIR) SU PGINA A LA WEB? Se recomienda buscar servidores que ofrecen hospedaje gratuito para pginas Web.
Algunos criterios que pueden emplear para la bsqueda son.
internet + hosting + gratuito publicacin +pginas + web +gratis + "pginas web gratis" hospedaje + web + gratis hospedaje web gratis"
Se recomienda utilizar alguno de los siguientes portales que ofrecen servidores para
hospedaje gratuito:
http://es.geocities.com http://www.gratisweb.com http://www.fortunecity.es http://www.espacio.ya.com http://www.hispavista.galeon.com otros.
Gracias por su atencin...!
Dr. Omar Jos Mirata Moncada (ITDE) (MATERIAL EN PROCESO DE VALIDACIN)
Nota: Cualquier comentario, sugerencia, correccin u aporte sobre el material, le agradecemos enviar mensaje a la direccin de correos [email protected] con copia a omar.miratia@ ucv.ve
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
21
Bibliografa
-De Benito, C, B. (2000). Posibilidades Educativas de la Webtools: Estudio comparativo de
herramientas para la creacin y desarrollo de experiencias de enseanza-aprendizaje en
la WWW. Palma, Espaa: Universidad de les Balears.
-Dougherty, J. (2000). Office 2000 xito o pesadilla?. Recuperado el 15 de agosto 2002, de
http://www.cibernauta.com/ escanner/ Office 2000.htm
-Heck, M. (1999). FrontPage fulfills its promise of simple Web site creation. Intranet & I-
COMMERCE. Recuperado el 06 de diciembre de 2002, de:
http://archive.infoworld.com/cgi-bin/displayARchive.pl? /99/23/i03-23.52.htm
-Manual de HTML. Recuperado el 01 de enero de 2003, de
http://skyscraper.fortunecity.com/sql/123/Manuales/Win/html.htm
-Ortiz, S. (2000). Ms cerca de Internet. MS FrontPage 2000, la Web al alcance de todos. PC
Actual Ao XII N 116 Feb pp 306 308.
-St-Pierre, A., & Campagna, I. (1999). La creacin de pginas Web. Mxico: Trillas.
-Zambrano, J., & Seplveda, J. (1999). Creacin de Pginas Web. Caracas: Centro de
Enseanza Asistida por Computador (CENEAC). Universidad Central de Venezuela.
Facultad de Ciencias. Caracas, Venezuela.
OM/om. 21/04/2007
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
22
ANEXO 1
Inicio
UNIVERSIDAD CENTRAL DE VENEZUELA FACULTAD DE CIENCIAS
Contenido Presentacin Objetivos Materiales Referencias Contactos
"Educacin con visin, visin con futuro..."
Proverbio francs
Presentacin personal (Currculum)
Este es el lugar para colocar el currculum del docente.
Volver al principio
Objetivo
Este es el lugar para colocar los objetivos de la asignatura.
Volver al principio
Materiales
Este es el lugar para colocar los materiales instruccionales.
Volver al principio
Referencias
Este es el lugar para colocar la lista de referencia o bibliografa.
Volver al principio
Contactos
Este es el lugar para colocar las direcciones de correo electrnico, los telfonos, etc, para que los interesados en el tema se pongan en contacto con usted.
Volver al principio
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
23
CMO PUBLICAR (SUBIR) SU PGINA A LA WEB?
Existen varias maneras de publicar, es decir, subir su pgina Web a un servidor para que
sea vista utilizando la plataforma Internet. A continuacin veamos como sera usando WinFtp.
Utilizando un programa de Ftp (Filezilla/WinFtp/CuteFtp, otros).
En el men de inicio o en el escritorio de Windows, seleccione el archivo WS_FTPLE, el
cual le cargar el programa WinFtp y le aparecer una ventana similar a la siguiente:
Rellene la ventana Propiedades de Session de la siguiente manera:
Profile Name: Dejela en blanco. Host Name / Address: Coloque aqu la direccin del servidor donde publicar (subir) su
pgina. Ej. mipagina.cantv.net.
Host Type: Deje la opcin Automatic detec. User ID: Coloque aqu el login de usuario. Ej. computacionucve2 Password: Escriba la clave de acceso a su cuenta computacionucve2. Cuando introduzca
la clave no debe ser vista por otras personas o usuarios. Ej. ******
Una vez haya rellenado los campos anteriores, haga clic en Aplicar y luego en
Aceptar.
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
24
Espere a que se conecte al servidor (observe el lado izquierdo inferior de la ventana).
Nota 1: Si le aparece la siguiente ventana, significa que ha escrito mal su clave de acceso, la clave escrita no coincide con su cuenta de correo o requiere confirmacin de su clave por medidas de seguridad. Asegrese de no tener la tecla de mayscula fija (Bloq Mays) activada y vuelva a escribir su clave (password).
De inmediato le aparecer una ventana similar a la siguiente:
Si en la parte inferior izquierda de la ventana no le muestra ningn error, significa que est
conectado al servidor, en este caso, a cantv.net.
En el lado izquierdo de la ventana Local System, aparece la informacin de la unidad
local (disco duro C:\), donde debe estar la carpeta con la informacin (pgina Web e imgenes)
que desea subir al servidor. En el lado derecho aparece Remote Site, aparece la informacin
contenida en el espacio reservado en el servidor para su cuenta Web, es decir, el lugar en donde
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
25
deber copiar los archivos o carpetas de su pgina Web. La primera vez le aparecer en blanco
o le mostrar en archivo default.htm.
Para copiar o subir sus archivos al servidor, proceda de la siguiente manera:
En primer lugar, ubique la carpeta que contiene la informacin de su pgina Web, para
ello, haga clic en la etiqueta o pestaa ChgDir (cambiar directorio o carpeta) correspondiente
a la ventana Local System. De inmediato le aparecer la siguiente ventana (Input):
En el rea en blanco Enter local flder name escriba el nombre de la carpeta o unidad
fsica (C, D, A, B, CDROM, etc.) donde se encuentra la informacin, en nuestro caso,
C:\AAAA_PaginaWeb, y haga clic en OK.
De inmediato la ventana de la izquierda Local System, cambia a la carpeta indicada
C:\AAAA_PaginaWeb, donde se pueden observar los archivos y carpetas (Index.htm,
imgenes, etc) correspondientes a su pgina Web:
Para copiar (subir) los archivos al servidor (Remote Site) slo debe seleccionar (marcar)
los mismos, para lo cual basta con mantener oprimida la tecla Control (ctrl.) y hacer un clic
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
26
en cada archivo o carpeta (index, imgenes). Luego debe hacer clic en la etiqueta -- > que se
encuentra en la columna que divide las dos ventanas:
De inmediato comienza el proceso de transferencia de archivos, desde su mquina al
servidor (cantv.net). No importa dnde se encuentre usted ni en que ciudad, estado o pas se
encuentre el servidor, la informacin se transferir (copiar) al mismo.
Si le aparece la siguiente ventana, haga clic en SI (OK).
Observe este proceso (lado izquierdo inferior de la ventana), el mismo puede tardar varios
minutos, todo depende de la velocidad de su proveedor Internet (ancho de banda), de la
velocidad de su modem, de lo congestionado (trfico) que haya en la red y del tamao
(cantidad de bytes) de sus archivos.
Cuando concluya el proceso de transferencia de los archivos, en el lado izquierdo en la
ventana FTP WS_FTP LE mipagina.cantv.net (Remote Site) le aparecern los archivos o
carpetas transferidos, correspondientes a su pgina Web (Index, imgenes)
-
DDiisseeoo ddee ppggiinnaass WWeebb ______________________________________________________________________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________________________________________________________________ oommiirraattiiaa@@ccaannttvv..nneett // oommaarr..mmiirraattiiaaoo@@uuccvv..vvee // oommaarr..mmiirraattiiaa@@cciieennss..uuccvv..vvee // oommiirraattiiaa@@ggmmaaiill..ccoomm
27
Para salir o cerrar el programa WinFtp, haga clic en Close y luego en Exit.
Nota 2: Recuerde que su clave es secreta, no la entregue a nadie ni permita que otros lo vean introducir la misma, as evitar ser Hackeado Si alguien sube o publica informacin en su Web, usted ser el responsable por ello, lo cual le puede acarrear sanciones morales, laborales o penales.
Cmo comprobar si su pgina Web efectivamente est en la Internet?
Para comprobar si su pgina est en la Internet, proceda de la siguiente manera:
1.- Cargue un programa navegador Internet Explorador o Netscape.
2.- En el rea de direccin del navegador, escriba la direccin de su pgina Web.
3.- Oprima la tecla Enter o haga clic en buscar (Search). De inmediato se comienza a cargar su pgina Web. Una vez haya cargado completamente su pgina, pruebe todos los enlaces de la misma. Si algn enlace (link) no funciona o alguna de las imgenes no aparece, deber editar de nuevo su pgina utilizando FrontPage para realizar las modificaciones necesarias. Luego de esto, deber guardar su pgina y proceder a subirla al servidor nuevamente.
Nota 3: El estndar de nombre de la pgina principal de un sitio Web siempre debe ser index o default, ya que estas son las pginas que por defecto busca el navegador o buscador de Internet.
Dr. Omar Mirata