Tecnologías para la creación de aplicaciones web

[pic 1]

UNIVERSIDAD TECNOLÓGICA Y POLITÉCNICA DE LA SIERRA DE GUERRERO.

TERCER CUATRIMESTRE

PORTAFOLIO I APLICACIONES WEB

PROF: ING. OSVALDO GONZALES DIAZ

ALUMNA: DALIA VICO VARONA

TLACOTEPEC GUERRERO

10/08/2023

TECNOLOGÍAS PARA LA CREACIÓN DE APLICACIONES WEB.

Internet y Web:

• Internet: Una red global de computadoras interconectadas que permite la comunicación y el intercambio de información a nivel mundial.
• Web (World Wide Web): Un sistema de información en línea que utiliza hipervínculos para conectar recursos y páginas web a través de Internet.

Aplicación Web:

• Una aplicación que se accede y se utiliza a través de un navegador web, sin necesidad de instalación en el dispositivo del usuario. Puede ofrecer una variedad de funciones y servicios, como procesamiento de formularios, visualización de contenido dinámico, interacción en tiempo real, entre otros.

Frontend (Front End):

• La parte visible y accesible de una aplicación web que los usuarios interactúan directamente. Generalmente involucra tecnologías como HTML, CSS y JavaScript para crear la interfaz de usuario y proporcionar una experiencia interactiva.

Backend (Back End):

• La parte no visible de una aplicación web que maneja la lógica de negocios, la gestión de datos, la autenticación y la interacción con bases de datos u otros servicios externos. Puede estar construido con lenguajes como Python, Ruby, Java, PHP, etc.

Hosting:

• El servicio que proporciona espacio en servidores para alojar y hacer accesibles tus aplicaciones web en Internet. Los proveedores de hosting permiten que tu sitio web esté disponible en línea las 24 horas del día.

Protocolos (HTTP, HTTPS):

• HTTP (Hypertext Transfer Protocol): Un protocolo de comunicación utilizado para transferir datos entre un navegador web y un servidor. Es el protocolo subyacente de la World Wide Web.
• HTTPS (Hypertext Transfer Protocol Secure): Una versión segura de HTTP que utiliza cifrado SSL/TLS para proteger la comunicación entre el navegador y el servidor, garantizando la privacidad y seguridad de los datos transmitidos.

Modelo Cliente - Servidor:

• Un enfoque arquitectónico en el que una aplicación se divide en dos partes principales:
• Cliente: La parte de la aplicación que se ejecuta en el navegador web del usuario y se encarga de la presentación y la interacción.
• Servidor: La parte de la aplicación que se ejecuta en un servidor remoto y maneja la lógica de negocio, la gestión de datos y la comunicación con otros servicios.
• Estos conceptos forman la base de la comprensión de cómo funcionan las aplicaciones web y cómo se comunican a través de Internet para brindar servicios y experiencias a los usuarios.

HERRAMIENTAS PARA EL DESARROLLO DE APLICACIONES WEB

Estas herramientas abarcan diferentes aspectos del desarrollo, desde la gestión de código y la colaboración hasta la optimización y la depuración de aplicaciones. Recuerda que la elección de herramientas puede variar según tus necesidades y preferencias.

Editores de código y entornos de desarrollo integrados (IDEs):

• Visual Studio Code: Un editor de código altamente personalizable y ampliable que es ampliamente utilizado en el desarrollo web.
• Sublime Text: Un editor de texto rápido y liviano con una amplia gama de complementos.
• Atom: Un editor de código de código abierto desarrollado por GitHub.
• WebStorm: Un IDE especializado en desarrollo web desarrollado por JetBrains.

Control de versiones:

• Git: El sistema de control de versiones más popular para el seguimiento de cambios en el código fuente y la colaboración en equipo.
• GitHub: Una plataforma de alojamiento y colaboración para proyectos de desarrollo de software que utilizan Git.
• GitLab: Otra plataforma de alojamiento y gestión de repositorios Git con características de CI/CD integradas.
• Bitbucket: Una plataforma de desarrollo colaborativo basada en Git que también ofrece opciones de repositorios privados.

Herramientas de diseño y prototipado:

• Figma: Una herramienta de diseño de interfaz de usuario (UI) basada en la nube que permite la colaboración en tiempo real.
• Adobe XD: Una aplicación de diseño y prototipado de experiencia de usuario (UX) que facilita la creación de diseños interactivos.
• Sketch: Un software de diseño vectorial ampliamente utilizado en el desarrollo de aplicaciones web y móviles.

Herramientas de gestión de tareas y proyectos:

• Trello: Una herramienta de gestión visual de proyectos que utiliza tableros y tarjetas.
• Asana: Una plataforma de gestión de trabajo y proyectos que ayuda a los equipos a organizar y realizar un seguimiento de las tareas.
• Jira: Una herramienta de seguimiento y gestión de proyectos desarrollada por Atlassian, especialmente útil para equipos de desarrollo de software.

Frameworks y bibliotecas:

• React: Una biblioteca JavaScript para la construcción de interfaces de usuario interactivas.
• Angular: Un framework de JavaScript desarrollado por Google para la creación de aplicaciones web SPA.
• Vue.js: Un framework progresivo para la construcción de interfaces de usuario reactivas.

Herramientas de prueba y depuración:

• Chrome DevTools: Un conjunto de herramientas de desarrollo integradas en el navegador Google Chrome para depurar y perfilar aplicaciones web.
• Postman: Una herramienta para probar APIs y realizar solicitudes HTTP.
• Jest: Un popular framework de pruebas unitarias para aplicaciones JavaScript.

Herramientas de optimización y rendimiento:

• Lighthouse: Una herramienta de código abierto para mejorar la calidad y el rendimiento de las páginas web.
• Webpack: Un potente empaquetador de módulos para aplicaciones web.
• GTMetrix: Una herramienta en línea que analiza el rendimiento y la velocidad de carga de tu sitio web.

Herramientas del Lado del Cliente:

Ventajas:

• Interactividad: Permiten la creación de experiencias interactivas y dinámicas en tiempo real para los usuarios.
• Rápida respuesta: La ejecución de acciones ocurre en el navegador del usuario, lo que puede llevar a una respuesta más rápida y una mejor experiencia de usuario.
• Menor carga en el servidor: Las tareas de procesamiento y renderizado son manejadas por el cliente, reduciendo la carga en el servidor.
• Mayor control sobre la interfaz: Permite un mayor control sobre la presentación y la interfaz de usuario.
• Experiencia de usuario mejorada: Pueden ofrecer animaciones, transiciones suaves y efectos visuales que mejoran la experiencia del usuario.

Desventajas:

• Dependencia del navegador: Las aplicaciones pueden funcionar de manera diferente en diferentes navegadores, lo que requiere pruebas y ajustes adicionales.
• Seguridad limitada: La seguridad de la aplicación depende de medidas implementadas en el lado del servidor.
• Limitaciones de rendimiento: El rendimiento puede verse afectado en dispositivos con recursos limitados.
• Acceso limitado a datos y recursos del sistema: Algunas capacidades del sistema operativo y del dispositivo están fuera del alcance del cliente por motivos de seguridad.

Herramientas del Lado del Servidor:

Ventajas:

• Seguridad: El procesamiento crítico y el acceso a bases de datos y recursos se gestionan en el servidor, lo que proporciona un mayor control de seguridad.
• Escalabilidad: Puedes gestionar mejor la carga y escalar el sistema según sea necesario para acomodar un mayor número de usuarios.
• Menor dependencia del navegador: La mayoría de la lógica de negocio y procesamiento de datos se realiza en el servidor, lo que reduce las diferencias entre navegadores.
• Acceso a recursos del sistema: Puede acceder a recursos y capacidades del sistema operativo que no están disponibles para las aplicaciones del lado del cliente.

Desventajas:

• Mayor latencia: La comunicación entre el cliente y el servidor puede causar un retraso perceptible en la respuesta de la aplicación.
• Mayor carga en el servidor: El servidor debe manejar el procesamiento de datos y las solicitudes de múltiples clientes, lo que puede llevar a una mayor carga.
• Complejidad en la gestión: El mantenimiento y la gestión del servidor, la base de datos y los recursos adicionales pueden ser más complejos.
• Menos interactividad en tiempo real: Puede requerir recargas de página para mostrar cambios en la interfaz o para actualizar los datos.

CONFIGURACIÓN DEL AMBIENTE DE DESARROLLO WEB

Configurar un ambiente de desarrollo web eficiente es esencial para trabajar de manera productiva en la creación de aplicaciones web.

...