Curso Web Mantenimiento 2008

CursoMantenimiento Web(Páginas Web II)José Ramón Balsas Almagro ([email protected])

Juan Ruiz de Miras ([email protected])

Víctor Rivas Santos ([email protected])

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>

<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


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


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:

<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>

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" >

<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>

...



</div> 

</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.

<p>

<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>

</p>

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


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


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


Se seleccionan los datos que se quieren solicitar dentro de "Información de contacto"Se elige un identificador para el conjunto de elementos

65


Después de agregar cada elemento se vuelve a la ventana inicialSe siguen agregando de la misma manera todos los elementos del formulario

66


"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


"Cualquiera de varias opciones":Introducir etiquetas de cada opción posibleElegir cómo se presentarán

Se elige el identificador del elemento

68


69


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


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


Pulsar "Finalizar" para obtener la página web resultado:

Área del formulario

Elementos introducidos

Botones del formulario

72


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


E-mail para enviar los datos del formulario:nombre: “destinatario”valor:

Profesor: “USUARIO” enviará a [email protected]

Institución o Cursopas:“[email protected]”

Título que aparecerá tanto en la página de resultados como en el asunto del correo electrónico

nombre: “titulo”valor: “Formulario ...”

84


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


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


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


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


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


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


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

Curso Web Mantenimiento 2008

Documents

Transcript of Curso Web Mantenimiento 2008