Sie sind auf Seite 1von 41

Taller Bsico de Creacin y Publicacin de

Pginas Web para la Web del Profesor

Web: http://webdelprofesor.ula.ve
E-mail: webdelprofesor@ula.ve

Centro de Teleinformacin de la Universidad de Los Andes (CTI-ULA)


http://cti.cptm.ula.ve
Coordinacin de Estudios Interactivos a Distancia (CEIDIS)
http://ceidis.ula.ve

Contenido del Taller


1.

2.

3.

4.

Introduccin
n Objetivos y alcances del taller.
n Servicio Web del Profesor.
n Alternativas para publicacin electrnica en la ULA.
Aspectos Bsicos
n Terminologa y conceptos.
n Cmo trabaja la Web?.
n Cmo se encuentra un documento en la Web?. URLs y buscadores.
n Qu es HTML?.
n Qu necesitamos?...
n Formas de crear sitios Web.
n Pasos previos a la creacin de un Sitio Web.
n Tipos de Documentos que puede publicar en su Web.
n Consejo para el nombramiento de carpetas y archivos para sus pginas Web.
n Direccin de la pgina principal de su sitio Web.
n Componentes de una pgina Web.
Creacin de Sitios Web usando un Editor Web (Netscape Composer)
n Planificacin del sitioWeb del profesor.
n Demostracin del Instructor. Edicin de los elementos de una pgina Web con Netscape Composer.
n Usando un Patrn de Diseo y Contenido.
n Prctica: Editando sus pginas Web.
Publicacin de Sitios Web en la Web del Profesor
n Herramientas necesarias para publicar contenidos en la Web del Profesor.
n Antes de Transferir los archivos al servidor.
n Conectndose con el servidor webdelprofesor.ula.ve.
n Transfiriendo archivos al servidor webdelprofesor.ula.ve
n Comprobando que su sitio Web se despliegue correctamente.

http://webdelprofesor.ula.ve

1. Introduccin

Objetivos y alcances del Taller.


n Servicio Web del Profesor.
n Alternativas para publicacin electrnica en
la ULA.
n

Objetivos del Taller


n

Familiarizar a los profesores de la ULA en la creacin y


edicin de sitios Web personales sencillos.

Facilitar a los profesores la publicacin en Internet de


material til para su vida acadmica y de investigacin.

Mejorar el conocimiento de los profesores en el uso de


Tecnologas de Informacin y Comunicacin (TICs)
modernas.

Incorporar el uso de TICs en el quehacer acadmico de


los profesores universitarios de la ULA.
http://webdelprofesor.ula.ve

Alcances del Taller


n

Al finalizar el taller los profesores habrn aprendido los


aspectos bsicos involucrados con la elaboracin de una
pgina Web y su publicacin en un servidor Web.

Los participantes debern, en el transcurso del taller,


elaborar una pgina sencilla que publicarn en su cuenta
personal usando el servicio Web del Profesor.

http://webdelprofesor.ula.ve

Servicio Web del Profesor


n

Es un servicio de "alojamiento" web para la comunidad acadmica


de la ULA.

El servicio "Web del Profesor" (WP) ofrece un sencillo mecanismo


de alojamiento (hosting) y publicacin de archivos y/o pginas Web
a profesores de la Universidad de Los Andes, donde puedan
compartir informacin que sea til en sus actividades acadmicas.
Esto significa que un profesor que haya elaborado su pgina Web
(en su casa u oficina) puede publicarla libre y directamente en el
servidor Web del Profesor con tan slo realizar una transferencia
de archivos.

http://webdelprofesor.ula.ve

Alternativas para publicacin electrnica en la ULA


n

Web del Profesor


n http://webdelprofesor.ula.ve

Proyecto Saber ULA, Patrimonio Intelectual de la ULA en Internet


n http://www.saber.ula.ve

Coordinacin de Estudios Interactivos a Distancia (CEIDIS)


n http://ceidis.ula.ve

Requerimientos especiales
n
n
n

Servicios Web para dependencias universitarias


Sitios Web de postgrados y unidades de investigacin
Sitios Web de eventos
Todas
Todas estas
estas opciones
opciones estn
estn
http://webdelprofesor.ula.ve

disponibles
disponibles para
para Uds.
Uds. Como
Como
profesores
profesores ee investigadores
investigadores de
de
la
la ULA
ULA
7

2. Aspectos Bsicos
n
n
n
n
n
n
n
n
n

n
n

Terminologa y conceptos.
Cmo trabaja la Web?.
Cmo se encuentra un documento en la Web?. URLs y buscadores.
Qu es HTML?.
Qu necesitamos?...
Formas de crear sitios Web.
Pasos previos a la creacin de un sitio Web.
Tipos de Documentos que puede publicar en su Web.
Consejo para el nombramiento de carpetas y archivos para sus
pginas Web.
Direccin de la pgina principal de su sitio Web.
Componentes de una pgina Web.
8

Terminologa y conceptos.
Discutir brevemente significado de:
n
n
n
n
n
n
n

Internet, World Wide Web, WWW, Web


Pgina Web, sitio Web, portal Web
Navegador Web, browser, editor Web, editor HTML, servidor Web
Alojamiento, hosting, publicacin Web
HTTP, FTP, SFTP, SSH
URL, HTML, HTM
Java, JavaScript, PHP, etc.

http://webdelprofesor.ula.ve

Cmo trabaja la Web?


Su computador
...solicita
...solicita documento
documento a...
a...

Su
Su computador
computador
despliega
despliegael
el
documento
documento enviado
enviado

1.
2.
3.

Servidor Web

Servidor
Servidor enva
enva documento
documento
aa su
su computador
computador

Su computador solicita a un servidor Web que le enve un documento


almacenado en l.
El documento viaja a travs de Internet hasta su computador
Su computador despliega el documento que solicit.
http://webdelprofesor.ula.ve

10

Cmo se encuentra un documento en la Web?


Las direcciones Web (URLs)
n

Los documentos en Internet (y el Web) se pueden ubicar gracias a que cada


uno posee una direccin web (llamadas URLs)

Direcciones web tpicas serian las siguientes:


n

http://www.saber.ula.ve/unidades/planilla.html

|-servicio-|---- servidor ------|-- detalles del camino y el archivo ---|


n

http://webdelprofesor.ula.ve/ingenieria/fpalm

Si Ud. conoce la direccin de la pgina


que quiere visitar, la coloca en la barra
de direcciones de su navegador

Mencionen
Mencionen otras
otras direcciones
direcciones Web
Web que
que hayan
hayan visto
visto yy les
les llamen
llamen la
la atencin.
atencin.
http://webdelprofesor.ula.ve

11

...Cmo se encuentra un documento en la Web?


Los buscadores

Buscadores globales
n
n
n
n

http://www.google.com
http://www.altavista.com
http://www.auyantepui.com
Etc...

Buscadores locales
n
n

Buscan dentro de un determinado sitio Web


Ejemplos: http://www.saber.ula.ve, http://webdelprofesor.ula.ve

-- Mencionen
Mencionen cual
cual buscador
buscador global
global les
les da
da mejores
mejores resultados.
resultados.
-- Mencionen
Mencionen un
un problema
problema que
que ocurre
ocurre con
con los
los buscadores
buscadores globales.
globales.
http://webdelprofesor.ula.ve

12

Qu es HTML?

HTML es el lenguaje con el que se estructuran


internamente las pginas web. Bsicamente se trata
de un conjunto de instrucciones (etiquetas) que sirven
para dar formato al texto y definir donde y como se van
a presentar los elementos de pgina (texto, imgenes,
etc.).

No es necesario saber HTML para elaborar y publicar


pginas Web sencillas (hay programas que nos
ayudan en esa tarea).
http://webdelprofesor.ula.ve

13

Qu necesitamos?...
n

Para Navegar por el Web:


n
n

Para elaborar pginas Web:


n
n
n

Conexin de algn tipo a la red Internet.


Navegador Web (Netscape Navigator MS Internet Explorer por ejemplo).

Navegador Web.
Editor de texto o editor HTML o conversores de formato.
Programas para procesar o elaborar grficos (opcional).

Para publicar informacin en el Web:


n
n

Haber elaborado previamente pginas Web y grficos relacionados.


Tener a nuestra disposicin una institucin o compaa que aloje nuestras
pginas (tener una cuenta de usuario en una universidad, compaa o
proveedor de acceso a Internet, con derecho a publicar nuestros propios
archivos en sus servidores) o tener servidores propios conectados a Internet.

Uds.
Uds. tienen
tienen un
un lugar
lugar donde
donde publicar
publicar sus
sus pginas
pginas Web?
Web?
http://webdelprofesor.ula.ve

14

Formas de crear sitios Web


Utilizando
Herramientas de
Conversin de
Formato

Utilizando
Editores HTML

Escribiendo el
cdigo HTML

http://webdelprofesor.ula.ve

15

Pasos previos a la creacin de un Sitio Web

1.
2.

Definir contenidos a publicar.


Estructurar informacin para el sitio Web.
Secciones del sitio,
navegacin

rbol del sitio

Boceto o esquema de una pgina


Logo de la ULA
Datos de Contacto

Material y Notas

Intereses personales, links...

Nombre

e-mail
Resumen Curricular

Participacin en Proyectos de Inv.

Publicaciones recientes

Se
Se puede
puede usar
usar un
un patron
patron de
de diseo
diseo prepredefinido
definido para
para facilitar
facilitar esta
esta tarea
tarea (diseo,
(diseo,
boceto,
boceto, diagramacin)
diagramacin)
http://webdelprofesor.ula.ve
16

Tipos de Documentos que puede publicar en su Web


n

A continuacin una lista algunos tipos de documentos que Ud. Puede


publicar en su Web:
Tipo de Documento
Pgina WEB-HTML
Archivo texto ASCII
Portable Document Format
Grficos
Archivos de audio digital

Extensin
.html, .htm
.txt
.pdf
.gif, .jpg, png, etc.
.mp3, .wav

Cualquier otro archivo digital: p.ej. documentos Word, Power Point, Excel, etc.

No todos estos tipos de documentos pueden ser mostrados por el


Navegador directamente; algunos necesitan aplicaciones de apoyo o
plugins (es el caso de Word, Flash, MP3, etc.)

http://webdelprofesor.ula.ve

17

Consejos para el nombramiento de carpetas y archivos para sus


pginas Web
Cuando se trabaja con archivos para un servidor
Web, es conveniente seguir algunos consejos:
n

NO usar !!! espacios en blanco en un nombre


de archivo o carpeta aunque su sistema
operativo lo permita.

Usar una convencin para maysculas y


minsculas. Para un servidor Web el archivo
mipagina.html es diferente al archivo
MIPAGINA.Html (para MS Windows no!!).
Consejo: usar minsculas

NO usar !!! Letras acentuadas dentro de los


nombres de archivos.

NO usar !!! caracteres especiales en el


nombre de los archivos:

No
h04.htm
N Clases C.Htm
Artculo.pdf
C V.doc
img

S
horario_2004.html
notas_clase_calculo.html
articulo.pdf
curriculum.doc
imagenes

! @ # $ % ^ & * ( ) / \ | : ; , ? + , etc...
n

Usar nombres descriptivos para los archivos,


sin importar su longitud.
http://webdelprofesor.ula.ve

18

Direccin de la pgina principal de su sitio Web


n

El servidor Web reconoce como documento por defecto los nombres de


archivo:

index.html index.htm
...y los despliega automticamente si necesidad de escribir su nombre.
Consejo: use uno de esos nombres para la pgina principal de su sitio.
n

Ejemplos de posibles direcciones de pginas Web de profesores


n

http://webdelprofesor.ula.ve/ciencias/josepena/clases.html

http://webdelprofesor.ula.ve/ciencias/josepena/

Mencione
Mencione cual
cual es
es la
la desventaja
desventaja de
de NO
NO usar
usar estos
estos nombres
nombres sugeridos
sugeridos de
de
archivo
archivo para
para la
la pgina
pgina principal
principal de
de su
su sitio
sitio Web.
Web.
http://webdelprofesor.ula.ve

19

Componentes de una pgina Web

Las pginas Web se componen de varios elementos:


n Texto.
n Grficos.
n Enlaces (hipervnculos).
n Elementos de diagramacin y formato.

Se
Se podrn
podrn crear
crear grficos
grficos en
en un
un editor
editor Web?
Web?
http://webdelprofesor.ula.ve

20

3. Creacin de Sitios Web usando un Editor Web (Netscape


Composer)

n
n

n
n

Planificacin del sitioWeb del profesor.


Demostracin del Instructor. Edicin de los elementos
de una pgina Web con Netscape Composer.
Usando un Patrn de Diseo y Contenido.
Prctica: Editando sus pginas Web.

21

Planificacin del sitio Web del profesor


n

Tema: Sitio Web del Profesor Jos Pea

Este sitio incluir informacin sobre las materias que


dicta el profesor, guas de estudio, ejercicios,
actividades, reas de investigacin.

El prof. Pea tambin quiere que la pgina sea un medio


de comunicacin entre l y sus alumnos, donde colocar
las notas de las evaluaciones, anuncios y eventos de
inters para sus estudiantes.

http://webdelprofesor.ula.ve

22

... Planificacin del sitio Web del profesor


n

Es buena prctica revisar otras pginas Web de


Profesores.
n

Navegar por:
n
n
n
n

Ingenieria/ Richar Mquez


Ciencias / Wilians Barreto
Arquitectura / Nelson Gmez
Ciencias Jurdicas / Daniela Bettiol

http://webdelprofesor.ula.ve

23

Planificacin del sitio Web del profesor


n

Secciones del Sitio / Navegacin


Una posible divisin de la informacin sera:
n
n
n
n
n
n
n

Informacin sobre el profesor


Materias
Guas y Ejercicios
reas de Investigacin
Publicaciones
Enlaces de Inters
Mi familia

http://webdelprofesor.ula.ve

24

Planificacin del sitio Web del profesor


n

Estructura del Sitio:


n

Se podran crear diferentes carpetas para almacenar


la informacin del sitio del prof. Pea:
/josepena
n
n
n

/imgenes
/investigacion
/materias
n
n
n

/personal
n

/Materia1
/Materia2
...
/fotos

/publicaciones

Discutir
Discutir esta
esta estructura
estructura yy agregar
agregar
lo
lo que
que falte.
falte.
http://webdelprofesor.ula.ve

25

Planificacin del sitio Web del profesor


n

Ejemplo de esquema de una pgina (boceto):


Logo de la ULA
Datos de Contacto

Nombre

e-mail
Resumen Curricular

Material y Notas

Participacin en Proyectos de Inv.

Intereses personales, links...

Publicaciones recientes

http://webdelprofesor.ula.ve

26

Planificacin del sitio Web del profesor


n

Boceto que se deber convertir en algo como esto:

http://webdelprofesor.ula.ve

27

Demostracin del Instructor. Edicin de los elementos de una


pgina Web con Netscape Composer
n

Elementos bsicos del Editor Web


Barra de men y de herramientas

Zona de edicin de la pgina Web

Vistas de edicin de la pgina Web


http://webdelprofesor.ula.ve

28

Usando un Patrn de Diseo y Contenido

Patrn para pginas Web

Patrn previamente
creado para dar
mayor facilidad a los
profesores

http://webdelprofesor.ula.ve

29

Prctica: Editando sus pginas Web


1. Escoja en que lugar de su computador creara el sitio Web (para el taller en:

C:\taller_web_del_profesor\mi_sitio_web\).
2. Genere las carpetas necesarias en el lugar escojido (para el taller ya

estarn creadas algunas).


3. Coloque los archivos necesarios en las carpetas correspondientes (para el

taller ya existirn algunas carpetas y archivos).


4. Abra el archivo patrn proporcionado (patron1.html), con Netscape

Composer y guardelo con el nombre index.html


5. Comience a editar la pgina principal de su sitio. Incorpore o edite

elementos en la pgina Web (texto, enlaces, imgenes, tablas, etc.).


6. Guarde el archivo a menudo.
7. Pruebe la pgina en el navegador Web (Explorer o Netscape).
8. Repita pasos del 4 al 7 para crear cualquier otra pgina de su sitio.
http://webdelprofesor.ula.ve

30

...Prctica: Editando sus pginas Web


n Edite todos los elementos que desee de su pgina.
n Aada enlaces a:
n una pgina externa.
n otra pgina de su sitio Web.
n una direccin de correo electrnico.
n un documento PDF, Word, Excel y Power Point (proporcionados por el

instructor).
n Inserte una imagen (encontrara una en la carpeta imgenes)
n Intente colocar datos verdaderos en su pgina para que luego sirva como

su primera pgina publicada en el Web del Profesor.


n El instructor lo ayudar cuando Ud. lo solicite.

http://webdelprofesor.ula.ve

31

...Prctica: Editando sus pginas Web


n Modelo posible:

http://webdelprofesor.ula.ve

32

4. Publicacin de Sitios Web en la Web del Profesor

n
n
n
n

Herramientas necesarias para publicar contenidos en la


Web del Profesor.
Antes de Transferir los archivos al servidor.
Conectndose con el servidor webdelprofesor.ula.ve.
Transfiriendo archivos al servidor webdelprofesor.ula.ve
Comprobando que su sitio Web se despliegue
correctamente.

33

Herramientas necesarias para publicar contenidos en


la Web del Profesor
n

Para publicar contenidos en la Web del Profesor es necesario utilizar un


programa llamado cliente FTP seguro, que permite transferir los archivos y
pginas Web creadas en su computador, a su cuenta en el servidor Web
del Profesor.

SFTP son las siglas que corresponden a Secure File Transfer Protocol
(Protocolo Seguro de Transferencia de Archivos); y es un sistema seguro
de envo de archivos a travs de Internet que se usa en el servicio Web del
Profesor de la ULA.

Se pueden descargar e instalar clientes FTP seguros de forma gratuita


(desde las paginas del Web del Profesor)
Ser
Ser que
que existen
existen clientes
clientes yy servidores
servidores FTP
FTP inseguros?
inseguros? R:
R: SI
SI
http://webdelprofesor.ula.ve

34

Antes de Transferir los archivos al servidor

1.

Identificar dnde estn los archivos del Sitio Web en


su computadora.

2.

Comprobar que el sitio Web y documentos a enviar se


desplieguen correctamente en su computadora.

http://webdelprofesor.ula.ve

35

Conectndose con el servidor webdelprofesor.ula.ve

n
n

Seguiremos las indicaciones del instructor.


Para esta actividad utilizaremos el cliente SFTP recomendado en la
Web del Profesor (Secure Shell SSH y Secure FTP SFTP).

Para instrucciones detalladas de instalacin y conexin puede


consultar el manual de Secure Shell (SSH) y Secure FTP (SFTP)
para Windows, que encontrar en la seccin Documentacin y
Manuales en la Web del Profesor:
n

http://webdelprofesor.ula.ve

http://webdelprofesor.ula.ve

36

Transfiriendo archivos al servidor webdelprofesor.ula.ve


n

Para publicar su sitio Web seguiremos los pasos


indicados por el instructor.

http://webdelprofesor.ula.ve

37

Comprobando que su sitio Web se despliegue correctamente


n

Usando su navegador, intente acceder a su pgina Web


recien transferida.
Recuerde la direccin de su pgina Web:

http://webdelprofesor.ula.ve/SU_FACULTAD/SU_LOGIN

http://webdelprofesor.ula.ve

38

Felicitaciones !!

Ya Ud. Tiene publicada en Internet su pgina Web!!


Informele a sus colegas, estudiantes y amigos la direccin
de su pgina Web.
Publique informacin valiosa y actualice sus contenidos
constantemente.

http://webdelprofesor.ula.ve

39

Preguntas, dudas, comentarios finales?

Puede preguntar cualquier duda a los administradores


del sistema Web del Profesor
Puede volver a asistir a este taller cuando quiera

40

Gracias por su atencin

Comunicar cualquier duda, pregunta o


sugerencia al siguiente correo electrnico:

webdelprofesor@ula.ve
Centro de Teleinformacin de la Universidad de Los Andes (CTI-ULA)
http://cti.cptm.ula.ve
Coordinacin de Estudios Interactivos a Distancia (CEIDIS)
http://ceidis.ula.ve

41