Building Better Web Apps in Cappuccino

Believe it or not, we have several applications built using Excel and Excel macros that employees at SPARTA use. So each time we update the Excel file, we have to send it out to the users manually. There are issues with these apps running in Excel 2007 that we haven’t fixed yet, so whenever someone inadvertently upgrades, we have to get them to downgrade to Excel 2003.

So for many reasons, we’re replacing these Excel-based apps with a web-based system. As is typical with SPARTA, we’re the exception to every rule, so no Commercial of the Shelf (COTS) system really did everything we needed it to do. So now it falls on us to develop the web application. One decision we’ve made was to make the web version similar to the Excel-based versions to reduce the learning curve. Then as users get used to the web apps, we’ll gradually make changes and redesigns as we find necessary.

One of the apps is mostly just a report viewer, so it will be built using a traditional XHTML/JavaScript interface to mimic the Excel functionality. Of course, we will be offering methods to export the data so the users can use the data in a way they’re more comfortable, but we’ll take care of all the calculations and data persistence on the web server.

The second web app, of which I am in charge, is mostly just a data-capture application. It needs to do a lot more than the reporting app, so we decided to go down the path of creating a full-on web application. For that, we have decided on developing the app in Cappuccino.

Cappuccino is a JavaScript-based framework for developing web applications. For anyone familiar with programming for the Mac or iPhone, it’s touted as “Cocoa for the web”. Just like how Cocoa is built on the Objective-C language, Cappuccino uses its own Objective-J language. Where Objective-C is a superset of the C language, Objective-J is a superset of JavaScript. Which means even when coding in Objective-J, you still have access to all the regular built-in JavaScript functionality, much like C functionality is available to Objective-C applications.

In fact, the Cappuccino team has already ported many of the frameworks available in Cocoa to Cappuccino. So really, any seasoned Cocoa developer could easily create a Cappuccino application with minimal learning required. The Cappuccino team even points out that one iPhone developer was able to port a game he created for the iPhone from Cocoa to Cappuccino in just one hour.

They’ve also created an impressive web application, written entirely in Cappuccino and Objective-J, that is essentially a web-based version of PowerPoint called 280 Slides.

How is Cappuccino any different than any of the other JavaScript libraries like jQuery, MooTools, Script.aculo.us, etc? Well, they all use the same basic fundamental design: you build your site using HTML and CSS, then you plug in the library where necessary. Cappuccino apps require no knowledge of HTML or CSS; it builds the HTML and CSS for you in your application. So you spend more time developing the application, and less time worrying about design or attaching your JavaScript to your HTML.

We’ve had a chance to test out and develop a few test applications in Cappuccino and I’ve been very impressed so far with the results. We’re finally moving ahead on these applications, so as I use Cappuccino and Objective-J, I will likely be posting up some thoughts and maybe some tutorials as I see fit.

Ridding the World of IE6

There is a concentrated effort in the web design community to push users to ditch IE6. Many, such as myself, display a disclaimer somewhere prominently on the website warning users that their web browser is out of date. Some are even taking it a step further and no longer catering to or making concessions for IE6 altogether (depending on the target audience). There are many aspects of IE6 that are now hindering progress in web design, and many designers are taking a hard line and saying, “still running IE6? Well tough”.

Heck, some of the top websites in Norway have begun informing their users it’s best to ditch IE6. Imagine if USA Today, the New York Times, eBay and Craigslist all began to prominently display messages to their IE6 users asking them to upgrade? The impact would be huge!

The amazing thing to me is IE6 is the only “old” browser that users are still holding on to. Anyone using Firefox or Safari or Chrome or Opera are almost always up to date. For instance, Firefox users to our intranet site at SPARTA account for 16% of the population. Of that 16%, 86% of them are using Firefox 3.

Compare that to 52% of IE users still using IE6.

The general consensus in the community is that IE users aren’t necessarily complacent, nor are they consciously resisting change, they just don’t know any better. They see the blue “e” and know, “that’s the internet”. It works for them just fine, it’s all they need; and that’s all well and good, but they’re not going to upgrade unless its done for them or they’re forced to. They may not realize they’re more vulnerable to security threats, or attacks, or that Microsoft has abandoned their browser.

I’ve come to the point now that most websites I develop work perfectly in Firefox and all other standards-compliant browsers, but that I have to make changes to them in order to get them to work correctly in IE6. I know several users who have resisted using Firefox (or other more standards-compliant browsers) because many of the websites they frequent “don’t work in Firefox”. I think it’s time to flip it around and get people to stop using IE6 because their websites “don’t work in IE6.”

Until IE6 users start having negative experiences browsing the web, or Microsoft sends out IE8 as a Critical Update to XP users, they aren’t going to know there’s anything wrong with their browser and they won’t do anything about it. Hence why developers (myself included) are finally getting fed up and no longer making concessions for IE6, and in fact are beginning to pester visitors to update their browsers.

A future without IE6 is a bright one, we just need to get there first.

Why I Hate Internet Explorer

Or at least just one of the many reasons.

Let’s take a look at some recent work I’ve been doing at SPARTA. We are implementing an internal web forum/message board. We are using JForum as the base because everything we do is already in Java. Not only just because it’s in Java, but it has added features like Single-Sign-On support so we can integrate it with our own Domain logins. Also, it has a fairly easy-to-customize template system.

So my primary task this week was to get JForum in place and integrate it with our common look and feel. Easy enough. Let’s see how the pages look in Firefox:
Picture 7.png

Not bad …

Now let’s check Safari:

Picture 8.png

Perfect …

How about IE?
Parallels Picture.png

Uh oh …

Off to D.C.

I get to go back to Washington, D.C. again. If you remember, I went back there in 2006 for the User Experience Week conferences. This time around, it’s strictly work-related.

I’ll be meeting with our Director of Strategic Planning to discuss the development of tools the company will use to track proposals made for projects. The tools we have out there now are sorely outdated (the last one was built over 7 years ago) and haven’t even been touched in years.

So, it’s time to make a trip out to D.C. and meet face-to-face to hash out the details. I’m leaving next Monday and coming back Thursday. Should be a fun-filled trip, heh.

Working Better

So back on Day 3 of UX Week, you may remember I talked about a session I attended called “Facilitating Collaboration“. It dealt with how to efficiently collaborate with coworkers, especially in a distributed environment such as the one in which I work now.

Well that session got me thinking about how I could apply those ideas to the ways I work. I have been thinking a lot lately about what I can do to improve my work efficiency. I’ve come up with a few changes and new ways of thinking about the work day.

Define the Work Day
If there is no defined line between work and personal time, then it’s hard to focus well on either. Without definition of either then while on personal time there’s never quite a disconnection from work, and while at work there’s never quite a disconnection from personal time. And so without that disconnection, it’s easy to just come and go from work to personal and back again without really thinking about it, and that just kills productivity because it’s hard to solely focus on the tasks at hand.

Only Work-Related IMs
IM (instant messaging) can be a very powerful collaboration and communication tool for those with whom collaboration is necessary. Instant access to a person can be key to collaborating and getting things done. However, there needs to be a separation between work IM and personal IM. It helps immensely to create a new screen name and only give out that screen name to co-workers and maybe a select few friends and family members. The point here is to keep non-work-related distractions down to a minimum, so discretion must be used when giving out the screen name.

Separate Logins for Work and Personal
To go along with the separate screen names, it also helps to create separate computer logins. In the work login, keeping the applications, documents, and settings to be work only, it will help to encourage productivity and minimize distraction. Mail is configured to only check work email, IM is set up to only connect to the work screen name, the applications list is configured with only work-related programs. The inverse is also true on the personal login, everything is configured for personal use.

Prioritize Tasks at Least Daily
One major productivity killer is not having a clear direction or focus. Creating a to-do list and prioritizing those tasks is key in defining a clear direction for the day. No more aimlessly browsing through emails or looking for work to do throughout the day.

Communicate with Coworkers Often
Working in a distributed environment makes it even more important to keep open communication with coworkers. There is no face-to-face communication in the office so it’s important to be active in keeping coworkers up to date in your own happenings and work, as they don’t really know what is going on if there is no communication. E-mail and IM are the obvious ways to communicate, as is the phone. But it’s also possible to communicate effectively using passive communications such as blogs and photo sharing sites like Flickr. It allows coworkers to know what’s going on in your world inside and outside of work.

Keep E-mail Under Control
E-mail can be great, but it can also be a curse. An e-mail thread involving several people can be going around, and immediately the e-mails can pile up. When the e-mails pile up like that, important messages could be easily lost in the fray. Deleting e-mails when they serve no value anymore, or filing the ones you would want to reference in the future will help greatly keep things under control.

Those are just a few of the changes I’ve made in order to essentially become more efficient and increase productivity. A lot of it may seem like common sense, and most of it is. Essentially the biggest thing for me to do is remove as many distractions as possible and focus on work when I’m working, and don’t think about it when I’m not working. I’m open to suggestions so if you think I’ve got the wrong idea or missed something, so just let me know in the comments.

Good to be Home

It’s great to be home. I slept for a solid 9 hours last night, after having been up nearly 22 hours. I’m still a little tired today, but I’m not doing anything so I can just take a nap later if I want.

Anyway, yesterday was pretty uneventful. Had a meeting at the SPARTA office in Rosslyn, VA in the morning that went very well. Steve and I got lunch and then he took me to the airport. I hung out in the airport for about 5 hours waiting for my flight (yes I was that early). I mostly just sat at the terminal listening to music while writing my previous two blog entries.

Got on the flight on time, but were slightly delayed. The captain said that “the Wind Gods are smiling on us today” meaning we wouldn’t have much of a headwind so we would make it to San Diego 45 minutes early. Except there was a problem with the luggage and we ended up taking off 35 minutes late, but we still landed in San Diego 5 minutes early. Not bad.

I spent the entire flight just watching TV. In case you haven’t heard about jetBlue, they offer 36 channels of DirecTV service at every seat, free of charge. So the entire flight I was watching The Simpsons, Seinfeld, Good Eats, the Chargers game, Las Vegas, Law & Order, and more Seinfeld and by the time Seinfeld ended, we were close to landing. Not once did I pull out my laptop or iPod, the TV was awesome.

So I landed, and my parents met me at the base of the escalators, which was nice. We got eventually got my baggage, which is an entirely different story. I’ll just say the baggage handlers at Lindbergh Field SUCK. We took my bags to the car and drove over to Terminal 1 to wait for my sister’s plane. She was an hour delayed so we got some food at the food court. She came in, and we all left, and I came home and talked to Brian for a bit before going to bed.

And that is that.

UX Week – Day 4

Well, today is the final day of UX Week. It’s been a very good, eye-opening experience for me all week and I’m actually a little disappointed it’s ending already. I’ve been able to learn a lot from all the speakers and the other attendees.

9:00AM-9:15AM — Introduction by Jesse James Garrett
Your standard-fare “Good Morning … It’s been a good week … here’s our next presenter” introduction. He gave us a few announcements but nothing major.

9:15AM-10:00AM — Designing “America by Air”
“America by Air” is a new exhibit currently being designed and built by the Smithsonian Institute to be put on display in the National Air and Space Museum. Barbara Brennan came in and gave us a speech about how the exhibits the Smithsonian Institute develops is all about “user experience” (which is how this ties into the conference). She gave us an overview of what the exhibit is and the processes involved in developing the displays. It takes several years to design and build an exhibit and this “America by Air” exhibit is still about a year from being unveiled. This was a rather interesting look at how user experience is a part of fields outside of the Web and software.

10:00AM-10:45AM — Communicating Concepts Through Comics
Now this was an interesting workshop as it took a drastically different approach to communicating concepts to customers and clients. Instead of the typical storyboard word document, he showed us how you could make a comic strip explaining the process a user might follow when using the potentially new product. He used an example from Yahoo! Local where a user wants to find restaurants in her area and can look at reviews. It very effectively expressed what a user can do with Yahoo! Local and I immediately could see how it would make make communicating a concept to a customer or client much easier and more engaging than say a 7 page-long Word document. He also had each of us draw a picture of the person sitting to our left, and he did that as a demonstration that anyone can draw. It doesn’t need to be life-like or even that good to get the point across. Everyone is an artist and there’s no need to be self-conscious of your abilities.

11:00AM-11:45AM — Information Visualization
This was another great presentation. In case you haven’t noticed yet, the common-theme for today’s conferences has been “visualizing concepts.” Michael Migurski demonstrated several of the projects he has worked on in the past and how visual representations of data make it very easy for you to figure out what is going on in the data you might be studying. Things like size and color play a very important role in quickly figuring out what’s going on. Again, I was able to learn a few new concepts and ideas when it comes to presenting data to the user and I could use what I’ve learned all throughout the presentations today and apply it to my future work.

11:45AM-12:45PM — Panel: Learning from Adaptive Path’s Mistakes
Much like the previous two days, we ended the sessions with a Q&A panel. Today it was comprised of people who have worked at or worked with Adaptive Path. This was basically a “lessons-learned” session in which those who have gone through the experiences and recognized their mistakes shared with us what they did wrong and what they could do better. They gave us all some insight about what to watch out for and how to stay out of trouble. But at the same time they did explain to us that in the digital world in which we live, making a mistake is easy and by that they mean there are few permanent ramifications from failing. So don’t be afraid to fail, it’s a part of life; just learn what you did wrong and don’t do it again.

And that effectively ended the sessions for the day, and the UX Week Conference for 2006 was over. After that last session, Steve and I went and got lunch at a sandwich place just down the street from the hotel in Dupont Circle. The food was pretty good and a good way to fill the time before we were supposed to be at the Garber facility. We got Steve’s car from the parking garage and headed down to Suitland, MD to go on the tour of the Garber facility.

UX Week – Day 3

Today was a better day than yesterday for me. I got up right away at 7:00, took a quick shower, and then Steve and I took off for the Hotel Palomar. Today we decided to take the Metro Rail instead of driving to the hotel because of our positive experience last night going to and from the game. So we hopped on the train in Rosslyn and went one exit to Foggy Bottom. From there we walked the 0.8 miles to the hotel, which only took about 10 minutes. I think this was a much better way of getting to the hotel than driving into DC and looking for a place to park. Plus, we got some good exercise today, heh.

8:00AM-8:45AM — Breakfast: What Can IIT Do For You?
IIT is the Illinois Institute of Technology located in Chicago. This was another breakfast provided by someone else and while we ate, the IIT rep explained to us the benefits of IIT and the courses and graduate programs they offer.

9:00AM-9:30AM — Introduction by Lane Becker
Lane Becker, along with Jesse James Garrett and Peter Merholz is one of the three founders of Adaptive Path, which is the consulting firm that is putting on this UX Week conference. Lane was joking about how he is the only Adaptive Path founder that has yet to coin a four-letter term that has been adopted quickly by the web community, and even in the mass media.

Jesse James Garrett gave us the introduction on Monday, and is fairly famous and very respected within the developer world. He is the one that first coined the term “AJAX“, which as a technology isn’t all that new, but the term “AJAX” has been quickly adopted throughout the web community in the last year or so. AJAX has been revolutionizing and vastly improving the way users interact with web applications. I’ll be going much more in-depth with that concept as I blog about Web 2.0 in a later blog.

I had already heard that it was Garrett who came up with the term “AJAX”, but I was surprised to hear about that Peter Merholz had coined the term “blog”. So this should give you a good idea of how important the people who founded and run Adaptive Path are to the web.

9:30AM-10:30AM — Designing the Next Generation of Web Applications
Jeffrey Veen gave an absolutely awesome presentation about how web applications are being developed. The common theme throughout his entire presentation was that applications should be developed to give the user more control of the data, and make it easier for that user to manage and manipulate that data. This is a very broad and vague explanation, one that I will go much more in-depth later in a separate blog. I will just tell you though that I left feeling inspired about developing my applications that much better, and to share with others all I’ve learned.

10:45AM-11:30AM — Facilitating Collaboration: Web Technologies That Work
So this one was about the tools and procedures the consultants at Adaptive Path use to collaborate on their work and how these tools will help you to be more productive. A range of tools were discussed, and also ideas of how to extend existing tools and technologies were suggested. I got some pretty good ideas of how to collaborate better, so I think from here on out, I should be able to be more productive and communicative with my peers.

11:45AM-12:30PM — The Brave New World: Usability Challenges of Web 2.0
You may have heard of Web 2.0, but most of you probably haven’t. I won’t go into too much detail of what Web 2.0 is now, I’m saving that for a later entry. But basically this was another great presentation that tied into Jeffrey Veen’s earlier presentation. In this presentation, Jared Spool presented the challenges developers face in creating new web applications that put the user experience first. I took a lot from this presentation too and should be able to apply most of what was covered in my future work.

12:30PM-2:00PM — Lunch and Round Table Discussions
Lunch was set up slightly differently today. At each of the tables was a sign stating what topic would be talked about by the people sitting at the table. Then people would sit down at the topic tables they felt like discussing. Steven and I sat at the “Intranet Design” table and talked and shared experiences with each other. I was able to take a few things away from this session as well.

2:00PM-3:45PM — Playing Games and Cursing: The Truth About Remote User Research
This particular seminar didn’t apply to me too much since I’m not involved in user research or conducting surveys, but I did get to see some cool products and learn the more psychological aspects of remote research.

4:00PM-5:00PM — Panel: Next Generation of Web Applications
Like yesterday, this was another panel discussion, but this time it was a panel of developers sharing their experiences and thoughts on web application development. One of the attendees posted the entire session to the wiki, so be sure to check it out if you want to know how it went.

So after the sessions, Steve and I walked down to the Metro Rail station and took it back to Rosslyn where we went to dinner with 2 other co-workers (Carol and Howard) at the Orleans House. I got a very good slice of Prime Rib, which they’re famous for. It was a great evening, we had fun just sitting and talking while we ate good food. Good times all around.

Tomorrow is the last day of sessions. We have sessions just in the morning, and then we will be doing the following:

UX Week attendees will get a rare peek behind the scenes of the National Air and Space Museum at the Paul E. Garber Facility for Preservation, Restoration, and Storage. This facility, where the Museum repairs and assembles its exhibits, is ordinarily closed to public. This special opportunity is hosted by NASM Exhibition Designer Barbara Brennan, who will be presenting earlier in the day.

So needless to say I’m VERY excited about the field trip tomorrow. Then after the tour, I’m going to take the subway up to L’Enfant Plaza and walk up to the monuments and famous buildings such as the Capitol, the White House, and the Supreme Court. You better believe I’ll have my camera with me and will be taking a ton of pictures.

And on that note, it’s bedtime …

Blogging UX Week 2006

You may have noticed that I’m not really giving detailed descriptions and summaries of the conferences I’ve been attending. My main focus as I blog UX Week is not about the conferences themselves, but more about what I have or haven’t learned and what I’ve been able to take away from these conferences.

With that said, if you are looking for more detailed summaries, then feel free to take a look at the blogs for some of the other attendees who are blogging their experiences, many of whom are going into more detail:

I’m sure there are more people blogging based on the number of computers at each conference, but these are the best ones I’ve found listed on the UX Week Wiki.

UX Week – Day 2

Well today didn’t get off to a good start at all. I didn’t sleep well last night, so when the alarm on my phone went off I just grabbed it, turned off the alarm, and went back to sleep. I was supposed to meet Steve down in the lobby at 7:30, but when I hadn’t made it down there by 7:40, he started calling me, which woke me back up. We left around 7:50, and got to the hotel a little after 8:15 after parking and walking. We grabbed some breakfast from the buffet and went into the conference room.

8:00AM-8:45AM — Breakfast: Microsoft’s “A Tour of Atlas”
So we got to have breakfast on Microsoft’s dime, that’s always fun to say. ;) There was a Microsoft rep demonstrating Microsoft’s new features of Microsoft Atlas, which is a set of libraries and frameworks for ASP.NET and built into Visual Studio. It makes developing and deploying AJAX-enabled web applications actually pretty easy (as long as you’re developing an ASP.NET application in Visual Studio ;) ). I think it was a pretty good presentation, and I think Atlas will be extremely popular with other ASP.NET developers.

9:00AM-9:30AM — Introduction by Peter Merholz
Not much really here, just like yesterday. Peter mostly just talked about the upcoming keynote speaker, and introduced him.

9:30AM-10:30AM — Keynote by Michael Bierut, Pentagram
This was an absolutely awesome keynote. Michael talked about his work with the New York City Public Schools to redevelop and reinvent their library system. He went through the processes and thoughts he went through while taking part in this project. He shared with us five of the biggest mistakes he made and how he learned from them and how we can avoid making the same mistakes he did throughout the development process.

10:45AM-12:30PM — Inside the Innovation Planning Process
Nothing against Jeremy Alexis, the presenter of this workshop, but I didn’t really come away with anything new. To me it was something I knew and mostly practice as it is, so I probably should have gone to the other workshop that was going on at the same time. It wasn’t what he presented or how it was presented, it was just that this was a topic that as the presentation went on, it just struck me as common sense. It was definitely a good workshop for those that needed it, but, not to sound egotistical, I didn’t really need it.

12:30PM-2:00PM — Lunch
The food at lunch today was a bit better than yesterday. There were some issues in one of the applications I had updated last week so I spent the entire lunch working on fixing some of the new issues that cropped up.

2:00PM-3:45PM — The Future of Design
This, like the previous workshop, was one that didn’t contain much new content for me. The title is misleading, even the speaker remarked on how she didn’t come up with the title and that it is misleading. I thought it would be a conference about new and emerging trends in web and software design. Not so much. It was mostly about the designing process and how to go about it. Again, the topics covered in this conference pretty much were common sense to me.

4:00PM-5:00PM — Panel: What Are the Grad Schools Teaching?
This was a pretty good conference. It was a panel set up of three teachers from various colleges and design schools. It gave us some insight into what and how the Grad Schools are teaching User Experience and Design. I didn’t really come out of it knowing anything groundbreaking or something I’ll be able to apply to my work, but I do at least have a good idea of what people are learning in Grad School. The attendees were also able to ask some very good questions of the panelists and the responses were also fairly good.

After all the conferences were over, Steve and I went over to the parking garage to pick up his car (which took forever to get because the parking attendant just took his sweet time to get the car and bring it back to us. Anyway, we got the car and drove back to the hotel, went to our own rooms to change and met downstairs again 20 minutes later. We walked to the Rosslyn Metro Station, which is only about a quarter mile from the hotel. (In case you don’t know, the “Metro” is D.C.’s subway system).

We got to train station and hopped on the subway and took it over to Robert F. Kennedy Memorial Stadium to watch the Washington Nationals take on the Atlanta Braves. The subway ride was fine and pretty quick. It was probably twice as fast for us to take the metro than it would have been to drive.

When we got to the game, the first thing I noticed was the obviously increased police presence. Cops and cop cars everywhere; there was even a Mobile Command Post set up just outside the stadium. Anyway, we got into the stadium, and found our seats. After sitting for a few minutes, we decided to go get some food and beer – mission accomplished. The game was great. Former Padres pitcher Pedro Astacio pitched a 2-hit complete game shutout of the Atlanta Braves. The game also flew by quickly, finishing in just 2 hours and 1 minute. Once the game was over, we walked back to the Metro station and rode the Metro back to the hotel.

Now I’m back in my room, watching Family Guy, and getting ready to sleep. I hope I don’t oversleep again tomorrow, it’s not fun. Anyway, tomorrow looks like a great day, much like Monday as it deals with more technical topics again. Then tomorrow night we’re supposed to meet up with some other co-workers from the West Coast that are out here for the week as well.