MONOGRAFÍA - GALA YAULAPIN DOLLYBETH - FATEC

Vista previa del material en texto

UNIVERSIDAD NACIONAL DE EDUCACION 
Enrique Guzmán y Valle 
Alma Máter del Magisterio Nacional 
FACULTAD DE TECNOLOGÍA 
Escuela Profesional de Electrónica y Telecomunicaciones 
 
 
MONOGRAFÍA 
 
La programación Front-End y Back-End 
 
Examen de suficiencia profesional Res. N°0461-2021-D-FATEC 
 
 
Presentada por: 
Gala Yalupalin, Dollybeth 
 
Para optar al Título Profesional de Licenciado en Educación 
Especialidad: Telecomunicaciones e Informática 
 
 
Lima, Perú 
2021 
ii 
MONOGRAFÍA 
 
La programación Front-End y Back-End 
 
Designación de Jurado Resolución N°0461-2021-D-FATEC 
 
 
 
_________________________________________ 
Dr. La Rosa Longobardi, Carlos Jacinto 
Presidente 
 
 
 
_________________________________________ 
Mg. Sotelo Raymondi, Amador Gregorio 
Secretario 
 
 
 
_________________________________________ 
Mg. Chirinos Armas, Daniel Ramón 
Vocal 
 
 
 
 
Línea de investigación: Tecnología y soportes educativos 
 
iii 
 
 
 
 
 
 
 
 
 
 
 
 
Dedicatoria 
 
Agradecer a mi padre, por la ayuda absoluta que me 
brindó en la educación superior a pesar de las 
dificultades presentadas. 
A mi abuelita y a mis hermanos, por su apoyo absoluto. 
A todos mis profesores, por brindarme sus sabias 
enseñanzas en mi formación profesional. 
 
 
 
 
iv 
Índice de contenidos 
 
Portada .................................................................................................................................... i 
Hoja de firmas de jurado ....................................................................................................... ii 
Dedicatoria........................................................................................................................... iii 
Índice de contenidos ............................................................................................................. iv 
Lista de figuras ..................................................................................................................... ix 
Capítulo I. Generalidades de Web y programación Front-End .................................... 11 
1.1 Fundamentos de la Web ........................................................................................... 11 
1.1.1 El protocolo HTTP. ........................................................................................ 12 
1.1.2 La WWW como servicio de internet. ............................................................. 13 
1.1.2.1 Los navegadores y los buscadores. .............................................................. 13 
1.1.3 ¿Por qué utilizar de la Web? .......................................................................... 14 
1.1.4 ¿Qué es un sitio Web? .................................................................................... 14 
1.2 ¿Qué son las aplicaciones Web? .............................................................................. 14 
1.3 Página Web .............................................................................................................. 16 
1.4 Servidores web ......................................................................................................... 16 
1.5 ¿En qué consiste la programación Front - End? ...................................................... 17 
1.6 Tecnologías de programación Front – End .............................................................. 18 
1.6.1 Diseño: El lenguaje HTML. ........................................................................... 18 
1.6.1.1 Versiones de HTML. ................................................................................... 19 
1.6.1.2 HTML5. ....................................................................................................... 19 
1.6.1.2.1 Estructura de HTML. .............................................................................. 20 
1.6.1.2.2 Comandos básicos de HTML. ................................................................. 23 
1.6.2 Maquetación Web – CSS. .............................................................................. 23 
v 
1.6.2.1 Propiedades de CSS. .................................................................................... 24 
1.6.2.2 Versiones de CSS. ........................................................................................ 24 
1.6.2.3 Modelo de cajas de CSS. ............................................................................. 24 
1.6.2.4 Estructura de CSS. ....................................................................................... 26 
1.6.2.4.1 Selectores de CSS. .................................................................................. 27 
1.6.2.4.2 Pseudo-elementos CSS. ........................................................................... 28 
1.6.2.5 Ejemplo aplicado en CSS............................................................................. 29 
1.6.3 Lenguaje de programación – JavaScript. ....................................................... 31 
1.6.3.1 Como incluir de JavaScript en documentos HTML. .................................. 32 
1.6.3.2 Etiqueta noscript. ......................................................................................... 33 
1.6.3.3 Sintaxis. ........................................................................................................ 34 
1.6.3.4 Variables. ..................................................................................................... 34 
1.6.3.5 Tipos de variables. ....................................................................................... 35 
1.6.3.5.1 Numéricos. .............................................................................................. 35 
1.6.3.5.2 Cadena de textos. .................................................................................... 35 
1.6.3.5.3 Arrays. ..................................................................................................... 36 
1.6.3.5.4 Boleanos. ................................................................................................. 36 
1.6.3.6 Estructura de control de flujo. ...................................................................... 36 
1.7 Framework de tecnologías Front-End ..................................................................... 37 
1.7.1 Foundation. ..................................................................................................... 37 
1.7.2 Bootstrap. ....................................................................................................... 37 
1.7.2.1 Biblioteca de componentes. ......................................................................... 38 
1.7.2.2 Descarga e instalación de Bootstrap. ........................................................... 38 
1.7.3 AngularJS. ...................................................................................................... 39 
1.7.3.1 La diferencia entre Angular y AngularJS. ................................................... 39 
vi 
Capítulo II. La programación Back – End ..................................................................... 40 
2.1 Programación Back - End ........................................................................................ 40 
2.1.1 Dominio. ......................................................................................................... 41 
2.1.1.1 Tipos de dominios. ....................................................................................... 41 
2.1.2 ¿Qué es un hosting? ........................................................................................ 42 
2.2 Lenguaje de programación ...................................................................................... 43 
2.2.1 Características de lenguaje de programación. ................................................ 44 
2.3 Lenguajes para el desarrollo de Back – End ............................................................44 
2.3.1 Python. ............................................................................................................ 44 
2.3.1.1 Elementos del lenguaje. ............................................................................... 45 
2.3.1.2 Ventajas de programar en Python. ............................................................... 47 
2.3.2 Ruby. .............................................................................................................. 47 
2.3.2.1 Características de Ruby................................................................................ 48 
2.3.3 Lenguaje PHP. ................................................................................................ 48 
2.3.3.1 Características de lenguaje PHP. ................................................................. 49 
2.3.3.2 Instalacion de servidor local. ....................................................................... 50 
2.3.4 Lenguaje de programación Java. .................................................................... 50 
2.3.4.1 Filosofía de Java. ......................................................................................... 50 
2.3.4.2 Características de Java. ................................................................................ 51 
2.3.4.3 Ventajas que ofrece Java. ............................................................................. 51 
2.3.5 Lenguaje Go. .................................................................................................. 52 
2.3.5.1 Características de Go. .................................................................................. 52 
2.3.5.2 Desventajas de Go........................................................................................ 53 
2.3.6 Lenguaje de programación C++. .................................................................... 53 
2.3.6.1 Características de lenguaje C++. ................................................................. 54 
vii 
2.3.6.2 Ventajas y desventajas de lenguaje C++. ..................................................... 54 
2.4 Marcos de trabajo Framework para Back – End...................................................... 55 
2.4.1 Django. ........................................................................................................... 55 
2.4.1.1 Características de Django. ........................................................................... 55 
2.4.1.2 Patron Model Template Vista (MTV).......................................................... 56 
2.4.2 Laravel. ........................................................................................................... 56 
2.4.2.1 Características de Laravel. ........................................................................... 57 
2.4.2.2 Instalación de Laravel en Windows. ............................................................ 57 
2.4.2.3 Patrón modelo, vista y controlador MVC. ................................................... 58 
2.4.3 Ruby on Rails. ................................................................................................ 59 
2.5 Base de datos ........................................................................................................... 60 
2.5.1 Características de base de datos. .................................................................... 61 
2.5.2 Sistema gestor de base de datos (SGBD). ...................................................... 61 
2.5.3 Base de datos relacionales. ............................................................................. 61 
2.5.3.1 Modelo entidad – relación. .......................................................................... 61 
2.5.3.1.1 Entidades. ................................................................................................ 62 
2.5.3.1.2 Atributos. ................................................................................................. 62 
2.5.3.1.3 Relaciones. .............................................................................................. 62 
2.5.3.1.4 Tipos de relaciones. ................................................................................. 62 
2.5.3.2 El lenguaje de consultas SQL (structured query languaje). ......................... 63 
2.5.3.3 Sistemas gestores de bases de datos relacionales. ....................................... 63 
2.5.4 Base de datos no relacionales. ........................................................................ 64 
2.5.4.1 Sistemas gestores de bases de datos no SQL. .............................................. 64 
Capítulo III. Patrones de desarrollo web ........................................................................ 66 
3.1 Patrones de Diseño .................................................................................................. 66 
viii 
3.1.1 Patrones creacionales. .................................................................................... 66 
3.1.2 Patrones estructurales. .................................................................................... 67 
3.1.3 Patrones de comportamiento. ......................................................................... 67 
Aplicación didáctica ............................................................................................................ 69 
Síntesis ................................................................................................................................. 88 
Apreciación crítica y sugerencias ........................................................................................ 89 
Referencias .......................................................................................................................... 90 
Apéndice .............................................................................................................................. 93 
 
 
ix 
Lista de figuras 
 
Figura 1. Protocolo HTTP y HTTPS ................................................................................... 12 
Figura 2. Página web adaptado a www mediante protocolo ............................................... 13 
figura 3. Función de las aplicaciones Web ......................................................................... 15 
Figura 4. Peticiones del cliente web al servidor Web. ........................................................ 17 
Figura 5. Logotipo de las tecnologías de programación de Front-End. Fuente: ................. 18 
Figura 6. Estructura básica de página html5. ...................................................................... 20 
Figura 7. Resultado del ejemplo html. ................................................................................ 22 
Figure 8. Modelo de caja CSS ............................................................................................. 26 
Figura 9. La estructura básica de CSS. ................................................................................ 26 
Figura 10. Resultado del ejemplo CSS con estilos básicos. ............................................... 31 
Figura 11. La caja representa una variable y ese variable tiene un nombre finalmente esta 
caja contiene un dato ......................................................................................... 35 
Figura 12. Estructura if…else. Fuente: ............................................................................... 37 
Figura 13. Página de bootstrap para copiar los códigos en documento html. ..................... 39 
Figura 14. Diferencia entre Front-end y Back-end. ............................................................ 41 
Figura 15. Se muestra algunos dominios que se puede adquirir ......................................... 42 
Figura 16. La diferencia entre dominio y hosting. Fuente: ................................................. 43 
Figura 17. Tipos de datos de lenguaje Python. ...................................................................45 
Figura 18. El patrón MTV de Django ................................................................................. 56 
Figura 19. Ejecución de composer en Windows mediante el comando cmd.. .................... 58 
Figura 20. El proceso del patrón MCV ............................................................................... 59 
Figura 21. Logotipo de sistemas gestores de base de datos ................................................ 65 
 
x 
Introducción 
 
En el presente trabajo monográfico se exponen los fundamentos generales de la 
Web, servidores Web, páginas Web, sitios Web, aplicaciones Web en cuanto a sus 
conceptos básicos, característica y funciones de las mismas. Por otra parte, describe sobre 
el desarrollo Web con la arquitectura cliente- servidor, donde explica sobres las 
tecnologías aplicadas en Front-end como HTML, CSS, JS y los Frameworks de estas. En 
el segundo capítulo de esta monografía explica sobre la programación Back-End, 
conceptualizando de manera genérica algunos lenguajes de programación como: Python, 
Ruby, PHP, C++ y Java, mencionando también algunos Frameworks. 
 Explica los conceptos y características generales de bases de datos relacionales y 
no relacionales que se utilizan para el desarrollo de una aplicación Web. Estas tecnologías 
de desarrollo Web son indispensables para los desarrolladores de Front-End y Back-End 
incluyendo también los patrones de diseño. 
Hoy en día la programación Back-End y Front-End tienen alta demanda laboral, 
por el mismo contexto actual que estamos viviendo por la pandemia. Las empresas optaron 
por tener un sitio Web para que sigan comercializando sus productos. 
 
 
 
11 
 
 
 
 
 
 
Capítulo I 
Generalidades de Web y programación Front-End 
 
1.1 Fundamentos de la Web 
El éxito espectacular de la Web se basa en dos puntos fundamentales: el protocolo 
HTTP y el lenguaje HTML. Uno permite una implementación simple y sencilla de un 
sistema de comunicaciones que nos facilita enviar cualquier tipo de ficheros de una forma 
fácil; simplifica el funcionamiento del servidor y permite que servidores poco potentes 
atiendan miles de peticiones y redúzcanlos costes de despliegue. El otro nos proporciona 
un mecanismo de composición de páginas enlazadas simple y fácil, altamente eficiente y 
de uso muy simple (Mateu, 2004). 
La Web se trata de un servicio que nos permite navegar a través de muchas páginas 
que esta alojado en los servidores web. Gracias a los buscadores encontramos lo que 
buscamos lo cual realizan con seguimiento de los enlaces a través del protocolo HTTP. 
La web nació en la decada de los 90 con la finalidad de enlazar los documentos 
mediante los hipervinculos. Entonces la Web es el conjunto de documentos que se enlazan 
a traves de vinculos HTML utilizando la red de alcance global, que para ingresar a esto se 
necesita un navegador que es una aplicación Web. 
 
12 
1.1.1 El protocolo HTTP. 
Protocolo de transferencia de hipertexto (hypertext transfer protocol) es un 
protocolo de cliente – servidor, donde enlazan el intercambio de datos el cliente web y el 
servidor. En otras palabras, es un conjunto de normas de comunicación que permite la 
transferencia de datos en la red, donde el cliente implanta una conexión TCP, haciendo una 
solicitud al servidor y espera la respuesta del mismo (Acebeiro, 2018). 
Mateu (2004) menciona que: 
Existe una variante de HTTP llamada HTTPS(S por secure) que utiliza el protocolo 
de seguridad SSL(Secure socket layer) para cifrar y autenticar el tráfico entre el 
cliente y servidor, siendo esta muy usada por los servidores web de comercio 
electronico, asi como por aquellos que contienen información personal o 
confidencial (p. 14). 
El SSL (capa de conexiones seguras) garantiza que la información esta cifrado y 
protegida frente a interceptaciones. En la figura 1 podemos visualizar la diferencia entre 
HTTP y HTTPS, donde el primer candado esta sin seguridad y el segundo candado esta 
con seguridad. 
 
Figura 1. Protocolo HTTP y HTTPS símbolos de seguridad. Fuente: Recuperado de 
https://www.fotonostra.com/digital/paginasweb.htm 
13 
1.1.2 La WWW como servicio de internet. 
La World Wide Web (www) es uno de los sistemas distribuidos de gestión de 
información que usa el internet o la red para la transmisión de datos mediante el uso de 
protocolo HTTP. Mateu (2004) señala que “esta ha dejado de ser una inmensa de páginas 
estáticas para convertirse en un servicio que permite acceder a multitud de prestaciones y 
funciones, así como a infinidad de servicios, programas, tiendas, etcétera” (p. 12). 
Este se trata de un metodo de particion de documentos de hipertextos conectados a 
los cuales accedemos mediante el internet, utilizando el navegador web. En la figura 2 
podemos observar la pagina Web adaptado a www mediantes protocolo HTTPS. 
 
Figura 2. Página web adaptado a www mediante protocolo https. Fuente: Recuperado de https://concepto.de/ 
pagina-web/ 
 
1.1.2.1 Los navegadores y los buscadores. 
Los navegadores son programas que nos permite ver los contenidos de una página 
Web los cuales son: Chrome, Safari, Microsoft internet Explorer, Mozilla Firefox, 
Microsoft Edge. 
Mientras los buscadores son programas que busca archivos que piden los usuarios 
para mostrar los resultados, este almacena mucha información en la base de datos y para 
14 
ello utilizan aplicaciones llamadas “robots”. Entre los principales buscadores 
internacionales tenemos a Google, Yahoo, Bing, etc. 
 
1.1.3 ¿Por qué utilizar de la Web? 
 Multiplataforma: porque funciona en cualquier dispositivo o sistema operativo. 
 Estándar: nadie se adueña de la web todos pueden utilizar. 
 Costo mínimo de entrada: el costo para desarrollar la aplicación es mínimo. 
 Transformación digital: uno mismo puede controlar su sitio web. 
 
1.1.4 ¿Qué es un sitio Web? 
El sitio Web está compuesto por documentos HTML estructurados en un dominio y 
almacenado en un hosting como ejemplo tenemos a google.com, Facebook.com, 
youtube.com, misitio.com, etc. 
Existen dos tipos de sitios web según su objetivo el informativo y aplicaciones 
web. El objetivo de sitio web informativo es el marketing de un negocio y para su 
desarrollo se puede usar los constructores, es decir que no es necesario saber códigos de 
diseño, maquetación, programación, etc. 
 
1.2 ¿Qué son las aplicaciones Web? 
Es un programa informático donde los usuarios pueden acceder desde un 
navegador Web a través del Internet, que ejecutará la misma. Para Talledo (2015), “otra 
forma de definirlo sería como un conjunto de páginas web que interactúan unas con otras y 
con diversos recursos en un servidor web consigo mismo o con otro, incluidas bases de 
datos” (p. 71). 
15 
Las aplicaciones permite aplicar como informes de marketing, catálogos de 
productos o tiendas virtuales, administracion de noticias y contenidos. 
Una aplicación Web es un producto de software que los usuarios pueden utilizar 
accediendo a un servidor web a través de Internet o accediendo a una Intranet con un 
navegador. Originalmente, el concepto de la Web era una colección de documentos 
estáticos accesibles desde cualqu ier parte del mundo. El desarrollo de nuevas tecnologías 
es un aspecto importante de la evolución de las nociones de aplicaciones web actuales, 
cuya misión es proporcionar a los usuarios una amplia gama de funciones y servicios, no 
solo información. Las aplicaciones web tienen muchas características que hacen del 
software un producto de alto valor. Entre ellos, se puede destacar que no requiere descarga 
para su instalación o configuración, se puede utilizar desde cualquier plataforma o 
ubicación, y se puede distribuir a una gran cantidad de usuarios. Hoy en día, es un 
elemento esencial en las operaciones corporativas, el intercambio de información y las 
redes sociales (Pastor, 2013). 
La programacion de las aplicacionesweb se realiza de forma personalizada con 
librerías, frameworks, lenguajes de programacion, bases de datos, etc. Para el proceso de 
desarrollo se necesita profesionales preparados con conocimiento en las tecnologias 
nesesarias como HTML, CSS, JS y lenguajes de desarrollo back-end. Para entender mejor 
la funcion de las aplicaciones web se puede vizualizar en la figura 3. 
 
Figura 3. Función de las aplicaciones web. Fuente: Recuperado de https://www.strappinc. 
com/blog/strapp-datos/que-es-una-aplicacion-web 
16 
1.3 Página Web 
Una página Web es un documento que se puede utilizar en Internet, escrito según 
su patrón con un lenguaje especial que es HTML. Esto permite representar información 
mayormente textual y vínculos a otros sitios, como también puede contener sonidos 
videos, imágenes, animaciones u otros (Begoña, 2019). 
Por lo tanto, la página es un documento HTML donde puede entrar CSS, JS, 
imágenes, videos, etc. donde sus características fundamentales son los enlaces o 
hiperenlaces, que posibilitan la navegación de un documento a otro. 
 
1.4 Servidores web 
Mateu (2004) señala que: 
Un servidor Web es un programa que atiende y responde a las diversas peticiones 
de los navegadores, proporcionándoles los recursos que solicitan mediante el 
protocolo HTTP o el protocolo HTTPS (la versión segura, cifrado y autenticado de 
HTTP). Un servidor Web básico tiene un esquema de funcionamiento muy 
sencillo, ejecutando de forma infinita en bucle (p. 23). 
a. Espera la solicitud en el puerto TCP especificado. 
b. Recibe la solicitud del usuario. 
c. Indaga el recurso en la secuencia de solicitudes. 
d. Remite la informacion a traves de la misma conexión que recibio la solicitud. 
e. Regresa al punto dos. 
La función del servidor Web es guardar todo el contenido de un sitio web y mostrar 
la información necesaria a los usuarios a través del internet, mediante un navegador y 
utilizando el protocolo HTTP, como se visualiza en la figura 4. 
17 
 
Figura 4. Peticiones del cliente web al servidor web. Fuente: Recuperado de 
http://servidoresstutoriales.blogspot.com/2015/10/esquema-de-la-peticion-web-servidor-web.html 
 
1.5 ¿En qué consiste la programación Front - End? 
Front-End es la parte de programación que está encargado de establecer el interfaz 
con lo que el navegante se comunica; estas son tecnologías de diseño y desarrollo web que 
funcionan en el explorador y son responsables de interactuar con los clientes. Para la 
programación se necesita las tecnologías como HTML5 para estructurar el contenido del 
documento, CSS y el lenguaje de programación JavaScript para la elaboración de estilos y 
diseños interactivos (Zelaya, 2020). 
Una forma de definir es que abarca todo lo que puede ver el usuario como: botones, 
la imagen impactante del sitio web, las animaciones, los colores, etc. lo cual convierte a la 
página atractiva, donde el desarrollador tiene que destacar su creatividad para su 
elaboración. 
Rodríguez (2019) menciona que: 
Este profesional se encarga de traducir las definiciones de diseño y estilo visual 
realizadas en etapas previas a códigos de lenguaje HTML semántico. Su función es 
conseguir que en nuestro navegador se vea correctamente todo el ejercicio de 
diseño que ha creado en la página web, es decir, los estilos, los colores, los fondos, 
tamaños y las posibles animaciones introducidas (p. 10). 
18 
1.6 Tecnologías de programación Front – End 
Las tecnologías más usadas para la programación Web de lado cliente son tres: para 
el diseño se usa HTML, la maquetación CSS y la programación JavaScript, y en cada uno 
de estos existe los frameworks respectivamente. 
 
Figura 5. Logotipo de las tecnologías de programación de Front-End. Fuente: Recuperado de 
https://www.campusmvp.es/recursos/post/que-necesitas-saber-para-ser-un-buen-desarrollador-web-front-
end.aspx 
 
1.6.1 Diseño: El lenguaje HTML. 
HTML (Hyper Text Markup Language traducido como lenguaje de marcas de 
hipertexto), esto posibilita indicar la estructura de la página web mediante etiquetas, el cual 
es interpretado por los navegadores y es compatible con cualquier sistema operativo que 
está instalado el navegador. Lujan (2002) menciona que “los navegadores son capaces de 
interpretar las etiquetas y mostrar los documentos con el formato deseado” (p. 93). 
HTML es un lenguaje de marcas que se utiliza para dar la estructura a los 
documentos que se quiere difundir en la red de alcance global, por lo tanto, para realizar la 
estructura de una página web se debe utilizar un programa editor de texto como Sublime 
Text, Visual Studio, Atom, etc. Este se debe guardar con extensión index.html para que el 
navegar puede identificar y ejecutar. 
19 
1.6.1.1 Versiones de HTML. 
Es muy importante conocer la versión HTML que utilizará la página, porque cada 
explorador de internet presenta de forma diferente. Al crear una página web le 
comunicaremos al explorador sobre la versión de HTML que se está utilizando, este 
código se escribirá al inicio de la línea donde aparece !DOCTYPE (Ramos y Ramos, 
2011). 
Los estándares de HTML son: HTML 2.0 (se publicó en 1995) el estándar oficial, 
HTML 3.2 (publicado por W3C en 1997) se incorporó los últimos avances del desarrollo 
web hasta entonces, HTML 4.01 (publicado en 1999) y HTML5 esta es la última versión 
que se está trabajando actualmente. 
Las variantes de HTML 4.01 tenemos los siguientes: 
 HTML 4.01 Strict: En este tipo de documento se puede trabajar con etiquetas de HTML 
4.01 pero no acepta las etiquetas obsoletas. 
 HTML 4.01Transicional: En este documento se puede usar todas las etiquetas de todas 
las versiones de HTML. 
 HTML 4.01 Frameset: Este tipo de documentos tiene resistencia para frames que son 
unos marcos a modo de subventanas dentro de una misma página web. 
 
1.6.1.2 HTML5. 
Es un lenguaje de etiquetas que posibilita estructurar páginas web estática, con 
respecto a las anteriores versiones de HTML5, esto ofrece más funciones que permitirá dar 
una nueva experiencia en la creación de páginas web (Torres, 2014). 
 
20 
1.6.1.2.1 Estructura de HTML. 
La estructura básica para crear página HTML5 con las nuevas etiquetas son los 
siguientes: 
 <header>; contiene la cabecera de la página web como: Slogan y logo. 
 <nav>; contiene una barra de navegación o lista de hipervínculos. El estado y la forma 
se define a través de CSS. Dentro del NAV regularmente estarán <ul> y <li> 
 <aside>; bloque de contenido secundario como enlaces. 
 <article>; es el contenido principal. Pero cada artículo puede contener otra etiqueta 
dentro de él, <h2> para fijar el título del artículo. El <H1> es recomendable que solo 
exista uno por cada página. 
 <section>; secciones de la página y esto a su vez puede agrupar articles. 
 <Footer>; es el pie de página. 
En la figura 6 se visualiza la organización básica de un documento HTML con las 
secciones adaptadas. 
 
Figura 6. Estructura básica de página html5. Fuente: Recuperado de 
https://koranets.net/estructura-basica-de-una-pagina-en-html5/ 
21 
<!DOCTYPE html> 
<html> 
 <head> 
 <!-- Aquí el título de la pagina--> 
 <title>I.E. JH</title> 
 </head> 
 <body> 
 <!-- cabecera de nuestra página web --> 
 <header style="background-color:greenyellow;"> 
 <h1> <b><u>MI COLEGIO</u></b></h1> 
 <p>Sitio de nuestra querida institución</p> 
 <img src="logo.png" width="100px" height="60px"/> 
 </header> 
 <nav> 
 <ul> 
 <!-- menú de navegación --> 
 <li><a href="#">login</a></li> 
 <li><a href="#">Nosotros</a></li> 
 <li><a href="#">Consultas</a></li> 
 <li><a href="#">Matrículas</a></li> 
 </ul> 
 </nav> 
 <section> 
 <!-- Aqui el seccion de contenidos incluido el articulo--> 
 <article> 
22 
 <h2>Presentación</h2> 
 <p> Artículode la presentación…</p> 
 </article> 
 </section> 
 <aside> 
 <!-- Aqui va los hipervinculos de otras páginas--> 
 <h2><br>Enlaces</br></h2> 
 <a href="https://facebook.com"> Clic aquí</a> 
 </aside> 
 </body> 
 <footer> 
 <!-- Aquí el pie de página del sitio web--> 
 <h4><i><br>2021-2022</br></i></h4> 
 <p><h5><b><blink>@dollybeth</blink> </b></h5></p> 
 </footer> 
</html> 
 
Figura 7. Resultado del ejemplo html. Fuente: Autoría propia. 
23 
1.6.1.2.2 Comandos básicos de HTML. 
 <html> documento < /html>: Este código va indicar el inicio y final del documento 
HTML. 
 < head> encabezado </head>: Este código va indicar el inicio y final del encabezado de 
nuestro documento HTML. 
 <title> titulo </title>: Este código va indicar el título del documento. 
 <body> cuerpo </body>: Este código va indicar el inicio y final del cuerpo de nuestro 
documento HTML. 
 <p> párrafo </p>: Este código va indicar el inicio y final del párrafo de nuestro 
documento HTML 
 < br> salto de línea</br>: código para salto de línea. 
 Tipos de letras: 
- <b> negrita </b> 
- <i> cursiva </i> 
- <blink> Parpadeante </blink> 
- <strong> Enfatizada. </strong> 
 <ul> ... </ul> : Este código va indicar el inicio y final de una lista, pero no ordenada . 
Dentro de ellos cada lista empezará con <li> y terminará con </li>. 
 <ol> ... < /ol> Este código va a indicar el inicio y final de una lista, pero ordenada. 
Dentro de ellos cada lista empezará con <li> y terminará con </li>. 
 
1.6.2 Maquetación Web – CSS. 
CSS (cascading style sheets, hojas de estilo en cascada). Es uno de los lenguajes 
utilizados para estilizar elementos que están escritos en lenguaje HTML, donde el W3C es 
el representante de indicar especificaciones de CSS que servirán para los navegadores. Se 
24 
denomina estilos en cascada porque se aplican de superior a inferior siguiendo un patrón 
llamada herencia (Nieto, 2016). 
 
1.6.2.1 Propiedades de CSS. 
 Propiedad de fuente. 
 Color de texto, fondos, bordes y otros elementos. 
 Alineación de textos, imágenes, tablas, etc. 
 Propiedad de caja, margen, borde, relleno o espaciado. 
 Atributos de texto, como espaciado éntrelas palabras, letras, líneas. 
 Propiedad de reconocimiento y descripción de listas. 
 Soporte para hojas de estilo auditivo. 
 Texto bidireccional, sombras, etc. 
 
1.6.2.2 Versiones de CSS. 
 CSS1: Esto es la primera versión que surgió en el año 1996, contiene todas las 
funcionalidades básicas como los atributos o propiedades de las fuentes y sintaxis, 
 CSS2: Esta versión apareció dos años después de la primera, con la finalidad de seguir 
mejorando el lenguaje. 
 CSS3: Esta es la versión actual que se publicó en el año 2011, contiene especificaciones 
más completas y amplias. 
 
1.6.2.3 Modelo de cajas de CSS. 
Se refiere a todos los elementos de HTML que son tratados como cajas. Y todo 
elemento HTML tiene un width. En la figura 8 podemos detallar un modelo de caja de 
CSS, para entender mejor la consistencia de ello. 
25 
Los inline elements ocupan el tamaño del contenido, mientras los blocks elements 
toda la fila libremente de su contenido. Con el lenguaje de maquetación se podrá modificar 
la anchura de los elementos tipo bloque. 
H1 {width:100px;} width 
 Propiedad padding: Permite precisar un campo vacío alrededor del elemento, ejemplo. 
H1 {width:100px; paddizng-top:15px; padding-right:15px; padding-bottom:15px; 
padding-left:15px}  puede tener valores diferentes si se desea. 
- Cuando se define las mismas medidas para todos los lados, la declaración de sintaxis 
seria de la siguiente manera: h1{width:100px; padding:15px;}. 
- Si se tiene medidas como: 15px arriba, 7px derecha, 20px abajo y 0px a la izquierda, 
la declaración de sintaxis seria en sentido horario de la siguiente manera: 
h1{width: 100px; padding:15px 7px 20px 0;} 
- Si las medias de arriba y abajo son las mismas como también de las medidas de los 
laterales, la declaración de sintaxis de la siguiente manera: h1{width: 100px; 
padding:10px 5px;}. 
- Otro caso para precisar un padding de arriba, un lateral común y un padding de 
abajo, la declaración de sintaxis de la siguiente manera: h1{width: 90px; 
padding:15px 7px 22px;}. 
Importante: el padding comparte el mismo color del contenido en sí. 
 Propiedad border: si se quiere fijar un borde a la caja se tiene que tener en cuenta tres 
propiedades: el estilo, la anchura y el color. 
H1{width: 90px; padding:20px; border-style: solid; border-width:5px; border-color: 
#09E8C7;}. 
- Esta declaración de sintaxis se puede resumir de la siguiente manera: 
H1{width:90px; padding: 20px; border: solid 5px #2CC824;}. 
26 
- Si queremos fijar un tipo de borde para cada lado de la caja, se va precisando el 
estilo, anchura y color de cada lado, ejemplo: 
H1{ width:90px; padding: 20px; border: solid 5px blue; border-bottom-color: 
#24B9C8;}. 
 Propiedad de margin: Esta propiedad de CSS se aplica fuera de la caja, el margen no 
tiene color, siempre será sin color o sea sin transparente. 
Su sintaxis sera parecida al del padding, por ejemplo, si se declara un margen de 
arriba de 25px: 
H1{ width:90px; padding: 20px; border: solid 5px blue; border-bottom-color: blue; 
margin-top:25px}. 
 
Figura 8. Modelo de caja CSS. Fuente: Peralvarez, 2016. 
 
1.6.2.4 Estructura de CSS. 
La sintaxis básica de CSS consta de una serie de reglas que describe la 
visualización de cada elemento de la siguiente manera como se detalla en la figura 9. 
 
Figura 9. La estructura básica de CSS. Fuente: Recuperado de https://lenguajecss.com/ 
css/introduccion/estructura-de-css/ 
27 
 SELECTOR: Es la parte de HTML que se tiene que elegir del documento para emplear 
un estilo preciso, en otras palabras, es la parte de html que será afectada por el lenguaje 
CSS. 
h1{color: green} donde h1  selector / color: green declaración. 
 PROPIEDAD: Es una de las características que brinda el lenguaje CSS y que se 
aplicara al selector un valor para darle estilo. 
 VALOR: Cada propiedad CSS tiene un valor concreto y esto asigna un comportamiento 
al elemento HTML. 
 
1.6.2.4.1 Selectores de CSS. 
En CSS los selectores definen sobre qué elementos se va aplicar las reglas, por lo 
tanto, existen varios selectores que a continuación mencionaremos algunos de ellos. 
 Selector universal: Se usa para elegir todos los componentes del documento HTML, 
para ello se utiliza el asterisco. Sintaxis: * { atributo:valor; } 
 Selector Etiqueta: Selecciona todos los componentes que contienen la etiqueta HTML. 
Sintaxis: etiqueta html{ atributo:valor; } 
 Selector clase: Este selector se encarga de dar estilo a componentes establecidos que 
están señalados con el atributo class y la clase precisado. Sintaxis: nombre de la clase 
{propiedad: valor;}. 
Importante: Las clases (class) se pueden repetir, pero los identificadores (id) son 
únicos. 
 Selector ID: Este selector selecciona los componentes señalados con el atributo id, lo 
cual se usa para señalar un componente único. Sintaxis: #nombre-del-id {propiedad: 
valor;}. 
28 
 Selector descendente: Este selector elige los componentes que estan dentro de otros 
componentes. Sintaxis: selector1 selector2 selector3 {propiedad: valor;}. 
El pseudo clase es una situación predefinida de un componente al que se va a 
aplicar un estilo por defecto. Existen muchos pseudo clases, algunos de ellos vamos a 
mencionar a continuación. 
 :hover: El elemento se enciende en el momento que el navegante pasa con el ratón por 
encima de este. 
 :active: Esto se enciende cuando el navegante pulsa el mouse en el componente, la 
duración es imperceptible. 
 :focus: Esto se activa cuando el componente esta elegido, se aplica normalmente a los 
componentes de formularios. 
Por otro lado, también se puede aplicar varios pseudoclases en un elemento, pero 
tienen que ser compatibles. 
Ejemplos de Sintaxis: 
a: active {color: red;} 
#big-title:hover{background:blue;}. 
 
1.6.2.4.2 Pseudo-elementos CSS. 
Los pseudo-elementos permiten agregar estilos a un punto preciso de la página y 
siempre se escribe con dos puntos dobles (: :). 
Sintaxis: selector::pseudo-elemento { propiedad: valor; } 
A continuación, mencionaremos una lista de ellos: 
 ::after: Es usado para añadir contenido a un elemento con propiedad content. 
 ::before: Es usado para añadir contenido antes de un elemento . 
 ::first-letter: Es usado para añadir estilo a la primera letra de un elemento. 
29 
 ::first-line: Es usado para añadir estilo a la primera línea de un elemento de bloque. 
 ::selecction: Aplica reglas a una porción de un elemento que ha sido destacado. 
 ::Backdrop: Se usa para crear un fondo que oculte el documento. 
 ::placeholder: Esto representa el texto provisional de un elemento <input> 
 ::marker: Esta selecciona la caja de marcadores de un elemento de la lista que contiene 
números o viñetas. 
 ::spelling-error: Este elemento representa un segmento de textos con errores 
ortográficos marcados por user agent. 
 ::grammar-error: Este elemento representa un segmento de textos con errores 
gramaticales marcados por user agent. 
 
1.6.2.5 Ejemplo aplicado en CSS. 
header{text-align: center;} 
/* ejemplo de selector ID */ 
#big-title{font-size: 60px; margin: 40px 100px; 
color: #42FA07;} 
#subtitle{font-style: italic;color: #9E040B;} 
.featured{ 
 margin: 20px 100px; 
 padding: 30px 60px; 
 background-color:#FA9CF7 ;} 
/* ejemplo de selector clase */ 
.featured-title{ 
 font-size: 24px; 
 color: red; 
30 
 margin: 0;} 
.featured-excerpt{ 
font-size: 20px; 
 color: blue; 
 margin: 0; } 
.news{ 
 margin: 10px 100px; 
 padding: 30px 60px; 
 background-color:#FAF19E; 
 border: 5px solid #ccc; } 
.news-title{ 
 color: blue; 
 font-style: italic;} 
/* ejemplo de selector desendente */ 
nav ul li a{ 
font-style: italic; 
color: green;} 
/* ejemplo de un pseudo clase */ 
#big-title:hover{ 
 background:blue;} 
p:visited {color: red;} 
/* ejemplo de un pseudo elemento */ 
li::after{ 
 content: ":";} 
.news-title::after{content: "- (titulo)"; color: cyan} 
31 
.news-title::before{content:"* ";color: red;} 
ul li::marker { 
 color: red; 
 font-size: 1.5em;} 
En la figura 10 se observa el resultado de los estilos básicos aplicados al 
documento HTML. 
 
Figura 10. Resultado del ejemplo CSS con estilos básicos. Fuente: Autoría propia 
 
1.6.3 Lenguaje de programación – JavaScript. 
JavaScript es un conjunto de instrucciones que precisa la lógica y el 
comportamiento de los datos del documento Web. Esto se emplea a un documento HTML 
y su uso es para establecer la participación activa del sitio web. JavaScript se está 
transformando en un lenguaje constituido, este lenguaje incluso forma parte de los 
sistemas operativos de computadoras y otros aparatos tanto en el lado del servidor y el lado 
del cliente. En el contexto de la página web, puede realizar muchos tipos de acciones e 
interacciones, anteriormente solo se usaba para autenticar cuestionarios, presentar cajas de 
diálogo, realizar condiciones y otros (Zambrano, 2018). 
32 
Eguiluz (2009) señala que “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” (p. 5). 
JavaScript y Java son lenguajes muy diferentes que no guardan ninguna relacion 
directa, a pesar de ser ambos lenguajes de programacion trabajando a su modo. 
 
1.6.3.1 Como incluir de JavaScript en documentos HTML. 
a. Los códigos de JavaScript podemos incluir en el mismo documento HTML: al escribir 
el código se debe encerrar en etiquetas <script>, esto se puede incluir en cualquier lugar 
del documento. A pesar de que se puede agregar en cualquier parte del documento, lo 
recomendable es definir en la cabecera del documento, en la sección <head> o en 
sección <body>. Sin embargo, para que el código sea válido será necesario agregar el 
atributo type a la etiqueta <script>. 
Eguiluz (2009) señala que: 
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 (p. 7). 
<!DOCTYPE html> 
<html> 
 <head> 
 <title> MI COLEGIO </title> 
 <script type="text/javascript"> 
 alert("Este es un aviso importante"); 
33 
</script> 
 </head> 
b. Los códigos JavaScript podemos ingresar en un archivo externo: Los códigos podemos 
ingresar en un documento externo de tipo Javacripst donde serán enlazados desde 
HTML mediante la etiqueta<script>. Este método requiere para su correcta función del 
atributo type y el atributo scr, esto indicara el url para enlazar el archivo JavaScripts, 
este documento debe tener la extensión de .JS. 
<script type="text/javascript" src="/main.js"></script> 
c. Los códigos JavaScript podemos aplicar en cada componente del documento HTML. 
<!DOCTYPE html > 
<html 
<head> 
<title> MI COLEGIO</title> 
</head> 
<body> 
<p onclick="alert ('este es un aviso muy importante')">texto </p> 
</body> 
</html> 
 
1.6.3.2 Etiqueta noscript. 
La etiqueta <noscript> se definen en el documento HTML. Se utiliza para mostrar 
un mensaje al cliente cuando el explorador no ejecuta JavaScript, esto podría estar 
desactivado por motivos de seguridad. Esta etiqueta <noscript> de debe incluir dentro de la 
etiqueta <body>. 
<body> 
34 
<noscript> 
<p>Error al ingresar</p> 
<p>para ingresar a esta página se requiere el uso de JavaScript. Si lo has 
desactivado intencionalmente actívalo. </p> 
</noscript> 
</body> 
 
1.6.3.3 Sintaxis. 
Eguiluz (2009) señala que: 
La sintaxis de JavaScript es similar a algunos lenguajes de programación como el 
lenguaje C. La sintaxis de un lenguaje de programación se define como el conjunto 
de reglas que deben seguirse al escribir el código fuente de los programas para 
considerarse como correctos para ese lenguaje de programación (p. 10). 
Las reglas fundamentales que precisan la sintaxis de JavaScript son las siguientes: 
 No cuenta los espacios blancos ni las líneas vacías. 
 Las mayúsculas y minúsculas se distinguen. 
 El tipo se variable no se define. 
 No necesariamente cada sentencia se debe terminar con punto y coma (;). 
 Podemos escribir comentarios. 
 
1.6.3.4 Variables. 
La variable es un componente que se utiliza para guardar los datos y realizar 
indicación a otro valor. Cada variable tiene un nombre, de modo que podamos acceder a 
ese dato siempre que se necesite. Es decir, podemos tener una variable llamado mi nombre 
35 
para almacenar el nombre de una persona (esto será el dato) y una variable llamado edad 
para almacenar la edad de la persona (esto será otro dato) como se ve en la figura 11. 
 
Figura 11. La caja representa una variable y ese variable tiene un nombre finalmente esta caja 
contiene un dato. Fuente: Recuperado de https://www.aprendeprogramando.es/cursos-
online/javascript/variables-y-tipos-de-datos/que-es-una-variable 
 
1.6.3.5 Tipos de variables. 
Las variables en JavaScript se establecen a través de la palabra reservada var, la 
manera en la que destina un valor a cada uno va depender del tipo de valor requerido a 
almacenar, que a continuación mencionaremos: 
 
1.6.3.5.1 Numéricos. 
Se utilizan para guardar valores enteros (denominados enteros) y números 
decimales (denominados números flotantes), los números decimales usan el carácter de 
punto (.) para apartar partes enteras y decimales. 
 
1.6.3.5.2 Cadena de textos.Se utilizan para guardar caracteres, frases de texto o palabras, para fijar el dato a la 
variable se utiliza las comillas dobles o simples, con la finalidad de delimitar su comienzo 
y final. 
 
36 
1.6.3.5.3 Arrays. 
Este variable permite almacenar varias variables y podemos ingresar a ellos de 
forma independiente, en ocasiones podemos llamar arreglos, vectores o matrices. 
var platosmarinos= ["Chaufa de mariscos", "Ceviche", "leche de tigre", "arroz con 
mariscos", "Jaleas", "chicharrón de pescado ", "Parihuela", "Chilcano", "picante de 
mariscos"]; 
 
1.6.3.5.4 Boleanos. 
Son variables de tipo lógico, este tipo variable almacena solamente dos valores 
especiales los cuales son el verdadero (true) o falso (false). 
var clienteRegistrado = false; 
var igvIncluido = true; 
 
1.6.3.6 Estructura de control de flujo. 
Las estructuras de control le permiten cambiar el flujo de ejecución de las 
declaraciones del programa que pueden tomar decisiones basadas en el valor de una 
variable. A continuación, mencionamos algunas estructuras de JavaScript, y en la figura 12 
mostramos la estructura if, 
 Estructura if: 
 Estructura if…else: 
 Estructura for. 
 Estructura switch. 
 Estructura while. 
 
37 
 
Figura 12. Estructura if…else. Fuente: Recuperado de http://euloxio.myds.me/dokuwiki/ 
doku.php/demo:ud:prg_ejm:inicio 
 
1.7 Framework de tecnologías Front-End 
Representan la arquitectura de software de una aplicación y determina el proceso 
de desarrollo. El framework es una estructura base, que esquematiza la elaboración de un 
trabajo, ya que solo es necesario completarlo de acuerdo a lo que se quiere realizar 
específicamente (Muente, 2020). 
El framework es el esqueleto de una aplicación que se puede personalizar según las 
necesidades requeridas. 
 
1.7.1 Foundation. 
Es un marco de referencia de HTML y CSS que incluye plantillas, fragmentos, 
tipografías, formularios, botones, barras de navegación y otros elementos. Foundation es 
semántico, legible, flexible y completamente personalizable para crear un sitio web. 
 
1.7.2 Bootstrap. 
Es un Framework de CSS y HTML que posibilita dar formato a la página web y 
adecuar a las necesidades de los clientes. Por lo tanto, es un conjunto de herramientas de 
38 
código abierto que incluye varios componentes como ventanas modales, menús, paneles, 
botones y módulos todos ellos son elementos para maquetar la página web. 
 
1.7.2.1 Biblioteca de componentes. 
La biblioteca de componentes puede ser usada para facilitar una mejor interacción 
y mejorar la comunicación con el usuario. A continuación, mencionaremos algunos de 
ellos. 
 Alertas 
 Carrousel 
 Barra de navegación 
 
1.7.2.2 Descarga e instalación de Bootstrap. 
a. Una forma de aplicar bootstrap al proyecto es utilizando su red de distribución de 
contenidos CDN (content delivery network). Para utilizar esto solo se debe copiar en el 
documento html de nuestro proyecto el código que indica en el enlace 
https://getbootstrap.com/docs/5.0/getting-started/introduction/ este modo se trabaja con 
el uso de internet. 
b. Descarga completa del código para el desarrollo en el ordenador del enlace 
https://getbootstrap.com/, este modo no necesita internet para su uso después de la 
instalación. Pero también se debe descargar e instalar jquery y Popper. En la figura 13 
se muestra la página oficial de Bootstrapp donde se encuentran los códigos de estilos, 
script y algunos ejemplos. 
 
39 
 
Figura 13. Página de Bootstrap para copiar los códigos en documento html. Fuente: Autoría propia. 
 
1.7.3 AngularJS. 
Angular es uno de los marcos de referencia de JavaScript con código abierto creado 
por google, los desarrolladores utilizan para crear páginas web dinámicos. El tipo de 
aplicaciones que desarrolla Angular es el estilo SPA (single page aplicatión) (Robles, 
2017). 
La aplicación Web SPA es un tipo que se muestra en una sola página, en la cual la 
navegación, la sección y la carga de datos se ejecuta de forma dinámica, sobre todo sin 
refrescar la página en ningún momento. 
 
1.7.3.1 La diferencia entre Angular y AngularJS. 
 Angular es un Framework avanzado que reúne todas las mejoras y novedades en cuanto 
al desarrollo de SPA y PWA. 
 AngularJS es un Framework antiguo que no ofrece muchas herramientas para el 
desarrollo de PWA. 
40 
 
 
 
 
 
 
Capítulo II 
La programación Back – End 
 
2.1 Programación Back - End 
Es la capa de acceso a datos de un software o cualquier dispositivo, que no es 
directamente accesible por los usuarios, además contiene la lógica de la aplicación que 
maneja dichos datos. El Back-end también accede al servidor, que es una aplicación 
especializada que entiende la forma como el navegador realiza las peticiones (Zelaya, 
2020). 
Es el proceso mediante el cual se desarrolla la parte lógica de un sitio Web o 
aplicaciones utilizando lenguajes de programación y bases de datos para almacenar todas 
las informaciones. 
El Back-End administra el área lógica de todo el sitio para asegurarse de que todo 
funcione correctamente; recibe los datos, los procesa y los envía al cliente. También es 
responsable de las consultas a la base de datos y el contacto con el servidor (Rodriguez, 
2019). 
El desarrollo Back-End realiza los diseñadores Web con conocimiento y 
experiencia en lenguaje de programación, es importante que conozcan distintos lenguajes. 
41 
En la figura 14 se muestra el Front-End y Back-End de forma gráfica para entender más 
sobre sus funciones de programación. 
 
Figura 14. Diferencia entre Front-End y Back-End. Fuente: Recuperado de https://www.campusmvp.es/ 
recursos/post/que-necesitas-saber-para-ser-un-buen-desarrollador-web-front-end.aspx 
 
2.1.1 Dominio. 
Es el nombre del sitio en internet para indicar la dirección a los usuarios de cómo 
llegar a dicho sitio. Por lo tanto, esto contiene los parámetros que guían a los navegadores 
para encontrar y acceder a la información que contiene el sitio web en el internet. Un 
dominio es un acceso directo para acceder al servidor donde está alojado su sitio web, que 
consta de dos elementos principales: el nombre del sitio web y la extensión del dominio 
(Prieto, 2021). 
La organización ICANN (corporación de internet para nombres y números 
asignado), son encargados de supervisar los padrones de nombres de dominios y precisa 
que extensiones de dominios están libres, como también mantienen una base de datos de 
los dominios web. 
 
2.1.1.1 Tipos de dominios. 
 Dominio de nivel superior genérico (gTLD): Es el dominio más utilizado en el mundo y 
son conocidos por ser las más comunes. Por ejemplo, .com dominio para sitio 
comercial, .org dominio para organización sin fines de lucro, etc. 
42 
 Dominio de nivel superior geográfico (ccTLD): Son dominios que están centrados para 
un país o territorio específicamente. Por ejemplo, .pe dominio asignado para Perú, .es 
dominio asignado para España, etc. 
 Dominio de tercer nivel: Este dominio es la combinación de los dominios gTLD y 
ccTLD los cuales indican la función del web y a la vez limitan su territorio. Por 
ejemplo, .gob.pe dominio asignado para gobierno del Perú, .edu.pe dominio asignado 
para sector educación del Perú, etc. 
En la figura 15 mostramos algunos tipos de dominios que se utilizan o se pueden 
adquirir para la dirección de los sitios web. 
 
Figura 15. Se muestra algunos dominios que se puede adquirir. Fuente: Recuperado de 
https://www.amarteagency.com/fundamentos-del-marketing-digital/que-es-un-dominio-en-internet/ 
 
 
2.1.2 ¿Qué es un hosting? 
Es el espacio para alojar o almacenar las páginas web en el servidor, básicamente 
esto se alquila para guardar los datos y archivos necesarios de nuestra página web (Prieto, 
2021). 
Un servidor es una computadora de gran capacidad que trabaja las 24 horas del día 
de forma ininterrumpida para que el sitio web esté apto en todomomento. El proveedor de 
hospedaje es el responsable de conservar en funcionamiento el servidor, también de 
43 
proteger de los posibles ataques maliciosos que pueda haber. En la figura 16 se observa un 
ejemplo comparativo de cómo funciona para entender que es hosting, dominio y los 
archivos del sitio web. 
Para adquirir un plan hosting del proveedor que se elige, puede variar dependiendo 
de los siguientes elementos básicos: 
 Almacenamiento: Por la cantidad de espacio del disco según la necesidad. 
 Número de sitios: Por la cantidad de sitios asociados a tu misma cuenta. 
 Ancho de banda: Por la cantidad de datos que puede usar la página web al mes. 
 Seguridad: Por la seguridad que puede brindar a la página web, como certificados SSL 
o protección anti malware. 
 
Figura 16. La diferencia entre dominio y Hosting. Fuente: Recuperado de https://blog.neothek.com/diferencia-
entre-nombre-de-dominio-y-alojamiento-web/ 
 
2.2 Lenguaje de programación 
Un lenguaje de programación es un conjunto de comandos que permiten a los 
humanos comunicarse con las computadoras. Este lenguaje permite a las computadoras 
interactuar con algoritmos e instrucciones, incluida una sintaxis que se puede entender e 
interpretar en lenguaje de máquina. Lenguajes de programación que permiten a las 
44 
computadoras procesar rápidamente grandes cantidades de información compleja (Lopez, 
2020). 
 
2.2.1 Características de lenguaje de programación. 
 Sintaxis: El conjunto de reglas y símbolos para realizar sentencias. 
 Semántica: Las reglas para cambiar elementos básicos en instrucciones lógicas. 
 Pragmática: Se refiere a la interpretación y análisis de los problemas para dar solución 
en lenguaje de programación. 
 
2.3 Lenguajes para el desarrollo de Back – End 
Uno de sus principales funciones de Back-End es establecer arquitecturas robustas 
y seguras, lo cual para su desarrollo se necesitará lenguajes de programación y base de 
datos. A continuación, se detallarán algunos lenguajes el desarrollo Bak-End. 
 
2.3.1 Python. 
Hinojosa (2016) señala que Python es “un lenguaje multiplataforma, lo que 
significa que puede usarse en multitud de sistemas distintos. Funciona en ordenadores con 
sistemas operativos Linux, Apple, Windows y muchos otro, pero también hay versiones 
para otros dispositivos, como terminales telefónicos inteligentes, etcétera” (p. 21). 
Este lenguaje Back-End es de codigo abierto que tiene un formato sencillo y una 
sintaxis muy precisa, esto hace que el aprendizaje sea muy dinamico. La sencillez de su 
comprension hace que Pyton cuente con un codigo facil de leer y de desarrollar. 
Este lenguaje de software libre presenta variedad de tipos de datos esenciales como 
números, booleanos, strings, diccionarios y listas; su opción avanzada permite el uso de 
generadores y listas de comprensión. 
45 
2.3.1.1 Elementos del lenguaje. 
Python está diseñado para ser muy fácil de entender e interpretar. Una 
característica de este lenguaje es el uso de las palabras en vez de símbolos que otros 
lenguajes utilizarían. A continuación, mencionaremos los elementos de Python. 
 Comentarios: se pueden poner de dos formas, la primera es tres apóstrofos para abrir y 
tres para cerrar el comentario (´´´… ´´´) y la segunda forma es con símbolo #, y esto se 
extenderá hasta el final de la línea. 
 Variables: se determinan de manera dinámica, esto significa que no tiene que 
especificar el tipo del valor que va a tomar, la variable puede tomar diferentes valores. 
Para asignar valores se utiliza el símbolo (=). 
 Tipos de datos: En la figura 17 se visualiza los tipos de datos que se utilizan para el 
lenguaje de programación Pyton. 
 
Figura 17. Tipos de datos de lenguaje de programación Python. Fuente: Gomis, 2018. 
46 
 Condicionales: Las condiciones se definen usando la palabra if, luego procesa dicha 
condición evaluando secuencialmente hasta encontrar la primera que sea verdadera. 
Opcionalmente, puede haber un bloque final con la palabra else, esto ejecuta cuando 
todas las condiciones fueron falsas. 
 Bucle for: Repite instrucciones cierta cantidad de veces, se determina con la palabra for 
continua la variable y seguido la palabra in, ejemplo: 
For x in range (0,5): 
Print (“el número es: ”, x) 
 Bucle while: Es ciclo que va a repetir un código o un grupo instrucciones mientras se 
cumpla las condiciones, se puede realizar operaciones o una especie de menús, ejemplo. 
 
X=0 
While x < 10: 
 Print (“el valor es:”, x ) 
 X+=1 
 Listas: Son estructuras de datos flexibles donde podemos almacenar diferentes datos 
como valores numéricos, cadena, etc. las listas se declaran por corchetes [ ], sus 
elementos de separan con comas y comienzan con el índice 0, las listas son mutables, 
quiere decir que se pueden agregar elementos durante la ejecución. 
 Tuplas: Son estructuras de datos flexibles donde podemos almacenar diferentes datos 
como valores numéricos, cadenas, listas, etc. las tuplas se declaran por corchetes ( ), 
sus elementos de separan con comas y comienzan con el índice 0, las tuplas a diferencia 
de listas son inmutables, quiere decir que se pueden agregar o modificar elementos 
durante la ejecución. 
47 
 Diccionarios: los diccionarios tienen dos elementos formados por un par clave: valor, 
en el diccionario no puede haber claves duplicadas. Para declarar un diccionario se usan 
las laves { } y estas incluyen elementos divididos por comas. Los diccionarios son 
mutables, quiere decir que se pueden agregar elementos durante la ejecución 
 Conjuntos: son grupos de elementos desordenados, donde su principal característica es 
que no pueden haber duplicados en el contenido. Un conjunto consta de un conjunto 
(elemento) cuyos elementos son objetos iterables arbitrarios, pero ese conjunto también 
se puede modificar. Es decir, puede agregar elementos en tiempo de ejecución. 
 Funciones: Es un conjunto aislado de instrucciones que ejecutan una determina función, 
se determinan con la palabra clave def, luego el nombre de la función y sus parámetros. 
El valor retornado en las funciones con def será dado con la instrucción return. 
 Clase: Se identifican por la palabra clave class seguida del nombre de la clase que la 
sigue y, si hereda de otra clase, el nombre de esa otra clase. 
 
2.3.1.2 Ventajas de programar en Python. 
 Alta velocidad simplificada. 
 Elegante y flexible que presenta sencillez al desarrollador. 
 Programación sana y productiva fácil de aprender. 
 Es ordenado y limpio, sus módulos están bien organizados 
 Lenguaje portable que se puede usar en cualquier sistema. 
 Cuenta con gran cantidad de comunidad. 
 
2.3.2 Ruby. 
Ruby es un lenguaje de programación ejecutable, reflexivo y orientado a objetos 
creado por el programador japonés Yukihiro Matsumoto y lanzado en 1995. Permite crear 
48 
aplicaciones y software en diferentes entornos, tiene una sintaxis basada en Python y perl, 
es un lenguaje de código abierto (Garcia, 2017). 
Para usar ruby se tiene que descargar una versión para el sistema operativo de su 
página oficial. Después se debe instalar en la computadora, en sistema operativo Windows 
instala la herramienta llamada interactive ruby que es una consola para ejecutar los 
comandos y códigos de Ruby. 
 
2.3.2.1 Características de Ruby. 
 Programación orientada a objetos. 
 Es portable. 
 Admite la edición de objetos en tiempo de ejecución. 
 Soporta la instalación de dependencias. 
 Es un lenguaje interpretado, es decir no existe el proceso de compilación. 
 Desarrolla todo tipo de aplicaciones. 
 Dinámico y flexible. 
 Es software libre (open sourse) y multiplataforma, se puede ejecutar en diferentes 
sistemas operativos. 
 Permite declarar variables locales, globales, de instancias locales. 
 
2.3.3 Lenguaje PHP. 
 PHP es el acrónimo recursivo en inglés de PHP Hypertext Preprocessor(preprocesador de hipertexto), un lenguaje de programación de propósito general de 
código del lado del servidor originalmente diseñado para el desarrollo web de contenido 
dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se 
podían incorporar directamente en un documento HTML en lugar de llamar a un archivo 
49 
externo que procese los datos. El código es interpretado por un servidor web con un 
módulo de procesador de PHP que genera el HTML resultante (Zambrano, 2018). 
El procesador de hipertexto es uno de los lenguajes de programación cliente-
servidor de código abierto más utilizados para páginas web populares. 
Cobo, Gomez, Perez y Rocio (2005) señalan que: 
PHP es un lenguaje interpretado del lado del servidor que se caracteriza por su 
potencia, versatilidad, robustez y modularidad. Los programas escritos en PHP son 
encajados directamente en HTML y ejecutados por el servidor web a través de un 
intérprete antes de transferir al cliente que lo ha solicitado un resultado en forma de 
código HTML puro. Al ser un lenguaje que sigue la corriente open source, tanto el 
intérprete como su código fuente son totalmente accesibles de forma gratuita en la 
red (p. 99). 
PHP es un lenguaje multiplataforma. El programa funciona de la misma manera en 
diferentes plataformas, funciona en la mayoría de los servidores web y funciona en 
muchos tipos de bases de datos. 
 
2.3.3.1 Características de lenguaje PHP. 
 Orientado a desarrollar aplicaciones web dinámicas que puedan acceder a información 
almacenada en bases de datos. 
 Lenguaje fácil de aprender. 
 El código fuente escrito en PHP es oculto al navegador web y al cliente, ya que de este 
proceso se encarga el servidor y envía solo el resultado al navegador. 
 Capacidad para conectarse a la mayoría de las bases de datos actualmente en uso. 
 La documentación de ayuda completa está disponible en el sitio web oficial. 
 Es libre, con fácil entrada para todos. 
50 
 Permite emplear técnicas de programación orientados a objetos. 
 No es necesario definir el tipo de variable. 
 Debido a su flexibilidad, es ampliamente aceptado como lenguaje central para 
aplicaciones web de gestión de contenido. 
 
2.3.3.2 Instalacion de servidor local. 
Las páginas web basados en PHP se ejecutan en un servidor de alojamientos 
conectado; sin embargo, para propósitos de desarrollo y prueba, es aconsejable usar un 
servidor local. Para ello se instala un servidor local que viene agrupado en una sola 
instalación conocida como XAMP (Sistema Operativo, Apache, MySQL y PHP). Los 
últimos tres caracteres permaneces constante mientras que el sistema operativo varia 
denotado por X. Para el sistema operativo Linux seria LAMP y para Windows WAMP. 
Para descargar se puede ingresar al siguiente link: 
https://www.apachefriends.org/download.html. 
 
2.3.4 Lenguaje de programación Java. 
Es un lenguaje de programación orientado a objetos y con objetivo general. Su 
propósito es permitir a los desarrolladores de aplicaciones crear programas y ejecutarlos en 
cualquier dispositivo. Esto significa que el código que se ejecuta en una plataforma no 
tiene que recompilarse para ejecutarse en otra. 
Java surgió en la década de 1990 como un lenguaje orientado a objetos poderoso, 
simple y fácil de usar, muy adecuado para la programación de aplicaciones de red. 
 
2.3.4.1 Filosofía de Java. 
Este lenguaje se creó con cinco objetivos principales que son los siguientes: 
51 
a. Utilizar un modelo de programación orientado a objetos. 
b. Le permite ejecutar el mismo programa en varios sistemas operativos. 
c. Incluye soporte de red predeterminado. 
d. Diseñado para ejecutar código de forma segura en sistemas remotos. 
e. Fácil de usar y aprovechar al máximo otros lenguajes orientados a objetos. 
 
2.3.4.2 Características de Java. 
 Simple: Ofrece la funcionalidad del lenguaje C y C++, pero eliminando las 
características confusas y errores más comunes de estas. 
 Orientado a objetos: Esto le permite diseñar su software de tal manera que todos los 
datos utilizados se incorporen a la operación. 
 Es distribuido: Proporciona bibliotecas y herramientas estándar para la distribución de 
programas. 
 Independiente a la plataforma: Todos los programas escritos en Java pueden ejecutarse 
en cualquier tipo hardware. 
 Recolector de basura: Borra las referencias no localizadas a un objeto, liberando así el 
espacio que ocupaba. 
 Seguro y solido: Proporciona una plataforma segura para desarrollar y ejecutar las 
aplicaciones protegiendo la privacidad de los datos. 
 Es multihilo: Realiza múltiples tareas simultáneamente en el mismo programa para 
mejorar el rendimiento y la velocidad de ejecución. 
 
2.3.4.3 Ventajas que ofrece Java. 
 Se adapta a todo tipo de dispositivos como: las tabletas, laptops, computadoras, 
Smartphone. 
52 
 Es posible diseñar cualquier aplicación. 
 Es posible crear páginas web dinámicas y atractivas mediante xml. 
 Permite incluir objetos multimedia y sonidos. 
 
2.3.5 Lenguaje Go. 
Es un lenguaje de programación de código abierto compilado y competitivo 
desarrollado por ingenieros de Google, lanzado en 2009 y promocionado como una 
tecnología simple, confiable y eficiente. 
Este lenguaje de programación fue creado con el objetivo de crear un lenguaje de 
programación especializado para satisfacer las necesidades de redes de los proyectos 
actuales. El lenguaje Go está especializado para trabajar con servicios de red y en la nube. 
 
2.3.5.1 Características de Go. 
La finalidad de este lenguaje es solucionar los problemas que se presentaban en los 
otros lenguajes, por lo que tiene una serie de características relacionadas. 
 Soporte de red. 
 Multiprocesamiento. 
 Tiene un recolector de basura. 
 Se trata de un paradigma múltiple y se puede programar de forma estructurada. 
 La sintaxis es tan concisa y clara como la sintaxis de C. 
 Esta es una operación abierta. 
 Compatible con sistemas Windows, Mac OS X, Linux y freeBSD. 
 Detecta errores de sintaxis durante la compilación, sin ejecutar. 
En lenguaje de programación Go también tiene las siguientes herramientas: 
 Godoc: Permite presentar documentos a través de HTTP. 
53 
 Go Vet: Una herramienta para encontrar posibles errores en su código. 
 Go Get: Esto le permite instalar y / o restaurar paquetes. 
 Go Build: Puede utilizar datos de origen para crear archivos binarios. 
 Go fmt: Herramienta de formato de código. 
 
2.3.5.2 Desventajas de Go. 
 No hay documentación completa de los pasos, libros, informes y manuales. 
 No es posible implementar herencia si no especificar información de un type. 
 Carencia de programadores expertos en este lenguaje. 
 En la biblioteca estándar solo se pueden utilizar tipos de datos comunes. 
 
2.3.6 Lenguaje de programación C++. 
Es un lenguaje de programación que es una extensión del lenguaje C que le permite 
manipular objetos y el lenguaje está diseñado de la siguiente manera: 
 Ser bastante mejor que lenguaje C. 
 Mantener la característica abstracta de un sistema de base de datos. 
 Soporta orientada a objetos. 
 Soporta programación general con patrón. 
Ceballos (2018) señala que: 
Posteriormente, C++ ha sido ampliamente revisado y refinado, lo que ha dado 
lugar a añadir nuevas características, como herencia múltiple, funciones 
miembros static y const, miembros protected, tipos genéricos de datos o 
plantillas y manipulación de excepciones, Se han revisado características como 
sobrecarga, enlace y manejo de la memoria. Además de estos, también se ha 
hecho pequeños cambios para incrementar la compatibilidad con C y se 
54 
añadieron la identificación de tipos durante la ejecución y los espacios de 
nombres con el objetivo de convertir a C++en un lenguaje más propicio para la 
escritura y utilización de bibliotecas (p. 2). 
 
2.3.6.1 Característicasde lenguaje C++. 
Las características fundamentales que tiene el lenguaje C++ son: 
 Compatibilidad con bibliotecas: las bibliotecas tienen muchas funciones que pueden 
ayudarlo a codificar rápidamente. 
 Orientado a objetos: la programación se realiza dentro de los objetos y mediante la 
manipulación de varias propiedades. 
 Velocidad: se compila y se ejecuta muy rápido. 
 Compilación: el código de bajo nivel debe compilarse antes de la ejecución. 
 Didáctico: Si se aprende a programar C++ será más fácil aprender los otros lenguajes de 
programación. 
El propósito de las características fundamentales antes mencionadas del lenguaje 
C++, es para mejorar la productividad de las aplicaciones durante el desarrolla y la 
ejecución de los códigos. Luego facilitar una biblioteca estándar completa y segura para 
mejorar el uso y la función de este lenguaje. 
 
2.3.6.2 Ventajas y desventajas de lenguaje C++. 
Las ventajas principales de este lenguaje de programación son: el alto rendimiento 
que ofrece, la actualización constante del lenguaje, multiplataforma y es muy extendido. 
Las principales desventajas que trae este lenguaje es que tiene muchas líneas de 
códigos y es muy amplio, como también se compila por plataforma, lo que dificulta la 
depuración y la gestión de la biblioteca debido a errores. 
55 
2.4 Marcos de trabajo Framework para Back – End 
Los marcos de referencia son diagramas o estructuras que se utilizan para definir y 
organizar productos de software, esto facilita la programación de aplicaciones existentes. 
Hay muchas tecnologías para el desarrollo en la parte del Back-End, por lo que cubriremos 
algunas a continuación. 
 
2.4.1 Django. 
Es uno de los Frameworks Web de lenguaje Python, que permite desarrollar de 
manera rápida los contenidos de las páginas Web. Un Framework es un conjunto de 
elementos el cual ayuda a desarrollar páginas web con más facilidad y rapidez, por lo 
tanto, Django es gratuito y de código abierto, con una comunidad activa próspera, 
excelente documentación y muchas opciones de soporte gratuitas y de pago. 
Django se ha utilizado desde el principio como una herramienta para resolver 
problemas prácticos en entornos empresariales, con el objeto de mejorar el periodo de 
desarrollo y las exigentes necesidades de los desarrolladores Web. 
 
2.4.1.1 Características de Django. 
 Bajo acoplamiento. 
 Patrón MTV (modelo, plantilla, vista) 
 Diseño urls elegantes 
 Sistema de plantillas. 
 Servidor depruebas. 
 Facilita la elaboración, validación y el proceso de los formularios. 
 Autenticación y autorización de los usuarios. 
 Sitio de administración 
56 
2.4.1.2 Patron Model Template Vista (MTV). 
En la figura 18 podemos observar el patrón de modelo MTV, este patrón se utiliza 
para lenguaje de programación Django. 
 Modelo: capa que se ocupa de comunicar y conectarse con base de datos. 
 Vista: interactúa con modelo y template. Decide qué información será mostrada y por 
cual template. 
 Template: Determina cómo será mostrada la información. 
 
Figura 18. El patrón MTV de Django. Fuente: Condori, 2012. 
 
2.4.2 Laravel. 
Laravel es un marco de referencia de PHP multiplataforma que ayuda elaborar las 
aplicaciones web. laravel permiten al desarrollador aprovechar una gran biblioteca de 
funcionalidades preprogramadas, el acceso a la biblioteca simplifica la construcción de 
aplicaciones web robustas de forma rápida y disminuye la cantidad de codificación 
necesaria. 
Ciceri (2018) señala que: 
En un principio, Laravel no fue creado el patrón de arquitectura MCV, y su foco 
estaba puesto principalmente en resolver problemas de autenticación. No obstante, 
la primera versión incorporaba funcionalidades que fueron bien recibidas, y de 
forma rápida, por la comunidad de desarrolladores (p. 17). 
57 
Pero la segunda versión estuvo disponible en menos de seis meses y laravel agregó 
el patrón MVC a su arquitectura. 
 
2.4.2.1 Características de Laravel. 
 Gestión de rutas: proporciona un manejo de rutas sencillo, utilizando nombres simples 
para identificarlas. 
 Seguridad: incluye la autenticación de usuarios, autorizaciones de roles de usuarios, 
verificación de correo electrónico, servicios de encriptación y características de 
restablecimiento de contraseñas. 
 Migración: proporciona un control de versiones para bases de datos de la aplicación 
mediante migraciones. 
 Plantillas: blade es el motor de plantillas PHP de Laravel. 
 Sesiones: se utiliza las sesiones para almacenar información sobre el usuario a través de 
solicitudes. 
 Validación de datos. 
 Gestión de errores: es configura automáticamente al iniciar un nuevo proyecto. 
 
2.4.2.2 Instalación de Laravel en Windows. 
a. Instalando PHP: Instalar un servidor local ingresando a https://sourceforge.net/projects/ 
wampserver/files/latest/download, descargar WAMPserver (Windows, Apache, 
MySQL, PHP), luego ejecutar el instalador. 
b. Instalando composer: Composer es un manejador de gestión de dependencias de PHP a 
nivel de aplicación de terceros. Composer se encarga de instalar librerías que necesitan 
nuestros proyectos y las mantiene actualizadas, por lo que podemos reutilizar códigos 
de otros programadores en nuestras aplicaciones. 
58 
Para instalar en Windows, debemos descargar de su página: 
https://getcomposer.org/Composer-Setup.exe. Luego, ejecutar el instalador y seguimos 
sus pasos. 
Una vez terminado, podemos abrir una consola en Windows y ejecutar composer. 
Si todo salió bien, nos mostrara una lista de comando para ejecutar como indica en la 
figura 19. 
 
Figura 19. Ejecución de composer en Windows mediante el comando cmd. Fuente: Autoría propia. 
 
2.4.2.3 Patrón modelo, vista y controlador MVC. 
El MVC es un modelo de estructuración del sistema de software que distingue una 
aplicación en tres capas como podemos visualizar en la figura 20. Laravel, y otros 
Frameworks en PHP aplican este tipo de patrón de diseño, donde cada capa maneja un 
aspecto de la aplicación. 
 Modelo: Esta capa se encarga de comunicar e interactuar con base de datos. 
59 
 Controlador: es donde se implementa la lógica de la aplicación. Es otras palabras, es 
responsable del control, recibe comandos del usuario y es responsable de solicitar datos 
al modelo y, en última instancia, comunicarse con la vista. 
 Vista: Esta es la visualización de datos, todo lo relacionado con la GUI. 
 
Figura 20. El proceso del patrón MCV. Fuente: Hernández, 2015 
 
2.4.3 Ruby on Rails. 
Arias (2014) señala que: 
Es una tecnología que permite desarrollar webs dinámicas orientadas a base de 
datos y aplicaciones para la Web de forma semejante a tantos otros lenguajes de 
programación. Sin embargo, a pesar de ser nuevo está creciendo de forma 
asombrosa y ha llamado la atención de desarrolladores de todo el mundo debido a 
que permite aumentar la velocidad y facilidad en el desarrollo de proyectos (p. 7). 
Rails es un Framework que fue creado para Ruby donde el objetivo es permitir un 
desarrollo flexible y productivo, escribir algunas líneas de código y lograr buenos 
resultados finales. 
Ruby on Rails es un software libre que puede ser descargados e instalados de forma 
gratuita en los diferentes sistemas operativos. Además, trabaja con la estructura de patrón 
60 
MVC, este patrón permite la planificación de las partes del software desarrollado en 
función al objetivo de cada uno. 
Las librerías en Ruby on Rails es conocido como gemas, estos intervienen a 
resolver problemas de programación y hacerles el trabajo mucho más sencillo a los 
programadores. Existen muchas cantidades de estas gemas que se puede descargar e 
instalar de manera gratuita. 
 
2.5 Base de datos 
Pineiro (2014) señala que: 
Una base de datos de puede definir como una colección o depósito de datos 
integrados con redundancia controlada y con una estructura que refleje las 
interrelaciones