La wiki de TempWin

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== Desarrollo del frontend======

<WRAP center round box 80%>
Módulo perteneciente al curso [[informatica:programacion:cursos:desarrollo_web_backend|Desarrollo web back-end]]
</WRAP>

En este módulo se abordará el tema del Desarrollo de aplicaciones completas, en el cual se busca enseñar al usuario cómo construir una aplicación completa, tanto en el frontend como en el backend.

El desarrollo del frontend se enfoca en la creación de una interfaz de usuario amigable y atractiva tanto para el usuario final como para el mantenimiento de la aplicación. Por otro lado, el desarrollo del backend se realiza mediante el patrón de diseño MVC (Modelo-Vista-Controlador) el cual permite separar las diferentes responsabilidades del desarrollo.

Para el desarrollo del backend, se abordará la creación de una base de datos, así como la construcción de los servicios del controlador y del modelo. Además, se incorporarán funcionalidades como pasarelas de pago, en este caso Paypal, y la generación de documentos descargables utilizando la librería DOMPDF.

También se hará hincapié en la generación de casos de prueba y documentación técnica y de usuario para la plataforma, así como en el despliegue de la misma en el servidor.

Por último, se abordarán competencias transversales como la búsqueda y uso de recursos externos, el trabajo en equipo, el trabajo por proyectos y el aprendizaje de metodologías ágiles para el desarrollo de la aplicación.·

===== Frontend para el usuario final =====

En el desarrollo de aplicaciones completas, el frontend para el usuario final es una parte esencial para brindar una buena experiencia de usuario. El frontend es la parte visual y de interacción del software que permite a los usuarios interactuar con la aplicación y consumir sus funcionalidades.

Para el desarrollo del frontend, es necesario utilizar tecnologías como HTML, CSS y JavaScript, así como frameworks o librerías que faciliten el desarrollo y mejoren laexperiencia del usuario.

Uno de los frameworks más populares en la actualidad es Bootstrap, que permite desarrollar interfaces de usuario responsivas y adaptables a diferentes dispositivos y resoluciones de pantalla.

Es importante tener en cuenta que el diseño del frontend debe estar en línea con la identidad visual de la empresa o proyecto, utilizando colores, tipografías y elementos que refuercen la marca.

Un ejemplo sencillo de un frontend para el usuario final sería el siguiente:

<code html>
<!DOCTYPE html>
<html>
<head>
            <title>Mi aplicación</title>
            <!-- Inclusión de los estilos de Bootstrap -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Mi aplicación</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                        <li class="nav-item active">
                        <a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                       <a class="nav-link" href="#">Productos</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#">Contacto</a>
                        </li>
                </ul>
                </div>
        </nav>
        <div class="container">
                <h1>Bienvenidos a mi aplicación</h1>
                <p>Esta es una aplicación de ejemplo</p>
                <button class="btn btn-primary">Ver más</button>
        </div>
        <!-- Inclusión de los scripts de Bootstrap y jQuery -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
</code>

En este ejemplo, se utiliza el framework Bootstrap para construir una barra de navegación y una sección de contenido con un título, un párrafo y un botón. También se incluyen los scripts necesarios para que Bootstrap y jQuery funcionen correctamente.

===== Frontend para mantenimiento de la aplicación =====

En el desarrollo de una aplicación web, es importante no solo pensar en la experiencia del usuario final, sino también en la de los administradores o encargados de mantenimiento de la aplicación. Por lo tanto, es necesario diseñar una interfaz de usuario (frontend) que permita a los administradores gestionar y mantener la aplicación de manera eficiente y sencilla.

Algunas de las características que debería tener un frontend para el mantenimiento de una aplicación web son:

  * **Acceso a la gestión de usuarios y roles**: un sistema de gestión de usuarios y roles es esencial en cualquier aplicación web. El frontend debe permitir a los administradores crear, editar o eliminar usuarios, así como asignarles diferentes roles y permisos.
  * **Gestión de contenido**: la mayoría de aplicaciones web tienen contenido que necesita ser actualizado o modificado de vez en cuando. Por ejemplo, en un sitio web de noticias, los administradores necesitan poder crear, editar o eliminar artículos. En un ecommerce, los administradores deben poder actualizar los productos y su información.
  * **Panel de control**: un panel de control es una herramienta que permite a los administradores ver un resumen de la actividad de la aplicación, incluyendo estadísticas, métricas y gráficos.
  * **Formularios y campos personalizados**: para la creación y edición de contenido, es importante tener formularios y campos personalizados que se adapten a las necesidades específicas de la aplicación.

Un ejemplo de frontend para el mantenimiento de una aplicación web podría ser un panel de administración desarrollado con Bootstrap y jQuery. Este panel podría tener diferentes secciones, como usuarios, contenido, estadísticas y configuración. Cada sección tendría diferentes opciones y formularios que permiten a los administradores gestionar la aplicación.

Por ejemplo, en la sección de usuarios, los administradores podrían ver una lista de todos los usuarios y sus roles, y podrían agregar o eliminar usuarios según sea necesario. En la sección de contenido, los administradores podrían crear o editar artículos y productos, así como subir imágenes y archivos. En la sección de estadísticas, podrían ver métricas como el número de visitas o la tasa de conversión. En la sección de configuración, podrían ajustar diferentes parámetros de la aplicación, como el idioma o la moneda.