annotate

Anotar

¡Anotar y publicar texto en la web! Este proyecto fue creado para "La Guía (editada) Latecomer's Guide to Crypto", pero puede usarse para anotar cualquier documento de texto.

Vea una demostración en vivo en https://molly.github.io/annotate/.

Cómo usar

Copie los archivos index.html , styles.css y annotate.js a su proyecto. Solo debe editar el archivo index.html , a menos que desee cambiar el comportamiento de estilo o javascript. Este proyecto no requiere el JavaScript, por lo que si desea dejarlo fuera, simplemente omita el archivo annotate.js y elimine la etiqueta <script src="./annotate.js"></script> del archivo html. La carpeta de screenshots tiene capturas de pantalla de tamaño completo de la página de índice en las vistas de escritorio ( index-desktop.png ) y móvil ( index-mobile.png ), para que pueda ver lo que produce el HTML.

Cada sección del documento sigue esta estructura básica:

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" commenter " > Commenter name </ div >
      Comment text.
    </ div >
  </ div >
</ section >

y produce:

Detalles

Cada sección de texto se captura en una fila con secciones de izquierda y derecha. El elemento <section class="group"> representa esta fila. Cada lado tiene un DIV con la clase content y las clases quote o note . quote es el texto que se está anotando, note es para las anotaciones.

Cada parte del texto resaltado en la fuente original (lado izquierdo) está marcada con etiquetas <mark> . Estos deben tener un atributo único aria-details que corresponda a la id de la anotación, lo que permitirá que Visual Focus se resalte al hacer clic. Opcionalmente, también puede tener un data-annotation-id para numerar la anotación, para ayudar a distinguir las anotaciones cuando hay múltiples en una sección.

Correspondiente a la etiqueta <mark> será un DIV con la clase de annotation o annotation-group en el lado derecho (el primero para anotaciones individuales, la segunda para anotaciones agrupadas). Estos deben tener role="comment" y una id que coincida exactamente con el valor único de aria-details del texto resaltado al que corresponde. Al igual que con el texto resaltado, puede tener un data-annotation-id para numerar la anotación.

Anotaciones agrupadas

Dentro de un grupo de anotación, habrá uno o más divs con la clase annotation . Estos pueden contener un DIV con el commenter de la clase para identificar al escritor, si hay múltiples anotadores trabajando en el documento. Estos no necesitan role="comment , data-annotation-id o id ya que están anidados dentro de un annotation-group con esos atributos.

En el caso de múltiples anotaciones dentro de un grupo de anotación, pueden aparecer directamente apilados o enhebrados (con niveles crecientes de sangría, para indicar que son respuestas entre sí). Para los comentarios de los pasos, incluya la clase thread en el segundo comentario (la primera respuesta). Cualquier respuesta posterior debe marcarse con la clase thread-x , donde x es el nivel de sangría de 2–10: thread-2 , thread-3 , ..., thread-10 . Omita las clases thread para representar múltiples anotaciones en una pila sin sangría.

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation-group " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" annotation " >
        A comment with indented responses.
      </ div >
      < div class =" annotation thread " > 
        A reply
      </ div >
      < div class =" annotation thread-2 " > 
        A second reply
      </ div >
    </ div >
  </ div >
</ section > 

Otros formatos de origen

El proyecto de guía original de Latecomer se creó usando PUG y SASS. Si prefiere trabajar con ellos, ese código fuente vive con la fuente de mi sitio web:

• Archivo PUG
• Archivo sass

Pantalla móvil

Así es como se muestran las anotaciones en el móvil: