Guia Introduccion A La Web

INSTITUTO TECNOLÓGICO SUPERIOR
PRIMERO DE MAYO
TECNOLOGÍA EN INFORMÁTICA
ASIGNATURA:
Introducción a la web
CICLO:
Quinto
DOCENTE:
DIEGO VICENTE GUAMÁN JIMA
NOVIEMBRE 2018 – ABRIL 2019

Yantzaza – Zamora Chinchipe
TECNOLOGÍA EN INFORMÁTICA INTRODUCCIÓN A LA WEB
Contenidos
PRIMERA UNIDAD: INTRODUCCIÓN A LA PROGRAMACIÓN WEB ...........................3
1.1. HTML 5 ...........................................................................................................................3
1.1.1. Características .....................................................................................................3
1.1.2. ¿Qué se necesita para realizar una página web? ........................................4
1.1.3. Las bases de HTML .............................................................................................9
1.1.4. Estructura de una página ................................................................................11
1.1.5. Etiquetas básicas ..............................................................................................12
1.2. Hojas de estilo CSS ..................................................................................................17
1.2.1. Breve historia de CSS ......................................................................................18
1.2.2. Funcionamiento básico de css. .....................................................................19
1.2.3. Archivo externo ..................................................................................................20
1.3. Javascript ....................................................................................................................22
1.3.1. Breve Historia .....................................................................................................22
1.3.2. Especificaciones Oficiales ..............................................................................23
1.3.3. Incluir javascript en los documentos ...........................................................24
SEGUNDA UNIDAD: JAVA SERVER FACES ...................................................................26
2.1. Introducción al Framework .........................................................................................27
2.2. JAVA PERSISTENCE API (JPA) .................................................................................29
2.3. Tipos de Sesiones y Lenguaje de Expresiones EL ...............................................30
2.4. Message – Driven Beans .............................................................................................32
TERCERA UNIDAD: APIS Y LIBRERIAS IMPORTANTES.............................................32
3.1. Primefaces y Bootfaces ...............................................................................................33
3.2. Java Mail ..........................................................................................................................34
3.3. Google Maps ...............................................................................................................35
3.3.1. Crear un mapa web ...............................................................................................35
3.4. Social Login ................................................................................................................37
3.5. Ajax ...............................................................................................................................38
3.6. Sockets y Tecnologia Push .........................................................................................39
3.6.1. Paradigma Request / Response..........................................................................40
CUARTA UNIDAD: PERSISTENCIA DE DATOS MEDIANTE HIBERNATE ................41
4.1. Introducción a ORM ..................................................................................................41
4.2. Hibernate – Configuración ......................................................................................42
4.3. Relaciones mediante Anotaciones ........................................................................43
4.3.1. Relación uno a muchos ...................................................................................43
2
PRIMERA UNIDAD: INTRODUCCIÓN A LA

PROGRAMACIÓN WEB
El World Wide Web (WWW) es un sistema que contiene una cantidad de
información casi infinita. Pero esta información debe estar ordenada de alguna
forma de manera que sea posible encontrar lo que se busca. La unidad básica
donde está almacenada esta información son las páginas Web. Estas páginas
se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y
video.
Una de las características más importantes de las páginas Web es que son
hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino
que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos
enlaces el navegante de internet puede pulsar sobre un texto (texto al que
llamaremos de ahora en adelante activo) de una página para navegar hasta otra
página. Será cuestión del programador de la página inicial decidir que palabras
o frases serán activas y a donde nos conducirá pulsar sobre ellas.
En algunos ambientes se discute que el World Wide Web ya no es un sistema

hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que,
aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad
es un sistema principalmente gráfico y se puede hacer que las zonas activas
sean, no sólo texto, sino imágenes, videos, botones, en definitiva cualquier
elemento de una página. Aún así, el término original no ha sido reemplazado
todavía y por tanto será el empleado a lo largo de esta obra.
1.1. HTML 5
Lenguaje de Maquetado de Hyper Texto (HTML).
1.1.1. Características
Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web?
Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se
debían cumplir, entre otras, las siguientes características:
• El Web tenía que ser distribuido: La información repartida en páginas no muy

grandes enlazadas entre sí.
• El Web tenía que ser hipertexto y debía ser fácil navegar por él.
3
• Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh,
estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-
DOS, UNIX, MAC-OS).
• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser

ágil y rápido.
Estas características son las que marcaron el diseño de todos los elementos del
WWW incluida la programación de páginas Web. Como respuesta a todos estos
requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas
significan "lenguaje hipertexto de marcas".
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial

en una página web con diferentes tipos y tamaños de letra, con imágenes
impactantes, animaciones sorprendentes, formularios interactivos, etc.
1.1.2. ¿Qué se necesita para realizar una página web?

Una de las características de este lenguaje más importantes para el programador
es que no es necesario ningún programa especial para crear una página Web.
Gracias a ello se ha conseguido que se puedan crear páginas con cualquier
ordenador y sistema operativo. El código HTML, como hemos adelantado en el
párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo
es un editor de texto como el que acompañan a todos los sistemas operativos:
edit™ en MS-DOS, block de notas en Windows, vi™ en UNIX, etc. Por supuesto
estos no son los únicos editores de texto que pueden ser usados, sino cualquier
otro. También se puede usar procesadores de texto, que son editores con
capacidades añadidas, campo pueden ser Microsoft Word™ o WordPerfect™
pero hay que tener cuidado porque en ocasiones hacen traducciones
automáticas del código HTML que no siempre son deseadas. En estos dos
últimos casos, también hay que tener en cuenta que deberemos guardar el
archivo en modo texto.
4
Una vez hemos escrito el código deberemos guardar el archivo (con formato de
texto) con la extensión .html (o .htm en MS-DOS, Windows 3.1 o cualquier otro
sistema que sólo acepte tres letras en la extensión. Los siguientes son nombres
válidos de archivos que contengan código HTML: index.html, index.htm,
principal.html, PRINCIPAL.htm, etc...
NOTA: Si el editor o procesador de textos usado para crear la página obliga a

usar la extensión .txt al guardar el archivo en modo texto, deberemos guardarlo
con esta extensión, por ejemplo, como index.txt, y posteriormente
cambiar el nombre del archivo desde fuera del programa a index.html o

index.htm. Para ello usaremos el comando rename en MS-DOS; en Windows 3.1
lo haremos mediante el administrador de archivos y en Windows 95 con el
explorador. En otros entornos, como Linux, es más raro que se de esta situación.
ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de

las minúsculas. Es un error común llamar a un archivo index.html y luego
referirse a él como Index.html. Aunque en nuestro ordenador puede funcionar al
publicarlo seguramente no lo hará. Por esta razón es una norma general usar
siempre minúsculas para los nombres de los archivos html.
Últimamente han aparecido nuevas alternativas que facilitan la programación de

páginas Web. Son los editores HTML. Podemos dividir estos editores en dos
grupos:
5
• Asistentes: ayudan a crear el código HTML e incluyen plantillas de código

prefabricadas, por ejemplo HotDog™ (Win), HomeSite™(Win), HTML Editor™
(Mac), Quanta™ (Linux, KDE) o Bluefish™, (Linux, GNOME).
• Conversores: son programas con otra función que la de la programación Web

pero que permiten convertir a HTML. Son ejemplos de conversores Microsoft
Word ™, Quark XPress™ y PageMaker™.
• Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que
obtienes): estos editores permiten crear páginas web sin escribir código HTML
como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos
de este tipo de editores son Macromedia Dreamweaver™, HotMetal™ o
Microsoft Frontpage™.
Algunas razones para usar HTML
Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas
e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML
ofrece bastantes ventajas:
• Seremos capaces de aprovechar todas las características de este lenguaje,

incluso las más nuevas.
• Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos

suficientes para modificar posteriormente el código que éste ha creado. Así se
pueden corregir errores o incluir etiquetas no soportadas por el editor.
• No dependeremos de la disponibilidad de una herramienta concreta para poder

crear páginas web. Con un simple editor de textos será suficiente.
El principal problema de usar editores conversores y WYSIWYG es la necesidad

de trabajar con dos archivosfuentes por separado, por un lado el archivo del
editor y por otro el archivo del código HTML una vez generado, lo que nos
complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su
utilidad es innegable y su combinación con un buen conocimiento del lenguaje
HTML nos convertirá en unos grandes programadores de páginas Web capaces
de realizar creaciones impactantes visualmente y de gran calidad técnica.
HTML es un lenguaje descriptivo
6
Probablemente el lector ha usado alguna vez un procesador de texto (Abiword™,

Microsoft Word ™ o KWord™) o un programa de descripción de páginas
(QuarkXPress™). Con este tipo de aplicaciones el usuario tiene un control total
sobre los elementos del documento: se le puede decir al programa "pon este
texto con este tamaño", "sitúalo a 1 cm. del borde", "usa este sangrado para los
párrafos", etc... Con HTML el programador no tiene este tipo de control sobre los
elementos que incluirá en su página. El objetivo de este lenguaje será
simplemente describir cómo es una página de manera que examinando esa
descripción el navegador del usuario final sea capaz de mostrarlo de la mejor
manera posible. Con HTML podremos indicarle al navegador que este es un
titular, aquí comienza un párrafo, estos son elementos de una lista, etc.
posteriormente el navegador decidirá como mostrar esos elementos.
¿Por qué funciona así? En un principio esta característica del HTML puede
resultar molesta para el creador de la página, que no puede saber como será
vista su página más que de una forma aproximada. Sin embargo es fundamental
para conseguir que el World Wide Web pueda ser navegado con cualquier tipo
de ordenador (dicho con otras palabras, que el WWW sea multiplataforma).
Debemos tener en cuenta que no todos los sistemas operativos son gráficos,
que incluso usando un mismo sistema operativo existen diferentes resoluciones
de pantalla, ... Por esta razón el lenguaje necesario para crear páginas debe ser
descriptivo y como consecuencia tras crear una página el programador debe ver
como es mostrada con varios navegadores distintos como Netscape Navigator™
o Microsoft Internet Explorer™ incluyendo algún navegador de texto como
Lynx™.
Pero una consecuencia más importante aún de esta característica, es que ha

permitido que aparezcan navegadores vocales, que leen las páginas en vez de
mostrarlas. Gracias a ello personas ciegas también han podido disfrutar del
WWW. Es más, esta misma tecnología está siendo usada para los nuevos
navegadores embarcados en coches que leen la página al conductor para que
no se distraiga.
NOTA: Una vez creada una página es recomendable probar nuestra página, no
sólo con varios navegadores, sino también con varias resoluciones de pantalla
7
distintas como, por ejemplo: 640x480, 800x600 y 1024x768. Si existe la

posibilidad de probarlo además con un navegador vocal, mucho mejor aún.
Un buen ejemplo de este carácter descriptivo es la definición de titulares, también

llamados encabezados, en HTML. Vamos a adelantarnos un poco en esta
introducción para mostrar este ejemplo, en él se muestra como poner el titular
de una página:
<h1>Bienvenido a la página de La Super Editorial</h1>
Con este código estamos describiendo el texto Bienvenido a la página de La

Super Editorial como el texto de máxima importancia en nuestra página, es el
titular. En los navegadores más usados como el Netscape Navigator™ o el
Microsoft Internet Explorer™ este titular será mostrado como un texto en negrita
y de tamaño grande (el tamaño más grande posible). Sin embargo repetimos una
vez más que existen navegadores como pueden ser Lynx ™ o Emacs-W3™ que
son bastante usados por la comunidad académica y universitaria que sólo
pueden mostrar texto y no pueden variar el tamaño de la letra. Por esta razón la
etiqueta <h1> no dice que el texto que encierra debe ser de tal tamaño o si debe
ser negrita o no. Esta etiqueta sólo le dice que este texto es el más importante
de la página, el titular. Sabiendo esto el navegador que funcione en modo texto
puede resaltar dicho titular con los medios de que dispone, como por ejemplo
poniéndolo en mayúsculas o usando distintos sangrados.
También podemos encontrar ventajas de la descripción mirando al futuro.

Imaginemos que la informática evoluciona hasta tal punto que los monitores de
dentro de unos años pueden mostrar objetos en tres dimensiones. Sería muy
interesante que el titular de nuestra página fuese en 3-D de manera que resaltase
lo máximo posible. Pues bien, si lo hemos definido como cabecera principal (y
no como letra de tamaño 20 puntos y en negrita, por ejemplo) el navegador sabe
que queremos que ese texto sea el más importante y puede actuar de manera
inteligente poniéndolo automáticamente en tres dimensiones, ¡sin que nosotros
hayamos cambiado una sola línea de nuestro código! Parece interesante ¿no?
Una vez a quedado claro cual es el espíritu de HTML, hay que decir que
últimamente se han introducido métodos para conseguir un mayor control sobre
las páginas. Estos métodos permiten controlar aspectos como el tamaño de la
8
letra la disposición (aproximada) de imágenes y texto de manera que se facilita

la labor del programador. Pero hay que tener siempre en mente que siempre
habrá ligeras diferencias entre como verán las páginas unos usuarios u otros y
no debemos pretender poder controlar la presentación y diseño de nuestra
página hasta el mínimo detalle.
1.1.3. Las bases de HTML

Una vez repasadas unas nociones básicas de HTML y de la programación de
páginas Web en general entraremos de lleno en la programación con este
lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le
convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas
con mayor facilidad aún.
Las órdenes de este lenguaje estarán formadas por unos comandos llamados
etiquetas que pueden tener o bien la siguiente estructura:
<NOMBRE_ETIQUETA>
O bien esta otra:
<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
Como vemos, la primera estructura está formada por una única instrucción y la
segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final,
con texto entre ambas.
Por ejemplo, para indicarle al navegador que queremos que pinte una línea
horizontal debemos escribir:
<hr>
Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los

símbolos menor que (<) y mayor que (>), todas las instrucciones de HTML deben
ir encerradas entre estos dos símbolos.
Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes
tienen en ocasiones parámetros. Por ejemplo la etiqueta <hr> tal y como lo
hemos hecho anteriormente daría lugar a la línea que vemos en la siguiente
figura, es decir le dice al navegador que dibuje una línea horizontal en la pantalla.
9
Esta línea tiene un grosor predeterminado y un ancho variable en función del

tamaño de la ventana del navegador.
Sin embargo, hay muchas formas de pintar una línea y sería deseable poder
elegir detalles tales como la anchura y el grosor que va a tener dicha línea. Para
especificar este tipo de detalles se crearon los atributos de las etiquetas. Este
nuevo elemento se introduce en una etiqueta de la siguiente manera:
<etiqueta atributo="valor">
Es decir, en primer lugar, ponemos el nombre de la etiqueta, después el nombre

del atributo seguido por un signo igual y posteriormente el valor que queramos
darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos
atributos como se deseen y en ocasiones son necesarios para que la etiqueta
tenga algún significado.
En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que

significa tamaño en inglés, que permite controlar el grosor de la línea que será
dibujada en pantalla. Veamos un ejemplo, en la siguiente podemos ver la línea
horizontal con diferentes grosores.
10
1.1.4. Estructura de una página

Todo documento HTML está formado por los bloques que podemos apreciar en
la figura siguiente. Pasemos a explicar cada uno de ellos.
En primer lugar deberemos especificar que el archivo de texto que estamos

escribiendo es un documento HTML, para ello usamos las instrucciones de inicio
y fin de la etiqueta <html> al principio y al final de la página respectivamente:
<html> Código de la página </html>
El código de la página esta formado a su vez por dos grandes bloques, la

cabecera y el cuerpo.
11
La cabecera de la página está delimitada por las instrucciones de inicio y fin de

la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de
la siguiente manera:
<html> <head> Elementos de la cabecera </head> ... Resto de código de la

página ... </html>
En la cabecera de la página se introduce toda aquella información que afectará

a toda la página. En un principio esta información se limitará al título. Este título
se indicará con la etiqueta title usando la siguiente sintaxis:
<html> <head> <title>Mi primera página WEB</title> </head> </html>
El resultado de ver esta página con nuestro navegador es el que se observa en

la figura 2.2. Como vemos, el área de la pantalla donde suele estar la página
está todavía vacía, pero si nos fijamos en la cabecera de la ventana del
navegador vemos que el título a pasado de ser Microsoft Internet Explorer ™ a
"Mi primera página WEB Microsoft Internet Explorer™". Es decir el título que le
demos a nuestra página con la etiqueta <TITLE> pasará a ser el título de la
ventana del navegador.
1.1.5. Etiquetas básicas

Párrafos en HTML
Ha llegado el momento de aprender a introducir un texto en una página web,

pero antes es necesario comprender cómo será interpretado este texto. Cuando
un navegador lee el código HTML de una página y lo interpreta para mostrar la
página, todos los espaciados múltiples, tabulados o saltos de línea que se haya
incluido en los textos serán interpretados como un único espacio. Esta
característica suele sorprender (e incluso molestar) al principio, pero es
innegable que esta forma de actuar es necesaria y concuerda con el carácter
descriptivo de HTML.
La mejor manera de habituarse es probar, para ello proponemos los siguientes

ejemplos de código que serán mostrados de la misma forma por el navegador
aunque algunos contengan saltos de línea, otros tabulados entre las palabras,
etc.
12
<h1>El conductor del coche le pregunto si se encontraba mal</h1>
<h1> El conductor del coche le preguntó si se encontraba mal </h1>
<h1> El conductor del coche le pregunto si se encontraba mal </h1>
En estos ejemplos podemos observar diversos saltos de línea y separaciones en

el texto, sin embargo, el navegador mostrará un solo espacio entre las palabras
y producirá saltos de línea donde sea necesario en función del tamaño de la
ventana.
Saltos de línea
En ocasiones puede ser conveniente introducir un punto y aparte cuando

estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta
<br>. Cuando el navegador se encuentra con esta etiqueta provoca un salto de
línea y sigue mostrando el contenido de la página. Veamos un ejemplo:
Estaba internándose en lo desconocido. <br> Durante todo el trayecto hasta

Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar
cometiendo...
En este texto podemos observar cómo tras el primer punto era necesario un
cambio de línea, por lo que hemos usado <br>.
Espacio entre líneas
Para introducir un espacio vertical entre líneas debe usarse la etiqueta <br>. Si
se ponen varias seguidas no se mostrará más espacio, pero esto puede
solucionarse insertando entre las etiquetas la cadena " ". Por ejemplo, para
insertar tres líneas en blanco puede usarse:
<br> <br> <br>
El atributo ’align’ en la etiqueta <p> permite especificar la alineación del párrafo.

Puede tener tres valores: "center", "left" y "right", para obtener un párrafo
centrado, alineado a la izquierda o alineado a la derecha respectivamente. En la
siguiente figura se muestra el párrafo del código anterior con los tres tipos de
alineación.
13
Cómo insertar imágenes en una página.
En el cuarto capítulo de la obra trataremos con detalle el mundo de las imágenes

en el WWW y aprenderemos todas las posibilidades gráficas que ofrece. En este
capítulo aprenderemos, como introducción, a insertar imágenes para dar mas
vida a nuestra página.
La etiqueta usada para insertar imágenes es: <img >. Esta etiqueta está
compuesta por una única instrucción y por tanto </img> no existe y su uso está
prohibido. Podemos insertar una imagen en medio de una frase como si fuese
una palabra más de ella y será mostrada por el navegador a continuación del
texto (o cualquier otro elemento anterior).
14
En la figura anterior se puede observar cómo hemos insertado una flecha en

medio de la frase y después de la imagen hemos seguido escribiendo. Aunque
podemos crear este efecto con imágenes de todos los tamaños no es
recomendable hacerlo con aquellas que tengan una altura mucho mayor que la
del texto.
Para insertar una imagen en una página WEB necesitamos tenerla en un archivo
aparte. Existen multitud de formatos para almacenar una imagen en un archivo:
BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc. cada uno de los cuales tienen
unas características. El formato elegido en el World Wide Web es el formato GIF
que distingue a sus archivos porque tienen la terminación “.gif”. Podríamos decir
que todos los navegadores son capaces de mostrar las imágenes incluidas en
este formato. Los navegadores en modo texto suelen proporcionar métodos para
ver las imágenes usando algún programa visor externo. Un segundo formato que
se ha introducido en el WWW y que es soportado por la gran mayoría de los
navegadores (incluyendo al Explorer™ y al Navigator ™) es el JPEG. Este
formato es especialmente útil para las fotos ya que es capaz de comprimir este
tipo de imagen de manera que ocupen hasta 4 veces menos que las imágenes
con formato GIF. Los archivos que contienen imágenes con formato JPEG
suelen tener la terminación “.jpg”.
Una vez tenemos la imagen en un archivo aparte es hora de escribir el código

HTML que nos permitirá insertarla en la página. Como hemos comentado
usamos la etiqueta <img> y para indicar el nombre del archivo usamos el atributo
’src’.
15
Cómo crear enlaces hipertexto.
Una vez visto como introducir distintos tipos de texto y párrafos así como insertar
imágenes en una página, lo único que queda por aprender para ser capaces de
crear una página Web bastante completa son los enlaces hipertexto. Con ellos
se pueden activar frases o palabras de la página para que al pulsar sobre ellas
se salte a cualquier otra página de Internet que decidamos.
Estos enlaces hipertexto (en inglés links) no son más que unas zonas
(habitualmente palabras o frases) especiales de nuestro texto que ofrecen la
posibilidad de pulsar sobre ellas para ir a otras páginas. El concepto del
hipertexto no es nuevo, la mayoría de los lectores lo habrán usado ya en la ayuda
de Windows™ o en otros muchos sistemas, lo realmente novedoso que ofrecen
estos enlaces en el WWW es la posibilidad de pulsar y navegar hasta páginas
que se encuentren en el otro extremo de la tierra. El navegante puede moverse
de España a Japón con una única pulsación sobre el texto adecuado. En seguida
se verá lo sencillo que es incluir esta impresionante tecnología en una página
web.
Los enlaces pueden clasificarse en dos tipos, los internos o locales y los
externos:
1. Los enlaces internos son aquellos que enlazan las páginas que componen un
mismo sitio web (web site). Todas estas páginas estarán (generalmente) en el
mismo servidor WWW, y por tanto estarán también en el mismo ordenador. Por
esta razón sólo será necesario indicar en nuestro código el nombre del archivo
donde está la página que queremos enlazar y el directorio en el que se
encuentra. Un ejemplo dirección de un enlace interno es:
/hobbies/index.html
2. Los enlaces externos permiten saltar desde una página hasta otra puede estar
en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces
es necesario especificar la dirección completa de Internet (la URL) de la página
que queremos enlazar. Por ejemplo:
http://www.otroservidor.com/hobbies/index.html
16
Por último, cabe resaltar que aunque la mayoría de las veces los links se usan
para enlazar una páginas con otras también pueden usarse con imágenes,
sonido, vídeo y prácticamente cualquier tipo de fichero.
La etiqueta <a>... </a>
Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas

enlaces hipertexto. Su atributo ’href’ permite indicar cuál es la página a la que
debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será
aquel que se introduzca entre la instrucción de inicio y la instrucción de final de
la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que
puede pulsar en él. La estructura de un link es:
<a href="dirección_URL"> Texto que será sensible (hipertexto) </a>
Los navegadores gráficos como Netscape Navigator ™y Microsoft Internet

Explorer ™ resaltan este texto mostrándolo de un color diferente y subrayándolo,
además el cursor cambiará al situarlo sobre el texto. Los navegadores que
funcionan en modo texto como Lynx™ resaltan los enlaces hipertexto cambiando
el color del texto y de su fondo.
Veamos un ejemplo sencillo del uso de enlaces. Se ha creado un sitio web

personal con 2 páginas. La página principal se encuentra en el archivo index.html
y se quiere que en ella haya un enlace a otra página donde se han escrito sobre
los hobbies del creador del sitio web y que se encuentra en el archivo
hobbies.html. El enlace podría ser algo así:
También puedes conocer mis
<a href="hobbies.html">hobbies</a>
1.2. Hojas de estilo CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o
presentación de los documentos electrónicos definidos con HTML y XHTML.
CSS es la mejor forma de separar los contenidos y su presentación y es
imprescindible para crear páginas web complejas.
Separar la definición de los contenidos y la definición de su aspecto presenta

numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien
17
definidos y con significado completo (también llamados "documentos

semánticos"). Además, mejora la accesibilidad del documento, reduce la
complejidad de su mantenimiento y permite visualizar el mismo documento en
infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML

para marcar los contenidos, es decir, para designar la función de cada elemento
dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos,
etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto
de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal
y vertical entre elementos, posición de cada elemento dentro de la página, etc.
1.2.1. Breve historia de CSS

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas
SGML, alrededor del año 1970. Desde la creación de SGML, se observó la
necesidad de definir un mecanismo que permitiera aplicar de forma consistente
diferentes estilos a los documentos electrónicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de

Internet y el crecimiento exponencial del lenguaje HTML para la creación de
documentos electrónicos. La guerra de navegadores y la falta de un estándar
para la definición de los estilos dificultaban la creación de documentos con la
misma apariencia en diferentes navegadores.
El organismo W3C (http://www.w3.org/) (World Wide Web Consortium),

encargado de crear todos los estándares relacionados con la web, propuso la
creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y
se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta
fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style
Sheet Proposal).
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por
Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo
lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading
Style Sheets).
18
En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo

añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la
primera recomendación oficial, conocida como "CSSnivel 1".
1.2.2. Funcionamiento básico de css.

Antes de la adopción de CSS, los diseñadores de páginas web debían definir el
aspecto de cada elemento dentro de las etiquetas HTML de la página. El
siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar
CSS:
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size
para definir el color, la tipografía y el tamaño del texto de cada elemento del
documento.
El principal problema de esta forma de definir el aspecto de los elementos se

puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos
diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web entero se
compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas
<font>. Como cada etiqueta <font> tiene 3 atributos, habría que definir 1.5
millones de atributos.
Por otra parte, el diseño de los sitios web está en constante evolución y es
habitual modificar cada cierto tiempo los colores principales de las páginas o la
tipografía utilizada para el texto. Si se emplea la etiqueta <font>, habría que
modificar el valor de 1.5 millones de atributos para modificar el diseño general
del sitio web.
19
La solución que propone CSS es mucho mejor, como se puede ver en el

siguiente ejemplo:
1.2.3. Archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que
las páginas HTML enlazan mediante la etiqueta <link>.Un archivo de tipo CSS
no es más que un archivo simple de texto cuya extensión es .css Se pueden
crear todos los archivos CSS que sean necesarios y cada página HTML puede
enlazar tantos archivos CSS como necesite.
En el siguiente ejemplo, se crea un archivo de texto, se cambia su nombre a

estilos.css y se incluye el siguiente contenido:
p { color: black; font-family: Verdana; }
A continuación, en la página HTML se utiliza la etiqueta <link> para enlazar el

archivo CSS externo que tiene los estilos que va a utilizar la página:
20
Normalmente, la etiqueta<link>incluye cuatro atributos cuando se enlaza un

archivo CSS:
• rel: indica el tipo de relación que tiene el recurso enlazado (en este caso,
el archivo CSS) y la página HTML. Para los archivos CSS, siempre se
utiliza el valor stylesheet.
• type: indica el tipo de recurso enlazado. Sus valores están
estandarizados y para los archivos CSS su valor siempre estext/css.
• href: indica la URL del archivo CSS que contiene los estilos. La URL
indicada puede ser relativa o absoluta y puede apuntar a un recurso
interno o externo al sitio web.
• media: indica el medio en el que se van a aplicar los estilos del archivo
CSS. Más adelante se explican en detalle los medios CSS y su
funcionamiento.
De todas las formas de incluir CSS en las páginas HTML, esta es la más
utilizada con mucha diferencia. La principal ventaja es que se puede incluir
un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza
la aplicación homogénea de los mismos estilos a todas las páginas que
forman un sitio web.
Con este método, el mantenimiento del sitio web se simplifica al máximo, ya

que un solo cambio en un solo archivo CSS permite variar de forma
instantánea los estilos de todas las páginas HTML que enlazan ese archivo.
21
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos

CSS externos, también se puede utilizar la etiqueta <style>. La forma
alternativa de incluir un archivo CSS externo se muestra a continuación:
1.3. Javascript
JavaScript es un lenguaje de programación que se utiliza principalmente para
crear páginas web dinámicas.
Unapáginawebdinámicaesaquellaqueincorporaefectoscomotextoqueapareceyd
esaparece, animaciones, acciones que se activan al pulsar botones y ventanas
con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo

que no es necesario compilar los programas para ejecutarlos. En otras palabras,
los programas escritos con JavaScript se pueden probar directamente en
cualquier navegador sin necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el

lenguaje de programación Java. Legalmente, JavaScript es una marca registrada
de la empresa Sun Microsystems, como se puede ver
enhttp://www.sun.com/suntrademarks/.
1.3.1. Breve Historia

A principios de los años 90, la mayoría de usuarios que se conectaban a Internet
lo hacían con módems a una velocidad máxima de 28.8 kbps. En esa época,
empezaban a desarrollarse las primeras aplicaciones web y por tanto, las
páginas web comenzaban a incluir formularios complejos.
22
Con unas aplicaciones web cada vez más complejas y una velocidad de
navegación tan lenta, surgió la necesidad de un lenguaje de programación que
se ejecutara en el navegador del usuario. De esta forma, si el usuario no
rellenaba correctamente un formulario, no se le hacía esperar mucho tiempo
hasta que el servidor volviera a mostrar el formulario indicando los errores
existentes.
Brendan Eich, un programador que trabajaba en Netscape, pensó que podría

solucionar este problema adaptando otras tecnologías existentes (como
ScriptEase) al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995.
Inicialmente, Eich denominó a su lenguaje LiveScript.
Posteriormente, Netscape firmó una alianza con Sun Microsystems para el

desarrollo del nuevo lenguaje de programación. Además, justo antes del
lanzamiento Netscape decidió cambiar el nombre por el de JavaScript. La razón
del cambio de nombre fue exclusivamente por marketing, ya que Java era la
palabra de moda en el mundo informático y de Internet de la época.
La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0

ya incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo,
Microsoft lanzó JScript con su navegador Internet Explorer3. JScript era una
copia de JavaScript al que le cambiaron el nombre para evitar problemas legales.
1.3.2. Especificaciones Oficiales

ECMA ha publicado varios estándares relacionados con ECMAScript. En junio
de 1997 se publicó la primera edición del estándar ECMA-262. Un año después,
en Junio de 1998 se realizaron pequeñas modificaciones para adaptarlo al
estándar ISO/IEC-16262 y se creó la segunda edición.
La tercera edición del estándar ECMA-262 (publicada en diciembre de 1999) es

la versión que utilizan los navegadores actuales y se puede consultar
gratuitamente en http://www.ecma-
international.org/publications/standards/Ecma-262.htm
Actualmente se encuentra en desarrollo la cuarta versión de ECMA-262, que

podría incluir novedades como paquetes, namespaces, definición explícita de
clases, etc.
23
ECMA también ha definido varios estándares relacionados con ECMAScript,

como el estándar ECMA-357, que define una extensión conocida como E4X y
que permite la integración de JavaScript yXML.
1.3.3. Incluir javascript en los documentos

La integración de JavaScript y XHTML es muy flexible, ya que existen al menos
tres formas para incluir código JavaScript en las páginas web.
Incluir JavaScript en el mismo documento XHTML
El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier

parte del documento. Aunque es correcto incluir cualquier bloque de código en
cualquier zona de la página, se recomienda definir el código JavaScript dentro
de la cabecera del documento (dentro de la etiqueta<head>) :
Para que la página XHTML resultante sea válida, es necesario añadir el atributo
type a la etiqueta <script>. Los valores que se incluyen en el atributo type están
estandarizados y para el caso de JavaScript, el valor correcto es text/javascript.
Este método se emplea cuando se define un bloque pequeño de código o cuando

se quieren incluir instrucciones específicas en un determinado documento HTML
que completen las instrucciones y funciones que se incluyen por defecto en todos
los documentos del sitio web.
El principal inconveniente es que, si se quiere hacer una modificación en el

bloque de código, es necesario modificar todas las páginas que incluyen ese
mismo bloque de código JavaScript.
24
Definir JavaScript en un archivo externo
Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo

JavaScript que los documentos XHTML enlazan mediante la etiqueta <script>.
Se pueden crear todos los archivos JavaScript que sean necesarios y cada
documento XHTML puede enlazar tantos archivos JavaScript como necesite.
Ejemplo:
Archivo codigo.js
En el Documento
Además del atributo type, este método requiere definir el atributo src, que es el
que indica la URL correspondiente al archivo JavaScript que se quiere enlazar.
Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una
misma página se pueden incluir tantas etiquetas<script> como sean necesarias.
Los archivos de tipo JavaScript son documentos normales de texto con la

extensión .js, que se pueden crear con cualquier editor de texto como Notepad,
Wordpad, EmEditor, UltraEdit, Vi, etc.
La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica

el código XHTML de la página, que se puede reutilizar el mismo código
JavaScript en todas las páginas del sitio web y que cualquier modificación
realizada en el archivo JavaScript se ve reflejada inmediatamente en todas las
páginas XHTML que lo enlazan.
25
SEGUNDA UNIDAD: JAVA SERVER FACES

Las empresas de hoy en día viven en un mundo global competitivo que necesitan
aplicaciones para satisfacer las necesidades de negocio, que son cada vez más
complejas. Con el avance de las tecnologías web y la Internet, se han abierto
nuevas oportunidades para los desarrolladores de aplicaciones empresariales;
permitiéndoles el uso de las nuevas tecnologías web en el desarrollo de
aplicaciones mucho más robustas, escalables y con un mayor rendimiento.
Algunas de las nuevas tecnologías que han surgido son: JavaServer Faces (JSF)
que es la tecnología estándar de la edición empresarial de Java (Java Enterprise
Edition, Java EE) para la creación de interfaces de usuario en la web y que
permite integrar otras tecnologías como las hojas de estilo en cascada (Cascade
Style Sheet, CSS) que describen como se va a mostrar un documento, Ajax
(Asynchronous JavaScript And XML); un modelo de desarrollo web para crear
aplicaciones interactivas, JavaBeans empresariales (Enterprise JavaBeans,
EJB) y el API (Application Programming Interface) de Java para el manejo de
entidades persistentes (Java Persistence API, JPA) sobre bases de datos
relacionales
La Figura siguiente muestra el conjunto de tecnologías de Java EE que pueden

utilizarse para el desarrollo de aplicaciones web. Todas estas tecnologías serán
descritas en este documento.
26
2.1. Introducción al Framework

Java Enterprise Edition, fue desarrollado por Sun Microsystems y lanzado en
1999 con el nombre de J2EE. Proporciona un conjunto de especificaciones
técnicas para el desarrollo de aplicaciones empresariales. Puede ser visto como
una extensión de Java SE para facilitar el desarrollo de aplicaciones distribuidas,
robustas, potentes y de alta disponibilidad.
Java EE define cuatro tipos de componentes:
1. Applets: Aplicaciones GUI que se ejecutan en un navegador.
2. Aplicaciones: Son programas que se ejecutan en un cliente
3. Aplicaciones web: (servlets, páginas JSP y JSF) Se ejecutan en un

contenedor web y responden a las peticiones HTTP del cliente.
4. Aplicaciones Empresariales: (EJB, JMS, JTA, etc.) Son ejecutadas en

un contenedor EJB.
Java EE se divide en dominios lógicos llamados contenedores. Cada contenedor

tiene una función específica, soporta un conjunto de APIs y ofrece servicios a los
componentes tales como seguridad, acceso a base de datos, gestión de
transacciones, nombres de directorios, e inyección de recursos. Los
contenedores ocultan la complejidad técnica y mejoran la portabilidad. El
contenedor EJB es responsable de administrar la ejecución de los beans1 que
contiene la lógica de negocio.
27
Los contenedores proporcionan servicios subyacentes a sus componentes

desplegados (ver Figura 2.2), esto permite al desarrollador centrarse en la lógica
de aplicación en lugar de resolver problemas técnicos.
Algunos de los servicios que proporciona Java EE se describen a continuación:
1. Java Transaction API (JTA): Este servicio ofrece una demarcación de

transacciones API utilizada por el contenedor y la aplicación. También
proporciona una interfaz entre el administrador de transacciones y el
administrador de recursos en el nivel Service Provider Interface (SPI).
2. Java Persistence API (JPA): API estándar para el mapeo de objeto-

relacional (ORM). Con Java Persistence Query Language (JPQL), se
puede consultar objetos almacenados en la base de datos subyacente.
3. Validación: El Bean de validación proporciona un nivel de declaración

de restricción de la clase y la facilidad de validación.
4. Java Message Service (JMS): Permite que los componentes se

comuniquen de forma asincrónica a través de mensajes.
5. Java Naming and Directory Interface (JNDI): Esta API, incluida en Java
SE, se utiliza para acceder a los sistemas de nombres y directorios. La
aplicación se utiliza para asociar (enlazar) los nombres de los objetos y
luego encontrar estos objetos (búsqueda) en un directorio. Puede buscar
fuentes de datos, JMS, EJB y otros recursos.
6. JavaMail: Muchas aplicaciones requieren la capacidad de enviar

correos electrónicos que pueden ser implementadas a través del uso de
la API JavaMail
28
2.2. JAVA PERSISTENCE API (JPA)

JPA 1.0 fue creado con Java EE 5 para resolver problemas de persistencia de
datos. Proporciona un modelo de persistencia para mapear bases de datos
relacionales. En java EE 6, JPA 2.0 sigue el mismo camino de simplicidad y
robustez y agrega nuevas funcionalidades. Se puede utilizar para acceder y
manipular datos relacionales de Enterprise Java Beans (EJBs), componentes
web y aplicaciones Java SE.
JPA es una abstracción que está por encima de JDBC lo que permite ser
independiente de SQL. Todas las clases y anotaciones de esta API se
encuentran en el paquete javax.persistence. Los principales componentes de
JPA son:
• Mapeo de base de datos relacionales (ORM). Es el mecanismo para

mapear objetos a los datos almacenados en una base de datos relacional.
• Un API administrador de entidad para realizar operaciones en la base de
datos tales como crear, leer, actualizar, eliminar (CRUD).
• El Java Persistence Query Language (JPQL) que permite recuperar datos
con un lenguaje de consultas orientado a objetos.
• Las transacciones y mecanismos de bloqueo cuando se accedan a los
datos concurrentemente, la API Java Transaction (JTA).
29
Una entidad es objeto de dominio de persistencia. Por lo general, una tabla

en el modelo de datos relacional es representada por una entidad y sus
instancias corresponden a los registros de dicha tabla. El estado de
persistencia de una entidad es representado por propiedades persistentes,
estas propiedades a su vez usan anotaciones para el mapeo de las entidades
y relaciones entre entidades. Las relaciones entre entidades persistentes
deben mapearse explícitamente como llaves foráneas o uniones de tablas, la
manera en que se estructura una entidad, sus atributos y sus relaciones.
2.3. Tipos de Sesiones y Lenguaje de Expresiones EL

Los JavaBeans empresariales son una tecnología (API) que forma parte del
estándar de Java EE. Están diseñados para desarrollo y despliegue de
aplicaciones (distribuidas) de negocio basadas en componentes del lado del
servidor. Una vez que se desarrolla una aplicación, ésta puede ser desplegada
en cualquier servidor que soporte la especificación de EJB. Con esta tecnología
es posible desarrollar aplicaciones empresariales sin tener que crear de nuevo
30
los servicios de transacción, seguridad, persistencia, concurrencia y lo que se

pueda necesitar en el proceso de creación de una aplicación; permitiendo a los
desarrolladores enfocarse en la implementación de la lógica de negocio.
EJB divide la capa de negocio en dos partes: Capa de lógica de negocio donde
se encuentra EJB y capa de persistencia. EJB cuenta con dos componentes de
proceso de negocio, los beans de sesión (Session Beans) y los beans dirigidos
por mensajes (Message-Driven Beans, MDBs), ambos son desarrollados por una
aplicación de negocio e implementados y ejecutados por el Contenedor de EJB.
A continuación, se explican los dos componentes:
Sessions Beans
Los beans de sesión (Session Beans) son componentes Java que se pueden
ejecutar tanto en contenedores EJB independientes como en contenedores EJB
que son parte del estándar Java EE. Dichos componentes son típicamente
utilizados para modelar una tarea particular del usuario o un caso de uso, tal
como introducir la información del cliente o implementar un proceso que
mantiene un estado de la conversación con una aplicación cliente. Existen varios
tipos de beans de sesión, como los beans de sesión sin estado (Stateless
Session Beans, SLSBs ), beans de sesión con estado (Stateful Session Beans ,
SFSBs) y un tipo particular de beans; los beans de sesión singleton (Singleton
Beans).
• SLSBs: Son útiles para los casos en que el estado no necesita ser
mantenido de invocación a invocación. El cliente no puede asumir que las
solicitudes posteriores utilizarán una instancia particular del bean. El
contenedor puede destruir o crear nuevas instancias según determine que
es más eficiente.
• SFSBs: Difieren de los SLSBs en que se garantiza que todas las
peticiones invoquen la misma instancia del bean. Cada SFSB contiene un
contexto de sesión aislado por lo que las llamadas de una sesión no
afectan a las demás. Las sesiones de estado y sus correspondientes
instancias de bean son creadas en algún momento antes de la primera
invocación a su instancia objetivo. Viven hasta que el cliente invoca un
método que el proveedor del bean ha marcado como un evento para
31
remover el bean, o hasta que el contenedor decide desalojar la sesión

(usualmente debido a un tiempo de espera).
• Singleton beans: Se utilizan cuando solamente se necesita mantener
una sola instancia de los objetos de negocio. Debido a que todas las
peticiones hacia un singleton son dirigidas hacia la misma instancia, el
contenedor no realiza mucho trabajo en seleccionar la instancia objetivo.
2.4. Message – Driven Beans

La mensajería asíncrona es un paradigma en el cual dos o más aplicaciones se
comunican a través de mensajes que describen un evento de negocio. Un
proveedor común de mensajería asíncrona es el servicio de mensajería de Java
(Java Message Service, JMS), y la especificación de EJB2 dicta que JMS es
soportado de manera implícita. Si un mensaje es enviado a una fila JMS, un MDB
puede ser creado para manejar el evento.
Al igual que los SLSBs, en los MDBs cualquier instancia puede ser utilizada para
atender un mensaje, el cliente no tiene conocimiento del MDB.
En términos generales, EJB se puede ver como una plataforma para la creación
de aplicaciones empresariales portables, reutilizables y escalables utilizando el
lenguaje de programación Java y el estándar Java EE.
TERCERA UNIDAD: APIS Y LIBRERIAS IMPORTANTES
32
3.1. Primefaces y Bootfaces
PrimeFaces es una librería de componentes visuales de código abierto para el

conjunto Java Server Faces 2.0 desarrollada y mantenida por Prime Technology.
Su objetivo principal es ofrecer un conjunto de componentes para facilitar la
creación y diseño de aplicaciones web.
Los componentes de PrimeFaces cuentan con soporte nativo de Ajax, pero no

se encuentra implícito, de tal manera que se tiene que especificar que
componentes se deben actualizar al realizar una petición proporcionando así
mayor control sobre los eventos.
Cuenta también con un módulo adicional TouchFaces para el desarrollo de

aplicaciones web para dispositivos móviles con navegadores basados en WebKit
Las principales características de PrimeFaces son:
• Soporte nativo de Ajax, incluyendo Push/Coment.

• Kit para crear aplicaciones web móviles.
• Es compatible con otras librerías de componentes como Jboss
RichFaces.
• Uso de JavaScript no intrusivo.
• Es un proyecto open source, activo y estable.
https://www.primefaces.org/
Bootfaces
BootsFaces es un proyecto de código abierto que nació y se crió con el apoyo

de la comunidad, El equipo de desarrolladores esta compuesto por
33
profesionales de TI y aficionados que aportan habilidades y pasión para crear

este pedazo de pastel.
https://www.bootsfaces.net/
Iniciando un proyecto de Bootfaces
Probablemente la forma más fácil de comenzar es tomar uno de los proyectos

de demostración en https://github.com/stephanrauh/BootsFaces-Examples
Alternativamente, también puedes empezar desde cero. Abra su IDE favorito,
inicie un nuevo proyecto y agregue el jar de BootsFaces que ha descargado en
sus bibliotecas. Ahora, cree una nueva página JSF y haga que el encabezado
de la página como se muestra a continuación:
3.2. Java Mail

JavaMail es una API Java que facilita el envío y recepción de e-mail desde código
java a través de protocolos SMTP, POP3 y IMAP. JavaMail está integrado en la
plataforma Java EE, pero también proporciona un paquete opcional para su uso
en Java SE.
La versión actual es 1.6.0, publicada en julio de 2017. Existe otra implementación

JavaMail de código abierto - GNU JavaMail - aunque sólo soporta la versión 1.3
de la especificación JavaMail, además solo proporciona un único backend
gratuito de NNTP, que permite utilizar esta tecnología para leer y enviar artículos
de grupos de noticias.
JavaMail implementa el protocolo SMTP (Simple Mail Transfer Protocol) así

como los distintos tipos de conexión con servidores de correo -TLS, SSL,
autentificación con usuario y password, etc.
34
JavaMail no se incluye en la JDK ni en la JRE, sino que debe conseguirse como

un paquete externo. Debe, además, descargarse adicionalmente el JavaBeans
Activation Framework en caso de usar una JDK inferior a la versión 6.
https://javaee.github.io/javamail/
3.3. Google Maps
Si hablamos de mapas en la web, sin duda la referencia más conocida es Google

Maps. En su momento revolucionó la forma en que los mapas podían ser vistos
en internet. Hoy en día mantiene su liderazgo en muchas cuestiones, como los
servicios de geolocalización, datos de tráfico, cálculo de rutas…y además con
cobertura global.
Google es la marca comercial más reconocida en el mundo. Esto contribuye, sin

duda a la popularidad y extensión de Google Maps, pero es que además dispone
de Maps JavaScript API que permiten visualizar, y publicar nuestros mapas en
la web.
3.3.1. Crear un mapa web
Lo primero que tenemos que saber es que todas las aplicaciones de la API de
Google Maps requieren de una clave. Por lo tanto tendremos que acudir a la
página de Google y obtener una clave de API.
35
Una vez que tengamos la clave podemos empezar a construir nuestro mapa.
Necesitamos utilizar y por tanto conocer, aunque sea mínimamente, los tres
lenguajes básicos que se utilizan en una página web: HTML, CSS y JavaScript.
Empezaremos por el armazón html de la página al que le incorporaremos unos

estilos CSS:
36
Vemos que el código anterior no es más que una estructura HTML estándar a
la que hemos añadido unos estilos css. Hay que destacar que hemos creado un
elemento <div id=”mapa”> que será el espacio encargado de albergar nuestro
mapa. Observamos que en los estilos asignamos a este div el 100% del espacio,
para adaptarlo a los diferentes tipos de dispositivos.
A continuación, abordamos la parte JavaScript que es la que realmente se

ocupa del mapa. El código es el siguiente:
Primero se crea una variable map y a continuación se realiza una instancia a

la clase Map. Esta clase Map es el elemento central de la API de Google Maps,
y es la encargada de crear el mapa. Para realizar una nueva instancia a esta
clase se utiliza el operador JavaScript: new. El contenedor del mapa será el div
que habíamos creado anteriormente y se lo indicamos
mediante document.getElementById(‘map’).
Todos los mapas necesitarán de dos opciones obligatorias para poder construir
el mapa, se trata de center y zoom. En center se determinan las coordenadas
geográficas del centro del mapa y en zoom el nivel inicial de zoom.
3.4. Social Login
El proceso de registración en los websites muchas veces atenta contra

la experiencia. Ni que hablar de la creciente complejidad de tener que recordar
los usuarios y contraseñas de cada portal que se visita.
El social login resuelve este paso al ofrecer utilizar la identidad ya creada para
otro portal, tal como Facebook, LinkedIn o Twitter. Su creciente adopción se
37
debe a que elimina la necesidad de completar formularios y sumar otra

contraseña más a la larga lista que ya tenemos.
No es novedad decir que las redes sociales poseen una enorme cantidad de
usuarios activos: el 58% de los usuarios de Facebook ingresan al sitio a diario
y el 50% de Twitter visitan este portal todos los dias. El social login simplemente
aprovecha los datos de ingreso que los usuarios ya utilizan a menudo.
Como era de esperar, Facebook es la opción más popular para social login. A
nivel mundial, el 55% de los registros con social login se realizan a través de
Facebook. En Latinoamérica, el número sube al 82%. También ocupa el primer
lugar en accesos desde dispositivos móviles, llegando al 64% en todo el mundo.
Desde la perspectiva de las marcas que lo adoptan para sus websites, las
grandes ventajas que el social login promete son:
Menos rebotes: Este método de registración ha ganado muchos adeptos dado

que dice lograr un 50% más de efectividad en las registraciones.
• Más información de los usuarios: Al linkear la identidad de las redes

sociales con la actividad de un usuario en el sitio se pueden
obtener datos clave para optimizar la propuesta de productos y servicios
para tu público.
• Viralización de los contenidos: Dado que los usuarios ya están

registrados, se facilita el compartir la actividad que realizan en el sitio en
las redes sociales.
3.5. Ajax
El término AJAX se presentó por primera vez en el artículo "Ajax: A New
Approach to Web Applications
(http://www.adaptivepath.com/publications/essays/archives/000385.php) "
publicado por Jesse James Garrett el 18 de febrero de 2005. Hasta ese
momento, no existía un término normalizado que hiciera referencia a un nuevo
tipo de aplicación web que estaba apareciendo. En realidad, el término AJAX es
un acrónimo de Asynchronous JavaScript + XML, que se puede traducir como
"JavaScript asíncrono + XML". El artículo define AJAX de la siguiente forma: “
Ajax no es una tecnología en sí mismo. En realidad, se trata de varias
tecnologías independientes que se unen de formas nuevas y sorprendentes.”
38
Las tecnologías que forman AJAX son:
• XHTML y CSS, para crear una presentación basada en estándares.

• DOM, para la interacción y manipulación dinámica de la presentación.
• XML, XSLT y JSON, para el intercambio y la manipulación de información.
• XMLHttpRequest, para el intercambio asíncrono de información.
• JavaScript, para unir todas las demás tecnologías.
Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de

todas y cada una de las tecnologías anteriores. En las aplicaciones web
tradicionales, las acciones del usuario en la página (pinchar en un botón,
seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor.
Una vez procesada la petición del usuario, el servidor devuelve una nueva
página HTML al navegador del usuario.
3.6. Sockets y Tecnologia Push

En la actualidad las aplicaciones web avanzan en todo tipo de proyectos. El
aporte de Html5 mejora la usabilidad de las aplicaciones web, permitiendo lograr
aplicaciones capaces de reemplazar las tradicionales aplicaciones de escritorio.
Una nueva forma de comunicación entre servidores y clientes permiten obtener

mejores resultados en nuestras aplicaciones web.
La necesidad de tener una comunicación en tiempo real entre servidor y clientes

cada día es mayor. Podemos citar como ejemplo juegos online multijugador,
donde cada acción de cada cliente tiene que ser replicada a todos los
39
participantes del juego al mismo tiempo. El Protocolo de WebSocket permite la

comunicación de dos vías entre un cliente a un servidor remoto. El protocolo
consiste en lo que se define como un apretón de manos (en inglés handshake)
donde se genera el enlace, seguido de mensajes básicos a través de la capa
TCP. La principal motivación de este trabajo es, ¿Cómo implementar websocket
en una arquitectura Java Empresarial (Java EE - Enterprise Edition) . También
definimos como objetivo primario el de comprender y analizar en detalle de la
especificación y el estándar de websocket sobre la arquitectura antes
mencionada. Nuestra hipótesis parte de que websocket es la mejor forma de
conseguir una aplicación web con comunicación bidireccional entre servidor y
clientes, además posee soporte en gran diversidad en dispositivos móviles.
3.6.1. Paradigma Request / Response

El paradigma request/response (petición/respuesta) es la base de cualquier
aplicación web. Un cliente genera una petición de una página o recurso y el
servidor le responde con los datos. Sobre esta base se desarrolla cualquier
arquitectura web. En el 2005 con la ayuda de AJAX1 , las aplicaciones web
comienzan a mejorar la usabilidad y eficiencia. Esta tecnología provee peticiones
parciales, lo que permite no consultar toda la página, sino fragmentos de ella,
optimizando la carga en la red. Aun así, todas las peticiones las solicita el cliente
a través de HTTP. Sin una petición previa el servidor no puede enviar una
respuesta a los clientes. Existen tecnologías que permiten que el servidor envíe
datos al cliente al detectar algún cambio, como podría ser una notificación.
A continuación, se presentan dos técnicas que resuelven este requerimiento:
• AJAX Sondeo (polling): Consiste en realizar constantemente peticiones al

servidor preguntándole si se ha producido algún evento que requiera una
actualización en la vista. En un chat, desde la pantalla donde llegan los
posibles mensajes que recibe el usuario por parte de otros usuarios, se
estarían enviando peticiones HTTP al servidor preguntándole si tengo
mensajes.
• Comet Sondeo largo (long polling): Consiste en realizar una única petición
al servidor de forma que éste responde diciendo que va a devolver la
respuesta en trozos. La petición queda abierta hasta que el servidor
40
responda con todas las porciones de respuesta que solicita el cliente, que
no son otra.
CUARTA UNIDAD: PERSISTENCIA DE DATOS

MEDIANTE HIBERNATE
4.1. Introducción a ORM
Object-Relational mapping, o lo que es lo mismo, mapeo de objeto-relacional,

es un modelo de programación que consiste en la transformación de las tablas
de una base de datos, en una serie de entidades que simplifiquen las tareas
básicas de acceso a los datos para el programador.
Desde hace muchos años el lenguaje más usado para acceder a las bases de
datos relacionales ha sido el SQL. ¿Por qué entonces cambiar y pasarse a un
ORM?
Ventajas y desventajas de un ORM
• Ventajas
o Facilidad y velocidad de uso
o Abstracción de la base de datos usada.
o Seguridad de la capa de acceso a datos contra ataques.
• Desventajas
o En entornos con gran carga poner una capa más en el proceso
puede mermar el rendimiento.
41
o Aprender el nuevo lenguaje del ORM.
4.2. Hibernate – Configuración

En la mayoría de las aplicaciones empresariales, si no es que en todas, una parte
muy importante es el almacenamiento de datos de forma que estos datos puedan
sobrevivir más allá del tiempo que nuestra aplicación está encendida (ya sea en
una aplicación standalone o en una aplicación web).
El almacén de datos más común son las bases de datos relacionales. La

naturaleza de estas bases hace que no sea tan fácil usarlas en el
almacenamiento de datos en aplicaciones orientadas a objetos (por las
diferencias entre el modelo de datos de objetos y el modelo de datos
relacionales), ya que para guardar un objeto debemos extraer cada una de sus
propiedades que queremos persistir y armar con ellos una
sentencia INSERT de SQL. De la misma forma, cuando queremos recuperar los
datos de un objeto, debemos usar una sentencia SELECT de SQL y
después extraer el valor de cada una de las columnas recuperadas y llenar
así nuestro objeto.
Esto puede no parecer un problema en aplicaciones pequeñas, pero cuando

comenzamos a tener muchos objetos que debemos guardar se vuelve algo muy
pesado y engorroso, además de que consume mucho de nuestro tiempo que
podríamos dedicar a mejorar la lógica de la aplicación, o a realizar pruebas de la
misma.
Esto se hizo de esta manera durante muchos años, hasta que comenzaron a
surgir las soluciones de Mapeo Objeto/Relacional (ORM por sus siglas en
inglés). El mapeo objeto/relacional se refiere a una técnica de mapear
representaciones de datos de un modelo de objetos a un modelo de datos
relacionales con un esquema basado en SQL.
Hibernate, como la definen sus autores, es una herramienta de mapeo

objeto/relacional para ambientes Java. Además no solo se encarga del mapeo
de clases Java a tablas de la base de datos (y de regreso), sino que también
42
maneja los queries y recuperación de datos, lo que puede reducir de forma

significativa el tiempo de desarrollo que de otra forma gastaríamos manejando
los datos de forma manual con SQL y JDBC, encargándose de esta forma de
alrededor del 95% de las tareas comunes relacionadas con la persistencia de
datos, manejando todos los problemas relativos con la base de datos particular
con la que estemos trabajando, de forma transparente para nosotros como
desarrolladores. Entonces, si cambiamos el manejador de base de datos no será
necesario que modifiquemos todo el SQL que ya teníamos para adaptarse
al SQL que maneja la nueva base de datos. Solo será necesario modificar una
línea en un archivo de configuración de Hibernate, y este se encargará del resto.
Configuración
La forma de configurar hibernate es usando el fichero XML de configuración
llamado hibernate.cfg.xml. Este fichero deberemos guardarlo en el paquete raíz
de nuestras clases Java, es decir fuera de cualquier paquete.Si estamos usando
NetBeans deberá ser en la carpeta src de nuestro proyecto.
La información que contiene es la siguiente:
▪ Propiedades de configuración.
▪ Las clases que se quieren mapear.
El fichero tiene la siguiente estructura:
4.3. Relaciones mediante Anotaciones

4.3.1. Relación uno a muchos
Para usar notaciones deberemos modificar el código fuente de las clases Java y
no usar los ficheros .hbm.xml.
El código fuente de la clase Profesor queda de la siguiente forma:
43
A la propiedad correosElectronicos se ha añadido una anotación para indicar la

relación uno a muchos.
▪ OneToMany:Como su nombre indica le dice a Hibernate que esta
propiedad contendrá la lista de hijos.
▪ cascade: Este atributo tiene el mismo significado que el del fichero
de mapeo de Hibernate. Mas información en Cascade.
▪ JoinColumn: Indicaremos el nombre de la columna que en la
tabla hija contiene la clave ajena a la tabla padre. En nuestro ejemplo es
la columna de la base de datos IdProfesor que se encuentra en la
tabla CorreoElectronico la cual enlaza con la tabla Profesor.
44
▪ IndexColumn: Indicaremos el nombre de la columna que en la

tabla hija contiene el orden dentro de la lista de hijos. En nuestro ejemplo
es la columna de la base de datos idx que se encuentra en la
tabla CorreoElectronico.
El código de la clase CorreoElectronico es el siguiente:
45

Guia Introduccion A La Web

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guia Introduccion A La Web

Caricato da

Copyright:

Formati disponibili

INSTITUTO TECNOLÓGICO SUPERIOR

NOVIEMBRE 2018 – ABRIL 2019

PRIMERA UNIDAD: INTRODUCCIÓN A LA

En algunos ambientes se discute que el World Wide Web ya no es un sistema

• El Web tenía que ser distribuido: La información repartida en páginas no muy

• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser

Este lenguaje será el encargado de convertir un inocente archivo de texto inicial

1.1.2. ¿Qué se necesita para realizar una página web?

NOTA: Si el editor o procesador de textos usado para crear la página obliga a

cambiar el nombre del archivo desde fuera del programa a index.html o

ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de

Últimamente han aparecido nuevas alternativas que facilitan la programación de

• Asistentes: ayudan a crear el código HTML e incluyen plantillas de código

• Conversores: son programas con otra función que la de la programación Web

Algunas razones para usar HTML

• Seremos capaces de aprovechar todas las características de este lenguaje,

• Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos

• No dependeremos de la disponibilidad de una herramienta concreta para poder

El principal problema de usar editores conversores y WYSIWYG es la necesidad

HTML es un lenguaje descriptivo

Probablemente el lector ha usado alguna vez un procesador de texto (Abiword™,

Pero una consecuencia más importante aún de esta característica, es que ha

distintas como, por ejemplo: 640x480, 800x600 y 1024x768. Si existe la

Un buen ejemplo de este carácter descriptivo es la deﬁnición de titulares, también

<h1>Bienvenido a la página de La Super Editorial</h1>

Con este código estamos describiendo el texto Bienvenido a la página de La

También podemos encontrar ventajas de la descripción mirando al futuro.

letra la disposición (aproximada) de imágenes y texto de manera que se facilita

1.1.3. Las bases de HTML

O bien esta otra:

<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>

Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los

Esta línea tiene un grosor predeterminado y un ancho variable en función del

Es decir, en primer lugar, ponemos el nombre de la etiqueta, después el nombre

En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que

1.1.4. Estructura de una página

En primer lugar deberemos especiﬁcar que el archivo de texto que estamos

<html> Código de la página </html>

El código de la página esta formado a su vez por dos grandes bloques, la

La cabecera de la página está delimitada por las instrucciones de inicio y ﬁn de

<html> <head> Elementos de la cabecera </head> ... Resto de código de la

En la cabecera de la página se introduce toda aquella información que afectará

<html> <head> <title>Mi primera página WEB</title> </head> </html>

El resultado de ver esta página con nuestro navegador es el que se observa en

1.1.5. Etiquetas básicas

Ha llegado el momento de aprender a introducir un texto en una página web,

La mejor manera de habituarse es probar, para ello proponemos los siguientes

<h1>El conductor del coche le pregunto si se encontraba mal</h1>

<h1> El conductor del coche le preguntó si se encontraba mal </h1>

<h1> El conductor del coche le pregunto si se encontraba mal </h1>

En estos ejemplos podemos observar diversos saltos de línea y separaciones en

En ocasiones puede ser conveniente introducir un punto y aparte cuando

Estaba internándose en lo desconocido. <br> Durante todo el trayecto hasta

Espacio entre líneas

<br> &nbsp; <br> &nbsp; <br> &nbsp;

El atributo ’align’ en la etiqueta <p> permite especiﬁcar la alineación del párrafo.

Cómo insertar imágenes en una página.

En el cuarto capítulo de la obra trataremos con detalle el mundo de las imágenes

En la figura anterior se puede observar cómo hemos insertado una ﬂecha en

Una vez tenemos la imagen en un archivo aparte es hora de escribir el código

Cómo crear enlaces hipertexto.

La etiqueta <a>... </a>

Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas

<br> <br> <br>