Programación web_Tema 1_Act1.1

Cesar Iván Álvarez Albores

Erick Vázquez Esponda

Presentacion electronica: aplicaciones web

Aplicaciones web

Una aplicación web es un programa informático que se ejecuta en un servidor web y se accede a través de un navegador de internet. A diferencia de las aplicaciones de escritorio, que se instalan y ejecutan directamente en el sistema operativo del usuario, las aplicaciones web están diseñadas para ser utilizadas en línea, lo que permite acceder a ellas desde cualquier dispositivo con conexión a internet.Las aplicaciones web pueden variar desde simples páginas informativas hasta complejas plataformas interactivas. Algunos ejemplos comunes incluyen: Correo electrónico basado en la web, Redes sociales, Plataformas de comercio electrónico, Herramientas de colaboración.Estas aplicaciones utilizan tecnologías como HTML, CSS y JavaScript en el frontend y lenguajes de programación como Python, Ruby o Node.js en el backend.

1. Introducción

La historia de las aplicaciones web comienza a principios de la década de 1990. Tim Berners-Lee, conocido como el padre de la World Wide Web, desarrolló el primer navegador web llamado WorldWideWeb (más tarde renombrado Nexus) en 1990. Este navegador permitió a los usuarios acceder a documentos de hipertexto enlazados, sentando las bases para lo que hoy conocemos como aplicaciones web. En 1993, se lanzó Mosaic, el primer navegador web comercial, que popularizó el uso de la web. Poco después, Netscape Navigator se convirtió en el navegador dominante, introduciendo características como los formularios y los scripts, que permitieron una mayor interactividad en las páginas web.

Primeras aplicaciones web

2. Historia y evolución

La evolución de las aplicaciones web ha estado marcada por avances tecnológicos significativos en tres áreas clave: HTML, CSS y JavaScript.HTML (HyperText Markup Language) HTML es el lenguaje de marcado utilizado para estructurar el contenido en la web. Desde su primera versión, HTML ha evolucionado para soportar una amplia gama de elementos multimedia y gráficos.CSS (Cascading Style Sheets) CSS se utiliza para diseñar y presentar el contenido estructurado por HTML. Con CSS, los desarrolladores pueden controlar el aspecto visual de las aplicaciones web, incluyendo colores, fuentes y disposición de los elementos.JavaScript JavaScript es el lenguaje de programación que permite la interactividad en las aplicaciones web. Desde su creación en 1995, JavaScript ha evolucionado para convertirse en un lenguaje poderoso y versátil.

2.1 Evolución tecnológica

Java Script

CSS (Cascading Style Sheets)

HTML (HyperText Markup Language)

La arquitectura de una aplicación web se divide en dos partes principales: el frontend y el backend. Cada una de estas partes tiene su propio conjunto de tecnologías y responsabilidades.3.1 Frontend El frontend es la parte de la aplicación web con la que interactúan los usuarios. Incluye todo lo que se ve y se experimenta en el navegador.

3. Arquitectura de aplicaciones web

GraphQL

REST (Representational State Transfer)

Servidores y bases de datos El servidor es el componente que recibe las solicitudes del navegador, procesa la lógica de la aplicación y devuelve las respuestas adecuadas. Las bases de datos almacenan y gestionan los datos utilizados por la aplicación. Los servidores y bases de datos pueden ser configurados y gestionados utilizando diversas tecnologías.3.3 APIs y Servicios Web Las APIs y los servicios web permiten la comunicación entre diferentes partes de una aplicación o entre diferentes aplicaciones.

3.2 BackendEl backend es la parte de la aplicación web que maneja la lógica del servidor, la gestión de datos y la comunicación con el frontend.

Análisis de necesidades del cliente

• Reuniones y entrevistas: Hablar con los clientes para comprender sus objetivos y desafíos.
• Documentación de requisitos: Crear un documento detallado que describa las funcionalidades y características deseadas. Priorización: Identificar las características más importantes y urgentes.

El primer paso en el desarrollo de una aplicación web es definir claramente los requisitos. Esto implica entender las necesidades y expectativas del cliente o usuario final.

4.1 Definición de Requisitos

4. Desarrollo de aplicaciones web

Estructura y componentes

• Diagrama de arquitectura: Visualizar cómo se conectarán y comunicarán los diferentes componentes de la aplicación.
• Componentes principales: Identificar los módulos clave, como el frontend, backend, base de datos y APIs.

Una vez definidos los requisitos, se diseña la arquitectura de la aplicación, que incluye la estructura y los componentes necesarios.

4.2 Diseño de la Arquitectura

Herramientas y lenguajes

• Frontend: HTML, CSS, JavaScript, y frameworks como React, Angular o Vue.js.
• Backend: Node.js, Python, Ruby, y frameworks como Express, Django o Ruby on Rails.
• Base de datos: SQL (MySQL, PostgreSQL) o NoSQL (MongoDB, Firebase).
• Herramientas de desarrollo: Git para control de versiones, Docker para contenedores, y CI/CD para integración y despliegue continuos.

Elegir las herramientas y lenguajes adecuados es crucial para el éxito del proyecto.

4.3 Selección de Tecnologías

Diseño de interfaces de usuario

• Wireframes y prototipos: Crear bocetos y prototipos interactivos para visualizar el diseño.
• Implementación: Utilizar HTML, CSS y JavaScript para construir la interfaz.
• Pruebas de usabilidad: Asegurarse de que la interfaz sea intuitiva y fácil de usar.

El desarrollo del frontend se centra en el diseño de interfaces de usuario atractivas y funcionales.

4.4 Desarrollo del Frontend

Lógica del servidor y gestión de datos

• Configuración del servidor: Configurar el entorno del servidor utilizando Node.js, Python, Ruby, etc.
• Desarrollo de APIs: Crear APIs RESTful o GraphQL para la comunicación entre el frontend y el backend.
• Gestión de bases de datos: Diseñar y gestionar la base de datos para almacenar y recuperar datos de manera eficiente.

El backend maneja la lógica del servidor y la gestión de datos.

4.5 Desarrollo del Backend

Métodos de prueba y herramientas

• Pruebas unitarias: Probar componentes individuales del código.
• Pruebas de integración: Asegurarse de que los diferentes componentes funcionen bien juntos.
• Pruebas de usuario: Obtener retroalimentación de usuarios reales para identificar problemas de usabilidad.
• Herramientas: Jest, Mocha, Selenium, entre otras.

Las pruebas son esenciales para garantizar que la aplicación funcione correctamente y esté libre de errores.

4.6 Pruebas y Depuración

Despliegue en servidores

• Configuración del entorno de producción: Asegurarse de que el servidor esté listo para manejar el tráfico de usuarios.
• Despliegue continuo: Utilizar herramientas de CI/CD para automatizar el proceso de despliegue.

Una vez que la aplicación ha sido desarrollada y probada, es hora de implementarla y lanzarla al público.

4.7 Implementación y Lanzamiento

Gestión de versiones y mejoras continuas

• Actualizaciones de seguridad: Asegurarse de que la aplicación esté protegida contra nuevas amenazas.
• Mejoras de rendimiento: Optimizar la aplicación para que funcione de manera más eficiente.
• Nuevas funcionalidades: Añadir nuevas características basadas en la retroalimentación de los usuarios.

El trabajo no termina con el lanzamiento. Es importante mantener y actualizar la aplicación regularmente.

4.8 Mantenimiento y Actualizaciones

Cross-Site Request Forgery (CSRF)

Cross-Site Scripting (XSS)

Inyecciones SQL (SQL Injection)

Las aplicaciones web están expuestas a diversas amenazas que pueden comprometer la seguridad de los datos y la integridad del sistema. Algunas de las amenazas más comunes incluyen:

5.1 Principales amenazas

5. Seguridad en aplicaciones web

Autenticación y autorización Autenticación: Verificar la identidad de los usuarios mediante métodos seguros, como contraseñas fuertes, autenticación de dos factores (2FA) y tokens de acceso. Autorización: Asegurarse de que los usuarios solo puedan acceder a los recursos y realizar las acciones para las que tienen permisos. Implementar controles de acceso basados en roles (RBAC) para gestionar los permisos de manera efectiva.

Para proteger las aplicaciones web de estas y otras amenazas, es fundamental seguir buenas prácticas de seguridad.

5.2 Buenas prácticas de seguridad

Encriptación en tránsito: Utilizar HTTPS para proteger los datos mientras se transmiten entre el cliente y el servidor. Esto evita que los datos sean interceptados por atacantes durante la transmisión. Encriptación en reposo: Encriptar los datos almacenados en bases de datos y sistemas de archivos para protegerlos en caso de que un atacante obtenga acceso no autorizado a los servidores.

5.3 Encriptación de datos

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lista de Tareas</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="app"> <h1>Lista de Tareas</h1> <input type="text" id="new-task" placeholder="Nueva tarea"> <button id="add-task">Agregar</button> <ul id="task-list"></ul> </div> <script src="app.js"></script> </body> </html>

Frontend 1. HTML

Aplicación de Lista de Tareas (To-Do List)

Ejemplo de una aplicación web basica

Las aplicaciones web han revolucionado nuestra interacción con la tecnología, permitiéndonos acceder a servicios y herramientas desde cualquier dispositivo con conexión a internet. En esta presentación, se a explorado su definición, historia, evolución tecnológica, arquitectura y desarrollo, así como las prácticas de seguridad. Desde los primeros navegadores hasta las plataformas interactivas actuales, las aplicaciones web han avanzado mucho. Tecnologías como HTML, CSS y JavaScript, junto con frameworks modernos como React, Angular y Vue.js, han permitido crear mas experiencia de usuario. En el backend, lenguajes como Node.js, Python y Ruby, junto con bases de datos robustas, aseguran que las aplicaciones sean buenas.La seguridad es muy importante en el desarrollo de aplicaciones web. Protegerse contra amenazas como inyecciones SQL, XSS y CSRF, y seguir buenas prácticas de autenticación, autorización y encriptación de datos, es esencial para mantener la integridad y la confianza de los usuarios.

Conclusión

Luján-Mora, S. (2002). Programación de aplicaciones web: historia, principios básicos y clientes web. Editorial Club Universitario. Martínez, J. F. (2012). Implantación de aplicaciones web (GRADO SUP.). Ra-Ma Editorial.Cobo, Á. (2005). PHP y MySQL: Tecnología para el desarrollo de aplicaciones web. Ediciones Díaz de Santos.Luján-Mora, S. (2002). Programación de aplicaciones web: historia, principios básicos y clientes web. Editorial Club Universitario.BERENGUEL GÓMEZ, J. L. (2015). Desarrollo de aplicaciones web en el entorno servidor. Ediciones Paraninfo, SA.

Bibliografía

Next