Lenguaje de Programación I

Vista previa del material en texto

LENGUAJE DE PROGRAMACIÓN I
Unidad 1: HTML, JQuery, Servlet, JSP y JDBC
Tema 1: HTML, JSP, Bootstrap y Elementos de Script 
‹Nº›
1
Tema 1: HTML, JSP, Bootstrap y elementos de Script 
¿Te suena familiar esta imagen, recordamos lo que significa o representa?
‹Nº›
Índice
1.1.	Tema 1: HTML, JSP, Bootstrap y elementos de Script
1.1.1.	Implementación de un proyecto web con Eclipse
1.1.2.	HML y JSP
1.1.3.	Mejora usando Bootstrap
‹Nº›
Capacidades
Implementa aplicaciones Java Web con JSP y Servlet en base de datos: consultas y mantenimientos.
‹Nº›
Introducción
La Institución Educativa de Educación Superior Cibertec, le solicita implementar su aplicación web, para ello tiene el siguiente modelo:
‹Nº›
Introducción
La Institución Educativa de Educación Superior Cibertec, le solicita implementar su aplicación web, para ello tiene el siguiente modelo:
‹Nº›
1.1.	HTML, JSP, Bootstrap y elementos de Script
En la actualidad existen diversos IDE para poder programar en java, pero para poder trabajar adecuadamente se recomienda el uso del IDE Eclipse. 
"Si se quiere algo más potente, una buena opción es Eclipse. Eclipse fue desarrollado primeramente por IBM, aunque actualmente es un IDE de código abierto desarrollado y mantenido por la Fundación Eclipse" (Moreno, 2014, p66).
Figura: Página oficial de Eclipse
Fuente. - Tomado de https://www.eclipse.org/downloads/packages/
‹Nº›
7
1.1.	HTML, JSP, Bootstrap y elementos de Script
Implementar un proyecto web, no sólo implica un editor de páginas web, sino otros elementos que permitan el diseño tanto del front-end como del back-end:
JDK
https://www.oracle.com/java/technologies/javase-downloads.html 
IDE Eclipse EE (2022)
https://www.eclipse.org/downloads/packages/release/2022-12/r
Servidor Apache Tomcat
http://tomcat.apache.org/
‹Nº›
8
1.1.1. Implementación de un proyecto web con Eclipse
Crear un nuevo Dynamic Web Project
‹Nº›
9
1.1.1. Implementación de un proyecto web con Eclipse
‹Nº›
10
1.1.1. Implementación de un proyecto web con Eclipse
Una vez iniciado Eclipse, instalar el Servidor de aplicaciones web, que permita desplegar nuestro proyecto y probar su funcionalidad, para ello utilizaremos Apache Tomcat.
Figura - Página oficial de Apache Tomcat
Fuente. – Tomado de https://tomcat.apache.org/ 
‹Nº›
11
1.1.1. Implementación de un proyecto web con Eclipse
Ejecutar el proyecto
‹Nº›
12
1.1.1. Implementación de un proyecto web con Eclipse
Para importar/exportar los proyectos en java web, usaremos el formato de archivo WAR (Web Application), es un archivo empaquetado utilizado para distribuir e implementar en un servidor todos los archivos necesarios para su ejecución (Páginas, Servlets, recursos web, etc.)
‹Nº›
13
1.1.2. HML y JSP
En eclipse se pueden utilizar los dos tipos de páginas:
Páginas HTML. Páginas diseñadas con el lenguaje HTML.
Páginas JSP. Páginas con contenido dinámico, con soporte JAVA
‹Nº›
14
Ejercicio dirigido 1
Crea la página en java web usando jsp: 
Paso 1. En la carpeta WebContent del proyecto, hacemos clic derecho y seleccionamos JSP File.
‹Nº›
Ejercicio dirigido 1
Paso 2. En la ventana, escribiremos el nombre del archivo (la extensión es opcional) y finalizamos.
Paso 3. Se mostrará la página demo.jsp en un editor.
‹Nº›
Ejercicio dirigido 2
Se le solicita implementar la siguiente tabla haciendo uso de html y jsp:
‹Nº›
Ejercicio dirigido 3
Se le solicita implementar la siguiente tabla haciendo uso de html y jsp:
‹Nº›
Ejercicio dirigido 4
Se le solicita implementar la siguiente tabla haciendo uso de html y jsp:
‹Nº›
1.1.3. Mejora usando Bootstrap
Existen diversas herramientas de diseño para mejorar o perfeccionar la parte visual de nuestras aplicaciones web. En esta parte usaremos Bootstrap. Boostrap (2023) en su página web nos indica que este es un potente conjunto de herramientas de front-end repleto de funciones. Cree cualquier cosa, desde el prototipo hasta la producción, en minutos.
Figura: Página oficial de Bootstrap
Fuente. - Tomado de https://getbootstrap.com/
‹Nº›
20
1.1.3. Mejora usando Bootstrap
Agregamos Bootstrap al proyecto: 
‹Nº›
21
Ejercicio dirigido 5
Se le solicita implementar la siguiente tabla haciendo uso de html, jsp y Bootstrap:
‹Nº›
Ejercicio Grupal:
La Institución Educativa de Educación Superior Cibertec, le solicita implementar su aplicación web, para ello tiene el siguiente modelo: Emplee las etiquetas semánticas y estilos de su preferencia.
‹Nº›
Ejercicio Grupal:
La Institución Educativa de Educación Superior Cibertec, le solicita implementar su aplicación web, para ello tiene el siguiente modelo: Emplee las etiquetas semánticas y estilos de su preferencia.
‹Nº›
Conclusiones
Es importante recordar que para desplegar o probar las aplicaciones web en Java, es necesario un servidor web. En nuestro curso usamos Apache Tomcat. 
En caso de necesitar que una página web cambie o responda a las opciones del usuario, se diseñarán páginas web dinámicas (JSP), esto nos permitirá agregar bloques de código java; para páginas de solo información u otras, se podrán usar páginas estáticas aplicando únicamente HTML.
Para exportar o importar aplicaciones web con Java debemos usar el formato .war, y se debe tener cuidado en activar el destino o entorno del servidor web, así como, las opciones del código fuente.
‹Nº›
Referencias bibliográficas
Kurniawan, Budi (2019). Java: A Beginner's Tutorial. BrainySoftware.
Layka, Vishal (2014). Learn Java for Web Development: Modern Java Web Development. Apress.
Moreno, Pérez, Juan Carlos (2014). Programación en lenguajes estructurados. Ra-Ma.
Mozilla Developer, (2022). HTML: Lenguaje de etiquetas de hipertexto. https://developer.mozilla.org/es/docs/Web/HTML
The Apache Software Foundation (2021). Apache Tomcat.
http://tomcat.apache.org/
‹Nº›
26
www.cibertec.edu.pe
	SEDE SAN JUAN DE LURIGANCHO
Av. Próceres de la Independencia 3023-3043
San Juan de Lurigancho – Lima
Teléfono: 633-5555
	SEDE LIMA CENTRO
Av. Uruguay 514
Cercado – Lima
Teléfono: 419-2900
	SEDE BELLAVISTA
Av. Mariscal Oscar R. Benavides 3866 – 4070 
(CC Mall Aventura Plaza)
Bellavista – Callao
Teléfono: 633-5555	SEDE AREQUIPA
Av. Porongoche 500 
(CC Mall Aventura Plaza)
Paucarpata - Arequipa
Teléfono: (054) 60-3535
GRACIAS
SEDE INDEPENDENCIA
Av. Carlos Izaguirre 233
Independencia – Lima
Teléfono: 633-5555
SEDE BREÑA
Av. Brasil 714 – 792 (CC La Rambla – Piso 3)
Breña – Lima
Teléfono: 633-5555
SEDE TRUJILLO
Calle Borgoño 361
Trujillo
Teléfono: (044) 60-2000
‹Nº›