Posted:January 31, 2007

Adopting Standardized Identification and Metadata

Since it’s becoming all the rage, I decided to go legit and get myself (and my blog) a standard ID and enable the site for easy metadata exchange.

OpenID

OpenID is an open and free framework for users (and their blogs or Web sites) to establish a digital identity. OpenID starts with the concept that anyone can identify themselves on the Internet the same way websites do via a URI and that authentication is essential to prove ownership of the ID.

Sam Ruby provides a clear article on how to set up your own OpenID. One of the listing services is MyOpenID, from which you can get a free ID. With Sam’s instructions, you can also link a Web site or blog to this ID. When done, you can check whether your site is valid; you can do a quick check using my own ID (make sure and enter the full URI!). However, to get the valid ID message as shown below, you will need to have your standard (and secure) OpenID password handy.

unAPI

unAPI addresses a different problem — the need for a uniform, simple method for copying rich digital objects out of any Web application. unAPI is a tiny HTTP API for the few basic operations necessary to copy discrete, identified content from any kind of web application. An interesting unAPI background and rationale paper from the Ariadne online library ezine is “Introducing unAPI”.

To invoke the service, I installed the unAPI Server, a WordPress plug-in from Michael J. Giarlo. The server provides records for each WordPress post and page in the following formats: OAI-Dublin Core (oai_dc), Metadata Object Description Schema (MODS), SRW-Dublin Core (srw_dc), MARCXML, and RSS. The specification makes use of LINK tag auto-discovery and an unendorsed microformat for machine-readable metadata records.

Validating the call is provided by the unAPI organization, with the return for this blog entry shown here (which is error free and only partially reproduced):

The actual unAPI results do not appear anywhere in your page, since the entire intent is to be machine readable. However, to show what can be expected from these five formats, I reproduce what the internal metadata listings for the five different formats are in these links:

MARCXML:

http://www.mkbergman.com/wp-content/plugins/unapi/server.php?id= http://www.mkbergman.com/?p=320&format=marcxml

MODS:

http://www.mkbergman.com/wp-content/plugins/unapi/server.php?id= http://www.mkbergman.com/?p=320&format=mods

OAI-DC:

http://www.mkbergman.com/wp-content/plugins/unapi/server.php?id= http://www.mkbergman.com/?p=320&format=oai_dc

RSS:

http://www.mkbergman.com/wp-content/plugins/unapi/server.php?id= http://www.mkbergman.com/?p=320&format=rss

SRW-DC:

http://www.mkbergman.com/wp-content/plugins/unapi/server.php?id= http://www.mkbergman.com/?p=320&format=srw_dc

unAPI adoption is just now beginning, and some apps like the Firefox Dublin Core Viewer add-on do not yet recognize the formats. But, because the specification is so simple and is being pushed by the library community, I suspect adoption will become very common. I encourage you to join!

Posted:January 24, 2007

Structure for the Masses

or

Instant Mashups between WordPress, Google Spreadsheets and Exhibit

The past couple of days has seen a flurry of activity and much excitement revolving around a new “database-free” mashup and publication system called Exhibit. Another in a string of sneaky-cool software from MIT’s Simile program (and written by David Huynh, a pragmatic semantic Web developer of the first order), Exhibit (and its sure to follow rapid innovations) will truly revolutionize Web publishing and the visualization and presentation of structured data. Exhibit is quite simply “structure for the masses.”

What is It?

With just a few simple steps, even the most novice blog author can now embed structured data — such as sortable and filtered table displays, thumbnails, maps, timelines and histograms — in her blog posts and blog pages. Using Exhibit, you can now create rich data visualizations of web pages using only HTML (and optional CSS and Javascript code).

Exhibit requires no traditional database technology, no server-side code, and no need for a web server. Here is a sampling of Exhibit‘s current capabilities:

  • No external databases or hassles
  • Data filtering and sorting
  • Simple HTML embeds and calls
  • Automatic and dynamic page layouts and results rendering
  • Completely tailorable (with CSS and Javascript)
  • Direct updates and presentations (mashups) from Google spreadsheets
  • Pre-prepared timelines, map mashups, tabular display options, and Web page formatting
  • Easily embedded in WordPress blogs (see the first tutorial here).

Exhibit is as simple as defining a spreadsheet; after that you have a complete database! And, if you want to get wild and crazy with presentation and display, then that is easy as well!

What Are Some Examples?

Though Exhibit has been released barely one month, already there are some pretty impressive examples:

What Are People Saying?

Granted, we’re only talking about the last 24 hours or so, but interesting people are noticing and commenting on this phenomenon:

  • Ajaxian“Exhibit is a new project that lets you build rich sorting and filtering data applications in a simple way.”
  • Danny Ayers“Although the person using these tools doesn’t need to think about gobbledegook like RDF, when they use the tools, they are putting first class data on the web in a Semantic Web-friendly fashion.”
  • David Huynh“Now, we’re not just talking about the usual suspects of domains like photos and bookmarks. We’re talking about any arbitrary domain of data — Yes, the real world data. The data that people care about. I am hoping that we can create tools that let the average blogger easily publish structured data without ever having to coin URIs or design or pick ontologies — But there it is: this is, in my humble opinion, a beginning of something great.”
  • Kyler “If you don’t see the value of this, you are a fool.”
  • Derek Kinsman“Exhibit is an amazing web app … I am beginning to work alongside my WordPress mates in the hopes that we can create some sort of Administration area inside WordPress that connects to the Google accounts. Right inside WP. Also, we’re attempting to create some sort of plugin or downloadable template to which Exhibit can run mostly out of the box.”

What is Coming?

Johan Sundström has created an Instant Google Spreadsheets Exhibit, which lets you turn any Google spreadsheet (with certain formatting requirements) into an “exhibit” just by pasting in its public feed URL with immediate faceted browsing; maps and timelines are forthcoming.

Well, a WordPress plug-in is in the works (to be announced, with Derek helping to take the lead on it). Though incorporation into a blog is easy, it does require the author to have system administration rights and access to the WordPress server. A plug-in could remove those hurdles and make usage still easier.

Exhibit‘s very helpful online tutorials are being expanded, particularly with more examples and more templates. For those seriously interested in the technology, definitely monitor the Simile project site.

There continues to be activity and expansion of the Babel translation formats. You can now convert BibTeX, Excel, Notation 3 (N3), RDF/XML or tab-separated values (TSV) to a choice of Exhibit JSON , N3 or RDF/XML. And, since Exhibit itself internally stores its data representation as triples, it is tantalizing to think that another Simile project, RDFizers, with its impressive storehose of RDF converters, may also be more closely tied with Babel. Is it possible that Exhibit JSON may become the lingua franca of small-scale data representation formats?

And, within the project team of Huynh and his Ph.D. thesis advisor, David Karger, there are also efforts underway to extend the syntax and functionality of Exhibit. We’ve just seen the expansion to direct Google spreadsheet support, and support for more spreadsheet functionality is desired, including possible string concatenation and numeric operations.

Exhibit itself has been designed with extensibility in mind. Its linkage to Timeline, for example, is one such example. What will be critical in the weeks and months ahead is the development of a developer and user community surrounding Exhibit. There is presently a fairly active mailing list and I’m sure the MIT folks would welcome serious contributions.

Finally, other aspects of the Simile project itself and related intiatives at MIT have direct and growing ties to Exhibit both in terms of team members and developers and in terms of philosophy. You may want to check out these additional MIT projects including Longwell, Piggy Bank, Solvent, Semantic Bank, Welkin, DSpace, Haystack, Dwell, Ajax, Sifter, Relo plugin, Re:Search, Chickenfoot, and LAPIS. This is a program on the move, to which the closest attention is warranted.

Expected Growing Pains

There are some known issues sometimes with display in Safari and Opera browsers; these are being worked on and should be resolved shortly. There are also some style issues and conflicts when embedding in blogs (easily fixed with CSS modifications). There are likely performance problems when data sets get into the hundreds or thousands, but that exceeds Exhibit‘s lightweight objectives anyway. There may be other problems that emerge as use broadens.

These issues are to be expected and should not diminish playing with the system immediately. You’ll be amazed at what you can do, and how rapidly with so little code.

It has been a fun few days. It’s exciting to be able to be a camp follower during one of those seminal moments in Web development. And, so I say to David and colleagues at MIT and the band of merry collaborators on their mailing list: Thanks! This is truly cool.

Jewels & Doubloons An AI3 Jewels & Doubloon Winner
Posted:January 22, 2007

Five Easy Steps to Embed Exhibit in a Blog

My earlier post gushed about the new Exhibit lightweight, structured data publishing system for Web pages from MIT’s Simile project. Because I was so impressed with the project’s examples, I decided to convert my existing 350+ semantic Web tools listing, Sweet Tools, to an online database. I also wanted to maintain the Google spreadsheet listing for others to make new tools suggestions.

Please see the NEW and IMPROVED Sweet Tools here, and now in database format! (And now updated to 378 tools!)

The remainder of this posting describes how I did this, following the online Exhibit tutorials. To my knowledge, this is the first time that an “exhibit” has been embedded within a blog system (WordPress in my example).

Five Easy Steps

  1. Though one can start with a standalone spreadsheet or other simple data structure, I began with a Google online spreadsheet (of the 350+ tools). I only needed to make a few changes in terms of {bracket identifiers} as column heads and to make explicit some other data features (such as ‘new’) that I had been handling before as formatting (see tutorials below). (I should mention that Exhibit seems to handle OK datasets as large as the one used here.) If you have a Google account, you can see the original, older version of the spreadsheet (which will no longer be updated or maintained) with its slightly modified new Google sibling
  2. I then followed the excellent “Getting Started” Exhibit tutorial, making all modifications locally. I worked with this local system until I got the display and presentation working the way I wanted it to with the various styles (I also decided to add thumbnails at this point; see thumbshots.org for examples and code)
  3. Within WordPress I created a new page template, in which I embedded the Javascript, the body onLoad call, and the embedded table as described above in Step 2. IMPORTANT: You need to have system administration access to WordPress to make these modifications; hosted services might be difficult. IMPORTANT: Though not indicated in any of the tutorials, I also had to embed references to the Exhibit style sheets in the page template, since my existing blog styles were apparently not allowing the inheritance of the remote Exhibit styles. (I also chose to embed my local styles via link reference as well.) Please copy these references carefully! Thus, the top of my page template (with differences shown in bolded maroon) became:
  4. Then, via the Write Page function within the WordPress admin center, I created a new page post referencing this new page template. I embedded some lead-in paragraphs in the page itself (but that is not necessary), and
  5. Finally, I updated my local spreadsheet (and will continue to do so periodically), uploaded it to Google, and made sure that I removed any extraneous rows and columns from the data to be displayed. Then, I manually re-published the site, and published it, again according to the excellent Exhibit tutorial on working with Google spreadsheets, and viola!

General Observations

The remote data feed from Google spreadsheets is a very nice feature that also removes one further step from the standard (though simple!) Exhibit set-up.

You can used mixed case in your attribute descriptors (but no spaces!) for better label displays (such as capitalization). However, for some reason (I suspect it’s an early bug) you can not use mixed case on the first Google field, which also defaults to “label”.

The remote Exhibit styles should probably be called out separately and better commented. I’m still seeing some squirrelly styles behavior. (For example, the right-margin browse and filter selection box has some overlapping characters.) Though I can inspect the styles with tools like Web Developer, it is tricky to make local changes.

Like Tim Isenheim’s Timeline plug-in for WordPress, it probably makes sense for someone with PHP experience (not me!) to make an Exhibit plug-in as well.

Lastly, the existing Exhibit tutorials are very helpful, but more would also help. (Hint, hint David!) More examples of filtering, lenses, and layout templates would be especially helpful.

However, the most important observation is that Exhibit is a much more useful and flexible presentation format than simple spreadsheets. Though as a first-time experience it took me some trial-and-error to work out the details, it is really very easy and straightforward to add such capabilities to a WordPress blog.

Posted:September 12, 2006

My recent post on Hyperland got me thinking about the use of avatars, and then, lo and behold, I almost immediately saw an ad for one. Actually, I'm not sure that they are effective (the vendor claim) or creepy (my sneaking suspicion).

While I love the idea of Tom in Hyperland as the "obsequious, fully customizable" agent, it feels a little different when one tries to model one's self. Perhaps that is one mistake. Don't link yourself as a talking head, find a more attractive one of the opposite sex! (Or, the avatar as psychotherapy!)

So, I’ve given a go to one; try it (you will need to use the back arrow to return):

Actually, what I'm doing here is perhaps a bit of HTML hacking on what is normally SitePal's email come-on for their service. Do check their service out: you can mold your own avatar within limits and make it speak as you wish. (Final tailoring requires actually leasing the creation!) At any rate, while I spent no more than 5 min configuring my alter ego above, let me know if you think this is a:

  1. Wave of the future
  2. Creepy
  3. Needs improvement
  4. Get a babe!
  5. Get a life!

Oh, well. Perhaps not all of us can be talking heads, and perhaps we don’t need more of them.

Thanks.

Posted:September 6, 2006
NOTE: I have posted a major cleanup and update of what is now called the Advanced TinyMCE Editor, tested beginning with WP v. 2.2. Obtain the plug-in download and documentation HERE. The update announcement is now the best place to post new online comments and discussion. Let me know what you think! MKB

Author’s Note: There is a zipped plugin, code and documentation that supports the information in this post, which will allow you to extend the functionality of your TinyMCE rich text editor in WordPress; for immediate instructions see the end of the post below.
Download Extended TinyMCE code file Click here to download the zipped file (101 KB)

My most recent post was about the smooth upgrade to WordPress v. 2.0.4 for my blog software and noted my popular Comprehensive Guide to a Professional Blog Site recounting my own experiences setting up, configuring and maintaining my own blog site. A key aspect of that earlier Guide dealt with (what I perceived to be) an oversight in older versions of WordPress that lacked a bundled WYSIWYG editor. For my own site and installation, I had chosen the Xinha editor, and had devoted a number of entries in the Guide to its configuration and use.

However, as of WordPress version 2x, the developers have now chosen to bundle the proven Javascript rich text editor, TinyMCE, as part of the standard distribution package. Since I had come to rue some of the aspects of Xinha in my earlier implementation (namely, bad HTML for carriage returns and VERY slow times when publishing a post), I decided to give TinyMCE a go as my new replacement editor.

(Actually, this was not such a major shift since we had adopted a sibling TinyMCE application, the Joomla Content Editor (JCE), for the Joomla-based BrightPlanet corporate Web site.)

As implemented, the TinyMCE editor in WordPress is configured more akin to the prior QuickTags feature set, with the few available editing functions being bold, underline, bullets, text alignment, and so forth. Here is a screen shot from my WordPress administration center with TinyMCE as delivered with WordPress v. 2.0.4:

The only problem is that I have become used to editing support for items such as tables, image manipulation, special characters, font types, and so forth. While I (generally) edit and clean up the HTML before final posting, I very much enjoy the productivity benefits of a more full-featured WYSIWYG editor. So, the rhetorical question to myself was: If I’m going to use TinyMCE, how can I extend its functionality?

The Investigations Begin

Having been familiar with other TinyMCE instantiations, I began my investigations with the (as it turns out naive) assumption that upgrading to a full featured TinyMCE would be a snap. Boy, was I wrong.

I first began with the TinyMCE Web site itself checking out the standard distribution package. Like many open source sites, I found the online documentation for TinyMCE to be fragmented, incomplete and hard to navigate. I looked under the ‘Plugins’ tab and found it was documentation for developers in creating a new plugin. My first lead came from the online manual (which can also be downladed for local browsing) and its reference to installation options, specifically these options at the bottom of that page:

Bingo! Clearly, TinyMCE had the advanced features I was seeking and they were packaged as part of the direct TinyMCE distribution to boot! Now I assumed my only needed step was to find how to “turn on” these features in my WordPress installation.

What Was Learned
This line of thinking led me to an unfortunate waste of time in Web search and poking through the forums at both the TinyMCE and WordPress sites. It became clear that the TinyMCE integration in WordPress was both highly tailored and limited to just the simple functionality (Example 00 above). I saw references by others to the “wisdom” of the WordPress developers to making this choice and therefore reducing the overall size of the WordPress download, but I don’t see it that way. It seems rather arbitrary and taking available choices from the user by unilaterally “whittling down” a more fully featured option from Moxiecode. Oh, well.

One dead end among many I pursued was instructions from the TinyMCE staff on integrating Moxiecode’s commercial plugins. That reference — http://tinymce.moxiecode.com/downloads/integration/ — got me way too into specific WordPress code that I was also unable to modify for my specific plugin purposes (though perhaps more capable programmers could have seen a clear path). I also found many requests but little guidance from the WordPress forums.

The first breakthough occurred on the TinyMCE Wishlist postings on the WordPress forum, which led me to the Advanced WYSIWYG plugin by Assaf Arkin of Labnotes. Part of the problem in finding this in the first place was that the actual plugin file name was misspelled as “advacned-wysiwyg”. So, I followed the instructions for the plugin and, voila, it didn’t work!

Grr! More investigation indicated that the likely problem resided in new version 2x plugins for TinyMCE as NOT working with the Advanced WYSIWYG plugin. As Paul Finch reported on the Labnotes site, reverting back to earlier advanced plugins for TinyMCE in versions 1.45 and earlier, which could be found on the Sourceforge download site, solved the problem.

As indeed it does, as this updated editor on my blog administration panel shows:

These “standard” advanced plugins for TinyMCE provide possible functionality beyond the simple installation (marked with an asterisk [*]) (also, ones I could not get to work — but I did not test all of them! — are shown with double asterisks [**]) for:

Default buttons available in the advanced theme:

* bold
italic
* underline
* strikethrough
* justifyleft
* justifycenter
* justifyright
* justifyfull
* bullist
* numlist
outdent
* indent
cut
copy
paste
* undo
* redo
* link
* unlink
* image
cleanup
help
* code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
charmap
visualaid
anchor
newdocument
separator

Plugins with the button name same as plugin name:

save
emotions
flash
iespell
preview
print
zoom
fullscreen
advhr
fullpage
spellchecker

Plugins with custom buttons:

advlink (will override the “link” button)

advimage (will override the “image” button)

paste

  • pastetext
  • pasteword
  • selectall

** searchreplace

  • search
  • replace

insertdatetime

  • insertdate
  • inserttime

table

  • tablecontrols
  • table
  • row_props
  • cell_props
  • delete_col
  • delete_row
  • col_after
  • col_before
  • row_after
  • row_before
  • row_after
  • row_before
  • split_cells
  • merge_cells

directionality

  • ltr
  • rtl

layer

  • moveforward
  • movebackward
  • absolute
  • insertlayer

** style

  • styleprops

Early Use Observations

With one major exception — and it is MAJOR! — I have generally been pleased with the new TinyMCE editor in its full functionality version. I have been working with it for nearly a week and have completed four or five published posts. The writing of posts is now much quicker. There are no longer problems with line breaks and paragraph formatting. For most functionality, the editor just feels more “solid” than my previous Xinha editor. For all of that, I am very thankful.

The major issue I have encountered is with long posts (such as this one), particularly when I am toggling between the code (HTML) view and WYSIWYG view. Without warning, I will suddenly lose entire portions of text at the bottom of the post. This appears to be either strictly a TinyMCE issue or perhaps an issue related to my Firefox browser that others have noted on the WordPress forum.

Best practices, as I have reported on elsewhere and as part of my Guide, generally suggest drafting long posts external to WordPress anyway, though the loss of any work is distressing. I will monitor this “long posting” issue carefully, and until I see a resolution I will likely save to the clipboard or take other steps to prevent future losses.

Specific Upgrade Instructions

So, because I have generally been pleased with these extensions, I thought I would package and write them up for others to use, saving you the fits and starts I went through. The download at the top of this post includes the instructions and all files noted below. The instructions are included as the readme.txt file in the package. I also chose to make some minor updates to plugin operation (better sizing of popups, for example) and also corrected the spelling error in the file name and allowed for multi-line bullets for the extended TinyMCE in the Advanced WYSIWYW plugin. All of these changes, plus the vetted TinyMCE ver. 1.45 advanced plugins, are included in the distribution. Please note this information is being provided “as is”; you can also only do this if you have direct file access to your WordPress installation.

1. Download the enclosed zip file and unzip it to a clean subdirectory; these instructions are repeated in the enclosed readme.txt file.

2. If you don’t like the button order shown in the image above, you may remove buttons or change ordering or add or remove separator bars by editing the advanced-wysiwyg.php file:

< ?php
/*
Plugin Name: Advanced WYSIWYG Editor
Plugin URI: http://www.labnotes.org/
Description: Adds more styling options to the WYSIWYG post editor, updated for multi-line buttons.
Version: 0.3
Author: Assaf Arkin
Author URI: http://labnotes.org/
License: Creative Commons Attribution-ShareAlike
Tags: wordpress tinymce
*/

if (isset($wp_version)) {
add_filter(“mce_plugins”, “extended_editor_mce_plugins”, 0);
add_filter(“mce_buttons”, “extended_editor_mce_buttons”, 0);
add_filter(“mce_buttons_2″, “extended_editor_mce_buttons_2″, 0);
add_filter(“mce_buttons_3″, “extended_editor_mce_buttons_3″, 0);
}


function extended_editor_mce_plugins($plugins) {
array_push($plugins, “table”, “fullscreen”, “searchreplace”, “advhr”, “advimage”);
return $plugins;
}


function extended_editor_mce_buttons($buttons) {
return array(
“undo”, “redo”, “separator”, “cut”, “copy”, “paste”, “separator”, “bold”, “italic”, “underline”, “strikethrough”, “separator”,
“bullist”, “numlist”, “separator”, “indent”, “outdent”, “separator”,
“justifyleft”, “justifycenter”, “justifyright”, “justifyfull”, “separator”,
“sub”, “sup”, “charmap”, “hr”, “advhr”,”separator”, “link”, “unlink”, “anchor”, “separator”,
“code”, “cleanup”, “separator”, “search”, “replace”, “separator”, “wphelp”);
}

function extended_editor_mce_buttons_2($buttons) {
// the second toolbar line
return array(
“formatselect”, “fontselect”, “fontsizeselect”, “styleselect”, “separator”, “forecolor”, “backcolor”, “separator”,”removeformat”);
}

function extended_editor_mce_buttons_3($buttons) {
// These are the buttons for third toolbar line
return array(
“image”, “separator”, “tablecontrols”, “separator”, “fullscreen”, “wordpress”);
}
?>

3. Copy the resulting advanced-wysiwyg.php file into your standard WordPress plugins directory (wp-content\plugins)

4. Copy all files from the extracted plugins subdirectory to the TinyMCE plugins subdirectory in your WordPress directory (wp-includes\js\tinymce\plugins)

5. Under ‘Plugins’ in your WordPress administrative center, ‘activate’ the Advanced WYSIWYG Editor plugin

6. Now, when you write or manage posts or pages you will have the extended TinyMCE functionality available

7. Enjoy!

Posted by AI3's author, Mike Bergman Posted on September 6, 2006 at 2:38 pm in Blogs and Blogging, Open Source, Site-related | Comments (78)
The URI link reference to this post is: http://www.mkbergman.com/275/extending-tinymce-the-wordpress-rich-text-editor/
The URI to trackback this post is: http://www.mkbergman.com/275/extending-tinymce-the-wordpress-rich-text-editor/trackback/