Curso básico de creación de páginas web

Curso básico de creación
de páginas web
Programa de formación
docente UAM 2005-2006
Miguel Sevilla Callejo
Abril 2006
Departamento de Geografía
Universidad Autónoma de Madrid
Curso básico de creación de páginas web
Objetivos
• Desarrollar las capacidades básicas de
edición, diseño y mantenimiento de páginas
web de contenidos informativos estáticos
• Principios básicos de funcionamiento
ƒ World Wide Web y lenguaje HTML
ƒ creación de una página web básica
• diseño, texto, tablas, imágenes y enlaces
ƒ publicación de archivos
• transferencia de ficheros entre el equipo de sobremesa
y el servidor
25 de abril de 2006
2
Curso básico de creación de páginas web
Introducción
• Internet
• World Wide Web
• Protocolos
25 de abril de 2006
3
Curso básico de creación de páginas web
Internet
• Red de redes a escala mundial
• Millones de computadoras interconectadas
• Todas bajo un lenguaje común: el conjunto de
protocolos de transmisión de datos por Internet
ƒ TCP/IP - Protocolo de Control de Transmisión sobre
Internet
• Utilizando este lenguaje se pueden desarrollar
diferentes servicios:
ƒ
ƒ
ƒ
ƒ
ƒ
la Web (WWW)
correo electrónico (SMTP)
conversaciones en línea y mensajería instantanea
transferencia de archivos (FTP)
y muchos otros
25 de abril de 2006
4
Curso básico de creación de páginas web
La World Wide Web
• La World Wide Web, la Web o WWW: del inglés
Telaraña Mundial
• Es el sistema de información más popular de
Internet
• Basado en la visualización de páginas con textos
relacionados (hipertextos)
• Permite realizar una lectura no secuencial
utilizando enlaces entre diferentes páginas,
secciones y contenidos
• Elevado grado de interacción con la información
presente
• Seguir enlaces, enviar información e interactuar con
la Web se le denomina navegar o explorar
25 de abril de 2006
5
Curso básico de creación de páginas web
Partes de la WWW
Ordenador
personal
• Estructura local
ƒ Hardware: nuestro ordenador
ƒ Software: aplicación de
navegación web
• Explorer, Firefox, Opera,
Safari, Netscape, etc.
Internet
Servidor
25 de abril de 2006
• Estructura de conexión
ƒ Hardware: conjunto de redes
interconectadas
ƒ Software: Protocolos de
comunicación
• Estructura remota
ƒ Hardware: Servidor
ƒ Software: aplicación para la
gestión del servicio web y
documentos con la información
6
Curso básico de creación de páginas 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 página del CAU
ƒ Proveedor de internet
ƒ Otros servidores
• Servicios de pago
• Servicios gratuitos
25 de abril de 2006
7
Curso básico de creación de páginas web
Comunicación 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
8
Curso básico de creación de páginas 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
9
Curso básico de creación de páginas web
Páginas web
• La importancia del
contenido
• Diseño y presentación
• Publicación
25 de abril de 2006
10
Curso básico de creación de páginas web
Página web
• Es un documento de la
World Wide Web
ƒ debe intentar cumplir los
estándares de la World
Wide Web Consortium, W3C
ƒ normalmente en formato
HTML
• Tipo de páginas web
ƒ Estáticas
ƒ Dinámicas
• tecnologías diversas: PHP,
ASP
25 de abril de 2006
• Partes básicas de una página
web
ƒ texto
ƒ imágenes
• formatos JPG, GIF y PNG
ƒ enlaces
• entre diferentes
páginas/ficheros
• internos (relacionan
contenidos dentro de una
misma página)
ƒ otros complementos
• animaciones, sonidos,
formularios, scripts,
programas incrustados, etc
11
Curso básico de creación de páginas web
Contenido
• Definir la temática
ƒ
ƒ
ƒ
ƒ
página personal
página de docencia
divulgación científica
otras
• Establecer una organización y jerarquizar
contenidos
• Tener presente la interrelación de los documentos
• Una página web debe ser sencilla y fácil de utilizar
ƒ contenido claro y bien estructurado
25 de abril de 2006
12
Curso básico de creación de páginas web
Diferentes contenidos
• Página personal
ƒ Introducción personal
ƒ Docencia
• asignaturas
ƒ Investigación
• líneas de trabajo
• proyectos de
investigación
ƒ Documentos
• Página de docencia
ƒ Objetivos de la
asignatura
ƒ Temario a seguir
ƒ Bibliografía
recomendada
ƒ Documentos de trabajo
para los alumnos
ƒ Enlaces a otras webs
• publicaciones
• fotos
25 de abril de 2006
13
Curso básico de creación de páginas web
Diseño y presentación
• Establecer la distribución del contenido
• Colores y formas
• Debe primar la sencillez y la claridad de los
contenidos
• Hay que encontrar un equilibrio entre la
estética y la sencillez en el diseño-creación
de la web
• Importante prestar atención a páginas ya
diseñadas
25 de abril de 2006
14
Curso básico de creación de páginas web
Algunos diseños
encabezado
encabezado
texto e imágenes
texto
e
imágenes
imagen decorativa
índice de contenidos
índice de contenidos
texto
e
imágenes
pie de página
25 de abril de 2006
15
Curso básico de creación de páginas web
Creación, publicación y navegación
• Creación de la página web
ƒ Sobre un directorio local
• Publicación de la página
web
ƒ Colgando los ficheros en un
directorio remoto
• un directorio de nuestro
disco duro
• un directorio en el
servidor
• Navegación de la página
web
PC
Servidor
estructura local
estructura remota
ƒ Navegando sobre una
dirección 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 básico de creación de páginas web
Acceso al servidor y dirección web
• Utilizando el protocolo FTP
• Usando el explorador de Windows
Servidor
UAM
ƒ hay otras alternativas más completas
• software FTP específico (CuteFTP, WS-FTP,
FileZilla, etc.)
www.uam.es
• Es necesario un nombre de usuario y
una contraseña
ƒ 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
dirección web
ftp
www.uam.es
user curso1
password popeye1
md directorio
...
ƒ http://www.uam.es/cursos/curso1
25 de abril de 2006
17
Curso básico de creación de páginas web
Organización de archivos
• Documento índice
ƒ index.html ó default.html
• Nombres
ƒ sencillos pero inteligibles
ƒ cuidado con las letras “raras”, las mayúsculas y
caracteres especiales
• Directorios (solo con muchos archivos)
ƒ imágenes, documentos, etc.
25 de abril de 2006
18
Curso básico de creación de páginas web
Programación básica HTML
• Principios básicos de
HTML
• Etiquetas básicas
• Página web básica
25 de abril de 2006
19
Curso básico de creación de páginas web
Principios básicos de HTML
• HTML
ƒ Lenguaje de etiquetado para hipertexto
ƒ Estándares: ISO8879 - W3C
• Puede ser editado por cualquier editor de texto
• Etiquetas
ƒ la mayoría se abren y se cierran
<etiqueta opción=“valor”> texto </etiqueta>
apertura de etiqueta
25 de abril de 2006
texto al que afecta cierre de etiqueta
20
Curso básico de creación de páginas 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 párrafos
• <br>
ƒ salto de línea
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 añadir comentarios
al código e invisibles al
navegador
21
Curso básico de creación de páginas web
Página web básica
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html lang="es">
3
4
<head>
<title>Pagina web de ejemplo</title>
5
</head>
6
<body>
7
8
9
<p>Texto de la pagina web de ejemplo</p>
</body>
</html>
1 - etiqueta de referencia de lenguaje: HTML versión 4.01
2 - apertura de documento html
3 - inicio de cabeza del documento (head)
4 - título
5 - cierre de cabeza de documento
6 - inicio cuerpo del documento (body)
7 - parrafo con el texto de la página web
8 - cierre de cuerpo de documento
9 - cierre de documento html
25 de abril de 2006
22
Curso básico de creación de páginas web
Software para crear páginas web
• Programas
• Nvu
• Uso y manejo de Nvu
25 de abril de 2006
23
Curso básico de creación de páginas web
Programas para creación web
• Editores básicos de texto
ƒ cualquier editor de texto como el bloc de notas
de windows
ƒ escribiendo directamente el código
• Editores específicos para web
ƒ What You See Is What You Get (WYSIWYG)
• Lo que ves es lo que obtienes
ƒ Permiten diseñar directamente el texto tal y
como se verá en el navegador
25 de abril de 2006
24
Curso básico de creación de páginas web
Programas comerciales
• Frontpage
ƒ del paquete de ofimática de
Microsoft
ƒ utiliza estándares propios de
esa empresa
ƒ solo se ven correctamente las
páginas en el navegador de
esa empresa
• Dreamweaver
ƒ el editor de páginas web más
utilizado
ƒ muy versátil y flexible
25 de abril de 2006
25
Curso básico de creación de páginas 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 básico de creación de páginas web
barra de menús
Nvu
Interfaz de usuario
barra de redacción
barra de formato
barra de exploración
con pestañas
área de trabajo
barra de modos de
edición
25 de abril de 2006
27
Curso básico de creación de páginas web
Edición con Nvu (I)
• [preparar directorio de
datos]
• Documento nuevo
ƒ Archivo > Nuevo
ƒ pulsando sobre botón
“nuevo”
• Propiedades de página
ƒ Formato > Título y
propiedades de página
25 de abril de 2006
28
Curso básico de creación de páginas web
Edición con Nvu (II)
• Editar texto
ƒ cambiar color y tamaño
ƒ negrita, cursiva y
subrayado
ƒ listas
ƒ justificación
ƒ tipo de letra
25 de abril de 2006
• Estilos de párrafos
ƒ Texto sin formato
ƒ Párrafo
ƒ Títulos
29
Curso básico de creación de páginas web
Edición con Nvu (III)
•
•
•
•
Insertar imagen
Crear tabla
Crear marcador
Crear enlace
• Guardar página
• Publicar página
ƒ configurar acceso al
servidor
ƒ administrador de sitios
ƒ a través del menú insertar
ƒ con los botones
25 de abril de 2006
30
Curso básico de creación de páginas web
Web de ejemplo
• Página web personal
• Estructura
ƒ
ƒ
ƒ
ƒ
Archivo índice
Documento de docencia
Documentos de investigación
Página de enlaces
• Diseño
ƒ Cabecera, índice, cuerpo y pie de página
• Publicación
• Navegación
25 de abril de 2006
31
Curso básico de creación de páginas web
Documentación
• Fuentes
• Errores frecuentes
• Algunos consejos
25 de abril de 2006
32
Curso básico de creación de páginas web
Fuentes en la red
• Documentación
ƒ Wikipedia
ƒ Google
ƒ Ayuda de Nvu
• Imágenes y multimedia
• Software relacionado
25 de abril de 2006
33
Curso básico de creación de páginas web
Errores frecuentes
• Problemas con la sincronización de los
archivos
ƒ revisar actualización de archivos en el servidor
• Problemas con los nombres de los archivos
ƒ no utilizar mayúsculas, espacios ni letras poco
usuales
25 de abril de 2006
34
Curso básico de creación de páginas web
Algunos consejos
• Organizar bien la información
ƒ en relación a los archivos
ƒ en relación a al contenido de los mismos
• Diseñar páginas web simples pero vistosas
• Lo importante es comunicar
• Respetar la netiqueta
25 de abril de 2006
35
Curso básico de creación de páginas web
Complementos
•
•
•
•
•
Contadores
Buscador de Google en la web
Hojas de estilo CSS
Scripts
Otros
25 de abril de 2006
36