Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Dashboard
Webdesign

Diseñando un panel de administración con CSS y un toque de JavaScript

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Final product image
What You'll Be Creating

En este nuevo tutorial, crearemos un diseño para un panel administrativo adaptable con CSS y un toque de JavaScript. Para construirlo, tomaremos prestadas algunas ideas del panel de WordPress, como su menú desplegable de la barra lateral.

A lo largo del tutorial enfrentaremos muchos desafíos, pero que nos darán buenas prácticas para mejorar nuestras habilidades de front-end.

Sin más preámbulos, echemos un vistazo a la demostración final del panel administrativo (presiona el botón Collapse al pie de la barra lateral para ver la navegación colapsable en acción y mira la versión de pantalla completa para jugar con su capacidad de respuesta):

1. Comienza con el marcado de la página

Para comenzar el marcado, necesitaremos un SVG, un encabezado y una sección:

SVG Sprites

Como puedes imaginar con cualquier panel de administración, necesitaremos un montón de iconos. Afortunadamente, Envato Elements proporciona una colección cada vez mayor de íconos vectoriales útiles, así que aprovechemos esa biblioteca y descarguemos los íconos llamados Trade and Dashboard Icons.

Trade and Dashboard Icons
Iconos 'Trade and Dashboard' en Envato Elements

En lugar de incluirlos directamente en la página a través de una etiqueta img o svg, vamos un paso más allá y creemos un sprite SVG. Para hacer esto, envolveremos todos los íconos en un contenedor SVG. El contenedor debe estar oculto, por lo que aplicaremos display: none. Si no lo ocultamos, aparecerá una gran área vacía en la parte superior de la página.

Cada icono se colocará dentro de un elemento symbol con un ID único y un atributo viewBox que dependerá del tamaño del icono. Luego podemos renderizar el icono de destino cuando lo necesitemos llamando al elemento use (te mostraré cómo en un minuto).

Por ahora, vamos a familiarizarnos con el marcado necesario para el sprite SVG:

Y realmente, eso es todo lo que necesitamos para crear nuestro sprite SVG en línea.

Cabecera

Continuando con nuestro diseño de panel de administración, veamos el encabezado de la página.

Dentro de él, definiremos un elemento de navegación que servirá como envoltorio para los siguientes elementos:

  • El logo
  • El botón Contraer que alternará el menú en pantallas móviles
  • El menú como tal que contendrá los enlaces del menú, dos encabezados y el botón contraer/expandir. Puede ser más semánticamente correcto tener dos menús individuales y colocar los encabezados fuera de ellos, pero puedes abordar las cosas de manera diferente si lo prefieres.

Así es como se verá en pantallas anchas (>767px):

The header layout

Estructura del encabezado:

Observa dos cosas en el código anterior:

  • Cómo usamos el elemento use para hacer referencia a los iconos objetivos.
  • Los atributos ARIA (aria-expanded, aria-label, aria-hidden) que agregamos a los botones de alternancia o de tipo 'toggle'. Estos atributos nos ayudarán a hacer que el componente sea un poco más accesible. Más adelante, analizaremos cómo se actualizarán sus valores según el estado del botón.

Sección

La sección contendrá dos secciones anidadas.

Sección #1

Dentro de la primera sección, colocaremos el formulario de búsqueda y cierta información (nombre, avatar y notificaciones) sobre el usuario que inició sesión actualmente.

Aquí está su aparición en pantallas anchas (>767px):

The layout of the first section

Estructura de la sección:

Nuevamente, observa que agregamos algunos atributos ARIA al botón de enviar.

Sección 2

Dentro de la segunda sección, solo para enriquecer la demostración con contenido ficticio, colocaremos un grupo de marcadores de posición de artículos. Por lo general, estos pueden contener datos tabulares, gráficos o fuentes de algún tipo.

“Usa un máximo de 5–7 widgets diferentes para crear una vista. De lo contrario, será difícil para un usuario concentrarse y obtener una visión general clara ".

Taras Bakusevych

Aquí está su aparición en pantallas anchas (> 767px):

The layout of the second section
De acuerdo con las mejores prácticas de UX, es posible que no necesites tantas secciones

Estructura de la sección:

2. Definir algunos estilos básicos

Con el marcado para nuestro panel de administración listo, continuaremos con el CSS. El primer paso, como siempre, es especificar algunas variables CSS y estilos comunes de reinicio:

Nota: por simplicidad, no voy a recorrer todas las reglas de CSS en el tutorial. Hay casi 400 líneas de CSS aquí. Si lo deseas, puedes verificarlos todos haciendo clic en la pestaña CSS del proyecto de demostración.

3. Define los estilos del panel administrativo

En este punto, estamos listos para concentrarnos en los estilos de página.

Estilo del encabezado

El encabezado será un elemento de posición fija. Su ancho será de 220px y su altura será igual a la altura de la ventana gráfica. En caso de que su contenido supere la altura de la ventana gráfica, aparecerá una barra de desplazamiento vertical.

El elemento de navegación nav se comportará como un contenedor flexible con una altura mínima del 100%. Recuerda que sus hijos directos son tres:

  1. el logo,
  2. el botón de alternar menú móvil,
  3. y el menú.

El botón de alternar solo será visible en pantallas pequeñas (<768px). Aquí están los estilos que necesitamos:

Sugerencia: en caso de que prefieras un encabezado con una posición absoluta que cubra la altura completa de la página, agrega los siguientes estilos:

Estilos de menú

El menú servirá como un contenedor flexible, y le daremos flex: 1, por lo que se expandirá y cubrirá la altura principal completa.

El último elemento del menú recibirá un margin-top: auto porque debe colocarse en la parte inferior del menú. Este comportamiento será más claro cuando no aparezca la barra de desplazamiento del encabezado. Para probarlo, intenta eliminar algunos elementos del menú o verifica la demostración en una pantalla alta.

Los enlaces y el botón dentro del menú también actuarán como contenedores flexibles y sus contenidos (texto e íconos) deben estar alineados verticalmente.

Los encabezados del menú serán un poco más pequeños en comparación con los otros elementos del menú. Además, aumentaremos el espacio entre sus caracteres.

Aquí hay una parte de los estilos de menú:

Estilos del contenido de la página

Recuerda que la sección .page-content contiene dos subsecciones.

Esta sección se colocará a 220px del lado izquierdo de la ventana gráfica. Además, le daremos width: calc(100% - 220px). Ten en cuenta que el valor de la propiedad left es igual al ancho del encabezado.

Sus estilos:

Buscador y estilos de usuario

Además, recuerda que la sección .search-and-user contiene dos elementos: el formulario de búsqueda y el perfil del administrador como .admin-profile.

Para diseñarlo, utilizaremos la cuadrícula CSS. El formulario de búsqueda cubrirá todo el espacio disponible y habrá una brecha de 50px entre este y su hermano. Ambos hermanos estarán alineados verticalmente.

El botón de enviar dentro del formulario estará absolutamente posicionado. Solo contendrá un icono decorativo y, por lo tanto, necesitaremos un atributo ARIA para permitir que los lectores de pantalla lo interpreten y, por lo tanto, lo hagan accesible.

El .admin-profile, que contiene dos elementos, se comportará como un contenedor flexible con contenido centrado verticalmente. El elemento de insignia (contador) estará absolutamente ubicado dentro de su padre con contenido centrado horizontal y verticalmente.

Aquí hay una parte de los estilos requeridos para esta sección:

Estilos de cuadrícula

Para diseñar los artículos en nuestro panel de administración, aprovecharemos la cuadrícula CSS. Le daremos a todos los artículos una altura fija de 300px. Además del primer y último artículo que cubrirá todo el ancho principal, todos los demás formarán parte de un diseño de dos columnas.

Los estilos asociados:

4. La palanca del Encabezado

Cada vez que hacemos clic en el botón contraer/expandir, el estado del encabezado cambiará. Si se expande, colapsará (dejando solo variantes de íconos de los elementos del menú) y viceversa.

The expandcollapsed state of the header

Ten en cuenta que esta funcionalidad estará disponible solo en pantallas de más de 767px. Para pantallas más pequeñas, nuestro encabezado tendrá un diseño diferente, que veremos en breve.

Durante el estado contraído del encabezado, el cuerpo recibe la clase collapsed. En ese punto, suceden las siguientes cosas:

  • El encabezado se encoge. Su ancho cambia de 220px a 40px.
  • En respuesta a esto, la sección .page-content crece. Específicamente, su ancho cambia de width: calc(100% - 220px) a width: calc(100% - 40px). Además, el valor de la propiedad left se convierte en 4 px en lugar de 220px.
  • El logotipo, los encabezados del menú, el texto de los enlaces del menú y el texto del botón del menú desaparecen.
  • Se actualizan los valores de los atributos aria-expanded y aria-label del botón de alternar. Además, su icono gira 180 grados, por lo que parece un icono de expansión.

Aquí está el código JavaScript que implementa esta funcionalidad:

Y todos los estilos asociados:

5. Mostrar más información sobre los elementos del menú Admin

Ahora vamos un paso más allá y agreguemos otra función nueva al encabezado plegable.

Como discutimos en la sección anterior, cuando el encabezado se contrae, el texto de los enlaces del menú desaparecerá. Esto significa que, en ese punto, solo los iconos SVG serán visibles. Entonces, vamos a mostrar más información mediante un 'Tooltip' para que los usuarios tengan una mejor comprensión de lo que hace cada enlace.

Para hacerlo, cada vez que se pasa el cursor sobre un menú (icono), agregaremos el atributo title, con el valor como texto sin formato. Pero, de nuevo, eso debería suceder solo cuando el encabezado está contraído y el ancho de la ventana es de al menos 768px.

Tooltip

Aquí está el código JavaScript correspondiente:

6. Siendo adaptable

En pantallas de hasta 767px de ancho, nuestra página se verá así:

The mobile layout

Esa es una gran diferencia con respecto a nuestra disposición de la barra lateral, ¿verdad? Destaquemos las diferencias más importantes en comparación con la versión de escritorio:

  • Tanto el encabezado como el contenido de la página .page-content tienen una posición estática position: static y un ancho del 100% width: 100%.
  • La dirección de tipo flex del elemento de navegación nav cambia de columna col a fila row.
  • El botón de alternar el menú desde el móvil se hace visible.
  • El menú está absolutamente ubicado justo debajo del encabezado e inicialmente está oculto. Será visible cada vez que hagamos clic en el botón de alternar.
  • El botón contraer/expandir y el elemento .greeting están ocultos.
  • La sección .search-and-user está absolutamente posicionada y ubicada justo al lado del botón de alternancia del menú móvil.

A continuación puedes ver una parte de los estilos adaptables:


7. Alternar el menú desde el móvil

Cada vez que hacemos clic en el botón de alternar, el estado del menú cambiará. Si se expande, colapsará y viceversa.

The opened state of the mobile menu

Durante el estado expandido del menú, el cuerpo recibe la clase mob-menu-open. En ese punto, suceden las siguientes cosas:

  • Aparece el menú.
  • Se actualizan los valores de los atributos aria-expanded y aria-label del botón de alternar. Además, su icono gira 180 grados, por lo que parece un icono de expansión.

Aquí está el código JavaScript requerido:

Y el CSS asociado:


Conclusión

¡Eso es todo amigos! Construimos con éxito el diseño de una panel de administración completamente funcional. Podrás ampliar esta base para crear todo tipo de interfaces de administración. ¡Espero que hayas disfrutado este viaje tanto como yo!

Solo una última nota. Ciertamente no soy un experto en accesibilidad, pero intenté hacer que este componente sea más accesible agregando algunos atributos comunes de ARIA. Durante este proceso, revisé los paneles de WordPress y Codepen como referencia. Puede haber atributos ARIA adicionales que podrían haberse incluido en el código. Por ejemplo, excluí el atributo aria-controls que es responsable de identificar el contenido relacionado, pero eso fue porque Aria-Controls es caca.

Si me perdí algo, o crees que algunas cosas deberían haberse hecho de manera diferente, házmelo saber en los comentarios a continuación.

¡Como siempre, gracias por leer!

Más recursos de la interfaz de usuario del panel de administración

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.