| Table of Contents | ||||
|---|---|---|---|---|
|
Introducción
El Template Web es una plantilla base que permite crear de forma sencilla aplicaciones web desplegables como proyectos Web en plataforma simplemente configurando un conjunto de endpoints en los ficheros JS de configuración.
...
Plantillas HTML.
Librerías Javascript y CSS de la aplicación (assets).
Plantillas HTML
Al clonar el proyecto, veréis 2 plantillas: index y login. Ambas plantillas son configurables para que se ajusten a las necesidades del proyecto.
...
Cada una de estas pantallas o visualizaciones están encapsuladas en dashboards (explicados más adelante). Estos dashboards son elementos de visualización dinámicos compuestos de gadgets/widgets que interactúan entre sí y cargan datos de forma óptima.
Librerías JavaScript y de estilo CSS
En el proyecto además de las librerías de estilos básicas y de las librerías de JavaScript básicas que se usan en los dashboards para sus gadgets genéricos, es necesario tener, para algunas de las funcionalidades desarrolladas, una serie de librerías open-source adicionales. A continuación, se describen todas las funcionalidades.
...
1er Nivel | 2º Nivel | Descripción de la carpeta |
|  | En la carpeta css están los archivos de estilo. En la carpeta js están los archivos básicos JavaScript para el front-end, que inicializan funcionalidades básicas y de boostrap y de configuración y funcionamiento de las plantillas index y login. En la carpeta media tenemos imágenes, logotipos y fondos de la aplicación front-end. |
|  | En la carpeta base están los archivos de fuentes de iconos usados, además de unos archivos agrupados de varios estilos y varios plugins JavaScript que se usan para campos tipo date, datepicker, datetimepickers, select2, boostrap-select, input mask, jquery-validation, range, sliders, colorpickers, etc. datatables es la carpeta que contiene estilos y JavaScript usados por las tablas de datos usadas en varios dashboards. x-editable contiene un plugin open source para la edición en línea de datos. |
Sistema de configuración
El sistema de configuración de templates tiene dos objetivos principales: el primero, configurar el acceso y el menú de navegación de la aplicación front-end, y el segundo, configurar el aspecto visual de la plantilla index y login.
...
Dentro del application-config.js se declaran dos objetos de configuración JSON, uno para el menú y otro para la configuración de acceso y aspecto del front-end. A continuación, vamos a ver el formato y uso del objeto que describe los menús del sistema de navegación del front-end:
...
Configuración del objeto menú menuJson en application-config.js:
El Objeto menuJson configura los menús de 1º y 2º nivel (submenús) de la aplicación y se compone de las siguientes propiedades:
...
title: indica el titulo o label que se mostrará se pueden indicar en varios idiomas EN,ES,…
icon: indica el icono que se usará para este menú, se pueden usar cualquier icono de los disponibles en las siguientes librerías y con este formato:
fontAwesome, con formato "fa fa-ICONO" (e.j "fa fa-calendar", para calendario)
lineAwesome, con formato "la la-ICONO"
flaticon con formato "flaticon-ICONO"
https://fontawesome.com/icons?d=gallery&m=free, https://icons8.com/line-awesome
...
A continuación, vemos un ejemplo de este objeto de configuración del template:
// FRONTEND MAIN CONFIGURATION |
Despliegue
Una vez has configurado tu template, puedes abrir desde tu equipo el fichero login.html y comprobar que todo funciona.
...