search

oerpub / github-bookeditor

Edit Textbooks using Javascript and save to GitHub
http://oerpub.github.io/github-bookeditor/
GNU Affero General Public License v3.0
102 stars 27 forks source link

Add metadata editing UI for book #139

Open kathi-fletcher opened 10 years ago

kathi-fletcher commented 10 years ago

Design: Add New Book with Metadata

Design for adding basic metadata at the time a new book is created.

Step 1. Add new book

Add new book from Bookshelf

Should be no change from existing implementation.

Step 2. Request title

Add book title

Save .opf, <title>-nav.html, <title>-module1.html</p> <p>I think their should be no changes from the existing implementation, except possibly adding part of the book title to module1's title so we don't end up with a bunch of module1's.</p> <ul> <li>[x] Add book title to module 1. <h3>Step 4. Request metadata</h3></li> </ul> <p>Mockup (View in Firefox): <a rel="noreferrer nofollow" target="_blank" href="http://oerpub.github.io/uidesigns/mockups/editor-ideas/w-editor-33.html">w-editor-33.html</a> : Click on module title area to see dialog.</p> <p>This is the same metadata collection dialog that will come up from various other interactions, but it has a couple of variations from the mockup when it comes from "Create new book". </p> <p>To activate the metadata dialog so you can see all the parts, click on the module title, "Laws of Exponents" in orange on the editable area and choose "Yes, edit book information first". (Implementing module metadata will be described in a separate design doc.)</p> <h4>Variations from the mockup</h4> <ul> <li>[x] 1. Instead of "Save", use "Next" and forward to the tab to the right. About -> Authors, Authors -> Summary.</li> <li>[x] 2. On the right most tab, "Summary", say "Save". <h4>Notes relevant to all the tabs</h4></li> <li>[x] 1. The author can click on the tabs to move through them in addition to using the "Next" button. </li> <li>[x] 2. If the author cancels, no new metadata will be saved, but the book will still be created since that happens after the title is entered.</li> <li>[x] Cancel should have a confirmation since you could lose a lot of work. "Are you sure you want to cancel? The title, authors, and other information about this book will retain their previous values." <h4>Tab 1: About</h4></li> </ul> <p><img referrerpolicy="no-referrer" src="http://oerpub.github.io/uidesigns/designs/images/book-metadata-tab1-about.png" alt="Book metadata: Tab 1" /> Mockup (View in Firefox): <a rel="noreferrer nofollow" target="_blank" href="http://oerpub.github.io/uidesigns/mockups/editor-ideas/w-editor-33.html">w-editor-33.html</a> : Click on module title area to see dialog.</p> <ul> <li>[x] Modal title done. "Edit the authors and other metadata on this book"</li> <li>[x] Editable title area done. "Title (required): <title>" click to edit, highlights on hover</li> <li>[ ] Title color matches the book title color in the TOC.</li> <li>[x] Implement subject and keywords entry. Comma, tab, or enter, should all separate entries. The entries should then work like gmail addresses, or the author ids on the connexions beta.</li> <li>[x] Inside subject and keywords, do light gray italics instructions. This is not on the mockup. "Use comma, or tab to separate"</li> <li>[x] Language : Use the list here - <a rel="noreferrer nofollow" target="_blank" href="http://remix.oerpub.org/metadata">http://remix.oerpub.org/metadata</a> .</li> <li>[ ] Google Analytics: If this could work like it does on remix, and have a check box that unfolds the value. <a rel="noreferrer nofollow" target="_blank" href="http://oerpub.github.io/uidesigns/designs/images/google-analytics.png">google-analytics.png</a> <a rel="noreferrer nofollow" target="_blank" href="http://oerpub.github.io/uidesigns/designs/images/ga-unfolded.png">ga-unfolded.png</a> </li> <li>[x] License: Use the same values as in the image uploader. <a rel="noreferrer nofollow" target="_blank" href="http://oerpub.github.io/uidesigns/designs/images/licenses.png">licenses.png</a></li> <li>[x] Change "Save" to "Next", advance to next tab <h4>Tab 2: Authors</h4></li> </ul> <p><img referrerpolicy="no-referrer" src="http://oerpub.github.io/uidesigns/designs/images/book-metadata-tab2-authors.png" alt="Book metadata: Tab 2" /> Mockup (View in Firefox): <a rel="noreferrer nofollow" target="_blank" href="http://oerpub.github.io/uidesigns/mockups/editor-ideas/w-editor-33.html">w-editor-33.html</a> : Click on module title area to see dialog.</p> <ul> <li>[x] Implement authors, copyright holders, editors, and translators. Use the same entry mechanism as for subjects and keywords. </li> <li>[x] Add help text within the author field. (See subjects and keywords)</li> <li>[x] Add "Publisher (optional)" beneath "Copyright Holder" (these aren't in the mockup)</li> <li>[x] Add "Illustrator (optional)" at the end (these aren't in the mockup)</li> <li>[x] Change "Save" to "Next", advance to next tab <h4>Tab 3: Summary</h4></li> </ul> <p><img referrerpolicy="no-referrer" src="http://oerpub.github.io/uidesigns/designs/images/book-metadata-tab3-summary.png" alt="Book metadata: Tab 3" /> Mockup (View in Firefox): <a rel="noreferrer nofollow" target="_blank" href="http://oerpub.github.io/uidesigns/mockups/editor-ideas/w-editor-33.html">w-editor-33.html</a> : Click on module title area to see dialog.</p> <ul> <li>[x] Make sure can enter multiple paragraphs.</li> <li>[x] Make entry box big enough to fill the tab reasonably.</li> <li>[x] Make entry box stretchy.</li> <li>Implement mini-formatting toolbar for the summary is a separate issue : [<a rel="noreferrer nofollow" target="_blank" href="https://github.com/oerpub/github-bookeditor/issues/153](Issue">https://github.com/oerpub/github-bookeditor/issues/153](Issue</a> 153) <h3>Step 5.A Save metadata in the .opf file</h3></li> <li>[x] Use this format <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oerpub/uidesigns/blob/master/designs/book-metadata-format.md">book-metadata-format</a></li> <li>[x] As add things to the opf, test the editor and test the reader to make sure that they are still working. <h3>Step 5.B Save metadata in the -nav.html file</h3></li> <li>[ ] Use this format <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oerpub/uidesigns/blob/master/designs/book-metadata-format.md">book-metadata-format</a>, and this sample file <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oerpub/uidesigns/blob/master/designs/sample-book-nav.html">sample nav</a></li> <li>[ ] As add things to the -nav, test the editor and test the reader to make sure that they are still working. <h3>Step 6. Content saves should update the modified date in the metadata</h3></li> </ul> <p>ie. <code><meta properties="dcterms:modified">2013-12-19</meta></code></p> <ul> <li>[ ] Update in the opf file.</li> <li>[ ] Update in the nav file.</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kathi-fletcher"><img src="https://avatars.githubusercontent.com/u/863665?v=4" />kathi-fletcher</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>Testing : Once I finally untangled the dependencies, here are my initial findings on the book metadata.</p> <p>The testbook I used was <a href="https://github.com/kathi-fletcher/metadata-test-book">metadata-test-book</a></p> <h2>Opf file</h2> <ul> <li>[x] Don't want a new book to be "based on anything". <code><meta property="schema:isBasedOnUrl">http://github.com/oerpub/empty-book/content/empty-book.opf</meta></code>. If the repo the book is in is forked from somewhere, then this field should be set to the original repo.</li> <li>[x] ID is empty: <code><dc:identifier id="uid"/></code> This should be the URL to the repo. We have this as the .opf file right now.</li> <li>[x] When creating a new shelf, we need to the metadata editing widget to come up.</li> </ul> <h2>-Nav file</h2> <ul> <li>[x] Meta tags need closing. <code><meta itemprop="inLanguage" content="en"></code></li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>