http://ceri.edu.

co

Taller Básico de Creación y Publicación de

Páginas Web para la Web del Profesor

Luis Gustavo Gil Gómez

E-mail: luis.gustavo@ceri.edu.co

Colegio el Rosario itagüí

1
http://ceri.edu.co

Contenido del Taller

1. Introducción
n Objetivos y alcances del taller.
n Servicio “Web del Profesor”.
n Alternativas para publicación electrónica en la ULA.
2. Aspectos Básicos
n Terminología y conceptos.
n ¿Cómo trabaja la Web?.
n ¿Cómo 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 creación 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 páginas Web.
n Dirección de la página principal de su sitio Web.
n Componentes de una página Web.
3. Creación de Sitios Web usando un Editor Web (Netscape Composer)
n Planificación del sitioWeb del profesor.
n Demostración del Instructor. Edición de los elementos de una página Web con Netscape Composer.
n Usando un Patrón de Diseño y Contenido.
n Práctica: Editando sus páginas Web.
4. Publicación 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 Conectándose con el servidor webdelprofesor.ula.ve.
n Transfiriendo archivos al servidor webdelprofesor.ula.ve
n Comprobando que su sitio Web se despliegue correctamente.

2
 1. Introducción

n Objetivos y alcances del Taller.

n Servicio “Web del Profesor”.
nAlternativas para publicación electrónica.

3
 Objetivos del Taller

n Familiarizar a los estudiantes en la creación y edición

de sitios Web personales sencillos.

n Facilitar a los estudiantes la publicación en Internet de

material útil para su vida académica y de
investigación.

n Mejorar el conocimiento de los estudiantes en el uso

de Tecnologías de Información y Comunicación (TICs)
modernas.

n Incorporar el uso de TICs en el quehacer académico

de los estudiantes.

4
 Alcances del Taller

n Al finalizar el taller el estudiante habra aprendido los

aspectos básicos involucrados con la elaboración de una
página Web y su publicación en un servidor Web.

n Los participantes deberán, en el transcurso del taller,

elaborar una página sencilla que publicarán en su cuenta
personal usando el servicio

5
 Servicio “Web del Profesor”

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

académica.

n El servicio " ofrece un sencillo mecanismo de alojamiento (hosting)

y publicación de archivos y/o páginas Web a estudiantes, donde
puedan compartir información que sea útil en sus actividades
académicas. Esto significa que un estudiante que haya elaborado
su página Web (en su casa) puede publicarla libre y directamente
en el servidor Web con tan sólo realizar una transferencia de
archivos.

6
 Alternativas para publicación electrónica

n Web del Profesor

n http://webdelprofesor.ula.ve

n Proyecto Saber ULA, Patrimonio Intelectual de la ULA en Internet

http://www.saber.ula.ve

n Coordinación de Estudios Interactivos a Distancia

(CEIDIS) http://ceidis.ula.ve

n Requerimientos especiales
n Servicios Web para dependencias
n Sitios Web de postgrados y unidades de investigación
Sitios Web de eventos Todas estas opciones están
Todas estas opciones están

disponibles para .
disponibles para Udsds. Comooo

profesores e investigadores de
profesores e investigadores de

la la ULALA
7
 2. Aspectos Básicos

n Terminología y conceptos.
n ¿Cómo trabaja la Web?.
n ¿Cómo 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 creación 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 páginas Web.
n Dirección de la página principal de su sitio Web.
n Componentes de una página Web.

8
 Terminología y conceptos.

Discutir brevemente significado de:

n Internet, World Wide Web, WWW, Web

n Página Web, sitio Web, portal Web
n Navegador Web, browser, editor Web, editor HTML, servidor Web
n Alojamiento, hosting, publicación Web
n HTTP, FTP, SFTP, SSH
n URL, HTML, HTM
n Java, JavaScript, PHP, etc.

9
 ¿Cómo trabaja la Web?

Su computador
...solicita documento a...
...solicita documento a... Servidor Web

ServidorServidor envíaenvía documentodocumento

a su computador

a su computador
SuSu computadorcomputador
despliegadespliega elel
documentodocumento enviadoenviado

1. Su computador solicita a un servidor Web que le envíe un

documento almacenado en él.
2. El documento viaja a través de Internet hasta su computador
3. Su computador despliega el documento que solicitó.

10
 ¿Cómo 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 “dirección web” (llamadas URLs)

n Direcciones web típicas 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

n Si Ud. conoce la dirección de la página

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

Mencionenencionen otrasotras direccionesdirecciones Webeb queque hayanhayan vistovisto yy lesles llamenllaen lala atenciónatención..

11
 ...¿Cómo se encuentra un documento en la Web?
Los buscadores

n Buscadores globales

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

n Buscadores locales

n Buscan dentro de un determinado sitio Web

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

-- Mencionenencionen cualcual buscadorbuscador globalglobal lesles dada mejoresejores resultadosresultados..

-- Mencionenencionen unun problemaproblea queque ocurreocurre concon loslos buscadoresbuscadores globalesglobales..

http://webdelprofesor.ula.ve 12
 ¿Qué es HTML?

n HTML es el lenguaje con el que se estructuran

internamente las páginas web. Básicamente 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 página (texto,
imágenes, etc.).

n No es necesario saber HTML para elaborar y

publicar páginas Web sencillas (hay programas que
nos ayudan en esa tarea).

http://webdelprofesor.ula.ve 13
 ¿Qué necesitamos?...

n Para Navegar por el Web:

n Conexión de algún tipo a la red Internet.
n Navegador Web (Netscape Navigator ó MS Internet Explorer por ejemplo).

n Para elaborar páginas Web:

n Navegador Web.
n Editor de texto o editor HTML o conversores de formato.
n Programas para procesar o elaborar gráficos (opcional).

n Para publicar información en el Web:

n Haber elaborado previamente páginas Web y gráficos relacionados.
n Tener a nuestra disposición una institución o compañía que “aloje” nuestras
páginas (tener una “cuenta de usuario” compañía o proveedor de acceso a
Internet, con derecho a publicar nuestros propios archivos en sus servidores)
o tener servidores propios conectados a Internet.

¿¿ Udss.. tienentieen un lugarlr dondee publicarlicr susss páginasis Web?e

14
Formas de crear sitios Web

Utilizando
1
Herramientas de
Conversión de
Formato

Utilizando
2
Editores HTML

Escribiendo el 3
código HTML

15
 Pasos previos a la creación de un Sitio Web

1. Definir contenidos a publicar.

2. Estructurar información para el sitio Web.

Secciones del sitio, Árbol del sitio Boceto o esquema de una página
navegación
Logo Nombre e-mail
Datos de Contacto Resumen

Material y Notas Participación o temas especificos

Intereses personales, links... Publicaciones recientes

SeSe puedepuede usarusar unun patronpatron dede diseñodiseño prepre--

definidodefinido parapara facilitarfacilitar estaesta tareatarea (diseño,(diseño,

boceto,boceto, diagramación)diagramación)
16
 Tipos de Documentos que puede publicar en su Web

n A continuación una lista algunos tipos de documentos que Ud. Puede

publicar en su Web:

Tipo de Documento Extensión

Página WEB-HTML .html, .htm
Archivo texto ASCII .txt
Portable Document Format .pdf
Gráficos .gif, .jpg, png, etc.
Archivos de audio digital .mp3, .wav

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

n 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.)

17
 Consejos para el nombramiento de carpetas y
archivos para sus páginas Web
Cuando se trabaja con archivos para un servidor
Web, es conveniente seguir algunos consejos:

n NO usar !!! espacios en blanco en un No Sí

nombre de archivo o carpeta aunque su
sistema operativo lo permita. h04.htm horario_2004.html
N Clases C.Htm notas_clase_calculo.html
n Usar una convención para mayúsculas y Artículo.pdf articulo.pdf
minúsculas. Para un servidor Web el
archivo “mipagina.html” es diferente al C V.doc curriculum.doc
archivo “MIPAGINA.Html” (para MS img imagenes
Windows no!!). Consejo: usar minúsculas

n NO usar !!! Letras acentuadas dentro de

los nombres de archivos.

n NO usar !!! caracteres especiales en

el nombre de los archivos:

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

n Usar nombres descriptivos para los

archivos, sin importar su longitud.

18
 Dirección de la página 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 automáticamente si necesidad de escribir su nombre.

Consejo: use uno de esos nombres para la página principal de su sitio.

n Ejemplos de posibles direcciones de páginas Web

n http://web.com/ciencias/josepena/clases.html
n http://web.com/ciencias/josepena/

Mencioneencione cualcual eses lala desventajadesventaja dede NO usarusar estosestos nombresnobres sugeridossugeridos dede

archivoarchivo parapara lala páginapágina principalprincipal dede susu sitiositio Webeb..

19
 Componentes de una página Web

n Las páginas Web se componen de varios elementos:

Texto.

Gráficos.

Enlaces (hipervínculos).

Elementos de diagramación y formato.

SeSe podránpodrán crearcrear gráficosgráficos enen unun editoreditor Web?eb?

http://webdelprofesor.ula.ve 20
 3. Creación de Sitios Web usando un Editor Web
(Netscape Composer)

n Planificación del sitioWeb.

n Edición de los elementos de una página Web con
Netscape Composer.
n Usando un Patrón de Diseño y Contenido.
n Práctica: Editando sus páginas Web.

21
 Planificación del sitio Web del profesor

n Tema: Sitio Web de José Peña

n Este sitio incluirá información sobre las materias

que dicta el profesor, guías de estudio, ejercicios,
actividades, áreas de investigación.

n El prof. Peña también quiere que la página sea un

medio de comunicación entre él y sus alumnos, donde
colocará las notas de las evaluaciones, anuncios y
eventos de interés para sus estudiantes.

22
 ... Planificación del sitio Web del profesor

n Es buena práctica revisar otras páginas Web de

Profesores.
n Navegar por:
n Ingenieria/ Richar Máquez
n Ciencias / Wilians Barreto
n Arquitectura / Nelson Gómez
n Ciencias Jurídicas / Daniela Bettiol

23
 … Planificación del sitio Web del profesor

n Secciones del Sitio / Navegación

Una posible división de la información sería:

n Información sobre el profesor

n Materias
Guías y Ejercicios

Áreas de Investigación

n Publicaciones
n Enlaces de Interés
n Mi familia

24
 … Planificación del sitio Web del profesor

n Estructura del Sitio:

n Se podrían crear diferentes carpetas para
almacenar la información del sitio del prof. Peña:
n /josepena
n /imágenes
n /investigacion
n /materias
n /Materia1
n /Materia2
n ...
n /personal
n /fotos
Discutiriscutir estaesta estructuraestructura yy agregaragregar
n /publicaciones
lolo queque faltefalte..

25
 … Planificación del sitio Web del profesor

n Ejemplo de esquema de una página (boceto):

Logo de la Colegio Nombre e-mail

Datos de Contacto Resumen Curricular

Material y Notas Participación en Proyectos de Inv.

Intereses personales, links... Publicaciones recientes

26
 … Planificación del sitio Web del profesor

n Boceto que se deberá convertir en algo como esto:

27
 Demostración. Edición de los elementos de
una página Web con Netscape Composer

n Elementos básicos del Editor Web

Barra de menú y de herramientas

Zona de edición de la página Web

Vistas de edición de la página Web

28
 Usando un Patrón de Diseño y Contenido

n Patrón para páginas Web

Patrón previamente
creado para dar mayor
facilidad a los
estudiantes

29
 Práctica: Editando sus páginas 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 estarán creadas algunas).
3. Coloque los archivos necesarios en las carpetas correspondientes (para
el taller ya existirán algunas carpetas y archivos).
4. Abra el archivo patrón proporcionado (patron1.html), con
Netscape Composer y guardelo con el nombre index.html
5. Comience a editar la página principal de su sitio. Incorpore o edite
elementos en la página Web (texto, enlaces, imágenes, tablas, etc.).
6. Guarde el archivo a menudo.
7. Pruebe la página en el navegador Web (Explorer o Netscape).
8. Repita pasos del 4 al 7 para crear cualquier otra página de su sitio.

30
 ...Práctica: Editando sus páginas Web

n Edite todos los elementos que desee de su página.

n Añada enlaces a:
n una página externa.
n otra página de su sitio Web.
n una dirección de correo electrónico.
n un documento PDF, Word, Excel y Power Point (proporcionados por el
instructor).
n Inserte una imagen (encontrara una en la carpeta imágenes)
n Intente colocar datos verdaderos en su página para que luego sirva
como su primera página publicada en el Web del Profesor.
n El instructor lo ayudará cuando Ud. lo solicite.

31
 ...Práctica: Editando sus páginas Web

n Modelo posible:

32
4. Publicación 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 Conectándose con el servidor webdelprofesor.ula.ve.
n Transfiriendo archivos al servidor webdelprofesor.ula.ve
n 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
páginas Web creadas en su computador, a su cuenta en el servidor Web
del Profesor.

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

n Se pueden descargar e instalar clientes FTP seguros de forma gratuita

(desde las paginas del Web del Profesor)

SeráSerá queque existenexisten clientesclientes yy servidoresservidores FTPTP insegurosinseguros?? R:: SISI

http://webdelprofesor.ula.ve 34
 Antes de Transferir los archivos al servidor

1. Identificar dónde están los archivos del Sitio Web en

su computadora.

2. Comprobar que el sitio Web y documentos a enviar se

desplieguen correctamente en su computadora.

35
 Conectándose con el servidor webdelprofesor.ula.ve

n Seguiremos las indicaciones del instructor.

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

n Para instrucciones detalladas de instalación y conexión puede

consultar el manual de Secure Shell (SSH) y Secure FTP
(SFTP) para Windows, que encontrará en la sección
“Documentación y Manuales” en la Web del Profesor:
n 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 página Web

recien transferida.
n Recuerde la dirección de su página Web:

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

38
 Felicitaciones !!

Ya Ud. Tiene publicada en Internet su página Web!!

Informele a sus colegas, estudiantes y amigos la

dirección de su página Web.

Publique información valiosa y actualice sus

contenidos constantemente.