Capítulo 1
CC5002 – Desarrollo de Aplicaciones web
HTTP y HTML
José Urzúa http://jose.cl
Estadísticas
CC5002 – Desarrollo de Aplicaciones web
• Browser, resoluciones, sistemas operativos
– http://marketshare.hitslink.com
• Host, páginas web, servidores web
– http://news.netcraft.com/
José Urzúa http://jose.cl
HTTP
CC5002 – Desarrollo de Aplicaciones web
• HTTP
– Protocolo de transferencia de hipertexto
– Define que mensajes pueden enviar los clientes a los
servidores y que respuestas obtienen
• RFC 822: Solicitud ASCII seguida de respuesta MIME
• Todos los clientes y servidores deben obedecer este
protocolo
– Conexiones
• TCP en el puerto 80 de la máquina servidor
• Ni los navegadores ni servidores se preocupan por los
mensajes largos, perdidos o duplicados, ni confirmaciones
• HTTP1.0: se enviaba la solicitud, se recibe respuesta
• HTTP1.1: conexiones persistentes
José Urzúa http://jose.cl
HTTP
CC5002 – Desarrollo de Aplicaciones web
• HTTP
– Métodos
• Soporta métodos diferentes a solicitar una página web
• El método GET solicita al servidor que envíe la página
• Método HEAD solicita el encabezado del mensaje
• Método PUT inverso de GET
– Cada solicitud obtiene una respuesta con un código
de estado
• Códigos 2xx indica que se manejó con éxito la solicitud
• Códigos 3xx indican al cliente que busque en otro lado
• Códigos 4xx indica que la solicitud falló por error del cliente
• Códigos 5xx indican que el servidor falló
José Urzúa http://jose.cl
HTTP
CC5002 – Desarrollo de Aplicaciones web
Los métodos de solicitudes HTTP
José Urzúa http://jose.cl
HTTP
CC5002 – Desarrollo de Aplicaciones web
Grupos de respuesta del código de estado
José Urzúa http://jose.cl
HTTP
• HTTP:
CC5002 – Desarrollo de Aplicaciones web
– Encabezados del mensaje
• A la línea de solicitud la pueden seguir líneas con más
información (encabezados de solicitud)
• Las respuestas pueden tener encabezados de respuesta
• User-agent: informa al servidor el navegador que está
usando el cliente
• Con “Accept” indica lo que el cliente está dispuesto a aceptar
• El servidor utiliza “Server” para indicar quien es y entregar
algunas de sus propiedades
• Con los “Content-*” el servidor describe propiedades de la
página que está enviando
• Con “Location” el servidor indica al cliente que debe tratar
con una URL diferente
José Urzúa http://jose.cl
CC5002 – Desarrollo de Aplicaciones web
José Urzúa http://jose.cl
URL
CC5002 – Desarrollo de Aplicaciones web
• URL
– Indica la ubicación de un recurso
• URI
– Mas nuevo que URL, identifica un recurso
– No necesariamente, relacionado con su ubicación
• Formato:
– protocolo://nombre-dns:puerto/identificador
• Ejemplo:
http://www.dcc.uchile.cl/1877/channel.html
José Urzúa http://jose.cl
URL
CC5002 – Desarrollo de Aplicaciones web
Algunos URLs comunes
José Urzúa http://jose.cl
Direccionamiento
CC5002 – Desarrollo de Aplicaciones web
• Distintas direcciones:
– MAC Address
– Dirección IP
– Nombre DNS
• Contactar una aplicación se usa un puerto
– Hay puertos estándares que las aplicaciones
escuchan y conocen
– Telnet (23), SMTP (25)
– Por ejemplo en producción: HTTP (80), SSL (443),
MYSQL (3306)
– Por ejemplo en desarrollo: HTTP (8080), SSL (8443)
José Urzúa http://jose.cl
CC5002 – Desarrollo de Aplicaciones web
HTML, CSS
José Urzúa http://jose.cl
HTML
• Documentos web estáticos
CC5002 – Desarrollo de Aplicaciones web
– La forma más simple de una página web es un
documento estático
• Archivos en un servidor que esperan ser recuperados
• Un video es un documento estático
– HTML
• Lenguaje de marcado de hipertexto
• Serie de comandos de marcado
• Es posible escribirlo con cualquier editor estándar
– Pagina web consiste en encabezado y cuerpo
encerrado entre etiquetas
• Etiquetas están encerradas entre “<” y “>”
• Etiquetas tienen atributos
José Urzúa http://jose.cl
HTML
CC5002 – Desarrollo de Aplicaciones web
HTML para una página web de ejemplo
José Urzúa http://jose.cl
HTML
CC5002 – Desarrollo de Aplicaciones web
• Imágenes
– Se incluyen con el tag <img>
– Tiene opciones especiales de alineamiento en
relación al texto que acompaña
– Se puede dar las dimensiones de como queremos
presentarla
• Útil para reutilizar imágenes en distintas páginas
• Hay veces que es mejor tener varias copias de la imagen
con diferentes tamaños
• Listas
– Sin orden <ul>
– Ordenadas <ol>
José Urzúa http://jose.cl
HTML
CC5002 – Desarrollo de Aplicaciones web
Selección de etiquetas HTML comunes
José Urzúa http://jose.cl
HTML
• Formularios
CC5002 – Desarrollo de Aplicaciones web
– Aparecieron desde HTML 2.0
– Contienen cuadros o botones que permiten a los
usuarios ingresar información
• Utilizan la etiqueta <input>
– Se utilizan con la etiqueta <form>
– Los más comunes tienen campos en blanco para
aceptar texto del usuario
• También tienen casillas de verificación que pueden marcarse
• Y botones de envío
José Urzúa http://jose.cl
CC5002 – Desarrollo de Aplicaciones web
HTML
José Urzúa http://jose.cl
CC5002 – Desarrollo de Aplicaciones web
HTML
José Urzúa http://jose.cl
HTML
CC5002 – Desarrollo de Aplicaciones web
• Formularios
– Generalmente se utilizan tablas u otros elementos
para ordenar los datos
– Atributo action
• Señala la URL que recibe y procesa los datos
• Hay URLs que indican la ejecución cgi-bin:
http://www.dcc.uchile.cl/cgi-bin/cgiwrap/jourzua/mail.pl
– Se pueden indicar codificaciones del formulario
• Si el formulario sirve para enviar archivos:
“multipart/form-data”
• Ejemplos en w3c
José Urzúa http://jose.cl
CSS
• En 1996 se propuso CSS para HTML por parte
CC5002 – Desarrollo de Aplicaciones web
de W3C
– En 1998 se extendió para crea CSS2
• Hojas de estilos
– Reglas que indican al browser como dibujar el
contenido de un elemento HTML
– Una regla puede definir valores específicos para una
o más propiedades de un tag
• Color, tipos de letras, espacio entre lineas, márgenes,
bordes, etc
– Se puede agregar de 3 maneras
• En el mismo tag
• A nivel de documento
• Recurso externo
José Urzúa http://jose.cl
CSS
CC5002 – Desarrollo de Aplicaciones web
• CSS en el mismo tag
<p style="color: red; margin-left: 20px">
• Nivel de documento (dentro de <head></head>):
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
• Documento externo
<link rel="stylesheet" type="text/css" href="mystyle.css">
José Urzúa http://jose.cl
CSS
CC5002 – Desarrollo de Aplicaciones web
• Clases
– Se pueden definir clases para distintos elementos
• El elemento que desee utilizarla solo menciona el nombre de
la clase
– Mezclar clases
a.plain: link, a.plain:active, a.plain: visited {color:blue}
a.link {color: blue}
a:visited {color: green}
a:active {color: red}
a.clase2:link {font-style: italic}
a.clase2:visited {font-style: normal}
a.clase2:active {font-weight: bold; font-size: 150%}
José Urzúa http://jose.cl
HTML
CC5002 – Desarrollo de Aplicaciones web
• Cascading Style Sheets (CSS)
– Separar la presentación del contenido
• Validación de HTML
– http://validator.w3.org/
• Aprender más
– http://www.w3.org/wiki/HTML/Elements
– https://developer.mozilla.org/en-US/docs/Web/HTML/
Reference
José Urzúa http://jose.cl
