Upload
dinhdung
View
223
Download
2
Embed Size (px)
Citation preview
Miguel Sevilla CallejoAbril 2006Departamento de GeografíaUniversidad Autónoma de Madrid
Curso básico de creación de páginas web
Programa de formación docente UAM 2005-2006
25 de abril de 2006 2
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 HTMLcreació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 3
Curso básico de creación de páginas web
Introducción
• Internet• World Wide Web• Protocolos
25 de abril de 2006 4
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 InternetTCP/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 instantaneatransferencia de archivos (FTP)y muchos otros
25 de abril de 2006 5
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 secuencialutilizando 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 6
Curso básico de creación de páginas web
Partes de la WWW
• Estructura localHardware: nuestro ordenadorSoftware: aplicación de navegación web
• Explorer, Firefox, Opera, Safari, Netscape, etc.
• Estructura de conexiónHardware: conjunto de redes interconectadasSoftware: Protocolos de comunicación
• Estructura remotaHardware: ServidorSoftware: aplicación para la gestión del servicio web y documentos con la información
Ordenadorpersonal
Servidor
Internet
25 de abril de 2006 7
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 internetOtros servidores
• Servicios de pago• Servicios gratuitos
25 de abril de 2006 8
Curso básico de creación de páginas web
Comunicación web
• HTMLLenguaje de etiquetado de documentos hipertextualHypertext Markup LanguageBajo unas reglas precisas – ISO8879
• HTTPProtocolo de transferencia de hipertextoHyperText 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 9
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 ServidorProtocolo de transferencia de ficheros / FTP
c:\archivos\webpersonal\index.htmlfoto.jpgdocumento.pdf
fttp://servidor.com/user457/index.htmlfoto.jpgdocumento.pdf
estructura local estructura remota
25 de abril de 2006 10
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 11
Curso básico de creación de páginas web
Página web• Es un documento de la
World Wide Webdebe intentar cumplir los estándares de la World Wide Web Consortium, W3Cnormalmente en formato HTML
• Tipo de páginas webEstáticasDinámicas
• tecnologías diversas: PHP, ASP
• Partes básicas de una página web
textoimágenes
• formatos JPG, GIF y PNGenlaces
• entre diferentes páginas/ficheros
• internos (relacionan contenidos dentro de una misma página)
otros complementos• animaciones, sonidos,
formularios, scripts, programas incrustados, etc
25 de abril de 2006 12
Curso básico de creación de páginas web
Contenido
• Definir la temáticapágina personalpágina de docenciadivulgación científicaotras
• 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 13
Curso básico de creación de páginas web
Diferentes contenidos
• Página personalIntroducción personalDocencia
• asignaturas
Investigación• líneas de trabajo• proyectos de
investigación
Documentos• publicaciones• fotos
• Página de docenciaObjetivos de la asignaturaTemario a seguirBibliografía recomendadaDocumentos de trabajo para los alumnosEnlaces a otras webs
25 de abril de 2006 14
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 15
Curso básico de creación de páginas web
Algunos diseños
encabezadoín
dice
de
cont
enid
os
texto e imágenes
pie de página
encabezado
índice de contenidos
textoe
imágenes
imag
en d
ecor
ativ
a
textoe
imágenes
25 de abril de 2006 16
Curso básico de creación de páginas web
Creación, publicación y navegación
• Creación de la página webSobre un directorio local
• un directorio de nuestro disco duro
• Publicación de la página web
Colgando los ficheros en un directorio remoto
• un directorio en el servidor
• Navegación de la página web
Navegando sobre una dirección web o URL
• Uniform Resource LocatorPC Servidorestructura local
estructura remota
estructura remota
World Wide Web
>>>>>>>>>> http://www.servidor.comhttp://www.google.com
http://www.uam.es
25 de abril de 2006 17
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
hay otras alternativas más completas• software FTP específico (CuteFTP, WS-FTP,
FileZilla, etc.)
• 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
http://www.uam.es/cursos/curso1
ServidorUAM
www.uam.es
ftp
www.uam.es
user curso1
password popeye1
md directorio
...
25 de abril de 2006 18
Curso básico de creación de páginas web
Organización de archivos
• Documento índiceindex.html ó default.html
• Nombressencillos pero inteligiblescuidado con las letras “raras”, las mayúsculas y caracteres especiales
• Directorios (solo con muchos archivos)imágenes, documentos, etc.
25 de abril de 2006 19
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 20
Curso básico de creación de páginas web
Principios básicos de HTML
• HTMLLenguaje de etiquetado para hipertextoEstá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 cierre de etiquetatexto al que afecta
25 de abril de 2006 21
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
• <table> </table>etiquetado para tablaslas filas se identifican con las etiquetas <tr> </tr>y las celdas dentro de las filas con <td> </td>
• <ul> </ul>etiquetado de listaslos elementos se separan con las etiquetas <li> </li>
• <!-- comentario -->permite añadir comentarios al código e invisibles al navegador
25 de abril de 2006 22
Curso básico de creación de páginas web
Página web básica<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es">
<head>
<title>Pagina web de ejemplo</title>
</head>
<body>
<p>Texto de la pagina web de ejemplo</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
1 - etiqueta de referencia de lenguaje: HTML versión 4.012 - apertura de documento html3 - inicio de cabeza del documento (head)4 - título5 - cierre de cabeza de documento6 - inicio cuerpo del documento (body)7 - parrafo con el texto de la página web8 - cierre de cuerpo de documento9 - cierre de documento html
25 de abril de 2006 23
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 24
Curso básico de creación de páginas web
Programas para creación web
• Editores básicos de textocualquier editor de texto como el bloc de notas de windowsescribiendo directamente el código
• Editores específicos para webWhat 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 25
Curso básico de creación de páginas web
Programas comerciales
• Frontpagedel paquete de ofimática de Microsoftutiliza estándares propios de esa empresasolo se ven correctamente las páginas en el navegador de esa empresa
• Dreamweaverel editor de páginas web más utilizadomuy versátil y flexible
25 de abril de 2006 26
Curso básico de creación de páginas web
Alternativas libres
• Programas de software libre• Bajo licencias abiertas y
gratuitas
• Nvueditor de web del equipo que programa firefox
• AmayMuy útil para usuarios avanzados
• Quantasobre KDE de Linux
25 de abril de 2006 27
Curso básico de creación de páginas web
NvuInterfaz de usuario
barra de menús
barra de redacciónbarra de formato
área de trabajo
barra de modos deedición
barra de exploracióncon pestañas
25 de abril de 2006 28
Curso básico de creación de páginas web
Edición con Nvu (I)
• [preparar directorio de datos]
• Documento nuevoArchivo > Nuevopulsando sobre botón “nuevo”
• Propiedades de páginaFormato > Título y propiedades de página
25 de abril de 2006 29
Curso básico de creación de páginas web
Edición con Nvu (II)• Editar texto
cambiar color y tamañonegrita, cursiva y subrayadolistasjustificacióntipo de letra
• Estilos de párrafosTexto sin formatoPárrafoTítulos
25 de abril de 2006 30
Curso básico de creación de páginas web
Edición con Nvu (III)• Insertar imagen• Crear tabla• Crear marcador• Crear enlace
a través del menú insertarcon los botones
• Guardar página• Publicar página
configurar acceso al servidoradministrador de sitios
25 de abril de 2006 31
Curso básico de creación de páginas web
Web de ejemplo
• Página web personal• Estructura
Archivo índiceDocumento de docenciaDocumentos de investigaciónPágina de enlaces
• DiseñoCabecera, índice, cuerpo y pie de página
• Publicación• Navegación
25 de abril de 2006 32
Curso básico de creación de páginas web
Documentación
• Fuentes• Errores frecuentes• Algunos consejos
25 de abril de 2006 33
Curso básico de creación de páginas web
Fuentes en la red
• DocumentaciónWikipediaGoogleAyuda de Nvu
• Imágenes y multimedia• Software relacionado
25 de abril de 2006 34
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 archivosno utilizar mayúsculas, espacios ni letras poco usuales
25 de abril de 2006 35
Curso básico de creación de páginas web
Algunos consejos
• Organizar bien la informaciónen relación a los archivosen 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 36
Curso básico de creación de páginas web
Complementos
• Contadores• Buscador de Google en la web• Hojas de estilo CSS• Scripts• Otros