Plantillas

Página simple

Las usamos para transmitir información estática de menor jerarquía, en comparación a una página de área, y con menor cantidad de contenido.

Acceder a la plantillaopen_in_new

¿A qué llamamos 8 columnas?

En general, en página simple se organiza contenido informativo de forma detallada, sin que implique una acción por parte de la persona usuaria. Eventualmente, puede contener enlaces para redireccionar a otras secciones para que pueda realizar el trámite, inscribirse en el curso o reservar el turno.

Sus características admiten la convivencia de contenido variado, entre lo estático (texto, imágenes, descripciones) y lo accionable (listas, cita, desplegables). Esto es posible porque la plantilla disponibiliza el 70% del ancho de la grilla (8 columnas).

Cuándo usar

  • Para combinar información textual (en formato párrafo, listas y cita) y sumar contenido multimedia como imagen y video.
  • Para organizar información y contenidos en otros formatos que no están contemplados en las otras plantillas del sistema Obelisco.

Cuándo no usar

  • Para informar sobre la gestión de un trámite, recomendamos usar la plantilla página de trámites.
  • Para agrupar información sobre un mismo tema en subtemas, en este caso recomendamos el uso de la plantilla de página libro.
Ejemplo de estructura general

Estructura principal de la plantilla de página simple con el sistema de columnas visible.

Cuerpo de la página

Este módulo tiene como objetivo concentrar el contenido principal de la página. Permite organizar la información y sumar recursos complementarios. Está compuesto por los siguientes elementos:

Elementos de párrafo

Opciones disponibles para redactar, estructurar y dar forma al contenido textual de la página simple:

  • Títulos y subtítulos que pueden ir de "Encabezado 2" a "Encabezado 6", utilizados para organizar y jerarquizar el contenido en secciones, especialmente en textos extensos.
  • Texto general para el desarrollo completo de la información. Permite aplicar estilos de formato como negrita e itálica para jerarquizar y destacar contenido relevante.
  • Enlaces, permite enlazar información complementaria sin extender el texto principal.
  • Listas simples con viñetas o numeración para organizar información, que puede incluir enlace. Las listas con viñetas se utilizan cuando los elementos no siguen un orden secuencial, mientras que las listas numeradas se emplean cuando existe un orden o secuencia definida.
  • Listas simples con enlaces, que pueden tener o no icono de descarga, para enlazar con otras pantallas y descarga de documentación.
  • Cita destacada, debe incluir la frase y, opcionalmente, puede incluir el nombre de la persona autora de la cita.
Ejemplo de estructura general

Elementos multimedia

Opciones disponibles para incorporar recursos audiovisuales que complementan el contenido de la página simple:

  • Permite insertar una imagen puntual entre bloques de texto para acompañar o reforzar una idea específica del contenido. Recomendamos completar el campo de texto alternativo con una breve descripción de la imagen para garantizar la accesibilidad.

    Ejemplo de texto alternativo: "Grupo de personas realizando actividades recreativas al aire libre”.
  • Incrustación de video, permite incorporar contenido audiovisual en la página, ya sea mediante un video remoto (YouTube) o un archivo de video cargado desde el dispositivo. El uso de este elemento es opcional y se recomienda limitarlo a un solo video por publicación.
  • Fotogalería, compuesta por varias imágenes presentadas en una grilla adaptable. El uso es opcional y permite cargar entre 1 y 7 elementos.
    Peso máximo: 400 KB
    Formato permitido: .jpg, .jpeg, .webp, .avif
Ejemplo uso de imagenEjemplo uso de video

Buenas prácticas

check

Redactar utilizando lenguaje claro, evitando tecnicismos innecesarios.

check

Utilizar títulos secundarios cuando haya contenido extenso.

check

Incorporar recursos multimedia solo si aportan información útil o contextual.

check

Verificar enlaces antes de publicar.

Malas prácticas

close

Sobrecargar el contenido con elementos multimedia sin propósito informativo.

close

Insertar bloques extensos de texto sin estructura, listas ni separación.

close

Utilizar imágenes pixeladas o contenido no verificado.

Componentes utilizados

Galería de imágenes

Las imágenes se utilizan como complemento figurativo o ilustrativo de la información del párrafo de texto anterior o posterior, por eso sugerimos que su uso se limite a brindar mayor contexto a la persona usuaria.

En una página simple, las imágenes se ubican antes, después, o entre párrafos de texto, y pueden ser parte de una galería de imágenes a través de una cuadrícula de fotos interactivas y de una vista ampliada con el formato de carrusel. El máximo de imágenes para este tipo de formato es hasta 7 imágenes.

Ejemplos de uso

Ejemplo uso de galeria
check

En la continuación de un párrafo de texto, recomendamos mantener la disposición de 8 columnas para ubicar las imágenes.

Ejemplo uso de parrafo texto
close

En desktop, evitar que las imágenes ocupen el 100% del ancho de la página para no interferir en la lectura e interacción del usuario con la página.

Colapsables

Los colapsables sirven para mostrar y ocultar secciones de contenido relacionado en una página, lo que mejora la experiencia de las personas usuarias.

Variantes disponibles:

  • Colapsable sólo título (obligatorio).
  • Colapsable con título y descripción (opcional).
Ejemplo uso de colapsable

Variantes disponibles de Colapsables para la plantilla de página simple.

Contexto de uso

Para secciones de preguntas frecuentes. La cantidad máxima de opciones para incluir en una sección de preguntas frecuentes es de 6 colapsables, y una cantidad mínima de 4 opciones.

Ejemplo uso de colapsable

Si son menos de 4 preguntas frecuentes recomendamos que no se use el componente Colapsables. En cambio, sí recomendamos redactar la información directamente en el cuerpo.

Ejemplo uso de colapsable

Contenido de texto

Podés consultar las pautas y lineamientos de contenidos para conocer más prácticas recomendadas sobre escritura en interfaces digitales.

Títulos

El título principal de la página es un encabezado H1 que admite hasta 3 líneas de extensión. En cambio, los títulos de las secciones dentro de la página son encabezados H2 y admiten un máximo de 70 caracteres, equivalente a una línea de texto.

En dispositivos desktop, la extensión del contenedor de los encabezados H2 no debe exceder las 8 columnas de la grilla.

Párrafos de texto

En dispositivos desktop, el contenedor del párrafo de texto no debe ser mayor a 8 columnas. Nunca el 100% porque se generan líneas de texto muy largas y perjudica la lectura.

Ejemplo uso de párrafo de texto

Espaciados

Para mantener una estructura clara, legible y alineada al sistema de grillas, recomendamos los siguientes espaciados entre secciones para dispositivos desktop:

  • Espaciado horizontal de 48px: Entre secciones consecuentes del cuerpo de la página, incluye secciones de contenido de texto, secciones de tarjetas, accesos u otro.
  • Espaciado horizontal de 24px: Entre el encabezado H2 de la sección y el contenido en sí mismo, pueden ser tarjetas, accesos, contenido de texto u otro.
Ejemplo de espaciados

Contenido en esta página

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

  <title>Página Simple</title>

  <!-- Obelisco -->
  <!-- OBELISCO CDN's -->
  <!-- Obelisco -->

</head>

<body>
  <main id="main">
    <article class="pb-5 mb-4">
      <header class="bg-light pt-3 pb-5 mb-5">
        <div class="container pt-3 px-3 px-lg-0">
          <nav aria-label="Navegación secundaria" class="py-3">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="#">Inicio</a></li>
              <li class="breadcrumb-item"><a href="#">Formulario de postulación</a></li>
            </ol>
          </nav>
          <div class="row">
            <div class="col-12 col-xl-8">
              <div class="mt-2 pt-1">
                <h1 class="mb-3">Postulación a búsquedas activas</h1>
                <p class="lead">
                  Este formulario está destinado a personas interesadas en postularse a las búsquedas laborales abiertas
                  en el Gobierno de la Ciudad de Buenos Aires. Completarlo lleva entre 5 y 10 minutos.
                </p>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div class="container">
        <div class="col-12 col-xl-8">
          <div class="mb-5">
            <h6 class="mb-3">Antes de empezar</h6>
            <ul class="list-informative-check mb-4">
              <li>Contá con el archivo de tu currículum vitae. </li>
              <li>Contá con el enlace a tu perfil en LinkedIn o portafolio web. </li>
            </ul>
            <div class="d-flex gap-2 mb-4">
              <span class="material-symbols-rounded text-info">info</span>
              <p>Todos los campos son obligatorios, salvo que estén marcados como opcionales.</p>
            </div>
          </div>

          <form id="formData">
            <!-- Datos personales -->
            <div class="mb-5">
              <h3 class="mb-1">Datos personales</h3>
              <hr class="mb-2 mt-0">
              <p class="text-md mb-4 pb-2">
                Información básica para poder identificarte y establecer contacto. Solo se utilizará con fines
                vinculados
                a
                las búsquedas laborales del GCBA.
              </p>
              <div class="d-flex flex-column gap-3">
                <!-- nombre y apellido -->
                <div class="row">
                  <div class="col-12 col-xl-8">
                    <div class="form-label-container">
                      <label for="fullname" class="form-label">Nombre y apellido</label>
                    </div>
                    <input type="text" class="form-control" id="fullname" name="fullname" />
                  </div>
                </div>
                <!-- nombre y apellido -->
                <!-- fecha de nacimiento -->
                <div class="row">
                  <div class="col-12 col-xl-4">
                    <div class="form-label-container">
                      <label for="date" class="form-label">Fecha de nacimiento</label>
                    </div>
                    <input type="date" class="form-control" id="date" name="date" aria-describedby="date-help" />
                  </div>
                </div>
                <!-- fecha de nacimiento -->
                <!-- documento -->
                <div class="row ">
                  <div class="col-12 col-xl-4">
                    <div class="form-label-container">
                      <label for="type_doc" class="form-label">Tipo de documento</label>
                    </div>
                    <select class="form-control form-select" id="type_doc" name="type_doc"
                      aria-label="Default select example">
                      <option selected disabled>Seleccionar…</option>
                      <option value="dni">DNI</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                  <div class="col-12 mt-3 mt-lg-0 col-xl-6">
                    <div class="form-label-container">
                      <label for="nro_dni" class="form-label">Número de documento</label>
                    </div>
                    <input type="text" class="form-control " id="nro_dni" name="nro_dni" aria-describedby="Text"
                      placeholder="Texto" />
                    <p class="form-label-description">
                      Ingresá solo números, sin puntos ni guiones.
                    </p>
                  </div>
                </div>
                <!-- documento -->
                <!-- nro de telefono -->
                <div class="row">
                  <div class="col-12 col-xl-6">
                    <div class="form-label-container ">
                      <label for="nro_tel" class="form-label">
                        Número de teléfono
                      </label>
                    </div>
                    <input type="number" class="form-control " name="nro_tel" aria-describedby="Number"
                      placeholder="11 0000 0000" />
                    <!-- <div class="invalid-feedback">
                        <p>Los datos introducidos son inválidos.</p>
                      </div> -->
                    <p class="form-label-description">
                      Podés ingresar un número de línea o celular, con característica sin el 0 ni el 15.
                    </p>
                  </div>
                </div>
                <!-- nro de telefono -->
              </div>
            </div>
            <!-- Datos personales -->
            <!-- Información laboral y académica -->
            <div class="mb-5">
              <h3 class="mb-1">Información laboral y académica</h3>
              <hr class="mb-2 mt-0">
              <p class="text-md mb-4 pb-2">
                Contanos sobre tu formación y experiencia para poder conocer mejor tu perfil profesional.
              </p>
              <!-- Situación laboral actual -->
              <div class="row">
                <!-- Situación laboral actual -->
                <div class="col-12 col-xl-6">
                  <p class="headline-md  mb-4">Situación laboral actual</p>
                  <!-- input radios -->
                  <div class="form-radio">
                    <input class="form-radio-input" type="radio" name="profession" id="profession-radio-designer"
                      value="diseñador" checked />
                    <label class="form-radio-label" for="profession-radio-designer">
                      Trabajo en relación de dependencia
                    </label>
                  </div>
                  <div class="form-radio">
                    <input class="form-radio-input" type="radio" name="profession" id="profession-radio-freelance"
                      value="independiente" />
                    <label class="form-radio-label" for="profession-radio-freelance">
                      Trabajo de forma independiente
                    </label>
                  </div>
                  <div class="form-radio">
                    <input class="form-radio-input" type="radio" name="profession" id="profession-radio-none"
                      value="no_trabajo" />
                    <label class="form-radio-label" for="profession-radio-none">
                      No trabajo
                    </label>
                  </div>
                  <!-- input radios -->
                </div>
                <!-- Años de antigüedad -->
                <div class="col-12 mt-3">
                  <div class="row">
                    <div class="col-7 col-xl-4">
                      <div class="form-label-container">
                        <label for="anios_antiguedad" class="form-label">
                          Años de antigüedad
                        </label>
                      </div>
                      <input type="number" class="form-control" id="anios_antiguedad" name="anios_antiguedad"
                        placeholder="0" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="row mt-4 pt-2">
                <div class="col-12">
                  <p class="headline-md mb-4">Situación académica actual</p>
                  <!-- selects -->
                  <div class="row mb-4 pb-2 flex-column">
                    <div class="col-12 col-xl-5">
                      <div class="form-label-container">
                        <label for="nivel_estudios" class="form-label">Nivel de estudios alcanzado</label>
                      </div>
                      <select class="form-control form-select mb-3" id="nivel_estudios" name="nivel_estudios">
                        <option value="Seleccionar">Seleccionar</option>
                        <option value="1">Opción</option>
                        <option value="2">Opción</option>
                        <option value="3">Opción</option>
                      </select>
                    </div>

                    <div class="col-12 col-xl-5">

                      <div class="form-label-container mt-3">
                        <label for="estado_actual" class="form-label">Estado actual</label>
                      </div>
                      <select class="form-control form-select mb-3" id="estado_actual" name="estado_actual">
                        <option value="Seleccionar">Seleccionar</option>
                        <option value="1">Opción</option>
                        <option value="2">Opción</option>
                        <option value="3">Opción</option>
                      </select>
                    </div>
                    <div class="col-12 col-xl-5">

                      <div class="form-label-container mt-3">
                        <label for="area_estudio" class="form-label">Área de estudio</label>
                        <span class="badge-forms badge-optional-forms">Opcional</span>
                      </div>
                      <select class="form-control form-select" id="area_estudio" name="area_estudio">
                        <option value="0">Seleccionar</option>
                        <option value="1">Opción 1</option>
                        <option value="2">Opción 2</option>
                        <option value="3">Opción 3</option>
                      </select>
                    </div>
                  </div>
                </div>
                <!-- selects -->

                <!-- input file -->
                <div class="mt-4 pt-2">
                  <div class="col-12 col-xl-8">
                    <div class="form-label-container">
                      <label for="curriculum_file" class="form-label">Cargá tu curriculum vitae</label>
                    </div>
                    <p class="form-label-description">
                      Subí un archivo de máximo 2MB en formato DOC o PDF.
                    </p>
                    <input type="file" class="form-control" id="curriculum_file" name="curriculum_file"
                      accept=".pdf,.doc,.docx" />
                  </div>
                </div>
                <!-- input file -->
              </div>
            </div>
        </div>
        <!-- Información laboral y académica -->
        <!-- Información adicional -->
        <div class="mb-5">
          <div class="col-12 col-xl-8 mt-3">
            <h3 class="mb-1">Información adicional</h3>
            <hr class="mt-0 mb-4 pb-2">
            <div class="row">
              <!-- Situación académica actual -->
              <div class="col-12 col-xl-10">
                <div class="form-label-container">
                  <label for="comentario" class="form-label">¿Querés contarnos algo más?</label>
                  <span class="badge-forms badge-optional-forms">Opcional</span>
                </div>
                <textarea class="form-control" id="comentario" name="comentario"
                  placeholder="¿Querés contarnos algo más?" maxlength="100" rows="5"
                  aria-describedby="TextArea"></textarea>
              </div>
              <!-- Situación académica actual -->
            </div>
          </div>
        </div>
        <!-- Información adicional -->
        <!-- condiciones legales -->
        <div class="col-12">
          <p class="text-md mb-4 pb-2">
            Al enviar el formulario, tu perfil se sumará a nuestra base de datos de búsquedas activas. <br>
            Recibirás un
            correo si tu perfil coincide con alguna convocatoria.
          </p>
          <div class="form-checkbox">
            <input class="form-checkbox-input" type="checkbox" name="ofertas" id="ofertas"
              value="Me interesa recibir nuevas ofertas laborales a mi casilla de correo electrónico." />
            <label class="form-checkbox-label" for="ofertas">
              Me interesa recibir nuevas ofertas laborales a mi casilla de correo electrónico.
            </label>
          </div>
          <div class="form-checkbox">
            <input class="form-checkbox-input" type="checkbox" name="terminos" id="terminos"
              value="Leí y estoy de acuerdo con las Políticas de privacidad." />
            <label class="form-checkbox-label" for="terminos">
              Leí y estoy de acuerdo con las <a href="">Políticas de privacidad</a>.
            </label>
          </div>
        </div>
        <!-- condiciones legales -->
        <button type="submit" class="btn btn-primary mt-4">Enviar postulación</button>
        </form>
      </div>
      </div>
    </article>
  </main>
</body>
</html>

Navegación de pie de página