Universidad Nacional de Colombia

1
Desarrollo de aplicaciones en Internet

• Introducción a Internet

2
Internet

• Internet la red de redes
• Nace a mediados de la década de los setenta.
• Se creó bajo el auspicio de DARPA
• Con Internet nació un protocolo de comunicaciones
  de datos IP o Internet Protocol

3
World Wide Web

• Red de servicios de contenido capaces de
  intercambiar texto, gráficos, y e información
  multimedia información vía Internet.
• Ésta ha dejado de ser una inmensa biblioteca
• de páginas estáticas para convertirse en un
  servicio que permite acceder a multitud de
  prestaciones y funciones.

4
Aplicación Web

• Definición
• Wikipedia (www.wikipedia.org)
• Una aplicación web es aquella que los usuarios
  usan accediendo a un servidor web a través de
  Internet o de una intranet. Las aplicaciones web
  son populares debido a la practicidad del
  navegador web como cliente ligero

usuario
Internet/Intranet
S
C
Cliente web
Servidor web
5
Aplicación Web
Cliente
Servidor
Conexión lógica
HTTP
HTTP
TCP
TCP
IP
IP
Driver Ethernet
Driver Ethernet
Conexión física
6
HTTP

• HyperText Transfer Protocol
• Es el protocolo usado en cada transacción de la
  Web.
• HTTP es un protocolo sin estado
• La versión actual de HTTP es la 1.1, y su
  especificación está en el documento RFC-2616

7
Direcciones de Internet

• Dominios de nivel principal
• com
• edu
• gov
• mil
• net
• org
• Dominios de país
• .ca (Canada)
• .uk (Colombia)

8
DNS
168.176.125.25
direccion.com.co168.176.125.25 otra.com.co168.14
6.123.25
servidor
Servidor Nombres (DNS)
168.176.125.25
cliente
direccion.com.co
direccion.com.co
9
Puertos

• Las máquinas (host) se identifican con una sola
  ip
• Las aplicaciones se identifican por los puertos
• Un puerto es un canal lógico a la alplicación
  corriendo en un host
• Las aplicaciones web usualmente escuchan el
  puerto 80

10
URI

• Uniform Resource Identifier
• URL (locator)
• protocolo//usuariopass_at_host puerto/url-path
• parámetros
• URL?paramtextootrootro_texto
• URN (name)

11
Comunicación Cliente/Servidor

• El cliente escribe la direccion
• P.e www.unal.edu.co
• El DNS resuelve a la dirección 168.176.162.15
• Envía la petición HTTP al host (168.176.162.15)
• GET /index.html HTTP/1.0
• El servidor retorna
• HTTP/1.0 200 OK
• Server Netscape-Enterprise/2.01
• Content-type text/html
• Content-length 359
• ltContenido HTMLgt

12
Render de una página
Servidor Web
Img1
Index.html
Img2
Index.html
cliente
13
Hipertexto
libro
1
2
3
navegar
2
5
1
3
14
Definición de Hipertexto - Ted Nelson

• Documento digital o no, que se puede leer de
  manera no secuencial. En donde tiene estos
  elementos secciones, enlaces o hipervínculos y
  anclajes.

Ted Nelson Sociólogo Alemán
15
Características del Hipertexto

• No es lineal.
• Es eminentemente interactivo
• Permite al usuario leer, co-escribir y comprender
  información más efectivamente
• Si no está bien estructurado o si el usuario no
  ha desarrollado las competencias adecuadas, se
  puede desorientar fácilmente

16
HTML

• Hypertext Markup Language
• HTML y HTTP fueron inventados por Tim
  Berners-Lee.
• Se baso en SGML (Standard Generalized Markup
  Language)

17
Historia de HTML HTML 1.0

• No se podía escoger el color de fondo gris
• No se podía usar imágenes
• Única Fuente Times
• No existían formularios
• Hipervínculos azules y rojos

• Sólo fue implementado en
• Mosaic
• Lynx

18
Historia de HTML HTML 2.0

• Entró a operar con el W3C (www.w3c.org)
• Se podían usar colores e imágenes
• Se podían usar formularios (limitados)
• Se crearon las opciones para Tablas

19
Historia de HTML HTML 3.2

• Incluyó soporte a las CSS (CSS 1).
• Se expandió el número de atributos para
  personalizar el formato (look) de las páginas
• No existía soporte para marcos (frames)
• Mantenimiento Costoso e ineficiente.

20
Historia de HTML HTML 4.0

• Se mantuvo lo existente
• Cambió el paradigma de presentación
• Todo el formato se delegó a las CSS
• Soporte para marcos (frames)

21
XML

• Extensible Markup Language
• Se diseño para ayudar a separar la estructura de
  la presentación flexibilidad
• Se baso en SGML
• Incorpora un conjunto de restricciones que
  proporcionan formalidad

22
Ejemplo XML

•  
• lt?xml version"1.0"?gt
• - ltListadoCarros consesionarioautomotores"
  pais"colombia"gt
• - ltcarrogt
•   ltmarcagtchevroletlt/marcagt
•   ltnombregtAveolt/nombregt
•   ltseriegtLSlt/seriegt
•   ltcilindrajegt1.4lt/cilindrajegt
•   lt/carrogt
• - ltcarrogt
•   ltmarcagtChevroletlt/marcagt
•   ltnombregtOptralt/nombregt
•   ltseriegtLSlt/seriegt
•   ltcilindrajegt1.6lt/cilindrajegt
•   lt/carrogt
•   lt/ListadoCarrosgt

23
XHTML

• Extensible HyperText Markup Language (XHTML)
• Es la primera especificación que cruza las
  especificaciones de HTML y XML.
• Es el reemplazo de HTML.
• Esta diseñado para emplearse en ambientes para
  XML y es compatible con el estandar HTML 4.01 de
  los navegadores.

24
CSS

• Cascade Style Sheets
• Garantiza la separación de presentación y
  estructura.
• Reduce los costos de mantenimiento

XHTML
CSS
XHTML
25
CSS

• Hojas de estilo en Cascada

Global (externo .css)
Local (interno)
Elemento específico
pagina.html