Documentos de Académico
Documentos de Profesional
Documentos de Cultura
CONCEPTOS GENERALES
1. Actores de la web
El modelo Client/Servidor.
2. Más generalidades
URL: Uniform Resource Locator.
[protocolo://][dirección][:puerto][/ruta]
donde protocolo:
además, donde:
4. Peticiones
Las peticiones incluyen 3 grupos de informaciones.
1. Método solicitado:
a. GET: solicita el documento especificado.
b. HEAD: solicita la información de cabecera del documento.
c. POST: solicita que el servidor acepte el documento especificado como un
ejecutable y le pase la información.
d. PUT: sustituye los contenidos de un documento del servidor con los datos
aportados por el cliente.
2. Cabecera de petición:
a. ACCEPT: tipos de fichero que puede aceptar el cliente.
b. AUTHORIZATION: empleado para identificarse a través de un servidor de
autorizaciones. Incluyen el nombre de usuario y su clave.
c. USER-AGENT: nombre y versión del navegador del cliente.
d. REFERER: URL del último documento visitado por el usuario.
3. Datos solicitados: Si el cliente ha realizado una operación POST, puede enviar los
datos tras la cabecera de petición y una línea en blanco adicional.
a. Si el cliente emite una petición GET o HEAD esperará la respuesta del servidor.
5. Respuestas
1. Código de estado: Es un número de 3 dígitos, y sus valores se dividen en 4 categorías:
a. 200-299 indica que no ha habido problemas.
b. 300-399 indica que no se ha podido acceder al URL porque el documento ha
cambiado de ubicación.
c. 400-499 indican un error del cliente.
d. 500 o superior indica que el servidor no ha podido realizar la operación
solicitada o se ha producido un error.
Los códigos de estados más habituales son:
3. Datos de respuesta.
a. El servidor envía una línea en blanco tras el último campo de la cabecera y a
continuación coloca los datos del documento.
b. Si el cliente sólo ha solicitado información de cabecera, el servidor finaliza la
conexión.
I. Nivel de presentación.
a. Lo que el cliente observa a través de una aplicación, como un navegador que
permite mostrar e interactuar con páginas HTML.
II. Nivel de lógica. (Lo que estudiamos en DEW)
a. Se ejecuta en el servidor de web, respondiendo a solicitudes de los clientes y
accediendo a los datos internos de la aplicación o servicio.
b. Pueden ser:
i. orientadas a la web (p.ej. creando objetos MIME)
ii. orientadas a la lógica de negocio (p.ej. manteniendo y actualizando
información de estado).
III. Nivel de datos.
a. Representado por el sistema de información que consta de un conjunto de
bases de datos con la lógica asociada.
7. El estándar CGI
• Un CGI puede ser desarrollado en cualquier lenguaje con soporte en el servidor.
• Condicionados por la plataforma tecnológica.
• Requisitos de un lenguaje para CGIs:
1. Acceso a variables de entorno: el intercambio de información entre el cliente,
servidor y CGI se realiza mediante esto del protocolo HTTP:
▪ QUERY_STRING: Es la cadena de entrada del CGI cuando se utiliza el
método GET.
▪ CONTENT_TYPE: Tipo MIME de los datos enviados al CGI mediante
POST.
▪ PATH_INFO: Información adicional de la ruta tal y como llega el
servidor en el URL.
▪ CONTENT_LENGTH: Longitud en bytes de los datos enviados al CGI.
▪ REQUEST_METHOD: Método (GET/POST) de invocación del CGI.
▪ SERVER_NAME: Nombre del servidor.
2. Manejo de cadenas (formulario/HTML):
▪ POST: El cliente envía información al servidor en el cuerpo del mensaje
HTTP. Debe emplease cuando la aplicación produce efectos laterales
que modifican o añaden información al servidor.
▪ GET: El cliente especifica un URL y recibe información del servidor. El
cliente no necesita pasar gran información al servidor, ésta se incluye
en la cabecera del mensaje HTTP.
• Escenario de activación CGI.
1. Situación inicial: El cliente solicita la invocación de CGI, involuntaria (envío de
información de cabecera) o explícita (formulario).
2. El cliente pulsa el botón de tipo SUBMIT en el formulario.
3. El servidor recibe el mensaje de petición y pone en marcha CGI. Importante:
Si es GET, la información del formulario se define en QUERY_STRING; Si es
POST, la información se coloca en la entrada estándar del CGI.
4. Ejecución del CGI: El CGI accede a las variables de entorno. Comprueba el
funcionamiento según GET o POST.
▪ Se construye un objeto MIME que se enviará al cliente.
▪ La primera escritura deberá anunciar el tipo de objeto: Content-type:
tipo/subtipo.
▪ Después línea en blanco, y el objeto a devolver.
5. El servidor vuelve al trabajo: Devuelve el control al servidor, que añade
respuesta una cabecera indicando su tamaño.
6. El cliente recibe la respuesta.
• Carencias del CGI.
o No mantienen el estado automáticamente: necesidad de sesiones.
o Se cargan tantas veces como peticiones del servicio existentes de los clientes:
rendimiento mejorable.
8. Plataformas tecnológicas
I. Plataforma JavaEE.
a. Realizar desarrollos en Java apoyados en JavaEE.
b. Esta combinación tecnológica (servlets) se encuentra a caballo entre
CGIs y API del servidor:
i. Ventajas de programación bajo un API.
ii. Enriquecimiento mediante clases que agregan funcionalidad y
propiedades inexistentes en un CGI.
iii. Independencia.
II. Plataformas basadas en PHP.
a. LAMP: Linux + APACHE + MySQL + PHP.
b. Plataforma de carácter libre y madurez.
c. Lenguaje de scripting ligero y sencillo, con bibliotecas de todo tipo.
III. Plataforma ASP.NET.
a. El elemento común es el SO Windows.
i. Ésta gira en torno a Microsoft, IIS y SGBD SQL Server.
TEMA 2. HTML5
1. Estructura de una página web
• Comentarios <!-- Esto es un comentario -->
• Preámbulo:
o XHTML 1.1
▪ <?xml version=”1.0” encoding=”UTF-8” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<html xmlns=https://www.w3.org/1999/xhtml>
o HTML 5
▪ <!DOCTYPE html>
<html lang=”es-es”>
• Cuerpo <body> </body>. Está la mayoría del contenido HTML que se visualiza.
• Texto básico:
o Entidades:
Carácter Número entidad Nombre entidad
“ " "
& & &
< < <
> > >
Á á Á
Í é í
Ñ ñ ñ
<espacio>  
• Texto formateado:
o Negrita <b> o Subíndice <sub>
o Itálica <i> o Grande <big>
o Subrayado <u> o Pequeño <small>
o Tachado <s> o Raya horizontal <hr />
o Superíndice <sup> o Teletipo <tt>
• Texto semántico:
o Énfasis: <em>, <strong>
o Citas: <blockquote>, <cite>, <q>
o Abreviaciones: <abbr>, <acronym>, <dfn>
o Código fuente: <code>, <kbd>, <var>, <samp>
o Direcciones: <address>
o Edición: <ins>, <del>
• Listas:
o Listas no ordenadas: <ul> <li> Aquí va algo </li> </ul>
o Listas ordenadas: <ol> <li> Aquí va otro </li> </ol>
o Listas de definición de términos:
<dl>
<dt> Primero </dt> #título en primer nivel
<dd> Lo que quieras </dd> #dato en segundo nivel
<dt> Segundo </dt>
<dd> Lo que sea </dd>
</dl>
• Multimedia:
o Imagen: <img src=”…” alt=”…” />
Posible añadir height, width dimesiones en píxeles.
Permite arropar cualquier construcción.
<figure id=”…” > … <figcaption> leyenda (subtítulo) </figcaption> </figure>.
Renderizado local: reserva espacio para gráficos por scripting.
<canvas> </canvas>.
Audio: con posibilidad de control.
<audio controls=”controls”>
<source src=”…” type=”audio/mpeg” />
</audio>
Vídeo: muy similar al audio pero con dimensiones
<video width=”…” height=”…” controls=”controls”> … </video>
TEMA 3. CSS
1. Reglas Declaration
h1 {color:blue; font-size;12px;}
Selector
Property Value
• Selectores:
o Universal * {}. Todos los elementos del documento.
o Tipo o tag elem {}. Todos los elementos del mismo tipo elem.
o ID #nombreID {}. Elementos con id único. Selecciona el elemento con el id
especificado.
o Clase .nombreClase {}. Varios elementos pueden coincidir. Selecciona todos los
elementos de la misma clase.
o Pseudo-clases :nombrePseudo-clase {}. Eventos dinámicos, cambio de estado o
situación no representable de otra manera.
▪ Sobre enlaces:
Nombre Ejemplo Qué selecciona
:link a:link Todos los links no visitados
:visited a:visited Todos los links visitados
:active a:active Todos los links activos(cuando se hace click sobre ellos)
:hover a:hover Todos los links que tienen el ratón por encima
▪ Sobre otros elementos:
• Combinación de selectores:
o Selector de tipo con clase/ID:
p#aviso { color:blue; } <p id=”aviso”> … </p>
h1.rojo { color:red; } <h1 class=”rojo”> … </h1>
o Selectores de clase encadenados:
p.important.code {} <p class=”important code”> … </p>
o Aplicar lo misma a varios selectores:
p, .aviso, p#rojo { … }
• Propiedades: valores
o Palabras claves (keywords): Identificadores predefinidos en CSS. Varios,
separados por espacios.
o Strings: Definir contenido HTML, rutas de fichero, fuentes…
o Medidas absolutas: No dependen de otras medidas o del entorno (resolución,
tamaño, etc). Para documentos físicos (pulgadas, cm, mm, pt).
o Medidas relativas: Sí dependen del entorno, en cada plataforma se visualiza
diferente. Para layouts en pantalla (px, %, em, ex).
o Números: Precedidos por + ó -.
o Colores: Colores específicos o RGB: rgb(128,128,128) – rgb(50%,50%,50%).
o URLs: Para incluir hojas de estilo o imágenes (background).
• Herencia y cascada:
o Si no se ha definido explícitamente ninguna regla: HERENCIA.
▪ Las propiedades de un padre se propagan a los hijos.
o Si se puede aplicar más de una regla: CASCADA.
▪ Determina cuál es el valor de una propiedad cuando varias
declaraciones entran en conflicto.
• Modelo de cajas: Margin, border, padding y content.
TEMA 4. JAVASCRIPT Y DOM
1. JavaScript
• Externo: <script type=”text/javascript” src=”fichero.js”> </script>
• Empotrado: <script type=”text/javascript”> … código … </script>
• Inline: como valor del atributo de un evento HTML.
2. Usos habituales
• Mejora del GUI.
• Animación.
• Reducir la carga del servidor.
• Mini-aplicaciones.
• Aplicaciones asíncronas.
• Muchos de los usos requieren DHTML (JS + HTML + CSS + DOM).
3. Generalidades
var age = parseInt(prompt(“…”, 29)); Pide una entrada por teclado al usuario; el segundo valor
(29) se muestra por defecto.
5. Jerarquía de objetos
Document representa el HTML actual. Todos los aspectos del documento a los que se tiene
acceso mediante JS y DOM nivel 0 se representan como propiedades del objeto document.
P.ej. document.forms[1] referencia al segundo formulario definido en el doc. actual.
document.forms[0].elements[0].value = …
<body onload=”CalcRemaining(document.form[0])”>
<input type=”button” value=”Re-display clock” onclick=”CalcRemaining(this.form)”>
function CalcRemaining(theForm) {
…
theForm.txtDays.value = days;