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

•   Lo de debajo de la alfombra.

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




•   Paquetes que circulan po...
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 ot...
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.

                Clie...
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 fi...
URI
Identificación de recursos
•   URI: Identificador de recurso uniforme

    •   Uniformiza el acceso a cualquier recurso de I...
Ejemplos de URLs
• Pagina Web
  •   http://www.dit.upm.es/proy/isabel.html#seccion3

• Query Web (con 2 parámetros)
  •   ...
HTTP
HTTP
•   Teletransporte de objetos




•
                                ! DAME !
•    sdffs

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

           Petición

           ...
Protocolo HTTP: ejemplo

   1) Cliente establece conexión TCP con servidor
      En puerto 80 salvo que se cambie en URL
...
Protocolo HTTP: ejemplo
     HTTP/1.0 200 OK
     Server: NCSA/1.2.3
     MIME-version: 1.0
     Content-type: text/html
 ...
Posibles peticiones
     •   GET

     •   HEAD

     •   PUT

     •   POST

     •   DELETE

     •   LINK

     •   UNL...
Formato
                     • Respuesta
                        Status-line
• Petición              header (0-n)
        ...
22
Portal => ADSL
RSS
HTML
SGML, HTML, XML y XHTML
SGML (Standard Generalized Markup Language)
   Norma ISO 8879:1986 de descripción de documentos
H...
XML
XML (eXtended Markup Language)
   Metalenguaje de marcado de documentos de texto
     Las marcas definen la estructu...
Separando presentación y formato
Inicialmente se utilizo HTML para definir
   Estructura y formato de un documento
   Co...
Ejemplo: presentación con CSS




     Fichero HTML puro   Fichero HTML + formato en CSS
Tipos de marcación
• Marcación especifica: describe como ha de
  formatearse. (composición concreta)

  – Font, tamaño, col...
HTML básico
• Lenguaje basado en etiquetas (Tags)

• Marcas entre < > : <etiqueta>.

• Finalización con </etiqueta>

• Alg...
Estructura de una
     página
  <HTML>

    <HEAD>

          <TITLE> Prueba </TITLE>

    </HEAD>

    <!-- esto es un co...
Formato Físicos:

• Negrita:   <B> ... </B>

• Cursiva:   <I>   ... </I>

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

• Tachado: <STRIKE> ...
Formatos lógicos


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

                    ( n de 1 a 6)




                                  ...
Uso de puntos de
    enlace (Anclas)

• Permiten definir enlaces dentro de un documento.

  – De referencia

  – Nominales....
Uso de imágenes

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

• Pueden hacerlo insufrible.

• Optimizarlas lo más p...
Imágenes
• Matrices de puntos de colores.

• Color: tres números RGB.

• Formatos

  – Color Verdadero: almacenamos en pun...
Algoritmos de
       compresión
– GIF: Bueno para imágenes “planas”.

  • Sin perdidas. Indexadas a 256 colores.

– JPEG: ...
Consejos básicos

• Tener en cuenta las capacidades de los visores.

• Reciclar colores.

• Reciclar imágenes.

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

• Mecanismo diseñado para t...
XML
• Nueva generación de herramientas

• Subconjunto /modificación de SGML

• Posibilidad de desarrollo de metacontenidos
...
Problemática del
diseño hipertextual.
•   Hipertexto:

    •   aprox: Documentos con enlaces no lineales

•   Elementos

 ...
Uso de pluggins en
     firefox

•   Web Developer

•   Live HTTP Headers
12












Página
                                                        Web
           Petición
            HTTP
                  ...
Consigue la información

                                                                  <HTML>
                        ...
16













    17
REST y AJAX


El despliegue AJAX de un servicio REST

   Son clientes en Javascript

      que invocan el servicio con e...
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 e...
Introdución a la web: HTTP, URL y HTML
Próxima SlideShare
Cargando en…5
×

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

15.516 visualizaciones

Publicado el

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

Publicado en: Tecnología
0 comentarios
3 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
15.516
En SlideShare
0
De insertados
0
Número de insertados
84
Acciones
Compartido
0
Descargas
279
Comentarios
0
Recomendaciones
3
Insertados 0
No insertados

No hay notas en la diapositiva.

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

  1. 1. Arquitectura de la Web : HTTP, URL y HTML Joaquín Salvachúa : jsalvachua@dit.upm.es
  2. 2. InterNet
  3. 3. IP • Lo de debajo de la alfombra. • Permite conectar un ordenador a otro (Tubería). • Paquetes que circulan por donde deban.
  4. 4. Direcciones IP • 127.0.0.1 : 4 bytes. • DNS : conversión a dominios www.dit.upm.es • Suponemos que funciona.
  5. 5. TCP • Ensamblador de paquetes. • Permite tener una tubería de datos. • Permite comunicar datos de un lado a otro.
  6. 6. Entro por Google
  7. 7. web WWW 1.0
  8. 8. Arquitectura básica • Componentes: • HTTP : Transporte • HTML : Formato • URL (URI) : Dirección
  9. 9. Principios de Diseño • Servidor + clientes • Protocolo de comunicación HTTP. Clientes <== HTTP == < Servidor • Formato de los documentos HTML. Presentador <= HTML == < cliente
  10. 10. Quiero algo • Dime que quieres. • Nombre para cada cosa : URL / URI
  11. 11. 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
  12. 12. URI
  13. 13. 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
  14. 14. 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
  15. 15. HTTP
  16. 16. HTTP • Teletransporte de objetos • ! DAME ! • sdffs •
  17. 17. Protocolo de Petición - Respuesta Cliente Servidor Conexión Petición Respuesta Desconexión
  18. 18. 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
  19. 19. 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> ....... // fichero 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
  20. 20. Posibles peticiones • GET • HEAD • PUT • POST • DELETE • LINK • UNLINK
  21. 21. 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)
  22. 22. 22
  23. 23. Portal => ADSL
  24. 24. RSS
  25. 25. HTML
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. Ejemplo: presentación con CSS Fichero HTML puro Fichero HTML + formato en CSS
  30. 30. 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. 13
  31. 31. 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
  32. 32. Estructura de una página <HTML> <HEAD> <TITLE> Prueba </TITLE> </HEAD> <!-- esto es un comentario --> <BODY> 15 ......
  33. 33. Formato Físicos: • Negrita: <B> ... </B> • Cursiva: <I> ... </I> • Teletipo: <TT> ... </TT> • Tachado: <STRIKE> ... </STRIKE> 16
  34. 34. Formatos lógicos • Encabezado: <Hn> .. </Hn> ( n de 1 a 6) 17
  35. 35. Uso de puntos de enlace (Anclas) • Permiten definir enlaces dentro de un documento. – De referencia – Nominales. 18
  36. 36. Uso de imágenes • Gran ayuda para el diseño gráfico de nuestro Web. • Pueden hacerlo insufrible. • Optimizarlas lo más posible 20
  37. 37. 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
  38. 38. 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
  39. 39. Consejos básicos • Tener en cuenta las capacidades de los visores. • Reciclar colores. • Reciclar imágenes. • Elegir el algoritmo adecuado. 23
  40. 40. 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. 24
  41. 41. 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 25
  42. 42. Problemática del diseño hipertextual. • Hipertexto: • aprox: Documentos con enlaces no lineales • Elementos • Nodos (Páginas) (HTML) • Enlaces (direcciones en URL)
  43. 43. Uso de pluggins en firefox • Web Developer • Live HTTP Headers
  44. 44. 12
  45. 45.    
  46. 46. 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
  47. 47. Consigue la información <HTML> <% Response.Write(“ Hola !!”) %> Petición HTTP : </HTML> (http://www.website.com) Interpreta el código ServidorWeb <HTML> Cliente <B> Hola !! </B> </HTML> Respuesta del servidor Hola!! Navegador interpreta y representa página
  48. 48. 16
  49. 49.     17
  50. 50. REST y AJAX El despliegue AJAX de un servicio REST  Son clientes en Javascript  que invocan el servicio con el interfaz uniforme
  51. 51. Aplicaciones Web frente a • Necesidad de Instalar un programa. • Problemas de las actualizaciones •
  52. 52. Widgets - Gadgets
  53. 53. 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.

×