introdución a la web: http, url y html
DESCRIPTION
Introdución a la web: HTTP, URL y HTMLTRANSCRIPT
InterNet
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.
Entro por Google
web WWW 1.0
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 fichero, un mapa, un libro, una foto, un vídeo, …..
• Cada recurso se identifica con un URI
• El URI (Permalink) dará acceso al recurso
URI
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:[email protected]
• Fichero
• file:///usr/lib/arch.txt
HTTP
HTTP• Teletransporte de objetos
•
• sdffs
•
! DAME !
Protocolo de Petición - Respuesta
Cliente Servidor
Conexión
Desconexión
Petición
Respuesta
Protocolo HTTP: ejemplo
1) Cliente establece conexión TCP con servidor En puerto 80 salvo que se cambie en URL2) Cliente envía solicitud HTTP
GET /index.html HTTP/1.0Accept: text/htmlAccept: text/plainAccept: image/gifAccept: image/jpegUser-Agent: Netscape-Navigator/4.03
// linea en blanco indica final de pregunta
Protocolo HTTP: ejemplo HTTP/1.0 200 OKServer: NCSA/1.2.3MIME-version: 1.0Content-type: text/htmlContent-length: 608 // tamaño cuerpo en bytes
<html><Head>....... // fichero html</body></html>
4 HTTP 1.0) Cierre de la conexión TCP4 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
• Petición
Request-line
headers (0-n)
<línea en blanco>
body (POST)
• RespuestaStatus-lineheader (0-n)<línea en blanco>body
22
Portal => ADSL
RSS
HTML
SGML, HTML, XML y XHTML
SGML (Standard Generalized Markup Language) Norma ISO 8879:1986 de descripción de documentosHTML (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
XMLXML (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
13
Tipos de marcación• Marcación especifica: 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.
14
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.
15
Estructura de una página
<HTML>
<HEAD>
<TITLE> Prueba </TITLE>
</HEAD>
<!-- esto es un comentario -->
<BODY>
......
16
Formato Físicos:
• Negrita: <B> ... </B>
• Cursiva: <I> ... </I>
• Teletipo: <TT> ... </TT>
• Tachado: <STRIKE> ... </STRIKE>
17
Formatos lógicos
• Encabezado: <Hn> .. </Hn>
( n de 1 a 6)
18
Uso de puntos de enlace (Anclas)
• Permiten definir enlaces dentro de un documento.
– De referencia
– Nominales.
20
Uso de imágenes
• Gran ayuda para el diseño gráfico de nuestro Web.
• Pueden hacerlo insufrible.
• Optimizarlas lo más posible
21
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.
22
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.
23
Consejos básicos
• Tener en cuenta las capacidades de los visores.
• Reciclar colores.
• Reciclar imágenes.
• Elegir el algoritmo adecuado.
24
MIME : uso de otras aplicaciones.
• ¿ Qué ocurre si apuntamos a un fichero que no es html?
• Mecanismo diseñado para transmitir información heterogénea por e-mail.
• Indica el tipo del contenido que transmite (codificado)
• Detectado en servidor por extensión.
25
XML• Nueva generación de herramientas
• Subconjunto /modificación de SGML
• Posibilidad de desarrollo de metacontenidos
• Mejoras en Internet
– Anotación de contenidos
– Mejor buscadores
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 firefox
• Web Developer
• Live HTTP Headers
12
Páginas activas
Generación de información Dinámica
Paginas estáticas problemáticas.
Un programa CGI tiene que generar toda la información HTML.
NO hay posibilidad de usar editores de HTML.
Solución: Páginas dinámicas
Páginas activas y Paginas dinámicas
Browser Web
Internet oIntranet
PaginaWEB
ServidorWeb
PeticiónHTTP
Funcionalidadañadida
PáginaWeb
Cliente “Páginas activas”
JavaScript, VBScript, Applet, ActiveX
PáginaWeb
Servidor“Páginas dinámicas”
CGI, SSI, Server API, ASP, JSP, PHP,
Son complementarias
Página dinámica
Hola!!
Cliente
ServidorWeb
<HTML><% Response.Write(“ Hola !!”) %>
</HTML>Petición HTTP :(http://www.website.com)
Respuesta del servidor
Navegador interpreta y representa página
Interpreta el código
Consigue la información
<HTML><B> Hola !! </B>
</HTML>
16
Elementos de una página activa
17
Aplicaciones Web
Una aplicación WEB es una colección de HTML, componentes y páginas activas, código de soporte y otros ficheros.
Alcanzable por un cierto URL
Existe en un cierto sistema de ficheros.
Y comparten un mismo servidor web en un servidor de aplicaciones.
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
•
Widgets - Gadgets
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.