Desarrollo Web
Integrado
Mg. Aldo Robles Arana
Conocimientos previos
• ¿Qué es la programación orientada a objetos?
• ¿Cuáles son los principios de la POO?
• ¿Para que se usa las interfaces?
Java Enterprise Edition
Utilidad
Uso de Java Enterprise Edition Tamaño de la empresa donde trabajan los
desarrolladores Java
Fuente: https://blog.rootnite.com/technology/estadisticas-uso-del-ecosistema-java-en-2018/
Temario
➢ Java Enterprise Edition
➢ Plataformas Java
➢ Java EE
➢ Modelo de aplicación de Java
EE
➢ Componentes
➢ Contenedores
➢ Componentes vs Objetos
➢ Servidores de aplicaciones
➢ Fundamentos de HTML
Logro
Al finalizar esta sesión el
estudiante, diseña una pagina
web estática en HTML
empleando la plataforma Java
Enterprise Edition.
Plataformas Java
• Todas las plataformas Java definen APIs y requerimientos necesarios para
poder ejecutar aplicaciones en diferentes ambientes, así se tiene:
• Java Card. Aplicaciones Java en los chips de las tarjetas.
• Java Micro Edition (Java ME). Aplicaciones Java en dispositivos
embebidos (teléfonos, televisores, etc)
• Java Standard Edition (Java SE). Aplicaciones Java de escritorio en
ordenadores personales o portátiles.
• Java Enterprise Edition (Java EE). aplicaciones Java servidoras, lo que
supone: cliente/servidor, multiusuario, transaccionalidad, escalabilidad, etc.
Plataformas Java
Java EE
• Java EE es una plataforma de programación para desarrollar y
ejecutar aplicaciones en lenguaje de programación Java, con
arquitectura de n-niveles distribuida.
• Está basada en componentes de software que se ejecutan en
un servidor de aplicaciones.
• Java EE extiende Java SE (que significa Java Standard Edition)
• Cada versión de Java EE está compuesta por un conjunto de
tecnologías específicas. Para que un programador utilice estas
tecnologías, necesita descargar una JSR (solicitudes de
especificación de Java).
Versiones de Java EE
Modelo de aplicación de Java
EE
El modelo de aplicaciones Java EE define una arquitectura para
implementar servicios como aplicaciones multicapa o multinivel que
aseguren la escalabilidad, accesibilidad y facilidad de gestión
necesarias en un ámbito empresarial. El modelo divide el trabajo
en dos partes:
• La lógica de presentación y de negocio a implementar por el
desarrollador.
• Los servicios estándar que ofrece la plataforma Java EE.
Modelo de aplicación de Java
EE
Se tiene las siguientes capas o niveles:
• Nivel cliente (Client Tier): responsable de la interacción con el usuario.
• Nivel web (Web Tier): responsable del control de la aplicación y en
ocasiones también de la interacción con el usuario.
• Nivel de negocio (Business Tier): responsable de la lógica de la
aplicación propiamente dicha.
• Nivel de datos (EIS Tier): responsable de la persistencia de datos y/o
lógica especializada (conocida con el nombre de EIS: Enterprise
Information System, o Sistema de Información Empresarial). Por ejemplo
ERPs, BBDD, Motores Transaccionales (CICS, IMS, Tuxedo, etc.).
Modelo de aplicación de Java
EE
Datos/Observaciones
Nivel cliente
• El cliente se comunica con el
nivel empresarial que se ejecuta
en el servidor Java EE ya sea
directamente o, como en el caso
de un cliente que se ejecuta en
un navegador, pasando por
páginas web o servlets que se
ejecutan en el nivel web.
Nivel Web
• Los componentes de este
nivel son los servlets o
páginas web creadas
utilizando tecnología
JavaServer Faces y / o
tecnología JSP (páginas
JSP).
Nivel Web
• Los servlets son clases de lenguaje de programación Java que
procesan dinámicamente solicitudes y construyen respuestas.
• Las páginas JSP son documentos basados en texto que se
ejecutan como servlets pero permiten un enfoque más natural
para crear contenido estático.
• La tecnología JavaServer Faces se basa en servlets y
tecnología JSP y proporciona un marco de componentes de
interfaz de usuario para aplicaciones web.
Nivel de negocio
• Es la lógica que resuelve o
satisface las necesidades de un
dominio comercial en particular,
como banca, comercio
minorista o finanzas, es
manejado por beans
empresariales que se ejecutan
en el nivel comercial o en el
nivel web.
Nivel de datos o Nivel del
sistema de información
empresarial (EIS)
• El nivel del sistema de información empresarial
maneja el software EIS e incluye sistemas de
infraestructura empresarial, como planificación de
recursos empresariales (ERP), procesamiento de
transacciones de mainframe, sistemas de bases
de datos y otros sistemas de información
heredados. Por ejemplo, los componentes de la
aplicación Java EE pueden necesitar acceso a
los sistemas de información empresarial para la
conectividad de la base de datos
Componentes
Un componente es una unidad de software funcional autónoma que
se ensambla en una aplicación Java EE con sus clases y archivos
relacionados y que se comunica con otros componentes. Los
componentes posibilitan:
• El reuso práctico de partes de software.
• El desarrollo de aplicaciones por ensamblaje de módulos
existentes
• La amortización de inversiones y tiempo a lo largo de múltiples
aplicaciones, facilitando la división del trabajo
Componentes
La especificación de Java EE define los siguientes componentes
de Java EE:
• Componentes cliente: aplicaciones Java SE (AWT/Swing,
Applets) o un navegador web (Firefox, Chrome, Safari, etc.). Se
despliegan en la capa cliente.
• Componentes web: Java Servlets, JavaServer Pages (JSP) o
JavaServer Faces (JSF). Se despliegan en la capa web.
• Componentes de negocio: Enterprise JavaBeans (EJB). Se
despliegan en la capa de negocio.
Contenedores
Es un entorno donde se despliegan y ejecutan los componentes. Así se tiene:
• Contenedor de aplicaciones clientes: gestiona la ejecución de los
componentes de la aplicación cliente. Se ejecutan en el cliente.
• Contenedor Applet: gestiona la ejecución de applets. Consiste en un
navegador web y Java Plug-in, se ejecutan en el cliente.
• Contenedor Web: gestiona la ejecución de páginas web, servlets y algunos
componentes EJB para aplicaciones Java EE. Se ejecutan en el servidor
Java EE.
• Contenedor de EJB (Enterprise JavaBeans): gestiona la ejecución de beans
empresariales para aplicaciones Java EE. Se ejecutan en el servidor Java
EE.
Datos/Observaciones
Componentes vs. objetos
Un componente se caracteriza por:
• Ser una unidad de despliegue independiente
• Encapsula sus características constituyentes respecto a su entorno
• No se implanta de manera parcial
• Ser una unidad de composición
• Con componentes posiblemente desarrollados por otros
• Debe ser suficientemente autocontenido
• Especificaciones claras de lo que requiere y de lo que proporciona
• Interacciona con su entorno a través de interfaces bien definidas
• No tener estado persistente
• Un componente no se distingue de otras copias del mismo
• Excepto atributos no funcionales como el número de serie
• Por tanto, en un proceso se puede decir si hay o no un componente, pero no varias instancias
del mismo
Componentes vs. objetos
Un objeto se caracteriza por:
• Ser una unidad de instanciación; tienen una identidad única que
no cambia durante la vida del objeto
• Tener un estado, se crea con un estado inicial que evoluciona
durante la ejecución
• Encapsular su estado y comportamiento, el cual está definido
bien por una clase o por un objeto prototipo
Servidores de aplicaciones
Fundamentos de HTML
Lenguaje HTML
• El lenguaje HTML (HyperText Markup Languaje – Lenguaje de Marcas
de Hipertexto), es un lenguaje utilizado para el desarrollo y creación de
páginas web.
• HTML no es un lenguaje de programación tipo JAVA o C++ o Perl, sino
es un lenguaje de marcado que define la estructura y la semántica de
un documento.
• HTML está compuesto por un conjunto de elementos que son la
base de su estructura. Los elementos son representados por
etiquetas (tags) en el código, pero no son la misma cosa.
Sintaxis de HTML
• La sintaxis de HTML esta constituida por los elementos que son
la principal estructura del lenguaje y los que conforman las
páginas web.
<etiqueta> contenido del elemento </etiqueta>
• A su vez los elementos contienen atributos, los cuales brindan
características especificas.
Un elemento en HTML
• Los elementos nos ayudan a estructurar y dar un significado a las partes de
un documento HTML.
Etiqueta de apertura Etiqueta de cierre
<p> Aprendamos un poco de la web </p>
Contenido
• Con los elementos se pueden crear: encabezados, párrafos, textos con
énfasis, tablas, imágenes, formularios, etc.
Estructura de un documento
HTML
<!DOCTYPE html>
<html>
<head>
Cabecera
</head>
<body>
Cuerpo
</body>
</html>
Etiquetas HTML
• Encabezados
Elemento Descripción
<h1> Texto muy grande
<h2> Texto grande
<h3> Texto algo más grande de lo normal
<h4> Texto normal
<h5> Texto pequeño
<h6> Texto muy pequeño
Etiquetas HTML
• Bloque de texto
Elemento Descripción
<blockquote> Representa una cita extendida, cuya fuente puede ser provista por el elemento <cite>.
Representa un contenedor genérico de bloque dentro del documento, sin ninguna
<div>
carga semántica o de estilo.
Representa una ruptura o cierre temático entre elementos de nivel de párrafo,
<hr>
usualmente representado como una barra horizontal.
<li> Representa un elemento individual de una lista ordenada o no ordenada.
<ol> Representa una lista ordenada de elementos.
<p> Representa un párrafo.
<ul> Representa una lista no ordenada de elementos.
Etiquetas HTML
• Texto en línea
Elemento Descripción
<a> Representa un hipervínculo hacia un recurso especificado por una URI.
<br> Representa un salto de línea.
<strong> Representa texto que tiene una importancia o seriedad muy alta.
• Contenido multimedia
Elemento Descripción
<audio> Usado para añadir audio a un documento.
<img> Usado para añadir imágenes a un documento.
<video> Usado para añadir archivos de vídeo a un documento.
Etiquetas HTML
• Tablas
Elemento Descripción
Representa el título de una tabla. En HTML+, representaba una etiqueta genérica, y era usado tanto
<caption>
en tablas como en imágenes definidas en el elemento <fig>.
<col> Usado para definir una semántica común entre todas las celdas de una columna.
<colgroup> Usado para definir un grupo de columnas en una tabla.
<table> Representa una tabla.
<tbody> Representa el contenedor para el cuerpo de una tabla.
<td> Representa una celda de una tabla.
<tfoot> Representa el contenedor para el pie de una tabla.
Representa una celda de una tabla, definiéndola como encabezado de una fila o columna, según el
<th>
contexto o el atributo scope.
<thead> Representa el contenedor para el encabezado de una tabla.
<tr> Representa una fila de una tabla.
Etiquetas HTML
• Formularios
Elemento Descripción
<form> Representa un formulario que contiene controles para el envío de información.
<button> Representa un botón, que puede tener una acción asociada.
<fieldset> Representa un grupo de controles enmarcados dentro de un formulario.
<input> Representa un control para introducir datos de cierto tipo, determinado por el atributo type.
<label> Representa la etiqueta de un control.
<legend> Representa la etiqueta de un elemento <fieldset>.
<option> Representa un elemento de una lista de opciones.
<select> Representa un control donde se puede seleccionar una o más opciones de una lista.
<textarea> Un control donde se puede introducir una cantidad variable de texto.
Estructura Semántica HTML
• HTML5 incluye elementos semánticos, o marcados semánticos,
que ayudan a definir las distintas divisiones de una página web.
• Las versiones anteriores solo utilizaba la etiqueta <div>.
Estructura Semántica HTML
Estructura Semántica HTML
• Etiquetas de la cabecera:
Elemento Descripción
<meta> Define los metadatos que no pueden ser definidos usando otro elemento HTML.
Título del documento. Se muestra en la barra superior del navegador o en las pestañas
<title>
de página.
<link> Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
<style> Etiqueta de estilo usada para escribir CSS interno.
Estructura HTML Semántico
• Etiquetas del cuerpo:
Elemento Descripción
<header> Define la cabecera de una web o de un elemento.
<nav> Define una sección que contiene un menú de navegación.
<main> Define el contenido principal del documento. Solamente existe un elemento <main> en el documento.
<section> Define secciones de una web.
<article> Define unidades de contenido que podrían existir independientemente del resto del contenido.
Define a barra lateral de una página web. Puede contener todo tipo de contenido. Sin embargo, se
<aside>
suele utilizar para mostrar enlaces.
<footer> Define el pie de página. También se puede utilizar para definir el pie otros elementos.
<address> Define una sección que contiene información de contacto.
Aplicaciones
Implementar en el laboratorio
lo explicado en clase
Ejemplo
<header>
<nav>
<main>
<section>
<article>
<aside>
<blockquote>
<footer>
<nav>
Ejemplo
Agrega a la página:
• Un video en <aside>
• Un formulario en una <section>
• Una tabla dentro de otra <section>
Ejemplo
• Diseñe el siguiente formulario
Ejemplo
• Diseñe la siguiente tabla
Resumiendo…
• Las plataformas de java son: __________________,
__________________, ____________________ y ________________.
• Los niveles en los que se distribuyen las aplicaciones Java EE son:
__________________, __________________, ____________________ y
________________.
• Un componentes es __________________________________.
• Un contenedor es ___________________________________.
• Los elementos de la estructura semántica HTML
____________________________________________________________
__________________________________________________.
