Introducción

En este espacio encontrará ejemplos de los controles que se pueden utilizar para dar formato a los contenidos del documento y para construir rápidamente actividades, además de instrucciones para usar los controles e información para estandarizar el proceso de montaje.

Esta plantilla está diseñada para simplificar el montaje de los documentos, soportando el empaquetamiento SCORM, reduciendo los conocimientos técnicos necesarios para el montaje y/o personalización, entre otras características operativas; no obstante, dado que su montaje se da mediante HTML/CSS, es preciso tener conocimientos básicos de los mismos y respetar las definiciones y reglas que se hacen en cada sección ya que un error en el HTML puede hacer inservible la plantilla completa.

Páginas

Las páginas son los bloques principales que dividen el contenido. Cada página es un elemento section dentro del elemento main. Las páginas tienen los siguientes atributos especiales:

• id: El identificador único que servirá como referencia para enlazarlo con los menús u otros enlaces.
• ptitle (opcional): Un título que identificará la página de cara al lector. Si el título se establece y en el documento hay un contenedor con la clase page-title, el título se agrega en dicho contenedor cuando la página se hace activa.

Las páginas tienen una única división que son las subpáginas. Toda página debe tener como mínimo una subpágina. La primera o única subpágina de una página es la que se muestra en un primer momento cuando se abre la página. Las subpáginas son elementos de tipo div con la clase subpage.

A las páginas se puede llegar desde un menú o desde un vínculo dentro del contenido. A continuación se muestra como ejemplo una serie de enlaces apuntando a páginas específicas utilizando su identificador único. Sin embargo, la acción de vincular se puede hacer en otros elementos HTML, no necesariamente enlaces.

1. Textos especiales
2. Multimedia
3. Formato de contenido
4. Actividades
5. Referencias

Para realizar la acción anterior basta con agregar a cualquier elemento el atributo data-page con el valor igual al identificador de la página a cargar. Ejemplo:

    <a href="#" data-page="pag-textos">Textos especiales</a>

También se puede ir a un lugar dentro de una página agregando al elemento el atributo adicional data-section con el valor igual al selector de un lugar en la página. Ejemplo:
Ir directamente al tipo de actividad "Crucigrama".

    Ir directamente al tipo de actividad "<a href="#" data-page="pag-actividades" data-section="#subpage-act-crucigrama">Crucigrama</a>"

Dispositivos

Al momento de mostrar el contenido no se hace una detección real de dispositivos sino que se asumen dos posibilidades dependiendo del ancho del navegador desde el que se visita el documento. La primera es la por defecto o de escritorio y la segunda es la de móvil. Por defecto se asume que un dispositivo es móvil si tiene un ancho inferior a 512 pixeles, aunque ese valor es configurable mediante el atributo data-mobile-mode definido en la etiqueta body. Dicho atributo acepta los valores: 0 o false para no separar los dispositivos sino utilizar únicamente el modo de escritorio; true para utilizar la configuración por defecto; o un valor numérico indicando el ancho en pixeles que determina el límite que separa ambos modos, sólo el número, sin unidades de medida. Si no se establece el atributo, se utiliza la configuración por defecto.

La detección no se hace considerando los tipos de dispositivos dadas muchas razones operativas, entre ellas que sin importar el dispositivo que se tenga, muchas acciones que se realizan están sujetas al espacio disponible en pantalla y en algunos casos es posible que incluso un dispositivo móvil tenga mayor resolución que algunos equipos de escritorio. Además, con las pantallas táctiles se eliminó una de las características diferenciadoras de los móviles como es el "tocar" y así van apareciendo características técnicas que difuminan cada vez más la diferencia entre ambos tipos de dispositivos.

Para indicar contenidos que se muestran en un tipo de dispositivo y no en el otro, se pueden utilizar las clases: onlymobile o notmobile. Por ejemplo:

<strong>
  Está en modo
  "<span class="onlymobile">dispositivo móvil</span>
  <span class="notmobile">escritorio</span>"
</strong>
                    

El código anterior se verá diferente a continuación según el tipo de dispositivo (ancho, realmente) desde el que esté visualizando este contenido: Está en modo "dispositivo móvilescritorio".

Otras configuraciones

Se encuentran disponibles otros parámetros de configuración para definir comportamientos del documento. A continuación se presenta una descripción de cada uno de ellos, considerando que deben ser definidos como atributos en la etiqueta body, además, todos son opcionales y en caso de no ser definidos se aplicará el valor por defecto.

• data-debug="[true | false]": Coloca el documento en modo depuración. Es útil sobre todo para el montaje y antes de deshabilitarlo se debe minificar los estilos CSS.
• data-display-mode="[onlypages | slides]": Determina si el contenido es mostrado cada subpágina a la vez (slides) o si se puestran todas las subpáginas en una misma página (onlypages).
• data-approve-limit="[número]": Un valor numérico que indica el porcentaje correspondiente al límite inferior con el cual se aprueba una actividad. Esta información determina como se muestran algunos mensajes de retroalimentación y como se comportan algunas actividades. El valor por defecto es 100, es decir, una actividad debe estar correcta en un 100% para considerarse completada.
• data-activities-percentaje="[número]": Un valor numérico que indica el porcentaje que se le asigna como peso a la calificación obtenida en las actividades, el porcentaje restante se asigna a la revisión/visita de las páginas y subpáginas del documento. Es de considerar que solamente se computa la calificación más alta obtenida en la realización de una actividad, independiente de los demás intentos. Si el documento se encuentra como SCORM, para que se considere completado se debe aprobar el 100%. El valor por defecto es 60, es decir, el computo de los resultados obtenidos en las actividades aporta el 60% del progreso y la navegación por los contenidos aporta el 40% restante.
• data-model="[scorm | page]": Define el tipo de modelo elegido para ejecutar el paquete. Por defecto se utiliza un modelo SCORM lo que indica que se intenta la conexión con el LMS.

Elementos comunes

A continuación, algunos elementos genéricos que se utilizan en diferentes momentos cuando se interactúa con los contenidos. Al lado de cada uno se muestra su respectiva etiqueta. No se incluye el encabezado de nivel 1 ya que se utiliza como título principal y solamente debe haber uno en todo el documento.

Encabezado de nivel 2 (h2)

Encabezado de nivel 3 (h3)

Encabezado de nivel 4 (h4)

Encabezado de nivel 5 (h5)

Apariencia de los enlaces (a).

Apariencia de un texto destacado (strong).

Apariencia de un texto de énfasis (em).

Apariencia de las citas cortas (cite).

Bloques de texto

Sirven para dar énfasis o categorizar los tipos de textos especiales. Para utilizarlos basta con agregar a un elemento div la clase box-text y para indicar el tipo de texto se utiliza una marca personal, de las cuales se encuentran definidas por defecto las siguiente: important, example, note.

Para asignar un título a un bloque, se utiliza el atributo label.

Importante

<div class="box-text important" label="Importante">
  <p>
    Acá un párrafo importante,
    del que se requiere hacer énfasis.
  </p>
</div>

Ejemplos

<div class="box-text example" label="Ejemplo">
  <p>
    Acá un párrafo de ejemplo.
  </p>
</div>
                        

Anotaciones

<div class="box-text note" label="Nota">
  <p>
    Acá una anotación.
  </p>
</div>
                        

Enlaces

<div class="box-text link" label="Enlace">
  <p>
    Acá un enlace.
  </p>
</div>
                        

Conexión

<div class="box-text connection">
  <p>
    Acá un párrafo de conexión.
  </p>
</div>
                        

Actividad

<div class="box-text activity" label="Actividad de aprendizaje">
  <p>
    Acá la descripción de la actividad.
  </p>
</div>
                        

Instrucciones

Son contenidos simples que se utilizan para dar indicaciones en algún punto del contenido, como por ejemplo donde hay una acción que realizar como pasar el mouse sobre un elemento. La instrucción se define agregando la clase instruction a un elemento html.

Las instrucciones son de diferentes tipos. El tipo se indica mediante el atributo type el cuál puede tener uno de los siguientes valores:

• info: para las instrucciones de tipo informativo.
• danger: para las instrucciones que indican peligro.
• alert: para las instrucciones de alerta.
• none: para eliminar la indicación de tipo de instrucción.
• No indique el tipo para las instrucciones que sean de ayuda ya que son las utilizadas por defecto.

<div class="instruction">
  Una instrucción por defecto (ayuda).
</div>

<div class="instruction" type="info">
  Una instrucción de tipo informativo.
</div>

Enlaces no enlaces

Para elementos que no son "a" y deben abrir un enlace, utilizar la clase open-url y colocar el atributo data-url para especificar la dirección. Siempre abre en ventana nueva.

<button class="open-url" data-url="http://google.com">
  Clic para ir a Google
</button>

Abrir contenido en ventana modal

Para abrir contenidos en ventanas modales dentro del mismo objeto. Se agrega la clase w-content-controler al elemento que debe abrir la ventana (origen), por defecto con el evento clic. No tiene que ser botón o enlace, puede ser cualquier elemento. Se debe establecer el atributo data-content con la ruta CSS del elemento que se convertirá en ventana (destino). El elemento que se abre como ventana debe tener la clase w-content. Se puede utilizar el atributo data-property-width, tanto en el origen como en el destino, para definir el ancho de la ventana modal y data-property-height para definir el alto, ambos valores pueden indicarse en porcentaje con un valor como: 80%. También se puede asignar una clase al destino mediante el atributo data-cssclass en el elemento destino.

<button class="w-content-controler general" data-content="#ventana_textos_modal">
  Abrir ventana modal
</button>
<div id="ventana_textos_modal" class="w-content">
  Así se ve la ventana modal
</div>

Abrir contenido en ventana flotante no modal

Para abrir contenidos en ventanas flotantes dentro del mismo objeto. Se agrega la clase wf-content-controler al elemento que debe abrir la ventana (origen), por defecto con el evento clic. No tiene que ser botón o enlace, puede ser cualquier elemento. Se debe establecer el atributo data-content con la ruta CSS del elemento que se convertirá en ventana (destino). El elemento que se abre como ventana debe tener la clase wf-content. Se puede utilizar el atributo data-property-width, tanto en el origen como en el destino, para definir el ancho de la ventana y data-property-height para definir el alto.

Por defecto, la ventana se posiciona en el lugar donde se encuentra en el contenido. Si se desea posicionar en otro eje se debe hacer mediante estilos CSS, asignando a la clase .wf-content la posición con los atributos: top, bottom, left y/o right.

<button class="wf-content-controler general" data-content="#ventana_textos_flotante">
  Abrir ventana flotante
</button>
<div id="ventana_textos_flotante" class="wf-content">
  Así se ve la ventana flotante.
</div>

Como se ve en el ejemplo anterior, el tamaño de la ventana por defecto solamente ocupa el espacio requerido por el contenido. Si se quiere ajustar al tamaño del contenedor se pueden usar dos clases: autox y autoy; según se quiera que la ventana se ajuste horizontal o verticalmente. El contenedor que se tiene en cuenta es el primer elemento superior con posición relativa o absoluta.

<button class="wf-content-controler general" data-content="#ventana_textos_flotante2">
  Abrir ventana flotante
</button>
<div id="ventana_textos_flotante2" class="wf-content autox autoy">
  Así se ve la ventana flotante ajustada.
</div>

Infografía

Algunos elementos gráficos que pueden ser útiles en el montaje y que ya están definidos.

Las listas (<ul>), cuando sean de datos, deben tener la clase "data_list".

• Flecha derecha: , usar <span class="icon_horizontal_arrow"></span>
• Aprobado: , usar <span class="icon_approved"></span>
• Rechazado: , usar <span class="icon_removed"></span>
• Apuntador abajo: , usar <button class="down_pointer"></button>
• Apuntador derecha: , usar <button class="right_pointer"></button>
• Botón general: Aceptar, usar <button class="general">Aceptar</button>
• Apuntador arriba-abajo: , usar <span class="icon_inline ui-icon ui-icon-arrowthick-2-n-s"></span>
• Apuntador izquierda-derecha: , usar <span class="icon_inline ui-icon ui-icon-arrowthick-2-e-w"></span>
• Ver más: , usar <span class="icon_more button"></span>. Se adiciona la clase button si debe tener el evento "Sobre".
• Ver menos: , usar <span class="icon_less button"></span>. Se adiciona la clase button si debe tener el evento "Sobre".
• Apuntador izquierda:
  , usar <div class="note_pointer_left"></div>
• Apuntador derecha:
  , usar <div class="note_pointer_right"></div>
• Ícono de video:
• Ícono de audio:
• Ícono de documentos:

Iconografía

Los íconos sirven para representar, marcar, dar ideas visuales de elementos, entre otros. Para ello se incluye una etiqueta <i> con la clase correspondiente (mouse sobre el ícono para conocer la clase). Está basado en ionicons por lo que se puede utilizar cualquiera de los elementos que dicha librería incluye (ver listado oficial en www.ionicons.com). A continuación algunos ejemplos:

Dado que los iconos se basan en fuentes se puede hacer algunas alteraciones de tamaño, color, efectos, entre otros.

Notas emergentes - Tooltips

Para las notas emergentes se utiliza la clase tooltip, normalmente en un elemento sup y el texto a mostrar en el tooltip se define en el atributo label. El contenido puede ser texto plano o HTML. Un uso frecuente de los tooltip es reemplazar las "notas al pie" de los documentos tradicionales.

<sup class="tooltip" title="Mensaje a <em>desplegar</em> en el tooltip">[1]</sup>

Adicional al contenido, se pueden adicionar los siguientes atributos para resolver el posicionamiento del tooltip.

• data-position-my: Indica la posición del tooltip en relación al elemento que lo despliega. Para ver los posibles valores y su funcionamiento, revisar el atributo "my" de la página jQuery UI Position.
• data-position-at: Indica la posición del tooltip en relación al elemento destino. Para ver los posibles valores y su funcionamiento, revisar el atributo "at" de la página jQuery UI Position.
• data-position-flipfit: Determina como se resuelve la posición cuando el elemento se sale del espacio disponible si se usa la posición por defecto. Para ver los posibles valores y su funcionamiento, revisar el atributo "collision" de la página jQuery UI Position.

Citas

Textos que se citan al pie de la letra. Se utiliza la etiqueta blockquote. La información de la referencia se escribe utilizando la etiqueta label.

"[...] si un poeta muerto al otro lado del mundo podía describir mis sentimientos con tal precisión, debía aceptar con humildad que mi amor no era excepcional, nada había inventado, todo el mundo se enamora igual. [...]" Retrato en sepia. Isabel Allende. Impreso en Colombia. Edición de bolsillo, marzo, 2006. Pag 251. ISBN 958-639-298-8

Mouse "sobre"

Para desplegar contenido pasando el mouse por un elemento, se utiliza la clase mouse-over-one en un contenedor con elementos que tengan la clase CSS button y adicionan el atributo data-ref, el cual debe contener la ruta CSS del elemento que se muestra al pasar el mouse. Se mantiene visible el último elemento mostrado.

Mouse "sobre" un elemento

Para desplegar contenido pasando el mouse por un elemento, se utiliza la clase mouse-over en un elemento que debe tener el atributo data-ref, el cual debe contener la ruta CSS del elemento que se muestra al pasar el mouse. Al quitar el mouse el elemento se vuelve a ocultar.

Ocultar/Mostrar un elemento

Para mostrar u ocultar un elemento, se utiliza la clase more-less en un elemento que debe tener el atributo data-ref, el cual debe contener la ruta CSS del elemento que se muestra o se oculta.

Para definir el efecto que se utiliza al momento de ocultar/mostrar se utiliza el atributo data-effect con uno de los siguientes posibles valores: blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, shake, slide, scale, size

<div class="more-less viewless" data-ref="#ocultarmostrar" data-effect="explode">
    <span class="icon_more button">
    </span><span class="icon_less button"></span>
        Ver más
</div>

<div id="ocultarmostrar" style="display: none;">
    <p>Lorem ipsum</p>
</div>

Contenido en columnas

<div class="row">
    <div class="col-2">
        Contenido de la primera columna
    </div>
    <div class="col-2">
        Contenido de la segunda columna
    </div>
</div>

Audios

Los audios pueden ser cargados desde cualquier elemento HTML utilizando el atributo data-sound, el cual contiene la ruta compuesta por el nombre del archivo y, si está dentro de una carpeta, el nombre de la carpeta. Todos los audios deben ir en la carpeta content/sounds/. Se recomienda utilizar un botón con clase iconsound al cual además se le puede agregar la clase button para el efecto "sobre".

<button class="iconsound button" data-sound="beep09.ogg"></button>

Si lo que se desea es un audio en un reproductor con controles, entonces se debe utilizar la etiqueta estandar de HMTL5: audio, con las opciones que se definen para ella. Para ver información al respecto visite https://www.w3schools.com/html/html5_audio.asp. En este caso, la ruta del orígen del archivo se debe definir completamente, aunque se recomienda que se almacenen tambien en la carpeta content/sounds/. Cabe anotar que la apariencia del reproductor estará determinada en su gran mayoría por el navegador.

<audio controls>
  <source src="content/sounds/constantspectrummelody.ogg" type="audio/ogg">
  Su navegador no soporta el componente de audio
</audio>

Videos

Los videos van en la carpeta content/videos/.Para lograr una compatibilidad completa, el video debe estar en mp4 y webm. Los videos deben ir en un contenedor, por ejemplo un div, con la clase videobox.

Hay dos maneras de reproducir los videos, con el reproductor del navegador (recomendado) o con un reproductor externo MediaElement.js. El reproductor externo es recomendado en los casos en los que se necesite incluir subtítulos ya que su compatibilidad es mayor en los diferentes navegadores. La forma de montar los videos es la misma y por defecto se utiliza el reproductor del navegador, para indicar que se utilice el reproductor externo se debe adicional a la etiqueta video la clase mejs__player.

Si el video lleva subtítulos, se recomienda que estén incluidos en el atributo src como texto en base64, para que no haya problema si el objeto se reproduce localmente. El formato recomendado de los subtítulos es vtt y se aconseja mantener el archivo .vtt en la misma carpeta que los videos aunque se incluya como texto en base64.

<div class="videobox">
  <video controls>
    <source src="content/videos/eta_porketo.mp4" type="video/mp4">
    <source src="content/videos/eta_porketo.webm" type="video/webm">
    <track label="Español" kind="subtitles" srclang="es"
    src="data:text/vtt;base64,V0VCVlRUDQoNCjENCjAwOjAwOjAwLjIzNCAtLT4gMDA
    6MDA6MDQuMDAwDQpFc3RlIHB1ZXJxdWl0byBzZSBmdWUgYWwuLi4NCg0KMg0KMDA6MDA6
    MDQuMDA0IC0tPiAwMDowMDoxMC4wMDANCi4uLiBhY8OhIGRlYmVyw61hIGFwYXJlY2VyI
    GxhIHRyYWR1Y2Npw7NuLA0KYSBtYW5lcmEgZGUgc3VidMOtdHVsb3MuDQoNCjMNCjAwOj
    AwOjEwLjAwMiAtLT4gMDA6MDA6MjYuMDAwDQouLi4gbGEgcG9uZHLDrWEgc2kgc3VwaWV
    yYSBxdWUgZGljZSA6JygNCihzdXB1ZXN0YW1lbnRlIGVzIGVzcGVyYW50by4uLiDCocKh
    bmkgaWRlYSEhKQ0K" default>
    El reproductor de video no es soportado por el navegador
  </video>
</div>

<div class="videobox">
  <video controls class="mejs__player">
    <source src="content/videos/eta_porketo.mp4" type="video/mp4">
    <source src="content/videos/eta_porketo.webm" type="video/webm">
    <track label="Español" kind="subtitles" srclang="es"
    src="data:text/vtt;base64,V0VCVlRUDQoNCjENCjAwOjAwOjAwLjIzNCAtLT4gMDA
    6MDA6MDQuMDAwDQpFc3RlIHB1ZXJxdWl0byBzZSBmdWUgYWwuLi4NCg0KMg0KMDA6MDA6
    MDQuMDA0IC0tPiAwMDowMDoxMC4wMDANCi4uLiBhY8OhIGRlYmVyw61hIGFwYXJlY2VyI
    GxhIHRyYWR1Y2Npw7NuLA0KYSBtYW5lcmEgZGUgc3VidMOtdHVsb3MuDQoNCjMNCjAwOj
    AwOjEwLjAwMiAtLT4gMDA6MDA6MjYuMDAwDQouLi4gbGEgcG9uZHLDrWEgc2kgc3VwaWV
    yYSBxdWUgZGljZSA6JygNCihzdXB1ZXN0YW1lbnRlIGVzIGVzcGVyYW50by4uLiDCocKh
    bmkgaWRlYSEhKQ0K" default>
    El reproductor de video no es soportado por el navegador
  </video>
</div>

Animaciones

Las imágenes que sean animadas deben llevar la clase CSS animation. Por accesibilidad, toda imágen debe tener el atributo title con una breve descripción de la imagen.

<img src="content/cinemagraph.expert.gif"
  class="animation"
  title="Animación Cinemagraph.expert" />

Las imágenes que sean animadas pero que deban iniciar por la acción del usuario deben tener otra imagen (controlador) para definir el inicio. El controlador debe llevar la clase CSS play-animation y un atributo data-animation con la ruta de la animación.

<img src="content/prev_cinemagraph.expert.png"
  class="play-animation"
  title="Animación Cinemagraph.expert"
  data-animation="content/cinemagraph.expert.gif" />

Programación de animaciones

Para animar HTML, incluido, pero no limitado a, imágenes. Las animaciones se definen en dos partes: en el contenido (content.html) y en el archivo de historias (js/stories.js).

En el contenido: las animaciones se definen como capas HTML que se van desplegando una a una según los comportamientos que se les definan. Una animación parte de un contenedor con la clase CSS movi y en su interior otras capas, normalmente la etiqueta div, con el atributo data-movi-type que puede tener los valores:

• move: si la animación se define como un desplazamiento
• stop: para detener las animaciones en ese punto, normalmente si continua es mediante una acción programada
• show: la animación muestra el contenido con el evento por defecto, normalmente mediante efecto "alfa"
• cycle: para repetir los eventos un número de veces

Reiniciar Ejecutar animación

Programación de animaciones mediante CSS

Las animaciones mediante CSS utilizan los efectos que se asocian a los keyframes de CSS. Se debe agregar la clase css-animation al contenedor de la animación y la definición del comportamiento de la animación se debe sealizar en los archivos de estilos personalizados: css/custom.css y css/custommobile.css.

Zoom en imágenes

Para permitir hacer zoom sobre imágenes de manera interactiva, por ejemplo en mapas conceptuales, agregar a la imagen la clase pit-resources-zoom. Se puede manipular el alcance del zoom con el atributo data-magnification (un entero) y el tamaño de la "lupa" con el atributo data-magnifier-size.

<img src="content/pagina.jpg"
 class="jpit-resources-zoom"
 style="width: 200px;"
 data-magnification="3"
 data-magnifier-size="200" />

El código anterior se vería así:

Antes y después

Sirve para comparar dos imágenes o hacer un antes y después. Se construye ubicando dos imágenes dentro de un contenedor con la clase after-before.

Este componente está basado en http://zurb.com/playground/twentytwenty.

<div class="after-before">
    <img src="content/pagina_2.jpg" />
    <img src="content/pagina.jpg" />
</div>

El código anterior se vería así:

También se puede ver vertical, agregando el atributo data-orientation="vertical" y se puede definir cuanto de la imagen "Antes" se ve al iniciar, por defecto se muestra el 50% (0.5) pero se puede cambiar definiendo el atributo data-offset con un valor entre 0 y 1. Finalmente, para definir los textos que van en ambos lados ("Antes" y "Después"), debe agregarse los atributos: data-before-label y data-after-label.

<div class="after-before" data-orientation="vertical" data-offset="0.2"
  data-before-label="Con filtro" data-after-label="Mejorada">
    <img src="content/pagina_2.jpg" />
    <img src="content/pagina.jpg" />
</div>

El código anterior se vería así:

Menú vertical

Menú horizontal

Menú verticales a ambos lados

Paginación secuencial

<div class="ctrl-pagination" data-layer-height="180px" data-labelcurrent="true" >
  <li>
    Contenido primera página
  </li>
  <li>
    Segunda página
  </li>
</div>

Paginación secuencial vertical

<div class="ctrl-pagination" data-layer-height="180px" data-orientation="vertical" >
  <li>
    Contenido primera página
  </li>
  <li>
    Segunda página
  </li>
</div>

Paginación por numeral

<div class="ctrl-pagination" data-layer-height="180px" data-numeric-pagination="true" >
  <li>
    Contenido primera página
  </li>
  <li>
    Segunda página
  </li>
</div>

Paginación por letras

<div class="ctrl-pagination" data-layer-height="180px" data-numeric-pagination="true" data-type="a" >
  <li>
    Contenido primera página
  </li>
  <li>
    Segunda página
  </li>
</div>

Tabla de datos

Acordeón

Para agrupar información por secciones desplegando el contenido de cada sección al dar clic en el título.

Los estilos gráficos son los asignados al tema gráfico de jQuery UI.

<div class="accordion">
  <h3>Título 1</h3>
  <div>Contenido del elemento 1</div>
  <h3>Título 2</h3>
  <div>Contenido del segundo elemento</div>
</div>

Imagenes con contenido de texto

Este formato es útil para desplegar contenido explicativo, que será mostrado sobre una imagen al pasar el mouse sobre ella. Para utilizarlo agregue la clase view-first a un contenedor, usualmente un div, al interior agregue una imagen y otro contenedor con la clase view-content en el cual debe ir el contenido que se muestra con la interacción.

<div class="view-first">
    <img src="content/primavera.png" />
    <div class="view-content">
        <h2>Primavera</h2>
        <strong>Inicio: </strong>20-21 marzo<br />
        <strong>H. norte: </strong>Primavera<br />
        <strong>H. sur: </strong>Otoño<br />
        <strong>Inclinación: </strong>0°<br />
    </div>
</div>

El código anterior se vería así:

Primavera

Inicio: 20-21 marzo
H. norte: Primavera
H. sur: Otoño
Inclinación: 0°

Un ejemplo práctico sobre el uso de este control se muestra a continuación, con las estaciones.

Primavera

Inicio: 20-21 marzo
H. norte: Primavera
H. sur: Otoño
Inclinación: 0°

Verano

Inicio: 21-22 Junio
H. norte: Verano
H. sur: Invierno
Inclinación: 23,5º Norte

Otoño

Inicio: 23-24 Septiembre
H. norte: Otoño
H. sur: Primavera
Inclinación: 0°

Invierno

Inicio: 21-22 Diciembre
H. norte: Invierno
H. sur: Verano
Inclinación: 23,5º Sur

Imagen para ampliar

Se utiliza para ampliar una imagen al dar clic sobre ella, en casos por ejemplo donde no quepa la imagen original por ser muy grande. Para ello se asigna la clase expand-image a un contenedor y se le define el atributo data-src cuyo valor debe ser la ruta de la imagen. Por defecto, el tamaño de la previsualización será de 100px * 100px, si se desea dar otro tamaño debe hacerse por estilos al contenedor y de esa manera la previsualización se ajustará al tamaño de éste.

Si el contenedor tiene un atributo title, dicho valor se asigna a la ventana como título.

<div class="expand-image" data-src="content/ojo.jpg" title="Ojo de reptil"></div>

Apuntadores informativos

No son un control nuevo sino una mezcla de otros controles con el objetivo de señalar información al interior de una imagen.

<div class="note_pointer_right note_1">
  <div class="tooltip" title="<strong>1.</strong> Cabeza">1</div>
</div>
<div class="note_pointer_left note_2">
  <div class="tooltip" title="<strong>2.</strong> Pecho">2</div>
</div>
<div class="note_pointer_right note_3">
  <div class="tooltip" title="<strong>3.</strong> Mano">3</div>
</div>
<div class="note_pointer_left note_4">
  <div class="tooltip" title="<strong>4.</strong> Pierna">4</div>
</div>

Generalidades

Para darle una identificación propia a cada actividad con el fin de reconocerlas fácilmente en la revisión, se deben agregar dos atributos a la etiqueta principal que define la actividad:

• data-act-id: Un identificador corto y único de la actividad, sin espacios ni caracteres especiales. Es el que se muestra en el rastreo del SCORM. También es utilizado para ordenar las actividades al momento de listarlas en la ventana de Resultados por lo que es útil colocar un número antes del identificador para indicar en que posición se debería mostrar el resultado de la actividad, por ejemplo: 1_quiz se listaría antes de 2_apareamiento sin importar el título que tengan. Si no se especifica este campo y hay más de una actividad del mismo tipo en el paquete, se perderá la información de una de ellas.
• data-act-title: El nombre que aparecerá en la ventana de Resultados

Ver ejemplo en actividad Cuestionario.

Cuestionario

Un cuestionario se define agregando la clase jpit-activities-quiz a un contenedor y dentro de él agregando elementos de tipo question con el atributo type según el tipo de pregunta. Cada pregunta además tiene un elemento description para el enunciado y una estructura específica para el cuerpo según su tipo.

Tipos de pregunta disponibles:

• Etiqueta (label): No es calificable, se utiliza para mostrar un texto fijo.
• Selección única (simplechoice): Para seleccionar una opción correcta de una lista de posibles valores.
• Selección múltiple (multichoice): Para seleccionar varias opciones, todas las correctas, en una lista de posibles valores.
• Selección múltiple en conjunto (multisetchoice): Para seleccionar las correctas de una lista de posibles valores. Permite definir varios conjuntos correctos, excluyentes entre si.
• Cloze (complete): Presenta varias opciones entre un contenido, con controles para seleccionar los valores correctos.
• Definición (defineterm): Para permitir entradas de texto que tienen que coincidir completamente con las respuestas correctas, según el término a definir.

Por defecto las preguntas se muestran en orden aleatorio, para desactivar el modo aleatorio adicionar al cuestionario el atributo data-shuffle="false".

Las preguntas se pueden verificar una a una, si alguna no es verificada pero se responde, la verificación se hará al momento de verificar la última respuesta.

Cada pregunta puede tener una retroalimentación para cuando se resuelve correctamente y/o una para cuando se hace de manera incorrecta. Para definir la retroalimentación se crea un elemento feedback al interior de la pregunta y dentro de éste uno o los dos elementos: correct y wrong con el respectivo texto. También se puede definir una retroalimentación por defecto para uno o los dos resultados, a nivel de cuestionario, agregando la misma estructura pero al mismo nivel de las preguntas, es decir, como elemento hijo de la etiqueta que define el cuestionario.

Sopa de letras

Una sopa de letras se define agregando la clase jpit-activities-wordpuzzle a un contenedor y dentro de él agregando un elemento letters compuesto por elementos de tipo row con las letras que componen una fila separadas entre ellas por una coma. Adicionalmente, se debe agregar un contenedor con la clase words y en el interior de él elementos de tipo li con el atributo data-term que debe contener la palabra a buscar.

Crucigrama

Una crucigrama se define agregando la clase jpit-activities-crossword a un contenedor y dentro de él agregando dos elementos: horizontal y vertical; y en el interior de ellos una lista de elementos de tipo li con el atributo data-term que debe contener la palabra correcta, el atributo data-row con el número de la fila y el atributo data-col con el número de la columna desde donde inicia la palabra.

Arrastrar y soltar - modo apareamiento

Una actividad de arrastrar se define agregando la clase jpit-activities-droppable a un contenedor y dentro de él definiendo un contenido HTML teniendo en cuenta: definir los orígenes marcando elementos con la clase data-group cuyo valor será el número del grupo al que pertenece el elemento y definir los destinos marcando elementos con el atributo data-target-gorup cuyo valor será el número del grupo que acepta como correcto.

Si la actividad tiene más elementos para arrastrar que destinos, entonces debe llevar el atributo data-verify-type="target".

Arrastrar y soltar - modo diálogo

Posible modificación de la actividad de arrastrar y soltar, en este caso para completar un diálogo.

Arrastrar y soltar - modo completar

Posible modificación de la actividad de arrastrar y soltar, en este caso para completar una oración.

Arrastrar y soltar - insertando contenido

Posible modificación de la actividad de arrastrar y soltar, en este caso para completar una oración.

A diferencia de las otras de arrastrar y soltar, este esquema agrega el contenido del origen en el destino por lo que no se puede quitar de allí una vez arrastrado. Para esto es necesario agregar al contenedor principal de la actividad el atributo data-droppable-content-inner establecido a true. También se puede establecer el atributo data-droppable-content-helper con un valor para colocar en el origen una vez que se haya reiniciado la actividad, en el ejemplo es "...".

Arrastrar y soltar - muchos a uno

Posible modificación de la actividad de arrastrar y soltar, en este caso para arrastrar varios objetivos a un solo destino.

Su característica principal es que se puede definir cuántos objetos deben ser movidos al destino. Para hacer esa definición se utiliza el atributo data-target-multi colocando el valor de los elementos que acepta el destino. También se puede establecer el atributo data-autoalign con un valor de false para que los elementos no se alineen automáticamente, muy útil cuando los elementos de orígen pueden no caber en el destino.

Arrastrar y soltar por grupos / Clasificar

Es similar a la actividad de arrastrar y soltar pero permite arrastrar múltiples elementos a un mismo contenedor, para clasificar todos los elementos por grupos, además, no reinicia cuando finaliza con errores sino que permite continuar desde el estado actual. Otra diferencia es que esta actividad sí requiere que el usuario la verifique, al contrario de la actividad de arrastrar normal que se verifica cuando se terminan de arrastrar los elementos o cuando se llenan los destinos.

Se define agregando la clase jpit-activities-multidroppable a un contenedor y dentro de él definiendo un contenido HTML teniendo en cuenta: definir los orígenes marcando elementos con la clase data-group cuyo valor será el número del grupo al que pertenece el elemento y definir los destinos marcando elementos con el atributo data-target-gorup cuyo valor será el número del grupo que acepta como correcto.

Los estilos correspondientes se encuentran en css/custom.css, en la sección "Actividad arrastrar y soltar por grupos".

Cloze

Una actividad tipo Cloze se define agregando la clase jpit-activities-cloze a un contenedor y, dentro de él, construyendo un contenido HTML en el que se encuentren elementos select e input de tipo text (indicado explícitamente).

Todos las listas select son procesadas como campos de los cuales el usuario deberá seleccionar un valor. Cada lista debe contener una opción (option) con el atributo data-response establecido a true indicando la opción correcta de la lista.

Los elementos input de tipo text también son procesados y deben contener un atributo data-response con el texto que debe ser escrito por el usuario para completar la actividad.

Dentro del contenido HTML es importante incluir un elemento con la clase CSS box_end en cuyo interior se cargará el resultado al validar la actividad.

Además, en el contenedor principal de la clase se puede agregar el atributo data-parent-mark-selector con un selector CSS que permita seleccionar el padre de los elementos para marcar el estado correcto o incorrecto de la respuesta, eso con el fin de asignar facilmente elementos gráficos que permitan distinguir el estado de la respuesta ya que los controles HTML de formulario restringen muchas opciones de presentación.

Ordenar

Una actividad de ordenar se define agregando la clase jpit-activities-sortable a un contenedor y, dentro de él, construyendo el contenido HTML.

Aplica para cualquier HTML y opera sobre los elementos li que estén contenidos dentro de un ul con clase CSS sortable. Los li deben tener un atributo data-position con el indice que indica la posición adecuada, la cual empieza desde cero.

Si se requiere que el ordenamiento sea horizontal es preciso agregar al ul contenedor la clase sortable-horizontal. Se pueden tener varias listas horizontales o combinar horizontales con verticales, pero se debe mantener coherencia en el indice desde cero en la primera lista hasta la cantidad total de elementos ordenados en la última lista.

Existe un atributo adicional que es data-set-position, el cual sirve para indicar que se debe agregar la posición a un elemento dentro del contenido ordenado. Es útil si se quiere colocar, en un lugar al interior del contenido del elemento, la posición que está ocupando en el listado completo. El valor del atributo debe ser el selector CSS del elemento dentro del contenido del ítem.

Dentro del contenido HTML es importante incluir un elemento con la clase CSS box_end en cuyo interior se cargará el resultado al validar la actividad.

Aunque por defecto el ordenamiento es horizontal o vertical, la presentación depende de los estilos, pudiendose crear múltiples distribuciones, como se muestra a continuación.

Clasificar

Permite realizar una actividad donde se clasifican contenidos entre dos posibles valores, como: Verdadero/Falso o Si/No.

Una actividad de clasificar se define agregando la clase jpit-activities-check a un contenedor y dentro de él:

• Una etiqueta words compuesta por elementos li que contendrán las palabras o elementos a clasificar. Los li que contengan a los incluidos/verdaderos/sí deben tener el atributo data-val establecido en true.
• La estructura HTML personalizada para dar el contexto deseado, asignando las siguientes clases a los controles en los que se desee mostrar la información correspondiente.
  • play: es el contenedor inicial. Se oculta al mostrar los resultados y se vuelve a cargar al momento de reintentar la actividad.
  • word_content: elemento donde se mostrarán las "palabras" a clasificar. Se encuentra al interior del contenedor marcado como play.
  • yes: elemento que se comporta como el sí o verdadero al clasificar. Suele ser un button pero puede ser cualquier otro elemento.
  • not: elemento que se comporta como el no o falso al clasificar. Suele ser un button pero puede ser cualquier otro elemento.
  • box_conclution: es el contenedor que se muestra al finalizar la clasificación. Si se desea que se muestren las respuestas correctamente o incorrectamente clasificadas se debe adicionar una o las dos siguientes clases, según se desee. El no incluir una de ellas hará que no se muestren esos tipos de resultados.
    • correct_words (opcional): contenedor donde se mostrarán las palabras clasificadas correctamente.
    • wrong_words (opcional): contenedor donde se mostrarán las palabras que fueron clasificadas incorrectamente.
  • reload (opcional): elemento que controla el reinicio de la actividad luego de cada ronda de clasificación. Si no se adiciona, la actividad tendrá una sola ronda de clasificación. Suele ser un button pero puede ser cualquier otro elemento.
  • hits (opcional): es un contenedor donde se copia la cantidad de aciertos al clasificar.
  • miss (opcional): es un contenedor donde se copia la cantidad de clasificaciones incorrectas.

Marcar

Sirve para señalar zonas dentro de una imagen, definiendo cuales son correctas y cuales no. Una actividad de clasificar se define agregando la clase jpit-activities-mark a un contenedor y se deben definir "áreas" con la etiqueta area indicando cuales áreas son correctas mediante el atributo correct con valor true, las posiciones en x y en y y el tamaño de ancho (w) y alto (h).

La retroalimentación se puede adicionar a la actividad mediante un elemento feedback que tiene dos posibles valores, definidos con los elementos correct y wrong.

En la configuración por defecto únicamente se pueden definir rectángulos. Existe una posibilidad para definir otro tipo de áreas. Para ello se requiere:

• En el contenedor principal, establecer el atributo data-mark-type al valor de map.
• Definir un mapa con las áreas correspondientes, siguiendo el esquema de mapas de imágenes de HTML.
• Adicionar a la imagen el atributo usemap indicando el mapa que lo define, predecido por el caractér #.
• Las áreas deben tener el atributo correct indicando cuáles áreas son correctas mediante el valor true.
• Opcionalmente, definir el aspecto gráfico de los marcadores adicionando uno o varios de los siguientes atributos a nivel del contenedor principal:
  • data-mark-fill-color: color al interior de la marca.
  • data-mark-stroke-color: color del borde de la marca.
  • data-mark-opacity: opacidad de la marca.

Seleccionar

Sirve para seleccionar elementos dentro de un contenidos, sea como opciones individuales o como opciones dentro de un grupo de posibilidades. Una actividad de seleccionar se define agregando la clase jpit-activities-selection a un contenedor y se deben definir secciones seleccionables con el atributo data-group indicando un número que define el grupo al que pertenece el elemento, además, se indica cuales elementos son correctos mediante el atributo data-correct con valor true.

El atributo data-parent-mark-selector sirve para indicar si se quiere adicionar la marca de correcto/incorrecto al padre del elemento selecionado. Eso permite que se pueda indicar visualmente y de manera sencilla si todo el contenedor es correcto o no. El valor del atributo es un selector CSS válido como ancestro del elemento seleccionado.

La retroalimentación se puede adicionar a la actividad mediante un elemento feedback que tiene dos posibles valores, definidos con los elementos correct y wrong.

Dentro del contenido HTML es importante incluir un elemento con la clase CSS box_end en cuyo interior se cargará el resultado al validar la actividad.

Y haciendo uso del atributo data-mode se puede indicar si la selección es única "single" o múltiple "multi".

Formulario

Una actividad de formulario se define agregando la clase jpit-activities-form a un contenedor y, dentro de él, construyendo el contenido HTML que incluya controles de formulario textarea o input tipo text.

Sirve para recibir información del usuario en campos de formulario e imprimirlos o guardarlos (solo para paquetes en modo SCORM). Los campos de formulario pueden tener el atributo name que corresponde al nombre con que se almacenará el campo (si el campo no tiene este atributo no se almacena) y el atributo ftitle que corresponde a la etiqueta utilizada como subtítulo al momento de imprimir. Esta actividad se califica al 100% simplemente con que el usuario almacene un valor, no es calificable por el valor que se ingresa.

Para determinar las operaciones disponibles se debe incluir los atributos: data-print (si el contenido es imprimible) y data-save (si se almacena el valor en el paquete SCORM). Si todos los campos son obligatorios debe definirse el atributo data-require-all. Cuando se almacenan las interacciones se almacena como retroalimentación el contenido del formulario pero solamente los primeros 256 caracteres, eso no altera la información que se guarda, solamente la que es visible en primera instancia para quien revise los informes del paquete.

Para proporcionar ayuda sobre los campos se recomiendan dos métodos: el primero es utilizar el atributo placeholder y el segundo es agregar ayudas utilizando los tooltip. En el ejemplo se muestran ambas posibilidades.

Lo siguiente es una guía sugerida para referenciar recursos digitales como imágenes, videos y otros elementos utilizados como parte del contenido en el montaje del documento hipermedial. El contenedor de la referencia debe tener la clase about, además se recomienda que el recurso y su referencia estén en un contenedor con la clase box_media.

<div class="box_media">
    <img src="content/el_beso_udea.png" />
    <div class="about">
        <strong>Imagen 1: </strong>
        El beso, fotografía con retoque digital (2013).
    </div>
</div>

Si la autoría es del proyecto

Si el recurso es de autoría del proyecto, por ejemplo para diseño de vectores, ilustraciones o fotografías de autoría de uno de los miembros del equipo de trabajo, o en general es un archivo producido para la realización del proyecto, se cita de la siguiente manera:

Tipo de recurso #. Nombre del recurso (año).

En el pie de foto no se pone el autor, puesto que ya aparecerá en los créditos generales del documento.

Imagen 1. El beso, fotografía con retoque digital (2013).

Si la autoría es de un proveedor ajeno al equipo de trabajo

Si el recurso proviene de la empresa o entidad a quien se le está prestando el servicio de producción, el pie de imagen se usa de la siguiente manera:

Tipo de recurso #. Nombre del recurso.
Fuente: nombre entidad que suministra la fotografía (año).

Imagen 2. El beso, fotografía con retoque digital.
Fuente: BambuCo (2013).

Si la autoría es de atribución

Si el recurso tiene derechos de atribución bajo una licencia abierta como la licencia creative commons, se hace la cita del autor de la siguiente manera:

Tipo de recurso #. Nombre del recurso.
Fuente: Autor (Año).

Importante: el nombre del Autor (Año)., deberá estar hipervinculado, siempre que sea posible, al sitio donde se encuentre el recurso en Internet o donde haya información al respecto.

Cuando el recurso tiene derechos de atribución o reconocimiento (Attribution), para usarlo se debe hacer referencia a su autor.

Imagen 3. HASHIGUCHI Mujer enpolvandose.
Fuente: Hashiguchi Goyo (1921).

Si la autoría es de atribución con intervención gráfica o modificaciones

Si el recurso se crea a partir de la modificación de otro, es importante verificar los derechos de atribución y referenciar de la siguiente manera:

Tipo de recurso #. Nombre del recurso, diseño referenciado.
Fuente: Autor (Año).

Importante: el nombre del Autor (Año)., deberá estar hipervinculado, siempre que sea posible, al sitio donde se encuentre el recurso en Internet o donde haya información al respecto.

Imagen 4. Mujer "negativa", diseño referenciado.
Fuente: Hashiguchi Goyo (1921).

Si la intención es emplear un recurso para hacer una composición, únicamente se deberían emplear recursos con licencias que lo permitan, respetando las diferentes condiciones particulares de cada una.

• Dominio público
• Creative commons, que no tenga la restricción de "sin obra derivada"
• MIT, GNU/GPL o similares

La maquetación es la manera en la que se distribuye el contenido del documento por defecto. Algunas partes de ellas hacen parte del comportamiento del documento y otras únicamente se utilizan como parte de la estructura gráfica. Las partes tenidas en cuenta para asociarlas con algún comportamiento, y que por ende deben respetar algunas consideraciones, son:

• Barras de navegación: es opcional y pueden haber múltiples en el documento. Se define con un elemento nav que contenga como hijo de primer nivel un elemento menu compuesto por elementos de tipo menuitem. Dentro de los elementos menuitem pueden haber a su vez otros elementos menu, intentando no generar demasiados anidamientos para no dificultar la navegación. Los items pueden tener un atributo label que determina el texto en el menú o su contenido en el menú puede ser definido en el contenido del elemento. Además, se define la página o acción a la cual están vinculados utilizando el atributo data-page con el identificador de la página con la que se vincula o el atributo data-global-id con el identificador de la acción global que puede ser: results (mostrar ventana de seguimiento), return (de ser posible, entrar o salir de pantalla completa), close_all (salir del documento).
  Además, si a la etiqueta nav se le define el atributo data-offset en true, la posición del menú se calcula para mantenerlo visible a pesar del scroll.
• Título de página: es opcional, pero si se define un elemento con la clase page-title, allí se cargará dinámicamente el contenido definido en el atributo ptitle de cada página, cada que se cambie de página con cualquier método de navegación.
• Contenido: el contenido debe estar dentro de un elemento main dentro del cual deben haber elementos section que corresponden a cada una de las páginas de contenido. Las secciones deben tener un id que es el utilizado en los menús para vincularlos y pueden tener un atrinuto ptitle con el texto considerado como título de la página o sección. Las páginas (elementos section), están compuestas por sub-páginas que son elementos con la clase subpage. Una página debe tener como mínimo una sub-página.
• Botones de navegación: los siguientes atributos son utilizados para marcar los botones o elementos de navegación:
  • Entre páginas: se activa asociando a cualquier elemento el atributo data-page con el identificador de la página que se debe cargar. Siempre se carga la primera sub-página de la página vinculada.
  • Anterior: se activa asociando a un elemento el atributo previous-page, sin ningún valor, y se encarga de pasar a la página o sub-página previa, según la configuración del documento, si se encuentra en modo páginas o slides.
  • Siguiente: se activa asociando a un elemento el atributo next-page, sin valor, y se encarga de pasar a la siguiente página o sub-página, según la configuración del documento, si se encuentra en modo páginas o slides.
• Menú de Sub-páginas: es un contenedor donde se cargan dinámicamente los enlaces de navegación a las sub-páginas cuando se encuentra el documento en modo slides. Se activa adicionando a un elemento contenedor el atributo subpages-menu.
• Número de página: si existe un contenedor con el identificador page_number, en ese elemento se carga el número de la página actual y la cantidad de páginas que componen el documento.
• Resultados: para la ventana en la que se muestran los resultados, se precisa un contenedor con el identificador results_page y en su interior dos contenedores con identificador results_page_visited y results_page_activities. Se recomienda que este contenedor tenga el atributo style con el valor display:none; para evitar que se vea información innecesaria mientras carga la página.
• Página de impresión: se requiere un contenedor con el identificador printent_content para las actividades o contenidos que requieran poner el documento en modo impresión. Dicho contenedor debe tener un boton con identificador printent_back y un contenedor con clase content.
• Indicador de progreso: es el elemento que muestra el porcentaje de avance en la revisión del documento, se incluye argegando un contenedor con la clase measuring-progress. Se puede indicar qué tipo de indicador se va a utilizar agregando un atributo data-type con uno de los siguientes valores: default, circle, vertical, horizontal; el tipo es opcional y si no se indica, por defecto se usa el por defecto.