# data[].attributes.body
Universidad de Panamá

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

# data[].attributes.headline
Desarrollo Front-End en la creación de la interfaz de Usuario y la experiencia de un sitio Web

# data[].attributes.subject
Desarrollo Front-End en la creación de la interfaz de Usuario y la experiencia de un sitio Web

# data[].attributes.body
El desarrollo front-end desempeña un papel crucial en la creación de la interfaz de usuario (UI) y la experiencia del usuario (UX) de un sitio web. A continuación, se detallan sus principales contribuciones:

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.

# data[].attributes.attachment_link.title
DEFINICIONES: DESARROLLO FRONT-END | Blog Somos Sinapsis

# data[].attributes.attachment_link.description
Found on Google from blog.sinapsis.agency

# data[].attributes.body
En el desarrollo front-end, existen varios estándares y directrices que guían las mejores prácticas y aseguran la calidad del código, la accesibilidad y la usabilidad. Algunas de las más relevantes son:

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.

# data[].attributes.attachment_link.title
UX y UI. No se enfrentan, ¡Se complementan! - UXABLES | Blog

# data[].attributes.headline
Mejores Prácticas que se Utilizan al Desarrollar la web Front-End

# data[].attributes.subject
Mejores Prácticas que se Utilizan al Desarrollar la web Front-End

# data[].attributes.body
En el desarrollo web front-end, las mejores prácticas, lenguajes y frameworks son fundamentales para crear aplicaciones eficientes, escalables y mantenibles. Aquí te presento un resumen de los más utilizados:

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.

# data[].attributes.attachment_link.title
Top 10 Front-End Languages For A Successful Developer Career

# data[].attributes.attachment_link.description
Se encontró en Google desde clarusway.com

# data[].attributes.body
Servidores: corresponde a una máquina física o virtual que recopila, aloja, procesa y gestiona los recursos necesarios para ejecutar una aplicación web.

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.

# data[].attributes.headline
Lenguajes y Frameworks que se utilizan habitualmente en el desarrollo web back-end.

# data[].attributes.subject
Lenguajes y Frameworks que se utilizan habitualmente en el desarrollo web back-end.

# data[].attributes.body
JavaScript (Node.js): Uno de los más versátiles, Es muy popular gracias a su rendimiento y a la gran cantidad de librerías y frameworks disponibles.

Python: Conocido por su sintaxis sencilla y legible, es ideal para proyectos de gran escala y aplicaciones de aprendizaje automático.

PHP: Históricamente muy popular, sigue siendo una opción sólida para el desarrollo web.

Java: Un lenguaje robusto y escalable, utilizado en grandes empresas y aplicaciones empresariales.

Ruby: Conocido por su elegancia y productividad, es un framework muy utilizado para crear aplicaciones web rápidamente.

# data[].attributes.headline
Los estándares establecidos y las mejores prácticas en el desarrollo de back-end.

# data[].attributes.subject
Los estándares establecidos y las mejores prácticas en el desarrollo de back-end.

# data[].attributes.body
Estándares Comunes

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.

# data[].attributes.body
- [Servnet](https://www.servnet.mx/blog/backend-y-frontend-partes-fundamentales-de-la-programacion-de-una-aplicacion-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.

# data[].attributes.headline
Comparaciones del desarrollo de front-end y back-end

# data[].attributes.subject
Comparaciones del desarrollo de front-end y back-end

# data[].attributes.body
El desarrollo front-end y back-end son componentes esenciales en la creación de sitios web y aplicaciones, pero cumplen funciones muy diferentes y utilizan tecnologías específicas para cada área.

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.

# data[].attributes.body
El desarrollo front-end se centra en todo lo que los usuarios ven e interactúan directamente en un sitio web o aplicación. Su objetivo principal es crear una interfaz de usuario atractiva, funcional y accesible, asegurando una experiencia de usuario (UX) fluida y coherente en todos los dispositivos y navegadores.

# data[].attributes.body
Las principales tecnologías usadas en el front-end incluyen:

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.

# data[].attributes.body
Los desarrolladores front-end deben asegurarse de que el sitio o aplicación sea visualmente atractivo, responsivo, y fácil de usar. Esto implica trabajar con diseñadores para implementar el diseño gráfico en código, optimizar el rendimiento del sitio y garantizar la compatibilidad entre diferentes navegadores y dispositivos.

# data[].attributes.body
El back-end se encarga de la lógica del servidor, la gestión de bases de datos y la seguridad. Su principal objetivo es garantizar que todo el procesamiento de datos detrás de escena funcione correctamente, proporcionando la infraestructura necesaria para que la parte visual (front-end) funcione sin problemas.

# data[].attributes.body
En el desarrollo back-end se utilizan tecnologías como:

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.

# data[].attributes.body
Los desarrolladores back-end son responsables de diseñar y gestionar la base de datos, crear y mantener la lógica del servidor, y asegurar la correcta autenticación y autorización de usuarios. También se encargan de la integración de servicios externos y optimización del rendimiento del servidor.

# data[].attributes.headline
Distinciones clave de Front-End y Back-End

# data[].attributes.subject
Distinciones clave de Front-End y Back-End

# data[].attributes.body
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.

# data[].attributes.headline
Diferencias entre el desarrollo front-end y back-end

# data[].attributes.subject
Diferencias entre el desarrollo front-end y back-end

# data[].attributes.body
l front-end se refiere a la parte visible de un sitio web con la que los usuarios interactúan directamente. Implica el diseño, la interfaz de usuario (UI) y la experiencia de usuario (UX). Tecnologías como HTML, CSS y JavaScript se utilizan para desarrollar interfaces atractivas y responsivas que mejoran la experiencia del usuario.

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.

# data[].attributes.headline
Ejemplos de impacto en el rendimiento y experiencia de usuario

# data[].attributes.subject
Ejemplos de impacto en el rendimiento y experiencia de usuario

# data[].attributes.body
Velocidad de carga de la página:
Un mal diseño front-end, como el uso ineficiente de recursos (imágenes sin optimizar o demasiados scripts), puede ralentizar considerablemente el tiempo de carga de una página web. Por el contrario, un back-end mal configurado puede no manejar eficientemente las solicitudes, provocando tiempos de respuesta más largos. Un ejemplo claro es Amazon, que optimizó tanto su front-end como su back-end para lograr tiempos de carga ultrarrápidos, lo que aumentó considerablemente sus tasas de conversión y satisfacción del cliente.

Sincronización entre front-end y back-end:
Si un sitio tiene un back-end mal desarrollado que no responde de manera eficiente a las solicitudes del usuario, por ejemplo, en un e-commerce, los usuarios podrían experimentar retrasos al intentar añadir productos al carrito o procesar pagos. Por otro lado, si el front-end está mal diseñado y no gestiona bien las transiciones o respuestas del servidor, puede generar una experiencia confusa o frustrante para el usuario.

Seguridad:
Un buen ejemplo de la interacción entre front-end y back-end es la seguridad. Aunque la mayor parte de la seguridad está del lado del back-end (control de accesos, encriptación de datos), la falta de validaciones en el front-end podría exponer la página a ataques de inyección de código o cross-site scripting (XSS). Un sitio web mal protegido puede dañar su reputación y perder la confianza del usuario.

# data[].attributes.headline
Importancia de comprender estas diferencias para desarrolladores web

# data[].attributes.subject
Importancia de comprender estas diferencias para desarrolladores web

# data[].attributes.body
Para los aspirantes a desarrolladores web, es crucial entender cómo el front-end y el back-end trabajan en conjunto, ya que ambos influyen en el rendimiento general y la experiencia del usuario de un sitio web. Comprender las diferencias permite a los desarrolladores especializarse en uno de los campos (front-end o back-end) o convertirse en desarrolladores full-stack, capaces de abordar ambos aspectos de un proyecto.

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.

# data[].attributes.headline
Contribución de los estándares de desarrollo al éxito de los proyectos

# data[].attributes.subject
Contribución de los estándares de desarrollo al éxito de los proyectos

# data[].attributes.body
Los estándares de desarrollo, tanto en front-end como en back-end, proporcionan guías que mejoran la consistencia, la calidad del código y la seguridad de los proyectos web. Aquí algunos ejemplos de cómo estos estándares contribuyen al éxito de un proyecto:

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.