in my experienceSocial aggregation UIs.
December 4, 2009 2:19 PM
As noted by John Gruber at Daring Fireball, the simplicity of a Twitter post opens up a lot of UI opportunities. As a result of that and available APIs, we are seeing more and more Twitter clients (I have four on my iPhone), but beyond that, we are seeing the start of the next logical step, convergence.
Socialite and Raindrop are the two best examples that I know. These are applications that aggregate your social footprint on the internet and attempt to wrap some meaningful UI around it all. Raindrop is still in early dev and requires you to be a bit savvy if you want to use it, but Socialite is (Mac only and) immediately available and is quick to set up, so give it a try.
Something worth looking at when using a variety of Twitter apps and these convergence apps, is how the designer has chosen to organize and present everything. If you boil things down a bit, a tweet, blog entry, Facebook update, Flickr post, rss feed and email, all have the same basic parts...
- The person who sent it (which includes a way to reply, such as an email address or @twitter account)
- The content.
- A title/subject/name.
- Some other bits of data, such as time/date, category names or tags, etc
With such a simple set of elements, there is a ton of opportunity to design a look and feel around them. The Raindrop folks have been sharing their design ideas on Flickr and you can see they have been exploring many ideas. It's not a surprise to see a 3 pane UI like you have in Outlook, Mail.app and NetNewsWire.
Socialite has completely Mac-ified that experience, and while some folks think the UI is just too intense, I think it's done elegantly and sensibly. You can see though that there is a lot you can do in the app, especially on the right side of each entry. At times there are 5 icons and one of them has a menu with 15 actions you can take. But overall, the UI is based on a use case you already understand, email.
Back to Twitter clients, compare something like Tweetdeck (which is entirely consistent from iPhone to its Air counterpart) to something like Tweetie 2. The base philosophy of these two clients are very different, but they use the same source material. As Raindrop continues to develop, it will be interesting to see if they can find a different but equally (or more!) usable format than you find in Socialite.
For a good overview on Socialite, check out Mashable's article from last week.
My Flash app: Part 2
December 1, 2003 3:09 AM
This is the first beta of my 'Learning Flash ActionScripting' project. As mentioned before, the purpose is to learn how Flash can be used from thru programmatic interfaces to make applications and do bare minimum work on the Flash stage. In particular this project uses the XML() object, event listeners and employs built-in components. The subject of the application is Edgar Lee Masters collection of poems titled "Spoon River Anthology" first published in 1916.
The Flash TextArea component doesn't support 'condenseWhite.'
November 19, 2003 4:58 AM
As of this writing, and as far as I know, in the Flash MX 2004 TextArea component, Macromedia missed an important detail when they created the TextArea component properties. You can say that the text area can be formatted by HTML, but that HTML formatting inherits the whitespace formatting as though a supersetted 'pre' tag was present. It makes for ugliness, and requires ugly workarounds (AFAIK). I sent email to the author of a good article that mentions this issue. In the article he said...
Now, a quick note on ignoreWhite: this normally excludes all spaces, linebreaks and carriage-returns from being counted when our XML is brought in to Flash (parsed), however I must admit I can't get it to work in my example or the Macromedia example I looked at earlier - you can see this for yourself by inserting a carriage return after one of the opening tags and then viewing the results in Flash - if anyone knows why this happens then please email me so I can amend this tutorial. I've left it in for the time being :]I've been playing around with this, and have a few notes. First, condenseWhite would probably be the property to use/set as that is what is available in a dynamic text box (as opposed to ignoreWhite).
Unfortunately, it looks as though Macromedia did not implement that property in the TextArea component (and because components are compiled, you can't add that property support). If you remove all white space from the original xml doc (and you still have to use ignoreWhite while loading the XML) you can fix some of the display weirdness. That's a less than optimal solution though.
I may have to figure out how to write my own component, but that looks like it's out of my league right now.
<update when="November 22, 2003">
I wrote a function that deals with this problem...
// This function kills any characters in the passed in string
// that are considered to be white space. White space is defined
// as anything *below* ASCII/Unicode character code 32.
// We want code 32 because that's a space, and we want words separated, right?
function killWhiteSpace(theData) {
var myNewString:String = '';
var j:Number;
for(j = 0; j < theData.length; j++) {
if(theData.charCodeAt(j) > 31) {
myNewString += theData.charAt(j);
}
}
return myNewString;
}
Use this function before you place your HTML into a TextArea component.
</update>
Starting over.
November 18, 2003 4:14 AM
When you decide to learn a new skill, and set your mind too it, and apply your free time to this new pursuit, it can be discouraging to find out that there is WAY TOO MUCH to learn.
Even with my JavaScript experience, and experience using graphics applications (eg, Photoshop and Illustrator), the Flash learning curve is relatively steep (for me), and that's mostly due to a few things...
- Breaking Standards
- Due to it's heritage, Flash sometimes departs from the ECMA spec to maintain backwards compatibility with old versions of Flash. That just plain sucks and requires memorization of these rules exceptions (all languages have these, but making an exception to support old players is annoying).
Also, I'm very used to the window, document and frames objects in JavaScript and need to map these to different names in the Flash paradigm (in my mind, I've assigned frames to levels; see below). Also, you need to accept the underscore notation used in Flash for built in properties in built in objects (ie, a movie clip's location on the "x" axis is read from movieClipObject._x).
- The timeline
- I have already complained about the timeline, but it's worth listing out here. This is one of those times when the metaphor is getting in the way and needs to be jettisoned.
- Levels
- "Levels are a stack of independent timelines that are movies (SWF) stored outside the main movie, and brought in with the loadmovie action." This is a pretty new concept to me. I'm very used to assembling a page from many small pieces (loosely joined?) and getting a cohesive result, but the idea of a document stack is something new to learn.
- Object Oriented Programming (OOP)
- JavaScript is object oriented, but in a loose way, and you can go a long way into your career without doing any proper object oriented coding in that language. When you move over to ActionScript 2.0, you really need to get on the OOP bus. This is mostly due to the fact that the flash environment is more readily disposed to OOP than web page authoring. This is going to be a good thing for me to learn.
My flash app: Part 1
November 14, 2003 10:44 AM
Philter's Flash/XML Tutorial was instrumental in getting me past the first bump in the ActionScript/XML learning curve. It's really not that hard at all, but the weirdo ways of dealing with things like
symbol identifiers and addressing them has been a stumbling block. Getting past that and into the same-but-differently-named event handlers is going to be fun.
Right now, my current function for exporting and manipulating the XML doc looks like this...
menuXml = new XML();
menuXml.ignoreWhite = true;
menuXml.onLoad = function() {
menuItem = this.firstChild.childNodes;
for (var i=0; i<menuItem.length; i++) {
item = _root.attachMovie("itemClip", "itemClip" + i, i);
item._x = 0;
item._y = 21*i;
item.itemLabel.text = menuItem[i].attributes.title;
}
item2 = _root.attachMovie("poemDisplay", "poemDisplayInstance", 10);
item2._x = 125;
item2._y = 0;
item2.poem.text = menuItem[0].firstChild;
}
menuXml.load("spoon_river_anthology.xml");
I know, it's not very abstract. Also, I need to work on changing the content of the poem field based on which poen title has been clicked (which means I'll be using the onRelease() handler (instead of onmouseup() from my familiar worl of JavaScript). After that, the XML will get more attention because I have to add in the poem references (as I meantioned the other day, many poems in my selected body of work reference each other and better inform the user on the relatinships involved). That will manifest as another menu of sorts, and I'll need to use a Flash component to do that (another good lesson). Also, the poem field needs to be scrollable and that's another good lesson.
Here's a snippet of the (non DTD nor schema based) XML doc I've created so far for the project...
<?xml version="1.0"?> <etext title="Spoon Riven Anthology" author="Edgar Lee Masters" published="1916" isbn="1-58734-032-1"> <poem title="The Hill"> Where are Elmer, Herman, Bert, Tom and Charley, The weak of will, the strong of arm, the clown, the boozer, the fighter? All, all are sleeping on the hill. One passed in a fever, One was burned in a mine, One was killed in a brawl, One died in a jail, One fell from a bridge toiling for children and wife- All, all are sleeping, sleeping, sleeping on the hill. Where are Ella, Kate, Mag, Lizzie and Edith, The tender heart, the simple soul, the loud, the proud, the happy one?-- All, all are sleeping on the hill. One died in shameful child-birth, One of a thwarted love, One at the hands of a brute in a brothel, One of a broken pride, in the search for heart's desire; One after life in far-away London and Paris Was brought to her little space by Ella and Kate and Mag-- All, all are sleeping, sleeping, sleeping on the hill. Where are Uncle Isaac and Aunt Emily, And old Towny Kincaid and Sevigne Houghton, And Major Walker who had talked With venerable men of the revolution?-- All, all are sleeping on the hill. They brought them dead sons from the war, And daughters whom life had crushed, And their children fatherless, crying-- All, all are sleeping, sleeping, sleeping on the hill. Where is Old Fiddler Jones Who played with life all his ninety years, Braving the sleet with bared breast, Drinking, rioting, thinking neither of wife nor kin, Nor gold, nor love, nor heaven? Lo! he babbles of the fish-frys of long ago, Of the horse-races of long ago at Clary's Grove, Of what Abe Lincoln said One time at Springfield. </poem> <poem title="Hod Putt"> HERE I lie close to the grave Of Old Bill Piersol, Who grew rich trading with the Indians, and who Afterwards took the Bankrupt Law And emerged from it richer than ever Myself grown tired of toil and poverty And beholding how Old Bill and other grew in wealth Robbed a traveler one Night near Proctor's Grove, Killing him unwittingly while doing so, For which I was tried and hanged. That was my way of going into bankruptcy. Now we who took the bankrupt law in our respective ways Sleep peacefully side by side. </poem> <poem title="Ollie McGee"> Have you seen walking through the village A Man with downcast eyes and haggard face? That is my husband who, by secret cruelty Never to be told, robbed me of my youth and my beauty; Till at last, wrinkled and with yellow teeth, And with broken pride and shameful humility, I sank into the grave. But what think you gnaws at my husband's heart? The face of what I was, the face of what he made me! These are driving him to the place where I lie. In death, therefore, I am avenged. </poem> </etext>I don't even want to think about the actual UI of this thing yet. I should work on something consitent with the theme of the poems, but I'm probably going to be lazy and use Macromedia's "Halo" look n' feel.
More on learning Flash.
November 11, 2003 4:11 AM
Please forgive the comment recycling here, but this Leapster thing reaffirms my decision to pick up Flash as a web development skill...
I'm picking it up for the application development possibilities (as opposed to the design possibilities, which are imho, anemic).Now, back to the Leapster; the opportunities and possibilities offered by that sort of product are two fold for the web developer who cares about usability and interaction design. Learning materials are all about interaction design and information architectures that are so well designed that they are transparent. "Leveraging" that thru development skills is good fun work that pays well. Too bad much of my recent work has been of the Systems Administration persuasion.I know javascript and because of that, I figured learning ActionScript would be easier. I've been doing pretty well so far, but have indeed encountered difficulties in wrapping my head around the way Flash does things. The timeline metapohre doesn't translate well to non-movie Flash projects.
More daunting though has been learning truer object oriented programming ("truer" for me equals using classes, methods and instances). This is a programming problem and not a Flash problem, so I can't fault the application for that. Getting on board with that will be helpful back in the Javascript world where I've never really done anything as fully abstracted as a class.
As a learning project, I'm working on an application based on Edgar Lee Masters' Spoon River Anthology which is a collection of interleaved poems about the townspeople of a small Illinois town, where everyone is dead. Each (relatively short) poem is kind of an epitaph and they usually make a reference or two to some other person from the town. You can then go look up their poem and read it to learn more about that person and their relationship to the referring poem/person. It's an interesting, if morbid, concept.
(For the record, I have an English degree and wrote a paper in college about Masters, which should explain why I'm using his anthology as my subject)
The idea of the application is to make reading the anthology easier, and the relationship matrix understandable, by showing the poem (with a dynamic text box, that scrolls if neccessarry) and a references box which lists who is related to the current poem. Also, there will be a full list of the people/poems to read so you can read it in linear style if you want.
I'm representing the anthology as an XML doc so I can learn the XML() object and it's methods.
I also have to do the design, but that's sort of ancillary to the main point of learning the system internals. It should be interesting.
Learning Flash.
November 4, 2003 9:36 AM
I decided to learn Flash recently for various reasons...
- It's here to stay.
- Knowing it helps my career.
- We have use for it in my department (see number 2 above)
- I know JavaScript, so picking up ActionScript won't be hard.
- I know Illustrator, so picking up the Flash drawing tools won't be hard.
- DHTML can be a real whore sometimes.
I have to hand it to Macromedia for one thing though, their website has tons of material available for learning Flash. There's lots of sample files, articles, downloads, and manuals. Getting the PDF of the manual is free and easy, which I think is a smart thing for Macromedia to do (sort of a baiting tactic, but a warezing risk to be sure). All of that material is of course Macromedia centric (this thingy works great with this other Macromedia thingy).
Anyway, I have been looking for good resources out there and have bumped into the advert purgatory of FlashKit.com and the Moock's site. Any suggestions on where else to visit will be VERY welcome.
What do you think of your firstChild?
October 3, 2003 10:02 AM
I've discovered an inconsistancy and/or a bug in Mozilla's DOM implementation. Consider this simple unassuming HTML table which has it's id set to "ourTable"...
| _Row_1_Cell_1_ | _Row_1_Cell_2_ | _Row_1_Cell_3_ |
| _Row_2_Cell_1_ | _Row_2_Cell_2_ | _Row_2_Cell_3_ |
| _Row_3_Cell_1_ | _Row_3_Cell_2_ | _Row_3_Cell_3_ |
The source of that table isn't anything weird and certainly isn't malformed HTML. Here's what the source of that table looks like...
<table border="1" width="50%" cellspacing="1" cellpadding="5" id="ourTable"> <tr id="_Row_1_"> <td id="_Row_1_Cell_1_">_Row_1_Cell_1_</td> <td id="_Row_1_Cell_2_">_Row_1_Cell_2_</td> <td id="_Row_1_Cell_3_">_Row_1_Cell_3_</td> </tr> <tr id="_Row_2_"> <td id="_Row_2_Cell_1_">_Row_2_Cell_1_</td> <td id="_Row_2_Cell_2_">_Row_2_Cell_2_</td> <td id="_Row_2_Cell_3_">_Row_2_Cell_3_</td> </tr> <tr id="_Row_3_"> <td id="_Row_3_Cell_1_">_Row_3_Cell_1_</td> <td id="_Row_3_Cell_2_">_Row_3_Cell_2_</td> <td id="_Row_3_Cell_3_">_Row_3_Cell_3_</td> </tr> </table>Now, using some JavaScript, let's start alerting things so we can see where Mozilla goes wrong (well, it does something different than Safari and Internet Explorer and I think it's incorrect). what we are going to do is alert the firstChild of the first row of the table. We do that in JavaScript by saying...
function whatIsThis(item) {And then we call that function and pass in the name of the table we want to interrogate. In Mozilla you will get an alert box that says "[Object TEXT]" where as in Safari and Internet Explorer (I tested on my Win2k box for IE) you get "[Object TD]" and "[Object]" respectively.
var myTable = document.getElementById("ourTable");
alert(myTable.rows[0].firstChild);
}
If you go back up to the source of the table, and look at the firstChild of the first row, you very clearly see that there's a table cell there, and not the text contents of a random container. And for the record, accessing the table row thru getElementById and asking for it's firstChild returns the same result everywhere.
"Why is this important?" you ask. Well, if you want to use the DOM tools available to you for tracing around the DOM without knowing the ID's of everything, you can't do that with firstChilsd in Mozilla. That's bad. In my case, in a web application I'm working on, I have some HTML being written by a component in a very standardized way, and using ID's in everything is for more cumbersome than just grabbing the stuff that's in the firstChild of the firstChild of a table row. When we get "[Object TEXT]" back from Mozilla, there are no more firstChild[ren] available to us.
"So?" you ask, "why not use the cells[] array to trace into those table cells?" Well, the cell[] array is broken in Safari, and I'm trying to NOT write hopelessly forked (fucked?) JavaScript code for the sake of maintainability and editability by those who are more JavaScript challeneged than I am.
IMHO, Mozilla is obviously broken here.
Understanding the Eolas plugin patent.
September 12, 2003 10:26 AM
The subject of this post is a bit misleading, because I don't exactly understand the Eolas patent. This post is an attempt at grokking the situation.
First, Eolas claims that Microsoft "had stolen browser technology relating to plug-ins." this is, of course, a pretty vague statement. Then consider Microsoft's citation of CNN as being "an example of a site that uses Macromedia Flash--a technology many consider particularly vulnerable to the patent's claims--in a non-infringing way."
Is it the browser implementation that infringes, or the web site implementation that infringes? I'm not sure, but the Eolas patent is described by Eolas thusly...
First demonstrated publicly in 1993, this invention lifted the glass for the first time from the hypermedia browser, enabling Web browsers for the first time to act as platforms for fully-interactive embedded applications. The patent covers Web browsers that support such currently popular technologies as ActiveX components, Java applets, and Navigator plug-ins. Eolas' advanced browser technology makes possible rich interactive online experiences for over 500 million Web users, worldwide.In the patent abstract, the following line indicates to me (a non-lawyer to be sure) that the devil is in the web site implementation...
The program object is embedded into a hypermedia document much like data objects.Now, back to the CNN implementation and the way Microsoft suggests that web developers can avoid infringing code. It goes something like this...
One such option would move the data to the Web page itself, rather than pulling it from an external source.If you haven't read the description of the CNN method, then go read it now... Notice any similarities? I do, and it's a very annoying process, that basically makes the data load external, but not external at the same time.
Anyone else have a clearer idea of what the deal is here?
My HTML isn't valid, oh well.
January 16, 2003 11:02 AM
Someone ran my site thru the W3C validator yesterday, and if this were grade school, I'd get an F on my report. I'm not really too upset about it for a few reasons...
- This isn't grade school
- This pages renders as intended in Mac IE 5.x
- This pages renders mostly as intended in Mac Chimera
- This pages renders as intended in PC IE 5.x thru 6.x
- This pages renders mostly as intended in Mozilla 1.0
- This pages renders mostly as intended in Opera 5 and 6
- This pages renders as mostly as intended in Safari
- This page is available as RSS 2.0, and more people get their IMX news from that source anyway
- Perfectly validating HTML doesn't really get me that much
- Rendering as intended is more important than validating for what this site is intended to do (ie, NOT be an XML/XSLT based web app)