1
2013-07-23T16:49:36-07:00
method=instancesof/content;methodNumNodes=250;
2
A Brief Introduction to CSS Syntax
Each statement, or rule, in CSS has three main elements: a selector, a property and a value. See below:
<table><tbody><tr><td valign="top" width="73"><p align="center">(1)</p></td><td valign="top" width="156"><p align="center">(2)</p></td><td valign="top" width="54"><p align="center">(3)</p></td></tr><tr><td style="text-align: center;" valign="top" width="73"><strong>#footer</strong></td><td style="text-align: center;" valign="top" width="156">{<strong>background-color</strong>:</td><td style="text-align: center;" valign="top" width="54"><strong>red</strong>;}</td></tr><tr><td valign="top" width="73"><p align="center">selector</p></td><td valign="top" width="156"><p align="center">property</p></td><td valign="top" width="54"><p align="center">value</p></td></tr></tbody></table>(1) The selector designates the html element of a page or website you wish to stylize—for instance, the html element #footer, designating the footer on Scalar pages.
(2) The property designates the style attribute of the selector you wish to stylize—for instance, the background color of the element #footer.
(3) The value specifies the style attribute of the selector you wish to style—for instance, the color red for the background of the element #footer.
Finally, the property and value are separated by a colon, terminated by a semi-colon and bounded by brackets.
Read more about CSS syntax <a href="http://www.w3schools.com/css/css_syntax.asp">here</a>.
plain
2013-07-23T17:23:14-07:00
1
2013-07-26T14:45:20-07:00
method=instancesof/content;methodNumNodes=250;
1
A Fair(y) Use Tale
Not made by me,found it online,available for download on website Disney Parody explanation of Copyright Law and Fair Use Synopsis: Professor Eric Faden of Bu...
plain
2013-07-26T14:45:20-07:00
YouTube
2007-05-19T02:31:53.000Z
video
CJn_jC4FNDo
Comedy
Jas A
1
2013-03-27T10:22:36-07:00
method=instancesof/content;methodNumNodes=250;
3
Adding Additional Metadata
How to append additional data to a page.
<p><i>This section describes functionality in Scalar's page editor, which is accessed by clicking the "New" button (if creating new content) or the "Edit" button (if editing existing content) at the bottom of the page.</i></p><p>The Metadata section at the bottom of the page editor allows you to edit additional data associated with the page.</p><p><a class="inline" href="media/scalar_stylemetadata.png" resource="media/style-and-metadata-portions-of-page-editor" rel="urn:scalar:version:37060"></a>
</p><p><strong>Scalar URL.</strong> By default, the URL for your page is derived from the title you gave it when it was first created. You can enter a new URL in this text field to make changes after the fact.</p><p><strong>Page visibility.</strong> This option determines whether the page is visible to the book's readers (whether visible or not, it will remain accessible to the book's authors).</p><p><strong>Content type</strong> Scalar books can contain pages which are flagged as "reviews" or "commentary" as a way of allowing third parties to contribute or respond to the content of the book within the book itself, while still being flagged as distinct from the primary authored material. In general you will want to leave this set to "Book content".</p><p><strong>Add additional metadata.</strong> Sometimes it can be useful to add additional data to a given page. This data is only visible within Scalar via the Metadata view, but it is fully accessible to third party applications via Scalar's API. Clicking the "Add additional metadata" button opens a pop-up window with a selection of Dublin Core and ArtStor standardized metadata fields which can be added as needed to the page.</p><h5>Saving Your Changes</h5><p>Once you're done editing the page, click "Save" to commit your changes. As with any web-based authoring tool, you should save your edits frequently to reduce the chances of losing any work should your web browser crash or your editing window be closed accidentally.</p><p>Scalar treats every edit to a page as a new version of that page, and <strong>all versions are preserved and publicly accessible</strong> by default. If you wish to delete specific versions of a page, visit <a href="editing-a-pages-history" rel="urn:scalar:version:36939">Editing a Page's History</a> to find out how.</p>
plain
2013-03-27T16:54:49-07:00
1
2013-03-27T10:18:25-07:00
method=instancesof/content;methodNumNodes=250;
9
Adding Media and Links
How to add media and various kinds of links to the text of a page.
<i>This section describes functionality in Scalar's page editor, which is accessed by clicking the "New" button (if creating new content) or the "Edit" button (if editing existing content) at the bottom of the page.</i><div>
</div><div><a class="inline" href="media/scalar_edittitle.png" resource="media/title-description-and-content-portions-of-page-editor" rel="urn:scalar:version:37045"></a>
</div><div><h5>Adding Links to Media</h5><p>Adding media to your page is done through links--by selecting a relevant bit of text and then linking it to the media you want to reference. When Scalar shows the page, it finds all of these links and turns them into media players. Because the media is referenced indirectly through links instead of directly through the kind of embed code you would use to add a YouTube video to a blog, Scalar is free to change the layout of the text and media on the fly, making your content much more flexible.</p><p>You can add media links to your content by selecting the text you want to link and then using one the following blue buttons seen at the top of the text editor in its Visual mode:</p><ul> <li><img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/media.png" alt="Media icon"> Inserts a link to a media file that's already been imported into Scalar. This is probably the type of link you'll use most often.</li>
<li><img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/annotation.png" alt="Annotation icon"> Inserts a link to a media annotation. The media will be embedded on the page and automatically cued up to the start point of the annotation (for temporal media).</li></ul><p>The kind of links created above allow maximum flexibility in the layout of your text and media--Scalar can rearrange them as needed depending on the current view. If, however, you want to embed your media in the page at a specific location in the more traditional style, you can use these options:</p><ul> <li><img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/inline_media.png" alt="Inline media icon"> Inserts an inline reference to a Scalar media file that will be embedded in the page at the selected location.</li>
<li><img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/inline_annotation.png" alt="Inline media icon"> Inserts an inline reference to a media annotation, which will likewise be embedded in the page and cued.</li></ul><h5>Adding Other Kinds of Links</h5><p>The remaining link buttons in the View mode of the text editor work as follows:</p><ul> <li><img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/note.png" alt="Note icon"> Inserts a note-style link to Scalar content. When rolled over, this link will display the contents of the linked page in a pop-up window. Similar to footnotes.</li>
<li><img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/scalar_link.png" alt="Scalar link icon"> Inserts a link to Scalar content. The title and description of the content will be displayed when rolled over, but no media will be embedded on the page.</li>
<li><img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/regular_link.png" alt="Link icon"> Inserts a conventional hyperlink to whatever URL you choose.</li></ul><h5>Creating Relationships with Other Content</h5><p>For more on this topic, visit the <a href="#">Working with Structure</a> section of the documentation.</p></div>
plain
2013-03-27T16:49:37-07:00
1
2013-03-27T10:16:54-07:00
method=instancesof/content;methodNumNodes=250;
7
Adding Text
Techniques for adding text to a page.
<p><i>This section describes functionality in Sc</i>alar's page editor, which is <i>accessed by clicking the "New" button (if creating new content) or the "Edit" button (if editing existing content) at the bottom of the page.</i></p><p><a class="inline" href="media/scalar_edittitle.png" resource="media/title-description-and-content-portions-of-page-editor" rel="urn:scalar:version:37045"></a></p><h5>Title and Description</h5><p>Every page in Scalar must have a title, and while it isn't required, it is highly recommended that every title in your book be unique. For example, a page with commentary about a video called "Cloudy Day" should probably not also be called "Cloudy Day"--otherwise readers searching in your book could get confused. Better to leave the video title as is and call the page "Cloudy Day Commentary". It's also useful to make your titles as self-contained and descriptive as possible, since you can never be sure how users will arrive at a given location. A page titled "Questions About Cloudy Day" immediately lets the reader know what it's about; a page just titled "Questions," much less so.</p><p>Page descriptions are optional, but recommended, as they appear in various places in Scalar (with more likely coming in the future) as a way to quickly let the reader know what a particular page is about. One sentence or so is usually a good length.</p><h5>Body Content</h5><p>Below the title and description is a text editor, similar to what you might find in blogging software. This is where you enter the main content of the page. The text editor has two modes, identified by the two tabs at its top: Visual and HTML. The Visual mode functions much like a typical word processor: text is displayed with styling and formatting, much as it will appear in the final page. A row of icons at the top of the Visual mode editor allows you to change the style and alignment of the text, to indent or outdent, add subscripts or superscripts, assign headings, create numbers and bulleted lists, and insert horizontal rules. The HTML mode of the editor displays the raw code that will be saved with the page, and can be used when precision in formatting is essential.</p><h5>Pasting Text into Scalar</h5><p>Pasting styled text from a word processing program into Scalar (or any blogging software) can have unpredictable results. As the text editor tries to interpret and preserve the pre-existing styles, it's easy to end up with large quantities of redundant style code that can slow your book down, add unwanted fonts, and make editing more difficult later on. The easiest way around this is to switch to the editor's HTML mode first before pasting; this will cause any formatting to be automatically removed. The downside of this approach is that it will also remove any formatting you might have intended to keep, like italic or bold text, but as with blogging software, it's usually better to add that kind of styling to text that's already been entered into the system, rather than trying to copy and paste it from another program.</p><p>If you do somehow end up with text in your book that has unwanted styling, you can easily remove it by switching the editor to Visual mode, selecting the text, and clicking the red X icon--this will delete any links and formatting from the selected text.</p>
plain
2013-03-27T16:48:01-07:00
1
2013-03-27T10:40:16-07:00
method=instancesof/content;methodNumNodes=250;
5
Advanced Topics
Exploring Scalar's more advanced features.
<p>In this section we'll cover some of Scalar's more advanced features.</p>
plain
2015-07-30T17:47:22-07:00
1
2013-03-26T12:36:28-07:00
method=instancesof/content;methodNumNodes=250;
2
Annotating Audio & Video
Adding annotations to audio and video files.
<p>To annotate an audio or video file, you must be logged in with Author privileges for the Scalar book containing the media. Navigate to the media in Scalar, and click the "Edit annotations" button at the bottom of the page. This will launch the <a href="media/scalar_videoannoeditor.png" resource="media/video-annotation-editor" rel="urn:scalar:version:37011">annotation editor</a>. Once in the editor:</p><ol> <li>Click the plus button on the left to create a new annotation. The new annotation will be created at the playhead's current position in the file.</li> <li>Enter the title of the annotation.</li> <li>Use the two "Set" buttons to set the in and out points of the annotation to the current position of the playhead.</li> <li>Enter the content of the annotation (optional).</li> <li>Enter an abstract for the annotation (optional). Whatever is entered here will be displayed alongside the media instead of the content above, which will be "saved" for when the reader navigates to the annotation's dedicated page.</li> <li>Click "Save" to save the annotation.</li></ol><p>Additionally, you can click any annotation in the annotation list on the left to select it. Selected annotations can be edited using the provided form, or deleted by clicking the minus button. When you're done editing annotations for the file, click "Done" to return to the page for the media file.</p>
text
2013-03-27T14:25:52-07:00
1
2013-03-26T12:34:56-07:00
method=instancesof/content;methodNumNodes=250;
8
Annotating Images
Adding annotations to images.
<p>To annotate an image, you must be logged in with Author privileges for the Scalar book containing the image. Navigate to the image in Scalar, and click the "Edit annotations" button at the bottom of the page. This will launch the annotation editor. Once in the editor:</p><ol> <li>Click and drag your cursor across the image, <a href="media/image_annotation_annotorious.jpg" resource="media/image-annotation-using-annotorious" data-display-content-preview-box="true">drawing a rectangle</a> around the area you wish to annotate (once you've created the annotation, you can adjust or fine-tune its area and coordinates by modifying the values in the X, Y, Width and Height fields in the annotation editor). </li> <li>Enter the title of the annotation in the field just below the rectangle.
</li><li>Click "Save."</li><li>Alternatively, instead of drawing out a rectangle, you can click the + sign at the bottom of the <a href="media/scalar_imageannoeditor.png" resource="media/image-annotation-editor" data-display-content-preview-box="true">annotation editor </a>and manually enter the coordinates and width and height for the annotation.
</li><li>Enter the content of the annotation (optional).</li> <li>Enter an abstract for the annotation (optional).
</li> <li>Click "Save" at the bottom of the annotation editor.
</li></ol><p>Additionally, you can click any annotation in the annotation list on the left to select it. Selected annotations can be edited using the provided form, or deleted by clicking the minus button. When you're done editing annotations for the file, click "Done" to return to the page for the media file.</p>
text
2015-09-10T23:16:37-07:00
1
2013-03-26T12:31:54-07:00
method=instancesof/content;methodNumNodes=250;
2
Annotating Media
Adding annotations to various media types in Scalar.
<p>Scalar enables you to add annotations to the following media types:</p><ul> <li>Images</li> <li>Audio</li> <li>Video</li> <li>Plain Text</li></ul><p>Scalar annotations are quite flexible, due to the fact that each annotation you create is also its own page, and like any Scalar page, can be tagged, added to paths, or even become a path or tag itself. Annotations can refer to multiple media files simultaneously, no matter what types they may be.</p>
plain
2013-03-26T12:45:31-07:00
1
2013-03-26T12:37:14-07:00
method=instancesof/content;methodNumNodes=250;
1
Annotating Plain Text
Adding annotations to plain text files.
<p>To annotate a plain text file (this includes files with the extensions .txt, .js, .java, .xml, and .css), you must be logged in with Author privileges for the Scalar book containing the file. Click the "New" button at the bottom of the page to create a new page; this will become your annotation.</p><ol> <li>After clicking the "New" button you should be looking at the page editor. Enter the title of the annotation.</li> <li>Enter an optional description for the annotation.</li> <li>Scroll to the bottom of the editor and look for the text that reads "To make this page an annotation," and click "specify media that it annotates".</li> <li>Select the text file you want to annotate.</li> <li>Enter the starting and ending lines of the annotation.</li> <li>Click "Save" to save the annotation.</li></ol>
plain
2013-03-26T12:37:14-07:00
1
2014-03-27T16:42:08-07:00
method=instancesof/content;methodNumNodes=250;
1
Annotation
plain
2014-03-27T16:42:08-07:00
1
2014-03-27T16:45:24-07:00
method=instancesof/content;methodNumNodes=250;
1
Annotation
plain
2014-03-27T16:45:24-07:00
1
2014-07-01T12:02:19-07:00
method=instancesof/content;methodNumNodes=250;
25
Text Annotators
<h4>Scrible</h4>Scrible is a free bookmarklet which enables users to <a href="media/Scrible%20Annotated%20Page.png" resource="media/scalar-page-annotated-with-scrible" rel="urn:scalar:version:204680" data-display-content-preview-box="true">highlight, color, or otherwise manipulate text</a> on webpages (make bold, underline, italicize or strikethrough) in order to call out or comment on key passages. Users can save the pages they've marked up into their Scrible library as well as create specific permalinks to those pages. Scrible is ideal for readers who wish to conduct and/or share research while viewing Scalar articles, books or projects.
To use Scrible, simply head over to <a href="http://www.scrible.com/">www.scrible.com</a> and sign up for an account.
<h4>
</h4>
text
2015-10-06T18:24:53-07:00
1
2013-07-24T13:23:23-07:00
method=instancesof/content;methodNumNodes=250;
6
API Explorer & Remote Access
How to use Scalar's API Explorer tool
<p>A first place to begin is Scalar’s <a href="http://scalar.usc.edu/tools/apiexplorer/">API Explorer</a>. This simple interactive tool allows you to select options to generate API query URLs and see the results.</p><p>If you wish to access the API directly (e.g., via <a href="api-helper-javascript-library" rel="urn:scalar:version:51275">Javascript</a>), data is accessed via the same URLs that are constructed in the API Explorer. User's Guide pages on <a href="query-scope" rel="urn:scalar:version:51271">query scope</a> and <a href="get-variables" rel="urn:scalar:version:51272">GET variables</a> explain the full list of available URL parameters in detail.
</p><p>There are two main ways to access the API from a remote server. First, you can proxy the data via a PHP file on your server (which sidesteps cross-site scripting restrictions) in either RDF-XML or RDF-JSON. Alternatively, you can access the API directly using <a href="http://en.wikipedia.org/wiki/JSONP">JSONP</a> (a JSON wrapper that facilitates remote calls that is supported by frameworks <a href="http://api.jquery.com/jQuery.getJSON/#jsonp">such as jQuery</a>). For example, this call will return all content nodes in the Scalar Guide, formatted in JSONP with the “abcdef123456″ callback:</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><a href="http://scalar.usc.edu/works/guide/rdf/instancesof/content?format=json&callback=abcdef123456">http://scalar.usc.edu/works/guide/rdf/instancesof/content?format=json&callback=abcdef123456</a></blockquote>
plain
2013-07-26T10:20:54-07:00
1
2013-07-24T13:31:01-07:00
method=instancesof/content;methodNumNodes=250;
6
Scalar API JavaScript library
Using Scalar's Javascript Library to access the RDF API
The Scalar API JavaScript library makes it easier to work with the Scalar API by providing an object model and a set of methods that perform most common API requests and tasks without requiring the developer to interact with raw RDF-XML or RDF-JSON. The library requires <a href="http://jquery.com">jQuery</a>.
plain
2014-01-07T18:07:11-08:00
1
2013-03-27T10:47:35-07:00
method=instancesof/content;methodNumNodes=250;
9
Book Properties
A Dashboard tab for editing book-level settings.
<p>The Dashboard's Book Properties tab enables you to change a variety of book-level settings. Changes you make here will be saved only when you click the "Save" button at the bottom of the page.</p><p><a class="inline" href="media/scalar_dash_bookprops.png" resource="media/book-properties-tab" rel="urn:scalar:version:37078"></a>
</p><p><strong>Title.</strong> The title of your book, displayed in many places.
</p><p><strong>Subtitle.</strong> An optional subtitle for your book, displayed in the book's header.</p><p><strong>Description.</strong> A optional brief description of your book, not currently displayed anywhere but can be accessed by the API.</p><p><strong>URI Segment.</strong> Determines your book's web address.
<strong>Table of contents. </strong>Enables to set a list of key links from the book that will be displayed in the "Main Menu" mode of Scalar's navigation interface on the left. Clicking "Add menu item" will bring up a window to select any content from your book; once added, you can drag and drop these items to re-order them, or click the "remove" link next to each to remove them.
</p><p><strong>Interface. </strong>Enables you to select between two reader interface designs for your book, Scalar 1 and Scalar 2.
<strong>Theme</strong>. Authors using the Scalar 1 reader interface can choose from a series of themes by selecting from the drop-down menu.
</p><p><strong>Background image. </strong>To change your book's background, you must first import the image you want to use into Scalar; then it can be selected in the drop-down menu here.</p><p><strong>Thumbnail image.</strong> The thumbnail that will appear next to your book's title on the Scalar Index page. Upload an image using the "Choose File" button.</p><p><strong>Custom style.</strong> This field accepts CSS code, which will be applied across the whole book, superseded only by that set for an individual page.</p><p><strong>Custom Javascript. </strong>Custom Javascript entered here will be applied across the whole book, superseded only by that set for an individual page. If you want to track your book's traffic, Google Analytics code can be pasted here.</p><p><strong>Scope. </strong>The phrase by which your project is described in the Scalar interface. To change, make a selection from the "Scope" drop-down menu (choices are "Book," "Article," and "Project").</p><p><strong>Publisher name.</strong> An optional publisher name that will be displayed as "Published by [name]" in the footer of every page.
</p><p><strong>Publisher logo.</strong> An optional publisher logo that will be displayed in the footer of every page.</p>
plain
2015-12-18T10:17:17-08:00
1
2013-03-27T11:01:31-07:00
method=instancesof/content;methodNumNodes=250;
3
Book Users
A Dashboard tab for editing the users associated with a book.
<p>The Dashboard's Book Users tab enables you to add and remove users from your book, and to set their privileges.</p><p><a class="inline" href="media/scalar_dash_bookusers.png" resource="media/book-users-tab" rel="urn:scalar:version:37079"></a>
</p><h5>Adding users</h5><p>To add a user to your book, click the "Add a user" button at the bottom of the page. A pop-up will prompt you to search for a user by their full name. You must enter the user's full name exactly as it appears in their account (case insensitive) to find a match. When a match is found, click the user's name to add them to your book.</p><h5>Editing users</h5><p>To edit the information for a specific user, click the "Edit" button for the row in which he or she appears in the user list.</p><p><strong>Full name.</strong> The name by which the user will be credited on any Scalar books and comments they author.</p><p><strong>Email.</strong> The user's Scalar email and login.</p><p><strong>URL.</strong> The user's home page (not currently displayed).</p><p><strong>Relationship.</strong> The user's role in the book. Options include:</p><ul> <li><strong>Author.</strong> Full editing privileges.</li> <li><strong>Commentator.</strong> Can edit existing pages, and create pages which will be flagged as commentaries to end users; no other editing privileges.</li> <li><strong>Reviewer.</strong> Can edit existing pages; no other editing privileges.</li> <li><strong>Reader.</strong> Can add signed comments to public pages; no other special privileges.</li></ul><p><strong>In index.</strong> Determines whether the user's name is shown in the book's credits on the index page and in the book's header.</p><p><strong>Order.</strong> Determines the order in which credited users will be shown on the index page and in the book's header.</p><h5>Removing users</h5> <p>To remove a user, click the "Remove" button for the row in which he or she appears in the user list.</p>
plain
2013-03-27T17:29:58-07:00
1
2013-07-25T12:09:49-07:00
method=instancesof/content;methodNumNodes=250;
1
Charlie Chaplin's "The Immigrant"
Charlie Chaplin's 61st Film Released June 17 1917. The Immigrant (also called Broke) starring the Charlie Chaplin Tramp character as an immigrant coming to the United States who is accused of theft on the voyage across the Atlantic Ocean, and befriends a young woman along the way. It also stars Edna Purviance and Eric Campbell. The movie was written and directed by Chaplin. According to Kevin Brownlow and David Gill's documentary series Unknown Chaplin, the first scenes to be written and filmed take place in what became the movie's second half, in which the penniless Tramp finds a coin and goes for a meal in a restaurant, not realising that the coin has fallen out of his pocket. It was not until later that Chaplin decided the reason the Tramp was penniless was that he had just arrived on a boat from Europe, and used this notion as the basis for the first half. Purviance reportedly was required to eat so many plates of beans during the many takes to complete the restaurant sequence (in character as another immigrant who falls in love with Charlie) that she became physically ill. The scene in which Chaplin's character kicks an immigration officer was cited later as evidence of his anti-Americanism when he was forced to leave the United States in the 1950s. The film has been selected for preservation in the United States National Film Registry. <a href="http://www.imdb.com/title/tt0008133/" rel="nofollow">http://www.imdb.com/title/tt0008133/</a>
plain
2013-07-25T12:09:49-07:00
Internet Archive
2006-12-23T01:39:59Z
movies
CC_1917_06_17_TheImmigrant
Charlie Chaplin
Silents
1
2013-03-27T11:02:36-07:00
method=instancesof/content;methodNumNodes=250;
2
Content Tabs: Pages, Media, Paths, Tags, Annotations, and Comments
Dashboard tabs that allow you to edit content at a macro level.
<p>These tabs in the Dashboard present lists of content by type for pinpoint editing. If a tab includes a number highlighted in red, that indicates the number of items of that type which are not currently live (this is especially useful for picking out comments which have not yet been moderated).</p><p><a class="inline" href="media/scalar_dash_pages.png" resource="media/pages-tab" rel="urn:scalar:version:37080"></a>
</p><h5>Editing content</h5><p>To edit a specific content element, click the "Edit" button for its row.</p><p><strong>Live?</strong> Whether the content is currently "live" (visible to users who are not logged in or logged in with Reader privileges).</p><p>To edit the content in full, click the "View" button for the row--this will open the page for that item. Then, click the "Edit" button at the bottom to edit as normal.</p><h5>Deleting content</h5><p>To permanently delete one or more content elements, check the checkboxes for each of the relevant rows in the content list and then click "Delete selected content".</p>
plain
2013-03-27T17:30:15-07:00
1
2013-03-26T09:36:46-07:00
method=instancesof/content;methodNumNodes=250;
12
Creating an Account
How to register for a new Scalar account.
<p>Creating a new Scalar account starts at the Index page.</p><h5>The Index Page</h5><p>Every installation of Scalar has an <a href="media/scalar_index_page.png" resource="media/scalar-index-page" rel="urn:scalar:version:36945" data-size="large">Index page</a> which lists all books which have been made public by their authors. If you're signed in, you'll also see all of the books you have privileges to edit, whether they've been made public yet or not.</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><a href="http://scalar.usc.edu/works">Scalar index page</a></p></blockquote><h5>Registration</h5><p>In order to create your own Scalar books, you'll need to <a href="media/scalar_registration_page.png" resource="media/scalar-registration-page" rel="urn:scalar:version:36947" data-size="large">register</a> for an account, which you can do from the <a href="http://scalar.usc.edu/works">Index page</a>. Registration is quick and easy; all we ask for is your name, email, and a password.</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><a href="http://scalar.usc.edu/works/system/register?redirect_url=/works/">Register for a Scalar account</a></p></blockquote>
text
2014-11-20T15:43:55-08:00
1
2014-08-19T15:01:55-07:00
method=instancesof/content;methodNumNodes=250;
11
Creating and Importing Tiled Images
Below you'll find step-by-step instructions for creating and importing tiled images into your Scalar project.
<b>Tiled Images</b>
Scalar supports the use of DZI files (.dzi), or Deep Zoom image files. The Deep Zoom file format functions in a manner similar to Google Maps images whereby large, high-resolution images are broken into smaller tiles which are then displayed individually only as needed, that is, only when that region of the overall image is being viewed.
Scalar users will need to create their DZI files using third party conversion tools. A list of reliable converters can be found <a href="http://openseadragon.github.io/examples/creating-zooming-images/">here</a>, but we recommend using Microsoft's Deep Zoom Composer (see below). What's more, because Deep Zoom images, and tiled images in general, require a number of associated files, Scalar users will need to find a place to host those files. Once the files have been hosted somewhere online, users can simply import the DZI file (.dzi) into their Scalar project using the internet URL importer.
<b>Step-by-Step, Using Deep Zoom Composer</b>
<ol><li>Download <a href="http://www.microsoft.com/en-us/download/details.aspx?id=24819">Deep Zoom Composer.</a></li><li>Start Deep Zoom Composer and create a new project.</li><li>Select the <i>Import tab</i> and <a href="media/deep_zoom1.jpg" resource="media/deep-zoom-composer-import" rel="urn:scalar:version:215009" data-display-content-preview-box="true">add the image</a> file(s) you'd like to convert to a DZI.</li><li>Select the <i>Layout tab</i> and drag the source image(s) from the image gallery into the center layout area..</li><li>Select the <i>Export tab</i>.</li><li>Select Images as the output type.</li><li>Enter a filename and directory for the exported DZI.</li><li>Select Export as a composition (single image).</li><li>Set the <a href="media/deep_zoom2.JPG" resource="media/deep-zoom-composer-image-settings" rel="urn:scalar:version:215010" data-display-content-preview-box="true">image settings</a> as desired.</li><li>Click the Export button.</li><li>You should now find a folder with your chosen name in the directory you designated in step 7.</li><li>In the newly created folder (from the step 11), change the extension of the dzc_output.xml file to dzc_output.dzi.</li><li>Place the entire folder in a directory that is accessible from the web. </li><li>Go to your scalar dashboard and go to the media tab.</li><li>From the drop down menu in the top-right, select "Internet URL."</li><li>For "Media File URL" enter the publicly accessible URL of the file we previously renamed dzc_output.dzi in the folder you hosted online. </li></ol><a href="http://scalar.usc.edu/works/guide/dzi-example" rel="urn:scalar:version:215003" data-display-content-preview-box="true">See an example of a DZI file in Scalar.</a><b>
OpenSeaDragon</b>
DZI files are displayed in Scalar via <a href="http://openseadragon.github.io/">OpenSeaDragon</a>, an open-source, web-based viewer for zoomable images.
<a href="dzi-example" rel="urn:scalar:version:215003" data-display-content-preview-box="true">
</a>
text
2014-08-20T11:28:26-07:00
1
2013-03-27T10:15:38-07:00
method=instancesof/content;methodNumNodes=250;
9
Creating Pages
How to add text content to a Scalar book.
<p>To create pages in Scalar, you must be logged in to a book for which you have Author privileges--this will cause the "New," "Edit," and "Trash" <a href="media/scalar_editbuttons.png" resource="media/edit-buttons" rel="urn:scalar:version:37016">buttons</a> to appear at the bottom of the current page. To create a new page, click "New".
</p>
text
2013-03-27T16:06:26-07:00
1
2013-03-26T09:46:22-07:00
method=instancesof/content;methodNumNodes=250;
5
Creating Your First Book
How to create a new book.
<p>If you entered the title of your book during the registration process, then you’ll see it featured on the <a href="http://scalar.usc.edu/works">index page</a> and can click the title to go to its home page.</p><p>If not, here's how to create your first book:</p><ol><li>Go to the <a href="http://scalar.usc.edu/works">Index page.</a></li>
<li>Check the upper-right corner to see if you're already signed in. If you see a "Sign in" link, click it and do so.</li>
<li>Click the "Dashboard" link in the upper-right corner.</li>
<li>Click the "<a href="media/scalar_dashboard_myaccount.png" resource="media/my-account-tab-of-the-scalar-dashboard" rel="urn:scalar:version:36949">My account</a>" tab.</li>
<li>At the bottom of the page where it says "Create new book," enter the title of your book (you can change it later), and click "Create." You should see a message in green at the top of the screen letting you know that the new book has been created.</li>
<li>Click the title of the book where it appears under "Your books" to go to the home page of your new book.</li></ol>
text
2013-07-30T14:31:31-07:00
1
2013-03-27T10:34:31-07:00
method=instancesof/content;methodNumNodes=250;
1
Creative Use of Structure
Thinking through creative applications of structure in your Scalar book.
<p>Structure in Scalar becomes especially powerful when it's used not just as a way to organize content in a publication, but as a way to <em>model</em> theoretical relationships. For example, let's say you're writing about three characters in a movie and the types of shots the director uses to frame them. While in a traditional book you would typically expound on those relationships in prose, in Scalar you could create a page for each character, a page for each shot type, and then tag the characters with the shot types. Now, those connections have become navigable pathways within your book to which you can add illustrative media and explanatory text. Using the tag visualization, you could even automatically generate an interactive diagram of the relationships between the characters and shot types, which could then be used as an illustration in the book.</p><p>Scalar content comes in two flavors: <strong>pages</strong> (i.e. text, specifically HTML text) and <strong>media</strong>. Anything in a Scalar book by necessity falls into one of these two categories.</p><p>The relationships Scalar can make between content also come in two flavors: <strong>whole-whole relationships</strong> (links between one whole piece of content and another) and <strong>whole-part relationships</strong> (links between one whole piece of content and part of another).</p>
plain
2013-03-27T10:34:31-07:00
1
2013-07-23T16:48:30-07:00
method=instancesof/content;methodNumNodes=250;
10
Custom Styling
Users who wish to change basic stylistic features of Scalar books can insert code from the sections below into the Custom Style field found in the Scalar Dashboard under the "Book Properties" tab.
plain
2013-09-02T13:30:08-07:00
1
2013-07-23T17:05:41-07:00
method=instancesof/content;methodNumNodes=250;
1
Custom Styling for Global Features
<h3>Background Color of Scalar Pages</h3>
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the page background color for a Scalar project one needs to begin by declaring the selector for the html element that defines the body of a document (body), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the page background color for a Scalar project to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:
<div align="center"><b>body {background-color:red;}</b>
</div>To change the page background color for a Scalar project to black using hexadecimal colors, one would insert:
<div align="center"><b>body {background-color:#000000;}</b>
</div>
And to change the page background color for a Scalar project to bright blue using RGB colors, one would insert:
<div align="center"><b>body {background-color:rgb(0,0,255);}</b>
</div>
Learn more about CSS background colors <a href="http://www.w3schools.com/cssref/pr_background-color.asp">here</a>.
<h3>Styling Links on Scalar Pages
</h3>
All linked text can be stylized with any CSS property: font color, font size etc... What's more, every link has four separate "states" which can be individually stylized. These four states are as follows:
<ul><li>a:link - a normal link that has not yet been visited </li><li>a:visited - a link which the user has already visited</li><li>a:hover - a link when the user moves the mouse cursor over it</li><li>a:active - a link at the moment it is clicked</li></ul>Thus, for example, to change the font size for linked text throughout a Scalar project to 20 pixels, one would start by declaring the selector a:link, the property they wish to modify (font-size) and then declare the size in pixels:
<div align="center"><b>a:link {font-size:20px;}
</b></div>
And to change the color of text for a link already visited by the user to red using a predefined color name, one would start by declaring the selector a:visited, the property they wish to modify (color) and then declare the value red:
<div align="center"><b>a:visited {color:red;} </b>
</div>
plain
2013-07-23T17:05:41-07:00
1
2013-07-23T17:08:36-07:00
method=instancesof/content;methodNumNodes=250;
2
Custom Styling for Scalar Media
<h3>Scalar Media</h3>
Media in Scalar are bounded by three elements: a header, border and footer. The <a href="media/MediaHeader.jpg" resource="media/scalar-media-header" rel="urn:scalar:version:50398">header </a>contains the title of the media, the <a href="media/MediaFooter.jpg" resource="media/scalar-media-footer" rel="urn:scalar:version:50397">footer</a> contains the "Details" button and the <a href="media/MediaBorder.jpg" resource="media/scalar-media-border" rel="urn:scalar:version:50396">border </a>frames the media.
<h3>Background Color for Scalar Media</h3>
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). Thus, for example, to change the background color of the header for Scalar media to red using a predefined color, one needs to begin by declaring the selector for the media header (.mediaElementHeader<b>)</b>, the property they wish to modify (background-color) and then declare the value red:
<div align="center"><b>.mediaElementHeader {background-color:red;}</b></div>
To change the background color of the footer for Scalar media to black using a hexadecimal value, one needs to begin by declaring the selector for the media footer (.mediaElementFooter<b>)</b>, the property they wish to modify (background-color) and then declare the value #000000 (the hexadecimal code for black):
<div align="center"><b>.mediaElementFooter {background-color:#000000;}</b></div>
And to change the background color of the border for Scalar media to bright blue using an rgb value, one needs to begin by declaring the selector for the media container (.mediaContainer<b>)</b>, the property they wish to modify (background-color) and then declare the value rgb(0,0,255) (the rgb code for bright blue):
<div align="center"><b>.mediaContainer {background-color:rgb(0,0,255);}</b></div>
<h3>Title for Scalar Media</h3>
To change the font size of the title shown for Scalar media in the media header, one needs to start by declaring the selector for the media header (which contains the text for the title) (.mediaElementHeader), the property they wish to modify (font-size) and then declare the value of the font size in pixels:
<div align="center"><b>.mediaElementHeader {font-size:20px;}</b></div>
<h3>Changing Elements in Media "Details" View</h3><p>
</p><p><a href="media/Details.jpg" resource="media/scalar-media-details" rel="urn:scalar:version:50448">Details view</a> of media is offered to viewers who click the "Details" button located just underneath Scalar media. The details view contains a sidebar where viewers can choose, via tabs above, to access a description, annotations and metadata on the piece of media displayed.</p><p><b>Font Size for Media Description</b>
</p>To change the font size for text in the description sidebar in media “Details” view, one would start by declaring the selector for the media sidebar in description mode (.mediaElementSidebarDesc), the property they wish to modify (font-size) and then declare the value of the font size in pixels of points.
<div align="center"><b>.mediaElementSidebarDesc {font-size:20px;}</b>
<b>
</b><div align="left"><b>Line Height for Media Description</b>
</div></div>Line height does not change the height of the text, but rather the amount of vertical space between lines of text. Thus, for example, if your line height and font size are equal, there will be no space between your lines of text. However, if your line height is set 10 pixels higher than your text, there will be exactly 10 pixels of vertical space between your lines of text. CSS accepts several values for the line height of text. The two most commonly used values are pixels and percentage. The latter designates the line height as a percentage of the current font size. To change the line height for text in the description sidebar in media “Details” view, one would start by declaring the selector for the media sidebar in description mode (.mediaElementSidebarDesc), the property they wish to modify (line-height) and then declare the value of the height in pixels or percentage (of the font in use):
<div align="center"><b>.mediaElementSidebarDesc {line-height:20px;}</b>
or;
.<b>mediaElementSidebarDesc {line-height:150%;}</b>
<div align="left"><b>Font Size For Tabs in Media "Details" View</b>
</div>
<div align="left">To change the font size for text in the tabs of media “Details” view, one would start by declaring the selector for the media "Details" navigation bar (<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:RelyOnVML></o:RelyOnVML>
<o:AllowPNG></o:AllowPNG>
</o:OfficeDocumentSettings>
</xml><![endif]--><span class="cssselector"><span style="font-size:12.0pt;
mso-bidi-font-size:11.0pt;font-family:"Times New Roman","serif";mso-fareast-font-family:
Calibri;mso-fareast-theme-font:minor-latin;mso-bidi-theme-font:minor-bidi;
mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:AR-SA">.nav_bar_options</span></span>), the property they wish to modify (font-size) and then declare the value of the font size in pixels:
<div align="center"><b><!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:RelyOnVML></o:RelyOnVML>
<o:AllowPNG></o:AllowPNG>
</o:OfficeDocumentSettings>
</xml><![endif]--><b><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves></w:TrackMoves>
<w:TrackFormatting></w:TrackFormatting>
<w:PunctuationKerning></w:PunctuationKerning>
<w:ValidateAgainstSchemas></w:ValidateAgainstSchemas>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF></w:DoNotPromoteQF>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables></w:BreakWrappedTables>
<w:SnapToGridInCell></w:SnapToGridInCell>
<w:WrapTextWithPunct></w:WrapTextWithPunct>
<w:UseAsianBreakRules></w:UseAsianBreakRules>
<w:DontGrowAutofit></w:DontGrowAutofit>
<w:SplitPgBreakAndParaMark></w:SplitPgBreakAndParaMark>
<w:EnableOpenTypeKerning></w:EnableOpenTypeKerning>
<w:DontFlipMirrorIndents></w:DontFlipMirrorIndents>
<w:OverrideTableStyleHps></w:OverrideTableStyleHps>
</w:Compatibility>
<m:mathPr>
<m:mathFont m:val="Cambria Math"></m:mathFont>
<m:brkBin m:val="before"></m:brkBin>
<m:brkBinSub m:val="--"></m:brkBinSub>
<m:smallFrac m:val="off"></m:smallFrac>
<m:dispDef></m:dispDef>
<m:lMargin m:val="0"></m:lMargin>
<m:rMargin m:val="0"></m:rMargin>
<m:defJc m:val="centerGroup"></m:defJc>
<m:wrapIndent m:val="1440"></m:wrapIndent>
<m:intLim m:val="subSup"></m:intLim>
<m:naryLim m:val="undOvr"></m:naryLim>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
DefSemiHidden="true" DefQFormat="false" DefPriority="99"
LatentStyleCount="267">
<w:LsdException Locked="false" Priority="0" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"></w:LsdException>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"></w:LsdException>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"></w:LsdException>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"></w:LsdException>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"></w:LsdException>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"></w:LsdException>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"></w:LsdException>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 1"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 2"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 3"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 4"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 5"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 6"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 7"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 8"></w:LsdException>
<w:LsdException Locked="false" Priority="39" Name="toc 9"></w:LsdException>
<w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"></w:LsdException>
<w:LsdException Locked="false" Priority="10" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"></w:LsdException>
<w:LsdException Locked="false" Priority="11" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" Priority="22" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" Priority="59" SemiHidden="false"
UnhideWhenUsed="false" Name="Table Grid"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"></w:LsdException>
<w:LsdException Locked="false" Priority="1" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"></w:LsdException>
<w:LsdException Locked="false" Priority="34" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" Name="Bibliography"></w:LsdException>
<w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"></w:LsdException>
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
mso-bidi-font-size:11.0pt;
font-family:"Times New Roman","serif";
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
</style>
<![endif]--><span class="cssselector"><span style="font-size:12.0pt;
mso-bidi-font-size:11.0pt;font-family:"Times New Roman","serif";mso-fareast-font-family:
Calibri;mso-fareast-theme-font:minor-latin;mso-bidi-theme-font:minor-bidi;
mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:AR-SA">.nav_bar_options</span></span><span style="font-size:12.0pt;mso-bidi-font-size:11.0pt;font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;mso-fareast-theme-font:minor-latin;mso-bidi-theme-font:
minor-bidi;mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:
AR-SA"> </span>{font-size:20px;}</b></b>
</div>
<div align="center"><b></b><div align="left">
</div></div></div></div>
split
2013-07-23T17:25:44-07:00
1
2013-07-23T16:56:11-07:00
method=instancesof/content;methodNumNodes=250;
1
Custom Styling in the Content Area
The content area on Scalar pages is situated vertically between the header and footer. It contains the main content of Scalar projects: text, media, visualizations. It's spatial boundaries on Scalar pages are represented by the highlighted area in the <a href="media/MainTextArea.png" resource="media/scalar-content-area" rel="urn:scalar:version:49831">image to the left</a>.
<h3>Text in the Content Area
</h3>
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts <a href="http://www.w3schools.com/cssref/css_websafe_fonts.asp">here</a>). To change the font style in the content area one needs to begin by declaring the selector for that area (#content), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style in the content area to “Georgia” with a fallback of a generic “serif” one would insert:
<div align="center"><b>#content {font-family: Georgia, Serif;} </b>
</div>
Learn more about the font-family property <a href="http://www.w3schools.com/cssref/pr_font_font-family.asp">here</a>.
<h3>Line Height in the Content Area</h3>
Line height does not change the height of the text, but rather the amount of vertical space between lines of text. Thus, for example, if your line height and font size are equal, there will be no space between your lines of text. However, if your line height is set 10 pixels higher than your text, there will be exactly 10 pixels of vertical space between your lines of text. CSS accepts several values for the line height of text. The two most commonly used values are pixels and percentage. The latter designates the line height as a percentage of the current font size. To change the line height for text in the content area, one needs to begin by declaring the selector for that area (#content), the property they wish to modify (line-height) and then the value in pixels or percentage they wish to use. Thus, to change the line height in the content area to 20 pixels one would insert:
<div align="center"><b>#content {line-height: 20px;} </b>
</div>
To change the line height in the content area to 150% (of the current font size) one would insert:
<div align="center"><b>#content {line-height: 150%;} </b>
</div>Learn more about the line-height property <a href="http://www.w3schools.com/cssref/pr_dim_line-height.asp">here</a>.
<h3>Content Area Background Color</h3>
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the content area one needs to begin by declaring the selector for the content area (#content), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the content area to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:
<div align="center"><b>#content {background-color:red;}</b>
</div>To change the background color of the content area to black using hexadecimal colors, one would insert:
<div align="center"><b>#content {background-color:#000000;}</b>
</div>
And to change the background color of the content area to bright blue using RGB colors, one would insert:
<div align="center"><b>#content {background-color:rgb(0,0,255);}</b>
<div align="left">Learn more about CSS background colors <a href="http://www.w3schools.com/cssref/pr_background-color.asp">here</a>.
</div></div>
<h3>Distance Between Header and Content Area
</h3>
To adjust the distance between the header and content area one needs to create a margin below the header. Thus to create a distance of 20 pixels between the header and content area one needs to begin by declaring the selector for the header (.cover), the property (margin-bottom) and the value in pixels (e..g. 20px) for the flowing statement:
<div align="center"><b>.cover {margin-bottom:20px;}</b>
<h3 align="left">Distance Between Footer and the Content Area</h3><div align="left">
To adjust the distance between the content area and the footer one needs to create a margin atop the footer. Thus to create a distance of 20 pixels between the content area and the footer one needs to begin by declaring the selector for the footer (#footer), the property (margin-top) and the value in pixels (e..g. 20px) for the flowing statement:
</div>
<b>#footer {margin-top:20px;}</b>
</div>
split
2013-07-23T16:56:11-07:00
1
2013-07-23T16:50:01-07:00
method=instancesof/content;methodNumNodes=250;
7
Custom Styling in the Footer
The footer on Scalar pages sits just below the main text area. It contains the Scalar logo and a host of links to Scalar User’s Guide, Terms of Service and Privacy Policy among others. It's spatial boundaries on Scalar pages are represented by the highlighted area in the <a href="media/Footer.png" resource="media/scalar-footer" rel="urn:scalar:version:49831">image to the left</a>.
<h3>Footer Text</h3><b>
Font Style</b>
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts <a href="http://www.w3schools.com/cssref/css_websafe_fonts.asp">here</a>). To change the font style in the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style in the footer to “Georgia” with a fallback of a generic “serif” one would insert:
<div align="center"><b>#footer {font-family: Georgia,Serif;} </b>
</div>
Learn more about the font-family property <a href="http://www.w3schools.com/cssref/pr_font_font-family.asp">here</a>.
<b>Font Size</b>
To change the font size of text in the footer one needs to designate the selector (#footer), select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of text in the footer to 20 pixels, one would insert:
<div align="center"><b>#footer {font-size: 20px;}</b>
</div>
Learn more about the font-size property <a href="http://www.w3schools.com/cssref/pr_font_font-size.asp">here</a>.
<h3>Footer Background Color</h3>
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the footer to red using a predefined color name (see a list of cross-browser redefined color names <a href="http://www.w3schools.com/cssref/css_colornames.asp">here</a>) one would insert:
<div align="center"><b>#footer {background-color:red;}</b>
</div>To change the background color of the footer to black using hexadecimal colors, one would insert:
<div align="center"><b>#footer {background-color:#000000;}</b>
</div>
And to change the background color of the footer to bright blue using RGB colors, one would insert:
<div align="center"><b>#footer {background-color:rgb(0,0,255);}</b>
<div align="left">Learn more about CSS background colors <a href="http://www.w3schools.com/cssref/pr_background-color.asp">here</a>.
</div></div>
<h3>Distance Between Footer and the Content Area</h3>
To adjust the distance between the content area and the footer one needs to create a margin atop the footer. Thus to create a distance of 20 pixels between the content area and the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (margin-top) and the value in pixels (e..g. 20px) for the flowing statement:
<div align="center"><b>#footer {margin-top:20px;}</b>
</div>
split
2013-07-25T20:22:07-07:00
1
2013-07-23T16:50:42-07:00
method=instancesof/content;methodNumNodes=250;
3
Custom Styling in the Header
The header on Scalar pages sits at the very top of the page. It contains a book's title, author and login options. It's spatial boundaries on Scalar pages are represented by the highlighted area in the <a href="media/Header.png" resource="media/scalar-header" rel="urn:scalar:version:49831">image to the left</a>.
<h3>Header Text</h3>
CSS accepts two values for font styles, or more specifically, for the font-family property: actual font family-names (e.g."Times New Roman" or “Arial”) and generic font families (e.g."serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts <a href="http://www.w3schools.com/cssref/css_websafe_fonts.asp">here</a>). To change the font style of the header one needs to begin by declaring the selector for the header (.cover), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style in the header to “Georgia” with a fallback of a generic “serif” one would insert:
<div align="center"><b>.cover {font-family: Georgia, Serif;} </b>
</div>
Learn more about the font-family property <a href="http://www.w3schools.com/cssref/pr_font_font-family.asp">here</a>.
<h3>Title Text</h3>
<b>Font Style</b>
To change the font style of your Scalar project’s title located in the header, one needs to designate the selector .cover_title and then select the font-family property and font style(s) just as above. Thus, to change the text style of your Scalar project’s book title to “Georgia” with a fallback of a generic “serif” one would insert:
<div align="center"><b>.cover_title {font-family: Georgia, Serif;} </b>
</div>
<b>Font Size</b>
To change the font size of your Scalar project's title, one needs to designate the selector .cover_title, select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of your Scalar project’s book title to 30 pixels, one would insert:
<div align="center"><b>.cover_title {font-size: 30px;} </b></div>
Learn more about the font-size property <a href="http://www.w3schools.com/cssref/pr_font_font-size.asp">here</a>.
<h3>Header Background Color</h3>
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the header one needs to begin by declaring the selector for the header (.cover), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the footer to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:
<div align="center"><b>.cover {background-color:red;}</b>
</div>To change the background color of the headerto black using hexadecimal colors, one would insert:
<div align="center"><b>.cover {background-color:#000000;}</b>
</div>
And to change the background color of the header to bright blue using RGB colors, one would insert:
<div align="center"><b>.cover {background-color:rgb(0,0,255);}</b>
<div align="left">Learn more about CSS background colors <a href="http://www.w3schools.com/cssref/pr_background-color.asp">here</a>.
</div></div>
<h3>Distance Between Header and the Content Area</h3>
To adjust the distance between the header and the content area one needs to create a margin below the header. Thus to create a distance of 20 pixels between the header and the content area one needs to begin by declaring the selector for the header (.cover), the property (margin-bottom) and the value in pixels (e..g. 20px) for the flowing statement:
<div align="center"><b>.cover {margin-bottom:20px;}</b>
</div>
split
2013-07-23T16:53:16-07:00
1
2013-07-23T16:59:02-07:00
method=instancesof/content;methodNumNodes=250;
2
Custom Styling in the Navigation Menu
The navigation menu sits just to the left of all other content on Scalar pages. It contains, among other items, the Home Link, Main Menu and search bar. It's spatial boundaries on Scalar pages are represented by the highlighted area in the <a href="media/Nav.png" resource="media/scalar-navigation-menu" rel="urn:scalar:version:49831">image to the left</a>.
<h3>Text in the Navigation Menu
</h3>
<b>Font Style</b>
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts <a href="http://www.w3schools.com/cssref/css_websafe_fonts.asp">here</a>). To change the font style of text in the navigation menu one needs to begin by declaring the selector (#scalarnav), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change text style in the navigation menu to “Georgia” with a fallback of a generic “serif” one would insert:
<div align="center"><b>#scalarnav {font-family: Georgia,Serif;} </b>
</div>
Learn more about the font-family property <a href="http://www.w3schools.com/cssref/pr_font_font-family.asp">here</a>.
<b>Font Size</b>
To change the font size of text in the navigation menu one needs to designate the selector (#scalarnav), select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of text in the navigation menu to 16 pixels, one would insert:
<div align="center"><div align="center"><b>#scalarnav {font-size: 16px;}</b>
</div>
</div>Learn more about the font-size property <a href="http://www.w3schools.com/cssref/pr_font_font-size.asp">here</a>.
<h3>Home Link in Navigation Menu</h3>
To change the font size for the text of the Home Link at the top of the navigation menu one needs to designate the selector for the home link (<span class="cssSelector editable ">.icon_link.home</span>), select the font-size property (font-size) and set the value for the font size in pixels (font pixel
size refers to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size for the text of the Home Link to 14 pixels, one would insert:
<div align="center"><b><span class="cssSelector editable ">.icon_link.home</span> {font-size: 14px;}</b>
<div align="left"><h3>Background Color for Navigation Menu</h3><p>
</p>Styling of the navigation menu on Scalar pages is divided into two sections: the<a href="media/NavBody.png" resource="media/scalar-navigation-menu-middle" rel="urn:scalar:version:51137"> middle</a> section which contains the table of main contents for a Scalar Project and the <a href="media/NavMain.png" resource="media/scalar-navigation-menu-top-and-bottom" rel="urn:scalar:version:51137">top and bottom together</a>, which contain the home page link, the search field and view options.
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the middle section of the navigation menu one needs to begin by declaring the selector for that section #scalarnav .body), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of this section to red using a predefined color name one would insert:
<div align="center"><b><span class="cssselector"><span style="font-size:12.0pt;
mso-bidi-font-size:11.0pt;font-family:"Times New Roman","serif";mso-fareast-font-family:
Calibri;mso-fareast-theme-font:minor-latin;mso-bidi-theme-font:minor-bidi;
mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:AR-SA">#scalarnav .body</span></span> {background-color:red;}</b>
</div>
To change the background color of the bottom and top sections of the navigation menu one needs to begin by declaring the selector for those sections (<span class="cssselector"><span style="font-size:12.0pt;
mso-bidi-font-size:11.0pt;font-family:"Times New Roman","serif";mso-fareast-font-family:
Calibri;mso-fareast-theme-font:minor-latin;mso-bidi-theme-font:minor-bidi;
mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:AR-SA">#scalarnav</span></span>), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of these sections to red using a predefined color name one would insert:
<div align="center"><b><span class="cssselector"><span style="font-size:12.0pt;
mso-bidi-font-size:11.0pt;font-family:"Times New Roman","serif";mso-fareast-font-family:
Calibri;mso-fareast-theme-font:minor-latin;mso-bidi-theme-font:minor-bidi;
mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:AR-SA">#scalarnav </span></span>{background-color:red;}</b>
</div>
</div></div>
split
2013-07-23T17:04:57-07:00
1
2013-07-23T17:10:08-07:00
method=instancesof/content;methodNumNodes=250;
5
Custom Styling in the Paths Navigation Bar
The paths navigation menu bar is situated just below the header and just above the main content area. It contains the title, page number and links to the previous and subsequent pages of the current path. It's spatial boundaries on Scalar pages are represented by the highlighted area in the<a href="media/PathNav.png" resource="media/scalar-paths-navigation-bar" rel="urn:scalar:version:50475"> image to the left</a>.
<h3>Background Color for the Paths Navigation Bar</h3><p>
</p>CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the paths navigation bar one needs to begin by declaring the selector for the bar (<span class="cssSelector editable ">.pathnavs</span>), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the paths navigation bar to red using a predefined color name (see a list of cross-browser redefined color names <a href="http://www.w3schools.com/colors/colors_names.asp">here</a>) one would insert:
<div align="center"><b><span class="cssSelector editable ">.pathnavs</span> {background-color:red;}</b>
</div>
To change the background color of the paths navigation bar black using hexadecimal colors, one would insert:
<div align="center"><b>.</b><b><b><span class="cssSelector editable ">pathnavs</span> </b> {background-color:#000000;}</b>
</div>
And to change the background color of the paths navigation bar to bright blue using RGB colors, one would insert:
<b>
</b><div align="center"><b>.</b><b><b><span class="cssSelector editable ">pathnavs</span> </b>{background-color:rgb(0,0,255);}</b>
</div>
Learn more about CSS background colors <a href="http://www.w3schools.com/cssref/pr_background-color.asp">here</a>.
<h3>Paths Title and Pages Numbers
</h3>
<b>Font Style</b>
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts <a style="z-index: 0; position: relative;" href="http://www.w3schools.com/cssref/css_websafe_fonts.asp">here</a>). To change the font style of the title and page number in the paths navigation bar one needs to begin by declaring its selector (.path_left), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style of the the title and page number in the paths navigation bar to “Georgia” with a fallback of a generic “serif” one would insert:
<div align="center"><b>.path_left {font-family: Georgia, Serif;} </b>
</div>
Learn more about the font-family property <a style="z-index: 0; position: relative;" href="http://www.w3schools.com/cssref/pr_font_font-family.asp">here</a>.
<b>Font Size</b>
To change the font size of the title and page number in the paths navigation bar, one needs to designate the selector .path_left, select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of of the title and page number in the paths navigation bar to 20 pixels, one would insert:
<div align="center"><b>
<b>.path_left</b> {font-size: 20px;} </b></div>
Learn more about the font-size property <a style="z-index: 0;" href="http://www.w3schools.com/cssref/pr_font_font-size.asp">here</a>.
<h3>Path Links</h3><p>
</p><p>Every link has four separate "states" which can be individually stylized. These four states are as follows:
</p><ul><li>a:link - a normal link that has not been visited yet </li><li>a:visited - a link which the user has already visited</li><li>a:hover - a link when the user moves the mouse cursor over it</li><li>a:active - a link at the moment it is clicked</li></ul>Thus to change the color of the links to previous and subsequent pages in the paths navigation bar which have not yet been visited to red using a predefined color value, one would start by declaring the selector for unvisited links in the paths navigation bar (.path_right .wrapper a:link), the property they wish to modify (color) and then declare the value red:
<div align="center"><b>.path_right .wrapper a:link {color:red;}
</b></div>To change the color of the links to previous and subsequent pages in the paths navigation bar which have been visited to bright black using a a hexadecimal value, one would start by declaring the selector for visited links in the paths navigation bar (.path_right .wrapper a:visited), the property they wish to modify (color) and then declare the value #000000:
<div align="center"><b>.path_right .wrapper a:link {color:#000000;}</b><b></b></div>
split
2016-08-28T10:17:14-07:00
1
2013-07-25T19:14:13-07:00
method=instancesof/content;methodNumNodes=250;
10
Custom Styling Individual Pages or Paths
All of the code snippets provided in this user’s guide can be applied to style individual pages or paths in Scalar.
<h3>Scalar Pages</h3>
To apply a CSS rule to a single page, simply click on “<a href="media/Pages1.png" resource="media/custom-css-for-individual-pages" rel="urn:scalar:version:51346">Style</a>” in the page editor located just below the sections for “Default view” and “Relationships.” This will reveal the "Style" section of the page editor. Simply enter your CSS code into the <a href="media/Pages2.png" resource="media/custom-css-feild-for-individual-pages" rel="urn:scalar:version:51347">field </a>located within this section.
<h3>Scalar Paths</h3>
To apply a CSS rule to all pages and/or items within an individual path, navigate to the page under which you specified the items in the path (e.g. the page on which you clicked "Make this page a path" and then specified the items in that path) and insert your CSS code into the "Style" field for that page (see above). This will apply your CSS rule to all pages and/or items throughout the path.
For more on creating paths, see <a href="http://scalar.usc.edu/works/guide/quickstart-creating-a-path?path=quickstarts">QuickStart: Creating a Path</a>.
split
2013-07-25T20:42:16-07:00
1
2013-08-23T13:56:52-07:00
method=instancesof/content;methodNumNodes=250;
20
Custom Styling Your Background
<h3>Background Color</h3>
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of Scalar pages one needs to begin by declaring the selector for the entire page (body), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of Scalar pages to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:
<div align="center"><b>body {background-color:red;}</b>
</div>
To change the background color of Scalar pages to black using hexadecimal colors, one would insert:
<div align="center"><b>body {background-color:#000000;}</b>
</div>
And to change the background color of Scalar pages to bright blue using RGB colors, one would insert:
<div align="center"><b>body {background-color:rgb(0,0,255);}</b>
</div>
Learn more about CSS background colors <a href="http://www.w3schools.com/cssref/pr_background-color.asp">here</a>.
<h3>Background Gradients </h3><p>
</p>Background gradients are an easy way to liven up your Scalar project. A color gradient is a color-filled region which incrementally, that is, imperceptibly, blends from one color to another. A <a href="media/gradient.jpg" resource="media/gradient" rel="urn:scalar:version:60826">vertical gradient</a> blends two colors gradually from top to bottom. A<a href="media/gradient2.jpg" resource="media/gradient-horizontal" rel="urn:scalar:version:60869"> horizontal gradient</a> blends two colors from left to right.
<b>
Vertical Gradient:</b>
Installing a color gradient in the background of your Scalar pages begins with creating a jpeg of the gradient you wish to use. This can be done with Photoshop and many other graphics editing programs. One can also use an online gradient image generator like Dynamic Drive’s <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a> or image-map.com’s <a href="http://www.image-maps.com/gradient-background-generator/">Online Gradient Background Generator</a>. The key to choosing a suitable gradient image generator is to find one that provides you with the 6 digit hex color code for the colors you choose. You’ll need to keep the hex color code for the bottom color of your gradient image for future use. Using one of these generators, simply choose which colors you’d like to start (top) and stop (bottom) with in your color-filled region. Next determine and select how tall you like your color-filled region to be. Then determine and select how wide you’d like your color-filled region to be. Since we want the full width of all you Scalar pages to be filled with your gradient and since the width of those pages will vary, we will be using CSS to tell your browser to “repeat” your gradient image horizontally until every given page is full, regardless of its width. Thus you don't need your gradient image to very wide, perhaps 10 pixels. Finally, save the image generated onto your computer and be sure to save and/or remember the 6 digit hex-color code of your bottom color.
Next, upload the gradient image from your computer into your Scalar media library. Once you’ve done this, you want to copy the url for the image. Just after you upload your image you should be taken to a Scalar page which displays the image. Click on “Details,” just below the image and then on the “Metadata” tab within the “Details” view. Copy the url for the image located in the sidebar. As an alternative, you can always go back to your dashboard, click on the “media” tab, locate your gradient image in your media library, click “View,” and copy the url displayed there.
Once you have the url, head to your Scalar dashboard and click on “Book Properties.” Scroll down to the “Custom style” field and input the following:
<blockquote><div align="left"><b>body {</b><b>background: url("http://scalar.usc.edu/works/test-9/media/gradient.php.jpg") repeat-x #000000;</b><b>}</b>
</div></blockquote>while replacing "http://scalar.usc.edu/works/test-9/media/gradient.php.jpg" with the url for your gradient and #000000 with the 6 digit hex color code for the bottom color of your gradient image. Inputting this hex color code at the end of the this CSS statement will tell the browser to display this color when the gradient image ends, essentially continuing the bottom color of your gradient till the bottom of all your Scalar pages, regardless of their height.
<b>Horizontal Gradient:</b>
Installing a color gradient in the background of your Scalar pages begins with creating a jpeg of the gradient you wish to use. This can be done with Photoshop or many other graphics editing programs. One can also use an online gradient image generator like Dynamic Drive’s <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a> or image-map.com’s <a href="http://www.image-maps.com/gradient-background-generator/">Online Gradient Background Generator</a>. The key to choosing a suitable gradient image generator is to find one that provides you with the 6 digit hex color code for the colors you choose. You’ll need to keep the hex color code for your bottom color for future use. Using one of these generators, choose which colors you’d like to start (left) and stop (right) with in your color-filled region. Next determine and select how wide you'd like your color-filled region to be. Then determine and select how tall you’d like your color-filled region to be. Since we want the full height of all you Scalar pages to be filled with your gradient and since the height of those pages will vary, we will be using CSS to tell your browser to “repeat” your gradient image vertically until every given page is full, regardless of its height . Thus you don't need your gradient image to very tall, perhaps 10 pixels. Finally, save the image generated onto your computer and be sure to save and/or remember the 6 digit hex-color code of the color with which your gradient ends.
Next, upload the gradient image from your computer into your Scalar media library. Once you’ve done this, you want to copy the url for the image. Just after you upload your image you should be taken to a Scalar page which displays the image. Click on “Details,” just below the image and then on the “Metadata” tab within the “Details” view. Copy the url for the image located in the sidebar. As an alternative, you can always go back to your dashboard, click on the “media” tab, locate your gradient image in your media library, click “View,” and copy the url displayed there.
Once you have the url, head to your Scalar dashboard and click on “Book Properties.” Scroll down to the “Custom style” field and input the following
<blockquote><div align="left"><b>body {</b><b>background: url("http://scalar.usc.edu/works/test-9/media/gradient.php.jpg") repeat-y #000000;</b><b>}</b>
</div></blockquote>while replacing "http://scalar.usc.edu/works/test-9/media/gradient.php.jpg" with the url for your gradient and #000000 with the 6 digit hex color code for the bottom color of your gradient image. Inputting this hex color code at the end of the this CSS statement will tell the browser to display this color when the gradient image ends, essentially continuing the end color of your gradient till the the full width is filled up.
<h3>Background Images</h3>
Scalar has an in-built feature, located in “Book Properties,” which allows you to designate an image from your Scalar library to act as your background. Once chosen, Scalar will tile your image horizontally and vertically to fill the full width and height of every page in your Scalar project. In this section we’ll learn to instruct the browser to tile only vertically or horizontally, to not tile at all and to position your background image.
<b>Background Image Repeat</b>
Once you’ve set your background image in Scalar’s “Book Properties” scroll down to the “Custom style” field. If you’d like your image to only tile horizontally across the page insert the following code:
<div align="center"><b>body {background-repeat: repeat-x;}</b>
</div>
If you’d like your image to only tile vertically down the page insert the following code:
<div align="center"><b>body {background-repeat: repeat-y;}</b>
</div>
If you don’t want your image to tile at all insert the following code:
<div align="center"><b>body {background-repeat: no-repeat;}</b>
</div>
Learn more about background-repeat <a href="http://www.w3schools.com/cssref/pr_background-repeat.asp">here</a>.
<h3>Background Image Position </h3>
CSS gives you a few options for positioning your background image, two of which we’ll talk about here. First, you need to decide whether you want to position a single instance of your image (no-repeat) or position where the tiling of your image begins. If you just want your background image to appear once, at a certain location on the page, then you’ll need to tell the browser that you don’t want your image to tile vertically or horizontally (with "background-repeat: no-repeat;")<b> </b>before declaring where you’d like the image to be placed.
First, you can situate your background image by declaring its x and y position (in pixels). Thus, for instance, to position your background image 100 pixels from the left-hand side of the page and 200 pixels from the top (without tiling) you would insert the following:
<blockquote><div align="left"><b>Body { </b>
<b>background-repeat:no-repeat;</b>
<b>background-position: 100px 200px; </b>
<b>}</b>
</div></blockquote>Second, you can situate your background image with keywords denoting its vertical (left, center and right) and horizontal (top, center and bottom) placement. Combinations include:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Thus to situate your background image with keywords (without tiling) you would insert the following lines:<b>
</b><blockquote><div align="left"><b>Body {</b>
<b>background-repeat:no-repeat;</b>
</div><div align="left"><div align="left"><b>background-position: top right; </b>
<b>}</b>
</div></div></blockquote>
Learn more about background image position <a href="http://www.w3schools.com/cssref/pr_background-position.asp">here</a>.
split
2013-09-02T13:30:53-07:00
1
2013-03-27T10:45:43-07:00
method=instancesof/content;methodNumNodes=250;
8
Dashboard
Scalar's interface for accessing account- and book-level settings.
<p>The Dashboard provides access to account- and book-level settings and allows you to make quick changes to the status of any content in a book. Its functionality is spread across several tabs. To access the Dashboard, click the "Dashboard" link in the top-right corner.</p><p>If you have multiple books, you can select the book you want to work with from the drop-down menu at the top.</p>
plain
12801
2014-09-29T17:47:50-07:00
1
2013-03-27T16:00:20-07:00
method=instancesof/content;methodNumNodes=250;
2
Hiding and Deleting Pages
How to hide, and ultimately delete, Scalar content.
If you are logged into a book for which you have Author privileges, you will see a "Trash" button at the bottom of each content page. Clicking this button doesn't actually delete the page; it simply puts it "in the trash," hiding it from public view.<div>
</div><div>Using the content tabs Dashboard, you can find these hidden pages and either make them live again, or delete them entirely. For more information, visit the <a href="content-tabs-pages-media-paths-tags-annotations-and-comments" rel="urn:scalar:version:36936">Content Tabs</a> page.</div>
plain
2013-03-27T16:59:32-07:00
1
2013-03-26T10:16:54-07:00
method=instancesof/content;methodNumNodes=250;
6
Developing a Media Strategy
Answering the four key questions about how you'll use media in your book.
<p>Scalar makes it easy to quickly start bringing media into your book and working with it. You can import from a variety of sources, reference, embed, and annotate to your heart's content, and we've spent a lot of effort in making all of Scalar's supported media types compatible with as many of the supported platforms as possible. There are exceptions and caveats, however, and if you're working with a large collection of media, media in a variety of formats, or need to ensure that your book will be accessible on specific platforms, then developing a <em>strategy</em> for the media in your book is essential. Writing a Scalar book makes you a publisher, and as such the responsibility for making sure the work you publish is as accessible as possible falls on you.</p><p>Every book has its own unique media requirements, but a solid media strategy will answer the same four questions no matter what the book. In this path, we'll tackle each of these questions in turn.</p>
plain
12668
2013-07-30T16:54:25-07:00
1
2014-01-07T15:57:53-08:00
method=instancesof/content;methodNumNodes=250;
2
Display the node’s title
To get the node’s title, the <a href="media/scalarapi_helloworld.js#getdisplaytitle-call" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103127">getDisplayTitle</a> method is called. The node’s description is pulled from the content property of the current version of the node (a node object may contain multiple versions of its content; the current property returns the most recent).
media
2014-01-07T18:16:37-08:00
1
2014-01-07T15:58:23-08:00
method=instancesof/content;methodNumNodes=250;
1
Display the number of related nodes
The <a href="media/scalarapi_helloworld.js#get-length-of-node-array" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103129">length of the array</a> of related nodes is used to display the number of items contained in the User Guide’s index path.
media
2014-01-07T15:58:23-08:00
1
2014-08-19T15:31:01-07:00
method=instancesof/content;methodNumNodes=250;
2
DZI Example
plain
2014-11-25T10:33:42-08:00
1
2013-03-27T11:04:10-07:00
method=instancesof/content;methodNumNodes=250;
5
Editing a Page's History
How to alter the edit history of a page.
<p>Scalar preserves all versions of each page and media file as you create your book, and <strong>all versions are preserved and publicly accessible</strong> by default. If you wish to delete specific versions of a resource, follow these instructions:</p><ol> <li>Navigate to the resource.</li>
<li>Select "History editor" from the View menu at the bottom of the navigation widget on the left.</li>
<li>A summary of all of the resource's versions will be displayed. You can click the title of any version to view it in its entirety.</li>
<li>Click the checkboxes next to any versions in the list you want to delete, and then click "Delete selected versions" at the bottom of the list</li>
<li>Deleting versions will leave gaps in the version numbering; to eliminate these gaps, click "Re-order version numbers" at the bottom of the list.</li>
</ol>
plain
2015-07-30T17:46:44-07:00
1
2013-03-27T15:59:58-07:00
method=instancesof/content;methodNumNodes=250;
4
Editing Pages
Explores the page editor in detail.
Creating a new page and editing an existing page (by clicking the "Edit" button at its bottom) both take you to the same place: the page editor. This path explains the page editor in detail.
plain
12696
2013-03-27T16:55:15-07:00
1
2013-03-27T12:50:16-07:00
method=instancesof/content;methodNumNodes=250;
3
Further Explorations
<p>Congratulations! By completing this path you've gotten acquainted with the basics of getting around in Scalar. Feel free to explore some <a href="http://scalar.usc.edu/scalar/showcase/">featured projects</a> to see what others have done with the platform, and to start adding and creating content in your own book. When you're ready to learn more, we recommend reading through the sections on <a href="working-with-media" rel="urn:scalar:version:36892">Working with Media</a>, <a href="working-with-content" rel="urn:scalar:version:36909">Working with Content</a>, and <a href="working-with-structure" rel="urn:scalar:version:36917">Working with Structure</a> to familiarize yourself with all of Scalar's capabilities as well as some important considerations for using media in your book.</p>
plain
2013-07-30T15:25:20-07:00
1
2014-01-07T15:53:18-08:00
method=instancesof/content;methodNumNodes=250;
2
Get length of node array
plain
2014-03-20T13:50:54-07:00
1
2013-07-24T13:28:12-07:00
method=instancesof/content;methodNumNodes=250;
7
GET variables
Using GET variables to changehttp://scalar.usc.edu/works/guide/rdf/instancesof/content?rec=1 the RDF information output with Scalar's API
<p>A series of GET variables are available to change the information that is output in <a href="rdf-syntax" rel="urn:scalar:version:51321">RDF</a>. Some options can be placed on queries of any <a href="query-scope" rel="urn:scalar:version:51325">scope</a>, such as the <i>format</i> option. However, others can only be placed in context of certain <a href="query-scope" rel="urn:scalar:version:51325">scopes</a>, such as <i>versions</i> which requires <i>content</i> nodes to be present.</p><h5>Format</h5><p>Change the RDF output format. The default is XML.</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><b>URL structure:</b> ?format=[xml|json]</p><p><b>Scope:</b> Install, Book, InstancesOf, Node</p><p><b>Example:</b> <a href="http://scalar.usc.edu/works/guide/rdf/instancesof/content?format=json">http://scalar.usc.edu/works/guide/rdf/instancesof/content?format=json</a></p></blockquote><h5>Versions</h5><p>By default the most recent version of each content node is returned; to return all versions use this option. Note that this can be an expensive call which will take longer for the server to produce.</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><b>URL structure:</b> ?versions=1</p><p><b>Scope:</b> InstancesOf, Node</p><p><b>Example:</b> <a href="http://scalar.usc.edu/works/guide/rdf/instancesof/content?versions=1">http://scalar.usc.edu/works/guide/rdf/instancesof/content?versions=1</a></p></blockquote><h5>Relationship recursion</h5><p>By default, content and version nodes will be displayed. However, relationship nodes (hasBody/hasTarget) can be added based on a “recursion level,” or, the amount of recursions through content relationships that will be returned. For example, asking for recursion 1 will return content and version nodes with their direct relationships to other content (ie, that a node is a tag, or in a path). Recursion 2 will return relationships of the nodes that are in turn related to the original nodes. Note that recursion is an expensive call that could take time for the server to produce. Generally, recursion 1 should be sufficient.</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><b>URL structure:</b> ?rec=[#]</p><p><b>Scope: </b>InstancesOf, Node</p><p><b>Example:</b> <a href="http://scalar.usc.edu/works/guide/rdf/instancesof/content?rec=1">http://scalar.usc.edu/works/guide/rdf/instancesof/content?rec=1</a></p></blockquote><p></p><h5>References</h5><p>Many Scalar pages reference media through URLs in their text content. In the front-end, these references are visualized by the various Scalar views. In the RDF API, these relationships can be output for easy access (removing the need to text-mine the content for the same information). Additionally, each media node will describe what pages reference them (ie, the reverse information).</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><b>URL structure:</b> ?ref=1</p><p><b>Scope:</b> InstancesOf, Node</p><p><b>Example:</b> <a href="http://scalar.usc.edu/works/guide/rdf/instancesof/content?ref=1">http://scalar.usc.edu/works/guide/rdf/instancesof/content?ref=1</a></p></blockquote><h5>Restrict</h5><p>Some recursion calls can take a long time for the server produce. Therefore, you can request that only certain relationship types are included in the query. For example, you might request that the server only return <i>path</i> relationships, excluding other types such as <i>tag</i> or <i>annotation</i>.</p><p></p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><b>URL structure:</b> ?res=[path|tag|annotation|reference|reply]</p><p><b>Scope:</b> InstancesOf, Node</p><p><b>Example:</b> <a href="http://scalar.usc.edu/works/guide/rdf/instancesof/content?res=path">http://scalar.usc.edu/works/guide/rdf/instancesof/content?res=path</a></p></blockquote><h5>Search</h5><p>Searching will return nodes where certain fields (title, description, etc) match the search query.</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><b>URL structure:</b> ?sq=(search string)</p><p><b>Scope:</b> InstancesOf</p><p><b>Example:</b> <a href="http://scalar.usc.edu/works/guide/rdf/instancesof/content?sq=metadata">http://scalar.usc.edu/works/guide/rdf/instancesof/content?sq=metadata</a></p></blockquote><h5>Pagination</h5><p>The number of nodes to return can be restricted using start and results fields. For example, asking for start=0, results=20 will return the first twenty nodes; start=20, results=20 will return the next twenty. </p><p>Note that pagination acts on the base nodes being returned. If recursion is present (?rec=1 or greater), then more than twenty results might be returned in the example above, since the relationship nodes, and the nodes referenced in those relationships, will also be returned along with the base nodes.</p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><b>URL structure:</b> ?start=(int)&results=(int)</p><p><b>Scope:</b> InstancesOf</p><p><b>Example:</b> http://scalar.usc.edu/works/guide/rdf/instancesof/content?start=20&results=20</p></blockquote>
plain
2013-07-26T10:19:29-07:00
1
2014-01-07T15:51:52-08:00
method=instancesof/content;methodNumNodes=250;
2
getDisplayTitle() call
plain
2014-03-20T13:46:28-07:00
1
2014-01-07T15:51:16-08:00
method=instancesof/content;methodNumNodes=250;
2
getNode() call
plain
2014-03-20T13:45:15-07:00
1
2014-01-07T15:52:24-08:00
method=instancesof/content;methodNumNodes=250;
2
getRelatedNodes() call
plain
2014-03-20T13:49:06-07:00
1
2013-03-26T09:35:33-07:00
method=instancesof/content;methodNumNodes=250;
5
Getting Started
Explains account and book creation, and some interface basics.
<p>Welcome to Scalar! This path will help get you up to speed with creating a Scalar account, creating your first book, and learning the basics of the Scalar interface.
</p>
plain
2014-09-25T20:22:55-07:00
1
.code {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.code li {
line-height: 0px;
white-space: pre;
tab-size: 2;
-moz-tab-size: 2;
-o-tab-size: 2;
-webkit-tab-size: 2;
text-indent: 0;
}
.code { counter-reset: li; }
.code li:before {
counter-increment: li;
content: counter(li) ". ";
background: #ececec;
border-right: 1px solid #cccccc;
color: #999;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
line-height: 24px;
margin-right: 20px;
padding-right: 5px;
text-align: right;
width: 35px;
font-size: 12px;
}
2014-01-06T15:12:12-08:00
method=instancesof/content;methodNumNodes=250;
37
Getting started with the Scalar API JavaScript library
A "hello world" example of working with the Scalar API JavaScript library.
<div>This “hello world” <a href="media/scalarapi_helloworld.js" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103026">example</a> retrieves the node representing the home page of this User’s Guide and displays its title and content (view <a href="media/scalarapi_helloworld.html" resource="media/scalar-api-hello-world-demo" rel="urn:scalar:version:103113">demo</a>).</div><div>
</div><div>For a detailed explanation, follow the path below, or check out the <a href="scalar-api-javascript-library-reference" rel="urn:scalar:version:103239">API reference</a>.</div>
media
38861
2014-01-08T08:25:26-08:00
1
2013-03-26T09:49:11-07:00
method=instancesof/content;methodNumNodes=250;
8
Getting to Know the Interface
Introduction to Scalar's interface elements.
<p>Surrounding the main content on a Scalar page are some useful interface elements that will help you make the most of a Scalar book's content and features.</p><h5>Header</h5><p>In addition to displaying the book's title and author(s), the header includes a link in the top-right corner to sign in to your account. If you're already signed in to a book you have privileges to edit, you'll also see a "Dashboard" link. Following that link opens the <a href="dashboard" rel="urn:scalar:version:36938">Dashboard</a> for your book, where you can do high-level tasks like changing the name of your book, adding and removing users, changing privacy settings, and quickly editing multiple pieces of content. The "Index" link will return you to the index of public Scalar books.</p><h5>Navigation</h5><p>On the left side of the page is Scalar's navigation interface. At its top is a link back to the "Home" page of the book, and below that is a drop-down menu that lets you change the options and information that are shown. These options include:</p><ul> <li><strong>Main menu.</strong> This is the <a href="media/scalar_nav_mainmenu.png" resource="media/main-menu-mode-of-the-navigation" rel="urn:scalar:version:36951">default mode</a> of the navigation, and is a kind of "Table of Contents" of key pages in the book. (To learn how to add items to the Main Menu for your own book, visit the <a href="dashboard" rel="urn:scalar:version:36938">Dashboard</a> section).</li>
<li><strong>Current page.</strong> This mode displays <a href="media/scalar_nav_currentpage.png" resource="media/current-page-mode-of-the-navigation" rel="urn:scalar:version:36953">information about the current page</a>, including its name and relationships to other content in the book. This mode is useful if you want to quickly navigate to items linked from your current location. If you have editing privileges in the book, it also includes the New, Edit, and Trash buttons.</li>
<li><strong>About.</strong> Here can be found useful <a href="media/scalar_nav_about.png" resource="media/about-mode-of-the-navigation" rel="urn:scalar:version:36954">meta-content about the book</a>, including Acknowledgements, Works Cited, and About the Author pages. These links are generated automatically, but need to be populated with content by the book's author.</li>
<li><strong>Explore.</strong> This mode includes links to <a href="media/scalar_nav_explore.png" resource="media/explore-mode-of-the-navigation" rel="urn:scalar:version:36956">visualizations</a> of the book's content, a tag cloud, and this User's Guide.</li>
<li><strong>Import.</strong> (Authors only) From here, you can <a href="media/Navigation%20Import%20Mode.png" resource="media/navigation-import-mode" rel="urn:scalar:version:53989">import media references</a> into your Scalar book from a variety of sources, including affiliated archives, popular web services, local and internet-hosted media files. For more about importing media, visit the <a href="working-with-media" rel="urn:scalar:version:36892">Working with Media</a> section.</li>
<li><strong>Index.</strong> An <a href="media/scalar_nav_index.png" resource="media/index-mode-of-the-navigation" rel="urn:scalar:version:36959">index of all content</a> in the book, sorted first by type and then alphabetically by title. The <a href="index-visualization" rel="urn:scalar:version:36922">Index Visualization</a> is an alternate way to see all of the content in a book.</li></ul><p>At the bottom of the navigation interface is a search field for finding content in the current book, along with a View menu for rendering the content of the current page in different ways, and a Recent menu which contains a history of navigation in the current book, filterable by content type.
</p><h5>Footer</h5><p>The footer provides a variety of utility links related to the page, the book, and Scalar itself, along with social sharing options.</p>
text
2013-07-30T14:57:34-07:00
1
2013-03-26T12:33:59-07:00
method=instancesof/content;methodNumNodes=250;
2
How Annotations Appear in Scalar
The various ways annotations can manifest in a Scalar book.
<p>Annotations appear in Scalar in a variety of ways.</p><h5>Annotations on Media Pages</h5><p>When you are viewing the page for a media file that has one or more annotations, an "Annotations" <a href="media/scalar_mediapage_annolink.png" resource="media/annotations-link" rel="urn:scalar:version:37003">link</a> will appear at the top right of the file. Clicking the link will toggle display of an <a href="media/scalar_mediapage_annosidebar.png" resource="media/annotation-sidebar" rel="urn:scalar:version:37004">annotation sidebar</a> that lists all of the annotations associated with the file. Clicking an annotation will highlight the related portion of the annotated media. A secondary link that reads either "More" or "Permalink" allows you to visit the annotation's page.</p><h5>Annotations in Content</h5><p>It is possible to embed a <a href="media/scalar_embeddedanno.png" resource="media/embedded-annotation-link" rel="urn:scalar:version:37005">direct reference to an annotation</a> into the content of a page. When this is done, a media player for the file is inserted into the page along with the content. After a few seconds (depending on the media type), the player will cue the media to display the annotation. Further, when the annotated portions of temporal media are played, a pop-up "<a href="media/scalar_liveanno.png" resource="media/live-annotation-pop-up" rel="urn:scalar:version:37006">live annotation</a>" is displayed over the content of the page, allowing for dynamic display of annotations as the media unspools.</p><h5>Annotations in Media Detail Pop-Ups</h5><p>Clicking the "Details" button associated with a media file opens a pop-up with an expanded view of the media and a variety of tabs at the top. Clicking the "Annotations" tab will display a <a href="media/scalar_detailsanno.png" resource="media/annotation-sidebar-in-media-details-pop-up" rel="urn:scalar:version:37007">list of the file's annotations</a> with similar format and functionality as seen on the media's dedicated page.</p><h5>Annotation Pages</h5><p>As mentioned above, each annotation is also <a href="media/scalar_annopage.png" resource="media/annotation-page" rel="urn:scalar:version:37008">its own page</a>. These pages automatically embed their associated media below the content of the annotation itself.</p>
text
2013-03-27T14:14:08-07:00
1
2013-03-26T10:15:38-07:00
method=instancesof/content;methodNumNodes=250;
2
How Scalar Works with Media
Basics about how media is handled in Scalar.
<p>In most cases, the media you see in a Scalar book is not hosted within Scalar itself; instead, Scalar stores <em>metadata — </em>titles, descriptions, author and publisher information, URLs and more — about media which is hosted elsewhere, perhaps in a media archive, or a web service, or on a server you control. When we talk about "importing" media into Scalar, we're mostly talking about importing that metadata, not the actual media files. Further, once that metadata is imported into Scalar, you can modify or add to it as you see fit; these changes are completely local to Scalar and are never reconciled with the source archive. Conversely, if the source archive makes a change to its own metadata for a particular media file, that change will not be reflected in your Scalar book unless you reimport the media.</p><p>While it is possible to upload your own media to the Scalar server, individual files are limited to no larger than 2 MB in size. This approach has the advantage of making Scalar books very nimble, as they don't need to carry with them an extensive media infrastructure. However, it does impose certain limitations for which it is important to be aware.</p><p>Since Scalar books are hosted "in the cloud," a network connection is required to access them. However, since most of the media assets in a Scalar book are also hosted on servers maintained by other organizations or companies, if one of them has a technical problem it can render all media from that source within your book inaccessible until the issue is resolved. This is an extremely rare occurrence, but important to keep in mind while planning and troubleshooting.</p>
plain
2013-07-30T16:52:36-07:00
1
2014-07-10T14:11:20-07:00
method=instancesof/content;methodNumNodes=250;
16
Embedding Third Party Material into a Scalar Page
The best way to embed a map, timeline or any other third party platform into a Scalar page is by using an iframe tag (<a href="http://www.w3schools.com/tags/tag_iframe.asp">read more about iframes here</a>). Here's how to do it.
<ol><li>Click <a href="media/edit%20button.PNG" resource="media/edit-button" rel="urn:scalar:version:205482" data-display-content-preview-box="true">edit at the bottom of the Scalar page</a> in which you wish to insert your map, timeline or other third party material.</li>
<li>Click the <a href="media/html%20Button.PNG" resource="media/html-tab" rel="urn:scalar:version:205483" data-display-content-preview-box="true">HTML tab</a> at the top of the page editor.</li>
<li>Find the url where the map, timeline or other material resides.</li>
<li>Paste the code below into the html editor, being sure to insert the url you have inside the quotation marks after src=. Also be sure to include http:// at the beginning of the url you're using. </li>
<b><iframe src="[your url]" frameborder="0" height="650" width="100%"></iframe></b>
</ol>Using your own url, your code should then look something like this:
<blockquote><b><iframe src="http://www.tiki-toki.com/timeline/embed/137152/4308693385" frameborder="0" width="100%" height="650" ></iframe></b>
</blockquote>And the page with embedded material should look like <a href="media/Tiki-Toki%20Embed.jpg" resource="media/example-of-timeline-embedded-into-a-scalar-page" rel="urn:scalar:version:205637" data-display-content-preview-box="true">this</a>.
<i><b>Frameborder</b></i> defines the width of the border around the material inside the iframe; a frameborder of 0 means there is no frame; a frameborder of N (frameborder="N") will place a border N pixels wide around the material.
<i><b>Width </b></i>sets the width of the material displayed. Width can be set to pixels or percentages. Setting the width to 100% (as in the example above) allows the iframe to expand to the maximum width allowed inside the main content area of a Scalar page.
<i><b>Height </b></i>sets the height of the material displayed. In the example above, we've set the height to 650 pixels.
Click below to see examples of Scalar pages with third party platforms embedded.
text
83788
2014-07-14T13:07:41-07:00
1
2013-03-26T10:26:04-07:00
method=instancesof/content;methodNumNodes=250;
6
How Will I Use It?
Thinking through the usage of media in a Scalar book.
<p>The next step in developing your media strategy is to determine how the media you'll be importing will be used. Are you including long excerpts or short? Will your readers need to compare different media files side by side? Are you using annotations to do close reading? The answers to these questions will vary widely depending on the rhetorical tactics of your project, and, like your media sources, each should be tested early and often on your target platforms.</p><h5>File Size</h5><p>How large are your media files? The cap for uploads to the Scalar server is 2 MB, but you can of course host files of any size on your own server. If you're working with existing media files from an archive, you'll most likely have to accommodate how the archive has decided to serve their media, but if you're working with files from other sources, then you need to consider your target audience, their likely connection speed, and the specific usage scenarios surrounding each type of file to determine the optimal size. Just because you have a high-resolution image doesn't necessarily mean you should include it at that resolution in your Scalar book; think about the minimum level of detail and depth you need to make your point and resize your media accordingly.</p><h5>Downloadable vs. Streaming</h5><p>Media like audio and video which unspool continuously over time are the most demanding for both network connections and computer processors. In general: the shorter and smaller your media clips, and the fewer clips you embed on a single page, the better your book will perform.</p><p>Temporal media generally come in two flavors: downloadable and streaming. Downloadable media files work like any other files; in general they must be downloaded completely before becoming usable. This can cause problems if you're using annotations; for example, if you've annotated the last five seconds of a 20 minute video that is delivered by the downloadable method, your readers are going to have to wait for the entire 20 minutes to download before they can watch the five seconds you're interested in.</p><p>Streaming media have no such limitations; they are "random access," meaning you can jump to any position in the media and start downloading data from that point. Many media archives like <a href="importing-media-from-critical-commons" rel="urn:scalar:version:36858">Critical Commons</a>, YouTube, and Vimeo support streaming and will perform well with Scalar annotations no matter where they're placed.</p><h5>Number of Media Players Per Page</h5><p>One of the great things about Scalar is the way it enables you to place multiple media files in juxtaposition on a page. There are practical limits, however, to the usefulness of this approach, especially when it comes to video and audio. A page with three or four video players should work fine; one with six or more will exhibit noticeable slowdown as the browser attempts to initialize each player simultaneously. If you have a relatively powerful computer, you may not personally experience these slowdowns, but you should keep in mind the experience of your potential readers with less powerful machines.</p><p>Since short chunks of content tend to work best on the web anyway, designing your media references to keep the maximum number of players per page to a reasonable amount is a good approach. Achieving this may be as simple as dividing media-rich sections of your book into multiple pages.</p><h5>Annotations</h5><p>Annotations can be approached in a number of different ways in Scalar. If your goal is to highlight one specific portion of a video or audio clip, it might sense to embed a link to the annotation itself in the text; this will cause the media to cue up to the correct position as the page loads. </p><p>If, however, you want to highlight multiple annotations within a single clip, this approach will lead to redundancies, as each annotation link will spawn a new media player, even though all are referring to the same video. Instead, try embedding a link to the entire clip instead: then, as readers play the video, the annotations will each be displayed in turn. Since each annotation is itself a page, another approach would be to place all of the annotations on a path: then, as the user steps through the path, they will be directed to the appropriate portions of the annotated media in the sequence you determine. </p><p>For more on creating annotations, visit the <a href="annotating-media" rel="urn:scalar:version:36896">Annotating Media</a> section.</p>
plain
2013-07-30T17:08:46-07:00
1
2014-09-30T12:06:59-07:00
method=instancesof/content;methodNumNodes=250;
4
Importing Media from the The Metropolitan Museum of Art collection
<a href="http://www.metmuseum.org/collection">The Metropolitan Museum of Art collection </a>is part of the their Open Access for Scholarly Content program and makes available 400,000 images for students, educators, researchers, and creators of non-commercial content.
To import media from The Metropolitan Museum of Art collection, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Other archives" and then "The Metropolitan Museum of Art". The Metropolitan Museum of Art importer will appear, with an option to perform a search of the service.
Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more videos to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.
plain
2014-09-30T12:38:55-07:00
1
2013-03-26T11:33:02-07:00
method=instancesof/content;methodNumNodes=250;
7
Importing Media from Affiliated Archives
Bringing media into your book from archives with which Scalar has an official relationship.
<p>Affiliated archives are ones with which Scalar has an official relationship. They include:</p><ul> <li>Critical Commons</li><li>Cuban Theater Digital Archive</li> <li>Hemispheric Institute Digital Video Library</li> <li>HyperCities
</li><li>Internet Archive</li> <li>PLAY!</li> <li>Shoah Foundation VHA Online</li> <li>Shoah Foundation VHA (partner site)</li></ul><div>Let's explore how media can be imported from each of these sources.</div>
plain
12684
2015-11-25T18:42:32-08:00
1
2013-03-26T11:33:42-07:00
method=instancesof/content;methodNumNodes=250;
2
Importing Media from Critical Commons
Bringing media from Critical Commons into your Scalar book.
<p>Critical Commons is a kind of "YouTube for scholars," a public media archive and fair use advocacy network that supports "the transformative reuse of media in scholarly and creative contexts." Critical Commons supports video, images, and audio files, and you can add your own media to it--for more information, visit the <a href="http://criticalcommons.org">Critical Commons site</a>.</p><p>To import media from Critical Commons, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Affiliated archives" and then "Critical Commons". The Critical Commons Importer will appear, with an option to perform a search of the archive. Note that it's best to wait at least a half an hour before trying to import media that was recently added to Critical Commons, to allow the media to be processed properly.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more media files to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T11:34:45-07:00
1
2013-03-26T11:36:05-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from HyperCities
Bringing HyperCities media into your Scalar book.
<p><a href="http://hypercities.com">HyperCities</a> is a collaborative research and educational platform for traveling back in time to explore the historical layers of city spaces in an interactive, hypermedia environment.</p><p>Please note that HyperCities content cannot be viewed on iOS devices.</p><p>To import media from HyperCities, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Affiliated archives" and then "HyperCities". The HyperCities Importer will appear, with an option to perform a search of the archive. Note that you must already have the URL of the HyperCities collection you wish to import in order to use this interface. The importer includes examples of several parameters which can be added to the URL that will cause the collection to be displayed in different ways.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more HyperCities collections to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T11:36:05-07:00
1
2013-03-26T11:36:36-07:00
method=instancesof/content;methodNumNodes=250;
2
Importing Media from the Internet Archive
Bringing Internet Archive media into your Scalar book.
<p>The <a href="http://archive.org">Internet Archive</a> is a non-profit digital library with the stated mission: "universal access to all knowledge." It offers permanent storage and access to collections of digitized materials, including websites, music, moving images, and books. The Internet Archive was founded by Brewster Kahle in 1996.</p><p>To import media from the Internet Archive, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Affiliated archives" and then "Internet Archive". The Internet Archive Importer will appear, with an option to perform a search of the archive. Note that it's best to wait at least a half an hour before trying to import media that was recently added to Internet Archive, to allow the media to be processed properly.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more media files to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T11:36:50-07:00
1
2013-03-26T12:25:22-07:00
method=instancesof/content;methodNumNodes=250;
6
Importing Media from Non-Affiliated Archives
Bringing media into your book from services Scalar accesses via public API.
<p>Non-affiliated or "other" archives are web services with which Scalar has no official relationship, but uses public APIs to access. These include:</p><ul> <li>Prezi</li> <li>SoundCloud</li> <li>Vimeo</li> <li>YouTube</li><li>Metropolitan Museum of Art</li><li>The Getty Museum Collection
</li></ul><div>Let's explore how media can be imported from each of these sources.
</div>
plain
12690
2014-09-30T16:43:40-07:00
1
2013-03-26T11:30:50-07:00
method=instancesof/content;methodNumNodes=250;
6
Importing Media from Online Archives
How to go about importing media from existing archives.
<p>Scalar has direct links with a number of scholarly and popular media archives, making importing media easy. To get started, make sure you're logged in to a book for which you have Author privileges, and thenclick the menu at the top of the navigation on the left side of the window and select "Import". Four options will be displayed:</p><ul> <li>Affiliated archives</li> <li>Other archives</li> <li>Local media files</li> <li>Internet media files</li></ul><p>Let's look at the first two of these options in turn.</p>
plain
12668
2013-03-27T13:17:58-07:00
1
2013-06-10T12:12:19-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from Other Scalar Books
Bringing media from other public Scalar books into your book.
<div>You can search other public Scalar books and import their media into your own book. The media file itself remains where it is; only the metadata pointing to the file is copied into your book. This is a one-time operation; updates made to the metadata in the source book will not be reflected in the destination book, and vice versa.</div><div>
</div><div>To import media from another Scalar book, click the menu at the top of the navigation on the left side of the window and select “Import”. Next, click “Other Scalar books”. The <a href="media/scalar_importscalar.png" resource="media/import-from-another-scalar-book-screen" rel="urn:scalar:version:46616">Import from another Scalar book screen</a> will appear.</div><div>
</div><div>Select the book you want to search from the menu on the left. Only books which have been made public by their authors can be searched. Enter your search terms in the field on the right, or leave the field blank to see all media in the book. Click “Search”.</div><div>
</div><div>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more media files to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</div>
text
2013-06-10T12:12:19-07:00
1
2013-03-26T11:37:23-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from PLAY!
Bringing PLAY! media into your Scalar book.
<p>The <a href="http://www.play.annenberginnovationlab.org/">PLAY! (Participatory Learning And You)</a> program collaborates with K-12 teachers and students through professional development and afterschool programming at the RFK Community Schools in downtown LA. You can import previews of PLAY! objects which can be expanded into interactive exercises by clicking a "View Page" button.</p><p>To import media from PLAY!, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Affiliated archives" and then "PLAY!". The PLAY! (Annenberg Innovation Lab) Importer will appear, with an option to perform a search of the archive.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more items to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T11:37:23-07:00
1
2013-03-26T12:27:13-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from Prezi
Bringing Prezi presentations into your Scalar book.
<p><a href="http://prezi.com">Prezi</a> is cloud-based presentation software featuring a zoomable canvas.</p><p>To import media from Prezi, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Other archives" and then "Prezi". The Prezi Importer will appear, with an option to perform a search of the service.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more presentations to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T12:27:13-07:00
1
2013-03-26T11:38:12-07:00
method=instancesof/content;methodNumNodes=250;
3
Importing Media from Shoah Foundation VHA Online
Bringing open access Shoah Foundation VHA Online media into your Scalar book.
<p>The USC Shoah Foundation’s Visual History Archive is a collection of nearly 52,000 testimonies of Holocaust survivors and other witnesses maintained by the University of Southern California's Shoah Foundation, established in 1994 by Steven Spielberg. The <a href="http://vhaonline.usc.edu/">VHA Online</a> is a collection of 1000+ video testimonies which the archive has made available to the general public, and this importer allows access to those clips. To import materials from the larger archive, you must be located at at <a href="http://sfi.usc.edu/locator/">partner site</a> and use Scalar's Shoah Foundation VHA (partner site) feature.</p><p>To import media from the Shoah Foundation VHA Online, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Affiliated archives" and then "Shoah Foundation VHA Online". The Shoah Foundation VHA Online Importer will appear, with an option to perform a search of the archive. Note that you must already have the XML feed URL for a collection you've previously assembled at <a href="http://vhaonline.usc.edu/">VHA Online</a> in order to import those videos into Scalar. You can get this URL by clicking the "XML for Scalar" option in VHA Online.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more videos to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T11:39:22-07:00
1
2013-03-26T11:39:08-07:00
method=instancesof/content;methodNumNodes=250;
2
Importing Media from Shoah Foundation VHA (Partner Site)
Bringing access-controlled media from the Shoah Foundation VHA into your Scalar book.
<p>The USC Shoah Foundation’s Visual History Archive is a collection of nearly 52,000 testimonies of Holocaust survivors and other witnesses maintained by the University of Southern California's Shoah Foundation, established in 1994 by Steven Spielberg. To import materials from this archive, you must be located at a <a href="http://sfi.usc.edu/locator/">partner site</a>. If you wish to import clips from a subset of 1000+ testimonies that have been made publicly available, use the Shoah Foundation VHA Online importer instead.</p><p>To import media from the Shoah Foundation VHA, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Affiliated archives" and then "Shoah Foundation VHA (partner site)". The Shoah Foundation VHA Importer will appear, with an option to perform a search of the archive. Note that you must already have the XML feed URL for a collection you've previously assembled at the <a href="http://vha.usc.edu/">VHA</a> in order to import those videos into Scalar. You can get this URL by clicking the "XML for Scalar" option in VHA.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more videos to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-06-04T10:08:45-07:00
1
2013-03-26T12:27:48-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from SoundCloud
Bringing SoundCloud audio into your Scalar book.
<p><a href="http://soundcloud.com">SoundCloud</a> is the "the world's largest community of sound creators."</p><p>To import media from SoundCloud, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Other archives" and then "SoundCloud". The SoundCloud Importer will appear, with an option to perform a search of the service.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more audio files to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T12:27:48-07:00
1
2013-07-09T13:57:29-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from the Cuban Theater Digital Archive
Bringing media from the CTDA into your Scalar book.
<p>The <a href="http://cubantheater.org">Cuban Theater Digital Archive</a> (CTDA) is a resource for research, teaching and learning in Cuban theater and performance as well as in related fields; a community repository for important Cuban theatrical materials; and a forum to foster scholarly communication in this field.</p><p>To import media from the CTDA, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Affiliated archives" and then "Cuban Theater Digital Archive". The CTDA Importer will appear, with an option to perform a search of the archive.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more videos to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-07-09T13:57:29-07:00
1
2013-03-26T11:34:30-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from the Hemispheric Institute Digital Video Library
Bringing media from the HIDVL into your Scalar book.
<p>The <a href="http://hemi.nyu.edu/hidvl/index.html">Hemispheric Institute Digital Video Library</a> (HIDVL) brings together in one place materials that have been available only in small, little-known archives that are inaccessible to scholars and that lack the resources to properly care for and provide access to these extraordinary cultural documents.</p><p>Please note that HIDVL content cannot be viewed on iOS devices at this time.</p><p>To import media from the HIDVL, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Affiliated archives" and then "Hemispheric Institute Digital Video Library". The Hemispheric Institute Importer will appear, with an option to perform a search of the archive.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more videos to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T11:34:30-07:00
1
2014-09-30T16:39:03-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from the The Getty Museum Collection
<a href="http://www.getty.edu/art/">The Getty Museum Collection</a> is part of their Open Content Program which currently houses more than 87,000 images from the J. Paul Getty Museum and the Getty Research Institute.
To import media from The Getty Museum Collection, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Other archives" and then "Getty Museum Collection". The Getty Museum Collection importer will appear, with an option to perform a search of the service.
Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more videos to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.
plain
2014-09-30T16:39:03-07:00
1
2013-03-26T12:28:20-07:00
method=instancesof/content;methodNumNodes=250;
2
Importing Media from Vimeo
Bringing Vimeo videos into your Scalar book.
<p><a href="http://vimeo.com">Vimeo</a> is an ad-free online video service.</p><p>To import media from Vimeo, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Other archives" and then "Vimeo". The Vimeo Importer will appear, with an option to perform a search of the service.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more videos to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T12:28:26-07:00
1
2013-03-26T12:29:04-07:00
method=instancesof/content;methodNumNodes=250;
1
Importing Media from YouTube
Bringing YouTube videos into your Scalar book.
<p><a href="http://youtube.com">YouTube</a> is a popular online video sharing service.</p><p>To import media from YouTube, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Other archives" and then "YouTube". The YouTube Importer will appear, with an option to perform a search of the service.</p><p>Once search results are returned, you can preview individual files by clicking their "Preview" links on the right, or select one or more videos to import by clicking their associated checkboxes. Then, clicking the "Import selected media" button at the bottom will bring the media's metadata into Scalar.</p>
plain
2013-03-26T12:29:04-07:00
1
2013-03-26T12:31:03-07:00
method=instancesof/content;methodNumNodes=250;
4
Importing Other Online Media
Bringing media files hosted by third parties into your Scalar book.
<p>Using this method, you can import supported media files wherever they are hosted on the web--as long as it has URL and doesn't require a login, Scalar should be able to use it. Note that importing media from sites you have no relationship risks future "link rot", as the site's owner may move or remove the file unexpectedly, thus causing it to disappear from your Scalar book without warning.</p><p>To import online media, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Internet media files". The corresponding <a href="media/scalar_importinternet.png" resource="media/import-internet-media-files-screen" rel="urn:scalar:version:36998">import screen</a> will appear.</p><p>Enter a title and description for the media. The title is required, the description optional but recommended, as it will be used as a caption for the media in specific places in Scalar.</p><p>Enter the URL of the location where the media is hosted (the media will not be moved into Scalar, only loaded from that location).</p><p>If you wish to create any relationships for the media you are importing, or to edit its styling or additional metadata, do so using the links below (this is not required and can be modified later by clicking the "Edit" button while on the page for the media file).</p><p>Click Save, and you'll be taken to the page for the newly added media file in your book.</p>
text
2013-03-27T13:22:18-07:00
1
2013-03-26T12:30:06-07:00
method=instancesof/content;methodNumNodes=250;
3
Importing Your Own Media
Bringing your local media files into Scalar.
<p>You can import media on your local hard drive into Scalar, as long as each file is no larger than 2 MB. To do so, click the menu at the top of the navigation on the left side of the window and select "Import". Next, click "Local media files". The <a href="media/scalar_importlocal.png" resource="media/import-local-media-files-screen" rel="urn:scalar:version:36997">Import Media Files</a> screen will appear.</p><p>Enter a title and description for the media. The title is required, the description optional but recommended, as it will be used as a caption for the media in specific places in Scalar.</p><p>Select the location where you want the media file to be uploaded. Usually the default "/media" location is best, as it helps ensure media file names won't collide with the names of pages in your book.</p><p>Decide whether you want the URL of the media file page in your book to be derived from the title you entered above, or the filename of the media itself.</p><p>Use the "Choose File" button to select the file you want to upload, and then click "Upload". If all goes well, you'll be taken to the page for the newly added media file in your book.</p>
text
2013-03-27T13:22:47-07:00
1
2014-01-06T16:20:08-08:00
method=instancesof/content;methodNumNodes=250;
5
Including the Scalar API JavaScript library
We include the Scalar API JavaScript itself using a <a href="media/scalarapi_helloworld.js#scalar-api-hello-world-line-5" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103059">script tag</a> that points to its location on the Scalar server. If you’re running Scalar on your own server, you should adjust this URL accordingly.
media
2014-01-07T14:30:17-08:00
1
2013-03-26T09:32:14-07:00
method=instancesof/content;methodNumNodes=250;
25
Welcome
Introduction to the User's Guide
<p>Scalar is a free, open source publishing platform that’s designed to make it easy for authors to write long-form, born-digital scholarship online. Scalar enables users to assemble media from multiple sources and juxtapose them with their own writing in a variety of ways, with minimal technical expertise required. Scalar also gives authors tools to structure essay- and book-length works in ways that take advantage of the unique capabilities of digital writing, including nested, recursive, and non-linear formats. The platform also supports collaborative authoring and reader commentary.</p><p>This user's guide includes introductions to Scalar's features as well as more in-depth material to explore as your get to know the tools. If you're familiar with blogging platforms like WordPress you'll find yourself at home with many of Scalar's editing features, though you can also do things with Scalar that would be next to impossible in a typical blog.</p><p>If this is your first time using Scalar, head down the <a href="getting-started" rel="urn:scalar:version:36820">Getting Started</a> path to acquaint yourself with the basics. If you're in a hurry, you can explore a special path that gathers all of Scalar's <a href="quickstarts" rel="urn:scalar:version:37127">QuickStart</a> documentation in one place. If you're embarking on a large project, we highly recommend you read through the sections on <a href="working-with-media" rel="urn:scalar:version:36835">Working with Media</a>, <a href="working-with-content" rel="urn:scalar:version:36909">Working with Content</a>, and <a href="working-with-structure" rel="urn:scalar:version:36917">Working with Structure</a> to familiarize yourself with all of Scalar's capabilities as well as some important considerations for using media in your book. The <a href="advanced-topics" rel="urn:scalar:version:36940">Advanced Topics</a> section dives into some useful features for those who want to dive a bit deeper into the platform. Finally, the <a href="http://scalar.usc.edu/works/guide/custom-styling">Custom Styling</a> section shows you how to tailor basic stylistic features of Scalar projects, like font size and background color. </p><p>Welcome to Scalar!</p>
plain
2015-02-03T05:06:44-08:00
1
2013-03-27T10:42:49-07:00
method=instancesof/content;methodNumNodes=250;
2
Index Visualization
A book's content, displayed in a grid.
<p>The <a href="media/scalar_visindex.png" resource="media/index-visualization-view" rel="urn:scalar:version:37028">index visualization</a> displays all content in the book in a grid format where each square represents one piece of content. Content is color-coded by type, and links between content are displayed on roll-over. Clicking a content element selects it, keeping its relationships visible even when rolling over other content, allowing multiple sets of relationships to be viewed simultaneously.</p><p>Double-clicking a square or clicking its "View" button opens the associated content (page or media file).</p>
media
2013-03-27T17:11:13-07:00
1
2014-01-07T14:31:46-08:00
method=instancesof/content;methodNumNodes=250;
2
jQuery script tag
plain
2014-03-20T13:39:40-07:00
1
2014-01-07T15:56:00-08:00
method=instancesof/content;methodNumNodes=250;
2
Load the book’s index node
To load the index or “home page” node from the current book, we use the <a href="media/scalarapi_helloworld.js#loadnode-call" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103118">loadNode</a> method.<div>
</div><div><div>Why is the call wrapped in an if statement? See “Caching data” below.</div><div>
</div><h4>URI segment or “slug”</h4><div>The first parameter (“index” in this example) is the URI segment (sometimes also referred to as the “slug”) that identifies the node to be retrieved. This is the portion of the URL which can be edited by the user on the Edit screen for a page or media file.</div><div>
</div><h4>Caching data</h4><div>The second parameter is a boolean which tells scalarapi whether or not it should ignore cached data for the node. A value of “true” forces the node to be reloaded from the server, while “false,” used here, allows the cached data to be used.</div><div>
</div><div>The construction of the call to loadNode shown in the example accounts for cases in which cached data for the node is available. The loadNode method returns true if cached data is available for the node, and so by wrapping the call in an if statement we ensure that the success handler will be called whether the node data is cached or not.</div><div>
</div><h4>Result handlers</h4><div>The third parameter is a function to be called when the node is successfully loaded, and the fourth is a function to be called when the node fails to load.</div><div>
</div><h4>Loading related nodes</h4><div>The loadNode method can retrieve related nodes; the fifth parameter indicates how many degrees of separation will be used when searching for these. Higher numbers will increase the amount of time needed to retrieve the data; use with caution.</div></div>
media
2014-01-07T15:56:46-08:00
1
2014-01-07T14:40:13-08:00
method=instancesof/content;methodNumNodes=250;
2
loadNode() call
plain
2014-03-20T13:43:58-07:00
1
2014-07-01T12:01:29-07:00
method=instancesof/content;methodNumNodes=250;
18
Maps
<h5>Story Maps</h5><a href="http://storymaps.arcgis.com/en/">Story Maps</a> is a free, online platform enabling users to create rich informational environments in which interactive maps are linked to responsive multimedia panels. Users can choose between a number of different templates or "apps." For example, <a href="media/map-tour.jpg" resource="media/story-map-tour" rel="urn:scalar:version:205458" data-display-content-preview-box="true">Story Map Tour</a> presents a sequential, place-based narrative in the form of a series of geotagged photos and captions linked to an interactive map; <a href="media/map-journal.jpg" resource="media/story-map-journal" rel="urn:scalar:version:205459" data-display-content-preview-box="true">Story Map Journal</a> lets one create a compelling map-based narrative presented as a set of journal entries; and <a href="media/swipe.jpg" resource="media/story-map-swipe" rel="urn:scalar:version:205460" data-display-content-preview-box="true">Story Map Swipe</a> displays either two separate web maps or two layers of a single web map in order to compare one map with another. There are many others to choose from.
<a href="how-to-embed" rel="urn:scalar:version:205490" data-display-content-preview-box="true">Click here to see how to embed Story Map or other third party material into a Scalar page.</a>
<a href="story-map-embed" rel="urn:scalar:version:204814" data-display-content-preview-box="true">Click here to see a Story Map Swipe Embedded in a Scalar page.</a>
<h5>Neatline</h5><a href="http://neatline.org/">Neatline</a>, hailed as a "geotemporal exhibit-builder," allows users to plot and <a href="media/neatline1.jpg" resource="media/artifacts-in-neatline" rel="urn:scalar:version:205563" data-display-content-preview-box="true">annotate artifacts</a> (letters, photographs, paintings; any visual material) on maps as well as link particular views of those maps (and thus artifacts) to <a href="media/neatline2.jpg" resource="media/timeline-in-neatline" rel="urn:scalar:version:205564" data-display-content-preview-box="true">events in a timeline</a>. Neatline is perfect for creating a narrative sequence of geo-referenced events supported by user-accessible artifactual evidence.
<a href="http://scalar.usc.edu/works/guide/how-to-embed" rel="urn:scalar:version:205490" data-display-content-preview-box="true">Click here to see how to embed Neatline or other third party material into a Scalar page.</a>
<a href="neatline-embedded-in-a-scalar-page" rel="urn:scalar:version:206194" data-display-content-preview-box="true">
Click here to see a Neatline Embedded in a Scalar page.</a><a href="http://scalar.usc.edu/works/guide/story-map-embed" rel="urn:scalar:version:204814" data-display-content-preview-box="true"></a>
text
2014-07-14T13:07:04-07:00
1
2013-03-27T10:43:39-07:00
method=instancesof/content;methodNumNodes=250;
4
Media Visualization
A book's media, rendered as a force-directed diagram.
<p>The <a href="media/scalar_vismedia.png" resource="media/media-visualization-view" rel="urn:scalar:version:37030">media visualization</a> displays all media in the book in a force-directed graph, along with links to the content that annotates and references them. Clicking a content element selects it, highlighting its relationships and allowing multiple sets of connections to be viewed simultaneously. Double-clicking a title opens the associated content (page or media file).</p>
media
2013-03-27T17:11:46-07:00
1
2013-03-27T11:40:43-07:00
method=instancesof/content;methodNumNodes=250;
2
About mode of the navigation
plain
2014-03-27T12:14:59-07:00
1
2013-03-27T14:13:04-07:00
method=instancesof/content;methodNumNodes=250;
2
Annotation page
plain
2014-03-27T17:08:23-07:00
1
2013-03-27T14:10:24-07:00
method=instancesof/content;methodNumNodes=250;
2
Annotation sidebar
plain
2014-03-27T16:59:25-07:00
1
2013-03-27T14:12:37-07:00
method=instancesof/content;methodNumNodes=250;
2
Annotation sidebar in media details pop-up
plain
2014-03-27T17:06:05-07:00
1
2013-03-27T14:09:38-07:00
method=instancesof/content;methodNumNodes=250;
2
Annotations link
plain
2014-03-27T16:59:08-07:00
1
2013-07-24T13:16:59-07:00
method=instancesof/content;methodNumNodes=250;
1
API Diagram
A simple diagram illustrating the Scalar API
plain
2013-07-24T13:16:59-07:00
1
2014-07-10T21:31:21-07:00
method=instancesof/content;methodNumNodes=250;
1
Artifacts in Neatline
plain
2014-07-10T21:31:21-07:00
1
2013-03-26T16:33:52-07:00
method=instancesof/content;methodNumNodes=250;
2
Background image
plain
2014-03-25T19:53:41-07:00
1
2013-03-27T17:26:34-07:00
method=instancesof/content;methodNumNodes=250;
5
Book properties tab
plain
2015-12-18T10:35:16-08:00
1
2013-03-27T17:27:05-07:00
method=instancesof/content;methodNumNodes=250;
1
Book users tab
A screenshot of the Book users tab of Scalar's Dashboard.
plain
2013-03-27T17:27:05-07:00
1
2013-03-27T17:04:16-07:00
method=instancesof/content;methodNumNodes=250;
1
Comments awaiting moderation
A screenshot of the Comments tab of the Dashboard, showing comments awaiting moderation.
plain
2013-03-27T17:04:16-07:00
1
2013-03-27T17:02:24-07:00
method=instancesof/content;methodNumNodes=250;
1
Comments in a Scalar book
A screenshot of comments added to a Scalar book.
plain
2013-03-27T17:02:24-07:00
1
2013-03-27T11:40:07-07:00
method=instancesof/content;methodNumNodes=250;
3
Current page mode of the navigation
plain
2014-03-27T12:13:56-07:00
1
2013-07-25T19:23:38-07:00
method=instancesof/content;methodNumNodes=250;
2
Custom CSS Field for Individual Pages
plain
2013-07-25T20:34:11-07:00
1
2013-07-25T19:23:05-07:00
method=instancesof/content;methodNumNodes=250;
1
Custom CSS for Individual Pages
plain
2013-07-25T19:23:05-07:00
1
2014-08-19T16:07:32-07:00
method=instancesof/content;methodNumNodes=250;
1
Deep Zoom Composer Image Settings
plain
2014-08-19T16:07:32-07:00
1
2014-08-19T16:06:25-07:00
method=instancesof/content;methodNumNodes=250;
1
Deep Zoom Composer Import
plain
2014-08-19T16:06:25-07:00
1
2013-03-27T17:44:43-07:00
method=instancesof/content;methodNumNodes=250;
1
Denim theme
A screenshot of Scalar's Denim theme.
plain
2013-03-27T17:44:43-07:00
1
2014-07-10T15:49:30-07:00
method=instancesof/content;methodNumNodes=250;
1
Edit Button
https://scalar.usc.edu/works/guide/media/edit button.PNG
plain
2014-07-10T15:49:30-07:00
1
2013-03-27T14:33:46-07:00
method=instancesof/content;methodNumNodes=250;
1
Edit buttons
A screenshot of the edit buttons which appear at the bottom of pages.
plain
2013-03-27T14:33:46-07:00
1
2013-03-27T14:11:09-07:00
method=instancesof/content;methodNumNodes=250;
2
Embedded annotation link
plain
2014-03-27T17:02:49-07:00
1
2013-03-27T12:32:34-07:00
method=instancesof/content;methodNumNodes=250;
1
Embedded media
A screenshot of embedded media in Scalar.
plain
2013-03-27T12:32:34-07:00
1
2014-07-08T21:27:58-07:00
method=instancesof/content;methodNumNodes=250;
1
Example of a Story Map Tour
plain
2014-07-08T21:27:58-07:00
1
2014-07-08T20:03:22-07:00
method=instancesof/content;methodNumNodes=250;
1
Example of Tiki-Toki
plain
2014-07-08T20:03:22-07:00
1
2014-07-11T10:47:38-07:00
method=instancesof/content;methodNumNodes=250;
1
Example of Timeline Embedded into a Scalar Page
https://scalar.usc.edu/works/guide/media/Tiki-Toki Embed.jpg
plain
2014-07-11T10:47:38-07:00
1
2014-07-06T15:02:31-07:00
method=instancesof/content;methodNumNodes=250;
1
Example of TimelineJS
plain
2014-07-06T15:02:31-07:00
1
2013-03-27T11:41:39-07:00
method=instancesof/content;methodNumNodes=250;
2
Explore mode of the navigation
plain
2014-03-27T12:15:50-07:00
1
2013-03-27T17:46:17-07:00
method=instancesof/content;methodNumNodes=250;
1
Fathom theme
A screenshot of Scalar's Fathom theme.
plain
2013-03-27T17:46:17-07:00
1
2013-07-26T11:01:09-07:00
method=instancesof/content;methodNumNodes=250;
1
flickr Advanced Search Creative Commons
Screenshot of flickr's Advanced Search criteria for Creative Commons
https://scalar.usc.edu/works/guide/media/flickr advanced search creative commons.png
plain
2013-07-26T11:01:09-07:00
1
2013-03-27T17:45:54-07:00
method=instancesof/content;methodNumNodes=250;
1
Gloss theme
A screenshot of Scalar's Gloss theme.
plain
2013-03-27T17:45:54-07:00
1
2013-07-26T11:00:25-07:00
method=instancesof/content;methodNumNodes=250;
1
Google Advanced Search Creative Commons
Screenshot of Google's Advanced Search field for Creative Commons content
https://scalar.usc.edu/works/guide/media/google advanced search creative commons.png
plain
2013-07-26T11:00:25-07:00
1
2013-08-26T21:57:22-07:00
method=instancesof/content;methodNumNodes=250;
1
gradient
plain
2013-08-26T21:57:22-07:00
1
2013-08-27T13:10:25-07:00
method=instancesof/content;methodNumNodes=250;
1
gradient horizontal
plain
2013-08-27T13:10:25-07:00
1
2014-07-10T15:49:55-07:00
method=instancesof/content;methodNumNodes=250;
1
HTML Tab
https://scalar.usc.edu/works/guide/media/html Button.PNG
plain
2014-07-10T15:49:55-07:00
1
2013-03-27T14:24:25-07:00
method=instancesof/content;methodNumNodes=250;
4
Image annotation editor
plain
2015-09-10T22:45:50-07:00
1
2015-09-10T22:10:33-07:00
method=instancesof/content;methodNumNodes=250;
3
Drawing Out an Image Annotation
plain
2015-09-10T23:32:20-07:00
1
2013-06-10T12:10:43-07:00
method=instancesof/content;methodNumNodes=250;
2
Import from another Scalar book screen
plain
2014-03-27T13:28:27-07:00
1
2013-03-27T13:20:43-07:00
method=instancesof/content;methodNumNodes=250;
2
Import Internet media files screen
plain
2014-03-27T13:24:36-07:00
1
2013-03-27T13:20:11-07:00
method=instancesof/content;methodNumNodes=250;
2
Import local media files screen
plain
2014-03-27T13:26:42-07:00
1
2013-03-27T11:42:45-07:00
method=instancesof/content;methodNumNodes=250;
3
Index mode of the navigation
plain
2014-03-28T13:24:52-07:00
1
2013-03-27T15:43:56-07:00
method=instancesof/content;methodNumNodes=250;
2
Index visualization view
plain
2014-03-27T14:17:53-07:00
1
2013-03-27T17:45:29-07:00
method=instancesof/content;methodNumNodes=250;
1
Linen theme
A screenshot of Scalar's Linen theme.
plain
2013-03-27T17:45:29-07:00
1
2013-03-27T14:11:51-07:00
method=instancesof/content;methodNumNodes=250;
2
Live annotation pop-up
plain
2014-03-27T16:09:11-07:00
1
2013-03-27T11:38:28-07:00
method=instancesof/content;methodNumNodes=250;
3
Main menu mode of the navigation
plain
2014-03-27T12:12:44-07:00
1
2013-03-27T12:33:16-07:00
method=instancesof/content;methodNumNodes=250;
1
Media details view
A screenshot of Scalar's "Details" view for media.
plain
2013-03-27T12:33:16-07:00
1
2013-03-27T15:40:57-07:00
method=instancesof/content;methodNumNodes=250;
1
Media emphasis view
A screenshot of Scalar's media emphasis view.
plain
2013-03-27T15:40:57-07:00
1
2013-03-27T15:41:55-07:00
method=instancesof/content;methodNumNodes=250;
1
Media per paragraph (above) view
A screenshot of Scalar's media per paragraph (above) view.
plain
2013-03-27T15:41:55-07:00
1
2013-03-27T15:42:52-07:00
method=instancesof/content;methodNumNodes=250;
1
Media per paragraph (below) view
A screenshot of Scalar's media per paragraph (below) view.
plain
2013-03-27T15:42:52-07:00
1
2013-03-27T15:44:57-07:00
method=instancesof/content;methodNumNodes=250;
2
Media visualization view
plain
2014-03-27T14:18:55-07:00
1
2013-03-27T17:44:20-07:00
method=instancesof/content;methodNumNodes=250;
1
Minimal theme
A screenshot of Scalar's Minimal theme.
plain
2013-03-27T17:44:20-07:00
1
2013-03-27T11:29:07-07:00
method=instancesof/content;methodNumNodes=250;
3
My account tab of the Scalar Dashboard
plain
2015-12-16T12:58:20-08:00
1
2013-07-30T14:50:27-07:00
method=instancesof/content;methodNumNodes=250;
2
Navigation Import Mode
https://scalar.usc.edu/works/guide/media/Navigation Import Mode.png
plain
2014-03-27T12:16:27-07:00
1
2013-03-27T17:42:31-07:00
method=instancesof/content;methodNumNodes=250;
3
Page history editor
plain
2014-03-28T13:47:59-07:00
1
2013-03-27T17:27:57-07:00
method=instancesof/content;methodNumNodes=250;
1
Pages tab
A screenshot of the Pages tab of Scalar's Dashboard.
plain
2013-03-27T17:27:57-07:00
1
2013-03-27T12:35:41-07:00
method=instancesof/content;methodNumNodes=250;
1
Path intersection
A screenshot of the interface showing an intersecting path in Scalar.
plain
2013-03-27T12:35:41-07:00
1
2013-03-27T12:43:11-07:00
method=instancesof/content;methodNumNodes=250;
1
Path table of contents
A screenshot of a path's table of contents.
plain
2013-03-27T12:43:11-07:00
1
2013-03-27T15:44:34-07:00
method=instancesof/content;methodNumNodes=250;
2
Path visualization view
plain
2014-03-27T14:18:23-07:00
1
2013-03-27T15:43:32-07:00
method=instancesof/content;methodNumNodes=250;
1
Radial visualization view
A screenshot of Scalar's radial visualization.
plain
2013-03-27T15:43:32-07:00
1
2013-07-26T09:49:49-07:00
method=instancesof/content;methodNumNodes=250;
1
RDF-JSON Code Snippet
Sample RDF-JSON Code for Scalar's API
plain
2013-07-26T09:49:49-07:00
1
2013-07-26T08:59:31-07:00
method=instancesof/content;methodNumNodes=250;
2
RDF-XML Code Snippet 1
Sample RDF-XML Code For Scalar's API
plain
2013-07-26T09:39:31-07:00
1
2013-07-26T09:48:23-07:00
method=instancesof/content;methodNumNodes=250;
1
RDF-XML Code Snippet 2
Sample RDF-XML Code for Scalar's API
plain
2013-07-26T09:48:23-07:00
1
2014-01-07T14:36:30-08:00
method=instancesof/content;methodNumNodes=250;
2
Scalar API "Hello World" demo
plain
2014-03-20T13:36:48-07:00
1
2014-01-07T13:09:31-08:00
method=instancesof/content;methodNumNodes=250;
4
Scalar API "Hello World" example code
plain
2014-03-20T13:35:28-07:00
1
2013-07-23T16:44:50-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Content Area
plain
2013-07-23T16:44:50-07:00
1
2013-07-23T16:44:08-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Footer
plain
2013-07-23T16:44:08-07:00
1
2013-07-23T16:44:26-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Header
plain
2013-07-23T16:44:26-07:00
1
2013-03-27T11:22:28-07:00
method=instancesof/content;methodNumNodes=250;
2
Scalar index page
plain
2014-03-26T13:49:37-07:00
1
2013-03-27T12:30:38-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar link rollover
A screenshot showing the pop-up that appears when rolling over a Scalar link.
plain
2013-03-27T12:30:38-07:00
1
2013-03-27T11:11:17-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar logo
The Scalar logo, designed by Alex Louie.
plain
2013-03-27T11:11:17-07:00
1
2013-07-23T16:47:06-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Media Border
plain
2013-07-23T16:47:06-07:00
1
2013-07-23T16:46:49-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Media Details
plain
2013-07-23T16:46:49-07:00
1
2013-07-23T16:47:21-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Media Footer
plain
2013-07-23T16:47:21-07:00
1
2013-07-23T16:47:36-07:00
method=instancesof/content;methodNumNodes=250;
2
Scalar Media Header
plain
2014-03-25T16:39:50-07:00
1
2013-03-27T12:31:36-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar media link
A screenshot showing a Scalar media link.
plain
2013-03-27T12:31:36-07:00
1
2013-07-23T16:45:15-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Navigation Menu
plain
2013-07-23T16:45:15-07:00
1
2013-07-23T16:45:34-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Navigation Menu, Middle
plain
2013-07-23T16:45:34-07:00
1
2013-07-23T17:02:46-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Navigation Menu, Middle
plain
2013-07-23T17:02:46-07:00
1
2013-07-23T16:45:56-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Navigation Menu, Top and Bottom
plain
2013-07-23T16:45:56-07:00
1
2013-03-27T12:32:07-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar note link
A screenshot showing a Scalar note link.
plain
2013-03-27T12:32:07-07:00
1
2014-07-06T12:20:04-07:00
method=instancesof/content;methodNumNodes=250;
2
Scalar Page Annotated with Hypothes.is
https://scalar.usc.edu/works/guide/media/Hypothes.is Annotated Page.png
plain
2014-07-06T13:45:25-07:00
1
2014-07-08T11:46:55-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Page Annotated with Scrible
https://scalar.usc.edu/works/guide/media/Scrible Annotated Page.png
plain
2014-07-08T11:46:55-07:00
1
2013-03-27T12:34:33-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar path navigation
A screenshot of Scalar's path navigation bar.
plain
2013-03-27T12:34:33-07:00
1
2013-07-23T16:46:16-07:00
method=instancesof/content;methodNumNodes=250;
1
Scalar Paths Navigation Bar
plain
2013-07-23T16:46:16-07:00
1
2013-03-27T11:24:54-07:00
method=instancesof/content;methodNumNodes=250;
2
Scalar registration page
plain
2014-03-26T13:50:07-07:00
1
2013-03-27T12:38:03-07:00
method=instancesof/content;methodNumNodes=250;
2
Scalar tag navigation
plain
2014-03-29T14:05:10-07:00
1
2014-07-06T11:36:27-07:00
method=instancesof/content;methodNumNodes=250;
3
Wikipedia Page Annotated with Scrible
https://scalar.usc.edu/works/guide/media/Scrible Page.png
plain
2014-07-06T11:41:32-07:00
1
2014-09-29T16:30:00-07:00
method=instancesof/content;methodNumNodes=250;
2
Sharing Tab
plain
2015-12-18T10:23:34-08:00
1
2013-03-27T15:39:50-07:00
method=instancesof/content;methodNumNodes=250;
1
Single column view
A screenshot of Scalar's single column view.
plain
2013-03-27T15:39:50-07:00
1
2013-03-27T17:45:05-07:00
method=instancesof/content;methodNumNodes=250;
1
Slate theme
A screenshot of Scalar's Slate theme.
plain
2013-03-27T17:45:05-07:00
1
2013-03-27T15:41:26-07:00
method=instancesof/content;methodNumNodes=250;
1
Split emphasis view
A screenshot of Scalar's split emphasis view.
plain
2013-03-27T15:41:26-07:00
1
2014-07-10T13:30:54-07:00
method=instancesof/content;methodNumNodes=250;
1
Story Map Journal
plain
2014-07-10T13:30:54-07:00
1
2014-07-10T13:31:32-07:00
method=instancesof/content;methodNumNodes=250;
1
Story Map Swipe
plain
2014-07-10T13:31:32-07:00
1
2014-07-10T13:29:45-07:00
method=instancesof/content;methodNumNodes=250;
1
Story Map Tour
plain
2014-07-10T13:29:45-07:00
1
2013-03-27T16:53:29-07:00
method=instancesof/content;methodNumNodes=250;
2
Style and metadata portions of page editor
plain
2014-03-27T16:21:01-07:00
1
2013-03-27T15:45:20-07:00
method=instancesof/content;methodNumNodes=250;
1
Tag visualization view
A screenshot of Scalar's tag visualization.
plain
2013-03-27T15:45:20-07:00
1
2013-03-27T15:40:26-07:00
method=instancesof/content;methodNumNodes=250;
1
Text emphasis view
A screenshot of Scalar's text emphasis view.
plain
2013-03-27T15:40:26-07:00
1
2014-07-10T21:31:43-07:00
method=instancesof/content;methodNumNodes=250;
1
Timeline in Neatline
plain
2014-07-10T21:31:43-07:00
1
2013-03-27T16:11:01-07:00
method=instancesof/content;methodNumNodes=250;
2
Title, description, and content portions of page editor
plain
2014-03-27T16:18:40-07:00
1
2013-03-27T14:24:48-07:00
method=instancesof/content;methodNumNodes=250;
2
Video annotation editor
plain
2014-03-27T16:50:43-07:00
1
2013-07-26T11:34:20-07:00
method=instancesof/content;methodNumNodes=250;
1
Vimeo Creative Commons search
Screenshots showing how to search for Creative Commons content on Vimeo
plain
2013-07-26T11:34:20-07:00
1
2013-07-26T12:13:20-07:00
method=instancesof/content;methodNumNodes=250;
1
YouTube Creative Commons Search
Screenshot showing how to filter a YouTube search for Creative Commons-licensed content
https://scalar.usc.edu/works/guide/media/Screen Shot 2013-07-26 at 11.40.14 AM.png
plain
2013-07-26T12:13:20-07:00
1
2013-03-27T10:46:30-07:00
method=instancesof/content;methodNumNodes=250;
6
My Account
A Dashboard tab for editing account settings.
<p>The Dashboard's My Account tab enables you to update the email, name, and password associated with your account. You can create new books here as well. Changes you make here will be saved only when you click the "Save" button in the middle of the page.</p><p><a class="inline" href="media/scalar_dashboard_myaccount.png" resource="media/my-account-tab-of-the-scalar-dashboard" rel="urn:scalar:version:36949"></a>
</p><p><strong>Email (login).</strong> Your Scalar email and login.</p><p><strong>Full name.</strong> The name by which you will be credited on any Scalar books and comments you author.</p><p><strong>Change password.</strong> Enables you to update the password associated with your account.</p><p><strong>Create new book.</strong> Enables you to create a new book by entering its title and clicking the "Create" button.</p><p><b>Duplicate a book.</b> Allows you to duplicate another Scalar book in its entirety. To make your book duplicatable go to the Sharing tab in your dashboard and select "Yes" under Duplicability.</p><p><strong>Delete book.</strong> Books cannot be deleted with this interface. Please send an email to a <a href="http://scalar.usc.edu/contact/">Scalar admin</a> to request the deletion of a book.</p>
plain
2014-09-30T10:55:26-07:00
1
2014-07-14T12:03:46-07:00
method=instancesof/content;methodNumNodes=250;
5
Neatline Embedded in a Scalar Page
<iframe src="http://hotchkiss.neatline.org/neatline-exhibits/show/chancellorsville-may-3-4-1863-138/fullscreen" frameborder="0" height="650" width="100%"></iframe>
plain
2014-07-14T13:03:45-07:00
1
2013-07-25T12:21:43-07:00
method=instancesof/content;methodNumNodes=250;
1
Night of the Living Dead
Night of the Living Dead
plain
2013-07-25T12:21:43-07:00
Internet Archive
2010-09-21T16:00:47Z
movies
NightOfTheLivingDead_228
nicholls.physics
1
2013-03-27T10:43:15-07:00
method=instancesof/content;methodNumNodes=250;
3
Path Visualization
A book's paths, rendered as a tree.
<p>The <a href="media/scalar_vispath.png" resource="media/path-visualization-view" rel="urn:scalar:version:37029">path visualization</a> displays all paths in the book in a hierarchical format, with content color-coded by type. Double-clicking a title opens the associated content (page or media file).</p>
media
2013-03-27T17:11:30-07:00
1
2013-07-24T13:26:03-07:00
method=instancesof/content;methodNumNodes=250;
9
Query Scope
Understanding the four scopes for Scalar API Queries
<p>Scalar API queries are grouped into four scopes. Each scope allows access to a different piece of a Scalar book. A combination of calls might be needed to gain all information about a Scalar book (e.g., the book’s title and all of its content). However, a single call, for example to <i>instancesof/content</i>, will return all content in a Scalar book. Adding a <a href="get-variables" rel="urn:scalar:version:51272">GET variable</a> to the same call will return all content plus all relationships between content, effectively modeling the entire Scalar book in a single query.</p><h5>Install</h5><p>Information about a Scalar installation including its title and list of public Scalar books.
URL structure: http://<i>domain</i>/<i>install</i>/rdf</p><p>Example: <a href="http://scalar.usc.edu/works/rdf">http://scalar.usc.edu/works/rdf</a></p><h5>Book</h5><p>Information about a Scalar book including its title, authors, and table of contents.</p><p>URL structure: http://<i>domain</i>/<i>install</i>/<i>book</i>/rdf</p><p>Example: <a href="http://scalar.usc.edu/works/guide/rdf">http://scalar.usc.edu/works/guide/rdf</a></p><h5>InstanceOf</h5><p>A list of nodes by a certain type (class), such as all nodes (content), text-based nodes (pages), or paths. Supported classes are <i>content</i>, <i>page</i>, <i>media</i>, <i>path</i>, <i>tag</i>, <i>annotation</i>, <i>reply</i>, and <i>reference</i>.</p><p>URL structure: http://<i>domain</i>/<i>install</i>/<i>book</i>/rdf/instancesof/<i>class</i></p><p>Examples: </p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><a href="http://scalar.usc.edu/works/guide/rdf/instancesof/content">http://scalar.usc.edu/works/guide/rdf/instancesof/content</a>
<a href="http://scalar.usc.edu/works/guide/rdf/instancesof/page">http://scalar.usc.edu/works/guide/rdf/instancesof/page</a>
<a href="http://scalar.usc.edu/works/guide/rdf/instancesof/path">http://scalar.usc.edu/works/guide/rdf/instancesof/path</a></blockquote><h5>Node</h5><p>Information about a specific node.</p><p>URL structure: http://<i>domain</i>/<i>install</i>/<i>book</i>/rdf/node/<i>node-URI-segment</i></p><p>Example: <a href="http://scalar.usc.edu/works/guide/rdf/node/index">http://scalar.usc.edu/works/guide/rdf/node/index</a></p>
plain
2013-07-26T10:07:55-07:00
1
2013-03-28T13:45:58-07:00
method=instancesof/content;methodNumNodes=250;
4
QuickStart: Adding annotated media to a page
How to add an annotated media file to a Scalar page.
<p>These steps will add an annotation link to a page which will cue up its related content; the placement and size of the resulting media player depends on the page's <a href="quickstart-adding-annotated-media-to-a-page" rel="urn:scalar:version:37130">default view</a>. To insert annotated media at a specific position (more precise, but less flexible), see <a href="quickstart-adding-inline-annotated-media-to-a-page" rel="urn:scalar:version:37118">Adding inline annotated media to a page</a>. Note that before adding an annotation to a page you will need to have already created the annotation in Scalar. </p><ol> <li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Select the text you want to link to the annotation.</li>
<li>Click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/annotation.png" alt="Annotation icon"> and select the annotation you want to link.</li>
<li>Next to "Default view," select the <a href="selecting-a-pages-default-view" rel="urn:scalar:version:37059">view</a> you want for this page (only the Text emphasis, Media emphasis, Split Emphasis, and Media per paragraph views support linked annotations).</li>
<li>Click "Save."</li></ol> <p>For more details, see <a href="adding-media-and-links" rel="urn:scalar:version:37058">Adding Media and Links</a>.</p>
plain
2013-07-30T16:20:32-07:00
1
2013-03-28T13:49:40-07:00
method=instancesof/content;methodNumNodes=250;
3
QuickStart: Adding inline annotated media to a page
<p>These steps will embed a media player cued to an annotation in a page at a specific point. To insert a annotation link instead (less precise, but more flexible in that the default view for the page determines the placement and size of the resulting media player), see <a href="quickstart-adding-annotated-media-to-a-page" rel="urn:scalar:version:37116">Adding annotated media to a page</a>. Note that before adding an annotation to a page you will need to have already created the annotation in Scalar.</p><ol>
<li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Place the insertion point at the point in the page where you want to embed the annotated media.</li>
<li>Click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/inline_annotation.png" alt="Inline annotation icon"> and select the annotation you want to embed.</li>
<li>Click "Save."</li>
</ol><p>For more details, see <a href="adding-media-and-links" rel="urn:scalar:version:37058">Adding Media and Links</a>.</p>
plain
2013-07-30T16:34:50-07:00
1
2013-03-28T13:47:05-07:00
method=instancesof/content;methodNumNodes=250;
3
QuickStart: Adding inline media to a page
How to embed media directly into a Scalar page.
<p>Following these steps will embed a media player in a page at a specific point. To insert a media link instead (less precise, but more flexible in that the default view for the page determines the placement and size of the resulting media player), see <a href="quickstart-adding-media-to-a-page" rel="urn:scalar:version:37115">Adding media to a page</a>. Note that before adding media to a page you will need to have already imported the media into Scalar. </p><ol>
<li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Place the insertion point at the point in the page where you want to embed the media.</li>
<li>Click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/inline_media.png" alt="Inline media icon"> and select the media you want to embed.</li>
<li>Click "Save."</li>
</ol><p>For more details, see <a href="adding-media-and-links" rel="urn:scalar:version:37058">Adding Media and Links</a>.</p>
plain
2013-07-30T16:26:09-07:00
1
2013-03-28T13:44:08-07:00
method=instancesof/content;methodNumNodes=250;
4
QuickStart: Adding media to a page
How to add media links to a Scalar page.
<p>These steps will add a media link to a page; the placement and size of the resulting media player depends on the page's <a href="selecting-a-pages-default-view" rel="urn:scalar:version:37059">default view</a>. To insert media at a specific position (more precise, but less flexible), see <a href="quickstart-adding-inline-media-to-a-page" rel="urn:scalar:version:37119">Adding inline media to a page</a>. Note that before adding media to a page you will need to have already imported the media into Scalar. </p><ol> <li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Select the text you want to link to the media.</li>
<li>Click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/media.png" alt="Media icon"> and select the media you want to link.</li>
<li>Next to "Default view," select the <a href="selecting-a-pages-default-view" rel="urn:scalar:version:37059">view</a> you want for this page (only the Text emphasis, Media emphasis, Split Emphasis, and Media per paragraph views support linked media).</li>
<li>Click "Save."</li></ol> <p>For more details, see <a href="adding-media-and-links" rel="urn:scalar:version:37058">Adding Media and Links</a>.</p>
plain
2013-07-30T16:11:02-07:00
1
2013-03-28T14:00:34-07:00
method=instancesof/content;methodNumNodes=250;
2
QuickStart: Adding miscellaneous content links to a page
How to link any online content to a page.
<ol><li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Select the text you want to link to the content.</li>
<li>Click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/regular_link.png" alt="Link icon"> and enter the URL of the content you want to link, then click "OK."</li>
<li>Click "Save."</li>
</ol> <p>For more details, see Adding Media and Links.</p>
plain
2013-07-30T16:38:03-07:00
1
2013-03-28T13:53:05-07:00
method=instancesof/content;methodNumNodes=250;
3
QuickStart: Adding notes to a page
How to add a note link to a Scalar page.
<ol><li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Select the text you want to link to the note.</li>
<li>Click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/note.png" alt="Note icon"> and select the content you want to link as a note, or create a new note using the "Create a new page on the fly" area at the bottom of the pop-up.</li>
<li>Click "Save."</li></ol><p>For more details, see <a href="adding-media-and-links" rel="urn:scalar:version:37058">Adding Media and Links</a>.</p>
plain
2013-07-30T16:34:11-07:00
1
2013-03-28T13:59:30-07:00
method=instancesof/content;methodNumNodes=250;
3
QuickStart: Adding Scalar content links to a page
How to link other Scalar content to a page.
<ol><li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Select the text you want to link to the Scalar content.</li>
<li>Click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/scalar_link.png" alt="Scalar link icon"> and select the content you want to link.</li>
<li>Click "Save."</li>
</ol><p>For more details, see <a href="adding-media-and-links" rel="urn:scalar:version:37058">Adding Media and Links</a>.</p>
plain
2013-07-30T16:37:04-07:00
1
2013-03-28T13:41:09-07:00
method=instancesof/content;methodNumNodes=250;
2
QuickStart: Annotating a video
How to add an annotation to a video file.
<ol><li>Sign in to your Scalar account.</li>
<li>Navigate to the video you wish to annotate and click "Edit annotations" at the bottom.</li>
<li>In the annotation editor, click the plus button to create a new annotation.</li>
<li>Enter the title of the annotation.</li>
<li>Use the two "Set" buttons to set the in and out points of the annotation to the current position of the playhead.</li>
<li>Enter the content of the annotation.</li>
<li>Click "Save."</li>
</ol><p>For more details, see <a href="annotating-media" rel="urn:scalar:version:36896">Annotating Media</a>.</p>
plain
2013-07-30T15:55:57-07:00
1
2013-03-28T13:36:55-07:00
method=instancesof/content;methodNumNodes=250;
3
QuickStart: Annotating an image
How to add an annotation to an image file.
<ol><li>Sign in to your Scalar account.</li>
<li>Navigate to the image you wish to annotate and click "Edit annotations" at the bottom.</li>
<li>In the annotation editor, click the plus button to create a new annotation.</li>
<li>Enter the title of the annotation.</li>
<li>Enter the position (X, Y) and dimensions (W, H) of the annotation, in either pixels or percentages.</li>
<li>Enter the content of the annotation.</li>
<li>Click "Save."</li>
</ol> <p>For more details, see <a href="annotating-media" rel="urn:scalar:version:36896">Annotating Media</a>.</p>
plain
2013-07-30T15:54:46-07:00
1
2013-03-28T13:41:56-07:00
method=instancesof/content;methodNumNodes=250;
2
QuickStart: Annotating plain text
How to add an annotation to a plain text file.
<ol><li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page; this page will become the annotation.</li>
<li>Enter the title, description, and content of the page.</li>
<li>Next to the text reading "To make this page an annotation," click "specify media that it annotates."</li>
<li>Select the text file you want to annotate.</li>
<li>Enter the starting and ending lines of the annotation.</li>
<li>Click "Save."</li>
</ol> <p>For more details, see <a href="annotating-media" rel="urn:scalar:version:36896">Annotating Media</a>.</p>
plain
2013-07-30T15:58:29-07:00
1
2013-03-28T13:20:18-07:00
method=instancesof/content;methodNumNodes=250;
4
QuickStart: Creating a new book after registering
How to create a new book when you already have a Scalar account.
<ol><li>Go to the <a href="http://scalar.usc.edu/works">index</a> and sign in using the link in the upper right corner.</li>
<li>Click "Dashboard" in the upper right corner.</li>
<li>Click the "My account" tab.</li>
<li>Enter the title of the new book in the "Create new book" field, and click "Create."</li>
<li>Click the title of your book under "Your books" to go to its home page.</li></ol><p>For more details, see <a href="creating-your-first-book" rel="urn:scalar:version:36950">Creating Your First Book</a>.</p>
plain
2013-07-30T15:36:37-07:00
1
2013-03-28T13:42:30-07:00
method=instancesof/content;methodNumNodes=250;
2
QuickStart: Creating a page
How to create a new Scalar page.
<ol><li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page.</li>
<li>Enter the title, description, and content of the page.</li>
<li>Click "Save."</li>
</ol> <p>For more details, see <a href="creating-pages" rel="urn:scalar:version:37041">Creating Pages</a>.</p>
plain
2013-07-30T15:58:57-07:00
1
2013-03-28T14:01:21-07:00
method=instancesof/content;methodNumNodes=250;
2
QuickStart: Creating a path
How to create a path in Scalar.
<ol><li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Next to the text reading "To make this page a path," click "specify the items that it contains."</li>
<li>Select the content you want to add to the path and click "Add selected."</li>
<li>Drag and drop the content to reorder it if necessary.</li>
<li>Click "Save."</li>
</ol><p>For more details, see <a href="whole-whole-relationships" rel="urn:scalar:version:37069">Whole-Whole Relationships</a>.</p>
plain
2013-07-30T16:39:01-07:00
1
2013-03-28T14:02:17-07:00
method=instancesof/content;methodNumNodes=250;
2
QuickStart: Creating a tag
How to create a tag in Scalar.
<ol><li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Next to the text "To make this page a tag," click "specify the items that it tags."</li>
<li>Select the content you want to tag and click "Add selected."</li>
<li>Click "Save."</li>
</ol> <p>For more details, see <a href="whole-whole-relationships" rel="urn:scalar:version:37069">Whole-Whole Relationships</a>.</p>
plain
2013-07-30T16:39:53-07:00
1
2013-03-28T13:25:54-07:00
method=instancesof/content;methodNumNodes=250;
6
QuickStart: Importing media from an online archive
How to import media from Scalar-supported archives.
<ol><li>Sign in to your Scalar account.</li>
<li>Roll over the menu at the top of the navigation widget on the left and select "<a href="media/Navigation%20Import%20Mode.png" resource="media/navigation-import-mode" rel="urn:scalar:version:53989">Import</a>."</li>
<li>Click either "Affiliated archives" or "Other archives" depending on the source you're importing from.</li>
<li>Use the import screen to search for media in the archive.</li>
<li>Check the checkboxes of any media you wish to import and click "Import selected media."</li></ol>
<p>For more details, see <a href="importing-media-from-online-archives" rel="urn:scalar:version:36996">Importing Media from Online Archives</a>.</p>
text
2013-07-30T15:46:51-07:00
1
2013-03-28T13:30:48-07:00
method=instancesof/content;methodNumNodes=250;
3
QuickStart: Importing media from your local hard drive
How to import your own media into Scalar.
<ol><li>Sign in to your Scalar account.</li>
<li>Roll over the menu at the top of the navigation widget on the left and select "<a href="media/Navigation%20Import%20Mode.png" resource="media/navigation-import-mode" rel="urn:scalar:version:53989">Import</a>."</li>
<li>Click "Local media files."</li>
<li>Enter a title and description for the media.</li>
<li>Click "Choose file" and select the media you wish to import.</li>
<li>Click "Upload."</li>
</ol> <p>For more details, see <a href="importing-your-own-media" rel="urn:scalar:version:37002">Importing Your Own Media</a>.</p>
text
2013-07-30T15:53:28-07:00
1
2013-03-28T13:32:02-07:00
method=instancesof/content;methodNumNodes=250;
3
QuickStart: Importing other online media
How to import miscellaneous online media.
<ol><li>Sign in to your Scalar account.</li>
<li>Roll over the menu at the top of the navigation widget on the left and select "<a href="media/Navigation%20Import%20Mode.png" resource="media/navigation-import-mode" rel="urn:scalar:version:53989">Import</a>."</li>
<li>Click "Internet media files."</li>
<li>Enter a title and description for the media.</li>
<li>Enter the URL where the media is hosted.</li>
<li>Click "Save."</li> </ol>
<p>For more details, see <a href="importing-other-online-media" rel="urn:scalar:version:37001">Importing Other Online Media</a>.</p>
text
2013-07-30T15:52:25-07:00
1
2014-09-15T10:35:56-07:00
method=instancesof/content;methodNumNodes=250;
3
Quickstart: Inserting a link into a page
How to insert a regular and Scalar link into a page
<ol> <li>Sign in to your Scalar account.</li>
<li>Click "New" at the bottom to create a new page, or navigate to an existing page and click "Edit."</li>
<li>Select the text you want to set as a link.</li>
<li>To link to a page outside your Scalar project, click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/regular_link.png" alt="Media icon"> and type or paste in the url to which you'd like to link.
</li>
<li>To link to a page in your Scalar project, click <img src="http://scalar.usc.edu/works/system/application/views/widgets/wysiwyg/scalar_link.png" alt="Media icon"> and select the page to which you'd like to link.
</li>
<li>Click "Save."</li></ol>
plain
2014-09-15T10:38:02-07:00
1
2013-03-28T13:18:43-07:00
method=instancesof/content;methodNumNodes=250;
3
QuickStart: Registering an account and creating your first book
How to quickly get started with a Scalar account and a new book.
<ol><li><a href="http://scalar.usc.edu/works/system/register?redirect_url=/works/">Register</a> for a Scalar account, entering the name of your new book at the bottom of the form.</li>
<li>Click on the name of your new book in the index.</li></ol><p>For more details, see <a href="creating-an-account" rel="urn:scalar:version:36948">Creating an Account</a>.</p>
plain
2013-03-28T13:19:22-07:00
1
2013-03-28T14:04:06-07:00
method=instancesof/content;methodNumNodes=250;
4
QuickStarts
A path of all QuickStart content in this user's guide.
This path gathers all of the QuickStart material from the entire user's guide in one place.
plain
2014-09-15T10:40:53-07:00
1
2013-03-27T10:42:20-07:00
method=instancesof/content;methodNumNodes=250;
2
Radial Visualization
A book's content, rendered as a ring.
<p>The <a href="media/scalar_visradial.png" resource="media/radial-visualization-view" rel="urn:scalar:version:37027">radial visualization</a> displays all content in the book as a double ring with arcs color-coded by content type. The inner ring displays each piece of content as a separate arc, while the outer ring collects content into groups by type. Rolling over the arc for a piece of content reveals its relationships to other pieces of content in the book via connecting curves.</p><p>Clicking an arc in the outer ring will cause it to expand so its contents can be more clearly viewed. Clicking an arc in the inner ring selects it, keeping its relationships visible even when rolling over other content, allowing multiple sets of relationships to be viewed simultaneously. If the visualization is accessed from a specific page of the book, that page is selected by default when the visualization first appears. To deselect an arc, simply click it again.</p><p>Double-clicking a arc in the inner ring will open the associated content (page or media file).</p>
media
2013-03-27T17:10:54-07:00
1
2013-07-24T13:24:47-07:00
method=instancesof/content;methodNumNodes=250;
33
RDF Syntax
Understanding the RDF syntax used in Scalar's API
<p>All API results are returned in RDF, serialized as either RDF-XML or RDF-JSON. The serialization can be managed by the ?format=[xml|json] <a href="get-variables" rel="urn:scalar:version:51272">GET variable</a> (xml is the default). RDF can be intimidating when first encountered. However, it can be summed up by stating that it is content presented in a flatted or non-hierarchical way. For example, each Scalar node — page, media, annotation, etc. — is a node in the RDF output. Additionally, each relationship is also a node, linking two other nodes together. The relationship nodes are at the same hierarchical level as the content nodes, thus presenting RDF’s flattened hierarchy.</p><h5>Content Nodes</h5><p>As a practical example, consider the <a href="index" rel="urn:scalar:version:51167">home page</a> of this User's Guide represented in RDF-XML:</p><p><a class="inline" href="media/rdf_snippet_2.xml" resource="media/rdf-snippet-1-alt-2" rel="urn:scalar:version:51383"></a></p><p>In the above example, you can see that a piece of Scalar content is broken into two RDF nodes: first, the content wrapper, and then its version. In this case, the version number 23 of the piece of content is output.</p><h5>Relationship Nodes</h5><p>Now consider a second piece of content with the URL, <a href="http://scalar.usc.edu/works/guide/getting-started">http://scalar.usc.edu/works/guide/getting-started</a>. To create a relationship between the two pieces of content, a third node can be provided in RDF (using the ?rec=1 <a href="get-variables" rel="urn:scalar:version:51272">GET variable</a>):</p><p><a class="inline" href="media/rdf-snippet-2.xml" resource="media/rdf-xml-code-snippet-2" rel="urn:scalar:version:51386"></a>
</p><p>In this relationship node, a body is described as the home page (/index), and the target as the getting started page (/getting-started). This node is describing a relationship where “getting started” is index 1 of the home page. Put another way, the home page is a path containing other pages where “getting started” is the first page in the path. All RDF follows these three node types: content, version, and relationship nodes. </p><h5>RDF-JSON</h5><p>RDF-XML can be difficult to traverse, therefore the Scalar API also offers the same data in the RDF-JSON format. For example, here is the same content described above in JSON format (using the ?format=json <a href="get-variables" rel="urn:scalar:version:51272">GET variable</a>):</p><p><a class="inline" href="media/rdf-json-snippet.xml" resource="media/rdf-json-code-snippet" rel="urn:scalar:version:51387"></a>
</p><p>In RDF-JSON, data is provided as an object. The only difference between an RDF-JSON object and a typical JSON object is that rather than index numbers to denote each node as in JSON (e.g., 0, 1, 2, …), in RDF-JSON the URL of each node acts as its key (e.g., <a href="http://scalar.usc.edu/works/guide/index.23">http://scalar.usc.edu/works/guide/index.23</a>).
</p>
plain
2014-08-13T09:38:04-07:00
1
2013-03-26T10:12:34-07:00
method=instancesof/content;methodNumNodes=250;
6
Reading in Scalar
The types of content in a Scalar book and how they work together.
<h5>Text</h5><p>While text itself needs no introduction, its appearance in Scalar bears mentioning a few items of note:</p><ul> <li><strong>Links.</strong> Rolling over a link in the body text of a Scalar book often reveals <a href="media/scalar_link.png" resource="media/scalar-link-rollover" rel="urn:scalar:version:36963">additional information</a> about its contents.</li>
<li><strong>Media Links.</strong> Each <a href="media/scalar_medialink.png" resource="media/scalar-media-link" rel="urn:scalar:version:36964">media link</a> is preceded by an icon for the type of media it references; clicking a link to a time-based media file causes it to start (and subsequently to stop) playing, while links to other media types simply highlight the media on the page when clicked.</li>
<li><strong>Notes links.</strong> These links are preceded by a <a href="media/scalar_noteslink.png" resource="media/scalar-note-link" rel="urn:scalar:version:36965">note icon</a> and serve a similar function as footnotes, displaying additional content when rolled over.</li></ul><h5>Media</h5><p>Embedded media files have a few extra features that go beyond simple playback and viewing. The Details button in the lower left corner of the media opens an expanded view in which all aspects of the media file, from annotations to metadata, can be examined. Clicking "Permalink" will take you to the media's dedicated page, and clicking "Popout" will open the media file itself in a new window.</p><p>If a media file has annotations, they will be available in different ways depending on the media type and display method. In some cases, an "Annotations" link will toggle the display of all of the file's annotations, which can be individually clicked; in others, you'll need to click the "Details" link to access them. For text and time-based media, pop-up "live annotations" will be displayed when the media is cued up to an annotated region.</p><h5>Paths</h5><p>Paths are sequences of pages--like chapters in a book, but more flexible. You'll know you're about to embark on a path when you see a "<a href="media/scalar_pathtoc.png" resource="media/path-table-of-contents" rel="urn:scalar:version:36974">Begin this path</a>" button at the bottom of a page, with a table of contents beneath. Clicking the button (or on any of the listed pages) will take you into the path. Once you're on a path, <a href="media/scalar_pathnav.png" resource="media/scalar-path-navigation" rel="urn:scalar:version:36968">additional navigation</a> at the top and bottom of the page identifies the name of the path you're on, how far you've traveled, and provides links to move stepwise along the path. Sometimes paths lead to other paths; other times they lead back to the "Home" page of the book.</p><p>One of the things that makes Scalar paths unique is that they can share content with each other--in other words, a single page or media file can belong to multiple paths. In that case, the <a href="media/scalar_pathintersect.png" resource="media/path-intersection" rel="urn:scalar:version:36969">additional "intersecting" paths</a> are shown at the top of the page, and by clicking the name of one of these paths you can "switch tracks" and proceed in a new direction within the book.</p><p>If you want to get a better sense of the structure of all of the paths in a book, try the <a href="path-visualization" rel="urn:scalar:version:36928">Path Visualization</a>.</p><h5>Tags</h5><p>Tags are markers that are applied to pages that have something in common. If the page you're looking at has been tagged, you'll see a <a href="media/scalar_tagbar.png" resource="media/scalar-tag-navigation" rel="urn:scalar:version:36971">tag icon at the bottom of the page</a>, followed by the name of the tag and links to other pieces of content that share the same tag (or tags).</p><p>If you want to see how tags in a book are interrelated, try the <a href="tag-visualization" rel="urn:scalar:version:36925">Tag Visualization</a>.</p><h5>Comments</h5><p>Any reader is free to submit a comment on any page or media file in a Scalar book by clicking the "Comment on" link at the bottom of the content, whether or not they have a Scalar account. It's even possible to add a comment to another comment in threaded fashion. New comments, however, will not be visible within the book until <a href="user-comments" rel="urn:scalar:version:46615">approved</a> to go live by an <a href="book-users" rel="urn:scalar:version:37084">author user</a> for the book.</p>
split
2013-07-30T15:18:40-07:00
1
2014-01-07T16:00:46-08:00
method=instancesof/content;methodNumNodes=250;
1
Retrieve related nodes
The <a href="media/scalarapi_helloworld.js#getrelatednodes-call" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103128">getRelatedNodes</a> method returns an array of nodes related to the source node by the specified relationship and in the specified direction. In this case, the call specifies that only outgoing path-type relationships should be returned. If the source node is a path, this will return all of the nodes contained in that path.
media
2014-01-07T16:00:46-08:00
1
2014-01-07T15:57:30-08:00
method=instancesof/content;methodNumNodes=250;
1
Retrieve the node
Once the node is loaded (or if its data has already been cached), the handleSuccess method is called. Here, the node is retrieved by a call to <a href="media/scalarapi_helloworld.js#getnode-call" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103126">getNode</a> that passes the URI segment of the node we’re looking for (“index” in this case).
media
2014-01-07T15:57:30-08:00
1
2013-07-24T13:29:49-07:00
method=instancesof/content;methodNumNodes=250;
3
Saving and Updating
Using Scalar's Save-API to save and update content
Scalar also includes a Save API for creating and updating content programmatically or en masse. Please <a href="http://scalar.usc.edu/contact/">contact us</a> if you are interested in using this functionality and we can assist.
plain
2014-08-20T14:49:25-07:00
1
2014-01-07T14:22:28-08:00
method=instancesof/content;methodNumNodes=250;
3
Scalar API script tag
plain
2014-03-20T13:41:17-07:00
1
2014-01-07T16:08:05-08:00
method=instancesof/content;methodNumNodes=250;
4
Scalar API JavaScript library reference
Information about objects, methods, and properties available in the Scalar API JavaScript library.
Note that this is not a complete list of methods and properties available in in the library; however, the items below are guaranteed to be available in the current version of the library for as long as it is supported.<div>
</div><div>If you’re looking for a simple “hello world” example, you can find it in the <a href="getting-started-with-the-scalar-api-javascript-library" rel="urn:scalar:version:103312">Getting Started</a> section.</div>
plain
2014-01-08T08:26:33-08:00
1
2014-01-06T16:17:36-08:00
method=instancesof/content;methodNumNodes=250;
8
Including jQuery
The Scalar API JavaScript library requires jQuery, so we include it from the jQuery CDN using a <a href="media/scalarapi_helloworld.js#jquery-script-tag" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103096">script tag</a>.
media
2014-01-07T14:32:08-08:00
1
2014-01-07T16:13:39-08:00
method=instancesof/content;methodNumNodes=250;
11
ScalarAPI
The primary class in the Scalar API JavaScript library.
The primary class in the Scalar API JavaScript library. Once the Scalar API JavaScript library is loaded, the ScalarAPI object is available through the globally-scoped variable “scalarapi”.<div>
</div><div><h4>Methods</h4><div>
<table class="figure"><tbody><tr><th>Method</th><th>Return value</th><th>Description</th></tr> <tr><td><b>getNode</b>( uriOrSlug:string )</td><td><a href="scalarnode" rel="urn:scalar:version:103235">ScalarNode</a>
</td><td>Returns the <a href="scalarnode" rel="urn:scalar:version:103235">ScalarNode</a> in the current book identified by the specified URI or URI segment (also known as the “slug”), or null if no matching ScalarNode can be found.</td></tr><tr><td><b>loadBook</b>( forceReload:boolean, successCallback:function, errorCallback:function )</td><td>string</td><td><p>Load data about the current Scalar book. Returns a string indicating the current state of the request, whose possible values are “loading”, “queued”, or “loaded”.</p>Method parameters:
<ul><li><b>forceReload</b> - If true, any cached data for the book will be ignored, and a new request will be executed. If false, the method will return the string “loaded” if data for the book already exists.</li><li><b>successCallback</b> - A function to be executed when the request is completed successfully.</li><li><b>errorCallback</b> - A function to be executed when the request fails.</li></ul></td></tr><tr><td><b>loadNode</b>( uriSegment:string, forceReload:boolean, successCallback:function, errorCallback:function, depth:number, references:boolean, relation:string, start:number, results:number )</td><td>string</td><td><p>Loads data about the specified Scalar node in the current book. Returns a string indicating the current state of the request, whose possible values are “loading”, “queued”, or “loaded”.</p>Method parameters:
<ul><li><b>uriSegment</b> - The identifying URI segment (also known as the “slug”) for the node. For the home page of a Scalar book, this would be “index”.</li>
<li><b>forceReload</b> - If true, any cached data for the node will be ignored, and a new request will be executed. If false, the method will return the string “loaded” if data for the requested node already exists.</li>
<li><b>successCallback</b> - A function to be executed when the request is completed successfully.</li>
<li><b>errorCallback</b> - A function to be executed when the request fails.</li>
<li><b>depth</b> - The number of degrees of separation between the requested node and any related nodes that should also be returned with this request. Higher numbers will result in longer load times; use with caution. Defaults to 0.</li>
<li><b>references</b> - If true, will return Scalar media linked from within the text of the requested node, if any. Defaults to false.</li>
<li><b>relation</b> - If not null, will only return nodes related to the requested node through the named relationship. Defaults to null, which returns nodes related through any relationship. Other possible values include “annotation”, “path”, “reply” (i.e. comment), and “tag”.</li>
<li><b>start</b> - If specified, indicates the zero-based index of the first result to be returned.</li>
<li><b>results</b> - If specified, indicates the maximum number of results to be returned.</li></ul></td></tr><tr><td><b>loadNodesByType</b>( type:string, forceReload:boolean, successCallback:function, errorCallback:function, depth:number, references:boolean, relation:string, start:number, results:number )</td><td>string</td><td><p>Loads all nodes of the specified type from the current Scalar book. Returns a string indicating the current state of the request, whose possible values are “loading” or “loaded”.</p>Method parameters:
<ul><li><b>type</b> - The type of <a href="scalarnode" rel="urn:scalar:version:103235">ScalarNode</a> to be retrieved. Possible values include “annotation”, “content” (i.e. all types—use with caution), “media”, “page”, “path”, “reply” (i.e. comment), or “tag”.</li>
<li><b>forceReload</b> - If true, any cached data for the nodes will be ignored, and a new request will be executed. If false, the method will return the string “loaded” if data for the type of nodes requested already exists.</li>
<li><b>successCallback</b> - A function to be executed when the request is completed successfully.</li>
<li><b>errorCallback</b> - A function to be executed when the request fails.</li>
<li><b>depth</b> - The number of degrees of separation between the requested nodes and any related nodes that should also be returned with this request. Higher numbers will result in longer load times; use with caution. Defaults to 0.</li>
<li><b>references</b> - If true, will return Scalar media linked from within the text of the requested nodes, if any. Defaults to false.</li>
<li><b>relation</b> - If not null, will only return nodes related to the requested nodes through the named relationship. Defaults to null, which returns nodes related through any relationship. Other possible values include “annotation”, “path”, “reply” (i.e. comment), and “tag”.</li>
<li><b>start</b> - If specified, indicates the zero-based index of the first result to be returned.</li>
<li><b>results</b> - If specified, indicates the maximum number of results to be returned.</li></ul></td></tr><tr><td><b>nodeSearch</b>( sq:string, successCallback:function, errorCallback:function, depth:number, references:boolean, relation:string, start:number, results:number )</td><td>none</td><td><p>Loads all nodes matching the specified search query from the current Scalar book.</p>Method parameters:
<ul><li><b>sq</b> - The search query to be executed.</li>
<li><b>successCallback</b> - A function to be executed when the request is completed successfully.</li>
<li><b>errorCallback</b> - A function to be executed when the request fails.</li>
<li><b>depth</b> - The number of degrees of separation between the requested nodes and any related nodes that should also be returned with this request. Higher numbers will result in longer load times; use with caution. Defaults to 0.</li>
<li><b>references</b> - If true, will return Scalar media linked from within the text of the requested nodes, if any. Defaults to false.</li>
<li><b>relation</b> - If not null, will only return nodes related to the requested nodes through the named relationship. Defaults to null, which returns nodes related through any relationship. Other possible values include “annotation”, “path”, “reply” (i.e. comment), and “tag”.</li>
<li><b>start</b> - If specified, indicates the zero-based index of the first result to be returned.</li>
<li><b>results</b> - If specified, indicates the maximum number of results to be returned.</li></ul></td></tr><tr><td><b>setBook</b>( scalarURL:string )</td><td>none</td><td>Sets the Scalar book referenced in the specified URI to be the target of future API requests.</td></tr></tbody></table>
</div><h4>Properties</h4></div><div>
</div><table class="figure"><tbody><tr><th>Property</th><th>Type</th><th>Description</th></tr> <tr><td>model</td><td><a href="scalarmodel" rel="urn:scalar:version:103231">ScalarModel</a>
</td><td>Object containing all nodes for which the client has received data.</td></tr></tbody></table>
plain
2014-01-07T18:12:52-08:00
1
2014-01-07T17:56:51-08:00
method=instancesof/content;methodNumNodes=250;
4
ScalarModel
A class which stores local Scalar API data.
The ScalarModel class stores local Scalar API data. Once the Scalar API JavaScript library is loaded, the ScalarModel object is available through the “model” property of the globally-scoped variable “scalarapi”.<div>
</div><h4>Methods</h4><div>
</div><table class="figure"><tbody><tr><th>Method</th><th>Type</th><th>Description</th></tr> <tr><td><b>getBookNode</b>()</td><td><a href="scalarnode" rel="urn:scalar:version:103235">ScalarNode</a>
</td><td>Returns the node representing the current book, if it can be found.</td></tr><tr><td><b>getMainMenuNode</b>()</td><td><a href="scalarnode" rel="urn:scalar:version:103235">ScalarNode</a>
</td><td>Returns the node representing the current book’s main menu, if it can be found.</td></tr><tr><td><b>getNodes</b>( sort:string )</td><td>array</td><td>Returns an array all nodes for which data has been loaded, sorted according to the specified criteria (currently the only option is “alphabetical”).</td></tr><tr><td><b>getNodesWithProperty</b>( property:string, value:*, sort:string )</td><td>array</td><td><p>Returns an array of all nodes for which data has been loaded, that match the specified criteria.</p>Method parameters:
<ul><li><p><b>property</b> - The property to be matched. Any named property can be used, plus a few special options:</p><p></p><ul><li>“scalarType” - Test for nodes with matching types like “page,” “media,” “annotation,” “tag”, etc.</li>
<li>“dominantScalarType” - Test for the node’s most specialized type—for example: every path is also a page, but with this test all paths will only match the “path” type and not the “page” type.</li>
<li>“mediaSource” - Test for media nodes whose whose source files match the named types specified in scalarapi.mediaSources, such as “JPEG”, “WAV”, etc.
</li><li>“contentType” - Test for media nodes whose source files match the named content types specified in scalarapi.mediaSources, such as “audio”, “video”, etc.</li></ul><p></p></li><li><b>value</b> - The value to be matched.</li>
<li><b>sort</b> - Sort method to be applied to the results (currently the only option is “alphabetical”).</li></ul></td></tr></tbody></table>
plain
2014-01-07T18:12:22-08:00
1
2014-01-07T18:00:49-08:00
method=instancesof/content;methodNumNodes=250;
3
ScalarNode
A class which represents a single Scalar node.
The ScalarNode class represents a single node of a Scalar book.<div>
</div><h4>Methods</h4><div>
</div><table class="figure"><tbody><tr><th>Method</th><th>Type</th><th>Description</th></tr> <tr><td><b>getDisplayTitle</b>( removeMarkup:boolean )</td><td>string</td><td>Returns the title of the node, formatted for display. If the removeMarkup parameter is true, HTML markup will be removed from the title.</td></tr><tr><td><b>getDominantScalarType</b>()</td><td>object</td><td>Returns an object literal describing the most specialized type associated with the node— for example: while every path is also a page, this method will only return the “path” object for nodes that are paths.</td></tr><tr><td><b>getRelatedNodes</b>( type:string, direction:string, includeNonPages:boolean )</td><td>array</td><td><p>Returns an array of <a href="scalarnode" rel="urn:scalar:version:103235">ScalarNode</a> objects related to the node by the specified criteria.</p>Method parameters:
<ul><li><b>type</b> - The type of relationship to match. Possible values include “annotation”, “path”, “reply” (i.e. comment), and “tag”.</li>
<li><b>direction</b> - The direction of the relationship relative to this node, either “outgoing” or “incoming”.</li>
<li><b>includeNonPages</b> - If true, will include non-page nodes (like authors, for example) in the results.</li></ul></td></tr><tr><td><b>getRelations</b>( type:string, direction:string, sort:string, includeNonPages:boolean )</td><td>array</td><td><p>Returns an array of <a href="scalarrelation" rel="urn:scalar:version:103238">ScalarRelation</a> objects related to the node by the specified criteria.</p>Method parameters:
<ul><li><b>type</b> - The type of relationship to match. Possible values include “annotation”, “path”, “reply” (i.e. comment), and “tag”.</li>
<li><b>direction</b> - The direction of the relationship relative to this node, either “outgoing” or “incoming”.</li>
<li><b>sort</b> - Sort method to be applied to the results. Available options are “index”, which returns results in their author-specified order, or “reverseindex” which reverses the author-specified order of the results.</li>
<li><b>includeNonPages</b> - If true, will include non-page nodes (like authors, for example) in the results.</li></ul></td></tr><tr><td><b>getSortTitle</b>()</td><td>string</td><td>Returns the title of the node, formatted for alphabetical sorting (i.e. with initial non-alphabetic components like the word “the” removed). Normally used for internal processing of arrays of nodes.</td></tr><tr><td><b>hasScalarType</b>( typeName:string )</td><td>boolean</td><td>Returns true if any of the Scalar types associated with the node match the specified type name.</td></tr></tbody></table>
<h4>Properties</h4>
<table class="figure"><tbody><tr><th>Property</th><th>Type</th><th>Description</th></tr> <tr><td>color</td><td>string</td><td>The HTML color associated with this node.</td></tr><tr><td>current</td><td>ScalarVersion</td><td>The most current known ScalarVersion associated with the node.</td></tr><tr><td>data</td><td>object</td><td>The raw JSON data for the node.</td></tr><tr><td>defaultView</td><td>string</td><td>The name of the default view associated with this node.</td></tr><tr><td>incomingRelations</td><td>array</td><td>An array of ScalarRelation objects describing the node’s incoming relationships.</td></tr><tr><td>outgoingRelations</td><td>array</td><td>An array of ScalarRelation objects describing the node’s outgoing relationships.</td></tr><tr><td>properties</td><td>object</td><td>All known properties associated with the node.</td></tr><tr><td>scalarTypes</td><td>array</td><td>An array of objects describing all of the Scalar types this node is a member of.</td></tr><tr><td>slug</td><td>string</td><td>The unique URI segment that identifies the node within the current book.</td></tr><tr><td>thumbnail</td><td>string</td><td>The URL of the thumbnail image associated with this node.</td></tr><tr><td>url</td><td>string</td><td>The URL of the node.</td></tr><tr><td>versions</td><td>array</td><td>An array of all known ScalarVersions associated with the node.</td></tr></tbody></table>
plain
2014-01-07T18:13:47-08:00
1
2014-01-07T18:04:34-08:00
method=instancesof/content;methodNumNodes=250;
3
ScalarRelation
A class that describes a relationship between two ScalarNodes.
The ScalarRelation class describes a relationship between two ScalarNodes.<div>
</div><h4>Properties</h4>
<table class="figure"><tbody><tr><th>Property</th><th>Type</th><th>Description</th></tr> <tr><td>body</td><td><a href="scalarnode" rel="urn:scalar:version:103247">ScalarNode</a>
</td><td>The node that is the subject of the relationship.</td></tr><tr><td>endString</td><td>string</td><td>String describing the ending point of the relation (as with annotations).</td></tr><tr><td>id</td><td>string</td><td>Unique id of the relation.</td></tr><tr><td>index</td><td>number</td><td>The relation’s sorting index relative to its siblings (as with pages in a path).</td></tr><tr><td>properties</td><td>object</td><td>All known properties associated with the relation.</td></tr><tr><td>separator</td><td>string</td><td>Appropriate separate to insert between the startString and endString of the relation to express its span.</td></tr><tr><td>startString</td><td>string</td><td>String describing the starting point of the relation (as with annotations).</td></tr><tr><td>subType</td><td>string</td><td>Refines the type of an annotation relation. Possible values include “spatial”, “temporal”, or “textual”.</td></tr><tr><td>target</td><td><a href="scalarnode" rel="urn:scalar:version:103247">ScalarNode</a>
</td><td>The node that is the object of the relationship.</td></tr><tr><td>type</td><td>object</td><td>Object literal describing the type of the relationship.</td></tr></tbody></table>
plain
2014-01-07T18:14:41-08:00
1
2014-01-07T18:03:19-08:00
method=instancesof/content;methodNumNodes=250;
1
ScalarVersion
A class that represents a single version of a ScalarNode.
The ScalarVersion class represents a single version of a ScalarNode.<div>
</div><h4>Properties</h4>
<table class="figure"><tbody><tr><th>Property</th><th>Type</th><th>Description</th></tr> <tr><td>auxProperties</td><td>object</td><td>All known auxiliary properties associated with the version (these are optional additional metadata added by authors).</td></tr><tr><td>color</td><td>string</td><td>The HTML color associated with this version.</td></tr><tr><td>content</td><td>string</td><td>The HTML content of the version.</td></tr><tr><td>created</td><td>string</td><td>Creation date of the version.</td></tr><tr><td>data</td><td>object</td><td>The raw JSON data for the version.</td></tr><tr><td>defaultView</td><td>string</td><td>The name of the default view associated with this version.</td></tr><tr><td>description</td><td>string</td><td>The version’s description.</td></tr><tr><td>extension</td><td>string</td><td>File extension of the version’s media (media nodes only).</td></tr><tr><td>isVersionOf</td><td>string</td><td>URL of the node this version applies to.</td></tr><tr><td>mediaSource</td><td>object</td><td>Object literal describing the source of the version’s media (media nodes only).</td></tr><tr><td>number</td><td>string</td><td>Index of this version in the version order (if left unchanged by the author, this is also the version creation order).</td></tr><tr><td>properties</td><td>object</td><td>All known standard properties associated with the version.</td></tr><tr><td>sourceFile</td><td>string</td><td>URL of the version’s source file (media nodes only).</td></tr><tr><td>title</td><td>string</td><td>The title of the version.</td></tr><tr><td>url</td><td>string</td><td>The URL of the version.</td></tr></tbody></table>
plain
2014-01-07T18:03:19-08:00
1
2013-03-27T10:28:04-07:00
method=instancesof/content;methodNumNodes=250;
6
Selecting a Page's Default View
Determining the default appearance of a page.
<p><i>This section describes functionality in Scalar's page editor, which is accessed by clicking the "New" button (if creating new content) or the "Edit" button (if editing existing content) at the bottom of the page.</i></p><p>Immediately below the text editor is a drop-down menu for selecting the default view for the page. Any given page in Scalar can be rendered in a variety of ways; these are called views. Every page has a default view that determines what the user sees when they first arrive at the page. The most commonly used views can be thought of as layout templates; they govern the relationship between text and media. Other views try to visualize the relationship of the current page to other pages in the book, and still others are purely utilitarian. Let's explore each of the default view options in turn.</p><ul> <li><strong>Single column.</strong> Displays <a href="media/scalar_singlecolumn.png" resource="media/single-column-view" rel="urn:scalar:version:37021">only the text</a> of the page in a single column; all Scalar media links are ignored.</li>
<li><strong>Text emphasis.</strong> Dedicates <a href="media/scalar_textemphasis.png" resource="media/text-emphasis-view" rel="urn:scalar:version:37022">most of the page to the text</a>, with a small column on the right for embedded media.</li>
<li><strong>Media emphasis.</strong> Dedicates <a href="media/scalar_mediaemphasis.png" resource="media/media-emphasis-view" rel="urn:scalar:version:37023">most of the page to media</a>, with a scrolling display area at the top and text below.</li>
<li><strong>Split emphasis.</strong> A more even <a href="media/scalar_splitemphasis.png" resource="media/split-emphasis-view" rel="urn:scalar:version:37024">balance of text and media</a>, with text on the right and media in a column on the left.</li>
<li><strong>Media per paragraph (above)</strong> Displays any media linked in a given paragraph in small <a href="media/scalar_paragraphabove.png" resource="media/media-per-paragraph-above-view" rel="urn:scalar:version:37025">media players just above </a>the paragraph.</li>
<li><strong>Media per paragraph (below)</strong> Displays any media linked in a given paragraph in small <a href="media/scalar_paragraphbelow.png" resource="media/media-per-paragraph-below-view" rel="urn:scalar:version:37026">media players just below </a>the paragraph.</li>
<li><strong>Visualization: Radial</strong> Renders the relationships between all of the pages and media in the book in an interactive <a href="media/scalar_visradial.png" resource="media/radial-visualization-view" rel="urn:scalar:version:37027">radial graph</a>.</li>
<li><strong>Visualization: Index</strong> Renders the relationships between all of the pages and media in the book in an <a href="media/scalar_visindex.png" resource="media/index-visualization-view" rel="urn:scalar:version:37028">interactive grid</a>.</li>
<li><strong>Visualization: Paths</strong> Draws a <a href="media/scalar_vispath.png" resource="media/path-visualization-view" rel="urn:scalar:version:37029">hierarchical graph</a> of all of the paths in the book.</li>
<li><strong>Visualization: Media</strong> Renders a force-directed <a href="media/scalar_vismedia.png" resource="media/media-visualization-view" rel="urn:scalar:version:37030">graph of media</a> in the book and the pages which reference it.</li>
<li><strong>Visualization: Tags</strong> Renders a force-directed <a href="media/scalar_vistag.png" resource="media/tag-visualization-view" rel="urn:scalar:version:37031">graph of tags</a> in the book and their associated content.</li>
<li><strong>History browser</strong> Displays the text of all versions of the resource in a single page.</li></ul>
text
2013-03-27T16:51:30-07:00
1
2014-01-07T15:54:24-08:00
method=instancesof/content;methodNumNodes=250;
2
Set the current Scalar book
Before using the Scalar API JavaScript library to retrieve data, it needs to be told which Scalar book to get the data from. This is done using the <a href="media/scalarapi_helloworld.js#setbook-call" resource="media/scalar-api-hello-world-example-code" rel="urn:scalar:version:103117">setBook</a> method, which accepts any URL from the desired book.
media
2014-01-07T15:54:42-08:00
1
2014-01-07T14:39:05-08:00
method=instancesof/content;methodNumNodes=250;
2
setBook() call
plain
2014-03-20T13:42:40-07:00
1
2014-09-29T16:27:15-07:00
method=instancesof/content;methodNumNodes=250;
6
Sharing
The Dashboard's Sharing tab allows you to set parameters regarding the availability and duplicability of your book.
<strong><a class="inline" href="media/sharing_tab.jpg" resource="media/sharing-tab" rel="urn:scalar:version:226820"></a>
Availability.</strong> To make your book's URL accessible without a login (and thus crawlable by search engines), set "Make URL public?" to Yes. To make your book accessible in Scalar's Index page, set "Display in Scalar indexes?" to Yes.
<b>Reviewability</b>. Here, authors can select settings for Scalar's commenting feature as well as activate the Hypothes.is annotation sidebar. The Hypothes.is sidebar allows readers to select any span of text on the page of a project and offer queries, comments, and ultimately, initiate threaded conversations about their selection.
<b>Joinability</b>. Setting joinability to "Yes" will allow other Scalar account holders to ask permission to become an author on your book. An email will be sent to you when a user requests book authorship.
<b>Duplicability</b>. Selecting "Yes" will allow you and others to duplicate your book in its entirety. To duplicate your book select "Yes" here and then go to the My account tab in your dashboard and locate "Duplicate a book" just under "Create new book."
plain
2015-10-06T18:34:01-07:00
1
2014-06-02T12:38:05-07:00
method=instancesof/content;methodNumNodes=250;
1
Star Trek computerized warfare
The Enterprise encounters a planet that has been at war for 500 years through computer simulation
plain
2014-06-02T12:38:05-07:00
1
2014-07-08T21:30:21-07:00
method=instancesof/content;methodNumNodes=250;
2
Story Map Embedded in a Scalar Page
<iframe src="http://storymaps.esri.com/templates/swipe/" frameborder="0" height="650" width="100%"></iframe>
plain
2014-07-11T18:41:05-07:00
1
2013-03-27T10:21:44-07:00
method=instancesof/content;methodNumNodes=250;
3
Styling a Page
Adding custom styling to a page.
<p><i>This section describes functionality in Scalar's page editor, which is accessed by clicking the "New" button (if creating new content) or the "Edit" button (if editing existing content) at the bottom of the page.</i></p><p>Clicking open the "Style" link in the page editor reveals a host of options for customizing the look and feel (and even the sound) of your page.</p><p><a class="inline" href="media/scalar_stylemetadata.png" resource="media/style-and-metadata-portions-of-page-editor" rel="urn:scalar:version:37060"></a>
</p><p><strong>Thumbnail.</strong> You can select any image in your book as the thumbnail image for the page--doing so currently has no visible effect within Scalar, but may in the future.</p><p><strong>Color.</strong> Associates a color with the page. If the page is a path, then this color will be seen in the path navigation bar and various other places in Scalar.</p><p><strong>Background image.</strong> You can select any image in your book to serve as the background image for the page. If the page is a path, the same image will also be applied automatically to all pages in the path.</p><p><strong>Custom CSS style.</strong> Allows custom CSS code to be applied to this page to alter its look and feel. If the page is a path, the same CSS will also be applied automatically to all pages in the path.</p><p><strong>Custom Javascript.</strong> Allows custom Javascript code to be added to the page. If the page is a path, the same code will also be applied automatically to all pages in the path.</p><p><strong>Background audio.</strong> You can select any audio file in your book to be played as background audio while the user is on the page (an audio player will be embedded at the bottom of the page so the audio can be turned off by the user).</p>
plain
2013-03-27T16:53:53-07:00
1
2013-03-27T10:44:03-07:00
method=instancesof/content;methodNumNodes=250;
2
Tag Visualization
A book's tags, rendered as a force-directed diagram.
<p>The <a href="media/scalar_vistag.png" resource="media/tag-visualization-view" rel="urn:scalar:version:37031">tag visualization</a> displays the book's tags in a force-directed graph, along with the content they tag. For performance reasons, only selected tags and their relationships are shown; to show all tags, all items must be deselected. Individual items can be selected and deselected by clicking. Double-clicking a title opens the associated content (page or media file).</p>
media
2013-03-27T17:12:01-07:00
1
2015-09-11T21:07:19-07:00
method=instancesof/content;methodNumNodes=250;
1
test
plain
2015-09-11T21:07:19-07:00
16.86%,35.05%,63.23%,28.62%
1
2013-05-21T08:38:53-07:00
method=instancesof/content;methodNumNodes=250;
1
Thanks
for the proofing!
plain
2013-05-21T08:38:53-07:00
1
2013-03-27T17:47:31-07:00
method=instancesof/content;methodNumNodes=250;
1
Themes
A gallery of Scalar's built-in book themes.
This is a path of screenshots featuring Scalar's various book themes.
plain
2013-03-27T17:47:31-07:00
1
2014-07-01T12:00:54-07:00
method=instancesof/content;methodNumNodes=250;
3
Third Party Plugins and Platforms
In this section, you'll find a listing of third party plugins or platforms which we recommend for use within, or as an supplement to, Scalar projects.
plain
2014-07-05T20:12:32-07:00
1
2014-07-08T11:17:13-07:00
method=instancesof/content;methodNumNodes=250;
2
Tiki-Toki Embedded in a Scalar Page
<iframe src="http://www.tiki-toki.com/timeline/embed/137152/4308693385" frameborder="0" height="650" width="100%"></iframe>
plain
2014-07-11T18:41:34-07:00
1
2014-07-06T14:47:17-07:00
method=instancesof/content;methodNumNodes=250;
7
TimelineJS Embedded in a Scalar Page
<iframe src="http://cdn.knightlab.com/libs/timeline/latest/embed/index.html?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650" frameborder="0" height="650" width="100%"></iframe>
plain
2014-07-11T18:42:03-07:00
1
2014-07-01T12:01:48-07:00
method=instancesof/content;methodNumNodes=250;
17
Timelines
<h5>TimelineJS</h5><a href="http://timeline.knightlab.com/">TimelineJS</a> is a Javascript and CSS based tool for creating media-rich, interactive <a href="media/timelinejs.png" resource="media/example-of-timelinejs" rel="urn:scalar:version:204016" data-display-content-preview-box="true">timelines</a>. While more of a tool kit than a platform, TimelineJS is incredibly easy to use. Using TimelineJS' sample Google spreadsheet, one simply adds dates, text and links to media into appropriate columns. Links to media can include video (Youtube, Vimeo and DailyMotion), audio, images (Flickr), Google Maps, Google+ status updates and even Twitter posts. Once you've saved the Google spreadsheet and made it public, simply copy and paste the spreadsheet's URL into TimelineJS' <a href="http://timeline.knightlab.com/">generator </a>and then use the iframe embed code it produces.
<a href="http://scalar.usc.edu/works/guide/how-to-embed" rel="urn:scalar:version:205490" data-display-content-preview-box="true">Click here to see how to embed TimelineJS or other third party material into a Scalar page.</a>
<a href="timelinejs-embed" rel="urn:scalar:version:204015" data-display-content-preview-box="true">See TimelineJS embedded in a Scalar Page.</a>
<h5>Tiki-Toki</h5><a href="http://www.tiki-toki.com">Tiki-Toki</a> is a web-based platform which allows users to create <a href="media/Tiki-Toki.png" resource="media/example-of-tiki-toki" rel="urn:scalar:version:204808" data-display-content-preview-box="true">visually striking timelines</a>. Users can add video clips, images, audio, hyperlinks, and RSS feeds. Users also have the freedom to customize the overall look and feel of the timeline by adding color and an image to the background as well as choosing a layout and color scheme. While one can create one Tiki-Toki timeline with a free account, a paid account is required to embed your timeline into a website (you can read their FAQ <a href="http://www.tiki-toki.com/faqs/">here</a>).
<a href="http://scalar.usc.edu/works/guide/how-to-embed" rel="urn:scalar:version:205490" data-display-content-preview-box="true">Click here to see how to embed a Tiki-Toki timeline or other third party material into a Scalar page.</a>
<a href="tiki-toki-embed" rel="urn:scalar:version:204657" data-display-content-preview-box="true">See Tiki-Toki embedded in a Scalar Page.</a>
text
2014-08-05T08:58:14-07:00
1
2013-03-31T11:38:23-07:00
method=instancesof/content;methodNumNodes=250;
1
Typos
Interesting interface.
I found a couple of typos in the text:
1. "In addition displaying the book's title.."
should be
"In addition <i>to</i> displaying the book's title..."
2. "...including it's name and relationships..."
Should be
"...including <i>its</i> name and relationships..."
plain
2013-03-31T11:38:23-07:00
1
2013-03-27T10:24:26-07:00
method=instancesof/content;methodNumNodes=250;
4
User Comments
How user comments are integrated into Scalar.
<p>Any reader can add a comment to any page or media file of a book without having to register first by clicking the link at the bottom of the page. <a href="media/scalar_comments.png" resource="media/comments-in-a-scalar-book" rel="urn:scalar:version:37066">Comments</a>, however, are moderated, and will not become visible on the site until an <a href="book-users" rel="urn:scalar:version:37084">Author User</a> for the book author explicitly makes them live. To check whether your book has comments awaiting moderation, click "Dashboard" in the top-right corner. If the "Comments" tab contains a <a href="media/scalar_commentsmoderation.png" resource="media/comments-awaiting-moderation" rel="urn:scalar:version:37067">red badge</a>, that number inside indicates the amount of comments which are not currently live. Click the tab to see the comments; you can click on the URI for each one to read it in its entirety. You can make a comment live either by clicking the "Make Visible" button at the bottom of the comment's page, or by clicking the "Edit" button for the comment in the Comments tab, setting "Live?" to True, and clicking Save.</p>
text
2013-07-30T15:21:40-07:00
1
2013-03-27T10:41:27-07:00
method=instancesof/content;methodNumNodes=250;
3
Visualizations
Exploring the contents of a book visually.
<p>Scalar's visualizations enable you to see the contents of your book rendered in a variety of ways. Because each visualization can also be made the default view for a page, it's possible to integrate visualizations directly into your book. If you're working with structure in a way that's not immediately apparent at the page level, a visualization may be a good way to help readers conceptualize the "shape" of your content.</p><p>All visualizations have been created using the <a href="http://d3js.org/">D3.js</a> library.</p>
plain
12710
2013-03-27T17:12:18-07:00
1
2013-03-26T10:19:35-07:00
method=instancesof/content;methodNumNodes=250;
12
What Do I Have?
Assessing your media source materials.
<p>The first step in developing your media strategy is to inventory the sources of the materials you'll be working with. Your media sources most likely fall into one of these four categories:</p><table class="figure" style="text-align: left;"> <tbody><tr> <th>Source</th> <th>Description</th> </tr> <tr> <td><b>1. Your own local files</b></td> <td>Media files on a hard drive you have direct access to</td> </tr> <tr> <td><b>2. Files hosted on the Internet</b></td> <td>Media files hosted on your own or someone else's publicly accessible website</td> </tr> <tr> <td><b>3. Files hosted by a Scalar-accessible web service</b></td> <td>Media files from web services for which Scalar has direct links. These include: <ul> <li>Prezi</li> <li>SoundCloud</li><li>Vimeo</li> <li>YouTube</li></ul> </td> </tr> <tr> <td><b>4. Files hosted by a Scalar-affiliated media archive</b></td> <td>Files from media archives for which Scalar has direct links. These include:<ul> <li>Critical Commons</li><li>Cuban Theater Digital Archive
</li> <li>Hemispheric Institute Digital Video Library</li><li>Getty Museum Collection</li><li>The Metropolitan Museum of Art</li> <li>Internet Archive</li> <li>PLAY!</li> <li>Shoah Foundation Visual History Archive</li></ul> </td> </tr></tbody></table><p>
</p><p>It's important to test all of your media sources on all of your target platforms early and often, because each one has its own characteristics and requirements that affect how it appears on various platforms. For example, because of platform and browser differences, a PDF document may appear differently in Safari on a Macintosh than it does in Internet Explorer on a Windows machine. If your book depends on media functioning in a particular way on a specific platform, you should confirm that fact rather than assuming it will "just work." In an open, heterogeneous environment like the web, there are ample opportunities for hiccups when it comes to media. </p>
plain
2015-11-25T18:43:06-08:00
1
2013-03-26T11:13:57-07:00
method=instancesof/content;methodNumNodes=250;
12
What Formats Should I Use?
Determining the appropriate media formats for your Scalar book.
<p>Scalar can work directly with the following media types:</p><table class="figure center"> <tbody><tr> <th></th> <th>Image</th> <th>Audio</th> <th>Video</th> <th>Document</th> </tr> <tr> <th>Supported on recent versions of Chrome, Internet Explorer, Safari, and Safari (iOS)</th> <td>DZI, GIF, JPEG, PNG</td> <td>MPEG-3 (MP3)</td> <td>MPEG-4</td> <td>HTML, Plain Text</td> </tr> <tr> <th>Supported only on some of the above browsers</th> <td>
</td> <td>OGG, WAV</td> <td>FLV, M4V, OGG, QuickTime, WebM</td> <td>PDF</td> </tr></tbody></table>
<p>If you don't see your media type listed here, you may still be able to use your media in Scalar; services like Critical Commons, Internet Archive, SoundCloud, Vimeo, and YouTube often support a broader set of media formats on upload and then transcode the uploaded media to more compatible formats for delivery. Alternatively, you could convert the media to another format yourself.</p><p>If you plan to use one of the formats which aren't supported across all of the target browsers listed above, you can use the tables below to cross-reference the media format with the platform and see which browsers are excluded.</p><table class="figure center"><tbody><tr><th>Audio</th> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Safari</th> <th>Safari (iOS)</th></tr> <tr> <th>OGA</th> <td>native</td> <td>native</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> </tr> <tr> <th>WAV</th> <td>n/a</td> <td>native</td> <td>native</td> <td>native</td> <td>native</td> </tr></tbody></table>
<table class="figure center"><tbody><tr><th>Video</th> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Safari</th> <th>Safari (iOS)</th></tr> <tr> <th>FLV</th> <td>Flash</td> <td>Flash</td> <td>Flash</td> <td>Flash</td> <td>n/a</td> </tr> <tr> <th>M4V</th> <td>native</td> <td>QuickTime</td> <td>native</td> <td>native</td> <td>native</td></tr> <tr> <th>OGG</th> <td>native</td> <td>native</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> </tr> <tr> <th>QuickTime</th> <td>n/a</td> <td>QuickTime</td> <td>n/a</td> <td>native</td> <td>native</td> </tr> <tr> <th>WebM</th> <td>native</td> <td>native</td> <td>native</td> <td>n/a</td> <td>n/a</td> </tr></tbody></table>
<table class="figure center"><tbody><tr><th>Document</th> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Safari</th> <th>Safari (iOS)</th></tr> <tr> <th>PDF</th> <td>native</td> <td>native</td> <td>n/a</td> <td>native</td> <td>native</td></tr></tbody></table>
<p>With this information you should be able to make smart decisions about what media formats to use to reach your intended audience, rounding out a complete media strategy for your project.</p>
plain
2015-07-14T09:13:42-07:00
1
2013-03-26T10:28:59-07:00
method=instancesof/content;methodNumNodes=250;
9
Where Do I Put It?
Deciding where your media should be hosted.
<p>If you're working with a collection of offline media, adding those files to your Scalar book means deciding where they should be hosted online. Depending on the type of media, you may have a wide variety of options to choose from. Here's a table showing the range of possibilities for each type of file along with a summary of the pros and cons of each:</p><table class="figure"> <tbody><tr> <th></th> <th>Images</th> <th>Audio</th> <th>Video</th> <th>Documents</th> <th>Pros & Cons</th> </tr> <tr> <th>Upload to Scalar</th> <td class="center">x</td> <td class="center">x</td> <td class="center">x</td> <td class="center">x</td> <td>Quick and easy; files must be <2 MB</td> </tr> <tr> <th>Self-hosted</th> <td class="center">x</td> <td class="center">x</td> <td class="center">x</td> <td class="center">x</td> <td>Maximum control; incurs hosting costs</td> </tr> <tr> <th>Hosted by third party</th> <td class="center">x</td> <td class="center">x</td> <td class="center">x</td> <td class="center">x</td> <td>Low impact, minimum control; files could be moved unexpectedly</td> </tr> <tr> <th>Critical Commons</th> <td class="center">x</td> <td class="center">x</td> <td class="center">x</td> <td></td> <td>Contributes to the growth of a fair use media archive for scholars; involves adding scholarly commentary to the media on Critical Commons</td> </tr> <tr> <th>Internet Archive</th> <td class="center">x</td> <td class="center">x</td> <td class="center">x</td> <td></td> <td>Established resource explicitly designed for archiving media</td> </tr> <tr> <th>SoundCloud</th> <td></td> <td class="center">x</td> <td></td> <td></td> <td>Full-featured audio player</td> </tr> <tr> <th>Vimeo</th> <td></td> <td></td> <td class="center">x</td> <td></td> <td>Well-established video service</td> </tr> <tr> <th>YouTube</th> <td></td> <td></td> <td class="center">x</td> <td></td> <td>Well-established video service; greater risk of takedowns, especially for media uploaded by others</td> </tr></tbody></table>
<h5>Uploading Media to Scalar</h5><p>This is the simplest way to get your media into Scalar, but also the most restrictive. You are free to upload any file type you like using the <a href="importing-your-own-media" rel="urn:scalar:version:36880">Import > Local media files</a> option in Scalar's navigation, but no single file can be larger than 2 MB. As a result, this approach works best for images and small text-based documents.</p><h5>Hosting Your Own Media</h5><p>If you already have a hosting package for your own website, this approach can be ideal, as it offers the greatest amount of control over where your files are located. Simply place the files on your server, use the <a href="importing-other-online-media" rel="urn:scalar:version:36881">Import > Internet media files</a> option, and enter the URL of each file to import into Scalar. You control the server, so you control the status of your files. If your book becomes popular, however, you may incur additional bandwidth costs for serving up the media, especially video and audio files.</p><h5>Media Hosted by a Third Party</h5><p>This approach has the distinct advantage of being low-impact for you; someone else hosts the files, and you don't have to worry about hosting costs. Depending on your relationship with the host, however, it could also be the riskiest approach. Simply linking to a file on a website whose owners you have no relationship invites "link rot," the possibility that the file could be moved or removed without notice at some point in the future. This means that at any time, the media could disappear from your book, and you would have no way of knowing anything was wrong until the next time you tried to view the media, or if a kindly reader decided to contact you about the problem. Third party hosting is less of an issue when you have a relationship with the host and a way to get in touch if something goes wrong. If you do go this route, use the <a href="importing-other-online-media" rel="urn:scalar:version:36881">Import > Internet media files</a> option with the URL of the desired file to bring it into Scalar.</p><h5>Critical Commons</h5><p>Critical Commons (not to be confused with Creative Commons) is a kind of "YouTube for scholars," a public media archive and fair use advocacy network that supports "the transformative reuse of media in scholarly and creative contexts." Copyrighted media excerpts (video, images, and audio) uploaded to Critical Commons remain hidden until the account holder adds a commentary that places the excerpted media in a critical context, thus making the file accessible to others while simultaneously helping to legitimize the claim for its fair use. These media also then become searchable within Scalar, where the user can import them and bring them into additional critical environments. For more information, <a href="http://criticalcommons.org">visit the Critical Commons site</a>.
</p><h5>Other Services</h5><p>Scalar includes direct links to other media services like Internet Archive, SoundCloud, Vimeo, and YouTube, each of which has its role to play and its own pros and cons as a Scalar media source. All online media is subject to the vagaries of the institutions and organizations which host it; there is no such thing as a permanent online archive. When selecting a company or organization to host your media, however, it's important to consider both your material and its implications with respect to the motivations of the host, as some media and hosts make better bedfellows than others.</p>
plain
2013-08-12T10:38:41-07:00
1
2013-03-27T10:38:33-07:00
method=instancesof/content;methodNumNodes=250;
2
Whole-Part Relationships
Creating relationships between whole pieces of content and parts of other content.
<p>There are four ways to create relationships between whole pieces of content and parts of other content in Scalar: annotations, media links, notes, and Scalar links.</p><h5>Annotations</h5><p>An annotation is content which is linked to a specific portion of a media file. Currently annotations can only be created for images, audio, video, and plain text files. You can create annotations by navigating to the media file and clicking the "Edit annotations" button at the bottom, or by editing an existing page and adding the annotation relationship manually. Any page or media file can become an annotation, and can even annotate more than one media file at different points simultaneously.</p><p>Readers who arrive at the annotation will see its own content (either text or media) first, and then below that, the annotated media. Media files with annotations will <a href="media/scalar_liveanno.png" resource="media/live-annotation-pop-up" rel="urn:scalar:version:37006">display</a> those annotations when matching segments of the media are played or selected; access to the annotations is also provided wherever the media is displayed within Scalar.</p><h5>Media Links</h5><p>A media link connects a portion of the text of a page to a media file. Once created, Scalar can use that link as a trigger for the automatic embedding of the referenced media into the page. Simply put, it's a hyperlink to media which Scalar can use to display the media itself. Annotation links function in a similar way, only they link to a specific annotated portion of the media.</p><p><a href="media/scalar_medialink.png" resource="media/scalar-media-link" rel="urn:scalar:version:36964">Media links</a> look like conventional hyperlinks, with an added media icon which appears immediately before the link. Clicking on a link causes the related media to highlight and, if the media is audio or video, to play.</p><h5>Notes</h5><p>A note is content which is linked to a portion of the text of a page. Notes are used most often like footnotes would be used in a conventional book, because when the user rolls over the link, the complete content of the note is displayed.</p><p><a href="media/scalar_noteslink.png" resource="media/scalar-note-link" rel="urn:scalar:version:36965">Note links</a> look like conventional hyperlinks, but appear green and have an added note icon which appears immediately before the link.</p><h5>Scalar Links</h5><p>Scalar links connect a portion of the text of a page to another piece of Scalar content--they are essentially <a href="media/scalar_link.png" resource="media/scalar-link-rollover" rel="urn:scalar:version:36963">standard hyperlinks</a> to other parts of your book, and they appear just like standard links.</p>
text
2013-03-27T17:09:52-07:00
1
2013-03-27T10:36:07-07:00
method=instancesof/content;methodNumNodes=250;
2
Whole-Whole Relationships
Creating relationships between whole pieces of content.
<p>There are three ways to create relationships between whole pieces of content in Scalar: paths, tags, and comments.</p><h5>Paths</h5><p>A path is a linear sequence of content. You can turn any page or media file into a path simply by specifying the pieces of content it contains and their order. Any time you want your reader to experience content in a specific order, use a path. Paths can intersect (i.e. they may share pages) and they can contain any kind of Scalar content, even other paths, enabling you to create hierarchical structures.</p><p>Readers who arrive at the path will see its own content (either text or media) first, and then below that, a <a href="media/scalar_pathtoc.png" resource="media/path-table-of-contents" rel="urn:scalar:version:36974">numbered list</a> of its contents, along with a "Begin" button that takes the reader to the first item on the path. Content items which are contained by one or more paths get a "<a href="media/scalar_pathnav.png" resource="media/scalar-path-navigation" rel="urn:scalar:version:36968">path bar</a>" at the top and bottom which shows the enclosing path(s) and provides navigation to the next and previous steps of the path.</p><p>To create a path, either make a new page or edit an existing page or media file using the "New" or "Edit" buttons at the bottom. Then, in the Relationships section of the page editor, look for the text "To make this page a path," and click "specify the items that it contains." A pop-up window will appear containing a list of all content in the book; select all of the items you want to add to the path and click "Add selected." You will see the newly added items in the Relationships area. You can drag and drop individual items to reorder them, or click the "remove" links to remove them.</p><h5>Tags</h5><p>A tag is a non-linear grouping of content. Many websites use tags as content descriptors; ways to identify commonalities amongst heterogeneous items. Scalar tags function in a similar way, with a key difference being that the tag itself is not just a bit of text but its own full-fledged piece of content. Any page or media file can be used to tag other Scalar content, opening up a wide range of possibilities, including using media as tags, modeling relationships between objects of study, and more.</p><p>Readers who arrive at the tag will see its own content (either text or media) first, and then below that, a list of the items it tags. Content items which have been tagged get a "<a href="media/scalar_tagbar.png" resource="media/scalar-tag-navigation" rel="urn:scalar:version:36971">tag bar</a>" at the bottom which shows both the tags which have been applied, and a random selection of content which shares the same tags.</p><p>To create a tag, either make a new page or edit an existing page or media file using the "New" or "Edit" buttons at the bottom. Then, in the Relationships section of the page editor, look for the text "To make this page a tag," and click "specify the items that it tags." A pop-up window will appear containing a list of all content in the book; select all of the items you want to tag and click "Add selected." You will see the newly added items in the Relationships area. You can remove an item by clicking its "remove" link.</p><p>To add tags to a page or media file, edit it using the "Edit" button at the bottom. Then, in the Relationships section of the page editor, look for the text "To tag this page," and click "specify items that tag it." A pop-up window will appear containing a list of all the tags in the book; select the ones you want to apply and click "Add selected." You will see the newly added items in the Relationships area. You can remove an item by clicking its "remove" link.</p><h5>Comments</h5><p>A comment is content which is explicitly identified as a response to other content. Comments are created by readers who use the "Comment on" link that appears beneath all Scalar content, but authors can also turn any content into a comment simply by editing it and specifying the page or media it comments on. As with the other relationships, any piece of Scalar content can be a comment, including media files--and even comments themselves can have their own comments. A single comment can also be applied to multiple pieces of content simultaneously.</p><p>Readers who arrive at the comment will see its own content (either text or media) first, and then below that, a list of the items it comments on. Content items with comments get a "Join this page's discussion" link at the bottom which opens a <a href="media/scalar_comments.png" resource="media/comments-in-a-scalar-book" rel="urn:scalar:version:37066">pop-up window</a> containing all of the comments added to date.</p>
text
2013-03-27T17:08:06-07:00
1
2013-03-26T12:54:31-07:00
method=instancesof/content;methodNumNodes=250;
3
Working with Content
Creating and editing content in Scalar.
plain
2013-03-27T16:00:44-07:00
1
2013-03-26T10:14:28-07:00
method=instancesof/content;methodNumNodes=250;
8
Working with Media
How to get the most out of your use of media in Scalar.
<p>Scalar is designed to allow you to bring media seamlessly into your books for the purpose of presentation, discussion, and analysis. This path includes information that will help you get the most of your use of media in Scalar.</p>
plain
2014-08-19T15:46:30-07:00
1
2013-03-27T10:30:01-07:00
method=instancesof/content;methodNumNodes=250;
2
Working with Structure
How to use Scalar's many options for structuring publications.
<p>A Scalar book is much more than a collection of discrete pages; it's the relationships between those pages and their media that ultimately give the book its shape. Scalar is flexible in the way it enables you to organize your content, taking the building blocks of online publishing (sequenced posts, tags, and more) and applying them in new ways.</p>
plain
2013-03-27T10:39:08-07:00
1
2013-06-07T13:15:17-07:00
method=instancesof/content;methodNumNodes=250;
10
Working with the API
You can mashup your Scalar content with other data sources, build your own visualizations, or create completely new interfaces for your materials using <a href="media/feat_api_banner.jpg" resource="media/api-diagram" rel="urn:scalar:version:51266">Scalar’s built-in API</a>. All of the content from your project is available either directly via <a href="api-explorer--remote-access" rel="urn:scalar:version:51269">URL-based requests</a> which return data in <a href="rdf-syntax" rel="urn:scalar:version:51270">RDF-XML and JSON formats</a>, or through a<a href="api-helper-javascript-library" rel="urn:scalar:version:51275"> free JavaScript library</a> which creates a unified model of your downloaded Scalar data and makes it easy to access that data in a variety of ways, all while queueing requests and caching results.<p></p><p>This path will help you understand how to use the various capabilities of Scalar's robust API.</p>
media
12710
2013-09-13T13:32:12-07:00