Curso bsico de creacin

de pginas web
Programa de formacin
docente UAM 2005-2006

Miguel Sevilla Callejo

Abril 2006
Departamento de Geografa
Universidad Autnoma de Madrid

Curso bsico de creacin de pginas web

Objetivos
Desarrollar las capacidades bsicas de
edicin, diseo y mantenimiento de pginas
web de contenidos informativos estticos
Principios bsicos de funcionamiento
World Wide Web y lenguaje HTML
creacin de una pgina web bsica
diseo, texto, tablas, imgenes y enlaces

publicacin de archivos
transferencia de ficheros entre el equipo de sobremesa
y el servidor
25 de abril de 2006

Curso bsico de creacin de pginas web

Introduccin

Internet
World Wide Web
Protocolos

25 de abril de 2006

Curso bsico de creacin de pginas web

Internet
Red de redes a escala mundial
Millones de computadoras interconectadas
Todas bajo un lenguaje comn: el conjunto de
protocolos de transmisin de datos por Internet
TCP/IP - Protocolo de Control de Transmisin sobre
Internet

Utilizando este lenguaje se pueden desarrollar

diferentes servicios:

la Web (WWW)
correo electrnico (SMTP)
conversaciones en lnea y mensajera instantanea
transferencia de archivos (FTP)
y muchos otros

25 de abril de 2006

Curso bsico de creacin de pginas web

La World Wide Web

La World Wide Web, la Web o WWW: del ingls
Telaraa Mundial
Es el sistema de informacin ms popular de
Internet
Basado en la visualizacin de pginas con textos
relacionados (hipertextos)
Permite realizar una lectura no secuencial
utilizando enlaces entre diferentes pginas,
secciones y contenidos
Elevado grado de interaccin con la informacin
presente
Seguir enlaces, enviar informacin e interactuar con
la Web se le denomina navegar o explorar
25 de abril de 2006

Curso bsico de creacin de pginas web

Partes de la WWW
Ordenador
personal

Estructura local
Hardware: nuestro ordenador
Software: aplicacin de
navegacin web
Explorer, Firefox, Opera,
Safari, Netscape, etc.

Internet

Servidor

25 de abril de 2006

Estructura de conexin
Hardware: conjunto de redes
interconectadas
Software: Protocolos de
comunicacin

Estructura remota
Hardware: Servidor
Software: aplicacin para la
gestin del servicio web y
documentos con la informacin
6

Curso bsico de creacin de pginas web

Servicio de alojamiento
Para poder publicar en la WWW
Se trata de espacios en donde alojar los
documentos web
Servicios de alojamiento
Servidor de la UAM
Ver pgina del CAU

Proveedor de internet
Otros servidores
Servicios de pago
Servicios gratuitos
25 de abril de 2006

Curso bsico de creacin de pginas web

Comunicacin web
HTML
Lenguaje de etiquetado de documentos hipertextual
Hypertext Markup Language
Bajo unas reglas precisas ISO8879

HTTP
Protocolo de transferencia de hipertexto
HyperText Transfer Protocol

Otros lenguajes basados o complementarios del

HTML
XHTML (XML), DHTML, CSS
Todos ellos funcionan sobre el protocolo HTTP
25 de abril de 2006

Curso bsico de creacin de pginas web

Otro protocolo de utilidad: FTP

Protocolo de transferencia de ficheros
File Transfer Protocol
Permite transmitir (publicar) desde el ordenador
personal al servidor los documentos web que se
desean utilizar
PC
estructura local

Servidor
Protocolo de transferencia de ficheros / FTP

c:\archivos\webpersonal\
index.html
foto.jpg
documento.pdf

25 de abril de 2006

estructura remota

fttp://servidor.com/user457/
index.html
foto.jpg
documento.pdf

Curso bsico de creacin de pginas web

Pginas web

La importancia del
contenido
Diseo y presentacin
Publicacin

25 de abril de 2006

10

Curso bsico de creacin de pginas web

Pgina web
Es un documento de la
World Wide Web
debe intentar cumplir los
estndares de la World
Wide Web Consortium, W3C
normalmente en formato
HTML

Tipo de pginas web

Estticas
Dinmicas
tecnologas diversas: PHP,
ASP

25 de abril de 2006

Partes bsicas de una pgina

web
texto
imgenes
formatos JPG, GIF y PNG

enlaces
entre diferentes
pginas/ficheros
internos (relacionan
contenidos dentro de una
misma pgina)

otros complementos
animaciones, sonidos,
formularios, scripts,
programas incrustados, etc

11

Curso bsico de creacin de pginas web

Contenido
Definir la temtica

pgina personal
pgina de docencia
divulgacin cientfica
otras

Establecer una organizacin y jerarquizar

contenidos
Tener presente la interrelacin de los documentos
Una pgina web debe ser sencilla y fcil de utilizar
contenido claro y bien estructurado
25 de abril de 2006

12

Curso bsico de creacin de pginas web

Diferentes contenidos
Pgina personal
Introduccin personal
Docencia
asignaturas

Investigacin
lneas de trabajo
proyectos de
investigacin

Documentos

Pgina de docencia
Objetivos de la
asignatura
Temario a seguir
Bibliografa
recomendada
Documentos de trabajo
para los alumnos
Enlaces a otras webs

publicaciones
fotos

25 de abril de 2006

13

Curso bsico de creacin de pginas web

Diseo y presentacin
Establecer la distribucin del contenido
Colores y formas
Debe primar la sencillez y la claridad de los
contenidos
Hay que encontrar un equilibrio entre la
esttica y la sencillez en el diseo-creacin
de la web
Importante prestar atencin a pginas ya
diseadas
25 de abril de 2006

14

Curso bsico de creacin de pginas web

Algunos diseos
encabezado

encabezado

texto e imgenes

texto
e
imgenes

imagen decorativa

ndice de contenidos

ndice de contenidos

texto
e
imgenes

pie de pgina

25 de abril de 2006

15

Curso bsico de creacin de pginas web

Creacin, publicacin y navegacin

Creacin de la pgina web
Sobre un directorio local

Publicacin de la pgina
web
Colgando los ficheros en un
directorio remoto

un directorio de nuestro
disco duro

un directorio en el
servidor

Navegacin de la pgina
web
PC

Servidor

estructura local

estructura remota

Navegando sobre una

direccin web o URL
Uniform Resource Locator
estructura remota

World Wide Web

>>>>>>>>>>

http://www.servidor.com
http://www.google.com
http://www.uam.es

25 de abril de 2006

16

Curso bsico de creacin de pginas web

Acceso al servidor y direccin web

Utilizando el protocolo FTP
Usando el explorador de Windows

Servidor
UAM

hay otras alternativas ms completas

software FTP especfico (CuteFTP, WS-FTP,
FileZilla, etc.)

www.uam.es

Es necesario un nombre de usuario y

una contrasea
La facilita el administrador del servidor
servidor de la UAM: ftp://www.uam.es
user: curso1 / password: popeye1

El directorio del servidor suele est

estrechamente relacionado con la
direccin web

ftp
www.uam.es
user curso1
password popeye1
md directorio
...

http://www.uam.es/cursos/curso1
25 de abril de 2006

17

Curso bsico de creacin de pginas web

Organizacin de archivos
Documento ndice
index.html default.html

Nombres
sencillos pero inteligibles
cuidado con las letras raras, las maysculas y
caracteres especiales

Directorios (solo con muchos archivos)

imgenes, documentos, etc.

25 de abril de 2006

18

Curso bsico de creacin de pginas web

Programacin bsica HTML

Principios bsicos de
HTML
Etiquetas bsicas
Pgina web bsica

25 de abril de 2006

19

Curso bsico de creacin de pginas web

Principios bsicos de HTML

HTML
Lenguaje de etiquetado para hipertexto
Estndares: ISO8879 - W3C

Puede ser editado por cualquier editor de texto

Etiquetas
la mayora se abren y se cierran

<etiqueta opcin=valor> texto </etiqueta>

apertura de etiqueta

25 de abril de 2006

texto al que afecta cierre de etiqueta

20

Curso bsico de creacin de pginas web

Principales etiquetas
<html> </html>
abre y cierra el texto en
html

<head> </head>
abre y cierra la cabecera
del documento

<body> </body>
abre y cierra el cuerpo del
documento

<p> </p>
etiquetado de prrafos

<br>
salto de lnea

25 de abril de 2006

<table> </table>
etiquetado para tablas
las filas se identifican con
las etiquetas <tr> </tr>
y las celdas dentro de las
filas con <td> </td>

<ul> </ul>
etiquetado de listas
los elementos se separan
con las etiquetas <li> </li>

<!-- comentario -->

permite aadir comentarios
al cdigo e invisibles al
navegador

21

Curso bsico de creacin de pginas web

Pgina web bsica

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="es">

3
4

<head>
<title>Pagina web de ejemplo</title>

</head>

<body>

7
8
9

<p>Texto de la pagina web de ejemplo</p>

</body>
</html>

1 - etiqueta de referencia de lenguaje: HTML versin 4.01

2 - apertura de documento html
3 - inicio de cabeza del documento (head)
4 - ttulo
5 - cierre de cabeza de documento
6 - inicio cuerpo del documento (body)
7 - parrafo con el texto de la pgina web
8 - cierre de cuerpo de documento
9 - cierre de documento html

25 de abril de 2006

22

Curso bsico de creacin de pginas web

Software para crear pginas web

Programas
Nvu
Uso y manejo de Nvu

25 de abril de 2006

23

Curso bsico de creacin de pginas web

Programas para creacin web

Editores bsicos de texto
cualquier editor de texto como el bloc de notas
de windows
escribiendo directamente el cdigo

Editores especficos para web

What You See Is What You Get (WYSIWYG)
Lo que ves es lo que obtienes

Permiten disear directamente el texto tal y

como se ver en el navegador
25 de abril de 2006

24

Curso bsico de creacin de pginas web

Programas comerciales
Frontpage
del paquete de ofimtica de
Microsoft
utiliza estndares propios de
esa empresa
solo se ven correctamente las
pginas en el navegador de
esa empresa

Dreamweaver
el editor de pginas web ms
utilizado
muy verstil y flexible
25 de abril de 2006

25

Curso bsico de creacin de pginas web

Alternativas libres
Programas de software libre
Bajo licencias abiertas y
gratuitas
Nvu
editor de web del equipo
que programa firefox

Amay
Muy til para usuarios
avanzados

Quanta
sobre KDE de Linux
25 de abril de 2006

26

Curso bsico de creacin de pginas web

barra de mens

Nvu
Interfaz de usuario
barra de redaccin
barra de formato

barra de exploracin
con pestaas

rea de trabajo

barra de modos de
edicin
25 de abril de 2006

27

Curso bsico de creacin de pginas web

Edicin con Nvu (I)

[preparar directorio de
datos]
Documento nuevo
Archivo > Nuevo
pulsando sobre botn
nuevo

Propiedades de pgina
Formato > Ttulo y
propiedades de pgina
25 de abril de 2006

28

Curso bsico de creacin de pginas web

Edicin con Nvu (II)

Editar texto
cambiar color y tamao
negrita, cursiva y
subrayado
listas
justificacin
tipo de letra

25 de abril de 2006

Estilos de prrafos
Texto sin formato
Prrafo
Ttulos

29

Curso bsico de creacin de pginas web

Edicin con Nvu (III)

Insertar imagen
Crear tabla
Crear marcador
Crear enlace

Guardar pgina
Publicar pgina
configurar acceso al
servidor
administrador de sitios

a travs del men insertar

con los botones

25 de abril de 2006

30

Curso bsico de creacin de pginas web

Web de ejemplo
Pgina web personal
Estructura

Archivo ndice
Documento de docencia
Documentos de investigacin
Pgina de enlaces

Diseo
Cabecera, ndice, cuerpo y pie de pgina

Publicacin
Navegacin
25 de abril de 2006

31

Curso bsico de creacin de pginas web

Documentacin

Fuentes
Errores frecuentes
Algunos consejos

25 de abril de 2006

32

Curso bsico de creacin de pginas web

Fuentes en la red
Documentacin
Wikipedia
Google
Ayuda de Nvu

Imgenes y multimedia
Software relacionado

25 de abril de 2006

33

Curso bsico de creacin de pginas web

Errores frecuentes
Problemas con la sincronizacin de los
archivos
revisar actualizacin de archivos en el servidor

Problemas con los nombres de los archivos

no utilizar maysculas, espacios ni letras poco
usuales

25 de abril de 2006

34

Curso bsico de creacin de pginas web

Algunos consejos
Organizar bien la informacin
en relacin a los archivos
en relacin a al contenido de los mismos

Disear pginas web simples pero vistosas

Lo importante es comunicar
Respetar la netiqueta

25 de abril de 2006

35

Curso bsico de creacin de pginas web

Complementos

Contadores
Buscador de Google en la web
Hojas de estilo CSS
Scripts
Otros

25 de abril de 2006

36