Para que un sitio web o aplicación funcione de manera efectiva, el front-end y el back-end deben trabajar en conjunto. Por ejemplo, cuando un usuario rellena un formulario en el front-end, el back-end se encarga de procesar esa información, almacenarla en una base de datos, y devolver una respuesta que se muestra de nuevo en la interfaz del usuario.

• HTML: Para estructurar el contenido.

• CSS: Para dar estilo y diseño al contenido.

• JavaScript: Para agregar interactividad.

• Frameworks y bibliotecas: Como React, Angular, y Vue.js, que facilitan la creación de interfaces dinámicas y complejas.

• Lenguajes de programación: Python, Java, Ruby, PHP.

• Bases de datos: MySQL, PostgreSQL, MongoDB.

• Servidores: Apache, Nginx.

• APIs: Restful APIs para la comunicación entre el front-end y back-end.

• Frameworks: Django, Express.js, Ruby on Rails.

1. Visibilidad: El front-end es lo que los usuarios ven e interactúan directamente, mientras que el back-end funciona detrás de escena.

2. Lenguajes y Tecnologías: Las tecnologías y lenguajes utilizados en cada área son diferentes y especializadas para sus respectivas funciones.

3. Responsabilidades: El front-end se enfoca en la interfaz y la experiencia del usuario, mientras que el back-end gestiona la lógica de negocio, bases de datos y seguridad.

Por lo que, ambos son partes cruciales del desarrollo web, cada uno con sus propias herramientas y objetivos, pero que deben colaborar estrechamente para crear una aplicación web completamente funcional y eficiente.

Lógica de aplicación: es la secuencia de operaciones que los programadores codifican en el backend para terminar las tareas.

Frameworks: son las guías que se usan al estructurar el código, lógica y otros aspectos relacionados con la arquitectura web, son plantillas para el backend, que utilizan los programadores para que la escritura y edición del código de su servidor se les faciliten.

Bases de datos: contienen la información a la que acceden los servidores y así completar funciones directas del sitio web, además disponen de opciones para clasificar la información a la que acceden los usuarios.

APIs: permiten que los programas de software establezcan comunicación con otros servidores y bases de datos con el objetivo de intercambiar información.

• RESTful APIs: Seguir los principios REST para diseñar APIs que sean fáciles de usar y entender.

• JSON: Utilizar JSON como formato de intercambio de datos por su simplicidad y compatibilidad.

• HTTP/HTTPS: Asegurar que todas las comunicaciones se realicen a través de HTTPS para proteger los datos en tránsito.

Mejores Prácticas en el Desarrollo de Back-End

Seguridad

Implementar mecanismos robustos para verificar la identidad de los usuarios y controlar el acceso a los recursos, proteger datos tanto en tránsito como en reposo utilizando técnicas de encriptación.

Rendimiento

distribuir la carga de trabajo entre múltiples servidores para manejar un mayor tráfico.

implementar técnicas de caching para reducir la carga en el servidor y mejorar la velocidad de respuesta.

Buenas Prácticas de Desarrollo

Utilizar sistemas de control de versiones como Git para gestionar el código fuente.

mantener las dependencias y bibliotecas actualizadas para aprovechar las mejoras de seguridad y rendimiento.

Por otro lado, el back-end es la parte del sitio web que maneja la lógica del servidor, bases de datos y la comunicación entre el cliente y el servidor. El back-end se asegura de que la información solicitada desde el front-end se recupere, procese y entregue correctamente, utilizando tecnologías como PHP, Node.js, Python, bases de datos SQL o NoSQL, y servidores.

Además, en la industria web, la capacidad de comunicar eficazmente entre equipos de desarrollo front-end y back-end es esencial para evitar malentendidos que podrían generar errores en el producto final. Conocer ambos lados permite que los equipos colaboren de manera más eficiente y reduzcan los tiempos de desarrollo.

1. Rendimiento:
   El uso de estándares como minificación de CSS/JS o el lazy loading en el front-end optimiza el rendimiento de la página. En el back-end, el uso de patrones como RESTful APIs permite una comunicación eficiente entre el servidor y el cliente, mejorando la escalabilidad y la velocidad.

2. Seguridad:
   Adoptar estándares de codificación segura en el back-end, como el uso de HTTPS, manejo seguro de sesiones y protección contra ataques CSRF, aumenta significativamente la seguridad del sitio. Un back-end seguro con un front-end que sigue las mejores prácticas de validación de formularios crea un entorno seguro para los usuarios.

3. Escalabilidad y mantenibilidad:
   Siguiendo estándares como el uso de arquitecturas modulares y código bien documentado en ambos lados, el proyecto se vuelve más fácil de escalar y mantener a lo largo del tiempo. Equipos grandes pueden trabajar de manera más eficiente en la actualización y mejora continua de las aplicaciones.

1. HTML y CSS

- HTML5: Seguir las especificaciones de HTML5, que incluyen elementos semánticos y atributos que mejoran la accesibilidad y la SEO.

- CSS3: Utilizar las normas de CSS3 para crear estilos avanzados y asegurar la compatibilidad entre navegadores.

2. Accesibilidad

- WCAG (Web Content Accessibility Guidelines): Directrices elaboradas por el W3C para hacer que el contenido web sea más accesible para personas con discapacidades. Esto incluye el uso de texto alternativo para imágenes, etiquetas de formulario adecuadas y navegación por teclado.

3. Usabilidad

- Heurísticas de Usabilidad de Nielsen: Un conjunto de principios que ayudan a evaluar la usabilidad de un sitio web, incluyendo la visibilidad del estado del sistema, la correspondencia entre el sistema y el mundo real, y la consistencia y estándares.

4. Performance

-Principios de optimización de rendimiento: Incluyen prácticas como la minimización de archivos CSS y JavaScript, el uso de imágenes optimizadas y el uso de técnicas de carga diferida (lazy loading) para mejorar la velocidad de carga.

5. Estandarización de Código

-Guías de Estilo: Muchas organizaciones utilizan guías de estilo específicas para HTML, CSS y JavaScript (por ejemplo, Google JavaScript Style Guide, Airbnb JavaScript Style Guide) que establecen convenciones de codificación, formato y estructura.

6.Control de Versiones

- Git: Seguir las mejores prácticas en el uso de sistemas de control de versiones, como Git, para gestionar el código fuente, realizar revisiones y facilitar la colaboración entre equipos.

7.Responsive Design

- Mobile-First: Adoptar un enfoque de diseño "mobile-first", donde el diseño se crea inicialmente para dispositivos móviles y luego se adapta a pantallas más grandes.

8.Frameworks y Componentes

- Uso de Frameworks: Seguir las directrices específicas de frameworks como React, Angular o Vue.js en cuanto a la estructura de componentes, el manejo del estado y el enrutamiento.

9. SEO (Search Engine Optimization)

- Mejores Prácticas SEO: Implementar prácticas que mejoren la visibilidad en motores de búsqueda, como el uso de etiquetas meta adecuadas, URLs amigables y contenido estructurado.

10. Documentación y Testing

- Documentación: Mantener una documentación clara y completa del código y las funcionalidades implementadas.

- Pruebas: Realizar pruebas unitarias y de integración utilizando herramientas como Jest, Mocha o Cypress para asegurar la calidad del código.

Creación de Interfaz de Usuario (UI)

1. Diseño Visual: Los desarrolladores front-end implementan los diseños creados por los diseñadores gráficos, utilizando HTML, CSS y JavaScript. Esto incluye la disposición de elementos, la selección de colores, tipografías y otros aspectos visuales.

2. Interactividad: A través de JavaScript y bibliotecas como React o Vue.js, los desarrolladores añaden interactividad a la interfaz. Esto incluye efectos de animación, formularios dinámicos y respuestas a eventos del usuario, como clics y desplazamientos.

3. Consistencia: Un buen desarrollo front-end asegura que la interfaz sea consistente en todas las páginas del sitio, lo que ayuda a los usuarios a navegar sin problemas y entender cómo interactuar con la aplicación.

Experiencia del Usuario (UX)

1. Usabilidad: Los desarrolladores front-end aplican principios de usabilidad, asegurando que la navegación sea intuitiva y que los elementos interactivos sean fáciles de usar. Esto incluye la disposición lógica de menús, botones y enlaces.

2. Accesibilidad: Parte del rol del front-end es garantizar que el sitio sea accesible para todos los usuarios, incluidas aquellas personas con discapacidades. Esto implica seguir pautas de accesibilidad web (como WCAG) y utilizar etiquetas semánticas adecuadas.

3. Rendimiento: Un sitio web rápido y eficiente mejora la experiencia del usuario. Los desarrolladores front-end optimizan el rendimiento mediante la minimización de archivos, la carga diferida de recursos y el uso eficiente de las solicitudes al servidor.

4. Adaptabilidad: Con el diseño responsivo, el desarrollo front-end permite que el sitio web se ajuste a diferentes dispositivos y tamaños de pantalla, ofreciendo una experiencia de usuario consistente, ya sea en computadoras de escritorio, tabletas o teléfonos móviles.

5. Feedback del Usuario: La implementación de elementos como mensajes de error, confirmaciones y notificaciones ayuda a los usuarios a entender las acciones que están realizando y a recibir información sobre el estado de sus interacciones con el sitio.

Mejores Prácticas

1. Responsive Design: Asegurarse de que el sitio se vea bien en diferentes dispositivos y tamaños de pantalla.

2. Accesibilidad: Implementar prácticas para que las aplicaciones sean utilizables por personas con discapacidades.

3. Optimización de Rendimiento: Minimizar el tamaño de los archivos, optimizar imágenes y utilizar técnicas de carga diferida (lazy loading).

Lenguajes

1. HTML: Lenguaje de marcado utilizado para estructurar el contenido de la web.

2. JavaScript: Lenguaje de programación que permite agregar interactividad y dinamismo a las páginas web.

Frameworks y Bibliotecas

1. React: Biblioteca de JavaScript para construir interfaces de usuario, especialmente aplicaciones de una sola página (SPA).

2. Vue.js: Framework progresivo para construir interfaces de usuario y aplicaciones de una sola página.

3. Angular: Framework completo para el desarrollo de aplicaciones web, mantenido por Google.

Facultad de Ciencias Naturales, Exactas y Tecnología

II semestre 2024

Mural Virtual

Estudiante:

Amathy Batista/8-935-994

Tomas Labastides/3-753-287

Leonardo Lindo/3-752-1015

Brittany Tamariz / 8-1014-1678

Profesora:

Yajaira Castillo

Asignatura:

Diseños Básicos de Página Web

- [EDteam](https://ed.team/blog/que-es-backend-y-frontend)

- [Laboratoria](https://hub.laboratoria.la/front-end-vs-back-end-cual-es-la-diferencia)

- [Universidad Europea](https://universidadeuropea.com/blog/diferencia-front-end-y-back-end)

Platzi. (n.d.). ¿Qué es frontend y backend? Platzi. https://platzi.com/blog/que-es-frontend-y-backend/

Gluo. (2021, 22 de junio). Backend: ¿qué es y para qué sirve? Gluo. https://www.gluo.mx/blog/backend-que-es-y-para-que-sirve

• Security Best Practices in Web Development:
  El Open Web Application Security Project (OWASP) proporciona una lista de los 10 principales riesgos de seguridad web que pueden afectar tanto el front-end como el back-end, destacando la importancia de los estándares de seguridad.
  Fuente: OWASP, "Top Ten Security Risks," OWASP Foundation.

• RESTful APIs and Scalability:
  El uso de APIs RESTful es una práctica estándar en el desarrollo back-end moderno. Promueve la escalabilidad y la interoperabilidad entre sistemas.
  Fuente: Fielding, R., "Architectural Styles and the Design of Network-based Software Architectures," Doctoral dissertation, University of California, Irvine, 2000.