curso_basico java server faces

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


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



Introducción

• Internet• World Wide Web• Protocolos



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



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



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



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



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



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



Páginas web

• La importancia del contenido

• Diseño y presentación• Publicación



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



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



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



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



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



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



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

...



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.



Programación básica HTML

• Principios básicos de HTML

• Etiquetas básicas• Página web básica



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

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>

• permite añadir comentarios al código e invisibles al navegador



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



Software para crear páginas web

• Programas• Nvu• Uso y manejo de Nvu



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



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



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



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



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



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



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



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



Documentación

• Fuentes• Errores frecuentes• Algunos consejos



Fuentes en la red

• DocumentaciónWikipediaGoogleAyuda de Nvu

• Imágenes y multimedia• Software relacionado



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



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



Complementos

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

curso_basico java server faces

Documents