GithubHelp home page GithubHelp logo

amandavisconti / neatlinetext Goto Github PK

View Code? Open in Web Editor NEW

This project forked from scholarslab/neatlinetext

0.0 1.0 0.0 969 KB

Connect texts to Neatline exhibits.

Home Page: http://www.scholarslab.org/

License: Other

JavaScript 75.61% PHP 21.44% CSS 2.95%

neatlinetext's Introduction

Notes

This is a fork of the scholarslab/NeatlineText repo for my early work learning about Neatline, Neatline Text, and Omeka S.

I am using issues to map out my work.

Once I feel confident enough about understanding NeatlineText to begin earnest work on getting it working with Omeka S (and doing any subsequent improvement work), I'll move this work to a branch of the scholarslab/NeatlineText repo.

Below is the README text from the master NeatlineText repo:

NeatlineText is a extension to the Neatline plugin that makes it possible to connect paragraphs, sentences, and words in text documents with annotations in Neatine exhibits.

For example, imagine you're making an interactive edition of Walt Whitman's "Salut au Monde," and want to wire up the locations in this passage with annotations on the map:

I see the tracks of the rail-roads of the earth;
I see them welding State to State, city to city, through North America;
I see them in Great Britain, I see them in Europe;
I see them in Asia and in Africa.

Installation

  1. Download the latest version of the plugin from the Omeka add-ons repository.

  2. Uncompress the .zip archive.

  3. Move the NeatlineText into the /plugins folder in you Omeka installation.

  4. In the Omeka administrative interface, click on Plugins in the top navigation bar and find the listing for "Neatline Widget ~ Text". Click on "Install."

Note: Since NeatlineText is a "sub-plugin" that extends the core functionality of Neatline (itself a plugin), Neatline needs to be installed in order to install NeatlineText.

Usage

Step 1: Create the Neatline records

First, create records in the Neatline exhibit for each of the geographic entities that you want to represent on the map - North America, Great Britain, etc. - and fill in the "Slug" field in the "Text" tab with some sort of semantic, easy-to-remember string:

Slug

Think of the slug as a plain-text, human-readable identifier that can be used to reference the record in other contexts. Like, for instance, attributes in HTML markup! Which brings us to...

Step 2: Create the HTML fragment

Fire up your favorite text editor, copy in the text document, and wrap sections of the text with elements with data-neatline-slug attributes that point at the record slugs:

I see the tracks of the rail-roads of the earth;
I see them welding State to State, city to city, through <span data-neatline-slug="north-america">North America</span>;
I see them in <span data-neatline-slug="great-britain">Great Britain</span>, I see them in <span data-neatline-slug="europe">Europe</span>;
I see them in <span data-neatline-slug="asia">Asia</span> and in <span data-neatline-slug="africa">Africa</span>.

In this case we're using <span> elements, since we're wrapping little inline strings, but you could add the data-neatline-slug attributes to any element at all - <p>'s, <div>'s, etc. The plugin doesn't care - it just queries for the existence of the attribute, not the element type.

Step 3: Copy the HTML into the exhibit

Once the markup is ready, just paste it into the "Narrative" input in the exhibit's edit form. Be sure to put the text editor in "Source" mode, since we're copying in raw HTML markup:

Narrative

And that's it. Now, when you open up the public or fullscreen views of the exhibit, NeatlineText will automatically wire up bi-directional connections between the spans in the text document and the corresponding records in Neatline. Out of the box, the plugin implements two basic interactions:

  • Highlighting: When the user hovers the cursor over a span in the text, any corresponding objects in the Neatline exhibit (shapes on the map, waypoints, etc.) will be highlighted. And vice versa - when the cursor hovers on an object in the exhibit, the span(s) in the text will highlight.

  • Selecting: When the user clicks on a span in the text, the Neatline exhibit will "focus" around the corresponding record in the exhibit - the map will pan and zoom to frame the annotation, the timeline will scroll to show the span, etc. And likewise, when the user selects a record in the Neatline exhibit, the text will automatically scroll to display the corresponding span.

Theming

Unlike other Neatline extensions like Waypoints and SIMILE, NeatlineText needs to be used in conjunction with a theme that positions the text next to the exhibit inside of a scrollable container element. By default, most themes just display the exhibit narrative above or below the exhibit, which means that the user would need to manually scroll up and down on the page to compare the exhibit with the text, which defeats the purpose.

There are two ways to go about this:

  • Omeka themes: To make it easy to get up and running, we've built a really simple started theme called Neatlight, which is specifically designed to house NeatlineText exhibits. Think of Neatlight as the Neatline equivalent of the default "Thanks Roy" theme that ships with Omeka - it's a simple, no-frills foundation that can be easily adapted and expanded.

  • Neatline themes: The other approach is to use Neatline's exhibit-specific themeing system, which makes it possible to create completely separate themes for each individual Neatline exhibit. For more information about this, check out the documentation, and take a look at David McClure's fork of the Neatlight theme, which contains the source code for the custom themes used in projects at neatline.dclure.org.

neatlinetext's People

Contributors

amandavisconti avatar csbailey5t avatar davidmcclure avatar

Watchers

 avatar

neatlinetext's Issues

Understand Docker

  • Learn things I don't know yet:
    • saving versions how
    • pushing to this repo how
  • Set meeting with Jeremy if need assistance learning

Local install of Omeka S

  • Asked Jeremy & Ammon about using Docker locally (Slack, 4/16/2019)
  • Is there an existing container I should use?: Yes, Jeremy has an Omeka S Neatline Docker available on SLab Github repo
  • Try setting this up & reading about saving/versioning on my own

Taking notes in NeatlineText_work.md

Get Neatline Text to work with Omeka S

Install and list errors/issues; not sure whether this is the point where I move to scholarslab/NeatlineText work, or if updating to work with Omeka S will be fairly simple and the bulk of my work will be after (improving the plugin). Famous last words...

Work through ReactJS tutorial

Zoe and Shane had Slack comments on what to use to get started. Jeremy might be interested in group summer learning around this, and that might overlap with Ronda's JS learning for the self-care bot?

When ready to move to scholarslab/NeatlineText...

  • Alert Ronda and Jeremy, Slack #neatline channel
  • Add note on this repo that work has moved there
  • Scope out remaining work using repo Projects page & share w/Ronda and Jeremy
  • Schedule regular checkin time w/Ronda and Jeremy to report progress, ask for PM and dev mentorship
  • Match scheduled working blocks to Projects plan

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.