Thumbstack – A Web-Based Presentation Application

thumbstackA while back, my pal Zach posted about S5, “A Simple Standards-Based Slide Show System.” Now, its important to note that S5 is trying to set up a standard and not develop a full blown application. S5 seems to be a solid foundation…all it really needs is a slick editor and I’m sold.

Well, as I’ve been waiting for and S5 editor to come along, Thumbstack has come along instead and I’ll be content goofing around with that for a while. While Thumbstack isn’t built off of the S5 standard, it is a sold web implementation of presentation software complete with a decent draggable presentation builder…themable to boot! (although the available themes are dumb right now, that’s sure to improve). The editor is a div based-DHTML pumped-Ajax integrated layout; the presentation itself seems to be Flash. Interesting stuff.

It shows promise, but there are a few things it lacks that I hope to see:

  • More themes
  • Slide transitions and animations (nothing too crazy, basic will do fine)
  • Export to Powerpoint
  • Ctrl+S to save
  • While viewing a presentation, right clicking should give a contextual menu.

I’ll be keeping an eye on Thumbstack. Google recently bought Writely, which means they are interested in web-based Office software. They’ve got Gmail, an upcoming Calendar, a Word Processor, and a Webpage Builder. All they need now are solid presentation and spreadsheet applications. The race is on.

Look Ma, Cross-Domain Scripting!

Ajax, as I’ve stated time and time again, is sweet. So what is problem? XMLHTTPRequest requires that the called scripts that execute server side and return information to the client must reside on the same domain. This has irked me time and time again during my exploration and experimentation of the Web 2.0 world.

Enter JSON Web Services and dynamic script tags. This beauty allows for Ajax-like communication across domains without requiring page loads. Right right right…so how do you use it? Read on…

First, lets clarify what JSON (JavaScript Object Notation) is. Wikipedia explains that JSON is just a way to structure object data in a way that is easily interpreted…primarily with JavaScript. Here’s some examples from Wikipedia:

JSON Example:

bork({"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}});

Which is the same as this XML Example:

<menu id="file" value="File">
  <popup>
    <menuitem value="New" onclick="CreateNewDoc()" />
    <menuitem value="Open" onclick="OpenDoc()" />
    <menuitem value="Close" onclick="CloseDoc()" />
  </popup>
</menu>

So…if JSON just the data representation part of things, how does it work similarly to Ajax?

Now we’re getting into the Web Services side of things. The quick answer: When you dynamically create <script> tags on a page, the JavaScript source is executed immediately. Now, as most experimental web developers may well know, you can reference remote JavaScript source in a <script> tag. Which means….if you dynamically create a script tag that references a source on another domain, and that source outputs JSON, you are as good as gold!

Here’s the step by step: (I use a JavaScript Object I found over at Dan Theurer’s Blog for the dynamic adding of script elements…it helps avoid duplicate script tags).

First, lets make the remote file that outputs JSON. (obviously, most cases will have the data dynamically generated…but I’ll use a static example as the generation of this data is trivial)

file: remote_file.php

< ?php
echo 'bork({"Image": { "Width":500, "Height":250, "Title":"Giant Cow", "Thumbnail":{"Url":"http://someurl.com/image/1234", "Height": 75, "Width": 150}}});';
?>

Here’s the html file we want the user to see/interact with:

file: client.html

<html>
<head><title>Test</title></head>
<script src="js/jsr_class.js" type="text/javascript"></script>
<script type="text/javascript">
function addScript()
{
  var obj=new JSONscriptRequest('http://someurl.com/remote_file.php');      
  obj.buildScriptTag(); // Build the script tag      
  obj.addScriptTag(); // Execute (add) the script tag
}//end addScript

function bork(data)
{
  var text='';

  if(data==null)
    alert('error');
  else
  {
    text='Image Title: ' + data.Image.Title + '<br />';
    text+='Width: ' + data.Image.Width + '<br />';
    text+='Height: ' + data.Image.Height + '<br />';
    text+='Thumbnail Data: ' + data.Image.Thumbnail.Url;
    text+=' (' + data.Image.Thumbnail.Width + 'x' + data.Image.Thumbnail.Height + ')<br />';
  }
  document.getElementById('output').innerHTML=text;
}//end bork
</script>
<body>
<a href="#" onClick="addScript(); return false;">Click to Get Stuff</a>
<div id="output"></div>
</body>
</html>

Thats all there is to it! Simple and slick.

MasterWish Enters the Web 2.0 World

MasterWish has been my labor of love for the past 6 months. The site – create by Zachary Tirrell, Jon Emmons, and myself – was opened to the public (in beta mode) in the middle of September.

Over the past month, we’ve been pretty excited about the whole Web 2.0 craze. The initial release was fairly solid but it lacked a few key elements to make it a 2.0 application. The three of us have wanted to bring MasterWish fully into the Web 2.0 world, so with a great deal of planning and even more coding, I am comfortable to say that MasterWish is now a fairly solid Web 2.0 application.

MasterWish has:

  • Folksonomy Features (tagging)
  • Easy item adds via a Favelet
  • Ajax for quick and easy assignments of items to lists, buddies to groups, buddies to your buddy list, copying items from other people, etc.
  • Buddies/Contacts
  • Group-Level access to Categorized Wish Lists
  • Fine-grained access control on your user information (so you can distribute information to people on a case by case basis). Here are some things you can distribute to other users:
    • Real Name
    • Address
    • E-mail
    • Many clothing sizes (shirt, bra, inseam, ring, head, etc)
    • Color Preference
    • etc.

Currently we are working on a very sweet feature to allow for collaborative lists. This will make wedding registries a LOT easier and my office at Plymouth State (which currently uses MasterWish for book orders) will be able to create an office wishlist and allow multiple users to contribute.

Christmas is coming around the corner, so if you haven’t checked it out for your wishlist needs, you should do so. You definately won’t regret it…and your family will thank you for it!

Windows Live

I just read an article over at Slashdot about Windows Live. It seems that Microsoft has decided to attempt to clone Google/ig, while currently Microsoft’s “Windows Live” is simply a mimic, they promise to have much more.

What’s Google/ig? Its a drag and drop portal-like web app that aggregates rss feeds and some handy tools; like the weather, movie reviews, word of the day, etc. Google/ig is simplistic. Its sexy. Its Ajax heavy (which isn’t a bad thing). I’ve been using Google/ig since they released it to the public and have been thoroughly impressed. Once again Google has set the bar high enough that Microsoft has taken notice and is attempting to duplicate….and they are doing it well.

Whats sexy about Windows Live?

  • Its Free
  • Its Simplistic
  • Its using a crap ton of AJAX
  • Windows Live supposedly expects to have an online Microsoft Office Suite that will be paid for by using ads rather than money from my wallet (sounds like Writely)
  • Check out this article at TechCrunch.com for more stuff that is planned.

But in addition to all that, it seems Microsoft has adopted the Web 2.0 method of using a perpetual beta. Think about it. When was the last time that happened from Microsoft? Oh, and along with the public beta release, they also have a happy-go-lucky communication with end users. Right now I’m looking at the Windows Live site with Flock and see the following at the top of the page:

Firefox Users
Firefox support is coming soon. Please be patient :-)

Smiley face and all. Seems more personal. Seems more enticing. Makes Windows Live seem to have promise. Alright, so its just a smiley face and I may be jumping to conclusions…but I highly doubt that even Microsoft can fight the Web 2.0 and its heavy social aspects and its community driven contributions. Is Microsoft conforming? We can only hope.

Well…I can see a major drawback.

  • It uses the .NET passport. Major suck.

In closing, while Windows Live looks nifty and has some pretty cool stuff, I’m loyal to Google and will remain an avid Google/ig user until Windows Live does something that actually wows me and makes me crap my pants.