intro lengua jes web

7/24/2019 Intro Lengua Jes Web

http://slidepdf.com/reader/full/intro-lengua-jes-web 1/25



Introducción a los lenguajes de la WebLo mínimo que debes saber de HTTP, HTML y CSS para

desarrollar aplicaciones Web

Juan Gabardini y Martín Salías

Este libro está a la venta en http://leanpub.com/introlenguajesweb

Esta versión se publicó en 2013-10-02

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

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

http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US



http://leanpub.com/manifesto

http://leanpub.com/

http://leanpub.com/introlenguajesweb



¡Twitea sobre el libro!Por favor ayuda a Juan Gabardini y Martín Salías 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 buscarel hashtag en Twitter:

https://twitter.com/search/#introlenguajesweb



http://twitter.com/



Índice general

1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 ¿Qué me enseña este libro? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.3 ¿Qué pasa cuando ingreso una dirección en mi navegador? . . . . . . . . . . . . 1

1.4 Lo que no es este libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.5 Más materiales, cursos y Kleer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1 Dominios, direcciones IP y puertos . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 La web: HTTP y HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.1 Petición (Request ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.2 Respuesta (Response ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.3 Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4.1 Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94.2 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.3 Enlace o Vínculo (Link ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114.4 Formulario (Form ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

5 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

6 Aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

6.1 Aplicación mínima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

6.2 URL semánticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Como seguir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20



1 Introducción¡Este libro evoluciona!Una de las ventajas de editar los libros en formato electrónico es que siempre puedenmejorarse en base al feedback recibido. La edición original de este libro se llevó a cabode manera iterativa e incremental, recibiendo e incorporando sugerencias de amigos ylectores de todas partes. Pero ese proceso no stá completamente terminado, e invitamosa todo lector a enviarnos más ideas sobre este u otros libros.

Por favor, envianos tus comentarios a [email protected] ó [email protected]¡Muchas Gracias!

1.1 Objetivo

Este libro está pensado como parte del material de soporte para un curso de 32 hs. El objetivodel curso y del material asociado es que los asistentes / lectores logren una experiencia completa,aunque breve, de desarrollo de una aplicación web usando metodologías ágiles. El materialcompleto del curso incluye:

• Introducción a Scrum y desarrollo ágil

• Lenguajes de la Web (HTTP, HTML, CSS): ¡Este libro!

• Desarrollo ágil de software

1.2 ¿Qué me enseña este libro?

Al finalizar las actividades explicadas en este libro podrás construir páginas web estáticas (HTML

y CSS), y entenderás el funcionamiento básico de una aplicación web. Este libro cubre losrudimentos, no conceptos técnicos avanzados ni prácticas específicas de diseño o usabilidad.

En todos los casos incluímos el contenido mínimo de cada una de estas disciplinas.

1.3 ¿Qué pasa cuando ingreso una dirección en minavegador?

Para que tengas una idea clara del alcance del libro, describimos el flujo de información alintentar acceder una página web y te contamos en qué parte del libro explicamos en más detalle

cada paso y tecnología involucrada.



Introducción 2

1. Ingreso en el navegador la dirección del la página que quiero acceder (por ejemplo:www.w3.org).Hablaremos sobre direcciones en el capítulo Internet.

2. El navegador prepara un mensaje a esa dirección, solicitando la página.Sobre el contenido del mensaje hablaremos en el capítulo HTTP.

3. El servidor que tiene esa dirección recibe el mensaje, y se lo pasa a la aplicación webcorrespondiente. La aplicación, prepara la página que se está pidiendo (consultandoarchivos y bases de datos si fuera necesario).Presentaremos ejemplos sencillos en el capítulo Aplicaciones Web.

4. El servidor envía un mensaje con la respuesta (que incluye la página) al equipo que realizóel pedido.Esto lo veremos en el capítulo HTTP.

5. Cuando el mensaje llega lo recibe el navegador, que lo interpreta y muestra según

corresponda, pidiendo recursos adicionales a la aplicación web, como imágenes o archivosde estilos, si así lo indica la página.Sobre como se muestra la página hablaremos en los capítulos 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 profesionalde aplicaciones web debe conocerlos. Una vez conocido los temas básicos incluidos aquí, terecomendamos fuertemente que continúes con: JavaScript, AJAX, Seguridad, más profundidaden CSS, optimización de sitios y cache. Más información sobre estos temas y como continuar, enel capítulo Cómo seguir.



Introducción 3

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 más amplio

• La información está disponible al punto de ser un problema por exceso

• Al profundizar y tratar los detalles es más probable que estos detalles cambien a medidaque pasa el tiempo.

Por lo tanto se mantendrá la descripción en un nivel mínimo y se hará referencia a cómocontinuar el aprendizaje.

Auto-aprendizaje

Por ser el material de acompañamiento de un curso, no se incluyen en este libro las instruccionesdetalladas para realizar la actividades En los casos que existan, se incluirán las referenciascorrespondientes.

No está pensado como un material para auto-aprendizaje. Varias de las actividades estánpensadas para trabajar en grupos.

Si realmente quieres utilizar el libro para auto-aprendizaje, por favor avísanos cómo mejorarlo.

Para docentes

No está incluidas instrucciones sobre la preparación del docente o facilitador. Si eres docente yte interesa realizar el curso, comunícate con los autores.

1.5 Más materiales, cursos y Kleer

Kleer¹ es una empresa que realiza cursos y consultoría en Latinoamérica. En Kleer creemos quehay otras formas de relacionarnos para conseguir resultados fantásticos que nos hagan sentirorgullosos.

Dentro de esta visión, ayudamos a personas y organizaciones a cambiar su forma de trabajo,incorporando desarrollo ágil, facilitación gráfica, comunicación y manejo del tiempo personal.Y siempre estamos agregando cursos² y actividades comunitarias³.

En el sitio de Kleer hay material adicional⁴ disponible incluyendo Introducción a Scrum yDesarrollo Ágil, Estimación y Planificación usando Scrum, Técnicas para Retrospectivas, y otraspublicaciones que vamos agregando periódicamente.

¹http://kleer.la

²http://www.kleer.la/entrenamos

³http://www.kleer.la/comunidad

⁴http://www.kleer.la/publicamos

http://www.kleer.la/publicamos

http://www.kleer.la/comunidad

http://www.kleer.la/entrenamos

http://kleer.la/

http://www.kleer.la/publicamos

http://www.kleer.la/comunidad

http://www.kleer.la/entrenamos

http://kleer.la/



2 Internet2.1 Dominios, direcciones IP y puertos

Podemos comunicar computadoras en cualquier lugar del mundo gracias al conjunto de tecno-logías y estándares que llamamos colectivamente Internet¹.

Para conectarnos, debemos poder identificar con quien nos queremos conectar, lo que logramoscon su dominio (como wikipedia.org), o su dirección IP (como 208.80.154.255).

La dirección IP funciona como un número telefónico, que nos permite llamar a cualquier teléfonodel mundo. El dominio funciona como el nombre, y nos permite comunicarnos con quienqueremos aunque haya cambiado su ‘número telefónico’.

Como con el teléfono², con el que podemos hablar o enviar un fax, también a través de Internetpodemos tener distintas formas de comunicación, que llamamos protocolos. Así tenemos, entremuchos otros, SSH y Telnet, que nos permiten conectarnos y realizar operaciones en otracomputadora, FTP que nos permite transferir archivos, SMTP que permite enviar mails, y HTTPque 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 número de teléfono que reciba múltiples llamados a lavez, el mismo servidor (identificado por dominio o IP) puede responder a varias comunicacionessimultáneamente.

Adicionalmente, los servidores web pueden recibir conexiones en diferentes “puertos”. Haypuertos estándar para cada protocolo, como el puerto 80 para HTTP, pero podemos cambiarlos, yen mucho casos filtrarlos. Por ahora nos alcanza recordar que cuando escribimos una dirección ennuestro 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 línea telefónica,

necesitamos que una aplicación esté ejecutándose y escuchando un puerto para que nos respondauna petición.

Es común en servidores de desarrollo tener aplicaciones web (que usan protocolo HTTP) en lospuertos 8080 u 8000, para no interferir con aplicaciones que escuchen el puerto 80 que comodijimos, es el más común. El número de puerto se agrega al final de la dirección, separado pordos puntos.

Así la dirección de prueba de una aplicación podría 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 comunicación de manera sencilla (ver la ley deMetcalfe http://es.wikipedia.org/wiki/Ley_de_Metcalfe).

³http://es.wikipedia.org/wiki/Hipertexto

http://es.wikipedia.org/wiki/Hipertexto

http://www.elgalpondebanquito.com.ar/redes-libres-alejandra-capitulo-3/

http://es.wikipedia.org/wiki/Internet

http://es.wikipedia.org/wiki/Hipertexto

http://es.wikipedia.org/wiki/Internet



Internet 5

Cuando ponemos una dirección cualquiera, como: http://www.wikipedia.org/

es lo mismo que si escribiésemos: http://www.wikipedia.org/:80

Podemos hablar por teléfono en español, inglés o portugués, o enviar faxes en diferentes idiomas.

En el caso de HTTP, el servidor puede responder la información solicitada usando “lenguajes”como texto plano, XML, JSON o HTML, entre otros. Más adelante hablaremos de varios de ellosen más detalle.

En resumen, para una comunicación con una aplicación web en Internet debemos conocer elservidor (por su dominio o IP), el puerto en el que está escuchando (normalmente el 80), elprotocolo (normalmente HTTP), y qué tipo de contenido genera (normalmente HTML).

En el resto del libro nos centraremos en la combinación HTTP y HTML, que es la base de la Web

( o World Wide Web⁴).

Pero recordemos que Internet es mucho más que eso, incluyendo mail, chat, video, audio, juegos,

servicios y muchas más cosas que no accedemos a través de un navegador convencional, que eslo que solemos conocer como la Web.

⁴http://es.wikipedia.org/wiki/World_Wide_Web

http://es.wikipedia.org/wiki/World_Wide_Web

http://es.wikipedia.org/wiki/World_Wide_Web



3 HTTPHypertext Transfer Protocol o HTTP¹ (en español: protocolo de transferencia de hipertexto) esel protocolo usado en cada transacción de la World Wide Web. HTTP define la sintaxis y lasemántica que utilizan los elementos de software de la arquitectura web (clientes, servidores,proxies) para comunicarse. Es un protocolo orientado a transacciones y sigue el esquemapetición-respuesta (Request-response ) entre un cliente y un servidor. El cliente (por ejemplo unnavegador web) efectúa la petición, y el servidor responde realizando la acción requerida. A lainformación retornada o modificada se la llama recurso y se la identifica mediante un localizadoruniforme de recursos (URL ). Los recursos pueden ser, del lado del servidor: archivos, el resultado

de la ejecución de un programa, una consulta a una base de datos, la traducción automática deun documento, etc. Del lado del cliente son todos iguales, una respuesta a una petición.

HTTP es un protocolo sin estado; es decir que no guarda ninguna información sobre conexionesanteriores. Esta desconexión tras cada interacción petición-respuesta puede parecer una debili-dad en principio, pero es lo que da robustez y capacidad de escalar a la web en general. Partedel problema es que -como sabemos- entre una petición y la siguiente pueden pasar segundos,minutos, horas o días. Si el servidor tuviese que mantenerse conectado con cada cliente posible,las conexiones se le agotarían pronto.

El desarrollo de aplicaciones web , sin embargo, necesita frecuentemente mantener estado. Paraesto se usan varios mecanismos. El más básico y limitado es agregar parámetros en la URL ódirección de la página web, como vemos a menudo. El más popular son las cookies , que esinformación que el servidor envía, pero se almacena en el sistema cliente (es algo estándarsoportado por todos los navegadores). Esto le permite a las aplicaciones web instituir la nociónde sesión , ya que las cookies pueden guardarse en el cliente por un tiempo determinado, variandode minutos a siglos.

3.1 Petición (Request )

Cada petición tiene un verbo o método de petición, que le indica al servidor qué operación realizar

y qué datos incluir en la respuesta. Hay 8 verbos, pero la mayoría de las veces se usan sólo dos:

GET Corresponde a una consulta. Esta operación no debería modificar el recurso en elservidor. Se puede enviar información adicional para buscar el contenido. Esta infor-mación se denomina Query String y es visible para el usuario final. Por ejemplo, enhttp://ejemplo.com?id=12 el query string es lo que está luego del signo ?; en este casoid=12. Este dato adicional es típicamente algo que usaremos como un parámetro en laaplicación del servidor para realizar un cálculo, buscar en una base de datos, etc.

¹http://es.wikipedia.org/wiki/Http

http://es.wikipedia.org/wiki/Http

http://es.wikipedia.org/wiki/Http



HTTP 7

POST

Corresponde a una operación que crea o modifica los recursos del servidor. Se puede enviaruna cantidad arbitraria de datos. Los datos no son visibles para el usuario. Es el mecanismoque se utiliza típicamente cuando completamos un formulario en una página, al hacer clicsobre el botón de confirmación. El navegador pone todos los datos del formulario en unapetición con este verbo y de esa manera los envía al servidor para que sean procesados.

Además del verbo, la petición incluye un encabezamiento² con información que puede usar tantoel servidor como los equipos intermedios que existen en Internet, como: Cookies, uso de Cache,identificador de cliente (user agent) qué hace la petición, tipo de respuesta esperada, etc.

Hay maneras de ver los valores de la petición en el navegador. Por ejemplo en Chrome, usandolas herramientas de desarrollo (Ctrl+Shft+I), en la solapa de Red (Network) se pueden ver laspeticiones realizadas y haciendo click sobre una de ellas, se puede ver los datos que tuvo la

petición y los datos devueltos en la respuesta.

Petición

3.2 Respuesta (Response)

La respuesta incluye un encabezamiento³ y un cuerpo. El encabezamiento (header) tieneinformación sobre el estado o resultado de la petición origen, Cookies, uso de Cache, informaciónsobre el cuerpo (longitud, codificación de los caracteres, tipo), etc.

El estado es un número 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://en.wikipedia.org/wiki/List_of_HTTP_headers#Requests

http://en.wikipedia.org/wiki/List_of_HTTP_headers#Responses

http://en.wikipedia.org/wiki/List_of_HTTP_headers#Requests

http://en.wikipedia.org/wiki/List_of_HTTP_headers#Responses



HTTP 8

2xx Éxito, la petición fue aceptada y procesada. El código más común es el 200 (Ok), quesignifica que todo salió según lo esperado.

3xx Redirección a otro URL. En algunos casos es resuelta automáticamente por el cliente.

4xx Errores correspondientes al cliente. El más común es el 404 (No encontrado), correspon-diente a una petición de un recurso que no está presente en el servidor.

5xx Errores correspondientes al servidor, que no pudo procesar correctamente una petición. Elmás común es el 500, correspondiente a un error interno en el servidor.

El cuerpo (body) de la respuesta contiene la información pedida (GET) o el resultado de laoperación (POST). Puede ser un texto plano (sin estructura), HTML, XML, JSON (datos con elformato de objeto JavaScript) u otros.

3.3 Cookies

Una cookie⁴ (o galleta informática) es un paquete de información enviado por un sitio web yalmacenado en el navegador del usuario, de manera que el sitio web que la envió en una respuestapuede consultar la actividad previa del usuario ante una petición posterior.

Las cookies son utilizadas habitualmente por los servidores web para diferenciar usuarios y paraactuar de diferente forma dependiendo de éstos. También es una forma de mantener el estado deusuario (por ejemplo, su última operación, si pasó o no por una página, si tiene o no productos en

un carrito de compras), y mantenerlo identificado a través de varias páginas dentro del mismositio.

Por medio del uso de cookies se puede tener memoria de las acciones pasadas de los usuarios apesar de estar trabajando con una tecnología (HTTP) sin estado. Es importante destacar que lascookies son enviadas por un servidor en el contexto de un dominio deteminado y sólo 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 nuestrobanco, más allá de que se intente dejar información mínima, encriptada, etc.

⁴http://es.wikipedia.org/wiki/Cookie_(inform%C3%A1tica)

http://es.wikipedia.org/wiki/Cookie_(inform%C3%A1tica)

http://es.wikipedia.org/wiki/Cookie_(inform%C3%A1tica)



4 HTML5HTML¹ (HyperText Markup Language, ó Lenguaje de marcado de hiper-texto) es un lenguajecreado en los inicios de la web para poder dar estructura (y originalmente, algo de formato) a laspáginas.

HTML5² es la versión actual, en la que se ha hecho un esfuerzo especial para que la forma en quese presenta la información (usando CSS) esté separada de la estructura. También en esta versiónse incorpora soporte nativo para varios tipos de información adicional (vídeos, audio, etc.) enigualdad de condiciones que el texto y las imágenes, sin necesidad de componentes adicionales ó

plug-ins (como Flash, Shockwave, Java applets, Silverlight y otros, que era la manera en que estetipo de medios se incorporaba anteriormente). Lo que muestran los navegadores al visitar unapágina web (si no se usan plug-ins adicionales) es HTML renderizado: se muestra el contenido(texto, vídeo, audio, etc) aplicando los estilos (CSS) y las opciones que el usuario haya definidoen el navegador (como por ejemplo tamaño de texto).

En lo que resta de este libro si no lo mencionamos específicamente, estaremos hablando siemprede HTML5, ya que las versiones anteriores están cayendo en desuso rápidamente.

La forma en que se marca el texto es con tags (etiquetas). Hay varios tipos de lenguajes demarcado. HTML es un sucesor de un lenguaje más general llamado SGML del cual deriva tambiénXML³. Veamos cómo 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 párrafo, un título, unaimagen, etc).

atributo=”valor”Un atributo del tag, que nos sirve para agregar información importante sobre lo queestamos representando, pero para ser interpretada por el navegador mismo, o utilizadapor 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

http://es.wikipedia.org/wiki/Xml

http://es.wikipedia.org/wiki/HTML5

http://es.wikipedia.org/wiki/HTML

http://www.w3schools.com/tags/ref_standardattributes.asp

http://es.wikipedia.org/wiki/Xml

http://es.wikipedia.org/wiki/HTML5

http://es.wikipedia.org/wiki/HTML



HTML5 10

</tag>

Cierre del tag. Puede omitirse en el caso de elementos vacíos o autocontenidos en los queel mismo tag sirve de apertura y cierre. Por ejemplo <br/> que representa un salto de lineaó <hr/> que representa un salto temático en medio de un texto (y por omisión se ve comouna línea horizontal)

documento mínimo HTML5

<!DOCTYPE html>

<html>

<head>

<title>Título 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 página. Contiene todos los elementos del documento.

head

Es un contenedor para la meta-información, y el lugar recomendado para incluir estilosy scripts. Debe incluir un título, y puede tener tags como meta, link, style y script. Másadelante veremos el uso de algunos de ellos.

body

Es donde gran parte de la magia sucede, porque es donde va el contenido visible de lapágina, con la gran mayoría de los tags, como p, form, input, div, h1..h6, a, table, img, div.

4.2 Texto

Sobre el texto se puede indicar los párrafos (p) y distintos niveles de encabezamiento para títulosy subtítulos (h1, h2, h3, h4, h5, h6). Los espacios no son significativos, por lo que un texto conmuchos espacios intermedios no necesariamente se mostrará separado.

La codificación del texto debe indicarse en el encabezamiento con un elemento meta, porejemplo <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">. De noestar indicado, los navegadores modernos tratan de inferir la codificación de los caracteres enbase a los contenidos.

⁴http://www.w3schools.com/tags/ref_standardattributes.asp

http://www.w3schools.com/tags/ref_standardattributes.asp



HTML5 11

Para incorporar como contenido caracteres que tienen un sentido especial (reservados) se utilizanentidades (entities ). Los más comunes son que corresponde a un espacio en blanco (non-

breaking space ), < que corresponde a < (less than ) y > que corresponde a > (greater than ).Como estos últimos símbolos se utilizan para abrir y cerrar los tags, cuando queremos mostrarlostenemos que recurrir a estas entidades.

También se pueden indicar caracteres acentuados para evitar depender de la codificacióndel encabezamiento, la codificación que usamos en nuestros editores y la inferencia de losnavegadores. Por ejemplo la á es á.

Ejemplo de párrafo con encabezamientos y entidades

<!DOCTYPE html>

<html><head/><body>

<h1>Ejemplos de textos</h1>

<h2>Entidades para palabras reservadas</h2>

<p> Un p árrafo con espacios < que 4</p>

</body></html>

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

Resultado

4.3 Enlace o Vínculo (Link )

Los enlaces permiten que el usuario pase a otra página o documento. Tienen la forma <a

href="http://www.w3schools.com/html">El lugar para aprender HTML</a>. El atributohref es una URL, y puede ser absoluto o relativo . En el ejemplo, anterior, se indica un

URL absoluto. Estando en la página del ejemolo, podemos referirnos a otra página como <ahref="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. Sino empiezan con / son relativas a esta página.

4.4 Formulario (Form)

Los formularios HTML forms⁵ se usan para ingresar y enviar datos del usuario al servidor. Elformulario es un elemento definido con el tag <form>, y dentro se incluyen los campos de datos

⁵http://www.w3schools.com/html/html_forms.asp

http://www.w3schools.com/html/html_forms.asp

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 selección múltiple (type="checkbox)

• alternativas (type="radio)

• contraseñas (type="password)

• y el botón para enviar lo datos del formulario al servidor (type="submit)

También se pueden tener opciones en listas desplegables: un elemento select que contiene dentrootros 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 aplicación soportará, yaque en este momento HTML5 no está absolutamente implementado⁸ en ningún 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

<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

http://html5test.com/

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

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

http://html5test.com/

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

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



HTML5 13

Resultado



5 CSSLas hojas de estilo en cascada o CSS¹ (Cascading Style Sheets) hacen referencia a un lenguajeusado para describir la presentación visual (el aspecto y formato) de un documento escrito enlenguaje de marcado. Su aplicación más común es dar estilo a páginas webs escritas en lenguajeHTML, aunque también puede ser aplicado a cualquier tipo de documentos XML, incluyendoSVG y XUL. Vamos a concentrarnos solamente en su uso con HTML.

La información de estilo puede ser adjuntada como un documento separado o en el mismodocumento HTML. En el primer caso, con un vínculo (link) en el encabezamiento; en el segundocaso 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 elatributo 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 . Unbloque de estilos consiste en una serie de pares propiedad=valor; entre llaves ({})

Los selectores marcarán qué elementos se verán afectados por el bloque de estilo que les siga.Hay selectores en función 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 razón por laque 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

http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada

http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada



CSS 15

<p> Un p árrafo con espacios < 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 RBGhexadecimal³. También se usan distintas unidades para la definición de tamaños: por pixels ypor 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

http://www.w3schools.com/cssref/css_units.asp

http://www.w3schools.com/CSSref/css_colors.asp

http://www.w3schools.com/CSSref/css_colornames.asp

http://www.w3schools.com/cssref/css_units.asp



http://www.w3schools.com/CSSref/css_colornames.asp



6 Aplicaciones WebLos primeros sitios web era exclusivamente páginas HTML estáticas . Llamamos estática a unapágina HTML que no cambia, no depende de datos, debe ser modificada y vuelta a grabar. Porejemplo una persona que identifica nuevo contenido para agregar a su página personal, edita elarchivo HTML para incorporarlo.

Actualmente existen aún páginas estáticas, pero la gran mayoría de las páginas que vemos enInternet son dinámicas . Llamamos dimámica a una página que se genera mediante un programa,para generar una respuesta específica (response) dependiendo del pedido (request) del usuario.

6.1 Aplicación mínimaA continuación mostraremos una aplicación mínima usando los lenguajes de programación PHP,Ruby y Python. Mientras que PHP está diseñado casi exclusivamente para la web, en Ruby yPython utilizan bibliotecas livianas (o micro-frameworks ) para este tipo de desarrollo.

La funcionalidad es mínima: permite ingresar un nombre, y luego se muestra un mensaje debienvenida personalizado. Por simplicidad, este mensaje de bienvenida es un texto plano, nisiquiera es HTML.

En todos los casos, cuando mencionamos como dirección “localhost”, nos referimos al servidor

web que tenemos funcionando en nuestra propia computadora, y que usamos exclusivamentepara probar mientras desarrollamos.

PHP

En PHP con Apache (el servidor HTTP que tiene el 60% del mercado) se colocan los archivos en eldirectorioinicial (en unix, ´/var/www´; en OS X usualmente ´/Library/WebServer/Documents/´).Se puede acceder a la aplicación yendo con el navegador a localhost las instalaciones por defectoconsideran que una página 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

<?phpEcho "Hola, " . $_POST["nombre"]. "!";

?>

Python y Flask

En Python con Flask¹, se puede ejecutar un servidor de prueba python hola.py y se puedeacceder a la aplicación yendo con el navegador a localhost:5000

templates/hola.html

<!DOCTYPE HTML>

<html>

<body>

<form action="hola" method="post">



</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/

http://flask.pocoo.org/

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 accedera la aplicación yendo con el navegador a localhost:4567

views/hola.erb

<!DOCTYPE HTML>

<html>

<body>

<form action="hola" method="post">



</form></body>

</html>

hola.rb

require 'sinatra'

get '/' do

erb :hola

end

post '/hola' do

"Hola, #{params[:nombre]}!"

end

6.2 URL semánticas

Las URL semánticas, limpias ó amigables son URL en las que se refleja la estructura de lainformación de la página, sin detalles de implementación.

Se hace esto para simplificar el uso de la URL, tanto por humanos como para obtener enlacespermanentes. También mejoran el posicionamiento de las páginas en los buscadores (una prácticaconocida como Search Engine Optimization o SEO).

Por ejemplo, la URL:

http://ejemplo.com/servicios/index.jsp?categoria=2&id=334

Podría reemplazarse por

²http://www.sinatrarb.com/

http://www.sinatrarb.com/

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 idénticas a pesar de las diferentes plataformas, mientras que el ejemplo PHP tiene detalles de

implementación (http://localhost/hola.php).Los frameworks y herramientas modernas de desarrollo web soportan, facilitan y promueven eluso de URL semánticas.



7 Como seguirEste libro contiene lo que consideramos conceptos mínimos para iniciarse en el aprendizaje deldesarrollo web.

Si el lector quiere empezar a desarrollar, deberá seguir aprendiendo en mucha mayor profundi-dad. El aprendizaje nunca termina, menos aún en una disciplina con tan rápida evolución comoésta.

Queremos terminar este libro con los temas que nos hubiese gustado incluir, pero hubiesen hechoeste libro mucho más extenso y nos obligarían también a entrar en detalles muchísimo más

técnicos.

JavaScript

las aplicaciones Web modernas son posibles gracias a Javascript en el cliente. Y más aún, secomienza a utilizar Javascript para la parte de servidor de las aplicaciones. Es un ámbito deevolución muy rápida, por lo que las tecnologías y herramientas cambian continuamente.Podés empezar con lo básico en w3schools.com¹, y utilizar bibliotecas que facilitan ypotencian el desarrolo, como JQuery².

AJAX o Asynchronous JavaScript And XML³Es un conjunto de tecnologías y prácticas que permiten actualizar el contenido de unapágina en forma parcial y asíncrona, logrando aplicaciones web de comportamiento másrico (RIA⁴).

Seguridad

actualmente en el desarrollo de toda aplicación web debe tenerse en cuenta la seguridad.Un buen lugar para empezar es la Lista de las 10 vulnerabilidades más comunes, deOWASP⁵.

Web 2.0

Aplicaciones Web en las que los usuarios generan contenido y se comunican directamenteentre sí. Se logran mucha mayor permanencia de los usuarios en sitio. El valor del sitioaumenta con el número de usuarios (efecto de red). Diseño centrado en el usuario, y porello, con fuerte uso de JavaScript y AJAX.

CSS - Uso Avanzado

Las páginas modernas manejan sus estilos separados del HTML y dependiendo fuertemen-te de hojas de estilos. Combinados con atributos div y span, se logran interfases de usuariosricas. Han surgido además bibliotecas para simplificar la utilización de estilos consistentesy modernos (como Bootstrap⁶).

Escalabilidad y velocidad de respuesta

Los sitios masivos requieren el uso de técnicas específicas para la optimización del usode los recursos tanto de los servidores como de las çomputadoras de los usuarios. Estas

http://getbootstrap.com/

http://-/?-

https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project


http://-/?-

https://es.wikipedia.org/wiki/Rich_Internet_Application

http://-/?-

https://es.wikipedia.org/wiki/AJAX

http://-/?-

http://jquery.com/

http://-/?-

http://www.w3schools.com/js/default.asp



Como seguir 21

técnicas y herramientas son las que permiten el funcionamiento de sitios que respondena miles de páginas por minuto. Algunos de los temas a considerar son optimización debases de datos, diferentes niveles de caching, minifying, compresión de respuestas, reverseproxy, granjas de servidores, balanceo de carga, y muchas más.

¹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/

http://getbootstrap.com/


https://es.wikipedia.org/wiki/Rich_Internet_Application

https://es.wikipedia.org/wiki/AJAX

http://jquery.com/

http://www.w3schools.com/js/default.asp