1

Corporación Universitaria Minuto de Dios – UNIMINUTO

Facultad de Ingeniería en sistemas – Ingeniería Web II

FRAMEWORK’S EN EL DESARROLLO FRONT-END

Actividad 2

Omar Alberto Valderrama Home - 850672

Nrc 40-55290

José Danilo Sánchez Torres

05 / 02 / 2024

pág. 1
 2

Tabla de contenido

Tabla de
contenido…………………………………………………………………………………
…………2

Introducción……………………………………………………………………………
……………3

1. ¿Qué son los Framework’s?

…………………………………………………………………………………5

2. Proponga la estructura de un sistema de información que permita enfrentar

la necesidad identifica
2.1 ¿Cuál es la relación entre las librerías y los framework’s?
……………………………………………………………………………………
……7
2.2 Arquitectura Angular
……………………………………………………………………………………
…………8
2.3 Arquitectura .Net framework
……………………………………………………………………………………
…………8
2.4 Arquitectura django
……………………………………………………………………………………
…………8

3. Determinar y listar los requerimientos del Sistema de

información………………………………………………………………………
…………………

3.1 Tabla requerimientos funcionales

……………………………………………………………………………………
…………7
3.2 Requerimientos no funcionales
……………………………………………………………………………………
…………8

4. Modele las vistas arquitectónicas del sistema a partir de sus atributos de

calidad……………………………………………………………………………
…………………8

pág. 2
 3

Bibliografía………………………………………………………………………………
………………15

pág. 3
 4

Introducción
En este documento se podrán conocer los distintos frameworks del mercado que se usan
para el desarrollo de software de manera más eficiente y rápida, ya que son marcos de
trabajo que se emplean para mejorar el tiempo de y esfuerzo en todo el desarrollo de los
proyectos tecnológicos de front-end.

pág. 4
 5

1. ¿Qué son los Framework’s?

Un framework es un marco o esquema de trabajo generalmente utilizado por

programadores para realizar el desarrollo de software. Utilizar un framework permite
agilizar los procesos de desarrollo ya que evita tener que escribir código de forma
repetitiva, asegura unas buenas prácticas y la consistencia del código.

Un framework es por tanto un conjunto de herramientas y módulos que pueden ser

reutilizados para varios proyectos. Uno de los frameworks más conocidos y utilizados
es el .NET Framework de Microsoft para webs.

1.1. Ejemplos de los Framework’s

Estos son algunos de los frameworks más conocidos:

 .Net: es Framework de Microsoft y uno de los más utilizados.

 Symphony: proyecto PHP de software libre.
 Zend Framework: framework de código abierto para desarrollar aplicaciones
web y con servicios web PHP.
 Laravel: uno de los frameworks de código abierto más fáciles de asimilar para
PHP.
 Django: framework de desarrollo web de código abierto escrito en Python.
 Ruby on Rails: framework de aplicaciones web de código abierto escrito en el
lenguaje de programación Ruby.
 Angular: framework de código abierto desarrollado en TypeScript y mantenido
por Google.
2. Estructura de los framework’s

La mayoría de los frameworks usan una estructura conocida como arquitectura MVC
(Model-View-Controller). Esta arquitectura separa los componentes de una aplicación
en 3 grupos distintos: modelo, vista y controlador.

pág. 5
 6

La capa modelo es donde se encuentran los datos de dominio. Por ello, la capa modelo
es la que se encarga de manipular los datos, almacenando la información del sistema
que está usando.

La capa vista es la responsable de generar la interfaz de la aplicación (pantallas,

páginas, etc.). Se puede comprender la capa vista como la forma en la que se presentan
los datos (cómo se ven).

Por último, también está la capa controladora. Esta capa actúa como intermediario entre
el usuario y la capa modelo, así como entre el modelo y la vista. De esta forma, cuando
el usuario interactúa con el sistema, el controlador consulta o actualiza la capa modelo
para mostrarle la vista adecuada.

([Link] entre usuario y la arquitectura)

2.1. ¿Cuál es la relación entre las librerías y los framework’s?

Es muy común que se confundan las librerías de software con frameworks. Esto se debe
a que las librerías también son un conjunto de código que facilita el desarrollo de un
programa. Sin embargo, aunque aportan funcionalidades, las librerías no aportan una
estructura. Un ejemplo de librería sería la fstream. Esta librería permite gestionar los
flujos de entrada y salida de documentos desde ficheros y manipular archivos
(permitiendo tanto leer como escribir en ellos).

pág. 6
 7

Volviendo al ejemplo de los post-its, una librería proporcionaría la función de medir y

se necesitaría otra para la función de cortar. Sin embargo, como no hay estructura
(porque no hay framework), no se haría en un orden establecido. Además, se tendría que
hacer papel por papel.

2.2. Arquitectura de angular

La arquitectura de Angular se compone de varios componentes principales, como el

módulo, el componente y el servicio, los cuales trabajan en conjunto para construir una
aplicación escalable y modular.

El módulo es el punto de entrada de una aplicación Angular, donde se declaran las

dependencias y se configura la aplicación. Cada módulo puede tener varios
componentes, los cuales son la pieza fundamental de la arquitectura de Angular. Los
componentes son los encargados de mostrar la información al usuario y manejar las
interacciones del usuario con la aplicación. Además, los componentes pueden utilizar
servicios para obtener o manipular datos.

Los servicios son objetos que pueden ser utilizados por diferentes componentes de la
aplicación y se encargan de proveer datos y funcionalidades a través de métodos
específicos. Los servicios son una parte importante de la arquitectura de Angular, ya
que permiten compartir datos y funcionalidades entre diferentes componentes, lo que
hace que el código sea más modular y reutilizable.

En cuanto a la relación entre los componentes, el módulo y los servicios, podemos decir
que los componentes se registran en los módulos y pueden utilizar servicios para
obtener o manipular datos. Los servicios, a su vez, pueden inyectarse en los
componentes para que estos puedan utilizar sus métodos y funcionalidades.

2.3. Arquitectura de .Net Framework

Los dos componentes principales de .NET Framework son Common Language Runtime
y la biblioteca de clases .NET Framework.

 Common Language Runtime (CLR) es el motor de ejecución que controla las

aplicaciones en ejecución. Proporciona servicios como la administración de

pág. 7
 8

subprocesos, la recolección de elementos no utilizados, la seguridad de tipos, el

control de excepciones, etc.

 La Biblioteca de clases proporciona un conjunto de API y tipos para funciones

comunes. Proporciona tipos para cadenas, fechas, números, etc. La biblioteca de
clases incluye API para leer y escribir archivos, conectarse a bases de datos,
dibujar y más.

Las aplicaciones .NET están escritas en el lenguaje de programación C#, F# o Visual

Basic. El código se compila en un lenguaje intermedio común (CIL) independiente del
lenguaje. El código compilado se almacena en ensamblajes: archivos con una extensión
de archivo .dll o .exe.

Cuando se ejecuta una aplicación, CLR toma el ensamblado y usa un compilador Just-
in-Time (JIT) para convertirlo en código máquina que se puede ejecutar en la
arquitectura específica del equipo en el que se ejecuta.

2.4. Arquitectura Django

Modelo-Vista-Controlador o MVC es un patrón de arquitectura de software,

básicamente lo que hace es separar los datos y la lógica de negocio de una aplicación de
su representación y del módulo encargado de gestionar los eventos y las
comunicaciones.

MVC propone la construcción de tres componentes distintos que son el modelo, la vista
y el controlador, es decir, por un lado, define componentes para la representación de la
información, y por otro lado para la interacción del usuario. Este patrón de arquitectura
de software se basa en las ideas de reutilización de código y la separación de conceptos,
características que buscan facilitar la tarea de desarrollo de aplicaciones y su posterior
mantenimiento.

3. Analice las contribuciones y las limitaciones de los frameworks del lado del
cliente en el marco de la construcción de entornos de programación

3.1. Ventajas de los Framework’s

pág. 8
 9

Entre las ventajas de utilizar un framework para el desarrollo de software distinguimos:

 El programador ahorra tiempo ya que dispone ya del esqueleto sobre el que

desarrollar una aplicación.
 Facilita los desarrollos colaborativos, al dejar definidos unos estándares de
programación.
 Al estar ampliamente extendido, es más fácil encontrar herramientas, módulos e
información para utilizarlo.
 Proporciona mayor seguridad, al tener gran parte de las potenciales
vulnerabilidades resueltas.
 Normalmente existe una comunidad detrás, un conjunto de desarrolladores que
pueden ayudar a responder consultas.

3.2. Desventajas de los Framework’s

 La curva de aprendizaje de un framework es bastante larga debido a que hay que
entender cómo se estructuran, la forma en la que se comunican sus componentes,
etc.
 El uso de un framework aumenta el tamaño del programa a desarrollar debido a
que ya viene cargado de estructuras y funcionalidades que puede que no se
requieran.
 Un framework impone una forma de trabajar, por lo que no es muy flexible y se
necesitará seguir una serie de estándares de código para usarlo.
 Si el programa que se va a desarrollar es pequeño puede que no merezca la pena
usar un framework. Esto se debe a que, si es algo pequeño, el framework puede
hacer que una empresa tarde al final más al tener que seguir todos los estándares
para ponerlo en funcionamiento que si se creara con código desde 0.
4. Exponga, a partir de capturas de pantalla, el paso a paso de cómo aplicaría uno
de los frameworks seleccionados para construir una aplicación sencilla que
resuelva un problema elemental.

[Link]

<!DOCTYPE html>
<html lang="en">
<head>

pág. 9
 10

<meta charset="utf-8" />

<link rel="icon" href="%PUBLIC_URL%/[Link]" />
<meta name="viewport" content="width=device-width, initial-scale=1"
/>
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/[Link]" />
<!--
[Link] provides metadata used when your web app is installed
on a
user's mobile device or desktop. See
[Link]
-->
<link rel="manifest" href="%PUBLIC_URL%/[Link]" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the
build.
Only files inside the `public` folder can be referenced from the
HTML.

Unlike "/[Link]" or "[Link]", "%PUBLIC_URL%/[Link]"

will
work correctly both with client-side routing and a non-root public
URL.
Learn how to configure a non-root public URL by running `npm run
build`.
-->
<title>Problema 2</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

pág. 10
 11

[Link]

body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.container {
max-width: 400px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
}

h1 {
color: #0004ff;
font-size: 24px;
margin-bottom: 10px;
}

h2 {
color: #333;
font-size: 18px;
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 15px;
font-size: 16px;
color: #555;
}

input {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;

pág. 11
 12

box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 4px;
}

button {
background-color: #080241;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #11005a;
}

p {
margin-top: 20px;
font-size: 18px;
color: #0011ff;
}

[Link]

import React from 'react';

import Problema2 from './components/Problema2';
import './[Link]';
const App = () => {
return (
<div>
<Problema2/>
</div>
);
};

export default App;

[Link]

import React, { useState } from 'react';

const Problema2 = () => {
const [inputNumero, setInputNumber] = useState('');

pág. 12
 13

const [resultado, setResult] = useState('');

const handleNumberInput = () => {
if (inputNumero !== '' && !isNaN(inputNumero)) {
const numero = parseFloat(inputNumero);
if (numero%2==0) {
setResult(`El número ingresado es par.`);
} else if (numero) {
setResult(`El número ingresado es impar.`);
}
} else {
setResult('Por favor, ingrese un número válido.');
}
};

const InputChange = (event) => {

setInputNumber([Link]);
};

return (
<div>
<h1>Problema 2</h1>
<h2>Determine si Par o impar</h2>
<label>
Ingrese un número:
<input type="text" value={inputNumero} onChange={InputChange} />
</label>
<button onClick={handleNumberInput}>Calcular</button>
{resultado && <p>{resultado}</p>}
</div>
);
};
export default Problema2;

Chrome

pág. 13
 14

pág. 14
 15

Bibliografía

Ibarra, L. E. G. (2023, April 23). La Arquitectura de Angular. [Link].

[Link]

guerrero-ibarra/?originalSubdomain=es

Portal, T. I. C. (2021, April 22). Framework de software. TIC Portal.

[Link]

Qué es Framework. (n.d.). Arimetrics. Retrieved February 2, 2024, from

[Link]

pág. 15