CAPÍTULO II.

DESARROLLO DE CONCEPTOS
2.1 Introducción a las tecnologías web
2.1.1 Conceptos básicos de las tecnologías para el desarrollo web
Las tecnologías para el desarrollo web son un conjunto de herramientas, lenguajes y
plataformas que se utilizan para construir aplicaciones y sitios web. Entre los conceptos
básicos de estas tecnologías se incluyen:
 HTML: Es el lenguaje de marcado utilizado para crear la estructura y contenido de las
páginas web.
 CSS: Es el lenguaje utilizado para definir el estilo visual de las páginas web,
incluyendo el diseño, colores, fuentes y efectos.
 JavaScript: Es un lenguaje de programación que se utiliza para agregar interactividad
y funcionalidad a las páginas web, como formularios, animaciones y efectos.
 Frameworks: Son conjuntos de herramientas y librerías que proporcionan una base
sólida para el desarrollo web, incluyendo funciones comunes y patrones de diseño que
pueden acelerar el proceso de desarrollo.
 Gestores de contenido: Son sistemas que permiten crear y gestionar el contenido de un
sitio web de manera eficiente, incluyendo la creación de páginas, la gestión de usuarios
y el control de permisos.
 Bases de datos: Son sistemas para almacenar y gestionar grandes cantidades de datos
de manera estructurada, y se utilizan en muchas aplicaciones web para almacenar
información de usuarios, contenido y otros datos relevantes.

En general, estos conceptos básicos son esenciales para cualquier persona interesada en el
desarrollo web, ya que proporcionan una base sólida para el aprendizaje y la comprensión de
las tecnologías utilizadas en la creación de aplicaciones y sitios web.
2.1.2 Arquitecturas y estilos arquitectónicos
Las arquitecturas y estilos arquitectónicos son fundamentales para el desarrollo de
aplicaciones web. La arquitectura define la estructura de la aplicación, mientras que los
estilos arquitectónicos definen patrones y principios que guían su diseño.
Una arquitectura de aplicación web es el conjunto de decisiones y patrones que
determinan cómo se organizarán los componentes de la aplicación, incluyendo su estructura
de archivos, su diseño de base de datos y la forma en que se comunican los diferentes
módulos.
Entre los estilos arquitectónicos más comunes se encuentran el modelo-vista-
controlador (MVC), el modelo-vista-presenter (MVP) y el modelo-vista-vista-modelo
(MVVM). El patrón MVC se enfoca en la separación de responsabilidades entre la lógica de
la aplicación, la presentación y la interacción del usuario. El patrón MVP es similar a MVC
pero con una mayor separación de la lógica de presentación y la lógica de la aplicación. El
patrón MVVM se centra en la separación de la lógica de la interfaz de usuario y la lógica de
la aplicación, utilizando un modelo de vista para manejar la comunicación entre ambos.
Es importante seleccionar la arquitectura y el estilo arquitectónico adecuados para una
aplicación web en función de sus necesidades y requerimientos. Esto puede ayudar a mejorar
su mantenibilidad, escalabilidad y eficiencia.
2.1.3 Herramientas de desarrollo web
Las herramientas de desarrollo web son programas informáticos que se utilizan para
facilitar la creación y el mantenimiento de sitios web. Estas herramientas pueden ser de
diferentes tipos, incluyendo editores de código, sistemas de control de versiones, frameworks
y librerías, entre otros. Algunas de las herramientas más comunes utilizadas en el desarrollo
web incluyen:
 Editores de código: Son herramientas que permiten a los desarrolladores escribir y
editar código. Ejemplos de editores de código populares son Sublime Text, Visual
Studio Code y Atom.
 Sistemas de control de versiones: son herramientas que permiten a los desarrolladores
gestionar y mantener un historial de los cambios realizados en el código fuente.
Ejemplos de sistemas de control de versiones son Git, Mercurial y SVN.
 Frameworks: Son conjuntos de herramientas y librerías que permiten a los
desarrolladores crear aplicaciones web de manera más eficiente y estructurada.
Ejemplos de frameworks populares incluyen Django y Flask para Python, Ruby on
Rails para Ruby, y Laravel para PHP.
 Librerías: Son colecciones de funciones y herramientas que se utilizan para realizar
tareas específicas en el desarrollo web. Ejemplos de librerías populares incluyen React
y Angular para JavaScript, y NumPy y Pandas para Python.
 Herramientas de automatización: Son herramientas que permiten a los desarrolladores
automatizar tareas repetitivas en el proceso de desarrollo. Ejemplos de herramientas de
automatización incluyen Grunt y Gulp.

Estas herramientas son fundamentales para el desarrollo web, ya que permiten a los
desarrolladores trabajar de manera más eficiente y producir código de alta calidad en menos
tiempo.
2.2 Fundamentos de desarrollo web
2.2.1 HTML
HTML (HyperText Markup Language) es un lenguaje de marcado utilizado para crear la
estructura y contenido de una página web. Permite al desarrollador definir elementos tales
como texto, imágenes, videos, enlaces y otros contenidos multimedia en la página web.
“HTML es un lenguaje de marcado que se utiliza para crear páginas web. Permite al
desarrollador definir elementos como texto, imágenes, videos, enlaces y otros contenidos
multimedia en la página web (Baumeister, 2019).”1
El lenguaje HTML utiliza etiquetas para definir los elementos en la página web, como
encabezados, párrafos, listas, tablas y formularios. Las etiquetas son palabras clave que van
entre corchetes angulares y proporcionan información sobre el contenido que se está
marcando.
Cada etiqueta en HTML tiene una estructura básica que incluye el nombre de la etiqueta,
atributos opcionales y contenido. Los atributos proporcionan información adicional sobre el
elemento y pueden incluir información como el tamaño de una imagen o el nombre de un
archivo de audio.
HTML se utiliza en conjunto con otros lenguajes de programación, como CSS y JavaScript,
para crear páginas web interactivas y atractivas. La última versión de HTML es HTML5, que
ha introducido nuevas funcionalidades como soporte para video y audio nativos,
geolocalización y almacenamiento local en el navegador.
“HTML es un lenguaje que se interpreta en el lado del cliente, lo que significa que el
navegador web del usuario es responsable de procesar el código HTML y mostrar la página
web al usuario”2
Estructura de un documento HTML
La estructura de un documento HTML (HyperText Markup Language) es un conjunto de
elementos que permiten definir el contenido y la presentación de una página web. A
continuación, se presentan algunos conceptos clave sobre la estructura de un documento
HTML:
 “Etiquetas: Son elementos básicos de HTML que permiten definir el contenido y la
estructura de una página web. Las etiquetas se escriben entre corchetes angulares (<
>) y pueden incluir atributos que proporcionan información adicional sobre el
elemento. Por ejemplo, la etiqueta <h1> define un encabezado de primer nivel y el
atributo "class" permite asignar una clase al elemento para aplicar estilos CSS.
 Elementos: Son combinaciones de etiquetas y su contenido que forman bloques de
información en una página web. Por ejemplo, la etiqueta <p> define un párrafo y su
contenido es el texto que se desea mostrar.

1
Baumeister, R. (2019). HTML Basics. Springer.
2
Severance, C., & Zelle, J. (2016). Python for Everybody: Exploring Data in Python 3. CreateSpace Independent
Publishing Platform.
  Atributos: Son características adicionales que se pueden aplicar a las etiquetas y que
proporcionan información adicional sobre el elemento. Por ejemplo, el atributo "src"
se utiliza para especificar la ubicación de una imagen en una página web.
 Doctype: Es la declaración al inicio de un documento HTML que define la versión de
HTML utilizada en el documento y proporciona información importante al navegador
web para interpretar correctamente la página.
 Head: Es la sección del documento HTML que contiene información sobre la página
web, como el título, las meta etiquetas y los enlaces a archivos CSS y JavaScript.
 Body: Es la sección del documento HTML que contiene el contenido visible de la
página web, como texto, imágenes, videos y otros elementos.”3

Etiquetas HTML
Las etiquetas HTML son elementos utilizados en la construcción de una página web
para definir la estructura y contenido de la misma. Estas etiquetas se utilizan para crear
títulos, párrafos, listas, tablas, formularios, imágenes, videos y otros elementos visuales en la
página web. Cada etiqueta HTML tiene un nombre específico y una sintaxis definida que
permite a los desarrolladores web crear y diseñar páginas web con facilidad.
Las etiquetas HTML se escriben dentro de los corchetes angulares "<>" y se cierran
con el mismo nombre de etiqueta, pero precedido de una barra diagonal "/". Por ejemplo, la
etiqueta <p> se utiliza para definir un párrafo y se cierra con la etiqueta </p>. La mayoría de
las etiquetas HTML también tienen atributos que permiten agregar información adicional a la
etiqueta, como el tamaño de una imagen o el valor predeterminado de un campo de
formulario.
Algunas de las etiquetas HTML más utilizadas incluyen:
 “<html>: Define el comienzo y fin de un documento HTML.
 <head>: Contiene información sobre la página web, como el título y los enlaces a
hojas de estilo y scripts.
 <body>: Define el cuerpo de la página web y contiene todos los elementos visuales
que aparecen en la pantalla.
 <h1>-<h6>: Define los títulos y subtítulos de la página web en orden de importancia.
 <p>: Define un párrafo de texto.
 <a>: Define un enlace a otra página web o archivo.
 <img>: Define una imagen que se muestra en la página web.

3
W3C. (2017). HTML: estructura básica, de https://www.w3.org/TR/html52/struct/global.html#the-doctype
  <ul> y <ol>: Define listas sin ordenar (puntos) y ordenadas (números o letras)
respectivamente.
 <table>: Define una tabla que muestra información en filas y columnas.
 <form>: Define un formulario que permite a los usuarios ingresar información en la
página web.”4

4
W3Schools. (s.f.). HTML, de https://www.w3schools.com/html/
Alcance
Aplicación de buenas prácticas integrando tecnologías web para la implementación de
aplicaciones web escalables aplicando los conceptos de seguridad tales como la integridad,
confidencialidad y disponibilidad de los datos.
Punto Clave
El punto clave del temario es la seguridad en el desarrollo web, debido a que las aplicaciones
web se encuentran en constantes amenazas y riesgos de seguridad que comprometen la
integridad, confidencialidad y disponibilidad de los datos.
Metodología del diagrama de espina de pescado (Ishikawa)
La metodología del diagrama de espina de pescado, también conocida como diagrama de
Ishikawa, es ideal para analizar y visualizar las causas y efectos de un problema específico,
como lo es la falta de claridad en los objetivos y tareas asignadas en un proyecto. Este tipo de
diagrama permite identificar de manera clara y ordenada las diferentes causas que
contribuyen a este problema, lo que a su vez ayuda a diseñar soluciones más efectivas.