Introduccin a los lenguajes de la Web

Lo mnimo que debes saber de HTTP, HTML y CSS para

desarrollar aplicaciones Web
Juan Gabardini y Martn Salas
Este libro est a la venta en http://leanpub.com/introlenguajesweb
Esta versin se public en 2013-10-02

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools
and many iterations to get reader feedback, pivot until you have the right book and build
traction once you do.

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0

Unported License

Twitea sobre el libro!

Por favor ayuda a Juan Gabardini y Martn Salas hablando sobre el libro en Twitter!
El hashtag sugerido para este libro es #introlenguajesweb.
Descubre lo que otra gente est diciendo sobre el libro haciendo click en este enlace para buscar
el hashtag en Twitter:
https://twitter.com/search/#introlenguajesweb

ndice general
1 Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.1 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2 Qu me ensea este libro? . . . . . . . . . . . . . . . . . .
1.3 Qu pasa cuando ingreso una direccin en mi navegador?
1.4 Lo que no es este libro . . . . . . . . . . . . . . . . . . . .
1.5 Ms materiales, cursos y Kleer . . . . . . . . . . . . . . . .

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

1
1
1
1
2
3

2 Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1 Dominios, direcciones IP y puertos . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 La web: HTTP y HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4
4
4

3 HTTP . . . . . . . . . . .
3.1 Peticin (Request) . .
3.2 Respuesta (Response)
3.3 Cookies . . . . . . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

6
6
7
8

4 HTML5 . . . . . . . . . . .
4.1 Elementos . . . . . . .
4.2 Texto . . . . . . . . . .
4.3 Enlace o Vnculo (Link)
4.4 Formulario (Form) . . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

9
9
10
11
11

5 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

6 Aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.1 Aplicacin mnima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2 URL semnticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16
16
18

7 Como seguir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

1 Introduccin
Este libro evoluciona!
Una de las ventajas de editar los libros en formato electrnico es que siempre pueden
mejorarse en base al feedback recibido. La edicin original de este libro se llev a cabo
de manera iterativa e incremental, recibiendo e incorporando sugerencias de amigos y
lectores de todas partes. Pero ese proceso no st completamente terminado, e invitamos
a todo lector a enviarnos ms ideas sobre este u otros libros.
Por favor, envianos tus comentarios a juan.gabardini@kleer.la martin.salias@kleer.la
Muchas Gracias!

1.1 Objetivo
Este libro est pensado como parte del material de soporte para un curso de 32 hs. El objetivo
del curso y del material asociado es que los asistentes / lectores logren una experiencia completa,
aunque breve, de desarrollo de una aplicacin web usando metodologas giles. El material
completo del curso incluye:
Introduccin a Scrum y desarrollo gil
Lenguajes de la Web (HTTP, HTML, CSS): Este libro!
Desarrollo gil de software

1.2 Qu me ensea este libro?

Al finalizar las actividades explicadas en este libro podrs construir pginas web estticas (HTML
y CSS), y entenders el funcionamiento bsico de una aplicacin web. Este libro cubre los
rudimentos, no conceptos tcnicos avanzados ni prcticas especficas de diseo o usabilidad.
En todos los casos inclumos el contenido mnimo de cada una de estas disciplinas.

1.3 Qu pasa cuando ingreso una direccin en mi

navegador?
Para que tengas una idea clara del alcance del libro, describimos el flujo de informacin al
intentar acceder una pgina web y te contamos en qu parte del libro explicamos en ms detalle
cada paso y tecnologa involucrada.

Introduccin

1. Ingreso en el navegador la direccin del la pgina que quiero acceder (por ejemplo:
www.w3.org).
Hablaremos sobre direcciones en el captulo Internet.
2. El navegador prepara un mensaje a esa direccin, solicitando la pgina.
Sobre el contenido del mensaje hablaremos en el captulo HTTP.
3. El servidor que tiene esa direccin recibe el mensaje, y se lo pasa a la aplicacin web
correspondiente. La aplicacin, prepara la pgina que se est pidiendo (consultando
archivos y bases de datos si fuera necesario).
Presentaremos ejemplos sencillos en el captulo Aplicaciones Web.
4. El servidor enva un mensaje con la respuesta (que incluye la pgina) al equipo que realiz
el pedido.
Esto lo veremos en el captulo HTTP.
5. Cuando el mensaje llega lo recibe el navegador, que lo interpreta y muestra segn
corresponda, pidiendo recursos adicionales a la aplicacin web, como imgenes o archivos
de estilos, si as lo indica la pgina.
Sobre como se muestra la pgina hablaremos en los captulos de HTML y CSS.

1.4 Lo que no es este libro

Temas no incluidos
Algunos temas son muy importantes para el desarrollo web, y un desarrollador profesional
de aplicaciones web debe conocerlos. Una vez conocido los temas bsicos incluidos aqu, te
recomendamos fuertemente que contines con: JavaScript, AJAX, Seguridad, ms profundidad
en CSS, optimizacin de sitios y cache. Ms informacin sobre estos temas y como continuar, en
el captulo Cmo seguir.

Introduccin

Profundidad de los temas

Este libro no intenta cubrir exhaustivamente los temas tratados porque:
Vivimos en una poca en la que el acceso a Internet es cada vez ms amplio
La informacin est disponible al punto de ser un problema por exceso
Al profundizar y tratar los detalles es ms probable que estos detalles cambien a medida
que pasa el tiempo.
Por lo tanto se mantendr la descripcin en un nivel mnimo y se har referencia a cmo
continuar el aprendizaje.

Auto-aprendizaje
Por ser el material de acompaamiento de un curso, no se incluyen en este libro las instrucciones
detalladas para realizar la actividades En los casos que existan, se incluirn las referencias
correspondientes.
No est pensado como un material para auto-aprendizaje. Varias de las actividades estn
pensadas para trabajar en grupos.
Si realmente quieres utilizar el libro para auto-aprendizaje, por favor avsanos cmo mejorarlo.

Para docentes
No est incluidas instrucciones sobre la preparacin del docente o facilitador. Si eres docente y
te interesa realizar el curso, comuncate con los autores.

1.5 Ms materiales, cursos y Kleer

Kleer es una empresa que realiza cursos y consultora en Latinoamrica. En Kleer creemos que
hay otras formas de relacionarnos para conseguir resultados fantsticos que nos hagan sentir
orgullosos.
Dentro de esta visin, ayudamos a personas y organizaciones a cambiar su forma de trabajo,
incorporando desarrollo gil, facilitacin grfica, comunicacin y manejo del tiempo personal.
Y siempre estamos agregando cursos y actividades comunitarias.
En el sitio de Kleer hay material adicional disponible incluyendo Introduccin a Scrum y
Desarrollo gil, Estimacin y Planificacin usando Scrum, Tcnicas para Retrospectivas, y otras
publicaciones que vamos agregando peridicamente.
http://kleer.la
http://www.kleer.la/entrenamos
http://www.kleer.la/comunidad
http://www.kleer.la/publicamos

2 Internet
2.1 Dominios, direcciones IP y puertos
Podemos comunicar computadoras en cualquier lugar del mundo gracias al conjunto de tecnologas y estndares que llamamos colectivamente Internet.
Para conectarnos, debemos poder identificar con quien nos queremos conectar, lo que logramos
con su dominio (como wikipedia.org), o su direccin IP (como 208.80.154.255).
La direccin IP funciona como un nmero telefnico, que nos permite llamar a cualquier telfono
del mundo. El dominio funciona como el nombre, y nos permite comunicarnos con quien
queremos aunque haya cambiado su nmero telefnico.
Como con el telfono, con el que podemos hablar o enviar un fax, tambin a travs de Internet
podemos tener distintas formas de comunicacin, que llamamos protocolos. As tenemos, entre
muchos otros, SSH y Telnet, que nos permiten conectarnos y realizar operaciones en otra
computadora, FTP que nos permite transferir archivos, SMTP que permite enviar mails, y HTTP
que permite transmitir hipertexto, que es lo que conocemos usualmente como la web.

2.2 La web: HTTP y HTML

Como una empresa que puede tener un nmero de telfono que reciba mltiples llamados a la
vez, el mismo servidor (identificado por dominio o IP) puede responder a varias comunicaciones
simultneamente.
Adicionalmente, los servidores web pueden recibir conexiones en diferentes puertos. Hay
puertos estndar para cada protocolo, como el puerto 80 para HTTP, pero podemos cambiarlos, y
en mucho casos filtrarlos. Por ahora nos alcanza recordar que cuando escribimos una direccin en
nuestro navegador sin indicar otra cosa, vamos a tratar de conectarnos al puerto 80 del servidor.
As como necesitamos que una persona o un fax para que atienda una lnea telefnica,
necesitamos que una aplicacin est ejecutndose y escuchando un puerto para que nos responda
una peticin.
Es comn en servidores de desarrollo tener aplicaciones web (que usan protocolo HTTP) en los
puertos 8080 u 8000, para no interferir con aplicaciones que escuchen el puerto 80 que como
dijimos, es el ms comn. El nmero de puerto se agrega al final de la direccin, separado por
dos puntos.
As la direccin de prueba de una aplicacin podra ser: http://localhost/miaplicacion:8080
http://es.wikipedia.org/wiki/Internet
En la ciudad de Alejandra hicieron una actividad para explicar el uso de redes libres y la comunicacin de manera sencilla (ver la ley de

Metcalfe http://es.wikipedia.org/wiki/Ley_de_Metcalfe).
http://es.wikipedia.org/wiki/Hipertexto

Internet

Cuando ponemos una direccin cualquiera, como: http://www.wikipedia.org/

es lo mismo que si escribisemos: http://www.wikipedia.org/:80
Podemos hablar por telfono en espaol, ingls o portugus, o enviar faxes en diferentes idiomas.
En el caso de HTTP, el servidor puede responder la informacin solicitada usando lenguajes
como texto plano, XML, JSON o HTML, entre otros. Ms adelante hablaremos de varios de ellos
en ms detalle.
En resumen, para una comunicacin con una aplicacin web en Internet debemos conocer el
servidor (por su dominio o IP), el puerto en el que est escuchando (normalmente el 80), el
protocolo (normalmente HTTP), y qu tipo de contenido genera (normalmente HTML).
En el resto del libro nos centraremos en la combinacin HTTP y HTML, que es la base de la Web
( o World Wide Web).
Pero recordemos que Internet es mucho ms que eso, incluyendo mail, chat, video, audio, juegos,
servicios y muchas ms cosas que no accedemos a travs de un navegador convencional, que es
lo que solemos conocer como la Web.
http://es.wikipedia.org/wiki/World_Wide_Web

3 HTTP
Hypertext Transfer Protocol o HTTP (en espaol: protocolo de transferencia de hipertexto) es
el protocolo usado en cada transaccin de la World Wide Web. HTTP define la sintaxis y la
semntica que utilizan los elementos de software de la arquitectura web (clientes, servidores,
proxies) para comunicarse. Es un protocolo orientado a transacciones y sigue el esquema
peticin-respuesta (Request-response) entre un cliente y un servidor. El cliente (por ejemplo un
navegador web) efecta la peticin, y el servidor responde realizando la accin requerida. A la
informacin retornada o modificada se la llama recurso y se la identifica mediante un localizador
uniforme de recursos (URL). Los recursos pueden ser, del lado del servidor: archivos, el resultado
de la ejecucin de un programa, una consulta a una base de datos, la traduccin automtica de
un documento, etc. Del lado del cliente son todos iguales, una respuesta a una peticin.
HTTP es un protocolo sin estado; es decir que no guarda ninguna informacin sobre conexiones
anteriores. Esta desconexin tras cada interaccin peticin-respuesta puede parecer una debilidad en principio, pero es lo que da robustez y capacidad de escalar a la web en general. Parte
del problema es que -como sabemos- entre una peticin y la siguiente pueden pasar segundos,
minutos, horas o das. Si el servidor tuviese que mantenerse conectado con cada cliente posible,
las conexiones se le agotaran pronto.
El desarrollo de aplicaciones web, sin embargo, necesita frecuentemente mantener estado. Para
esto se usan varios mecanismos. El ms bsico y limitado es agregar parmetros en la URL
direccin de la pgina web, como vemos a menudo. El ms popular son las cookies, que es
informacin que el servidor enva, pero se almacena en el sistema cliente (es algo estndar
soportado por todos los navegadores). Esto le permite a las aplicaciones web instituir la nocin
de sesin, ya que las cookies pueden guardarse en el cliente por un tiempo determinado, variando
de minutos a siglos.

3.1 Peticin (Request)

Cada peticin tiene un verbo o mtodo de peticin, que le indica al servidor qu operacin realizar
y qu datos incluir en la respuesta. Hay 8 verbos, pero la mayora de las veces se usan slo dos:
GET Corresponde a una consulta. Esta operacin no debera modificar el recurso en el
servidor. Se puede enviar informacin adicional para buscar el contenido. Esta informacin se denomina Query String y es visible para el usuario final. Por ejemplo, en
http://ejemplo.com?id=12 el query string es lo que est luego del signo ?; en este caso
id=12. Este dato adicional es tpicamente algo que usaremos como un parmetro en la
aplicacin del servidor para realizar un clculo, buscar en una base de datos, etc.
http://es.wikipedia.org/wiki/Http

HTTP

POST
Corresponde a una operacin que crea o modifica los recursos del servidor. Se puede enviar
una cantidad arbitraria de datos. Los datos no son visibles para el usuario. Es el mecanismo
que se utiliza tpicamente cuando completamos un formulario en una pgina, al hacer clic
sobre el botn de confirmacin. El navegador pone todos los datos del formulario en una
peticin con este verbo y de esa manera los enva al servidor para que sean procesados.
Adems del verbo, la peticin incluye un encabezamiento con informacin que puede usar tanto
el servidor como los equipos intermedios que existen en Internet, como: Cookies, uso de Cache,
identificador de cliente (user agent) qu hace la peticin, tipo de respuesta esperada, etc.
Hay maneras de ver los valores de la peticin en el navegador. Por ejemplo en Chrome, usando
las herramientas de desarrollo (Ctrl+Shft+I), en la solapa de Red (Network) se pueden ver las
peticiones realizadas y haciendo click sobre una de ellas, se puede ver los datos que tuvo la
peticin y los datos devueltos en la respuesta.

Peticin

3.2 Respuesta (Response)

La respuesta incluye un encabezamiento y un cuerpo. El encabezamiento (header) tiene
informacin sobre el estado o resultado de la peticin origen, Cookies, uso de Cache, informacin
sobre el cuerpo (longitud, codificacin de los caracteres, tipo), etc.
El estado es un nmero cuyo significado general se puede conocer por el rango:
1xx Informativos, no muy utilizados
http://en.wikipedia.org/wiki/List_of_HTTP_headers#Responses
http://en.wikipedia.org/wiki/List_of_HTTP_headers#Requests

HTTP

2xx xito, la peticin fue aceptada y procesada. El cdigo ms comn es el 200 (Ok), que
significa que todo sali segn lo esperado.
3xx Redireccin a otro URL. En algunos casos es resuelta automticamente por el cliente.
4xx Errores correspondientes al cliente. El ms comn es el 404 (No encontrado), correspondiente a una peticin de un recurso que no est presente en el servidor.
5xx Errores correspondientes al servidor, que no pudo procesar correctamente una peticin. El
ms comn es el 500, correspondiente a un error interno en el servidor.
El cuerpo (body) de la respuesta contiene la informacin pedida (GET) o el resultado de la
operacin (POST). Puede ser un texto plano (sin estructura), HTML, XML, JSON (datos con el
formato de objeto JavaScript) u otros.

3.3 Cookies
Una cookie (o galleta informtica) es un paquete de informacin enviado por un sitio web y
almacenado en el navegador del usuario, de manera que el sitio web que la envi en una respuesta
puede consultar la actividad previa del usuario ante una peticin posterior.
Las cookies son utilizadas habitualmente por los servidores web para diferenciar usuarios y para
actuar de diferente forma dependiendo de stos. Tambin es una forma de mantener el estado de
usuario (por ejemplo, su ltima operacin, si pas o no por una pgina, si tiene o no productos en
un carrito de compras), y mantenerlo identificado a travs de varias pginas dentro del mismo
sitio.
Por medio del uso de cookies se puede tener memoria de las acciones pasadas de los usuarios a
pesar de estar trabajando con una tecnologa (HTTP) sin estado. Es importante destacar que las
cookies son enviadas por un servidor en el contexto de un dominio deteminado y slo pueden
ser accedidas desde ese mismo dominio. De esta manera, por ejemplo, Google no puede ver
las cookies que guard Yahoo, ni un sitio cualquiera puede ver las que hubiese dejado nuestro
banco, ms all de que se intente dejar informacin mnima, encriptada, etc.
http://es.wikipedia.org/wiki/Cookie_(inform%C3%A1tica)

4 HTML5
HTML (HyperText Markup Language, Lenguaje de marcado de hiper-texto) es un lenguaje
creado en los inicios de la web para poder dar estructura (y originalmente, algo de formato) a las
pginas.
HTML5 es la versin actual, en la que se ha hecho un esfuerzo especial para que la forma en que
se presenta la informacin (usando CSS) est separada de la estructura. Tambin en esta versin
se incorpora soporte nativo para varios tipos de informacin adicional (vdeos, audio, etc.) en
igualdad de condiciones que el texto y las imgenes, sin necesidad de componentes adicionales
plug-ins (como Flash, Shockwave, Java applets, Silverlight y otros, que era la manera en que este
tipo de medios se incorporaba anteriormente). Lo que muestran los navegadores al visitar una
pgina web (si no se usan plug-ins adicionales) es HTML renderizado: se muestra el contenido
(texto, vdeo, audio, etc) aplicando los estilos (CSS) y las opciones que el usuario haya definido
en el navegador (como por ejemplo tamao de texto).
En lo que resta de este libro si no lo mencionamos especficamente, estaremos hablando siempre
de HTML5, ya que las versiones anteriores estn cayendo en desuso rpidamente.
La forma en que se marca el texto es con tags (etiquetas). Hay varios tipos de lenguajes de
marcado. HTML es un sucesor de un lenguaje ms general llamado SGML del cual deriva tambin
XML. Veamos cmo funcionan estos tags:

4.1 Elementos
Un elemento HTML tiene la forma <tag atributo="valor">contenido</tag>.
<tag >
Apertura del tag, indica que tipo de elemento es (por ejemplo, un prrafo, un ttulo, una
imagen, etc).
atributo=valor
Un atributo del tag, que nos sirve para agregar informacin importante sobre lo que
estamos representando, pero para ser interpretada por el navegador mismo, o utilizada
por nuestra aplicaciones. Existen atributos globales, que aplican a todos los tags (como id,
class, style) y otros que dependen del tag (como el atributo href para el tag a).
contenido
Texto contenido entre los tags. Esto es lo que aparece usualmente en el navegador
http://es.wikipedia.org/wiki/HTML
http://es.wikipedia.org/wiki/HTML5
http://es.wikipedia.org/wiki/Xml

HTML5

10

</tag>
Cierre del tag. Puede omitirse en el caso de elementos vacos o autocontenidos en los que
el mismo tag sirve de apertura y cierre. Por ejemplo <br/> que representa un salto de linea
<hr/> que representa un salto temtico en medio de un texto (y por omisin se ve como
una lnea horizontal)

documento mnimo HTML5

<!DOCTYPE html>
<html>
<head>
<title>Ttulo del documento</title>
</head>
<body>
Contenido del documento
</body>
</html>

DOCTYPE
Define el tipo de documento, para HTML5 es html.
html
Indica el inicio y fin de de la pgina. Contiene todos los elementos del documento.
head
Es un contenedor para la meta-informacin, y el lugar recomendado para incluir estilos
y scripts. Debe incluir un ttulo, y puede tener tags como meta, link, style y script. Ms
adelante veremos el uso de algunos de ellos.
body
Es donde gran parte de la magia sucede, porque es donde va el contenido visible de la
pgina, con la gran mayora de los tags, como p, form, input, div, h1..h6, a, table, img, div.

4.2 Texto
Sobre el texto se puede indicar los prrafos (p) y distintos niveles de encabezamiento para ttulos
y subttulos (h1, h2, h3, h4, h5, h6). Los espacios no son significativos, por lo que un texto con
muchos espacios intermedios no necesariamente se mostrar separado.
La codificacin del texto debe indicarse en el encabezamiento con un elemento meta, por
ejemplo <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">. De no
estar indicado, los navegadores modernos tratan de inferir la codificacin de los caracteres en
base a los contenidos.
http://www.w3schools.com/tags/ref_standardattributes.asp

11

HTML5

Para incorporar como contenido caracteres que tienen un sentido especial (reservados) se utilizan
entidades (entities). Los ms comunes son &nbsp; que corresponde a un espacio en blanco (nonbreaking space), &lt; que corresponde a < (less than) y &gt; que corresponde a > (greater than).
Como estos ltimos smbolos se utilizan para abrir y cerrar los tags, cuando queremos mostrarlos
tenemos que recurrir a estas entidades.
Tambin se pueden indicar caracteres acentuados para evitar depender de la codificacin
del encabezamiento, la codificacin que usamos en nuestros editores y la inferencia de los
navegadores. Por ejemplo la es &aacute;.

Ejemplo de prrafo con encabezamientos y entidades

<!DOCTYPE html>
<html><head/><body>
<h1>Ejemplos de textos</h1>
<h2>Entidades para palabras reservadas</h2>
<p> Un p&aacute;rrafo&nbsp;&nbsp;&nbsp; con espacios &lt; que 4</p>
</body></html>

El resultado del HTML anterior se ve en un navegador de esta manera:

Resultado

4.3 Enlace o Vnculo (Link)

Los enlaces permiten que el usuario pase a otra pgina o documento. Tienen la forma <a
href="http://www.w3schools.com/html">El lugar para aprender HTML</a>. El atributo
href es una URL, y puede ser absoluto o relativo. En el ejemplo, anterior, se indica un
URL absoluto. Estando en la pgina del ejemolo, podemos referirnos a otra pgina como <a
href="http://www.w3schools.com/html/tryit.asp"> o <a href="/html/tryit.asp"> o <a
href="tryit.asp">.
Las URL que empiezan con / corresponden a direcciones absolutas dentro del dominio actual. Si
no empiezan con / son relativas a esta pgina.

4.4 Formulario (Form)

Los formularios HTML forms se usan para ingresar y enviar datos del usuario al servidor. El
formulario es un elemento definido con el tag <form>, y dentro se incluyen los campos de datos
http://www.w3schools.com/html/html_forms.asp

HTML5

12

que debe ingresar el usuario con elementos <input> mezclados con otros elementos.
Un formulario HTML5 puede contener elementos de ingreso de diferentes tipos:

de texto (type="text)
opciones con seleccin mltiple (type="checkbox)
alternativas (type="radio)
contraseas (type="password)
y el botn para enviar lo datos del formulario al servidor (type="submit)

Tambin se pueden tener opciones en listas desplegables: un elemento select que contiene dentro
otros elementos option.
Hay tipos adicionales y elementos adicionales, incorporados en HTML5. Deben usarse luego
de investigar como se comportan en los navegadores a los que nuestra aplicacin soportar, ya
que en este momento HTML5 no est absolutamente implementado en ningn navegador.

Formulario con distintos tipos de campos

<!DOCTYPE html>
<html>
<body>
<form name="input" action="/persona/nuevo" method="put">
<p>Nombre: <input type="text" name="nombre"/></p>
<p>Apellido: <input type="text" name="lastname"/></p>
<p><input type="radio" name="sexo" value="masculino"/>Masculino &nbsp;
<input type="radio" name="sexo" value="femenino"/>Femenino</p>
<p><input type="checkbox" name="vehicle" value="biciclera">Tengo bicicleta<br>
<input type="checkbox" name="vehicle" value="automovil">Tengo automovil
<select name="automovil">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select></p>
<input type="submit" value="Confirmar">
</form>
</body>
</html>

El resultado del formulario HTML anterior se ve en un navegador de esta manera:

http://www.w3schools.com/html/html5_form_input_types.asp
http://www.w3schools.com/html/html5_form_elements.asp
http://html5test.com

13

HTML5

Resultado

5 CSS
Las hojas de estilo en cascada o CSS (Cascading Style Sheets) hacen referencia a un lenguaje
usado para describir la presentacin visual (el aspecto y formato) de un documento escrito en
lenguaje de marcado. Su aplicacin ms comn es dar estilo a pginas webs escritas en lenguaje
HTML, aunque tambin puede ser aplicado a cualquier tipo de documentos XML, incluyendo
SVG y XUL. Vamos a concentrarnos solamente en su uso con HTML.
La informacin de estilo puede ser adjuntada como un documento separado o en el mismo
documento HTML. En el primer caso, con un vnculo (link) en el encabezamiento; en el segundo
caso pueden definirse estilos generales en la cabecera del documento con un elemento (por
ejemplo <style>p {color:yellow;}</style>) o en cada tag (etiqueta) particular mediante el
atributo style (por ejemplo <p style=color:yellow;>Hola</p>).
CSS consiste en una serie de reglas, formada cada una por un selector y un bloque de estilos. Un
bloque de estilos consiste en una serie de pares propiedad=valor; entre llaves ({})
Los selectores marcarn qu elementos se vern afectados por el bloque de estilo que les siga.
Hay selectores en funcin de su tipo (por ejemplo p o h1), ID (#id_del_elemento), clase (.times),
etc. Un elemento html puede ser afectado por el estilo de varios selectores (esa es la razn por la
que hablamos de estilos en cascada de los CSS).
Un ejemplo de una parte de una hoja de estilos CSS:

ejemplo.css

body {background-color:#d0e4fe;}
h1
{color:orange;font-size:36pt;text-align:center;}
h2
{color:blue;}
p
{margin-left:50px;}
.times
{font-family:"Times New Roman";font-size:20px;}

ejemplo.html

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ejemplo.css">
<body>
<h1>Ejemplos de textos</h1>
<h2>Entidades para palabras reservadas</h2>
http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada

15

CSS

<p> Un p&aacute;rrafo&nbsp;&nbsp;&nbsp; con espacios &lt; que 4</p>

<p class="times"> Un texto con class.</p>
</body></html>

El resultado del HTML anterior se ve en un navegador de esta manera:

Resultado

En el ejemplo se ven dos formas de indicar colores, con nombre predefinidos o con RBG
hexadecimal. Tambin se usan distintas unidades para la definicin de tamaos: por pixels y
por puntos (ver las unidades en CSS).
http://www.w3schools.com/CSSref/css_colornames.asp
http://www.w3schools.com/CSSref/css_colors.asp
http://www.w3schools.com/cssref/css_units.asp

6 Aplicaciones Web
Los primeros sitios web era exclusivamente pginas HTML estticas. Llamamos esttica a una
pgina HTML que no cambia, no depende de datos, debe ser modificada y vuelta a grabar. Por
ejemplo una persona que identifica nuevo contenido para agregar a su pgina personal, edita el
archivo HTML para incorporarlo.
Actualmente existen an pginas estticas, pero la gran mayora de las pginas que vemos en
Internet son dinmicas. Llamamos dimmica a una pgina que se genera mediante un programa,
para generar una respuesta especfica (response) dependiendo del pedido (request) del usuario.

6.1 Aplicacin mnima

A continuacin mostraremos una aplicacin mnima usando los lenguajes de programacin PHP,
Ruby y Python. Mientras que PHP est diseado casi exclusivamente para la web, en Ruby y
Python utilizan bibliotecas livianas (o micro-frameworks) para este tipo de desarrollo.
La funcionalidad es mnima: permite ingresar un nombre, y luego se muestra un mensaje de
bienvenida personalizado. Por simplicidad, este mensaje de bienvenida es un texto plano, ni
siquiera es HTML.
En todos los casos, cuando mencionamos como direccin localhost, nos referimos al servidor
web que tenemos funcionando en nuestra propia computadora, y que usamos exclusivamente
para probar mientras desarrollamos.

PHP
En PHP con Apache (el servidor HTTP que tiene el 60% del mercado) se colocan los archivos en el
directorio inicial (en unix, /var/www; en OS X usualmente /Library/WebServer/Documents/).
Se puede acceder a la aplicacin yendo con el navegador a localhost las instalaciones por defecto
consideran que una pgina index.html

index.html

<!DOCTYPE HTML>
<html>
<body>
<form action="hola.php" method="post">
Nombre: <input type="text" name="nombre">
<input type="submit">
</form>
</body>
</html>

Aplicaciones Web

17

hola.php

<?php
Echo "Hola, " . $_POST["nombre"]. "!";
?>

Python y Flask
En Python con Flask, se puede ejecutar un servidor de prueba python hola.py y se puede
acceder a la aplicacin yendo con el navegador a localhost:5000

templates/hola.html

<!DOCTYPE HTML>
<html>
<body>
<form action="hola" method="post">
Nombre: <input type="text" name="nombre">
<input type="submit">
</form>
</body>
</html>

hola.py

from flask import Flask, request, render_template

app = Flask(__name__)
@app.route('/')
def quien():
return render_template('hola.html');
@app.route('/hola', methods = ['POST'])
def hola():
return 'Hola, %s!' % request.form['nombre'];
if __name__ == '__main__':
app.run()
http://flask.pocoo.org/

Aplicaciones Web

18

Ruby y Sinatra
En Ruby con Sinatra se puede ejecutar un servidor de prueba ruby hola.rb y se puede acceder
a la aplicacin yendo con el navegador a localhost:4567

views/hola.erb

<!DOCTYPE HTML>
<html>
<body>
<form action="hola" method="post">
Nombre: <input type="text" name="nombre">
<input type="submit">
</form>
</body>
</html>

hola.rb

require 'sinatra'
get '/' do
erb :hola
end
post '/hola' do
"Hola, #{params[:nombre]}!"
end

6.2 URL semnticas

Las URL semnticas, limpias amigables son URL en las que se refleja la estructura de la
informacin de la pgina, sin detalles de implementacin.
Se hace esto para simplificar el uso de la URL, tanto por humanos como para obtener enlaces
permanentes. Tambin mejoran el posicionamiento de las pginas en los buscadores (una prctica
conocida como Search Engine Optimization o SEO).
Por ejemplo, la URL:
http://ejemplo.com/servicios/index.jsp?categoria=2&id=334

Podra reemplazarse por

http://www.sinatrarb.com/

Aplicaciones Web

19

http://ejemplo.com/servicios/legal/categoria/patentes_medicas

En los ejemplos que mostramos tanto en Ruby como en Python usamos URL limpias (http://localhost/hola)
e idnticas a pesar de las diferentes plataformas, mientras que el ejemplo PHP tiene detalles de
implementacin (http://localhost/hola.php).
Los frameworks y herramientas modernas de desarrollo web soportan, facilitan y promueven el
uso de URL semnticas.

7 Como seguir
Este libro contiene lo que consideramos conceptos mnimos para iniciarse en el aprendizaje del
desarrollo web.
Si el lector quiere empezar a desarrollar, deber seguir aprendiendo en mucha mayor profundidad. El aprendizaje nunca termina, menos an en una disciplina con tan rpida evolucin como
sta.
Queremos terminar este libro con los temas que nos hubiese gustado incluir, pero hubiesen hecho
este libro mucho ms extenso y nos obligaran tambin a entrar en detalles muchsimo ms
tcnicos.
JavaScript
las aplicaciones Web modernas son posibles gracias a Javascript en el cliente. Y ms an, se
comienza a utilizar Javascript para la parte de servidor de las aplicaciones. Es un mbito de
evolucin muy rpida, por lo que las tecnologas y herramientas cambian continuamente.
Pods empezar con lo bsico en w3schools.com, y utilizar bibliotecas que facilitan y
potencian el desarrolo, como JQuery.
AJAX o Asynchronous JavaScript And XML
Es un conjunto de tecnologas y prcticas que permiten actualizar el contenido de una
pgina en forma parcial y asncrona, logrando aplicaciones web de comportamiento ms
rico (RIA).
Seguridad
actualmente en el desarrollo de toda aplicacin web debe tenerse en cuenta la seguridad.
Un buen lugar para empezar es la Lista de las 10 vulnerabilidades ms comunes, de
OWASP.
Web 2.0
Aplicaciones Web en las que los usuarios generan contenido y se comunican directamente
entre s. Se logran mucha mayor permanencia de los usuarios en sitio. El valor del sitio
aumenta con el nmero de usuarios (efecto de red). Diseo centrado en el usuario, y por
ello, con fuerte uso de JavaScript y AJAX.
CSS - Uso Avanzado
Las pginas modernas manejan sus estilos separados del HTML y dependiendo fuertemente de hojas de estilos. Combinados con atributos div y span, se logran interfases de usuarios
ricas. Han surgido adems bibliotecas para simplificar la utilizacin de estilos consistentes
y modernos (como Bootstrap).
Escalabilidad y velocidad de respuesta
Los sitios masivos requieren el uso de tcnicas especficas para la optimizacin del uso
de los recursos tanto de los servidores como de las omputadoras de los usuarios. Estas

Como seguir

21

tcnicas y herramientas son las que permiten el funcionamiento de sitios que responden
a miles de pginas por minuto. Algunos de los temas a considerar son optimizacin de
bases de datos, diferentes niveles de caching, minifying, compresin de respuestas, reverse
proxy, granjas de servidores, balanceo de carga, y muchas ms.

http://www.w3schools.com/js/default.asp
http://jquery.com
https://es.wikipedia.org/wiki/AJAX
https://es.wikipedia.org/wiki/Rich_Internet_Application
https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project
http://getbootstrap.com/