Uso de herramientas para Alumno: Ramón Rodríguez Memije

aplicaciones web
Docente: Ma Guadalupe Espíndola Uribe

4105
Colegio Nacional de Educación Profesional Técnica
 Índice

• Portada. 1

• Índice. 2

• Objetivo. 3

• Determinación de arquitecturas empleadas 4-6

en el desarrollo y ejecución de sitios web.

• Instalación del software del servidor. 7-16

• Entorno del trabajo para el sitio web. 17-20

• Fuentes de información. 21
Objetivo
Aprender a usar herramientas para
aplicaciones web y saber cómo ejecutarlas
de manera eficiente.
Arquitecturas para el
desarrollo web
 Arquitectura Cliente-Servidor:
Características:
•Divide la aplicación en dos partes
principales: el cliente, que es la interfaz de
usuario con la que interactúa el usuario final,
y el servidor, que es responsable de procesar
las solicitudes del cliente y enviar las
respuestas correspondientes.
•La comunicación entre el cliente y el servidor
se realiza generalmente a través de
solicitudes HTTP.
•El cliente puede ser una aplicación web en
un navegador, una aplicación móvil o incluso
otro servidor.
•El servidor puede ser un servidor web que
sirve contenido estático y dinámico, así como
también puede proporcionar servicios web o
API para interactuar con el cliente.
Ventajas:
•Separación clara de responsabilidades entre el cliente y el
servidor, lo que facilita el desarrollo y la escalabilidad.
•Permite que múltiples clientes accedan al mismo servidor, lo
que lo hace adecuado para aplicaciones con muchos usuarios.
•Facilita la reutilización del código y la lógica de negocio en el
servidor, lo que promueve la coherencia y el mantenimiento del
código.
Desventajas:
•La comunicación entre el cliente y el servidor a través de HTTP
puede generar sobrecarga en la red y reducir la velocidad de
respuesta, especialmente en aplicaciones que requieren una
interacción en tiempo real.
•Puede haber problemas de seguridad si no se implementan
correctamente las medidas de protección en la comunicación
entre el cliente y el servidor.
 Arquitectura de una sola página (Single Page
Application - SPA):
Características:
•Una SPA carga una única página HTML
inicial y luego actualiza dinámicamente el
contenido de la página en respuesta a las
acciones del usuario, todo sin recargar la
página completa.
•Utiliza tecnologías como JavaScript, Ajax y
frameworks de frontend como Angular,
React o Vue.js para crear una experiencia
de usuario fluida y altamente interactiva.
•La lógica de la aplicación se ejecuta
principalmente en el cliente, mientras que
el servidor proporciona datos a través de
API REST o servicios web.
Ventajas:
•Mejora la experiencia del usuario al proporcionar una navegación
rápida y fluida sin tiempos de carga entre páginas.
•Permite el desarrollo de aplicaciones altamente interactivas y
complejas que se asemejan más a aplicaciones de escritorio.
•Facilita la creación de aplicaciones móviles híbridas utilizando
tecnologías web.
Desventajas:
•Puede presentar problemas de SEO (optimización para motores de
búsqueda) debido a que el contenido no está disponible
inicialmente en el HTML y requiere renderización del lado del
cliente.
•Requiere que el cliente tenga habilitado JavaScript, lo que puede
afectar la accesibilidad para algunos usuarios y dispositivos.
•La gestión del estado de la aplicación puede volverse complicada a
medida que la aplicación crece en complejidad.
 Instalación del
software del servidor
 Iniciamos buscando
“XAMPP” Para iniciar con
la instalación.

Entramos a la página y le
damos en el apartado de
nuestro SO y
automáticamente se
empezará a descargar.
Una vez instalado, nos aparecerá este
icono en nuestras descargas o nuestro
inicio al cual le daremos click derecho y
ejecutar como administrador,
aceptaremos unos permisos y empezará a
instalarse el Servidor
Una vez iniciado el
programa nos aparecerá
un Setup en el cual nos
dará las opciones de que
programas deseamos
instalar, dejaremos las
configuraciones
predeterminadas.
A continuación, nos dará a
escoger un folder donde se
realizará la instalación, por mi
parte dejare el que nos da
predeterminadamente.
A continuación, nos dará a elegir el
idioma entre alemán e inglés,
eligiere el inglés.
 Nos pide una confirmación
para que los programas se
comiencen a instalar, le
daremos en Next.

A continuación, empezará la
instalación
En mi caso, cuando se haya
terminado de instalar como
tengo activo el firewall de
Windows, va a bloquear
algunas características de
apache, pero nos preguntara
si queremos permitir el
acceso, simplemente daremos
en permitir y listo,
Terminada la
instalación solo
daremos “finish” y
continuaremos con el
siguiente paso.
 Nos aparecerá esta ventana en la
cual tendremos que poner a
funcionar a Apache y a MySQL.

Nos pedirá aceptar unos

permisos, a los cuales
aceptaremos.
Entorno de trabajo para el sitio web
Entramos a la carpeta de XAMPP.

Después entramos a la carpeta

Htdocs.
Creamos una carpeta
con nuestro nombre y
entraos en ella.

Dentro de la carpeta
que tiene nuestro
nombre, creamos otras
3 carpetas (css, html,
imagenes).
Entraremos al navegador
y escribiremos lo
siguiente:

Dentro del localhost nos

parecerá el índex de la
carpeta con nuestro
nombre que hemos
creado anteriormente.
 https://youtu.be/MtllDrDm4cM

https://rockcontent.com/es/blog/arquitectura-web/ Fuentes de
https://www.youtube.com/watch?v=xXkKeojOb1A&ab_chann
información.
el=MRoblesDev