Plantilla de panel de administración Admin LTE Bootstrap

Admin LTE es una plantilla de panel de administración que utiliza varias tecnologías convinadas tales como HTML, Bootstrap, jQuery, etc, proporcionando una gama de componentes receptivos, reutilizables y de uso común que puedes utilizar para desarrollar cualquier tipo de software online que requiera de un panel de control.

Es raro que no haya hablado de esta herramienta antes en el blog ya que llevo usándola más de 5 años en los que he llegado a desarrollar varios proyectos importantes tales como Contabe y Cetasko para uso personal entre otros para algunos clientes.

El caso es que la plantilla tiene un montón de componentes que te van a ayudar un montón en tus desarrollos.

Muchos de los componentes que trae si lo tuvieras que desarrollar a medida, tardarías un montón de tiempo que con esta plantilla te ahorras.

La estructura de la plantilla es muy simple. Dispone de un sidebar, nav, contenido central y pie de página pero me da la sensación de que todo está bien armado y puede ser una buena base para empezar.

En la siguiente imagen puedes ver un ejemplo de Dashboard:

Siendo programador como soy, lo que más me llama la atención es la cantidad de componentes que trae y que tienes a disposición ayudándote a imaginar el panel de control del proyecto que quieres desarrollar.

Los programadores no suelen ser muy imaginativos y este tipo de herramientas nos viene como anillo al dedo ya que la parte visual ya está prácticamente armada.

La misma plantilla es ilustrativa. Desde el menú lateral puedes acceder a todas las opciones y elementos que puedes usar de forma gratuita para tus proyectos con un diseño muy profesional.

Dashboard

En el apartado «Dashboard» puedes visualizar 3 versiones diferentes para elegir la que más se adapte a tu proyecto. A mi personalmente, me gusta mucho el Dashboard v1. Voy quitando y añadiendo elementos según la necesidad.

El Dashboard v1 está compuesto por 4 cajas informativas en la parte superior que se pueden usar para mostrar un resumen de los datos más relevantes del proyecto. Puedes ver una gráfica de ventas en formato area y donut, un mapa de visitantes, un ejemplo de chat en vivo, una lista de tareas y un calendario.

Widgets

En el apartado «Widgets» puedes ver un montón de cajas que permiten mostrar información incluyendo alertas, bloques para chats, redes sociales, etc.

En el apartado «Layout» puedes ver distintos diseños estructurales para el panel de administración:

• Top Navigation -> El contenido se divide en 2 partes, toda la parte superior es la navegación y debajo el contenido.
• Top Navigation Sidebar -> Lo mismo que el anterior pero con un botón que permite abrir una navegación lateral.
• Boxed -> Para los que les gusta el contenido centrado y ajustado a una anchura fija, este layout puede ser la solución.
• Fixed Sidebar -> Para un panel de control esta es la opción que más me atrae. Un menú lateral izquierdo con todos los accesos.
• Fixed Navbar -> Igual que el anterior pero con la barra superior fija.
• Fixed Footer -> Pie de página fijo y siempre visible.
• Collapsed Sidebar -> La barra lateral plegada o colapsada.

En el apartado «ChartJS» podrás ver los distintos gráficos que puedes usar para tu proyecto.

En cuanto a gráficas, la plantilla no tiene úncamente ChartJS, también tiene otras alternativas tales como Flot, Inline y uPlot para que puedas escoger la que mejor se adapte a tu necesidad.

UI Elements

General -> Colores, alertas, tabs y tarjetas, barras de progreso horizontales y verticales, accordion, carousel, paginación, etc.

Icons -> Font Awesome, Iconic Icons y Ion Icons.

Buttons-> Todo lo que Bootstrap nos permite con algunos detalles que te pueden gustar.

Sliders -> Ion Slider y Bootstrap Slider.

Modals & Alerts -> Ventanas modales y alertas sobre acciones muy interesantes para tu proyecto sobre todo cuando guardas formularios con Ajax.

Navbar & Tabs -> Diferentes tipos de barras de navegación horizontal e implementación de pestañas o tabs.

Timeline -> Líneas de tiempo. Muy interesante utilizarlo en proyectos tipo ecommerce para representar los estados de un pedido por ejemplo.

Ribbons -> Los Ribbons son etiquetas que puedes poner de forma diagonal, agradable y profesional por encima de una fotografía. En un proyecto ecommerce se pueden usar para mostrar la etiqueta de nuevo o en oferta en la foto del producto.

Formularios

Elementos genéricos -> Lo mismo que nos facilita Bootstrap pero con algún plugin interesante para mejorar el aspecto de los checkboxes y radio buttons.

Elementos avanzados -> El plugin select2, Input mask, date picker, time picker, color picker, iCheck y Bootstrap Switch. Formularios por pasos y Dropzone.

Editores -> Summernote y CodeMirror.

Validations -> Plugin validate Form.

Tablas

Tablas simples -> tablas con borde, ajustadas al ancho del contenedor, condensadas, con efecto hover, con cabecera fija, tabla con árbol.

DataTables -> Este plugin te muestra tablas con funciones ya incorporadas tales como ordenar por una columna, buscador, paginación, exportar a csv, etc.

jsGrid -> Es otra alternativa a tablas más avanzadas con funcionalidad adicional.

Ejemplos

La plantilla ilustra ejemplos bastante interesantes:

• Calendar: Ejemplo con Fullcalendar y elementos que se pueden mover y arrastrar.
• Gallery: Galerías de imágenes con filtros.
• Kanban Board: Columnas con tareas.
• Mailbox: Dispones de un sistema de comunicación o gestor de emails o mensajes.
• Páginas: factura, perfil, página de producto de ecommerce, proyectos, contacto, FAQ  o preguntas frecuentes
• Extras: Login y registro, menú de idioma, páginas de error, página en blanco y página para empezar.

Buscador

• Buscador simple
• Buscador avanzado

Y algunos detalles más que puedes ver y probar si te descargas la plantilla desde la página oficial de Admin LTE.

Lógicamente, a pensar de que tiene un montón de cosa, solo es una plantilla. Ahora solo falta tu imaginación para agregarle la funcionalidad o la lógica. Yo suelo hacerlo con PHP.