Guia Programacion Web

INSTITUTO SUPERIOR TECNOLÓGICO
PRIMERO DE MAYO
Tecnología Superior en Desarrollo de Software
Programación de Aplicaciones Web
CUARTO CICLO
GUÍA DE ESTUDIO
Autor: _____________
Diego Vicente Guamá n Jima
Yantzaza – Ecuador
2021 - 2022
Presentación
La asignatura de Programación de Aplicaciones Web se dicta a los estudiantes del cuarto ciclo
de la Tecnología Superior en Desarrollo de Software, pertenece a la unidad de organización
profesional y su campo de formación es la adaptación e innovación tecnológica, con un total
de 176 horas.
Está enfocada en brindar al estudiante una formación más avanzada sobre programación y
construcción de aplicaciones informáticas, permitirles desarrollar su lógica en un contexto
web, para dar soluciones a problemas reales de una empresa y de la sociedad, utilizar
diferentes tecnologías o herramientas informáticas para desarrollar software a gran escala y
principalmente tener una visión más técnica del ciclo de vida de un proyecto informático.
Por tal motivo, el objetivo general es desarrollar aplicaciones web tanto del lado del cliente
como del servidor utilizando lenguajes de programación web y aplicando algoritmos de
búsqueda, ordenamiento, numéricos, estadísticos y criptográficos
Esta asignatura contempla los siguientes contenidos mínimos, la primera unidad trata sobre la
Introducción a la Programación Web, en la segunda unidad se hace referencia a la
Programación del lado del servidor, la tercera unidad se fundamenta en el FrontEnd y librerías
importantes, y finalmente en la cuarta unidad se hace un estudio sobre el modo producción y
seguridad
Perfil de Egreso
Las competencias que el estudiante obtendrá al finalizar el programa de estudio de la
asignatura de Programación Orientada a Objetos, relacionadas con el Perfil de Egreso de la
carrera de Tecnología Superior en Desarrollo de Software, se mencionan a continuación:
 Comunica de manera asertiva, coopera activamente en la resolución de conflictos con

sus pares profesionales.
 Identifica oportunidades para mejorar el desempeño de las organizaciones a través del
uso eficiente y eficaz de soluciones informáticas.
 Elabora el modelamiento, ilustración y evaluación del proceso de base de datos.
 Elabora documentación técnica.
Contribución de la asignatura al perfil profesional
La asignatura de Programación Orientada a Objetos contribuye con el perfil profesional de la

carrera, mediante la obtención competencias orientadas a codificar en un lenguaje
determinado los algoritmos, acorde al diseño elaborado, y crear los elementos de interacción
entre la base de datos con el entorno de desarrollo usando lenguaje de consultas.
Objetivo general de la asignatura
Desarrollar aplicaciones web tanto del lado del cliente como del servidor utilizando lenguajes
de programación web y aplicando algoritmos de búsqueda, ordenamiento, numéricos,
estadísticos y criptográficos
2
Índice de contenidos
Orientaciones Generales para el uso de la guía.......................................................................................5

1. Unidad 1: Introducción a la Programación Web........................................................................5
1.1. Introducción...............................................................................................................................5
1.2. Conceptos generales del desarrollo Web...................................................................................5
1.2.1. Qué es un navegador..................................................................................................................6
1.2.2. Que es un CMS..........................................................................................................................6
1.3. HTML........................................................................................................................................6
1.3.1. Qué se necesita para realizar una página web............................................................................7
1.3.2. Las bases de HTML...................................................................................................................7
1.3.3. Estructura de una página............................................................................................................9
1.4. Hojas de estilo CSS.................................................................................................................10
1.4.1. Funcionamiento básico de CSS...............................................................................................10
1.4.2. Archivo externo CSS...............................................................................................................11
1.5. JavaScript................................................................................................................................13
1.5.1. Breve Historia..........................................................................................................................13
1.5.2. Incluir JavaScript en los documentos.......................................................................................14
1.6. Framework Angular.................................................................................................................16
1.6.1. Instalación de Angular CLI 9...................................................................................................17
1.6.2. Crear y ejecutar una aplicación Angular..................................................................................17
1.6.3. Estructura de una aplicación Angular......................................................................................18
1.6.4. Ejecutar la aplicación...............................................................................................................18
1.6.5. Nuestro primer componente.....................................................................................................19
1.6.6. Agregar un componente dentro de otro....................................................................................19
2. Unidad 2: Programación del lado del servidor y Base de Datos..............................................21
2.1. Introducción.............................................................................................................................21
2.2. Api Rest...................................................................................................................................22
2.3. Principales características de una API REST...........................................................................22
2.4. Framework Sprng Boot............................................................................................................24
2.4.1. Creando el proyecto.................................................................................................................25
2.4.2. Definiendo la clase principal...................................................................................................26
2.4.3. Spring Data..............................................................................................................................27
2.4.4. Configuración de la base de Datos...........................................................................................28
2.4.5. Creando una REST..................................................................................................................28
3
3. Unidad 3: Gestores de contenidos............................................................................................35
3.1. Introducción.............................................................................................................................35
3.2. Software Xampp......................................................................................................................35
3.2.1. Características y Requisitos.....................................................................................................35
3.2.2. Aplicaciones............................................................................................................................35
3.2.3. Instalación...............................................................................................................................36
3.2.4. El panel de control...................................................................................................................38
3.2.5. Iniciar servidores.....................................................................................................................39
3.3. WordPress...............................................................................................................................40
3.3.1. Instalación...............................................................................................................................40
3.4. Drupal......................................................................................................................................45
3.4.1. Características de Drupal.........................................................................................................45
3.4.2. Instalación de Drupal...............................................................................................................46
3.5. Joomla.....................................................................................................................................46
3.5.1. Características generales..........................................................................................................46
3.5.2. Características de publicación de páginas web en Joomla:......................................................48
3.5.3. Instalación de Joomla..............................................................................................................48
4. Unidad 4: Seguridad y Modo Producción................................................................................50
4.1. Introducción.............................................................................................................................50
4.2. Generalidades de la seguridad web..........................................................................................50
4.2.1. Seguridad en los Sistemas de Información: Los tres grandes...................................................50
4.2.2. Herramientas para la seguridad de la información...................................................................51
4.3. Herramientas de identificación de vulnerabilidades.................................................................53
4.4. Publicación de sitios Web........................................................................................................56
Bibliografía..........................................................................................................................................61
Anexos
Anexo 1. Solucionario de la Autoevaluación de la primera Unidad.....................................................63
Anexo 2. Solucionario de la Autoevaluación de la segunda Unidad.....................................................65
4
Orientaciones Generales para el uso de la guía
Siendo la asignatura de Programación de aplicaciones web, una materia orientada a estudiar la
creación de sistemas informáticos orientados a la web, empleando tecnologías del lado cliente
como del servidor. Para garantizar el éxito del aprendizaje del estudiante mediante el uso de
esta guía, se sugiere las siguientes actividades atendiendo a la naturaleza de la asignatura:
 Comunicar cualquier inquietud al docente, por medio del correo electrónico, la
plataforma Moodle o la aplicación WhatsApp.
 Repetir nuevamente los ejercicios publicados en la presente guía y los elaborados por
el docente, para mejorar el uso de las palabras clave o tokens de los lenguajes de
programación abordados en esta asignatura.
 Localizar las fuentes bibliográficas indicadas y organizarlas en las unidades de
estudio.
 Interpretar cuidadosamente las directrices de cada actividad y realizar lo que se le
indica en los tiempos previstos para evitar la acumulación de las tareas.
 Investigar en otras fuentes y elaborar las actividades de ampliación para consolidar y
mejorar sus conocimientos y habilidades.
 Realizar las tareas de acuerdo con la modalidad que el docente le solicite.
 Comprobar lo aprendido, realizando las actividades de evaluación en cada unidad.
 Desarrollar las actividades de retroalimentación para que complete el logro de
aprendizaje y/o rectifique informaciones.
 Al finalizar todas las unidades comprobar el logro de los objetivos generales de la
guía, con la ejecución de la autoevaluación integradora.
Desarrollo de Contenidos
1. Unidad 1: Introducción a la Programación Web
1.1. Introducción
En esta unidad se estudian los conceptos principales de la Programación de aplicaciones web,

en la que se hace mención al lenguaje de marcado de hipertexto conocido por sus siglas
HTML, de igual forma se hace un estudio básico e intermedio sobre las hojas de estilos en
cascada y la programación del lado del cliente mediante el lenguaje de programación
JavaScript.
1.2. Conceptos generales del desarrollo Web
El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi
infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible
encontrar lo que se busca. La unidad básica donde está almacenada esta información son las
páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e
incluso sonido y video.
5
Una de las características más importantes de las páginas Web es que son hipertexto. Esto
quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante
los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar
sobre un texto (texto al que llamaremos de ahora en adelante activo) de una página para
navegar hasta otra página. Será cuestión del programador de la página inicial decidir que
palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.
En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino
hipermedia. Los que defienden el cambio se apoyan en que, aunque en sus orígenes el WWW
constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede
hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones, en definitiva
cualquier elemento de una página. Aún así, el término original no ha sido reemplazado
todavía y por tanto será el empleado a lo largo de esta obra.
1.2.1. Qué es un navegador
De forma general es un programa que permite visualizar páginas web. La funcionalidad

básica de un navegador web es permitir la visualización de documentos de texto,
posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y
hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo,
entre otras funcionalidades más.
1.2.2. Que es un CMS
Un CMS es un software desarrollado para que cualquier usuario pueda administrar y gestionar
contenidos de una web con facilidad y sin conocimientos de programación Web. Previamente
un programador deberá desarrollar la página web en base al CMS más apropiado para el tipo
de web, dejando las tareas posteriores de gestión en manos del usuario final.
 CMS para páginas web

 WordPress
 Drupal
 Joomla
 CMS para tiendas on-line
 PrestaShop
 WordPress + WooCommerce
 Magento
1.3. HTML
Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los
diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre
otras, las siguientes características:
 El Web tenía que ser distribuido: La información repartida en páginas no muy grandes
enlazadas entre sí.
6
 El Web tenía que ser hipertexto y debía ser fácil navegar por él.
 Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de
trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-
OS).
 Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y
rápido.
Estas características son las que marcaron el diseño de todos los elementos del WWW
incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el
lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto
de marcas".
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página
web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones
sorprendentes, formularios interactivos, etc.
1.3.1. Qué se necesita para realizar una página web
Una de las características de este lenguaje más importantes para el programador es que no es
necesario ningún programa especial para crear una página Web. Gracias a ello se ha
conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El
código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto
lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los
sistemas operativos: edit™ en MS-DOS, block de notas en Windows, vi™ en UNIX, etc. Por
supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro.
También se puede usar procesadores de texto, que son editores con capacidades añadidas,
campo pueden ser Microsoft Word™ o WordPerfect™ pero hay que tener cuidado porque en
ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En
estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en
modo texto.
1.3.2. Las bases de HTML
Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en
general entraremos de lleno en la programación con este lenguaje. Pronto nos daremos cuenta
de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que
nos permitirá crear páginas con mayor facilidad aún.
Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que
pueden tener o bien la siguiente estructura:
<NOMBRE_ETIQUETA>
O bien esta otra:
<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
Como vemos, la primera estructura está formada por una única instrucción y la segunda por
dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas.
7
Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal
debemos escribir:
<hr>
Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor
que (<) y mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos
símbolos.
Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en
ocasiones parámetros. Por ejemplo, la etiqueta <hr> tal y como lo hemos hecho anteriormente
daría lugar a la línea que vemos en la siguiente figura, es decir le dice al navegador que dibuje
una línea horizontal en la pantalla.
Esta línea tiene un grosor predeterminado y un ancho variable en función del tamaño de la
ventana del navegador.
Figura 1. Resultado de la etiqueta hr de HTML. Elaboración Propia
Sin embargo, hay muchas formas de pintar una línea y sería deseable poder elegir detalles
tales como la anchura y el grosor que va a tener dicha línea. Para especificar este tipo de
detalles se crearon los atributos de las etiquetas. Este nuevo elemento se introduce en una
etiqueta de la siguiente manera:
<etiqueta atributo="valor">
Es decir, en primer lugar, ponemos el nombre de la etiqueta, después el nombre del atributo
seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo
encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en
ocasiones son necesarios para que la etiqueta tenga algún significado.
En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa
tamaño en inglés, que permite controlar el grosor de la línea que será dibujada en pantalla.
Veamos un ejemplo, en la siguiente podemos ver la línea horizontal con diferentes grosores.
8
Figura 2. Varios tamaños de la etiqueta hr de HTML. Elaboración Propia
1.3.3. Estructura de una página

En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un
documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al
principio y al final de la página respectivamente:
<html>
Código de la página
</html>
El código de la página está formado a su vez por dos grandes bloques, la cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta
head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página …
</html>
9
En la cabecera de la página se introduce toda aquella información que afectará a toda la
página. En un principio esta información se limitará al título. Este título se indicará con la
etiqueta title usando la siguiente sintaxis:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
1.4. Hojas de estilo CSS
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar
los contenidos y su presentación y es imprescindible para crear páginas web complejas.
Separar la definición de los contenidos y la definición de su aspecto presenta numerosas
ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado
completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del
documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo
documento en infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar
los contenidos, es decir, para designar la función de cada elemento dentro de la página:
párrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada
elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre
elementos, posición de cada elemento dentro de la página, etc.
1.4.1. Funcionamiento básico de CSS
Antes de la adopción de CSS, los diseñadores de páginas web debían definir el aspecto de
cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra una
página HTML con estilos definidos sin utilizar CSS:
Figura 3. Estilos definidos de las etiquetas HTML. Elaboración propia
10
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el
color, la tipografía y el tamaño del texto de cada elemento del documento.
El principal problema de esta forma de definir el aspecto de los elementos se puede ver
claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que
insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 páginas diferentes,
habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos,
habría que definir 1.5 millones de atributos.
Por otra parte, el diseño de los sitios web está en constante evolución y es habitual modificar
cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto.
Si se emplea la etiqueta <font>, habría que modificar el valor de 1.5 millones de atributos
para modificar el diseño general del sitio web.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
Figura 4. Aplicando estilos CSS3 a la página. Elaboración propia
1.4.2. Archivo externo CSS

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas
HTML enlazan mediante la etiqueta <link>.Un archivo de tipo CSS no es más que un archivo
simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean
necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.
En el siguiente ejemplo, se crea un archivo de texto, se cambia su nombre a estilos.css y se
incluye el siguiente contenido:
p { color: black; font-family: Verdana; }
A continuación, en la página HTML se utiliza la etiqueta <link> para enlazar el archivo CSS
externo que tiene los estilos que va a utilizar la página:
11
Figura 5. Utilizando un archivo externo css. Elaboración propia
Normalmente, la etiqueta<link>incluye cuatro atributos cuando se enlaza un archivo CSS:
 rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo
CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
 type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los
archivos CSS su valor siempre estext/css.
 href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede
ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
 media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más
adelante se explican en detalle los medios CSS y su funcionamiento.
De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha
diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de
páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a
todas las páginas que forman un sitio web.
Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo
cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las
páginas HTML que enlazan ese archivo.
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos,
también se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS
externo se muestra a continuación:
12
Figura 6. Forma alterna de integrar un archivo css. Elaboración propia
1.5. JavaScript
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas
web dinámicas.
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.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de
programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun
Microsystems, como se puede ver enhttp://www.sun.com/suntrademarks/.
1.5.1. Breve Historia
A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con
módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse las
primeras aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios
complejos.
Con unas aplicaciones web cada vez más complejas y una velocidad de navegación tan lenta,
surgió la necesidad de un lenguaje de programación que se ejecutara en el navegador del
usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le hacía
esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los
errores existentes.
Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar este
problema adaptando otras tecnologías existentes (como ScriptEase) al navegador Netscape
Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denominó a su lenguaje
LiveScript.
Posteriormente, Netscape firmó una alianza con Sun Microsystems para el desarrollo del
nuevo lenguaje de programación. Además, justo antes del lanzamiento Netscape decidió
cambiar el nombre por el de JavaScript. La razón del cambio de nombre fue exclusivamente
13
por marketing, ya que Java era la palabra de moda en el mundo informático y de Internet de la
época.
La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya
incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft
lanzó JScript con su navegador Internet Explorer3. JScript era una copia de JavaScript al que
le cambiaron el nombre para evitar problemas legales.
1.5.2. Incluir JavaScript en los documentos
La integración de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas
para incluir código JavaScript en las páginas web.
 Incluir JavaScript en el mismo documento HTML
El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del
documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la
página, se recomienda definir el código JavaScript dentro de la cabecera del documento
(dentro de la etiqueta<head>) :
Figura 7. Incluir JavaScript en el documento. Elaboración propia
Estructuras condicionales en JavaScript
En JavaScript, las estructuras condicionales que hay son dos:
 if … else: tiene 3 formas de utilizarlo (de la más simple cone el if solo, o la forma más
compleja que es con if … else if …).
 switch: utilizado cuando tenemos un número finito de posibilidades.
Estructura de control If
Esta es la estructura más sencilla del lenguaje. La palabra if (en inglés) significa si
(condicional), si tú al hacer la estructura te preguntas… «si pasa esto, hago lo siguiente…»
14
Figura 8. Estructura If JavaScript. Obtenido de (Bocache, 2018)
De esta forma siempre controlamos el flujo del programa, si no se cumple una se cumple la
otra. En este ejemplo, el valor de x = 15, por lo tanto la condición x < 10 no se cumple, por lo
que se ejecuta la instrucción contenida dentro de los paréntesis del else.
Estructura de control if…else…..if

Esta forma es la más compleja de la estructura if..else. En la estructura anterior, se controlaba
una condición y si no se cumplía, se optaba por todas las demás opciones infinitas.
A veces, dispones de más alternativas, las cuales quieres controlar y responder de diferentes
formas. En este sentido, tienes la opción de utilizar la sentencia if…else if… tantas veces
como quieras.
Figura 9. Estructura if – else -if en JavaScript. Obtenido de (Bocache, 2018)
Como podemos ver en este fragmento de código hemos cubierto todas las posibilidades,
aunque de una forma pragmática e inútil. Pero para el ejemplo, es suficiente.
Se pueden usar tantas estructuras if...else if... como sean necesarias, pero en ese caso es más
adecuado hacer servir la sentencia Switch.
Estructuras repetitivas en JavaScript
15
Los bucles ofrecen una manera rápida y sencilla de hacer algo repetidamente. Puedes pensar
en un bucle como una versión "computarizada" de un juego en el que pides a alguien dar X
pasos en una dirección y luego Y (pasos) en otra; por ejemplo, la orden "Da cinco pasos hacia
el Este" podría expresarse de la siguiente forma como bucle:
Figura 10. Estructura for en JavaScript. Obtenido de (Developer, 2019)
Hay muchas clases diferentes de bucles, pero todos ellos hacen en esencia lo mismo: repetir
una acción un número de veces (y de hecho es posible que este número sea cero). Los
diferentes bucles ofrecen también diferentes formas de determinar sus puntos de inicio y final.
Hay determinadas situaciones que se resuelven más fácilmente con un tipo de bucles que
otros.
Sentencia while
Una sentencia while ejecuta sus sentencias mientras la condición sea evaluada como
verdadera. Una sentencia while tiene el siguiente aspecto:
Si la condición cambia a falsa, la sentencia dentro del bucle deja de ejecutarse y el control
pasa a la sentencia inmediatamente después del bucle.
La condición se evalúa antes de que la sentencia contenida en el bucle sea ejecutada. Si la

condición devuelve verdadero, la sentencia se ejecuta y la condición se comprueba de nuevo.
Si la condición es evaluada como falsa, se detiene la ejecución y el control pasa a la sentencia
siguiente al while.
Para ejecutar múltiples sentencias, use un bloque de sentencias ({ ... }) para agruparlas.
1.6. Framework Angular
Según Basalo (2020) se menciona que
16
Angular en su versión 9 es la plataforma perfecta para el desarrollo profesional de
aplicaciones modernas. El Angular CLI es la herramienta adecuada para generar aplicaciones
Angular. Juntos son imbatibles en cuanto a velocidad en desarrollo y a potencia en ejecución.
El comúnmente conocido como AngularCLI o angular cli o angular-cli o CLI a secas es la
herramienta de línea de comandos estándar para crear, depurar y publicar aplicaciones
Angular. En su actual versión 9 es más potente y versátil que nunca y es muy sencillo
dominar los aspectos básicos.
1.6.1. Instalación de Angular CLI 9

Angular es una plataforma de desarrollo dogmática y llave en mano. Para empezar, como en
casi cualquier desarrollo necesitarás NodeJS y su manejador de de paquetes npm. Tenerlos
actualizados es un mandamiento básico para un desarrollador web. Comprueba tu versión con
el siguiente comando:
Empieza con una instalación global que te permita usar la herramienta desde cualquier
directorio. Comprueba la versión instalada y accede a la ayuda en línea. La ayuda está
disponible tanto de modo general como para cada comando que vayas a usar. (Bastidas, 2017)
Instrucciones para instalar Angular CLI.
Figura 11. Angular Cli 9. Obtenido de (Basalo, 2020)
1.6.2. Crear y ejecutar una aplicación Angular
Una vez que hayas instalado el CLI de manera global ya puedes empezar a usarlo en tu
directorio de trabajo. El primer comando será ng new que te va a generar toda una
aplicación funcional y las configuraciones necesarias para su depuración, pruebas y
ejecución.
Como novedad, en las últimas versiones, el CLI te preguntará por algunas opciones para crear
tu aplicación. Eso es porque no todos los desarrollos son iguales. Se puede configurar el tipo,
17
el estilo y muchas más cosas, tanto de forma interactiva como mediante opciones en línea de
comandos.
Lo más habitual es usar la configuración que viene por defecto, pero también se pueden crear
soluciones a medida. (Basalo, 2020)
Figura 12. Inicio rápido de Angular. Obtenido de (Basalo, 2020)
Una vez finalizada la instalación de todas las librerías necesarias puedes bajar a la carpeta
recién creada y ejecutar el comando standard de npm para el arranque de cualquier aplicación:
npm start. Si todo va bien, en unos segundos podrás visitar http://localhost:4000 para ver en
marcha la aplicación. Lo veremos con más detalle en el apartado de configuración.
1.6.3. Estructura de una aplicación Angular
Según (Basalo, 2020) se menciona que
Una vez generada y comprobada la ejecución, toca estudiar cómo es la estructura de la
aplicación. Para ello revisa carpeta a carpeta. Las malas noticias son que hay una enorme
cantidad de ficheros y carpetas, las buenas son que como verás, casi todo es configuración e
infraestructura.
Si eres completamente nuevo en Angular, te llamará la atención las extensiones .ts. Son para
ficheros TypeScript, una evolución del JavaScript con facilidades para el programador. Por
ahora sólo tienes que familiarizarte con estos:
 angular.json : configuración del propio CLI. La madre de todos los

configuradores
 package.json : dependencias de librerías y scripts
 src/ : la carpeta donde están los archivos fuentes
 index.html : un fichero HTML índice estándar
 main.ts : fichero TypeScript de arranque de la aplicación
 app/ : la carpeta con el código específico de tu aplicación
 app.module.ts : la aplicación es un árbol de módulos, y este es su raíz
 app.component.ts : la página es un árbol de componentes, y este es su raíz
 app.component.html : tiene una parte visual, esta es su vista
1.6.4. Ejecutar la aplicación
18
Para ver la aplicación en el navegador ejecutamos:
Usando la opción — open (o simplemente -o) nos abrirá automáticamente la aplicación en el

navegador en “http: // localhost: 4200 /”
Deberíamos ver algo como esto:
Figura 13. Ejecutar proyecto Angular. Obtenido de (Bastidas, 2017)
1.6.5. Nuestro primer componente

Ahora crearemos nuestro propio componente con la interfaz de línea de comando de angular:
Una vez que el generador finaliza las modificaciones en el directorio src dentro de app vamos
a tener una nueva carpeta que hace referencia nuestro nuevo componente.
1.6.6. Agregar un componente dentro de otro
En este paso lo que haremos es agregar el componente recién creado home.component.html al
template app.component.html. Para esto simplemente borramos lo que hay en el archivo
app.component.html y agregamos el selector app-home de la siguiente manera:
Bajo el título de nuestra aplicación debería aparecer lo que esta dentro de nuestro
componente. (Bastidas, 2017)
19
Actividades de Unidad
1. Imprima los 10 primeros valores de la serie Fibonacci: 0,1,1,2,3,5… , en consola
del navegador, empleando el lenguaje JavaScript
2. Imprima el factorial n!, de cada uno de los valores contenidos en un rango inicial
y final ingresados por el usuario, empleando el lenguaje JavaScript
Autoevaluación
 Seleccione verdadero o falso según corresponda
Enunciado Verdader Falso
o
En la cabecera de la página se introduce toda aquella
información que afectará a toda la página.
20
href indica la URL del archivo JS que contiene los scripts. La
URL indicada puede ser relativa o absoluta y puede apuntar a un
recurso interno o externo al sitio web.
JavaScript es un lenguaje de programación que se utiliza

principalmente para crear páginas web dinámicas.
Los bucles ofrecen una manera rápida y sencilla de hacer algo
repetidamente.
Para ejecutar una aplicación en Angular y desplegar el
navegador utilizamos el comando ng -g start
 Escriba un algoritmo en JavaScript que presente las tablas de multiplicar del 1 al 10,
el rango de multiplicación de cada tabla será del 1 al 12
2. Unidad 2: Programación del lado del servidor y Base de Datos
2.1. Introducción
La mayoría de los principales sitios web utilizan alguna forma de tecnología de lado servidor
para presentar dinámicamente datos cuando sean requeridos. Por ejemplo, imagina cuántos
productos están disponibles en Amazon e imagina cuántas entradas han sido escritas en
Facebook. Presentar todo esto usando páginas estáticas completamente diferentes sería
completamente ineficiente, por lo que estos sitios en lugar de ello presentan plantillas
estáticas (construidas usando HTML, CSS, y JavaScript), y actualizan dinámicamente los
datos presentados dentro de esas plantillas cuando se necesiten, ej. cuando quieres ver un
producto diferente en Amazon.
21
En el mundo moderno del desarrollo web, el aprendizaje del desarrollo de lado servidor es
altamente recomendado.
En esta unidad abordaremos el estudio del Framework Spring, para la creación de API REST
que sea consumida por Angular, emplearemos JPA e Hibernate para la persistencia de datos
con la Base de Datos.
2.2. Api Rest
Según (Guanda, 2019) se menciona que:

Desde hace ya tiempo, se escucha mucho hablar sobre APIs de comunicación estilo REST, y
de hecho están muy extendidas en los sistemas que utilizamos diariamente. Pero, ¿sabemos
exactamente lo que es REST?. En esta entrada intentaremos dar una explicación de manera
introductoria a las bases de esta arquitectura.
REST, REpresentational State Transfer, es un tipo de arquitectura de desarrollo web que se

apoya totalmente en el estándar HTTP. Fue definida en el 2000 por Roy Fielding, uno de los
padres de la especificación HTTP y un referente en la arquitectura de redes.
Hoy por hoy la mayoría de las aplicaciones que se desarrollan para servicios profesionales
disponen de una API REST para el intercambio de información entre el front y el back. Lo
que la hace tan potente es precisamente el aislamiento que proporciona entre la lógica del
back-end y cualquier cliente consumidor de éste. Esto le permite ser usada por cualquier tipo
de cliente: web, móvil, etc. Así, cualquier dispositivo/cliente que entienda de HTTP puede
hacer uso de su propia API REST de manera muy simple. Esto ha hecho que en los últimos
años este tipo de arquitectura haya ganado peso frente a otras más complejas como SOAP,
para el intercambio y manipulación de datos. (Glorieta, 2018)
2.3. Principales características de una API REST
Según (Glorieta, 2018) se asegura que:

1. Los objetos REST son manipulados a través de una URI (Uniform Resource
Identifier). Esta URI (endpoint) hace de identificador único de cada recurso del sistema
REST, por lo que no puede ser compartida por más de un recurso. La estructura básica de
una URI es la siguiente:
{protocolo}://{hostname}:{puerto}/{ruta del recurso}?{parámetros de
filtrado (opcional)}
El nombre de la URI no debe contener palabras que impliquen acciones, por lo que deben
evitarse los verbos en su construcción. Además, las URI siguen una jerarquía lógica de capas
22
que permite ordenar los recursos y englobar las distintas funcionalidades entre sí. Por
ejemplo:
http://tech.tribalyte.eu/category/apps
O bien agregando un cuerpo a la llamada REST en cualquier tipo de formato, siendo los más
usados JSON y XML.
Figura 14. Formato JSON. Obtenido de (Glorieta, 2018)
Según (Guanda, 2019) se menciona que:

2. Uso de la especificación HTTP: para el desarrollo de una API REST es necesario un
conocimiento profundo de la especificación HTTP, sobre todo en lo referente a métodos
permitidos, códigos de estado y aceptación de tipos de contenido.
Los métodos son usados para manipular los diferentes recursos que conforman la API. Los
principales métodos soportados por HTTP y por ello usados por una API REST son:
 POST: crear un recurso nuevo.

 PUT: modificar un recurso existente.
 GET: consultar información de un recurso.
 DELETE: eliminar un recurso determinado.
 PATCH: modificar solamente un atributo de un recurso.
Estos métodos junto con la URI, nos proporciona una interfaz uniforme que nos permite la
transferencia de datos en el sistema REST aplicando operaciones concretas sobre un recurso
determinado. Aunque la mayoría de las operaciones que componen una API REST podrían
llevarse a cabo mediante métodos GET y POST, el abuso de ellos para operaciones que nada
tienen que ver con el propósito con el que se concibieron, puede provocar un mal uso del
protocolo alejado del estándar o la construcción de URIs con nomenclatura errónea mediante
el uso de verbos.
Cuando se realiza una petición determinada, es de vital importancia conocer si dicha

operación se ha llevado a cabo de manera satisfactoria o por el contrario se ha producido
algún tipo de error. Para ello HTTP dispone de un amplio número de códigos de error/éxito
Las más comunes son:
 200 OK. Respuesta estándar para peticiones correctas.
23
 201 Created. La petición ha sido completada y ha resultado en la creación de un nuevo
recurso.
 202 Accepted. La petición ha sido aceptada para procesamiento, pero este no ha sido
completado.
 400 Bad Request. La solicitud contiene sintaxis errónea.
 403 Forbidden. La solicitud fue legal, pero el servidor rehúsa responder dado que el
cliente no tiene los privilegios para hacerla.
 404 Not Found. Recurso no encontrado. Se utiliza cuando el servidor web no encuentra
la página o recurso solicitado.
 500 Internal Server Error. Es un código comúnmente emitido por aplicaciones
empotradas en servidores web, cuando se encuentran con situaciones de error ajenas a la
naturaleza del servidor web.
A continuación, se muestra un ejemplo completo de la ejecución de una petición REST
mediante una URI con parámetros de entrada y un cuerpo para el filtrado de datos. Como
puede observarse también obtenemos el resultado de la consulta en formato JSON. La
petición ha sido llevada a cabo de manera satisfactoria, por lo que recibimos un código “200
OK”. (Glorieta, 2018)
Figura 15. Petición Realizada. Obtenido de (Glorieta, 2018)
2.4. Framework Sprng Boot
Según Agudelo (2018) se manifiesta que:

Spring Boot, publicado en 2012, es una solución para el Framework Spring de Java que sigue
el principio de “convención sobre configuración” y reduce la complejidad del desarrollo de
nuevos proyectos basados en Spring. Para ello, Spring Boot proporciona la estructura básica
configurada del proyecto, que incluye las pautas para usar el marco y todas las bibliotecas de
terceros relevantes para la aplicación, lo que nos allana el camino para comenzar a
desarrollarla lo más rápidamente posible. De esta manera se simplifica mucho la creación de
aplicaciones independientes y reproducibles, por lo que la mayoría de las nuevas aplicaciones
basadas en Spring se desarrollan con Spring Boot.
24
Las características de Spring Boot pueden resumirse de la siguiente manera:
 Incorporación directa de aplicaciones de servidores web/contenedores como Apache

Tomcat o Jetty, eliminando la necesidad de incluir archivos WAR (Web Application
Archive)
 Simplificación de la configuración de Maven gracias a los POM (Project Object
Models) “starter”
 Configuración automática de Spring en la medida de lo posible
 Características no funcionales, como métricas o configuraciones externalizadas.
(Gonzáles 2018)
2.4.1. Creando el proyecto
De acuerdo a Gonzáles (2018) se manifiesta que:

En primer lugar, creamos un proyecto maven. Para indicar que queremos utilizar Spring Web
con Spring Boot, añadimos lo siguiente al fichero pom.xml:
Figura 16. Dependencias Iniciales. Obtenido de (Gonzáles, 2018)
De este modo, el proyecto que acabamos de crear extiende del proyecto padre spring-boot-
starter-parent, e incluye las dependencias agrupadas en el starter spring-boot-starter-web.
Un starter es un conjunto de dependencias que nos ayudan a cubrir las necesidades de un
tipo de proyecto concreto. Por ejemplo, el starter que estamos utilizando sirve para cubrir las
necesidades de un proyecto web. Más adelante utilizaremos otros starters, entre ellos el que
nos ayuda a integrar MyBatis en la aplicación.
Podemos definir en qué versión de Java desarrollaremos nuestra aplicación, añadiendo lo

siguiente al fichero pom.xml:
Figura 17. Especificando versión de Java. Obtenido de (Gonzáles, 2018)
25
En este caso, la versión que vamos a emplear será la 1.8. Otra cosa importante es la definición
de una buena estructura de paquetes. Un buen ejemplo puede ser el siguiente:
Figura 18. Estructura del Proyecto. Obtenido de (Gonzáles, 2018)
Esta estructura de paquetes agrupa las clases en cuatro paquetes principales: mapper para la
capa de acceso a datos, repository para la capa de repositorio, service para la capa de servicio,
y web para la capa controlador.
No hay que seguir este ejemplo al pie de la letra ni mucho menos, es más, puede que la
estructura de paquetes de otros proyectos sea muy distinta pero totalmente válida
2.4.2. Definiendo la clase principal

Toda aplicación en java debe contener una clase principal con un método main. Dicho
método, en caso de implementar una aplicación con Spring, deberá llamar al método run de
la clase SpringApplication. A continuación, definimos de una forma muy fácil la clase
principal de nuestra aplicación.
Figura 19. Configuración Inicial. Obtenido de (Gonzáles, 2018)
La etiqueta @Configuration, indica que la clase en la que se encuentra contiene la

configuración principal del proyecto.
26
La anotación @EnableAutoConfiguration indica que se aplicará la configuración
automática del starter que hemos utilizado. Solo debe añadirse en un sitio, y es muy frecuente
situarla en la clase main.
En tercer lugar, la etiqueta @ComponentScan, ayuda a localizar elementos etiquetados con

otras anotaciones cuando sean necesarios.
Para no llenar nuestra clase de anotaciones, podemos sustituir las etiquetas @Configuration,
@EnableAutoConfiguration y @ComponentScan por @SpringBootApplication, que
engloba al resto.
Figura 20. Configuración Inicial Óptima. Obtenido de (Gonzáles, 2018)
2.4.3. Spring Data
Según (Agudelo, 2018) se manifiesta que:
Spring Data es un modelo de programación basado en Spring para el acceso a datos. Reduce
la cantidad de código necesario para trabajar con bases de datos y almacenes de datos. Se
compone de varios módulos. Spring Data JPA simplifica el desarrollo de aplicaciones Spring
que utilizan la tecnología JPA.
Con Spring Data, definimos una interfaz de repositorio para cada entidad de dominio en la
aplicación. Un repositorio contiene métodos para realizar operaciones CRUD, ordenar y
paginar datos. @Repository es una anotación de marcador, que indica que la interfaz
subyacente es un repositorio. Un repositorio se crea mediante la extensión de las interfaces de
repositorio específicos, tales como CrudRepository, PagingAndSortingRepository,
o JpaRepository.
Spring Data tiene una integración avanzada con los controladores Spring MVC y proporciona
derivación de consultas dinámicas a partir de nombres de métodos de repositorio.
2.4.4. Configuración de la base de Datos
Según (Agudelo, 2018) se manifiesta que:
27
se deben agregar las properties de la base de datos en el archivo “aplication.properties” que es
un archivo donde el Spring relaciona el proyecto con la base de datos. Una vez agregado los
properties el archivo debería lucir de la siguiente forma:
Figura 21. Archivo de configuración de la Base de Datos. Obtenido de (Agudelo, 2018)
En este caso se esta trabajando con una base de datos MYSQL. Una vez hecho esto podrás
comenzar a desarrollar con estas dos herramientas.
2.4.5. Creando una REST

De acuerdo a Gonzáles (2018) se manifiesta que:
A continuación, mostraremos el código de la clase User, que será mi modelo a ser mapeado
con JPA
28
Figura 22. Clase a ser mapeada. Obtenido de (Agudelo, 2018)
A continuación, codificaremos el controlador que tiene como objetivo principal conectar el

backend con las solicitudes que se hagan desde afuera de la aplicación(sistemas web, unirest,
entre otros)
29
Figura 23. Controlador. Obtenido de (Agudelo, 2018)
El service tiene las interfaces donde se declaran los métodos que contienen la lógica.
Figura 24. Interface Servicio. Obtenido de (Agudelo, 2018)
30
El service.impl Tiene las clases donde se aplica la lógica.
Figura 25. Implementación del Servicio. Obtenido de (Agudelo, 2018)
El repository contiene la interfaz que extienden de JPA para que estas clases se conecten a la
base de datos. Estas gestionan información ya sea de buscar, borrar, actualizar o crear un
registro en la base de datos.
31
Después de haber realizado esta serie de pasos solo resta enviar un archivo json al controlador
donde se indiquen los datos del usuario. Esto lo puedes hacer ya sea desde postman o desde un
servicio.
La url a la que se debe hacer la solicitud debe ser:

http://localhost:8080/user/saveUser
El objeto JSON que se enviara debe lucir así:
Si se han seguido los pasos correctamente. Este procedimiento debe guardar un registro en la
base de datos.
32
1. Indique el código para crear una Relacion OnetoOne de Persona con Signo
Zodiacal, empleando anotaciones de JPA
2. Cree las interfaces y clases necesarias para crear una simple API REST, de un
método que va a devolver una Persona según su correo, empleando la lógica de un
proyecto en Spring Boot
33
Autoevaluación
o
REST, Representational State Transfer, es un tipo de arquitectura de
desarrollo web que se apoya totalmente en el estándar HTTP
301 Created. La petición ha sido completada y ha resultado en la
creación de un nuevo recurso.
Un starter es un conjunto de dependencias que nos ayudan a
cubrir las necesidades de un tipo de proyecto concreto.
La anotación @EnableAutoConfiguration indica que se aplicará
la configuración automática del starter que hemos utilizado. Solo
debe añadirse en un sitio, y es muy frecuente situarla en el
método constructor de la clase
Spring Data es un modelo de programación basado en Spring
para el acceso a datos. Reduce la cantidad de código necesario
para trabajar con bases de datos y almacenes de datos
 Escriba la estructura de un Objeto JSON, de la clase Persona, coloque 10 atributos
34
3. Unidad 3: Gestores de contenidos
3.1. Introducción
Hoy en día crear una página web resulta mucho más sencillo que hace unos años atrás,
además de cómodo y económico. Todo esto ha sido posible gracias a la aparición de los
denominados gestores de contenido o CMS, los cuales permiten crear contenido online sin la
necesidad de contar con conocimientos avanzados de programación.
Un sistema de gestión de contenidos o CMS (Content Manager System) es un programa o
aplicación web que permite la creación de una estructura de soporte para la creación,
administración y publicación de contenido en una página web por parte de administradores,
editores y otros usuarios. (Bartolome, 2018)
En esta unidad abordaremos tres de los gestores de contenidos mas utilizados en el mundo, los
cuales son WordPress, Drupal y Joomla
3.2. Software Xampp
Según Bartolome (2018) se manifiesta que:
Es un servidor independiente de plataforma, software libre, que consiste principalmente en la
base de datos MySQL, el servidor Web Apache y los intérpretes para lenguajes
de script: PHP y Perl. El nombre proviene del acrónimo de X (para cualquiera de los diferentes
sistemas operativos), Apache, MySQL, PHP, Perl. El programa está liberado bajo la licencia
GNU y actúa como un servidor Web libre, fácil de usar y capaz de interpretar páginas
dinámicas. Actualmente XAMPP esta disponible para Microsoft Windows, GNU/Linux, Solaris,
y MacOS X.
3.2.1. Características y Requisitos

Según Ionos (2020) se indica lo siguiente:
XAMPP solamente requiere descargar y ejecutar un archivo .zip, .tar, o .exe, con unas
pequeñas configuraciones en alguno de sus componentes que el servidor Web necesitará.
XAMPP se actualiza regularmente para incorporar las últimas versiones de
Apache/MySQL/PHP y Perl. También incluye otros módulos como OpenSSL y phpMyAdmin.
Para instalar XAMPP se requiere solamente una pequeña fracción del tiempo necesario para
descargar y configurar los programas por separado.
3.2.2. Aplicaciones
Oficialmente, los diseñadores de XAMPP sólo pretendían su uso como una herramienta de
desarrollo, para permitir a los diseñadores de sitios webs y programadores testear su trabajo
en sus propios ordenadores sin ningún acceso a Internet. En la práctica, sin embargo, XAMPP
es utilizado actualmente para servidor de sitios Web y, con algunas modificaciones, es
generalmente lo suficientemente seguro para serlo. Con el paquete se incluye una herramienta
especial para proteger fácilmente las partes más importantes. (Ionos, 2020)
35
3.2.3. Instalación
Según Bartolome (2020) se manifiesta lo siguiente:
Antes de instalar un servidor de páginas web es conveniente comprobar si no hay ya uno
instalado, o al menos si no está en funcionamiento. Para ello, es suficiente con abrir el
navegador y escribir la dirección http://localhost. Si se obtiene un mensaje de error es que no
hay ningún servidor de páginas web en funcionamiento (aunque podría haber algún servidor
instalado, pero no estar en funcionamiento).
Figura 25. Comprobando si existe servidor en puerto 80. Obtenido de (Bartolome, 2018)
Una vez obtenido el archivo de instalación de XAMPP, hay que hacer doble clic sobre él para
ponerlo en marcha. Al poner en marcha el instalador XAMPP nos muestra un aviso que
aparece si está activado el Control de Cuentas de Usuario y recuerda que algunos directorios
tienen permisos restringidos:
Figura 26. Instalación de Xampp. Obtenido de (Bartolome, 2018)
Los componentes mínimos que instala XAMPP son el servidor Apache y el lenguaje PHP,
pero XAMPP también instala otros elementos. En la pantalla de selección de componentes
puede elegir la instalación o no de estos componentes. Para seguir estos apuntes se necesita al
menos instalar MySQL y phpMyAdmin.
36
En la página Ecured (2020) se indica lo siguiente:

En la siguiente pantalla puede elegir la carpeta de instalación de XAMPP. La carpeta de
instalación predeterminada es C:\xampp. Si quiere cambiarla, haga clic en el icono de carpeta
y seleccione la carpeta donde quiere instalar XAMPP. Para continuar la configuración de la
instalación, haga clic en el botón "Next".
La siguiente pantalla ofrece información sobre los instaladores de aplicaciones para XAMPP
creados por Bitnami. Haga clic en el botón "Next" para continuar. Si deja marcada la casilla,
se abrirá una página web de Bitnami en el navegador.
37
Durante la instalación, si en el ordenador no se había instalado Apache anteriormente, en

algún momento se mostrará un aviso del cortafuegos de Windows para autorizar a Apache a
comunicarse en las redes privadas o públicas. Una vez elegidas las opciones deseadas (en
estos apuntes se recomienda permitir las redes privadas y denegar las redes públicas), haga
clic en el botón "Permitir acceso".
Una vez terminada la copia de archivos, la pantalla final confirma que XAMPP ha sido
instalado. Si se deja marcada la casilla, se abrirá el panel de control de XAMPP. Para cerrar el
programa de instalación, haga clic en el botón "Finish".
3.2.4. El panel de control
El panel de control de XAMPP se divide en tres zonas:
la zona de módulos, que indica para cada uno de los módulos de XAMPP: si está instalado
como servicio, su nombre, el identificador de proceso, el puerto utilizado e incluye unos
botones para iniciar y detener los procesos, administrarlos, editar los archivos de
configuración y abrir los archivos de registro de actividad.
38
la zona de notificación, en la que XAMPP informa del éxito o fracaso de las acciones
realizadas
la zona de utilidades, para acceder rápidamente
Figura 31. Panel de control de Xampp. Obtenido de (Bartolome, 2018)
Se pueden abrir varios paneles de control simultáneamente y cualquiera de ellos puede iniciar
o detener los servidores, pero no es aconsejable hacerlo ya que puede dar lugar a confusiones
(por ejemplo, al detener un servidor desde un panel de control los otros paneles de control
interpretan la detención como un fallo inesperado y muestran un mensaje de error).
3.2.5. Iniciar servidores
Para poner en funcionamiento Apache (u otro servidor), hay que hacer clic en el botón "Start"
correspondiente:
Figura 32. Panel de control de Xampp. Obtenido de (Bartolome, 2018)
Si el arranque de Apache tiene éxito, el panel de control mostrará el nombre del módulo con
fondo verde, su identificador de proceso, los puertos abiertos (http y https), el botón "Start" se
convertirá en un botón "Stop" y en la zona de notificación se verá el resultado de las
operaciones realizadas.
39
Figura 33. Ejecución de Xampp. Obtenido de (Bartolome, 2018)
Si se ha iniciado el servidor Apache, para comprobar que todo funciona correctamente, hay
que escribir en el navegador la dirección http://localhost. XAMPP abrirá el nuevo panel de
administración web (dashboard), que todavía se encuentra en desarrollo:
Figura 33. Pagina principal de Xampp. Obtenido de (Bartolome, 2018)
3.3. WordPress
WordPress es un sistema de gestión de contenidos (CMS) que permite crear y mantener un
blog u otro tipo de web. Con casi 10 años de existencia y más de un millar de temas
(plantillas) disponibles en su web oficial, no es solo un sistema sencillo e intuitivo para crear
un blog personal, sino que permite realizar toda clase de web más complejas.
WordPress dispone de un sistema de plugins, que permiten extender las capacidades de WordPress, de
esa forma se consigue un CMS más flexible. (WebEmpresa, 2020)
3.3.1. Instalación
Según Alonso (2020) se manifiesta que:
Una vez que tiene su servidor arrancado y una base de datos creada, va a ver que instalar
WordPress en local es muy sencillo
 Lo primero que debe hacer es descargar el fichero .zip con la última versión de
WordPress desde la página oficial de WordPress.
40
Figura 34. Instalación de WordPress. Obtenido de (Alonso, 2020)
Mueva este fichero a la carpeta C:\xampp\htdocs\ que es la carpeta de XAMPP que hace de
servidor local.
 Tiene que descomprimir el fichero para que extraiga el contenido directamente en C:\
xampp\htdocs\.
Así se creará una carpeta nueva llamada «wordpress» que contiene todo lo necesario
para instalar tu WordPress desde cero.
 Ahora ya puede entrar en http://localhost/wordpress/ desde tu navegador (que sería

la carpeta «wordpress» que acabas de crear).
Automáticamente te llevará a la pantalla de bienvenida para empezar la instalación y
configuración de WordPress desde cero.
Haz clic en el botón ¡Vamos a ello! (WebEmpresa,2020)
41
 En la pantalla siguiente se tiene que ingresar la información de la base de datos. Se

debe tener en cuenta las credenciales de acceso a la base de datos
 Si la configuración de la base de datos ha ido bien verás un mensaje como éste. Ahora
haz clic en Ejecutar la instalación.
42
 Aquí se tiene que rellenar los datos para la instalación de WordPress, como el título de
tu nuevo sitio, el nombre del usuario que quieres crear para administrarlo, su
password, etc.
43
 Si todo ha ido bien verás un mensaje como éste en el que te avisa de que WordPress se
ha instalado correctamente. Ahora puedes hacer clic en el botón Acceder para ir a la
ventana de login de tu WordPress.
 Usa el nombre de usuario y la contraseña que elegiste antes. Haz clic en el
botón Acceder y entrarás al escritorio de tu nuevo WordPress.
 Y entrando desde http://localhost/wordpress/ podrás ver cómo queda tu sitio.
(Alonso, 2020)
3.4. Drupal
44
Según Braojos (2019) se manifiesta que:
Es un excelente CMS, o sistema de gestión de contenidos que es sumamente potente y

flexible, que actualmente es utilizado por miles de páginas web en todo el mundo. Esta
plataforma es perfecta para que los usuarios desarrollen una página web dinámica con miles
de diversas funciones.
La potencialidad de este gestor de contenidos, que es Drupal en español, es que cuenta con
una tecnología avanzada para crear todo tipo de páginas web. Como desarrollador, tendrás
miles de opciones para gestionar tu sitio de una forma muy fácil y rápida. Drupal combina
correctamente los módulos para que desarrolles un blog, una tienda virtual, una página
educativa, todo dependerá de tu imaginación.
Muchas de las ventajas, en comparación con otros CMS, es que ofrece versatilidad para los
desarrolladores al momento de crear las paginas web, por otra parte, es más fácil la utilización
de la plataforma y permite personalizar mejor tu pagina web.
3.4.1. Características de Drupal

Dentro de las características de Drupal podemos encontrar:
 Flexibilidad: esto es algo que destaca en Drupal a diferencia de otras plataformas. La

flexibilidad tiene que ver con la posibilidad que te ofrece Drupal en comparación con otros
gestores de contenido para llevar a cabo el desarrollo de cualquier tipo de proyecto web.
Puedes dejar volar tu imaginación a través de dineros intuitivos, presumiendo de un sitio
con potencia con la posibilidad de tener cualquier tipo de diseño en tu sitio.
 Ahorro económico: para que puedas disfrutar de todos los beneficios de la mejor
herramienta, que es un CMS Drupal, no tendrás que invertir dinero alguno ya que es una
plataforma que puedes utilizar totalmente gratis. No hay pagos extra para utilizar ninguna
herramienta ni tampoco necesitas depender de ningún proveedor y esto garantizará el éxito
de tu proyecto ya que no deberás hacer ninguna inversión.
 Apoyo de la comunidad de desarrolladores: una de las mayores ventajas de Drupal es que
cuenta con una gran comunidad de otros creadores que todos los días trabajan en el
desarrollo de nuevos contenidos como módulos y funciones para mejorar la experiencia
entre los usuarios. Gracias a esto, es posible solventar cualquier problema, falla o duda,
simplemente con buscar una solución a través de Google.
 Mayor rendimiento: Drupal cuenta con un sistema de caché, que se mantiene en constante
actualización que es sumamente eficiente. Luego de realizado tu página web, puedes
activar el caché y comienza a disfrutar de todas las oportunidades que te ofrece esta
plataforma.
 Compatibilidad con SEO y redes sociales: actualmente, el posicionamiento SEO es un
factor clave para convertir una página web corriente en una sumamente exitosa. Con
Drupal, sirve perfectamente para generar URLs con base a cada contenido. También
podrás conectar tu web con los perfiles de tus redes sociales, además de los módulos que
permitirán integrar otro tipo de aplicaciones y todo de forma optimizada. (Braojos, 2019)
45
 Diseño eficiente: teniendo siempre la versión actualizada de Drupal podrás tener una
correcta visualización de tu página web en cualquier dispositivo electrónico, además de
que se reduce el tiempo de espera de carga y evita la duplicidad de contenido.
3.4.2. Instalación de Drupal

La instalación de Drupal es similar a la de WordPress, primeramente, debe irse a la página
oficial https://www.drupal.org/download y descargar la última versión estable, por lo
general se descarga un archivo comprimido .rar o .zip, este archivo debe descomprimirlo en la
carpeta htdocs del Xampp, seguidamente ejecuta los servicios del Xampp y se dirige al
navegador para colocar la url localhost/nombreCarpetaDescomprimida, luego debe seguir los
pasos que le pide el instalador y listo.
Figura 41. . Instalación finalizada de Drupal. Obtenido de (Braojos, 2019)
3.5. Joomla
Según el Instituto de Tecnologías Educativa (2019) se asegura que:
Joomla es una de las aplicaciones de código abierto mas premiadas del mundo y sirve de
sistema de gestión de contenido (CMS) para más del 3% del total mundial de sitios web.
Debido a su estructura flexible y adaptable, no existen límites en lo que puedes llegar a hacer
con Joomla. Es por esta razón que se convierte en la solución perfecta para sitios web de
pequeñas, medianas y grandes empresas. Lo que diferencia a Joomla de sus competidores es
la dedicación para dejar que todo sea lo más simple posible y entregar la mayor cantidad de
caracteristicas al usuario. Joomla entrega las herramientas necesarias a todos los usuarios para
poder construir sus sitios web y corree sus aplicaciones en linea.
3.5.1. Características generales

El proceso de instalación y mantenimiento de Joomla! es sencillo, la seguridad en su código
está garantizada por la gran cantidad de desarrolladores que trabajan de forma conjunta para
que sea un producto seguro y estable; lo que favorece la ampliación de sus características y
con una interfaz amigable para el usuario.
46
Con Joomla! CMS sólo debes ocuparte de la información que desees publicar, ya que el
sistema gestionará todos los demás detalles técnicos y administrativos:
 Sistema de Administración sencillo y avanzado: con una interfaz de administración

clara y concreta que le permitirá gestionar todos los aspectos fundamentales clave de
un sitio web y sus contenidos.
 Organización del sitio web: Joomla! está preparado para organizar eficientemente los
contenidos de su sitio en secciones y categorías, lo que facilita la navegabilidad para
los usuarios y permite crear una estructura sólida, ordenada y sencilla para los
administradores. Desde el panel administrador de Joomla! usted podrá crear, editar y
borrar las secciones y categorías de su sitio de la manera en que más le convenga.
 Publicación de contenidos: con Joomla! CMS podrá crear páginas ilimitadas y
editarlas desde un sencillo editor, basado en WYSIWYG*, que permite formatear los
textos con los estilos e imágenes deseados. Los contenidos son totalmente editables y
modificables.
 Escalabilidad e implementación de nuevas funcionalidades: Joomla! ofrece la
posibilidad de instalar, desinstalar y administrar componentes y módulos, que
agregarán servicios de valor a los visitantes de su sitio web, por ejemplo: galerías de
imágenes, foros, newsletters, clasificados, etc.
 Internacionalización: la interfaz de Joomla! se encuentra traducida a muy diversos
idiomas.
 Administración de usuarios: Joomla! permite almacenar datos de usuarios registrados
y también la posibilidad de enviar e-mails masivos a todos los usuarios. La
administración de usuarios es jerárquica, pues los distintos grupos de usuarios poseen
diferentes niveles de permisos dentro de la gestión y administración del sitio.
 Diseño y aspecto estético del sitio: es posible cambiar todo el aspecto del sitio web tan
solo con un par de clics, gracias al sistema gestor de plantillas (templates) que utiliza
Joomla!
 Navegación y menús: la administración de los menús permite tomar decisiones rápidas
y sencillas sobre la navegación que queremos en nuestro sitio web.
 Administrador de archivos multimedia: Joomla! posee una utilidad para subir
imágenes, videos, archivos de sonido, al servidor para ser usados en todo el sitio.
 Disposición de módulos modificable: en un sitio creado con Joomla!, la posición de
módulos puede acomodarse como se prefiera.
 Encuestas: Joomla! posee un sistema de votaciones y encuestas dinámicas con
resultados en barras porcentuales.
 Feed de Noticias: Joomla! trae incorporado un sistema de sindicación de noticias por
RSS de generación automática.
 Publicidad: es posible hacer publicidad en el sitio usando el Administrador de
Banners.
 Estadísticas de visitas: con información de navegador, sistema operativo y detalles de
los documentos (páginas) más vistos. (Instituto de Tecnologías Educativa, 2019)
47
3.5.2. Características de publicación de páginas web en Joomla:
 Automatización en la publicación: las páginas y documentos de Joomla! pueden

programarse con fecha de publicación y fecha de caducidad. Es decir, un documento
puede programarse para que se publique automáticamente al llegar una determinada
fecha, y luego despublicarse también de forma automática en otra fecha.
 Archivo e historial: las páginas viejas o publicaciones que hayan perdido vigencia
pueden enviarse a un "archivo" de almacenamiento, sin necesidad de tener que
borrarlas. Esto permite también dar la posibilidad a los navegantes de consultar
artículos viejos o documentos anteriores en un historial.
 Formatos de lectura: cada documento es generado automáticamente por Joomla! en
formato PDF, en versión imprimible, y en XML.
 Envío por correo electrónico: los usuarios del sitio Joomla! podrán enviar
automáticamente a un amigo por correo electrónico cada documento publicado.
 Valoración de contenidos: los visitantes del sitio podrán votar la calidad de lo
publicado.
 Comentarios: (opcional) los usuarios podrán comentar sus opiniones o expresar sus
inquietudes en la misma página de contenidos. (Instituto de Tecnologías Educativa,
2019)
3.5.3. Instalación de Joomla

La instalación de Joomla es similar a la de WordPress, primeramente, debe irse a la página
oficial https://downloads.joomla.org/es/ y descargar la última versión estable, por lo general
se descarga un archivo comprimido .rar o .zip, este archivo debe descomprimirlo en la carpeta
htdocs del Xampp, seguidamente ejecuta los servicios del Xampp y se dirige al navegador
para colocar la url localhost/nombreCarpetaDescomprimida, luego debe seguir los pasos que
le pide el instalador y listo.
48
Figura 42. Instalación finalizada de Joomla. Obtenido de (Instituto de Tecnologías Educativa, 2019)
1. Realice un cuadro comparativo de las ventajas y desventajas de los diferentes CMS,
vistos en esta unidad
Autoevaluación
o
Un sistema de gestión de contenidos o CMS (Content Manager
System) es un programa o aplicación web que permite la creación de
una estructura de soporte para la creación, administración y
publicación de contenido en una página web
Un CMS no permite acceder a su núcleo para codificar procesos más

personalizados
Xampp es la única herramienta, donde se puede probar y desplegar un
CMS
Por defecto el puerto en el que se despliega el Servidor Apache, es el
8080
El CMS Joomla soporta código Java
Drupal es un CMS de paga para el lenguaje de programación Php
WordPress tiene un sitio web que permite crear blogs y páginas web
de forma rápida.
Se puede trabajar con la base de datos PostgreSql en Drupal,
WordPress y Joomla
WordPress tiene plantillas únicamente de paga
Los CMS permiten crear páginas web sencillas y profesionales en le
menor tiempo posible
49
4. Unidad 4: Seguridad y Modo Producción
4.1. Introducción
En esta unidad abordaremos principios sobre la seguridad informática, la cual consiste en

asegurar que el sistema de información se mantenga de una manera correcta y se utilice de la
manera que se decidió y controlar el acceso a la información restringiéndose a todo aquello
que carezca de autorización
La seguridad informática tiene técnicas o herramientas llamados mecanismos que se utilizan
para fortalecer la confidencialidad, la integridad y/o la disponibilidad de un
sistema informático.
También veremos una pequeña guía de cómo poner nuestros sistemas informáticos realizados
en Spring y Angular en producción, es decir subidos a internet completamente funcionales
para los usuarios finales.
4.2. Generalidades de la seguridad web
Según (Sistemas Informacion Site, 2016) se afirma que:
Cuando hablamos de seguridad de la información estamos indicando que dicha información

tiene una relevancia especial en un contexto determinado y que, por tanto, hay que proteger.
La Seguridad de la Información se puede definir como conjunto de medidas técnicas,

organizativas y legales que permiten a la organización asegurar la confidencialidad, integridad
y disponibilidad de su sistema de información.
Hasta la aparición y difusión del uso de los sistemas informáticos, toda la información de
interés de una organización se guardaba en papel y se almacenaba en grandes cantidades de
abultados archivadores. Datos de los clientes o proveedores de la organización, o de los
empleados quedaban registrados en papel, con todos los problemas que luego acarreaba su
almacenaje, transporte, acceso y procesado.
Existen también diferentes definiciones del término Seguridad Informática. De ellas nos
quedamos con la definición ofrecida por el estándar para la seguridad de la información
ISO/IEC 27001, que fue aprobado y publicado en octubre de 2005 por la International
Organization for Standardization (ISO) y por la comisión International Electrotechnical
Commission (IEC).“La seguridad informática consiste en la implantación de un conjunto de
medidas técnicas destinadas a preservar la confidencialidad, la integridad y la disponibilidad
de la información, pudiendo, además, abarcar otras propiedades, como la autenticidad, la
responsabilidad, la fiabilidad y el no repudio.” (Tecnologias Informacion, 2018)
50
4.2.1. Seguridad en los Sistemas de Información: Los tres grandes
Según (Tecnologias Informacion, 2018) se manifiesta lo siguiente:
Esta triada está conformada por los conceptos de Confidencialidad, Integridad y

Disponibilidad; curiosamente CIA, por sus siglas en inglés.
 Confidencialidad
Desde las grandes empresas hasta las personas tienen información y contenidos que no
desean compartir con cualquiera. Es necesario que los sistemas de seguridad rechacen a
quienes no deberían ver estos contenidos. Es la clave de la confidencialidad.
Por ejemplo, hay una ley federal que indica que la información de los estudiantes en las
universidades debe estar restringida. Así que solo el personal autorizado debería poder
acceder a los registros de calificaciones.
 Integridad
Es la garantía de que la información a la que se accede no se ha alterado y que lo que allí
se lee es exactamente lo que se pretende. Lo que la integridad nos sugiere es que la
información a la que accedemos es verdaderamente confiable, que podemos aceptarla
como un hecho. Pero sabemos que la información puede perder su integridad con la
intervención maliciosa. Por ejemplo, cuando un pirata informático ingresa al sistema de
una universidad y cambia las calificaciones a conveniencia.
Sin embargo, la integridad también se puede perder de manera involuntaria. Un ejemplo
de esto es cuando alguien autorizado por error borra o cambia algún archivo de la
información, o cuando por una falla de energía, la computadora corrompe un archivo, y
así sucesivamente
 Disponibilidad
Esta tercera parte de la triada de la CIA se refiere a la posibilidad de que alguien
autorizado pueda acceder sin problema a la información y si es necesario, modificarla.
Esto, durante un plazo de tiempo adecuado, que se define de acuerdo al tipo de trabajo. Un
operador de acciones debe recibir la información de inmediato, mientras que un vendedor
de inmuebles puede esperar al día siguiente para ver cómo cerraron las ventas del día.
En términos de disponibilidad, el gigante Amazon es un excelente ejemplo, ya que debe
estar disponible los 365 días del año sin fallas. Algunos sitios web de empresas, sin
embargo, pueden permitirse entrar en mantenimiento por unos días o algo por el estilo.
4.2.2. Herramientas para la seguridad de la información
51
Existen múltiples herramientas a disposición. Cada empresa puede elegir las herramientas que
necesite a su gusto para que formen parte de su política general de seguridad. Compartimos
algunas de estas herramientas a continuación.
En (Sistemas Informacion Site, 2016) se manifiesta que:

 Autenticación
La forma de identificar a alguien que está sentado detrás de una computadora o de un cajero
automático (es decir, alguien que no podemos ver), es con una herramienta de autenticación.
Se puede lograr identificar a alguien con autenticación a través de tres o más factores: algo
que la persona sabe, lo que tiene o lo que es. Esto se refleja actualmente en la forma más
común de autenticación, el usuario y la contraseña. En ese caso la persona accede a la
información una vez que demuestra algo que sabe (la contraseña).
Ahora la autenticación por algo que la persona tiene escala a un nivel más complejo, pues la
información se obtiene a partir de un objeto, sea una llave o una tarjeta. Si ese elemento de
identificación es robado, las barreras de seguridad se traspasan fácilmente.
Pero respecto al último factor, algo que la persona es, implica la autenticación a partir de una
característica física de la persona, por ejemplo, un escáner ocular o una huella digital, así que
es mucho más difícil de comprometer.
Si lo que quieres es saber cuál es la forma más segura de autenticar a un usuario, diremos que
es usar un sistema multifactor. Es decir, es necesario combinar dos o más de los factores
mencionados anteriormente. Un farsante tal vez pueda saltarse una barrera de seguridad, pero
dos o más es mucho más complicado.
Así funciona por ejemplo la herramienta token RSA SecurID, que generará un nuevo código
de acceso cada sesenta segundos. Así que la única forma de autenticarse en este sistema es
aportar algo que la persona sabe (un PIN de 4 dígitos) y teniendo el dispositivo RSA en la
mano para el código.
 Control de acceso
Luego de la autenticación viene el control de acceso, que se asegura de que solo las personas
adecuadas o autorizadas puedan ver, modificar, agregar y/o eliminar la información. Existen
varios modelos diferentes de control de acceso. Aquí analizaremos dos: la lista de control de
acceso (ACL) y el control de acceso basado en roles (RBAC).
Las listas de control de acceso son muy útiles en las empresas. A cada usuario, el
administrador le asigna capacidades específicas: leer, editar, eliminar, agregar, etc. Así que
solo los usuarios con esas capacidades en concreto pueden ejercer las funciones. Y si alguien
no está en la lista ni siquiera sabe que existe. (Tecnologias Informacion, 2018)
Este sistema de listas es fácil de entender y mantener, pero cada recurso de información se
administra por separado. Eso significa que eliminar un usuario o un conjunto de recursos de
información es bastante difícil. Y mantener esta herramienta cuando se unen cada vez más
usuarios se hace más complicado. Por eso existe el control de acceso basado en roles o
52
RBAC. En este caso a los usuarios se les asignan roles y a esos roles se les otorga el acceso.
Esto permite a los administradores administrar usuarios y roles por separado, simplificando la
administración y mejorando la seguridad.
 Cifrado
En (Sistemas Informacion Site, 2016) se afirma que:
Cuando una organización o empresa necesita trasmitir datos a través de internet o por medios
externos como un CD o una unidad flash, entra en juego el cifrado. En estos casos es probable
que una persona ajena tenga acceso a pesar de la autenticación y el control de usuario. Así que
el cifrado funciona como un proceso de codificación de datos en su transmisión o
almacenamiento para que solo las personas autorizadas puedan leerlo.
Se logra la codificación a través de programas de computación que codifican el texto plano
que necesita ser trasmitido. Entonces el destinatario recibe el texto cifrado y lo decodifica
(descifrado), y para que así sea, remitente y destinatario deben haber acordado un método de
decodificación. Ambas partes comparten la clave y a esta estrategia se le conoce
como cifrado de clave simétrica. Pero tiene sus complicaciones, ya que la clave está
disponible en dos lugares al mismo tiempo.
Sin embargo, una buena opción es el cifrado de clave pública. En este sistema se utilizan dos
claves: una pública y una privada. Para enviar un mensaje cifrado, obtiene la clave pública,
codifica el mensaje y lo envía. El destinatario al recibirlo usa la clave privada y lo decodifica.
Así, múltiples usuarios con la clave pública pueden enviar un mensaje cifrado al destinatario
que los recibe a través de la clave privada. Cada usuario simplemente necesita una clave
privada y una pública para asegurar los mensajes.
4.3. Herramientas de identificación de vulnerabilidades
Según (De luz, 2020) se manifiesta lo siguiente:

Las vulnerabilidades en el software son una de las principales puertas de entrada para los
cibercriminales, pero también es un vector de ataque una mala configuración de nuestros
servicios, e incluso la exposición de puerto TCP/UDP a Internet sin ningún tipo de filtrado.
Los piratas informáticos están buscando constantemente nuevas formas de atacar cualquier
ordenador, servidor o red a través de estos fallos de seguridad, por este motivo, los propios
ingenieros de las compañías, los investigadores de seguridad y los hackers éticos están
constantemente analizando los diferentes programas en busca de fallos de seguridad y
reportarlo para que se solucione. La herramienta imprescindible para esta tarea con los
escáneres de vulnerabilidades.
Un escáner de vulnerabilidades es un software diseñado para realizar análisis automáticos de
cualquier aplicación, sistema o red en busca de cualquier posible vulnerabilidad que exista.
Aunque estas aplicaciones no son capaces de detectar la vulnerabilidad con total precisión, sí
son capaces de detectar ciertos elementos que podrían desencadenar en una vulnerabilidad,
facilitando enormemente el trabajo a los investigadores e ingenieros. Hay varios tipos de
53
escáneres de vulnerabilidades, autenticados, en los que se realizan pruebas y ataques
potenciales desde la propia red, y no autenticados, en los que el investigador o hacker ético se
intenta hacer pasar por un pirata informático simulando un ataque desde fuera para ver hasta
dónde es capaz de llegar analizando (y explotando) posibles vulnerabilidades.
A continuación, se presentan un conjunto de herramientas utilizadas para descubrir
vulnerabilidades en los sistemas informáticos
 Nmap
Según (A2Secure, 2019) se manifiesta lo siguiente:
Este software es uno de los más utilizados para buscar hosts dentro de una red, así como para
buscar los puertos abiertos a través de los cuales poder conectarnos a un sistema de forma remota
e incluso recoger información sobre todos los hosts de una red, como el sistema operativo que
utiliza o los servicios que tiene habilitados en un determinado puerto. Este programa es de
código abierto y multiplataforma, aunque lo más normal es utilizarlo en sistemas operativos
Linux para realizar la tarea de pentesting. Este software tiene una gran cantidad de opciones
avanzadas, y, además, dispone de una interfaz gráfica de manera opcional llamada Zenmap.
Figura 43. Herramienta Nmap. Obtenido de (A2Secure, 2019)
 Wireshark
Continuando con las auditorías de redes, Wireshark es el analizador de paquetes y protocolos por
excelencia. Esta aplicación es capaz de registrar absolutamente todos los paquetes que pasan por
una red, recogerlos y poder filtrarlos y ordenarlos de multitud e formas para poder analizar
cómodamente todo el tráfico. Esta herramienta además es capaz de descifrar los paquetes
enviados a través de los principales protocolos de conexión segura para poder analizar sin
problema su contenido.
54
Figura 44. Herramienta Wireshark. Obtenido de (A2Secure, 2019)
Sin duda, la mejor aplicación que podemos encontrar para analizar cualquier red y poder detectar
cualquier posible fuga de tráfico o conexiones que intenten explotar un fallo de seguridad. Es
compatible con sistemas operativos Windows y Linux, además, soporta una gran cantidad de
extensiones que utilizan otros programas a la hora de capturar el tráfico, de esta forma, podremos
analizar todo el tráfico más tarde. (De luz, 2020)
 Openvas
Entrando ya en la búsqueda de vulnerabilidades en aplicaciones y equipos, una de las

aplicaciones más completas que podemos encontrar en la red es OpenVAS. OpenVAS es un
escáner de vulnerabilidades al que podemos introducir una dirección IP y encargarle el análisis
de dicho equipo, recogiendo información sobre los servicios en funcionamiento, los puertos
abiertos, fallos de configuración, posibles vulnerabilidades conocidas en el software del equipo o
servidor, etc.
Este programa se puede ejecutar tanto desde dentro de una red como desde un servidor externo,
simulando así un ataque real. Cuando finaliza nos genera un completo informe con todas las
posibles debilidades que pueden suponer un peligro para nuestra seguridad. Además, podemos
configurarlo en modo monitorización continua, estableciendo alertas que saltarán cuando se
detecte el más mínimo fallo.
Figura 45. Openvas. Obtenido de (A2Secure, 2019)

OpenVAS es una herramienta completamente gratuita que nos permitirá realizar una gran
cantidad de pruebas de vulnerabilidad contra servidores web, además, tiene una gran comunidad
detrás de ella para darle soporte e incorporar nuevas funcionalidades para exprimir al máximo
todo su potencial.
55
 Owasp Zen Attack
El proyecto OWASP (Open Web Application Security Project) es un proyecto abierto y sin
ánimo de lucro pensado para mejorar la seguridad de las redes, los servidores, equipos y las
aplicaciones y servicios con el fin de convertir Internet en un lugar más seguro. Zed Attack
Proxy, ZAP, es una de las herramientas libres de este proyecto cuya principal finalidad es
monitorizar la seguridad de redes y aplicaciones web en busca de cualquier posible fallo de
seguridad, mala configuración e incluso vulnerabilidad aún desconocida que pueda suponer un
problema para la red. (A2Secure, 2019)
Figura 46. Owasp Zen Attack. Obtenido de (A2Secure, 2019)
4.4. Publicación de sitios Web
4.4.1. Modo producción de Angular

Para desplegar Angular, vamos a utilizar el Software Xampp, que ya lo instalamos en las
clases pasadas, debido que contiene con el Servidor Apache y este nos permitirá servir nuestra
app a cualquier usuario
Según (Montoto, 2018) se afirma que:
 Modificar el archivo index.html

En el archivo index.html en el directorio src, se debe cambiar el atributo <base href="/"> por
<base href ="./">.
56
Figura 47. Desplegando app Angular. Obtenido de (Vince, 2017)
 Ejecutar comando build

Ejecutamos el comando ng build --prod, este comando creara la versión para un ambiente de producción de
nuestro proyecto
 Creación del archivo .htaccess

Crear un fichero llamado .htaccess en el mismo directorio de la aplicación con el siguiente
contenido. Esta configuración sólo afectará al directorio donde se cree este fichero, así como
en sus subdirectorios siempre y cuando no haya otro fichero .htaccess.
57
Puede ser una buena solución para no interferir en otros directorios que puedan contener otras
aplicaciones o páginas web donde no sea necesario configurar esto.
Además con este archivo, cuando refresquemos la página no obtendremos un error 404 de
Page no Found (Montoto, 2018)
4.4.2. Modo producción de Spring Boot

(Pardo, 2020) manifiesta lo siguiente:
Partimos de que tenemos un proyecto de Spring Boot con la configuración por defecto, es
decir, que se despliega como un jar y que este proyecto es un proyecto web.
Lo primero que tenemos que hacer es editar la clase principal del proyecto para que herede de
la clase SpringBootServletInitializer y añadirle el método configure que vemos a
continuación:
Figura 50. Spring Boot produccion. Obtenido de (Pardo, 2020)
Ahora vamos a configurar el pom.xml para establecer la configuración para los dos perfiles:
uno jar que permita el despliegue con el servidor embebido y otro war que permita su
despliegue en los servidores de aplicaciones.
58
Figura 51. Spring Boot produccion. Obtenido de (Pardo, 2020)
Como ves, hacemos el cálculo de la propiedad del tipo de packaging del proyecto de forma
que si el perfil es «jar» entonces generamos un jar que desplegamos en el tomcat embebido de
Spring Boot y si el perfil es «war» generamos un war y le decimos que el servidor de Tomcat
debe ser proporcionado, de esta forma no intentará arrancar la aplicación en el servidor de
Tomcat embebido.
Lo más probable es que ambos perfiles lleven perfiles de Spring Boot distintos para en el caso
de «jar» hacer uso de un datasource local, y para el caso de «war» hacer uso del datasource
que previamente tiene que estar definido en el servidor de aplicaciones donde se vaya a
desplegar el war.
Si todo es correcto cuando quieras un jar solo tendrás que ejecutar:
Comprobarás que en la carpeta «target» se ha generado efectivamente un jar.
Y si lo que quieres es desplegar en un servidor de aplicaciones:
Comprobarás que en la carpeta «target» se ha generado en esta ocasión un war, que poder
desplegar dependiendo del servidor de aplicaciones objetivo.
59
2. Realice un mapa mental de los contenidos vistos en las 4 unidades de esta
asignatura, a manera de resumen
Autoevaluación
o
La Seguridad de la Información se puede definir como conjunto
de medidas técnicas, organizativas y legales que permiten a la
organización asegurar la confidencialidad, integridad y
disponibilidad de su sistema de información.
Lo que la integridad nos sugiere es que la información a la que

accedemos es verdaderamente desconfiable, que podemos
aceptarla como un hecho.
Las listas de control de acceso son muy útiles en las empresas. A
cada usuario, el administrador le asigna capacidades específicas:
leer, editar, eliminar, agregar, etc.
El cifrado funciona como un proceso de codificación de datos en
su transmisión o almacenamiento para que solo las personas
60
autorizadas puedan leerlo.
Un escáner de vulnerabilidades es un software diseñado para
realizar análisis manuales de cualquier Hardware
Se puede desplegar una app hecha en Angular en un servidor
Apache
En angular el archivo .htaccess evita que al refrescar la página
no obtendremos un error 404 de Page no Found
En Spring Boot el archivo pom.xml, es donde colocamos las
dependencias que necesitamos para nuestro proyecto
En Spring Boot podemos trabajar únicamente con
ejecutables .jar
Spring Boot cuando trabajamos con el ejecutable .jar, despliega
automáticamente un servidor Tomcat Embebido
Bibliografía
Garro, A. (2015). Lenguaje de Marcado de Hipertexto. Bogotá, Colombia.

Pérez, J. (2011). Introducción a las hojas de estilos en cascada CSS. Barcelona, España.
Morales, O. (2011). Programación Web con patrones de diseño. Madrid, España.
Sánchez, J. (2009). Programación básica en Java. México, México.
Codesitio. (22 de noviembre de 2019). Clases, atributos, modificadores, objetos y métodos.
Recuperado de https://codesitio.com/recursos-utiles-para-tu-web-o-blog/cursos/curso-
de-java-clases-atributos-modificadores-objetos-y-metodos/
Bocache, R. (2018). Estructuras de control en JavaScript. Recuperado de:
https://raulbocache.com/las-estructuras-de-control-iterativas-en-javascript/
Basalo, A. (04 de marzo de 2020). Framework Angular. Recuperado de:

https://academia-binaria.com/hola-angular-cli/
Bastidas, W. (27 de noviembre de 2017). Introducción al framework Angular. Recuperado

de:
https://academia-binaria.com/hola-angular-cli/
Juanda, M. (2019). Conceptos generales de API REST. Recuperado de:

https://juanda.gitbooks.io/webapps/content/api/arquitectura-api-rest.html
Glorieta, M. (20 de enero de 2018). ¿Qué son las APIs REST?. Recuperado de:
https://tech.tribalyte.eu/blog-que-es-una-api-rest
Agudelo, J. (24 de diciembre de 2018). Spring Boot y JPA. Recuperado de:

https://medium.com/karibu-blog/c%C3%B3mo-aplicar-jpa-en-spring-boot-
e45ac5bee3b4
61
Gonzáles, N. (24 de diciembre de 2018). Spring Boot y JPA. Recuperado de:
https://medium.com/karibu-blog/c%C3%B3mo-aplicar-jpa-en-spring-boot-
e45ac5bee3b4
Bartolomé, M. (8 de septiembre de 2018). Instalación de Xampp. Recuperado de:

https://www.mclibre.org/consultar/php/otros/xampp-instalacion-windows.html
Ecured. (10 de enero de 2020). Características de Xampp. Recuperado de:

https://www.ecured.cu/XAMPP
Ionos. (10 de enero de 2020). Instalación y características de Xampp. Recuperado de:

https://www.ionos.es/digitalguide/servidores/herramientas/instala-tu-servidor-local-
xampp-en-unos-pocos-pasos/
Alonso, R. (2020). Instalación de Wordpress en modo local. Recuperado de:

https://miposicionamientoweb.es/como-instalar-wordpress-local/
WebEmpresa, R. (11 de enero de 2020). WordPress características e instalación. Recuperado

de: https://miposicionamientoweb.es/como-instalar-wordpress-local/
Braojos, P. (16 de septiembre de 2019). Drupal características y ventajas de uso. Recuperado

de: https://www.marketinet.com/blog/drupal-caracteristicas-ventajas-de-uso#gref
Instituto de Tecnologías Educativas. (2019). Características de Joomla. Recuperado de:

http://www.zenodoto.com/gestiondocs/cursosacademicos/manualesrecursos/
materalesformaciondocenteTIC/TIC12_JOOMLA/modulo_01/
caractersticas_de_joomla.html
Sistemas Informacion Site. (10 de febrero de 2016). Seguridad en los sistemas de

información. Recuperado de:
https://sistemasinformacionsite.wordpress.com/2016/02/10/seguridad-en-los-sistemas-
de-informacion/
Tecnologias Informacion. (12 de marzo de 2018). Seguridad en los sistemas de información.

Recuperado de: https://sistemasinformacionsite.wordpress.com/2016/02/10/seguridad-
en-los-sistemas-de-informacion/
De luz, S. (10 de mayo de 2020). Vulnerabilidades del software. Recuperado de:

https://www.redeszone.net/tutoriales/seguridad/mejores-escaner-vulnerabilidades-
gratis-hacker/
62
A2Secure. (5 de junio de 2019). Herramientas para la gestión y análisis de vulnerabilidades.
Recuperado de: https://www.a2secure.com/blog/herramientas-para-la-gestion-y-
analisis-de-vulnerabilidades/
Montoto, J. (2 de mayo de 2018). Desplegando una app Angular en Apache. Recuperado de:
https://www.javimontoto.com/2018/05/02/desplegar-app-de-angular-con-apache/
Vince, M. (13 de noviembre de 2017). Desplegando una app Angular. Recuperado de:
https://angular5col.blogspot.com/2017/11/angular-xampp.html
Pardo, J. (07 de enero de 2020). Desplegando una app Spring Boot. Recuperado de:
https://www.adictosaltrabajo.com/2018/12/13/spring-boot-war-o-jar-ambos/
Anexos
Anexo 1. Solucionario de la Autoevaluación de la primera Unidad

o
En la cabecera de la página se introduce toda aquella
V
información que afectará a toda la página.
href indica la URL del archivo JS que contiene los scripts. La
URL indicada puede ser relativa o absoluta y puede apuntar a un
F
recurso interno o externo al sitio web.
JavaScript es un lenguaje de programación que se utiliza

V
principalmente para crear páginas web dinámicas.
Los bucles ofrecen una manera rápida y sencilla de hacer algo
V
repetidamente.
Para ejecutar una aplicación en Angular y desplegar el
F
navegador utilizamos el comando ng -g start
 Escriba un algoritmo en JavaScript que presente las tablas de multiplicar del 1 al 10,
el rango de multiplicación de cada tabla será del 1 al 12
Ejercicio
63
Resultado
Anexo 2. Solucionario de la Autoevaluación de la segunda Unidad

o
64
REST, Representational State Transfer, es un tipo de
arquitectura de desarrollo web que se apoya totalmente en el V
estándar HTTP
301 Created. La petición ha sido completada y ha resultado en la
F
creación de un nuevo recurso.
Un starter es un conjunto de dependencias que nos ayudan a
V
cubrir las necesidades de un tipo de proyecto concreto.
La anotación @EnableAutoConfiguration indica que se aplicará
la configuración automática del starter que hemos utilizado. Solo
F
debe añadirse en un sitio, y es muy frecuente situarla en el
método constructor de la clase
Spring Data es un modelo de programación basado en Spring
para el acceso a datos. Reduce la cantidad de código necesario V
para trabajar con bases de datos y almacenes de datos
 Escriba la estructura de un Objeto JSON, de la clase Persona, coloque 10 atributos
Ejercicio
65
o
Un sistema de gestión de contenidos o CMS (Content Manager
System) es un programa o aplicación web que permite la
creación de una estructura de soporte para la creación, V
administración y publicación de contenido en una página web
Un CMS no permite acceder a su núcleo para codificar procesos

F
más personalizados
Xampp es la única herramienta, donde se puede probar y
F
desplegar un CMS
Por defecto el puerto en el que se despliega el Servidor Apache,
F
es el 8080
El CMS Joomla soporta código Java F
Drupal es un CMS de paga para el lenguaje de programación
F
Php
WordPress tiene un sitio web que permite crear blogs y páginas
V
web de forma rápida.
Se puede trabajar con la base de datos PostgreSql en Drupal,
V
WordPress y Joomla
WordPress tiene plantillas únicamente de paga F

o
La Seguridad de la Información se puede definir como conjunto
de medidas técnicas, organizativas y legales que permiten a la
organización asegurar la confidencialidad, integridad y V
disponibilidad de su sistema de información.
Lo que la integridad nos sugiere es que la información a la que

accedemos es verdaderamente desconfiable, que podemos F
aceptarla como un hecho.
Las listas de control de acceso son muy útiles en las empresas. A
cada usuario, el administrador le asigna capacidades específicas: V
leer, editar, eliminar, agregar, etc.
El cifrado funciona como un proceso de codificación de datos en
su transmisión o almacenamiento para que solo las personas F
autorizadas puedan leerlo.
Un escáner de vulnerabilidades es un software diseñado para
F
realizar análisis manuales de cualquier Hardware
Se puede desplegar una app hecha en Angular en un servidor V
66
Apache
En angular el archivo .htaccess evita que al refrescar la página
V
no obtendremos un error 404 de Page no Found
En Spring Boot el archivo pom.xml, es donde colocamos las
V
dependencias que necesitamos para nuestro proyecto
En Spring Boot podemos trabajar únicamente con
F
ejecutables .jar
Spring Boot cuando trabajamos con el ejecutable .jar, despliega
V
automáticamente un servidor Tomcat Embebido
67

Guia Programacion Web

Cargado por

Copyright:

Formatos disponibles

Guia Programacion Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Programacion Web

Cargado por

Copyright:

Formatos disponibles

INSTITUTO SUPERIOR TECNOLÓGICO

Tecnología Superior en Desarrollo de Software

Programación de Aplicaciones Web

 Comunica de manera asertiva, coopera activamente en la resolución de conflictos con

Contribución de la asignatura al perfil profesional

La asignatura de Programación Orientada a Objetos contribuye con el perfil profesional de la

Objetivo general de la asignatura

Orientaciones Generales para el uso de la guía.......................................................................................5

En esta unidad se estudian los conceptos principales de la Programación de aplicaciones web,

1.2. Conceptos generales del desarrollo Web

De forma general es un programa que permite visualizar páginas web. La funcionalidad

1.2.2. Que es un CMS

 CMS para páginas web

Figura 1. Resultado de la etiqueta hr de HTML. Elaboración Propia

1.3.3. Estructura de una página

Figura 3. Estilos definidos de las etiquetas HTML. Elaboración propia

Figura 4. Aplicando estilos CSS3 a la página. Elaboración propia

1.4.2. Archivo externo CSS

Normalmente, la etiqueta<link>incluye cuatro atributos cuando se enlaza un archivo CSS:

 Incluir JavaScript en el mismo documento HTML

Figura 7. Incluir JavaScript en el documento. Elaboración propia

Estructuras condicionales en JavaScript

En JavaScript, las estructuras condicionales que hay son dos:

 switch: utilizado cuando tenemos un número finito de posibilidades.

Estructura de control if…else…..if

Figura 9. Estructura if – else -if en JavaScript. Obtenido de (Bocache, 2018)

Estructuras repetitivas en JavaScript

Figura 10. Estructura for en JavaScript. Obtenido de (Developer, 2019)

La condición se evalúa antes de que la sentencia contenida en el bucle sea ejecutada. Si la

1.6. Framework Angular

Según Basalo (2020) se menciona que

1.6.1. Instalación de Angular CLI 9

Figura 11. Angular Cli 9. Obtenido de (Basalo, 2020)

1.6.2. Crear y ejecutar una aplicación Angular

Figura 12. Inicio rápido de Angular. Obtenido de (Basalo, 2020)

 angular.json : configuración del propio CLI. La madre de todos los

1.6.4. Ejecutar la aplicación

Usando la opción — open (o simplemente -o) nos abrirá automáticamente la aplicación en el

Deberíamos ver algo como esto:

Figura 13. Ejecutar proyecto Angular. Obtenido de (Bastidas, 2017)

1.6.5. Nuestro primer componente

JavaScript es un lenguaje de programación que se utiliza

2. Unidad 2: Programación del lado del servidor y Base de Datos

Según (Guanda, 2019) se menciona que:

REST, REpresentational State Transfer, es un tipo de arquitectura de desarrollo web que se

2.3. Principales características de una API REST

Según (Glorieta, 2018) se asegura que:

Figura 14. Formato JSON. Obtenido de (Glorieta, 2018)

Según (Guanda, 2019) se menciona que:

 POST: crear un recurso nuevo.

Cuando se realiza una petición determinada, es de vital importancia conocer si dicha

Las más comunes son:

 200 OK. Respuesta estándar para peticiones correctas.

Figura 15. Petición Realizada. Obtenido de (Glorieta, 2018)

2.4. Framework Sprng Boot

Según Agudelo (2018) se manifiesta que:

 Incorporación directa de aplicaciones de servidores web/contenedores como Apache

2.4.1. Creando el proyecto

De acuerdo a Gonzáles (2018) se manifiesta que:

Figura 16. Dependencias Iniciales. Obtenido de (Gonzáles, 2018)