Coffee Addiction: Reprise

Last week I talked about the fact that web designers have a horrible caffeine habit. Introducing the newest addition to the Coffee Family: Cappuccino.

Cappuccino was created in 2008 by the company 280 North, whose goal was to port Cocoa, Apple's object-oriented desktop application development environment, to JavaScript. It is an open-source framework, built on JavaScript, that allows you to create fully-functional applications that run entirely in your browser. It uses the Objective-J language, which has its roots in JavaScript and Objective-C. One of the key points of Cappuccino is that developers need not tinker with HTML, CSS, or the DOM; the framework takes care of that.

Cappuccino is a cross-browser implementation, working under IE, Firefox, Opera, Safari, etc., on Linux, Windows, and Mac. Some workarounds to address IE's shortcomings have been included in the framework, so web app developers have that much less to worry about.

If you want to get started with Cappuccino, it's easy enough. Download the Starter kit and go through the tutorials. It doesn't seem to be any harder to learn than similar languages. Happy developing!

Quote of the Day:

All that is gold does not glitter,

Not all those who wander are lost;

The old that is strong does not wither,

Deep roots are not reached by frost.

--The Lord of the Rings: The Fellowship of the Ring

Office Online

This is why I'm still using Office 2003:


Microsoft Office has been the de facto standard for office suites for, well, pretty much as long as it has existed. Need to generate a document with words, numbers, formulae, and/or pictures? It's a pretty safe bet you'll be using a Microsoft product for that. However, MS Office is a touch pricey and many people (and businesses, for that matter) cannot justify spending that kind of money every time a new version comes out.

Enter Web office apps. These are stripped-down, but free, MS Office-like programs that run inside your browser: Google Docs, Zoho, and the upcoming Microsoft Office Web Applications, to name a few. Due to limited time, I only tested the slide show apps included in each of these. (I also tested 280 Slides, which is a web app built on Cappuccino; there is no corresponding suite of office programs to go with it, but it's a neat program by itself.) So, how do they compare to each other and with the current non-Web app, MS Office?

Microsoft PowerPoint (Microsoft Office) is the standard. It does not run within your browser; it is a standalone program included in MS Office. It has transitions, animation, clipart, picture cropping, WordArt, everything. By default, files are saved in *.ppt format (except for the newest version of Office, in which case it is saved in *.pptx format). These files are readable in a multitude of viewers, and you can even use the "Pack and Go" wizard to include PowerPoint Viewer with your presentation. MS's decision to replace the menus with a ribbon interface in Office 2007, however, dramatically impacted its usability for longtime Office users who were used to where everything was in the menu system.

Features: 9/10 (could benefit from including more templates)
Ease of Use: 8/10 (Office 95-2003), 5/10 (Office 2007)
Ubiquity: 10/10
Overall: 9/10 (Office 95-2003), 8/10 (Office 2007)

Google Presentation (Google Docs) has the advantage of being run by the ever-ubiquitous Google. It has a word processor, a spreadsheet app, a slide show app, and a form editor. When you create a slide show, you can save it to your computer as a PowerPoint presentation (*.ppt). It has some decent slide templates. Entering text, pictures, and simple shapes is fairly straightforward. There does not appear to be any way to animate slide elements or have transitions between slides. If you want to have different font sizes associated with different list levels, you will have to manually change it yourself; you're also stuck with whatever bullet styles Google has assigned to each level.

Features: 6/10 (includes enough basic tools to get the job done)
Ease of Use: 8/10
Ubiquity: 8/10
Overall: 7.33/10

Zoho Show (Zoho) immediately runs into some issues. Unlike Presentation and PowerPoint, Show lacks any sort of right-mouse click functionality, meaning you have to find everything in the ribbon at the top. It allows you to change bullet styles, but some of the symbols may come across as question marks in your presentation if your browser does not support the proper font. Again, templates are limited, but that seems to be pandemic across all presentation programs. It will export to a *.ppt file on your computer.

Features: 6/10 (comparable to Google Apps)
Ease of Use: 5/10 (lacks context menus)
Ubiquity: 7/10 (lacks Google/MS name recognition)
Overall: 6/10

280 Slides has fewer templates and layouts to choose from than the other applications. You can have any bullet you want, as long as it is a large circle. Its features are simple and relatively easy to find, but limited. It does not support animation. It will export to a *.ppt or *.pptx file on your computer.

Features: 5/10
Ease of Use: 9/10 (no context menus, but good organization)
Ubiquity: 5/10 (lacks Google/MS name recognition)
Overall: 6.33/10

Zoho and Google are fairly comparable, so between those two I would choose Google, due to its ubiquity, (admittedly limited) context menus, and company stability -- Google is not going anywhere anytime soon. 280 Slides is good for tossing together a quick presentation on the go, but it lacks some of the features of the others. All in all, for basic needs, web app suites will get the job done, but for any higher-level functionality, looks like we'll be keeping our copies of Office for a while.

Quote of the Day:

see more Lolcats and funny pictures

Stop Reading This Blog.

Seriously. Stop right now. Go watch Dr. Horrible's Sing-Along Blog. And then go watch Firefly and Castle.

Done? Great! Now that you've seen some great shows, let's talk about rich media. Rich media is loosely defined as "pretty stuff that is informative or entertaining in some way". Got a graph showing how Napoleon's army got smaller the closer he got to Moscow? That's rich media, because it has a lot of information packed into one diagram that can be read in many ways. Got a TV show online? That's rich media. Got a website that tells you everything you ever wanted to know about emotions manifesting themselves in blogs? That's rich media, too.

Did you notice anything different about Dr. Horrible's Sing-Along Blog? Instead of showing an air date, Hulu lists it as a "web exclusive". What's really impressive, however, is that it won an Emmy. An Emmy, folks. A television award was given to something that was never shown on the boob tube.

A few years ago, television networks started putting some of their shows up on their websites for viewing (after they aired on TV, of course). Now, most shows are online within 24 hours of their initial air date, which is threatening to invalidate Nielsen ratings and cause a major shift in TV viewers' habits. Since currently online shows have typically only one 30-second commercial at each break instead of two to four minutes' worth, I'd say it's a pretty safe bet that online broadcasts don't generate as much money for the networks as traditional TV.

Still, putting shows online has the potential to expand a show's audience. Maybe someone has a scheduling conflict that prevents them from watching a show when it airs, but they discover it online. Maybe they even go out later and buy the season DVD, which equals money for the network anyway. Networks are already trying to figure out how best to monetize their online content, and I predict that they will continue changing and refining their strategies. Online rich media is here to stay.

Quote of the Day:
Zoe: Cap'n'll have a plan...always does.
Kaylee: That's good, right?
Zoe: It's possible you're not recalling some of the cap'n's previous plans.
--Firefly

Twitter = Asparagus

When I was young, my father would always try to get me to eat asparagus.

"I don't like asparagus, Daddy."

"How do you know? You've never tried it."

"I just know. I don't like the way it smells."

I don't like the way Twitter smells, but I figured I would at least do some research into it.

For those of you who have spent the last year or so under a rock, Twitter is a microblogging service. Every post must be 140 characters or less. Everyone and their granny is tweeting now, it seems. Celebrity Twitter is supposed to be really interesting. Just ask Conan O'Brien.

There is no real limit to the content you can post. Everything from the Iran elections to Kanye-bashing to your morning bowel movement is fair game, as long as it's not spam or porn (even that's not particularly well-policed).

Side note: A recent study found that 40% of tweets are "pointless babble".

You can set your account to either public or private, depending on if you want the world to know what you're doing or just your friends. If you see a tweet you like, you can RT, or re-tweet, it to share it with your "followers". You're not supposed to impersonate people, threaten people, infringe on anyone's copyright, or post people's private information.

There are approximately 3,421 Twitter apps on the iTunes App Store (okay, maybe I'm exaggerating a bit, but there are still quite a few). Olly Farshi on The Apple Blog has done a far better job than I could of detailing some of the better Twitter iPhone apps, so here's a link to his blog post.

Are there any positive uses for Twitter? Maybe. Dell broadcasts deals on it; Walmart uses it to promote new products and give an inside look at life as a Walmart employee; Women's Health magazine uses it to link to articles they deem interesting and/or useful.

I still don't understand how using Twitter has any tangible benefit over more traditional methods (blog, email, etc.); to me, the only purpose Twitter serves is to speed up the decline in the world's collective attention span, communication abilities, and command of the written language.

Oh, and @aplusk: Really, we don't care. Seriously.

Quote of the Week:
"Twitter's down. Uh -- I don't know what Ashton Kutcher's having for lunch! I DON'T KNOW WHAT ASHTON KUTCHER'S HAVING FOR LUNCH!!! OH MY GOD, TWITTER'S DOWN!!! WHAT AM I GONNA DO?!" --Conan O'Brien, The Tonight Show with Conan O'Brien

JavaScript Will Not Get You Coffee.

Apparently, web developers are chronic coffee abusers. There's Java, the programming language. There's CoffeeCup, a web design program similar to Dreamweaver. There's JavaScript (which, coincidentally, has nothing to do with Java), which was originally codenamed Mocha. I'm definitely sensing a pattern here.

Anyway, JavaScript was developed in 1995 as a relatively accessible language for amateur web developers. It was originally designed for Netscape Navigator; Microsoft developed a similar language, JScript, to fix compatibility issues with Internet Explorer and provide a language that could handle the catastrophe of changing centuries, but today both languages are considered nearly synonymous. JavaScript is run client-side and is object-oriented. According to Tiobe, JavaScript is the ninth most popular programming language, behind such languages as Java, PHP, and Basic.

JavaScript code must be enclosed in <script> tags with the type attribute set to "text/javascript". You can code anything from a simple line of text -- document.write("Hello, world!") -- to a confirm box that appears after you click a link on a page, to a window that opens with a sound clip. The possibilities are endless.

I actually have only passing knowledge of JavaScript. My abilities with that language consist of Googling what I'm after, with "javascript" tacked on the end, and modifying code I find to fit my needs. I know only enough to be dangerous, as they say. But hey, we all have to start somewhere, right?

Quote of the Week:
"What's in a name? That which we call a rose/By any other word would smell as sweet." --Juliet, Romeo and Juliet

So, There's This Thing Called Opera...

It takes a lot for me to want to switch browsers. I'm pretty much a diehard Firefox devotee. But every so often, I try out new browsers -- Chrome, Safari, even Flock. So when I heard that Opera had a new version out that has all sorts of nifty features, I had to take a look.

Opera is generally viewed as a "niche" browser, used mainly by a group of hardcore fans. According to StatCounter's global stats, Opera has almost 3% market share, compared with IE at 58% and Firefox at 31%. The buzz seems to be growing, however, since Opera 10 was downloaded 10 million times in the first week after its release. The dynamic is vastly different in the mobile world, however: Opera holds over 25% of that market, above even the iPhone at almost 23% and Nokia at almost 19% (via StatCounter).

Some of Opera's features are not exclusive to it (Sessions, Closed Tabs, Password Manager, Find As You Type, and Fraud Protection all have equivalents in Firefox, for example), but there are some interesting features highlighted in its browser tips.

• Speed Dial shows a page with thumbnails of up to 25 Web pages, fully configurable.
  
• Opera Link allows you to sync your bookmarks with your other Opera-using devices.
  
• Opera Turbo routes Web pages through a proxy server for compression purposes before sending it on to you, reducing load time.
  
• Visual Tabs shows a thumbnail of opened tabs when you hover over them or expand the tabs pane.
  
• Fast Forward and Rewind send you to the latest or first page, respectively, of the site you're currently browsing.
  
• Notes seems to be the equivalent of Notepad or Wordpad, integrated directly into the browser.
  
• Bookmark Nickname allows you to give a bookmark a short name that you can type into the address bar -- for example, "fb" for "http://www.facebook.com".
  
• Search Keywords allows you to specify what site you want to use for a search by using an abbreviation (putting "w" in front of your search searches Wikipedia, or "z" searches Amazon).
  

As a web designer, one aspect that is of particular interest to me is standards compliance. The Web Standards Project has a test (Acid2) to determine if your browser is compliant with the most up-to-date standards in HTML and CSS. If it is, the test will display the words "Hello World!" and a yellow smiley face. If not...well, you'll see.

Opera 10.00 and Firefox 3.5.3 passed this test with flying colors. This is how the smiley is supposed to appear:
Firefox 2.0.0.6 didn't do quite so well:
Of course, Internet Explorer experienced epic fail:
So overall, Opera seems to have been developed by people who paid attention to standards -- always a plus. They're also committed to spreading knowledge of their browser and Web standards in general through the educational resources on their site.

Quote of the Week (Couldn't Resist Edition):
"Let your mind start a journey to a strange new world! Leave all thoughts of the life you knew before! Let your soul take you where you long to be!" --The Phantom, Phantom of the Opera

Saving the Princess, or Why Things Never Change

Special Friday update! Today, I'm going to discuss innovation in the 1980s and how the lessons learned then can be applied now.

Er...actually, I'm just looking for an excuse to discuss The Legend of Zelda.

Rewind to the late 1980s. The NES was the coolest thing ever, with its awesome 8-bit graphics and rockin' sound effects. Nintendo developers were working simultaneously on two game titles: one featuring an Italian plumber saving a princess who was always in another castle, and one featuring a pointy-eared kid saving a princess who was being held hostage inside a mountain. Anyway, both games (Mario and Zelda, respectively, in case you hadn't guessed) went on to become huge successes.

Zelda had simple and intuitive gameplay. You control Link, the protagonist, and use a sword to do away with monsters. It used an overhead view, enabling you to maneuver around creatures you'd rather not fight. There was little strategizing required, just basic hand-eye coordination.

Mario, on the other hand, used a side-scrolling format. Again, relatively simple gameplay, but less ability to avoid "the bad guys".

Nintendo, hoping to maximize the fanbase for Zelda, decided to combine the gameplay methods that had made Super Mario Bros. and The Legend of Zelda popular in the latter's sequel, Zelda II: The Adventure of Link (AoL).

(Oop, my ADD just kicked in. Must correct poorly-worded sentence on Wikipedia. Click section edit link...make change...write edit summary that's longer than my edit...click show preview...looks good...click save...done. Phew. And all done without having to create an account.)

Back to what I was saying. AoL included the best elements of Nintendo's most successful franchises, so it must have been twice as pleasing for fans, right?

Not.

AoL was poorly received, to say the least. Nintendo was derided for abandoning the core format that had made Zelda so popular. They reverted to the old format and have not attempted anything like AoL again.

Let's see...a company has an established product and radically changes it to provide its audience with what it thinks they want. Where have I heard this recently? Microsoft, with Windows Vista. It altered the core functionalities its users were used to, and everyone complained. It thought that these changes would please both new and returning users, but like Zelda, the reaction was "don't fix what ain't broke."

People are creatures of habit. As a developer, if you have a product that is widely accepted, making sweeping changes carries a high risk. You have to decide if the change is beneficial enough to overcome the inertia that exists.

Quote of the Week (Friday Edition):
"After all, a fake is a fake...and no matter how much you dress it up, the real thing always wins!" --Midna, The Legend of Zelda: Twilight Princess

Cascading Style Sheets: An Introduction

Last week, I mentioned CSS -- cascading style sheets. CSS is an important tool for any web designer.

What does CSS do? It takes the place of clunky formatting attributes (and tags, in some cases) in (X)HTML.

Wouldn't it be easier to just keep the formatting in the HTML code? Not really, for multiple reasons. First, many old "staples" of HTML formatting are being deprecated. W3 Schools is an excellent resource for finding out which tags have been deprecated. Second, imagine that you have a website with 10 distinct pages and 5 different hyperlinks on each page. You want to make all hyperlinks bold and bright orange. Which would take less time: typing <b><font color="orange"><a href="link.html"> fifty times, or putting a { font-weight: bold; color: #FFA500 } in a separate CSS file and implementing it in each page?

Still not convinced? What happens if you want to change the formatting to italic fuchsia? If you use CSS, you only have to change the CSS in one place. With pure HTML, you would have to change the code fifty times.

Okay. So how do I use CSS? CSS is a collection of rules. A rule consists of two parts: the selector and the declaration. The selector identifies what elements are affected by the rule. The declaration tells the browser what formatting to apply to that element. W3 Schools comes to the rescue again, with an excellent CSS tutorial. Once you have created your CSS rules, save that file with a .css extension in the same folder as your HTML files. Then, in the head section of each page you want to apply the formatting to, use a link tag to call the stylesheet: <link rel="stylesheet" type="text/css" href="mystyle.css">

I only want to implement a particular CSS rule on one page. Is there any way to do that? Yes. Place the CSS code in a style tag inside the head section:
<style type="text/css">
h1 { color: blue; }
</style>

Obviously, there is much more to CSS than that, but that is the basics. The best way to learn it is to use it, so have fun experimenting!

Quote of the Week:
"Live today. Not yesterday. Not tomorrow. Just today. Inhabit your moments. Don't rent them out to tomorrow." --Betty Lou, Love, Stargirl