Prof. Garca Sebastin A.

La world wide web - www

La Web es una red de recursos de informacin. La Web se basa en tres pilares: El concepto de URL/URI El protocolo HTTP El lenguaje HTML

Tipos de informacin (Dinmica)

Una URI -Uniform Resource Identifier- es un mecanismo por el cual se identifica todo recurso accesible en la web. Una URL -Uniform Resource Locator- permite ubicar un recurso a travs de su ubicacin. Tpicamente una URL se compone de: El esquema o protocolo utilizado para acceder al recurso El nombre de dominio de la mquina que almacena el recurso El nombre del recurso mismo dado como un camino dentro de la mquina (recurso)

protocolo://dominio/recurso

URL encoding

Las URLs se transmiten en ASCII. Algunos caracteres deben convertirse. Ejemplos: /Clase 1/EjemplosClase1/Ejemplo con enlaces.html ../Clase%201/EjemplosClase1/Ejemplo%20con%20enlaces.html

Protocolo HTTP

Una transaccin HTTP consta de 4 pasos: inicio conexin - solicitud - respuesta - cierre conexin Protocolo sin estado Clientes web: Firefox, IE, Chrome, Opera, .... Servidores web: Apache, IIS, Nginx, etc, ..

Protocolo HTTP

Algunos tipos de mensajes Solicitudes GET: retorna la informacin que est identificada por la URI-solicitada. HEAD: retorna la informacin del header del servidor. POST: en general se utiliza para la entrega o envo de formularios que son completados en forma interactiva por un usuario. Esta es la nica solicitud que enva un cuerpo en el mensaje. Respuestas El servidor retorna un cdigo que indica el estado de la solicitud (por ejemplo:200 y el recurso)

Protocolo HTTP

Diferencias entre GET y POST

Mensaje HTTP con GET: GET /index.php?nombre=pepe&seccion=1 HTTP/1.0 Host: www.servidor.com User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso-8 Mensaje HTTP con POST:

POST /index.php HTTP/1.0 Host: www.servidor.com User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso-8859-1 nombre=pepe&seccion=1

Preguntas ?

La WEB

Arquitectura

Definicin de URL/URI

Protocolo HTTP

Lenguaje HTML

El lenguaje HTTP

HTML - HyperText Markup Language- especifica el formato de las pginas web, separando el contenido de las pginas de su formato de presentacin. Fue creado en los laboratorios CERN por Tim Berners-Lee. Define un conjunto de smbolos (etiquetas o tags) que especifican la estructura lgica de un documento y de todos sus componentes. Es independiente de la plataforma. Su cdigo es interpretado por los clientes web.

Formato general

Indica el tipo de documento HTML o XHTML para validar la sintaxis

Inicio del documento

Encabezado

Cuerpo

Fin del documento

HTML Sintaxis General

La clusula DOCTYPE: Primera lnea del documento Indica la forma en que se validar el documento Ejemplos:

Elementos y etiquetas

Una etiqueta puede tener asociada una etiqueta de cierre: ... Hay elementos vacos: Pueden tener uno o ms atributos:

El encabezado

Delimitado por y Algunas componentes... : Corresponde al ttulo de la pgina. : Se usa para incluir las especificaciones de estilo para los elementos de la pgina. : Indica una relacin entre el documento y algn otro objeto de la WEB. : Meta-informacin sobre el documento

El encabezado

: Este elemento es usado para identificar meta-informacin sobre el documento, como por ejemplo el autor o palabras claves que podrn ser luego utilizadas por buscadores para mejorar la calidad de los resultados en las bsquedas. Ejemplo:

El encabezado

Campos meta (cont.) Robots de bsquedas... O http-equiv permite predeterminar el dilogo entre cliente y servidor

El encabezado

El documento tiene una estructura y una forma de visualizacin Estructura: usando las etiquetas HTML ms apropiadas. Visualizacin: usando hojas de estilo http://www.csszengarden.com/tr/espanol

El cuerpo

Delimitado por y Encabezados: 6 encabezados definidos con un estilo predefinido: ..,.., ...., .. Prrafos: Se delimitan con ... Comentarios: Imgenes:

El cuerpo

Hiperenlaces Forma General: texto Rutas absolutas y relativas .. .. ..

Entidades HTLM

Se las utiliza para representar smbolos especiales que nos son representados de la misma manera en todos los set de caracteres: smbolos matemticos, caracteres griegos, letras acentuadas, etc. Forma general: &nombreEntidad; Ejemplos: & (&) - () - < () -" () ... () - () -

Otros elementos bsicos

Listas: ... - ... Cada tem: ..

Otros elementos bsicos

Se utiliza notacin RGB. Forma general: #RRGGBB

Otros elementos bsicos Tablas: ...

Enc1 Celda 1

Formularios

: Permite definir y agrupar una serie de campos que forman el formulario. Algunos atributos... action: Especifica la URI donde ser enviado el formulario. method: Especifica la forma en que se transferirn los datos: get y post

..

Formularios

Si en el formulario se definen campos nombre y seccion, por ejemplo

Mensaje HTTP con GET: GET /index.php?nombre=pepe&seccion=1 HTTP/1.0 Host: www.servidor.com User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso-8

Mensaje HTTP con POST: POST /index.php HTTP/1.0 Host: www.servidor.com User-Agent: Mozilla/4.5 [en] Accept: image/gif, image/jpeg, text/html Accept-language: en Accept-Charset: iso-8859-1 nombre=pepe&seccion=1

GET: Debera usarse cuando el formulario no tiene efectos secundarios, por ejemplo en una bsqueda.

POST: Debera usarse en formularios que modifican una base de datos o la suscripcin a un servicio.

Formularios

Elementos input: Presenta un atributo que indica el tipo de elemento de entrada: Campos de texto: type=text: type=password: type=hidden: Casilla de seleccin: type =checkbox type =radio Botones: type =reset type =submit type =button

Formularios

Elemento Elementos y

Formularios

Elemento Algunas opciones...

rows: Nmero de lneas de texto del rea. cols: Nmero de columnas de texto del rea.

Elementos y Algunas opciones de select ...

multiple: Permite seleccionar ms de un tem del men. size: Especifica el nmero de tems visibles en la lista de opciones.

Algunas opciones de option ... value: Valor de la opcin a ser enviado al servidor. selected: Especifica qu opcin es seleccionada por defecto. Si no se especifica se selecciona la primer opcin