Post on 22-Oct-2015
transcript
CursoMantenimiento Web(Páginas Web II)José Ramón Balsas Almagro (jrbalsas@ujaen.es)
Juan Ruiz de Miras (demiras@ujaen.es)
Víctor Rivas Santos (vrivas@ujaen.es)
2
Contenidos
1. Hojas de Estilos CSS2. El estilo de la UJA3. Capas en FrontPage4. Formularios Web5. Protección de directorios
3
Contenidos
1. Hojas de Estilos CSS2. El estilo de la UJA3. Capas en FrontPage4. Formularios Web5. Protección de directorios
4
Hojas de estilos CSSPermiten separar la información del formato con que se veráFacilidad para rediseñar el aspecto de un sitio webPermite homogeneizar un conjunto de páginas webCódigo más limpio y mantenimiento más fácilUn ejemplo.
http://www.csszengarden.com/tr/espanol/
5
Cómo crear una hoja de estiloArchivo > Nuevo … > Más plantillas de página…
Hoja de estilo vacía
6
Cómo crear una hoja de estiloArchivo > Nuevo … > Más plantillas de página…
Se crea la hoja, aunque aún no tiene NOMBRE, ni CONTENIDO, ni afecta a nuestras páginas web.
7
Inserción de estilos en la hojaFormato > Estilo
Seleccionamos el estilo que queremos modificar e indicamos el formato que deseamos que tenga:P.ej.: Formato > Fuente > Estilo > Negrita
8
Inserción de estilos en la hoja¡Una hoja CSS es un fichero de texto!
Nombre del estilo
Formato del estilo
9
Vinculación a páginas webEn primer lugar debemos guardar el fichero, p.ej.: misestilos.cssA continuación se Vincula a una o más páginas web:
1. Nos colocamos en el fichero html2. Formato > Vínculos de hoja de estilos
1. Agregamos una hoja de estilos
2. Seleccionamos el fichero deseado
10
El código HTML resultante
Vinculación a la hoja de estilos
No es necesario indicar nada especial en la etiqueta <P> para que el párrafo salga en negrita
11
Creación de nuevos estilosPermiten crear estilos personalizados que luego podrán modificarse fácilmenteProceso:1. Nos situamos en la hoja de estilos2. Formato > Estilo > Nuevo
2. Indicamos un nombre y si se aplica a párrafo o carácter
1. Pulsamos sobre “Nuevo…”para indicar que vamos a crear un estilo
12
Estilo de párrafo: “ejercicio”Una vez creado el estilo podemos seleccionarlo en la página web
Resultado al aplicar el estilo
El estilo en la hoja CSS
13
Estilo de cárácter: “inglés”En este caso es un estilo que se aplica a carácter
Resultado al aplicar el estilo
El estilo en la hoja CSS
14
Contenidos1. Hojas de Estilos CSS
2. El estilo de la UJA3. Capas en FrontPage4. Formularios Web5. Protección de directorios
15
Guía de estilo de la UJA
Se puede acceder a ella en:http://www.ujaen.es/sci/redes/web/guiaestilo/
Incluye:Normas de uso para cada tipo de usuarioFichero ZIP con las plantillas de páginas con y sin menú lateral izquierdo
16
Plantillas de páginas
Plantilla Básica:Cabecera con imagen de la Universidad de JaénPie de página con correo del responsable web y la fecha de última actualización del documento.
17
Plantillas de páginasPlantilla de menú
Cabecera imagen de la Universidad de JaénPie de página con la dirección de correo del responsable web y la fecha de última actualización del documento.Menú de botones a la izquierda“Marca de agua” del escudo de la Universidad de Jaén
18
Hoja de estilos
Tanto la plantilla básica como la plantilla de menú se basan en una HOJA DE ESTILOS (CSS) definida en
http://www.ujaen.es/estilo/ujaen.css
<html><head>
<title>Estilo de la web Universidad de Jaén</title>
<!-- REFERENCIA A LA HOJA DE ESTILO DE LA UNIVERSIDAD (FUENTES, TAMAÑOS, IMAGENES ...) --><link rel="stylesheet" type="text/css“ href="http://www.ujaen.es/estilo/ujaen.css">
</head>
19
Elementos de la hoja de estilo
En el fichero CSS vamos a encontrar dos cosas:Estilos de fuente, propiamente dichosZonas identificadas en la página. Dichas zonas se etiquetan con la marca <DIV> y se les añade un identificador:
<div id=“contenido”> <P>…</P>
</div>
20
Estilos de fuentes: body
Define las propiedades del documento:
• Tipo de fuente para el tipo de letra normal• Color de fondo• Color de la letra estándar• Alineación de los párrafos• Alineación vertical de la página• Estilo y tamaño de la letra estándar
body { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); text-align: justify; vertical-align: none; font-weight: normal; font-style: normal;font-size: 10pt;
}
21
Estilos de fuentes: párrafo
Define las propiedades del párrafo (aunque ya han sido definidas en el documento):
• Tipo de fuente para el tipo de letra normal• Tamaño de la letra de los párrafos• Color de la letra (nótese que #55555 es igual a rgb(85,85,85) )• Alineación de los párrafos
p {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10pt;color: #555555;text-align: justify;
}
22
Estilos de fuentes: cabeceras
Define las propiedades de las cabeceras:
• Tipo de fuente y color • Tamaños específicos para cada cabecera
h1, h2, h3, h4, h5, h6 {font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: normal;font-style: normal;color: rgb(27, 57, 48);
}
h1 { font-size: 24pt; }h2 { font-size: 18pt; }h3 { font-size: 14pt; }h4 { font-size: 12pt; }h5 { font-size: 10pt; }h6 { font-size: 8pt; }
23
Estilos de fuentes: enlaces
Define las siguientes propiedades:
• Color de un enlace en pantalla y efecto de subrayado• Color de un enlace ya visitado y efecto de subrayado• Color cuando el ratón pasa por encima , quitando el efecto de subrayado• Color cuando el usuario pincha en el enlace, poniéndolo en negrita y quitando el subrayado.
A:link {color: rgb(27, 57, 48); text-decoration: underline} A:visited {color: rgb(0, 102, 102); text-decoration: underline} A:hover {color: #ff6600; text-decoration: none} A:active {color: rgb(255, 102, 0); font-weight: bold; text-decoration: none}
24
Estilos de fuentes: listas
Define, para listas con viñetas y numeradas:• Tipos, tamaños y color de letra• Viñeta cuadrada para la lista de tipo <UL>
ul {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10pt;color: #666666;list-style-type: square;
}
ol {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10pt;color: #666666;
}
25
Estilos de fuentes: tablas
Define las siguientes propiedades• Tipos, tamaños y formato de letra• Alineación vertical de la tabla• Alineación con respecto al texto de la tabla.
table { font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10pt;font-weight: normal; font-style: normal;
vertical-align: none; text-align: none;
}
th { font-family: Arial, Arial, Helvetica; font-style: normal;
}
26
Estilos de fuentes: elementos de formulario
Definen algunos de los elementos (campos) que se pueden usar dentro de un formulario.
label {color: rgb(0, 0, 0);}
textarea { border-style:solid; ...
}
fieldset ,legend, select ,caption
button { border-top-style: solid; border-left-width: 1pt; ...
}
27
Estilos de fuentes: cómo usarlos
La ventaja de usar una hoja de estilos es que los distintos elementos se pueden usar directamente sin necesidad de añadir nada especial.Por ejemplo:
<ul><li>Esto es una lista con viñetas</li>
<ul>
28
Zonas definidas en la página web
La etiqueta <DIV ...> , permite definir bloques o zonas de contenidos en la página. Dentro de dicha zona, se puede incluir cualquier otro elemento como tablas, párrafos, formularios, etcétera.Mediante el uso de hojas de estilo se pueden dar propiedades a las zonas DIV de modo que se configure su comportamiento.
29
Ejemplos de uso de DIV
Zona con fondo de color verde:<html><body bgColor="#ffffff">Fondo blanco<div style="background-color: green;">Fondo verde</div>Fondo blanco</body></html>
30
Ejemplos de uso de DIV
Zona fija en una posición de la página:<html><body bgColor="#ffffff">
Fondo blanco
<div style="position: absolute; top: 20px; left: 20px;"><h1>Zona fija</h1></div>
Fondo blanco
</body></html>
31
Ejemplos de uso de DIV
Zona fija en una posición de la página, con fondo verde, recuadro rojo y bajo el resto de elementos de la página web
<html><body bgColor="#ffffff">
Fondo blanco
<div style="background-color: green; position: absolute; top: 15px; left: 20px; border: solid red; z-index: -1">
<h1>Zona fija</h1></div>
Fondo blanco
</body></html>
32
Zonas DIV en la plantilla
La hoja de estilos de la UJA define tres zonas (capas o ubicaciones) DIV identificadas:
body#menudiv#linksdiv#contenido
33
Zona DIV: body#menu
Diferencia el formato de la página menú del de la página básica.Añade a la página menú el fondo.Se define como:
Y se usa en la página web como:
body#menu { background: url('http://www.ujaen.es/estilo/imagenes/fondo_cabecera.jpg') no-repeat;
}
<body id=”menu”>
34
Zona DIV: div#links
Define el formato de los botones que aparecen en la izquierda.Definición de la capalinks:
Posición y tamaño en píxeles
div#links {position: absolute; top: 165px; left: 10; width: 110px; font: 11px Verdana, sans-serif;
}
35
Zona DIV: div#links
Definición de enlaces (<a>) dentro de links:
Formato de los cuadros para los enlaces
Imagen de fondo para el cuadro de los enlaces
div#links a {display: block; text-align: center; font: 11px Verdana, sans-serif; padding: 7px 0px; border-width: 0; margin: 0 0 2px;text-decoration: none; color: white;
}
div#links a { background: url('http://www.ujaen.es/estilo/imagenes/boton_normal_2.gif') no-repeat;background-position: 50% 50%; }
36
Zona DIV: div#links
Formato de enlace al situar el ratón
Imagen de fondo y propiedades para el cuadro de la página mostrada
Imagen de fondo y propiedades del enlace cuando se pasa sobre él
Formato de enlace de la página mostrada
37
Zona DIV: div#links
Utilización de enlaces en la página web:<!-- INCLUSION DEL MENU EN LA PAGINA -->
<div id="links"><a href="http://www.ujaen.es/" >Principal</a><a href="http://www.ujaen.es/">Organigrama</a><a href="http://www.ujaen.es/">Competencias</a> <a href="http://www.ujaen.es/">Secretariados</a><a href="http://www.ujaen.es/">Servicios</a><a href="http://www.ujaen.es/" id="default">Novedades</a><a href="http://www.ujaen.es/">Documentos</a><a href="http://www.ujaen.es/">Agenda</a><a href="http://www.ujaen.es/">Buscar</a><a href="http://www.ujaen.es/">Enlaces</a></div>
<!-- FIN DE LA INCLUSION DEL MENU EN LA PAGINA -->
38
Zona DIV: div#contenido
Define la zona que contiene la información de la página webSe define como:
El primero define la zona de contenidos en la página básicaEl segundo define dicha zona teniendo en cuenta que habrá un menú en la izquierda
div#contenido { position: absolute; top: 130px; left: 15px; right: 25px;}body#menu div#contenido { position: absolute; top: 130px; left: 180px; }
39
Zona DIV: div#contenidoDentro de la página web, se usa como sigue:
<div id="contenido" ><!-- INSERTAR AQUI EL CONTENIDO WEB DE LA PAGINA, SIN SOBREPASAR LOS LIMITES DE LA ETIQUETA /div -->
<h1>Título H1</h1><h2>Título H2</h2><h3>Título H3</h3><h4>Título H4</h4><h5>Título H5</h5><h6>Título H6</h6>
<p>Texto normal</p>
<p><b>Texto en negrita</b></p>
<!-- INCLUSION DEL PIE DE PAGINA -->...
<!-- FIN DEL PIE DE PAGINA -->
</div> <!-- Fin DIV ID="contenido" NO INSERTAR CONTENIDO HTML DESPUES DE ESTA ETIQUETA -->
<!-- EXCEPTO /BODY Y /HTML --></body></html>
40
Código JavaScript
La aparición del menú superior, con enlaces a las distintas secciones de la UJA se realiza mediante código Javascript
• Las opciones pueden ser modificadas (por el SCI) en http://www.ujaen.es/estilo/escrip.js afectando a todas las páginas de la UJA.
<!-- CABECERA FLOTANTE CON EL MENU DE LA WEB --><p>
<!-- ******** BEGIN ALLWEBMENUS CODE FOR escrip ******** --><img name='awmMenuPathImg-escrip' id='awmMenuPathImg-escrip'
src='http://www.ujaen.es/estilo/awmmenupath.gif' alt='' width="1" height="1"><script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='520'; awmAltUrl='';</script><script src='http://www.ujaen.es/estilo/escrip.js' language='JavaScript1.2' type='text/javascript'></script><script type='text/javascript'>awmBuildMenu();</script><!-- ******** END ALLWEBMENUS CODE FOR escrip ******** -->
</p><!-- FIN DE LA CABECERA FLOTANTE CON EL MENU DE LA WEB -->
41
Contenidos1. Hojas de Estilos CSS2. El estilo de la UJA
3. Capas en FrontPage4. Formularios Web5. Protección de directorios
42
Organizando del contenidoTablas
Los contenidos se organizan exclusivamente atendiendo a la ubicación en pantallaVisualización más lentaDisponibles en la mayoría de navegadores
CapasLos contenidos se organizan jerárquicamente atendiendo a las relaciones lógicas de la informaciónEl posicionamiento de los diferentes conjuntos de elementos se realiza mediante la asignación de estilosSon más rápidas de visualizar por el navegadorNo se dividen pero pueden anidarse
En general, las tablas se utilizan para mostrar información de tipo tabular o para realizar posicionamientos sencillos. Las capas para organizaciones más complejas donde se desea un control más preciso de la apariencia
43
Manejo de capas en FP
Son conocidas en FP como ubicaciones y dentro del código HTML aparecen como etiquetas DIVMediante cuadros de diálogo es posible acceder cómodamente a las propiedades de estilo más relevantesModo de empleo
Introducir los contenidos que formarán parte de las diferentes áreas de forma consecutivaSeleccionar cada una de las áreas definidas y crear una ubicación para cada una de ellasDefinir las propiedades de cada capa
44
Edición de una CapaCrear una capa a partir de un contenido existente
Seleccionar el párrafo o párrafos a partir de los cuales crear la ubicaciónSeleccionar: Formato UbicaciónDefinir las características de la capaPara editar características posteriormente:
Seleccionar ubicación: Formato UbicaciónSeleccionar ubicación: activar barra de acceso rápido de propiedades de ubicación
Eliminar una capa (dejando su contenido):Seleccionar capa, Formato UbicaciónSeleccionar ajuste ninguno y ubicación ningunoBorrar valores numéricos de dimensionesTambién es posible hacerlo eliminando directamente las etiquetas div correspondientes de la vista HTML
Cambiar dimensiones y posiciónEn vista normal colocar el ratón en los bordes de la capa para redimensionar o desplazar la capa (dependerá del tipo de capa)
45
Ejemplo de creación de capas1. Organizamos el
contenido en secciones
2. Creamos las capas
3. Modificamos las propiedades de cada capa
46
Características de las ubicacionesEstilo de Ajuste (float): izquierda (left), derecha (right), ninguno
Determina la colocación de la capa respecto a los bordes y de los contenidos situados a continuación respecto a la capa
izquierda: La capa se sitúa a la izquierda y el contenido posterior “flota” por la derechaNinguno: el contenido posterior se visualiza a continuación de la capa
Estilo de ubicación (position): absoluto (absolute), relativo (relative), ninguno
Determina la posición de la capa en el área del navegador:
Absoluto: la posición está determinada por las coordenadas de la esquina superior izquierda de la capa respecto a esquina superior izquierda del navegador. La capa puede superponerse a otros contenidos con los que comparta áreaRelativo: la posición se determina a partir de los contenidos que la precedenNinguno: la capa se coloca a continuación de los contenidos que la preceden
47
Coordenadas y dimensiones de las capasDependiendo del estilo de ajuste y del estilo de ubicación, la capa puede modificar su colocación y tamaño mediante las siguientes propiedades:
Izquierda, arriba (left, top)): posición de la esquina superior izquierda de la capa (solo ajuste absoluto y relativo)Ancho y Alto (width, height): tamaño de la capa. Puede especificarse en píxeles o en porcentaje del área de pantallaOrden Z (z-index): profundidad de los contenidos de la capa respecto a otros contenidos
48
Características avanzadas de las capas
Acceso:Propiedades de la etiqueta div en la vista html
Doble pulsación sobre etiqueta div (ctrl+{ ) en vista normal
49
Características avanzadas de las capas
Determinan algunas características del contenido de la capa y de su comportamientoPueden ser definidas:
Directamente (STYLE)Selector de clase (CLASS)Identificador de estilo (ID)
El listado de selectores de clase e identificadores solo aparecen si están definidos dentro de la página
50
Características de fuente
Definen efectos sobre el tipo de letra utilizado en la capa
51
MargenMargen
Características de párrafo
Alineación, sangría a primera línea, palabra e interlineado hacen referencia a propiedades del texto dentro de la capaLas propiedades de sangría y espaciado hacen referencia al espacio de la capa respecto al espacio que la rodea:
Sangría antes del texto (margin-left)Sangría después del texto (margin-right)Espaciado antes de (margin-top)Espaciado después de (margin-right) Capa
52
Características del borde
La configuración del borde define el efecto del contorno de la capaEl relleno (padding) hace referencia a la separación del contenido de la capa respecto del borde
MargenMargen
Relleno
Contenido de la capaBorde
53
Características de sombreado
Podemos definir el color de fondo de la capa y el color del textoTambién es posible definir una imagen de fondo(background-image) para la capa y su comportamiento
Posición vertical y horizontal de la imagen dentro de la capaModo de repetir la imagen dentro del área de la capaDatos adjuntos: Define si la imagen permanece fija en el navegador o se desplaza con la capa
54
Otras características de las capas
Estilo de las listas que aparecen dentro de la capaAcceso a cuadro de diálogo de ubicación de la capaOtras propiedades deben ser definidas mediante selectores de estiloEs preferible definir todas las características de una capa como un selector de estilo:
ClaseIdentificador
Un selector definido puede asociarse a varias capasLos selectores se definen en la vista de estilos de página o en una hoja de estilos vinculada a la página
55
Contenidos1. Hojas de Estilos CSS2. El estilo de la UJA3. Capas en FrontPage
4. Formularios Web5. Protección de directorios
56
Formularios WebSolicita información del visitante de la web de manera visual:
cuadros de textobotones, ...
Los datos recogidos se transfieren al servidor web para ser procesadosEs necesario algún programa o script (CGI) en el servidor web para su procesamiento:
procesa los datos recogidos en el formulariodevuelve una página web con el resultado del procesamiento
57
Formularios Web1. Creación de formularios desde FrontPage
1. Asistentes de FrontPage2. Edición manual del formulario
2. Utilización de CGI de la UJA1. Llamada al script2. Configuración del script
58
Configuración compatibilidad FrontPage
Herramientas Opciones de página Compatibilidad
59
Elementos disponibles en un formulario
Insertar Formulario
Formulario: define el área donde se insertan los elementos del formulario. Por defecto crea los botones "enviar" y "Restablecer"Cuadro de texto: permite introducir texto cortoÁrea de texto: permite introducir texto de más de una líneaCarga de archivo: permite elegir un fichero del árbol de directoriosCasilla de verificación: muestra varias opciones de las que se pueden elegir variasBotón de opción: muestra varias opciones de las que sólo se puede elegir unaCuadro desplegable: muestra una lista de opciones de las que se puede elegir una (por defecto) o varias
60
Asistentes de FrontPage para creación de formularios
Archivo Nuevo Página o web Plantillas de página:
Asistente para páginas de formularioscreación interactiva de un formulario general
Formulario de comentarios:formulario prediseñado para obtener un comentario u opinión del visitante
Registro de usuarios:página con un formulario prediseñado para solicitar los datos de un registro de nuevo usuario
Formulario de confirmación:página de confirmación de los datos recibidos de un formulario (formulario de comentarios o de registro de usuarios)sólo válido para servidores web con la extensiones de servidor de FrontPage instaladas (no en el servidor de la UJA)
61
Asistente para páginas de formularios
Archivo Nuevo Página o web Plantillas de página Asistente para páginas de formularios:
Se eligen y configuran interactivamente los elementos del formularioSe genera una página nueva con el formulario configuradoSe pueden añadir, eliminar o modificar los elementos creados con el asistente
62
Asistente para páginas de formularios
Se van agregando los elementos que aparecerán en el formularioDespués de añadir y configurar cada elemento se vuelve a esta ventanaCuando ya se han añadido todos los elementos se pulsa "siguiente"
Pulsar "agregar" para introducir un nuevo elemento al formulario
63
Asistente para páginas de formularios
Se elige:tipo de elemento a introducirtexto que aparecerá junto al elemento
"Información de contacto":conjunto de cuadros de texto para solicitar los datos típicos de una persona
64
Asistente para páginas de formularios
Se seleccionan los datos que se quieren solicitar dentro de "Información de contacto"Se elige un identificador para el conjunto de elementos
65
Asistente para páginas de formularios
Después de agregar cada elemento se vuelve a la ventana inicialSe siguen agregando de la misma manera todos los elementos del formulario
66
Asistente para páginas de formularios
"Una de varias opciones":Introducir etiquetas de cada opción posibleElegir elemento a utilizar: cuadro desplegable, botones de acción o lista
Se elige el identificador del elemento
67
Asistente para páginas de formularios
"Cualquiera de varias opciones":Introducir etiquetas de cada opción posibleElegir cómo se presentarán
Se elige el identificador del elemento
68
Asistente para páginas de formularios
69
Asistente para páginas de formularios
Tras introducir todos los elementos se pulsa "Siguiente" para establecer las Opciones de Presentación
Organización de los elementosIncluir delante del formulario una tabla de contenidos:
índiceenlaces internos
Alineación de los elementos
70
Asistente para páginas de formularios
Pulsar "Siguiente" para establecer las Opciones de Salida
Se indica el procesamiento que debe hacer el servidor web con los datos introducidos en el formularioSi el servidor web no tiene las extensiones para FrontPage utilizar script CGI
71
Asistente para páginas de formularios
Pulsar "Finalizar" para obtener la página web resultado:
Área del formulario
Elementos introducidos
Botones del formulario
72
Asistente para páginas de formularios
Establecer acción a realizar con los datos del formulario:botón derecho sobre el formulario Propiedades de formulario...
Si no hay extensiones servidor para FrontPage: “Enviar a otro: Secuencia de comandos...”Para establecer la acción se pulsa botón “Opciones”:
Acción: programa o script que tratará los datos del formularioMétodo:
GET: los datos del formulario se envían en la URLPOST: los datos del formulario se envían directamente al servidor
Codificación: forma de codificar los información
73
Edición manual del formularioInsertar y configurar un nuevo elemento en un formulario existente:
Situar el cursor en la posición deseada para el nuevo elementoInsertar Formulario ...Botón derecho Propiedades de campo de formulario
74
Edición manual del formularioCrear un formulario vacío:
Situar el cursor en la posición deseada para el formularioInsertar Formulario FormularioAbrir hueco con retornos de carroInsertar nuevos elementos como anteriormente
75
Edición manual del formularioConfiguración de Cuadro de texto:Propiedades:
76
Edición manual del formularioConfiguración de Botón de opción:Propiedades:
77
Edición manual del formularioConfiguración de Casilla de Verificación:Propiedades:
78
Edición manual del formularioConfiguración de Cuadro Desplegable:Propiedades:
79
Edición manual del formularioConfiguración de Cuadro Desplegable:Propiedades:
80
CGI de la UJAFormularios en la UJA:
http://www.ujaen.es/sci/redes/web/fwuja.htmlEl servidor web de la UJA permite la ejecución del script CGI:
http://www.ujaen.es/cgi-bin/fwuja.cgiEste script permite:
enviar automáticamente los datos del formulario a una dirección de correomostrar una página de resultado con los datos enviadoscontrol de campos obligatorios
81
CGI de la UJALlamada al script:
Propiedades de formulario opciones AcciónProfesor: http://www4.ujaen.es/cgi-bin/fwuja.cgiInstitución: http://www.ujaen.es/cgi-bin/fwuja.cgiCursopas: http://www.ujaen.es/cgi-bin/fwuja.cgi
Propiedades de formulario opciones Tipo de codificación: en blanco
82
CGI de la UJACampos ocultos para configurar el script:
La configuración del script se realiza mediante campos ocultosPropiedades de formulario Avanzadas...
83
CGI de la UJACampos ocultos para configurar el script:
E-mail para enviar los datos del formulario:nombre: “destinatario”valor:
Profesor: “USUARIO” enviará a USUARIO@ujaen.es
Institución o Cursopas:“USUARIO@ujaen.es”
Título que aparecerá tanto en la página de resultados como en el asunto del correo electrónico
nombre: “titulo”valor: “Formulario ...”
84
CGI de la UJACampos ocultos para configurar el script:
Enlace a la página inicial que aparecerá en la página de resultados:
nombre: “volver_url”valor: http://...
Título del enlace a la página inicial:nombre: “volver_titulo”valor: “Página Inicial”
O se ponen los dos campos o ninguno
85
CGI de la UJA
86
CGI de la UJACampos ocultos para configurar el script:
Campos obligatorios que el script controlará que se han introducido:
nombre: “obligatorio”valor: “campo1,campo2,...”
87
CGI de la UJA
88
Contenidos1. Hojas de Estilos CSS2. El estilo de la UJA3. Capas en FrontPage4. Formularios Web
5. Protección de directorios
89
Protección de Directorios
El servidor web permite proteger el acceso a los contenidos de los directorios mediante:
Control del cliente:por dirección IPpor dominio
Validación usuarios/grupos:usuarios individualesgrupos de usuarios
90
Protección de DirectoriosEs necesario editar y transferir al servidor los ficheros de texto:
.htaccess:fichero de configuración de la protección del directoriouno por cada directorio que se quiera protegerse sitúa en el directorio a protegernecesario para:
control del clientevalidación de usuarios/grupos
.htpasswd:fichero que almacena el password encriptado de cada usuario permitidopuede ser utilizado por varios ficheros .htaccessse sitúa en cualquier directorio del webnecesario para:
validación de usuarios/grupos.htgroup:
fichero para organizar a los usuarios en grupospuede ser utilizado por varios ficheros .htaccessse sitúa en cualquier directorio del webnecesario para:
validación de grupos
91
Asistente del SCI de la UJAhttp://www.ujaen.es/sci/redes/web/protegerdirGenera interactivamente los ficheros .htaccess y .htpasswd:
Control del cliente:por dirección IP: sólo “allow”por dominio: sólo “allow” y dominios de 2º nivel
Validación usuarios/grupos:usuarios individuales: sólo “require valid-user”grupos de usuarios: no contemplado
92
Control del clientePartimos del asistente de la UJA
93
Control del clienteIntroducir ruta del directorio a proteger:
Profesores: /vhome/USUARIO/public_html/DIRECTORIOInstitucional: /web/www/SERVICIO/DIRECTORIOCursopas: /home/cursopas/public_html/USUARIO/DIRECTORIO
94
Control del clienteElegir protección mediante revisión de la IP o dominio
95
Control del clienteNúmero de IP’s o dominios a controlar
96
Control del clienteIntroducir IP’s y dominios con acceso permitido
• IP individual• Rango de IP’s• Dominio
97
Control del clientePinchar para obtener el fichero .htaccess generado
98
Control del clienteGuardar el fichero .htaccess generadoTransferir el fichero al directorio que se quiere proteger
99
Control del clienteLimitaciones del asistente de la UJA:
permite establecer los accesos permitidos (“allow from”), perono permite establecer los accesos denegados (“deny from”)
no se pueden establecer dominios de primer nivel: “es”, “com”, ...
100
Control del clienteEdición manual del fichero .htaccess:
Orden “allow from direccion”:Permite el acceso a direccion
Orden “deny from direccion”:Rechazar el acceso desde direccion
direccion puede ser:All: “deny from all” rechaza el acceso a cualquier clienteDirección IP: “allow from 150.214.178.11”Rango IP: “deny from 150.214.170” rechaza todos las direcciones 150.214.170.xxxDominio: “allow from ujaen.es” permite el acceso a todos los clientes pertenecientes al dominio ujaen.es
101
Control del clienteEdición manual del fichero .htaccess:
Orden “order”:Si un fichero .htaccess sólo contiene órdenes “allow”, verdaderamente se estará permitiendo el acceso a cualquier clienteEs necesario combinar correctamente las órdenes “allow” y “deny”“order deny,allow”:
Se deniegan todos los accesos especificados con órdenes “deny”menos los establecidos en órdenes “allow”
“order allow,deny”:Se permiten todos los accesos especificados con órdenes “allow”menos los establecidos en órdenes “deny”
102
Control del clienteEdición manual del fichero .htaccess:
Orden “order”:
order deny,allowdeny from allallow from ujaen.es
order allow,denydeny from allallow from ujaen.es
Deniega todos los accesos menos los procedentes del dominio ujaen.es
Permite los accesos procedentes del dominio ujaen.es menos “todos”, es decir, no permite ningún acceso
103
Validación usuarios/gruposPartimos de nuevo del asistente de la UJA
104
Validación usuarios/gruposIntroducir ruta donde se almacenará el fichero de claves .htpasswd:
Profesores: /vhome/USUARIO/public_html/DIRECTORIOInstitucional: /web/www/SERVICIO/DIRECTORIOCursopas: /home/cursopas/public_html/USUARIO/DIRECTORIO
105
Validación usuarios/gruposElegir introducción de usuario y clave
106
Validación usuarios/gruposIndicar el número de usuarios
107
Validación usuarios/gruposIntroducir nombres de usuarios y sus contraseñas
108
Validación usuarios/gruposPinchar para obtener los ficheros .htaccess y .htpasswd generados
109
Validación usuarios/gruposGuardar los ficheros .htaccess y .htpasswd generadosTransferir el fichero .htaccess al directorio que se quiere protegerTransferir el fichero .htpasswd al directorio que figura en el fichero .htaccess
110
Validación usuarios/gruposSi se quiere añadir nuevos usuarios/claves al fichero .htpasswd:
http://www.ujaen.es/sci/redes/web/protegerdir/coneditordetexto.html
111
Validación usuarios/gruposIntroducir usuario y clave y pulsar botón para encriptarCopiar y pegar la línea obtenida al fichero .htpasswd
112
Validación usuarios/grupos
Limitaciones del asistente de la UJA:permite la entrada a cualquier usuario correctamente identificado (“require valid-user”), peroNO permite seleccionar, de entre todos los usuarios presentes en el fichero de claves, cuáles tienen el acceso permitido (“requireuser usuario1 usuario2 …”)
NO se pueden generar ficheros de grupos de usuarios (“AuthGroupFile /…/.group”)NO se puede permitir el acceso a grupos de usuarios (“requiregroup grupo1 grupo2 …”)
113
Validación usuarios/grupos
Edición manual del fichero .htaccess:Orden “require user usuario1 usuario2 …”:
Sólo los usuarios especificados, si se identifican correctamente, tienen el acceso permitidoEl resto de usuarios, aunque aparezcan en el fichero .htpasswd y se identifiquen correctamente, no podrán acceder
Utilidad:Un único fichero .htpasswd con todos los posibles usuarios del sitio webVarios directorios protegidos, cada uno con su propio fichero .htaccess:
Referencia al mismo fichero .htpasswdSólo da permisos a determinados usuarios
114
Validación usuarios/gruposDefinición de grupos de usuarios
Se almacenan en un fichero .htgroupDentro del fichero cada grupo se define como:
“nombre_grupo: usuario1 usuario2 …”Ejemplo fichero .htgroup: alumnos: sergio anaprofesores: montse luis
La localización del fichero de grupos se especifica en el fichero .htaccess:
“AuthGroupFile /…./.htgroup”La restricción por grupos se realiza en el fichero .htaccess:
“require group nombre_grupo”Ejemplo:
“require group alumnos”Un mismo fichero .htaccess puede combinar restricciones por grupo y por usuario
115
Validación usuarios/grupos
La orden “satisfy all/any”:Permite decidir cómo combinar en un mismo fichero .htaccess las restricciones por control del cliente y la validación de usuarios/grupos“satisfy all”
Para acceder se tiene que cumplir tanto la identificación por dirección como por usuario
“satisfy any”Para acceder se tiene que cumplir o bien la identificación por dirección o bien por usuario
116
Validación usuarios/grupos
La orden “satisfy all/any”:Ejemplo .htaccess:AuthType BasicAuthName "Zona Restringida"AuthUserFile /.../.htpasswdAuthGroupFile /.../.htgroupsRequire group profesores alumnosOrder deny,allowDeny from allAllow from ujaen.esSatisfy any
Fuera de la UJA será necesario identificarse como profesor o alumnoDesde dentro de la UJA no será necesario identificarse