Diseñar un portal con capacidad de respuesta

Encabezado de un portal con capacidad de respuesta

Importante

La personalización de temas no está disponible en dominios freemium (creados a través de la página Try it for free del sitio web de Opendatasoft). Si su dominio es freemium y desea obtener esta función de temas, ¡escríbanos un correo electrónico!

Advertencia

Esta página describe de manera detallada la personalización de la directiva de menú con capacidad de respuesta de la plataforma. Esto supone crear y explicar bastante código HTML y CSS. Necesitará conocimientos prácticos de ambas tecnologías para entender el contenido de esta página.

Para las necesidades básicas de personalización, consulte cómo personalizar la temática del portal.

Un patrón muy común en diseño gráfico consiste en disponer el menú de encabezado oculto en pantallas pequeñas y sustituirlo por un botón de alternancia, normalmente con el famoso icono de hamburguesa hamburger.

Al hacer clic en este botón se abre o cierra un cajón con todos los elementos de menú. Este comportamiento se puede ver en el repositorio de datos central de Opendatasoft y en todos los portales nuevos.

../../_images/responsive-menus__data-collapsed.png

Cajón cerrado

../../_images/responsive-menus__data-expanded.png

Cajón abierto

Implementación

Implementar este comportamiento normalmente significa recurrir intensamente a consultas de medios, lo que equivale a unas reglas CSS que se aplican tan solo para un ancho de pantalla determinado. Con objeto de facilitar esta tarea, Opendatasoft facilita una práctica directiva llamada ods-responsive-menu para usar en el encabezado tal como se indica a continuación.

<nav class="ods-front-header" ods-responsive-menu breakpoint="1000">
    <ods-responsive-menu-placeholder>
        <!-- content displayed only below the 1000px breakpoint -->
    </ods-responsive-menu-placeholder>
    <ods-responsive-menu-collapsible>
        <!-- content displayed normally above the 1000px breakpoint -->
        <!-- and collapsed within the drawer below the 1000px breakpoint -->
    </ods-responsive-menu-collapsible>
</nav>

En realidad, esta directiva es un conjunto de 3 directivas:

  • ods-responsive-menu (directiva de atributo utilizada como atributo de otra etiqueta html)

    Se emplea para especificar (mediante el atributo breakpoint) el ancho de pantalla (en píxeles) por debajo del cual debería aparecer el cajón y por encima del cual el contenido debería visualizarse normalmente.

  • ods-responsive-menu-placeholder (directiva de elemento utilizada como etiqueta html)

    Envuelve el contenido que será invisible salvo que se esté por debajo del punto de interrupción.

  • ods-responsive-menu-collapsible (directiva de elemento)

    Envuelve el contenido que se visualizará normalmente por encima del punto de interrupción y se contraerá dentro del cajón en caso de estar por debajo del mismo.

Estilos de escritura para el contenido del encabezado contraído

Pasar de un diseño horizontal a otro vertical acarrea bastantes cambios gráficos, como demuestra el encabezado predeterminado de la plataforma.

../../_images/responsive-menus__header-desktop.png

Encabezado de escritorio.

../../_images/responsive-menus__header-mobile.png

Encabezado de dispositivo móvil.

Para que pueda cambiar el estilo en consecuencia, el elemento ods-responsive-menu-collapsible envolverá el contenido con .ods-responsive-menu-collapsible--collapsed únicamente cuando la pantalla sea más pequeña que el punto de interrupción. Esto permite separar claramente el estilo para los 2 estilos de diseño (horizontal y vertical).

.my-menu-class {
    /* horizontal style */
}
.ods-responsive-menu-collapsible--collapsed .my-menu-class {
    /* vertical style */
}

Estilos de escritura para el cajón

Si desea personalizar la apariencia general del cajón, tendrá que saber el nombre de las clases que se aplican a los elementos creados por las 3 directivas. El ejemplo de código anterior se presentará del modo siguiente:

<nav class="ods-front-header" ods-responsive-menu breakpoint="1000">
    <div class="ods-responsive-menu-placeholder">
        <!-- content displayed only below the 1000px breakpoint -->
    </div>
    <div class="ods-responsive-menu-collapsible">
        <div class="ods-responsive-menu-collapsible__backdrop"></div>
        <div class="ods-responsive-menu-collapsible__container">
            <div class="ods-responsive-menu-collapsible__toggle">
                <button class="ods-responsive-menu-collapsible__toggle-button">
                    <i class="fa fa-close"></i>
                </button>
            </div>
            <div class="ods-responsive-menu-collapsible__content">
                <!-- content displayed normally above the 1000px breakpoint -->
                <!-- and collapsed within the drawer below the 1000px breakpoint -->
            </div>
        </div>
    </div>
</nav>

Además, el elemento .ods-responsive-menu-collapsible obtendrá la clase .ods-responsive-menu-collapsible--collapsed cuando el ancho de pantalla esté por debajo del punto de interrupción y la clase .ods-responsive-menu-collapsible--expanded para señalar cuando el usuario desee que se visualice el menú.

Diseños de página con capacidad de respuesta

Como muchos sitios web, el portal de Opendatasoft utiliza un diseño de cuadrícula para colocar los elementos. Una cuadrícula es una intersección de filas y columnas con un ancho predefinido, que se utilizará para disponer los elementos en un diseño. Esta herramienta de diseño de uso frecuente se ha adaptado al diseño web, primero mediante tablas y poco después con elementos div estándar.

Si ya está familiarizado con el concepto global de los diseños de cuadrícula, basta decir que el sistema de cuadrículas de Opendatasoft se basa ampliamente en el marco CSS de Bootstrap. Puede consultar la lista de clases disponibles a continuación.

Conceptos y terminología

El diseño de cuadrícula de Opendatasoft es un diseño de 12 columnas, lo que significa que las celdas de la cuadrícula pueden abarcar de 1 a 12 columnas a la vez.

Un diseño de cuadrícula se fundamenta en 3 tipos de elementos: contenedores, filas y columnas. Los contenedores definen el ancho global del diseño, las filas agrupan las celdas, y las columnas ocupan una doceava parte del ancho del contenedor. En consecuencia, las celdas se definen por el número de columnas que abarcan y se anidan en filas, que a su vez se anidan en contenedores.

Convertido en código html:

 <div class="container">
    <div class="row">
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
    </div>
    <div class="row">
        <div class="col-xs-8">col-8</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-3">col-3</div>
    </div>
    <div class="row">
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-2">col-2</div>
        <div class="col-xs-3">col-3</div>
        <div class="col-xs-4">col-4</div>
        <div class="col-xs-2">col-2</div>
    </div>
</div>

La presentación será la siguiente (con colores y etiquetas añadidas por medio de CSS específicamente para estos ejemplos):

../../_images/grid-layouts__concept.png

Por supuesto, puede especificar celdas que abarquen menos de 12 columnas; en ese caso quedará espacio en blanco al final. Si abarcan más de 12 columnas, las celdas se ajustan y se crea una línea nueva en la fila.

En consecuencia, esto:

<div class="container">
    <div class="row">
        <div class="col-xs-4">col-4</div>
        <div class="col-xs-3">col-3</div>
        <div class="col-xs-2">col-2</div>
        <div class="col-xs-1">col-1</div>
    </div>
    <div class="row">
        <div class="col-xs-8">col-8</div>
        <div class="col-xs-6">col-6</div>
    </div>
</div>

Se presentará del modo siguiente:

../../_images/grid-layouts__overflow.png

Diseños de cuadrícula con capacidad de respuesta

En diseño web, el diseño con capacidad de respuesta significa que el diseño se adapta al ancho de la pantalla en que se visualiza. Más concretamente, responde al ancho de la ventanilla del dispositivo, es decir, el espacio disponible para la presentación o el ancho de la ventana del explorador.

Los diseños con capacidad de respuesta funcionan definiendo puntos de interrupción, anchos en píxeles que señalan los niveles en que cambiará el diseño. En la plataforma Opendatasoft, se definen 3 puntos de interrupción (que definen 4 modos) que se pueden personalizar a través del tema. Estos modos son: muy pequeño, pequeño, mediano y grande (denominados también móvil, tableta, escritorio y escritorio grande).

Un diseño de cuadrícula está pensado para un ancho de ventana determinado, pero rápidamente puede resultar inapropiado para otros formatos de pantalla. Por ejemplo, un diseño muy detallado de 12 columnas tendrá una presentación pésima en una pantalla minúscula, con todo el contenido apiñado en minúsculas celdas de una doceava parte del poco espacio disponible. Por contra, queremos que el diseño se reorganice cuando el modo cambie.

Puede que haya observado en los fragmentos de código anteriores que los nombres de clase de las celdas <div class="col-xs-6">col-6</div> contienen xs justo antes del número de columnas que debe abarcar la celda. Esto indica al explorador que, en modo muy pequeño, la celda debe abarcar 6 de las 12 superminúsculas columnas. Sin embargo, podemos añadir clases especificando cómo deseamos que se comporte el diseño en otros modos. Por ejemplo:

<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">my responsive cell</div>

De este modo, la celda abarcará 6 columnas en modo muy pequeño, 4 en modo pequeño, 2 en modo mediano y 1 sola en modo grande.

No obstante, no tiene que especificar los 4 niveles. De manera predeterminada, las clases establecen una extensión de columna estándar de 12 columnas por debajo de su propio modo de visualización y mantienen su extensión de columna especificada para los modos de visualización más grandes. Por lo tanto, <div class="col-md-4"></div> equivale a <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"></div>, y <div class="col-sm-6 col-lg-3"></div> equivale a <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"></div>.

Clases disponibles

.container          // width limited to size of the small-to-medium breakpoint
.container-fluid    // full width container

.row

.col-xs-1, .col-xs-2, .col-xs-3, ... .col-xs-12
.col-sm-1, .col-sm-2, .col-sm-3, ... .col-sm-12
.col-md-1, .col-md-2, .col-md-3, ... .col-md-12
.col-lg-1, .col-lg-2, .col-lg-3, ... .col-lg-12