StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWeb Page Source Annotation Tool
text
Body
copied!<pre><code><ul class="contact"> <li class="first">Carnegie Mellon University</li> <li>5000 Forbes Avenue, Pittsburgh, PA 15213</li> </ul> </code></pre> <p>=></p> <pre><code><ul class="contact"> <li class="first">[univ]Carnegie Mellon University[/univ]</li> <li>[address]5000 Forbes Avenue, Pittsburgh, PA 15213[/address]</li> </ul> </code></pre> <p>shows the semantic annotation process I'd like to go through for thousands of web pages. To make my intention clear, I'd like to download all these web pages and have them annotated with user-defined tags (e.g., <code>univ</code>, <code>address</code>). The annotated pages will be used later for processing.</p> <p>The most naive method I've been using is download the page, open the page file, edit the file with a text editor and save it. It's just too cumbersome.</p> <p>A better approach I've been using is select the target text to be annotated from browser, inspect the target with tools like Firebug, edit the target text within the inspected view and save the edited page. This helps alleviate some burden, but still there's much room for improvement.</p> <p>The ideal tool I'd like to have is one with which I can select the target text from the page within a browser, pick the corresponding annotation tag(preferably choosing from a tool bar which displays all tags available), and save the edited page with a single button.</p> <p>If anyone knows such kind of tools, it would be great. But I doubt such a tool exists at all. Chances are I have to write such a tool myself. The question is, how should I get started? I have little web application developing experience.</p> <p>Should I write a browser extension? Should I write a standalone application? In what language?</p> <p><strong>EDIT</strong>: A simpler version of the question can be found <a href="https://stackoverflow.com/questions/14271919/surrounding-selected-text-with-tags">here</a>. A complete working solution is preferred. I assume this problem is no big deal for experienced web developers but it might really take a while for me and I need to implement the function as soon as possible.</p> <p><strong>EDIT</strong>: Also, I prefer a tool bar right after selection to a drop-down list after right click. I think the tool bar for chrome extension <code>Diigo Web Collector</code> is quite cool. <img src="https://i.stack.imgur.com/mZmOY.jpg" alt="enter image description here"></p> <p>What's more, a <code>save</code> button is needed on the tool bar to save the edited page to default or user specified place on computer. The buttons on the tool bar should be in this order: <code>univ</code> <code>address</code> <code>tag3</code> <code>tag4</code> ... <code>tagn</code> <code>save</code>. The save button comes last.</p> <p><strong>EDIT</strong>: It seems impossible to download the edited page to local file system using Javascript. In either Chrome or Firefox, after we edit the source code of the page in the inspected view, there's a save button for us to save the edited page to local file system. How was that implemented? What I don't want about that save button is it always prompts for the directory to download the page. I'd like to make it a default directory with my own save button. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload