Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:cursos:desarrollo_web_backend:desarrollo_frontend [2024/11/18 12:00] – tempwin
+++ informatica:programacion:cursos:desarrollo_web_backend:desarrollo_frontend [2024/11/18 12:06] (actual) – tempwin
@@ Línea 1: / Línea 1: @@
 ====== Desarrollo del frontend======
-<WRAP center round box 60%>
+<WRAP center round box 80%>
 Módulo perteneciente al curso [[informatica:programacion:cursos:desarrollo_web_backend|Desarrollo web back-end]]
 </WRAP>
@@ Línea 27: / Línea 27: @@
 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">
-            <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">
-                <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>
-                        <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>
-        <script
+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.
-src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+===== Frontend para mantenimiento de la aplicación =====
-        <script
+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.
-src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/pop
+Algunas de las características que debería tener un frontend para el mantenimiento de una aplicación web son:
-per.min.js"></script>
+  * **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.
-        <script
+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.
-src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.mi
+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.
-n.js"></script>
-</body>
-</html>
-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.