October 2008

GUI Design in AJAX – Keyboard Implementation Specifics

recently: current upload
previously: initial idea, implementation experiments, early progress

I’ve been having some issues with browsers other than Firefox, and I think most of them were stemming from my use of console.log for debugging in Firebug. David Nolen (the course instructor) posted a solution to this issue, and all past projects should now be working. I also fixed a few other Safari-specific issues in the keyboard project.

I decided to use Git, a popular version control system, for the continuation of the project. This will allow me to keep track of changes and progress in a sane and flexible way. I’m also going to use GitHub, a collaborative code hosting service, to make it easier for others to comment on and contribute to the project as it moves forward. You can visit the GitHub repository of the project here: http://github.com/lehrblogger/keyboard-portfolio.

I began to explore the powerful Flickr API, and plan to use it as the source of the photos for the portfolio. Provided that it proves to be fast enough, it should simplify image uploading, facilitate various file sizes, and create a unified place for comments. Image names and captions on Flickr will also be displayed on the website. Image categories and projects will be tracked using tags. (Each category and tag will probably have a ’slug’ in the database (more on that later), and the tag should use that slug.) I’ve used ‘category2′, project1′ and ‘image1′ in this example, which just pulls a single image from Flickr using the API – http://lehrblogger.com/nyu/classes/fall08/ajax/hw6/part2.

I started to think in detail with David about how I was going to implement various parts of the site, and I set up Apache and a MySQL database on my local machine to facilitate testing. All of the page content will be managed through interaction with the database (possibly through a content management page). Saving this page will automatically generate new Javascript and HTML for search engines to crawl and index.

Each standard keyboard key will always have an entry in the database, and this won’t be changeable from the CMS (content management system). Each key will have one of four possible modes – category, project, blank, and hidden – and other available table entries will depend on which type of key. Most punctuation keys will be hidden, but I will provide support for them in case I need the space for additional content later. Blank keys will have no other data associated with them, and will likely be greyed out on the site. Project keys will have the most associated data – the project will need a title, descriptive text (with limited HTML formatting), and some number of associated Flickr photos. Category keys will have a category name but no other content.

Note that there will be no difference in how each of the latter two types of keys behave. At the second level of zoom, the focused key and the surrounding keys will all be visible. At the third level of zoom, only the primary key will be visible. At the fourth level of zoom, for viewing the images, the interaction is handled through the number keys (1,2,3,4,5,6,7,8,9,0 – for up to ten images), and these won’t do anything on keys without images. A user can press a project key from the top level, but that user would need to press it again to be able to read it.

The automatic generation of the HTML and Javascript will be a challenge to get working, but they will make it much easier to manage the site. It is likely that the best way to get the text resizing to work will be to replace that text with an identical-looking image, resize the image, and then replace it with text at the new zoom level (or not, for smaller zoom levels). Those images would need to be automatically generated from the text saved to the database via the CMS, and (with David’s guidance) I’ve started to look into using Cairo for doing this on a server.

That might be the trickiest part of this whole thing, but if everything works well together it will be really cool. I’m not quite sure that I’ve been able to fully convey with clarity my idea of melding content and interface, and I’m excited to have a working example.

AJAX
ITP
assignments

Redslist – An Introduction to the Project

All first-year students are required to take Red Burns’ class Applications of Interactive Technologies, and it consists of weekly speakers (such as artist Vito Acconci, activist blogger Ethan Zuckerman, and Microsoft Research group manager Lili Cheng) and student presentations on the previous week’s speaker. Two groups of approximately five students present every week, and those groups may also combine and present together.

The speaker on which my group and I presented was Craig Newmark, of Craigslist. After much discussion and planning, all ten of us worked together to organize a face-to-face market: we encouraged students to bring in items to trade, organized them by category, worked in real time to coordinate exchanges between students, and moderated a discussion on the experience. The activity was very successful, and afterwards we presented Redslist, the beginnings of an idea for an ITP version of Craigslist. A few students (both from within the original group (Thomas Robertson and myself) and not (John Dimatos, Cameron Cundiff)) met again to discuss how to proceed with the project (either inside or outside of class projects), and we wrote the following statement:

Redslist began as a response to Craig Newmark’s presentation in Red’s Applications class. We envision it as a set of tools for presenting and accessing ITP student content such as event details, items, services, and expertise – i.e. the sort of content we currently interact with on the listserve and ITPedia. Redslist would be unique in the way we could post and retrieve this information; an open platform for development, an API, and some core applications would make it possible for us all to develop our own way of interacting with the information on Redslist.

We’ve come up with a few ideas for applications so far in addition to the existing listserve and wiki: an interface for chat and text messaging to and from Redslist, using XMPP; a way to tag and forward listserve messages to Redslist for easier access; and using the displays at ITP to showcase recent activity on Redslist.

So far we have a group of several first and second years working on this, and we invite the rest of you to check it out. It could take off or not, but we know that ITP offers a unique chance to try something ambitious and different. So email us or come to the next meeting, and we’ll give it a shot.

We are planning another meeting for later this week, and I will make subsequent posts as the project progresses.

ITP
projects
web ideas

Web Idea – ISP Customer Mapping/Coordination

I know a lot of people who are unhappy with their ISP (Internet Service Provider) – connections are often slow and unreliable, customer service is abysmal, and sometimes there are even explicit usage restrictions. Even worse, many areas are dominated by a single companies with local monopolies, so the consumer doesn’t even have a choice. Finally, there are many rural areas for which no one has even bothered to build broadband access, raising issues relating to the ‘digital divide‘.

My idea consists of two main parts: first, a map that shows which ISP’s are providing access to which areas of the country/world; second, discussion boards for the users of a specific ISP in a specific region. These would facilitate self-organization of users who are victims of a particular location-specific policy of a particular ISP, allowing them to assert themselves to that ISP’s customer service not as single individuals, but instead as important customer groups with the power to organize a boycott or take some other action.

(In writing this, I felt I was villifying ISP’s more than I should be. I don’t blame them for acting as they are as profit-maximizing entities, but I see it as a problem that the current arrangement discourages competition and creates a sub-optimal equilibrium. As I recall, capitalism works most efficiently when everyone has perfect information.)

(For the first few of these, at least, I think I’m going to link back to the introductory web idea post.)

web ideas

Web Idea – An Introduction

During conversations with friends, I regularly have ideas for websites, services, or other technologies. These conversations happen in person, over email, on instant messenger, via text message. I realized a few months ago that I might want to be able to organize them all into one place, so I began annotating them with the tag “< web idea >” to facilitate later searching. It gives me comfort that they are not lost to the black hole of my hard drive, but does not actually give me any more time to implement them.

From now on, I’ll try to post the ideas here with a ‘web idea’ category that will replace the old ‘idea’ category. Also, I’ll try to go through my old ideas and post the ones that are worth typing up. You can subscribe to a category specific RSS feed here – http://lehrblogger.com/wp-rss2.php?cat=3

Ideas, I have found, are relatively commonplace; the real work is in their execution. Sometimes people guard their ideas, keeping them secret out of fear that they will be taken and implemented by someone else first. None of that here. Please, take these ideas, and please, bring them to life. I have more of them than I’ll ever have time for, and even if I were to eventually have time for all of them, they would have long-since lost their relevance. If you find yourself with sufficient knowledge, time, and interest to start work on one of these, I would love to talk about it and hear what you are thinking about what I was thinking.

web ideas

Intro to Computational Media – Midterm Part 2

For my midterm project, I started to combine the work with Twitter retweets from last class with a map/globe-based visualization. Since many Twitter users have geographic information associated with their accounts (made particularly easily accessible through the TwitterVision API), I wanted to explore mapping certain conversation patterns on Twitter to their actual locations. My intention was to show how retweets create links between different geographic locations over time, perhaps even forming chains or trees. I considered using a two dimensional map, but I thought the globe was much better for conveying the connectedness of the world.

NASA has made their World Wind globe available as an open source project, and it functions much like the more common Google Earth. After a fair amount of struggle (and assistance from Jorge), I got it to work with Scala in Eclipse. I then integrated my Jumping Tweets code from the previous week, and was ultimately successful in displaying these as Annotations at (random) locations on the map, with Polylines between a specific location (arbitrarily set to NYC) and each tweet’s location. For next week, I hope to get the actual location data, improve the line quality, and add other options.

Since I did not use Processing at all for this project (instead relying on World Wind for the graphical interface), I was not able to export a embeddable Java Applet. Instead, a video I screen-captured is embedded below. I have also posted the Scala files, and feel free to contact me if you have any questions about how I got this working in Eclipse.


ICM Midterm – Jumping Tweets from me on Vimeo (you can watch a high definition version there)

(Sorry for the graphic strangeness at the beginning of the video – I think that happened during the import to FCP, and I’m not sure how to fix it (or if it’s worth the trouble).)

Another post is coming soon about my plans for continuing this for my final project.

ICM
ITP
assignments