Día, Fecha: Jueves, 22/02/2024

Hora de inicio: 17:20

Introducción a la Programación y
Computación 1 [B]
Josué Rodolfo Morales Castillo
{ ..
Clase 5- Agenda

● Foro No. 5
● Preguntas proyecto 1
● Recordatorio corto 1
● Interfaces gráficas en Java

} ..
{ Interfaces Gráficas en
Java

...
}
 ¿Qué son?
Una interfaz gráfica de usuario (GUI) en Java es un conjunto de
componentes gráficos que permiten a los usuarios interactuar con programas
mediante elementos visuales, como ventanas, botones, cajas de texto, menús
y otros elementos.

Java proporciona varias

bibliotecas para crear
interfaces gráficas,
siendo Swing y AWS dos de
las más utilizadas.
 AWT

AWT (Abstract Window Toolkit) es una biblioteca gráfica para el

desarrollo de interfaces de usuario en Java. Es parte del paquete
java.awt y fue una de las primeras bibliotecas de este tipo en Java.
AWT proporciona un conjunto de clases y métodos que permiten la
creación de ventanas, cuadros de diálogo, botones, campos de texto y
otros elementos de la
interfaz gráfica.
 Swing

Aunque AWT fue la primera biblioteca gráfica

en Java, posteriormente se introdujo Swing
como una extensión de AWT para proporcionar
una mayor flexibilidad y una interfaz gráfica
más rica y consistente. Swing es más ligero,
personalizable y ofrece componentes más
avanzados que AWT, y es la opción preferida
para el desarrollo de interfaces gráficas en
aplicaciones Java modernas. Sin embargo, AWT
aún se utiliza en ciertos casos y puede ser
relevante en entornos más específicos.
 Componentes de la Interfaz Gráfica
Los componentes de la interfaz gráfica son elementos visuales que se
utilizan para construir la interfaz de usuario de una aplicación.
Algunos de los componentes más comunes en Java son:

JFrame La ventana principal de

la aplicación. Un contenedor que se puede
usar para organizar y JPanel
agrupar otros componentes

JButton Un botón que el usuario

puede hacer clic
Un componente que muestra
texto o una imagen
JLabel

JTextField Un campo de texto que

permite al usuario JCheckBox y
Un campo de texto que
escribir texto. permite al usuario
escribir texto.
JRadioButton
 Disparadores de Eventos
Los eventos en una interfaz gráfica son acciones o situaciones
específicas que ocurren durante la interacción del usuario con la
aplicación. Los disparadores de eventos son objetos que representan
estas acciones.

ActionEvent MouseListener
Se dispara cuando ocurre
Se utiliza para manejar eventos
una acción, como hacer clic
relacionados con el ratón, como clics y
en un botón.
movimientos.
 ¿Dudas?
{

} ..
{ ..

Ejemplo
} ..
 Día, Fecha: Jueves, 29/02/2024

Hora de inicio: 17:20

Introducción a la Programación y
Computación 1 [B]
Josué Rodolfo Morales Castillo
{ ..
Clase 6- Agenda

● Foro No. 6
● Preguntas proyecto 1
● Lectura tarea 3
● Principios básicos de UML (Diagrama
de clases)

} ..
{ Principios básicos de UML
(Diagrama de clases)

...
}
{

...
https://youtu.be/Z0yLerU0g-Q?si=to4mg0Qp7Bn5JYCM

}
 ¿Qué es un diagrama de clases?
Es una representación gráfica que describe
la estructura de un sistema orientado a
objetos, delineando las clases, sus
atributos y métodos, así como las
relaciones entre ellas, como asociaciones,
herencias y composiciones. Es una
herramienta de análisis y diseño de
sistemas de software, facilitando la
comprensión de la arquitectura del sistema
y mejorando la comunicación entre los
miembros del equipo de desarrollo al
ofrecer una vista organizada y precisa de
las entidades y sus interacciones.
Los diagramas de clases son uno de los tipos
de diagramas más útiles en UML, ya que trazan
claramente la estructura de un sistema
concreto al modelar sus clases, atributos,
operaciones y relaciones entre objetos.
 Definición de Clases
Clase: Representa un conjunto de objetos que comparten características
comunes y comportamientos. Se representa en el diagrama con un rectángulo
dividido en tres secciones: la superior contiene el nombre de la clase, la
del medio incluye los atributos, y la inferior muestra los métodos.

Atributos: Características o propiedades de la clase. Se muestran en

la sección de atributos y pueden tener diferentes niveles de
visibilidad (públicos, privados, protegidos). Ejemplo:
+nombre: String indica un atributo público llamado nombre de
tipo String.

Métodos: Comportamientos que la clase puede realizar. Se representan

en la sección de métodos y también tienen niveles de visibilidad.
Ejemplo:
+calcularPrecio(): double método público llamado calcularPrecio que
devuelve un valor de tipo double.
 Relaciones
Asociacion Agregacion Composicion
Representa una relación entre Indica una relación "todo-parte" Es una forma más fuerte de
dos clases. Puede ser entre clases. Se representa con agregación, indicando que una
unidireccional o bidireccional. un rombo en la clase que clase es parte de otra y no
Se muestra con una línea y puede contiene los objetos y una línea puede existir
tener una multiplicidad que hacia la clase contenida. independientemente. Se
indica cuántos objetos de cada representa con un rombo relleno.
clase participan en la relación.

Herencia Dependencia
Representa una relación "es-un"
Indica que un cambio en una
entre clases. La subclase hereda
clase puede afectar a otra. Se
atributos y métodos de la
representa con una línea
superclase. Se muestra con una
punteada.
línea y una flecha apuntando
hacia la superclase.
 Ámbito de las propiedades
Público (+) Privado (-) Protegido (#)
Accesible desde cualquier Solo accesible dentro de Accesible dentro de la
parte del sistema. la propia clase propia clase y sus
subclases.

Paquete (~)
Accesible dentro del
paquete que contiene la
clase
Diseño de programas

Se utiliza para el diseño de programas

orientados a objetos. Permite
visualizar la estructura de un
sistema, sus componentes y cómo
interactúan entre sí.
 Clases de asociaciones

● Asociación Simple: Es la relación Una agregación podría ser entre

más básica entre dos clases. "Departamento" y "Empleado", donde
Representa una conexión general sin un departamento contiene empleados,
distinciones especiales. Una pero los empleados pueden existir
asociación simple podría ser entre independientemente del departamento.
las clases "Estudiante" y "Curso",
donde un estudiante está ● Composición: Es una forma más fuerte
relacionado con uno o más cursos. de agregación, donde la parte no
puede existir independientemente del
● Agregación: Representa una relación todo. Si el todo se destruye, las
de "todo-parte", donde una clase partes también se destruyen.
(el todo) contiene o está compuesta Un ejemplo sería la relación entre
por otras clases (las partes). "Carro" y "Rueda", ya que si el
carro se destruye, las ruedas
también se destruyen.
 Multiplicidad y dependencia

Multiplicidad Dependencia

La multiplicidad especifica cuántas Indica que un cambio en una clase

instancias de una clase pueden estar puede afectar a otra clase. Puede ser
asociadas con una instancia de la de uso (una clase utiliza la otra),
otra clase. realización (una clase implementa una
Por ejemplo una multiplicidad de interfaz) o derivación (una clase
"0..*" para la relación entre hereda de otra).
"Cliente" y "Cuenta Bancaria" indica Por ejemplo si la clase "Factura"
que un cliente puede tener ninguna o utiliza la clase "Producto", hay una
varias cuentas bancarias. dependencia entre ellas.
 Relaciones múltiples (asociativas) y
reflexivas
Relaciones múltiples Relaciones reflexivas
Una relación reflexiva es aquella en la que
Las relaciones múltiples, también conocidas
una clase está relacionada consigo misma.
como asociativas, son aquellas en las que más
Esto es útil cuando una instancia de la
de dos clases están conectadas. Estas
clase tiene una relación con otra instancia
relaciones se utilizan cuando hay una entidad
de la misma clase.
adicional que describe la relación entre las
clases originales.
Por ejemplo supongamos que se tiene la
clase "Persona" y se quiere representar la
Por ejemplo supongamos que se tienen las
relación de parentesco entre personas. Se
clases "Estudiante" y "Curso". Se puede tener
puede tener una relación reflexiva llamada
una relación asociativa llamada
"Parentesco" que conecta a una persona con
"Inscripción", que conecta a un estudiante
otra y tiene un atributo para indicar el
con un curso, y además, puede tener atributos
tipo de relación (padre, madre, hermano,
adicionales, como la fecha de inscripción.
etc.).
 ¿Dudas?
{

} ..
 { ..
Ejemplo
Descargar JFreeChart:

https://sourceforge.net/projects/jfreechart/files/

} ..
 Día, Fecha: Jueves, 07/03/2024

Hora de inicio: 17:20

Introducción a la Programación y
Computación 1 [B]
Josué Rodolfo Morales Castillo
{ ..
Clase 7- Agenda
● Foro No. 7
● Preguntas proyecto 1
● Entrega tarea 3
● Aviso prórroga proyecto 1
● Avisos extra calificación proyecto 1
● Lectura hoja de calificación
● Lectura práctica 2
● Concurrencia y paralelismo

} ..
{ Concurrencia y
paralelismo

...
}
{

...
https://www.youtube.com/watch?v=16v1-c1237U

}
 Procesos

Es una instancia en ejecución

de un programa de computadora.
Puede incluir el código
ejecutable, datos, variables de
entorno, asignaciones de
memoria, recursos del sistema
operativo y otros atributos que
describen el estado de
ejecución del programa.
 Subprocesos

Es una secuencia de
instrucciones que puede ser
ejecutada por un procesador de
manera independiente de otros
subprocesos. Los subprocesos
comparten recursos con otros
subprocesos del mismo proceso,
lo que permite la ejecución de
múltiples tareas de manera
concurrente.
 Hilos
Un hilo es como un trabajador en una fábrica de
computadoras. Cada trabajador (hilo) tiene su
propio conjunto de instrucciones que debe
seguir (program counter), sus propias
herramientas y espacio para guardar cosas
temporalmente (registros y pila). El sistema
operativo organiza y gestiona a estos
trabajadores usando una estructura llamada TCB
(thread control block).

Cuando un proceso tiene varios hilos, es como si

estuvieras ensamblando múltiples computadoras al mismo
tiempo, lo que significa que puedes realizar más de
una tarea al mismo tiempo, especialmente si tienes más
de un "CPU" (unidad de procesamiento central). Esto
hace que el trabajo sea más eficiente y rápido.
 Método Start
El método "start" de la clase Thread se utiliza
para iniciar la ejecución de un hilo en Java. Al
invocar este método, se inicia un nuevo hilo de
ejecución que corre concurrentemente con otros
hilos en el programa. Es importante señalar que
el método "start" no ejecuta directamente el
código definido para el hilo; en cambio, prepara
y programa el sistema operativo para que ejecute
el hilo de manera independiente.

La utilización de "start" es crucial para

aprovechar la concurrencia y la ejecución La concurrencia en
programación se refiere a
simultánea de tareas en aplicaciones Java. La la ejecución simultánea
implementación adecuada de este método es de múltiples tareas o
esencial para evitar posibles problemas de procesos, permitiendo que
estas operaciones se
sincronización y asegurar un comportamiento lleven a cabo al mismo
predecible y eficiente en entornos con múltiples tiempo.
hilos.
Detener hilo

En Java, el método stop() que estaba

originalmente diseñado para detener
hilos está marcado como obsoleto y no
se recomienda su uso debido a
problemas de seguridad y estabilidad.
En su lugar, se aconseja utilizar una
variable de control (bandera) que el
hilo consulte periódicamente para
determinar si debe finalizar su
ejecución. Al cambiar el valor de esta
variable, puedes indicar al hilo que
debe detenerse de manera segura.
 Esperá de finalización de un hilo

Para esperar la finalización de un hilo en Java, se puede utilizar el

método join(). Este método se llama en el hilo principal y bloquea su
ejecución hasta que el hilo al que se llama haya finalizado. Así, join()
asegura que el hilo principal no continúe su ejecución hasta que el hilo
que se está esperando haya completado su tarea.
 ¿Dudas?
{

} ..
{ ..

Ejemplo
} ..
 Día, Fecha: Jueves, 14/03/2024

Hora de inicio: 17:20

Introducción a la Programación y
Computación 1 [B]
Josué Rodolfo Morales Castillo
{ ..
Clase 8- Agenda

● Foro No. 8
● Preguntas Practica 2
● Modificación Practica 2 (Botón
reanudar)
● Horarios de Calificación
● Manejo de Archivos y Serialización

} ..
 Archivos de texto plano

Los archivos de texto plano son

una forma fundamental de
almacenar y manipular datos en
el desarrollo de software. En
Java, trabajar con archivos de
texto es una tarea común y
esencial para una amplia gama
de aplicaciones.
Creación de Archivos (FileWriter)
Lectura de Archivos(FileReader)
Eliminación de Archivos(delete)
Modificar archivo
 Serialización de objetos

La serialización es el proceso de convertir un objeto en

una secuencia de bytes que puede ser almacenada,
transmitida o guardada en un archivo.Para que un objeto
sea serializable, su clase debe implementar la interfaz
Serializable. Una vez que un objeto es serializado, puede
ser guardado o transmitido utilizando clases como
ObjectOutputStream.
 Deserializaciónde objetos

Es el proceso inverso de la
serialización. Convierte una
secuencia de bytes (que
representa un objeto
serializado) de vuelta en un
objeto. Esto se hace
principalmente para reconstruir
objetos previamente
serializados, por ejemplo,
cuando se lee un objeto de un
archivo. Para deserializar un
objeto, se utiliza la clase
ObjectInputStream.
 ¿Dudas?
{

} ..
{ ..

Ejemplo
} ..
 Día, Fecha: Jueves, 21/03/2024

Hora de inicio: 17:20

Introducción a la Programación y
Computación 1 [B]
Josué Rodolfo Morales Castillo
{ ..
Clase 9- Agenda

● Foro No. 9
● Preguntas práctica 2
● Aviso entrega práctica 2
● Aviso lectura proyecto 2
● Lectura HC práctica 2
● Programación Web parte 1

} ..
{ Programación
Web

...
}
 ¿Qué es el Backend?

Se refiere a la capa de un sistema informático o aplicación

web que opera de manera invisible para el usuario final. Es
responsable de procesar datos, gestionar la lógica y facilitar
la interacción con la base de datos. Esencialmente, constituye
el componente central que asegura el correcto funcionamiento
de la aplicación desde una perspectiva técnica.
 Protocolo de Transferencia de Hipertexto
(HTTP)

Es un conjunto de reglas que permite la

transferencia de información en la web.
Funciona con un modelo de solicitud y
respuesta, donde un cliente (como un
navegador web) envía una solicitud a un
servidor para obtener recursos, como
páginas web o archivos, y el servidor
responde con esos recursos. HTTP
utiliza diferentes métodos de
solicitud, como GET, POST, PUT y
DELETE, para realizar diversas acciones
en los recursos del servidor.
 ¿Qué es una API REST?

Una API, o interfaz de programación de

aplicaciones es un conjunto de reglas
que definen la forma en que aplicaciones
o dispositivos pueden conectarse y
comunicarse entre sí. Una API REST es
una API que se ajusta a los principios
de diseño de REST, o el estilo de
arquitectura de transferencia de estado
representacional.

Las API REST se comunican mediante

solicitudes HTTP para realizar funciones
de bases de datos estándar como crear,
leer, actualizar y eliminar registros
(también conocidas como CRUD) dentro de
un recurso.
 Petición GET

Es el método de petición HTTP más

utilizado con diferencia. Una
petición GET solicita al servidor
una información o recurso
concreto. Por ejemplo cuando uno
se conecta a un sitio web, el
navegador suele enviar varias
peticiones GET para recibir los
datos que necesita para cargar la
página.
 Petición POST

El navegador utiliza el método de

petición HTTP POST cuando necesita
enviar datos al servidor. Por
ejemplo, si uno rellena un
formulario de contacto en un sitio
web y se envía, se está utilizando
una petición POST para que el
servidor reciba esa información.
 Petición PUT

Las peticiones PUT tienen una

funcionalidad similar a la del
método POST. Sin embargo, en lugar
de enviar datos, se utilizan las
peticiones PUT para actualizar
información que ya existe en el
servidor final.
 Petición DELETE

Este método es utilizado para solicitar al servidor que

elimine un algún tipo de información en específico.
 Node JS

Node.js es un entorno de tiempo de

ejecución de JavaScript.

Este entorno de tiempo de ejecución

en tiempo real incluye todo lo que
se necesita para ejecutar un
programa escrito en JavaScript.

Cuenta con un ecosistema de

paquetes amplio y activo a través
de npm (Node Package Manager), que
facilita la gestión de dependencias
y la reutilización de código.
 Pero… ¿Que es npm?

Es el administrador de paquetes
oficial para Node.js.

Es una herramienta que permite

a los desarrolladores instalar,
compartir y administrar las
dependencias de sus proyectos
de Node.js de manera sencilla.
 Instalación

https://www.youtube.com/watch?v=v0x1Ku5Tgac&t=1s
 Framework

Básicamente una estructura o conjunto de herramientas

predefinidas y reglas que facilitan el desarrollo de software.

Se puede pensar en framework como un marco de trabajo sobre el

cual se construye la aplicación, proporcionando una base sólida
y herramientas integradas para simplificar tareas comunes.
 Express.js

Framework de desarrollo
web para Node.js que
simplifica la creación de
aplicaciones web y APIs.
Es minimalista, flexible y
se enfoca en la creación
de servidores web y
aplicaciones de una manera
simple y rápida.
 Características
Ruteo simple y flexible
Facilita la definición de rutas
para manejar diferentes solicitudes
HTTP (GET, POST, PUT, DELETE). Flexibilidad y
extensibilidad
Framework minimalista que
Integración con Node.js proporciona una base
sólida pero flexible para
Se construye sobre Node.js, lo que
construir aplicaciones
significa que se puede utilizar en
web.
conjunto con cualquier módulo de
Node.js
Comandos para crear proyecto

npm init -y

npm install express

npm install cors
npm install nodemon
(opcional)
{ ..
Ejemplo
Node Js:
https://nodejs.org/en/download
Crear proyecto con React:
https://create-react-app.dev/docs/getti
ng-started
Extensiones para realizar consultas:
Thunder Client o Postman

} ..
 Día, Fecha: Jueves, 04/04/2024

Hora de inicio: 17:20

Introducción a la Programación y
Computación 1 [B]
Josué Rodolfo Morales Castillo
{ ..
Clase 10- Agenda

● Foro No. 10
● Preguntas Proyecto 2
● Corto 2
● Programación Web parte 2

} ..
{ Programación
Web

...
}
 ¿Qué es HTML?

HTML (HyperText Markup Language) es

un lenguaje de marcado que se
utiliza para estructurar el
contenido de las páginas web.
Permite definir los elementos y su
organización en un documento. Es la
base de cualquier página web y es
interpretado por los navegadores
para mostrar el contenido
correctamente.
 Etiquetas HTML

Las etiquetas HTML son elementos

que se utilizan para marcar y
estructurar el contenido de una
página web. Existen etiquetas para
títulos, párrafos, enlaces,
imágenes, listas y mucho más. Cada
etiqueta tiene una sintaxis
específica y se utiliza para
definir la estructura y el estilo
del contenido.
Estructura de HTML
¿Qué es CSS?

CSS (Cascading Style Sheets) es un

lenguaje utilizado en desarrollo
web para controlar la apariencia y
el formato de las páginas HTML.
Permite definir reglas que
determinan el diseño, colores,
fuentes y otros aspectos visuales
de los elementos HTML. CSS separa
el contenido de la presentación,
lo que facilita el diseño y el
mantenimiento de sitios web.
Estructura de CSS
Estructura de CSS
REACT

React es una biblioteca de

JavaScript utilizada para
crear interfaces de usuario
interactivas en aplicaciones
web. Se centra en la creación
de componentes reutilizables
y utiliza un enfoque
declarativo para actualizar
la interfaz en función del
estado de la aplicación.
Comandos para crear proyecto

Tenes instalado Nodejs

npm install -g create-react-app

npx create-react-app nombre-del-proyecto

{ ..

Ejemplo
} ..