Introdución a la web: HTTP, URL y HTML

Arquitectura de la
Web :
HTTP, URL y HTML
Joaquín Salvachúa : jsalvachua@dit.upm.es

IP

• Lo de debajo de la alfombra.

• Permite conectar un ordenador a otro (Tubería).

• Paquetes que circulan por donde deban.

Direcciones IP

• 127.0.0.1 : 4 bytes.

• DNS : conversión a dominios www.dit.upm.es

• Suponemos que funciona.

TCP

• Ensamblador de paquetes.

• Permite tener una tubería de datos.

• Permite comunicar datos de un lado a otro.

Arquitectura básica

• Componentes:

• HTTP : Transporte

• HTML : Formato

• URL (URI) : Dirección

Principios de
Diseño
• Servidor + clientes

• Protocolo de comunicación HTTP.

Clientes <== HTTP == < Servidor

• Formato de los documentos HTML.

Presentador <= HTML == < cliente

Quiero algo

• Dime que quieres.

• Nombre para cada cosa : URL / URI

URI / URL
• Recurso: cualquier cosa en Internet que “merezca la
pena ser referenciada pos si misma”

• Un ﬁchero, un mapa, un libro, una foto, un
vídeo, …..

• Cada recurso se identiﬁca con un URI

• El URI (Permalink) dará acceso al recurso

Identificación de recursos
• URI: Identificador de recurso uniforme

• Uniformiza el acceso a cualquier recurso de Internet

• Tipos de URI

• URL: Uniform Resource Locator

• Localiza un recurso unívocamente en un lugar físico de la
red: Recurso en un “host” de Internet

• URN: Uniform Resource Name

• Nombre de un recurso, independiente de posición

• Se definió en la norma, pero se utiliza escasamente

Ejemplos de URLs
• Pagina Web
• http://www.dit.upm.es/proy/isabel.html#seccion3

• Query Web (con 2 parámetros)
• http://www.bb.es/foto?nombre=Paco&apellido=Perez

• Dirección de correo electrónico (buzón)
• mailto:scom@lab.dit.upm.es

• Fichero
• file:///usr/lib/arch.txt

HTTP
• Teletransporte de objetos

•
! DAME !
• sdffs

•

Protocolo de
Petición - Respuesta
Cliente Servidor
Conexión

Petición

Respuesta

Desconexión

Protocolo HTTP: ejemplo

1) Cliente establece conexión TCP con servidor
 En puerto 80 salvo que se cambie en URL
2) Cliente envía solicitud HTTP

GET /index.html HTTP/1.0
Accept: text/html
Accept: text/plain
Accept: image/gif
Accept: image/jpeg
User-Agent: Netscape-Navigator/4.03

// linea en blanco indica final de pregunta

Protocolo HTTP: ejemplo
HTTP/1.0 200 OK
Server: NCSA/1.2.3
MIME-version: 1.0
Content-type: text/html
Content-length: 608 // tamaño cuerpo en bytes

<html>
<Head>
....... // ﬁchero html
</body>
</html>

4 HTTP 1.0) Cierre de la conexión TCP
4 HTTP 1.1) Conexión persistente
 Permanece abierta para nuevas transacciones
 Debe cerrarse explícitamente

Posibles peticiones
• GET

• HEAD

• PUT

• POST

• DELETE

• LINK

• UNLINK

Formato
• Respuesta
Status-line
• Petición header (0-n)
<línea en blanco>
Request-line body
headers (0-n)

<línea en blanco>

body (POST)

SGML, HTML, XML y XHTML
SGML (Standard Generalized Markup Language)
 Norma ISO 8879:1986 de descripción de documentos
HTML (HyperText Markup Language)
 Lenguaje creación de documentos hipermedia
 Basado en SGML ISO:8879
 Evoluciona desde su creación: HTML1-1989 a HTML4.01-1999
 Incorpora mucha funcionalidad nueva durante estos años
XML
 Mantiene la funcionalidad de SGML con poca complejidad
 Basado en SGML ISO:8879
 XML 1.0 (1st Ed., Feb-98 -> 4th Ed., Aug-06)
 Las nuevas ediciones de XML 1.0 corrigen errores
 XML 1.1 (2nd Ed., Aug-06)
 Mejora internacionalización y compatibilidad con ‘legacy’
XHTML
 Redefinición de HTML como marcado XML

XML
XML (eXtended Markup Language)
 Metalenguaje de marcado de documentos de texto
 Las marcas definen la estructura de un documento
 XML permite definir sub-lenguajes
 Por ejemplo: XHTML redefinición de HTML en XML

 Internacionalizado: UTF-8 (por defecto), UTF-16 (UNICODE), ..
 Norma W3C: http://www.w3c.org/XML
 Tutoriales: http://www.w3.org, http://www.w3schools.com

XML es el núcleo de una
 Metodología abierta de gestión de información
 Capaz de definir lenguajes de definición de datos a medida que se necesiten

Separando presentación y formato
Inicialmente se utilizo HTML para definir
 Estructura y formato de un documento
 Como debe ser visto por un usuario

Hoy se recomienda separar ambas definiciones
 Reduce la complejidad de las aplicaciones
 Facilita la presentación de unos datos en terminales diferentes
 Por ejemplo: PC, PDA, móvil, ….

Se recomienda utilizar
 XML, HTML o XHTML para formato de datos o de documentos
 CSS o XSL para definir como deben visualizarse

Ejemplo: presentación con CSS

Fichero HTML puro Fichero HTML + formato en CSS

Tipos de marcación
• Marcación especiﬁca: describe como ha de
formatearse. (composición concreta)

– Font, tamaño, color, etc.

– Control total con el resultado.

• Marcación estructural: describe la estructura del
documento.

– Titular, párrafo, etc.

13

HTML básico
• Lenguaje basado en etiquetas (Tags)

• Marcas entre < > : <etiqueta>.

• Finalización con </etiqueta>

• Algunos elementos pueden tener valores:

– nombre=“valor”.

• Puede ir en mayúsculas o minúsculas.

14

Estructura de una
página
<HTML>

<HEAD>

<TITLE> Prueba </TITLE>

</HEAD>



<BODY>
15
......

Formato Físicos:

• Negrita: ... 

• Cursiva: ... 

• Teletipo: <TT> ... </TT>

• Tachado: <STRIKE> ... </STRIKE>

16

Formatos lógicos

• Encabezado: <Hn> .. </Hn>

( n de 1 a 6)

17

Uso de puntos de
enlace (Anclas)

• Permiten deﬁnir enlaces dentro de un documento.

– De referencia

– Nominales.

18

Uso de imágenes

• Gran ayuda para el diseño gráﬁco de nuestro Web.

• Pueden hacerlo insufrible.

• Optimizarlas lo más posible

20

Imágenes
• Matrices de puntos de colores.

• Color: tres números RGB.

• Formatos

– Color Verdadero: almacenamos en punto el color.

– Indexadas : Almacenamos en punto el indice de una
tabla donde esta el color.

• Diferencias de calidad y representación.
21

Algoritmos de
compresión
– GIF: Bueno para imágenes “planas”.

• Sin perdidas. Indexadas a 256 colores.

– JPEG: Bueno para fotos

• Con perdidas (factor de calidad). Imágenes de
Color verdadero.

– PNG: Diseñado para Web.

• Aún no totalmente extendido.
22

Consejos básicos

• Tener en cuenta las capacidades de los visores.

• Reciclar colores.

• Reciclar imágenes.

• Elegir el algoritmo adecuado.

23

MIME : uso de otras
aplicaciones.
• ¿ Qué ocurre si apuntamos a un ﬁchero
que no es html?

• Mecanismo diseñado para transmitir
información heterogénea por e-mail.

• Indica el tipo del contenido que transmite
(codiﬁcado)

• Detectado en servidor por extensión.
24

XML
• Nueva generación de herramientas

• Subconjunto /modiﬁcación de SGML

• Posibilidad de desarrollo de metacontenidos

• Mejoras en Internet

– Anotación de contenidos

– Mejor buscadores

25

Problemática del
diseño hipertextual.
• Hipertexto:

• aprox: Documentos con enlaces no lineales

• Elementos

• Nodos (Páginas) (HTML)

• Enlaces (direcciones en URL)

Uso de pluggins en
ﬁrefox

• Web Developer

• Live HTTP Headers

Página
Web
Petición
HTTP
Funcionalidad
Internet o Servidor añadida
Intranet Web

Browser Web

Pagina Página
WEB Web

Servidor
Cliente “Páginas “Páginas dinámicas”
activas”
CGI, SSI, Server API, ASP,
JavaScript, VBScript, JSP, PHP,
Applet, ActiveX

Son complementarias

Consigue la información

<HTML>
<% Response.Write(“ Hola !!”) %>
Petición HTTP : </HTML>
(http://www.website.com)

Interpreta el código
ServidorWeb
<HTML>
Cliente Hola !! 
</HTML>

Respuesta del
servidor

Hola!!

Navegador interpreta y
representa página









17

REST y AJAX

El despliegue AJAX de un servicio REST

 Son clientes en Javascript

 que invocan el servicio con el interfaz uniforme

Aplicaciones Web
frente a
• Necesidad de Instalar un programa.

• Problemas de las actualizaciones

•

Tarea
• Diseñar una web estática en un hosting gratuito.

• Por Ejemplo : http://byethost24.com/

• Editar (por ejemplo con Kompozer)

• Añadir la dirección en una wiki dentro de Moodle.

Introdución a la web: HTTP, URL y HTML

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introdución a la web: HTTP, URL y HTML

Ähnlich wie Introdución a la web: HTTP, URL y HTML (20)

Mehr von Joaquín Salvachúa

Mehr von Joaquín Salvachúa (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (15)

Introdución a la web: HTTP, URL y HTML