Manual de Shorthand para

crear narrativas digitales

Rubén Alcaraz Martínez
2023
Créditos
© Rubén Alcaraz Martínez.

Octubre de 2023.

Este objeto de aprendizaje forma parte de los materiales de la asignatura Concepción

y Diseño de Sitios Web Culturales del máster en Gestión de Contenidos Digitales
de la Universidad de Barcelona.

El documento se encuentra bajo una licencia Creative Commons BY-NC-SA

(Reconocimiento – No comercial – Compartir igual).

1
Sumario

1. Introducción ....................................................................................................... 3

1.1. Qué es Shorthand............................................................................................................3

1.2. Alta ...................................................................................................................................3

2. El área de trabajo de Shorthand ........................................................................... 3

2.1. Las historias ....................................................................................................................6

2.2. Las colecciones ........................................................................................................... 17

Recursos de referencia ......................................................................................... 20

2
1. Introducción
1.1. Qué es Shorthand
Shorthand 1 es una plataforma de publicación en línea pensada para crear y publicar
narrativas digitales utilizada por diferentes tipos de instituciones del ámbito de la
cultura y el patrimonio como museos, archivos o bibliotecas, así como por otros tipos
de organizaciones como medios de comunicación, revistas, clubes deportivos o
gobiernos, entre otros.

Una de las razones por las que Shorthand se ha hecho popular es por su facilidad de
uso. La plataforma presenta una curva de aprendizaje muy poco pronunciada, a pesar
de contar con un importante número de opciones para personalizar cada proyecto de
acuerdo con las particularidades de la historia que se desea contar.

1.2. Alta
Shorthand ofrece tres planes diferentes: Prime, Pro y Premium. El plan prime permite
publicar hasta tres historias de manera gratuita e incrementar el número de manera
ilimitada por un precio de 85$ mensuales. Los planes Pro y Premium además de
permitir publicar contenido de manera ilimitada, ofrecen herramientas y prestaciones
adicionales no incluidas en la versión gratuita como la posibilidad de añadir HTML
personalizado, el acceso a ciertas herramientas de desarrollo, la exportación en ZIP del
contenido generado (HTML, CSS y JS), el acceso a plantillas adicionales o la
posibilidad de integrar publicidad, entre otras.

Para formalizar el alta en la versión gratuita que es en la que se centran estos

materiales, basta con registrarse en [Link]

2. El área de trabajo de Shorthand

Desde el área de trabajo de Shorthand es posible gestionar los espacios de trabajo
(workspaces) y los equipos (teams). Los espacios de trabajo permiten gestionar
conjuntos de historias y colecciones. En cada espacio de trabajo puede colaborar uno
o más equipos, 2 encargándose estos de la creación y gestión de contenido específico.
Lo más habitual es tener un espacio de trabajo para cada proyecto o publicación (por
ejemplo, cuatro historias sobre una temática concreta), aunque también se pueden
entender a nivel de compañía o departamento.

En la figura 1 es posible ver todas las opciones disponibles desde el área de trabajo,
las cuales se detallan a continuación.

1
[Link]
2
El plan gratuito permite crear varios espacios de trabajo, pero sólo un equipo.

3
Figura 1. Interfaz del espacio de trabajo de Shorthand.

1. Cuenta de usuario: permite modificar el logo del espacio de trabajo, da acceso

a las opciones de edición del perfil personal, las opciones de gestión del
espacio de trabajo (nombre del espacio, opciones para mejorar el plan
contratado, añadir nuevos usuarios al espacio de trabajo a través de
invitaciones y decidir cómo se publican o exportan las historias creadas),
permite alternar entre espacios de trabajo y cerrar la sesión.

2. Gestión del equipo: permite modificar el logo del equipo, añadir nuevos
usuarios al equipo, y seleccionar la forma de publicación de entre las opciones
configuradas a nivel de espacio de trabajo.

3. Añadir miembros al equipo: es una forma alternativa y más directa de añadir

nuevos miembros al equipo.

4. Nueva historia: permite crear historias desde cero o a partir de una plantilla.

5. Nueva colección: permite crear agrupaciones de historias con textos y otros

contenidos personalizados.

6. Opciones de filtrado: permiten visualizar las historias y colecciones que

cumplen con algunos criterios (propietario, etiquetas…).

Justo debajo del nombre del equipo encontramos también el acceso a la papelera.
Tanto las historias, como las colecciones eliminadas, se pueden recuperar durante un
plazo de 90 días accediendo a la papelera disponible justo debajo del nombre del
proyecto.

4
Figura 2. Botón para acceder a la papelera.

Anteriormente, hemos visto que, entre las opciones de configuración del espacio
de trabajo, podíamos determinar la forma bajo la cual se publicarán o exportarán
las historias. En total, existen seis opciones diferentes, aunque tan sólo las dos
primeras están disponibles para las cuentas gratuitas.

1. Shorthand Hosting: esta opción gratuita genera una URL como subdominio
siguiendo la siguiente estructura: [Link]
(figura 1).

2. Custom subdomain hosting: esta opción también gratuita, permite mapear

un subdominio de nuestra propiedad (contratado previamente a un tercero),
con las historias que vamos generando, siguiendo la siguiente estructura:
[Link]/es/cat/etc. Para ello, primero es necesario crear
el subdominio y posteriormente modificar el correspondiente registro DNS.

3. Amazon s3: para publicar las historias a través de los servicios de hospedaje
de Amazon Web Services.

4. SFTP: permite publicar en un servidor remoto la historia a través del protocolo

SFTP (Secure File Transfer Protocol).

5. Zip export: para exportar todos los ficheros que conforman la historia (HTML,
CSS y JavaScript).

6. Prepare for publish (Shorthand API and Plugins): permite publicar la historia
en terceros sistemas de gestión de contenidos como WordPress o Drupal
a través de la API de Shorthand.

5
Figura 3. Creación de un subdominio gratuito en [Link].

2.1. Las historias

Tras pulsar sobre la opción “New story”, es posible comenzar de cero (blank story)
o a partir de alguno de las plantillas (templates) disponibles.

Figura 4. Opción para empezar una historia desde cero o a partir de una plantilla.

Incluso empezando desde cero, Shorthand genera algo de contenido a partir del cual
podemos empezar a trabajar con la interfaz de edición. En la figura 5 es posible ver
los dos bloques de contenido a partir de los cuales nos propone empezar a trabajar.

6
Figura 5. Interfaz de edición de Shorthand. En la parte izquierda es posible observar los dos
bloques creados por defecto con contenido de ejemplo.

En la parte superior de la interfaz, de izquierda a derecha, encontramos los botones:

 Undo: deshace la última acción realizada.

 Redo: recupera el último cambio deshecho.

 Themes: permite seleccionar entre los temas disponibles. Dos en el caso

de los planes gratuitos.

 Settings: despliega un menú en el que podemos añadir información sobre

la historia: título, descripción, autores, etiquetas, palabras clave, fecha
de publicación, el código de seguimiento de una propiedad de Google Analytics
y el idioma.

 Social: un editor que permite configurar metadatos en formatos Open Graph

y Twitter Cards a través de diferentes formularios.

 CSS: un editor de CSS personalizado (no disponible en el plan gratuito).

 JS: un editor de JavaScript personalizado (no disponible en el plan gratuito).

 Resources: un espacio en el que añadir recursos a través de sus URLs para

que todos los miembros del equipo tengan acceso a ellos. No se trata de
un espacio para cargar recursos que utilizar posteriormente en la historia,
ni tampoco se publicarán de ninguna forma. Su uso se limita a la consulta
por parte de los editores.

7
  Manage story collaborators: permite agregar nuevos usuarios a la historia,
así como invitar a personas que todavía no forman parte de ningún equipo.

 Share: en esta opción encontramos el URL de la historia, así como opciones

para compartirla por correo, SMS o mediante un código QR.

 Preview: permite previsualizar la historia que se está creando. Por defecto,

la abre en una nueva pestaña, aunque también podemos emular el resultado
en teléfonos y tabletas en posición vertical u horizontal.

 Publish: una vez finalizada la historia, este botón la publica en abierto.

Por otro lado, en la parte izquierda de la interfaz, contamos con una vista previa
de los diferentes bloques de contenido que forman la historia. Toda historia cuenta
con una cabecera en la que aparecerá el logotipo, menú de navegación y botones
para compartir en redes sociales; un pie en el que en las versiones gratuitas aparece
información comercial sobre Shorthand; y las diferentes secciones que forman
la historia. Para editar la cabecera y el pie de página, basta con situar el cursor sobre
cualquiera de ellas y pulsar sobre el icono de la rueda dentada que aparece a su
derecha (figura 6).

Figura 6. A la izquierda, bloque de cabecera y botón para acceder al modo de edición.

A la derecha, opciones de personalización disponibles.

Como hemos comentado antes, por defecto, el sistema genera dos secciones. La
primera actúa como portada o presentación, mientras que la segunda cuenta sólo con
un bloque de texto. Es posible editar ambas secciones, eliminarlas o copiarlas (figura

8
7). Para ello, basta con situar el cursor sobre la sección y pulsar el botón
correspondiente. Si se marca la opción “Add to nav”, se añadirá un enlace en
la cabecera de la historia que permitirá saltar automáticamente a esa sección.
Al hacerlo, es importante añadir una etiqueta breve (por un tema de espacio),
pero suficientemente representativa.

Figura 7. Opciones para eliminar, copiar,

administrar o añadir a la navegación una sección.

Mediante el icono de la rueda dentada, es posible acceder a algunas opciones de

configuración avanzadas. La primera de estas opciones permite configurar la
visibilidad de la sección según el dispositivo de consulta. Es decir, podemos configurar
la sección para que sea visible sólo en dispositivos móviles, sólo en dispositivos
de escritorio, o en ambos tipos de dispositivos. La segunda opción permite seleccionar
el color del texto y del fondo. Tenemos dos combinaciones básicas: light (texto negro
sobre fondo blanco) o dark (texto blanco sobre fondo negro). También la posibilidad
de escoger una combinación personalizada. La tercera y cuarta opción facilitan
un identificador y una clase CSS para la sección, de utilidad sólo para las cuentas
premium que pueden editar el código CSS y JS.

En la parte central de la interfaz podemos editar el contenido de cada sección, así

como acceder a diferentes opciones de configuración adicionales relacionadas con
la composición del contenido. Por ejemplo, en las secciones con bloques de contenido
textual, podemos añadir una columna adicional a la izquierda o la derecha del
contenido mediante el botón “+ Add Column”.

Figura 8. Opciones de edición sobre la sección.

9
Al situar el cursor sobre el texto aparece un menú flotante que permite modificar la
fuente tipográfica, su tamaño, determinar el nivel en la jerarquía del contenido
(párrafos, h2, h3…), crear listas, citas, entre otras opciones (figura 9).

Figura 9. Opciones de marcado para el contenido.

También situando el cursor sobre el contenido aparece otro menú flotante pensado
para incorporar imágenes, incrustar contenido desde terceras fuentes (YouTube,
Vimeo, Soundcloud, Twitter, Piktochart, infogram, Instagram, entre otros), botones,
filetes para dividir bloques de contenido o tablas.

Figura 10. Opciones para insertar contenido multimedia, separadores y tablas.

Por otro lado, si seleccionamos una palabra o fragmento de texto, aparecerá otro
menú flotante para marcar estilos (negrita, cursiva, subrayado, tachado, superíndice,
subíndice), añadir enlaces, anotaciones que aparecerán cuando los usuarios pasen
el ratón por encima del texto seleccionado o cambiar el color del texto (figura 11).

Figura 11. Menú contextual flotante para aplicar estilos al texto.

Mediante el botón “Change section type” situado en la parte izquierda de la zona de

edición del texto (figura 12), podemos modificar el tipo de sección.

10
Figura 12. Botón para modificar el tipo de sección.

Shorthand ofrece una importante cantidad de opciones. Las opciones básicas

disponibles son:

 Text: una única columna (o dos) de texto con imágenes de manera opcional.

 Text over media: Texto superpuesto sobre un fondo con una imagen o vídeo
a sangre.

 Background scrollmation: un texto superpuesto sobre varias imágenes que

van transicionando a medida que el usuario avanza.

 Scrollmation: Una columna de texto y otra de imagen que van cambiando a

medida que el usuario avanza.

 Reveal: imágenes a sangre que van cambiando a medida que el usuario avanza.

 Grid: una retícula formada por n columnas y filas en las que podemos integrar
textos o imágenes.

 Scrollpoints: una imagen sobre la que podemos superponer múltiples puntos

para añadir anotaciones textuales sobre fragmentos de la imagen.

 Media gallery: una retícula que se expande a una imagen a tamaño completo a
medida que el usuario avanza.

 Media: un vídeo o imagen a tamaño completo que no se cortará en ninguna

circunstancia en ningún tipo de dispositivo.

11
Figura 13. Algunas de los tipos de secciones disponibles.

Por otro lado, también es posible encontrar otras muchas configuraciones organizadas
bajo diferentes categorías: Synched media para aquellas situaciones en las que
predominan las imágenes, pero acompañas de algunos textos; Text para aquellas
secciones en las que el protagonista es la narrativa textual; headings, pensado para
incluir títulos de secciones que permiten separar la historia en varios capítulos o
conjuntos de secciones; Tables and grids, con formas predefinidas para incorporar
tablas y retículas con diferentes composiciones; y Maps, para incorporar mapas con
anotaciones u otros tipos de acompañamientos.

Figura 14. Mapa con anotaciones sobre varios puntos que aparecen a medida que el usuario
avanza por la historia.

12
Cuando se opta por crear una sección de tipo Text over media, tras cargar la imagen
podemos aplicar sobre ella diferentes efectos. El primero consiste en la generación
de un derivado que simula una versión en tres dimensiones de la imagen original.
En algunos casos, el efecto puede resultar interesante, aunque en muchas ocasiones
también ciertos detalles de la imagen se pierden o se deforman, por lo que es
necesario revisar con detalle el resultado obtenido. Por otro lado, podemos mejorar
automáticamente la imagen mediante un filtro (opción enhance), añadir filtros tonales
(opción filters) y seleccionar la parte más importante de la imagen con el objetivo de
que cuando un usuario visualice el proyecto desde un dispositivo más pequeño o en
otra orientación, ese fragmento se sitúe en el centro y no se pierda (opción set focus).
También es posible añadir un pie de imagen (caption) y un texto alternativo (alt text),
este último pensado tanto para los buscadores (Google, Bing…), como para las
personas con discapacidades visuales. Tras realizar los cambios es imprescindible
pulsar sobre el botón “Save changes”.

Figura 15. Opciones de edición para una imagen de fondo. En la parte superior, se puede escoger
entre una imagen, un vídeo o una imagen en 3D.

Tras terminar de editar una sección, es posible añadirla al menú de navegación situado
en la cabecera de la página marcando la opción “Add to nav” y seleccionando la
etiqueta que se desea utilizar para saltar a ese bloque (figura 16).

13
Figura 16. En la parte superior izquierda, es posible apreciar el método para añadir una sección
a la navegación de la página.

Los bloques de tipo Scrollmation se encuentran formados por un bloque de texto y otra
columna (a izquierda o derecha) en la que es posible incluir varias imágenes para
simular una transición a medida que el usuario hace scroll hacia el final de la página.
Estas imágenes pueden ser muy parecidas entre sí, lo que favorece la simulación de
una animación, o tratarse de imágenes totalmente diferentes –por ejemplo, un antes
y un después–, como se muestra en el ejemplo de la figura 18. Para subir una imagen
basta con pulsar sobre el icono de la parte superior izquierda (figura 17) y,
posteriormente, importarlas mediante el botón “upload” o desde la biblioteca de
ficheros cargados anteriormente (media library). Una vez cargadas las imágenes, es
posible reordenarlas arrastrando cada una de ellas mientras se mantiene el botón
izquierdo del ratón apretado sobre el icono de las tres líneas situado a la izquierda de
cada imagen (figura 18). También es posible eliminarlas o copiarlas con los botones
de la derecha. Una vez cargadas todas las imágenes, es necesario pulsar sobre el
botón “Done” para guardar los cambios.

Figura 17. Botón para acceder a la configuración de las imágenes scrollmation.

14
Figura 18. A la derecha, es posible ver las opciones para añadir, reordenar, eliminar y copiar
imágenes. También una pequeña previsualización del resultado de cada una.

Otro tipo de sección interesante es la denominada Scrollpoints. Se trata de una sección

que permite, a medida que el usuario avanza mediante el scroll, poner el foco en un
detalle de una imagen, ampliar esa zona y mostrar un texto relacionado con ella. Sobre
cada imagen podemos añadir tantas anotaciones sobre detalles como sea necesario.
Para ello, el botón “Edit highlighted area" facilita un editor mediante el cual podemos
seleccionar el fragmento de la imagen que deseamos ampliar y comentar (figura 19).

Figura 19. Botón para seleccionar la sección destacada.

Ahora es posible seleccionar un fragmento de la imagen, así como, opcionalmente, añadir

una etiqueta (pequeño texto que aparecerá en la zona aumentada) y un marcador.

15
Figura 20. Seleccionado la zona que se ampliará.

En la siguiente figura, es posible observar un ejemplo aplicado.

Figura 21. Ejemplo de uso de la sección de tipo scrollpoint.

Si bien existen otros muchos tipos de secciones, como Shorthand siempre carga un
ejemplo al añadirlos, resulta muy fácil entender su funcionamiento.

16
En total, es posible añadir un máximo de veinticinco secciones a una historia. Todos
los cambios que se van realizando se guardan automáticamente. Una vez finalizado el
proyecto es necesario publicarlo para que terceros puedan consultarlo. Para ello, es
necesario pulsar sobre el botón “Publish” situado en la parte superior derecha.

Antes de publicar la historia, será necesario especificar un URL específico dentro del
subdominio que antes hemos elegido para el espacio de trabajo. La opción “Publishing
visibility” permite seleccionar tres opciones: Public (cualquier persona podrá consultar
la historia e incluso los buscadores de internet podrían indexarla), Anyone with the link
(sólo las personas que tienen el enlace pueden consultar la historia, mientras que los
buscadores de Internet no la indexarán) o Restricted access (opción limitada a las
cuentas de pago que permite proporcionar acceso específico sólo a determinadas
personas).

Figura 22. Opciones de visibilidad y edición del URL bajo el que se publicará la historia.

2.2. Las colecciones

Las colecciones son listas de historias previamente creadas que pueden añadirse
como una sección en cualquier otra historia que hayamos generado. Por ejemplo, si
hemos creado varias historias sobre un periodo artístico o sobre un autor en concreto,
podemos crear al final de esa historia, un bloque con una colección que reúna todas
las historias relacionadas para que los lectores puedan descubrir otros contenidos de
interés.

Para crear una historia basta con pulsar sobre el botón “New collection” del área de
trabajo (figura 1), asignar un nombre interno a la colección (los usuarios no lo verán),
un título e ir añadiendo manualmente las historias que deseamos incluir en la
colección. Para cada historia, es posible indicar su título, una descripción y su URL.
Respecto a las direcciones URL, podemos optar porque se abran en una nueva pestaña

17
(opción open in new window) y que se comporten como un enlace de tipo nofollow. 3
Finalmente, para añadirla, pulsamos el botón “Add to collection”.

Figura 23. Configuración de una colección.

Una vez creada la colección, al añadir una sección a cualquier historia, podremos
seleccionar el tipo “Collection” (figura 24). Una vez seleccionado, tan sólo será
necesario escoger la colección que se desea añadir.

3
Simplificando, un enlace nofollow es un enlace que, a ojos de buscadores como Google, no
traspasa autoridad a la página a la que apunta, reduciendo el valor en términos de
posicionamiento que ese enlace podría proporcionar.

18
Figura 24. El tipo de sección collection permite añadir a la sección de una historia, una retícula
con enlaces destacados a las historias organizadas bajo una colección.

Figura 25. Ejemplo de una sección con un enlace a una colección.

19
Recursos de referencia
— Documentación oficial de Shorthand - [Link]

— Ejemplos de proyectos sobre arte y cultura creados con Shorthand -

[Link]

— Otros proyectos creados con Shorthand -

[Link]

— Estudio de casos - [Link]

— Shorthand full training webinar - [Link]

— Webinars - [Link]

20