Yay for Holidays...

...when I have way too much time on my hands. Here's some of the stuff I've been doing.

1. Installed Firefox 3.6 beta 4. I can't begin to describe the joy my nerdy little heart felt when I discovered the Zelda persona. Now my browser is complete with the Triforce, Sages' Medallions, and some Rupees thrown in for good measure. (Personas are skins for Firefox. Chrome supports something similar, but none of their themes appeal to me.) The beta has also changed the behavior for opening links in new tabs: instead of opening all the way to the right, like in Firefox 3.5, they open right next to the parent tab. I still cannot stress enough how much I dislike the Awful Bar, but other than that, I can't complain about anything. Firebug and the Web Developer Toolbar still work, so I'm happy.
2. Downloaded the source code for Chrome OS. I successfully followed the instructions to build a working version of the OS, but neither my bootable flash drive nor the .vmdk image would work in VirtualBox. For some reason, the OS refuses to log in with my Gmail account, my other Google account, or the default chronos login. Sigh.
3. Tinkered with some Java. A (non-programming) friend of mine was trying to write a Java program that would display information in some arrays and perform some basic calculations, but didn't know how to get the program to pull individual values out of the array. I helped her figure out how to do that and write a while loop that would perform the calculations on all five sets of values. Yes, perhaps there are greater things to get excited about, but I love the smell of success on a Saturday morning, no matter what form it comes in.
4. Stayed up way too late on Thursday night/Friday morning to snag all those amazing Black Friday deals. </sarcasm> The best deal came today, when I got Firefly: The Complete Series for $10.99.
5. Did some video editing. Nothing like a little editing to tell you that your awesome system that scores 5.2 and above on all aspects of the Windows Experience Index is really just an underpowered piece of junk. But I'm happy with the output...quite happy, in fact.

And in the spirit of Thanksgiving, here are some programs I'm thankful for:

1. Foxit Reader. It does everything Adobe Reader does, only faster and without all the bloat. In addition, Foxit has paid programs for editing and creating PDFs, like Adobe, but their programs are cheaper.
2. Parallels. I've got a WinXP and a Ubuntu Linux VM with this. The sad thing is that some of my older Windows games function better on the VM with a fourth of the memory that's on my Win7 computer. Some things I just don't understand.
3. GoldWave. This is the best audio editing software ever. True, it isn't open-source like Audacity, but it just feels more intuitive to me. Plus, it has a very generous trial period -- you'll have plenty of opportunities to decide whether you like it. The Noise Reduction feature is the best thing since cotton candy.
4. TextWrangler. This far outstrips Notepad. It has (limited) code highlighting, and it preserves indents when you hit Enter.
5. Tap Tap Revenge 2. I can't afford Guitar Hero, so this is the next best thing. I only wish it had more songs that I like.

Well, I mentioned Firefly, so I have to have another quote from there today!

Quote of the Day:

Take my love, take my land,

Take me where I cannot stand;

I don't care, I'm still free,

You can't take the sky from me.

--Firefly theme song

More iPhone!

As a follow-up to "iPhones, the Web, and Dashcode, Oh My!", it is possible to mimic the look and feel of a native app/Dashcode-generated web app without using Dashcode. There are several WebKit-specific CSS stylings that will generate native-like gradients, rounded corners, etc. My favorite (because I like shiny stuff) is -webkit-gradient, which allows you to have a light color gradate to a dark color without having to create a separate image in another program and load it in. Here's the correct syntax for the gradient:

background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));

Explanation from left to right. background-image is the CSS property for, well, displaying a background image. Instead of specifying a URL as a value, though, in this case we're specifying a -webkit-gradient. The gradient requires several values:

1. Type of gradient. There are two types: linear and radial. Linear gradates in a straight line from Point A to Point B. Radial gradates in a circle from a specified point for a specified radius. An example of the two types is at webkit.org (only viewable on a WebKit-based browser like Safari or Chrome).
   
2. One or more points. Point values accepted are coordinates, percentages, or the keywords "left", "right", "top", and "bottom".
3. Starting color. Colors can be specified in hex values or RGBA (red, green, blue, alpha).
4. Finishing color. Colors can be specified in hex values or RGBA (red, green, blue, alpha).
   

Moving on to rounded corners. This is slightly more annoying to code. Each corner must be coded separately. Assuming the rounded corners are being applied to a list, the code to generate rounded corners is as follows:

#header ul li:first-child a {
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
}
#header ul li:last-child a {
  -webkit-border-bottom-left-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
}

In the first CSS declaration, the CSS code is looking for an anchor tag within the first instance of a list item within an unordered list within the header div. In the second declaration, the code is looking for an anchor tag within the last instance of a list item. The corner radius has to be applied to the first and last li tags separately, instead of applying it to the entire list, because if it's applied to the entire list the li's style will override the list's.

There are many more things you can do with JavaScript, Ajax, and CSS to approximate the feel of a native app on the iPhone. Check out Building iPhone Apps with HTML, CSS, and JavaScript to learn more.

Quote of the Day:
Jayne: Testing, testing. Captain, can you hear me?
Mal: I'm standing right here.
Jayne: You're coming through good and loud.
Mal: 'Cause I'm standing right here.
--Firefly, "The Train Job"

Get A Job In One Hour Or Less!

Well, okay, maybe not, but there's no denying the fact that PivotTable experience is a sought-after skill in today's job market. In fact, the demand for PivotTable people has gone up even as demand for just plain Excel folks has gone down (source: Pivot Table Guy).

It isn't that hard to learn how to use PivotTables, either. If you have an Excel spreadsheet with rows and columns, you already have the source data necessary to generate a PivotTable. The table I was working with had 6 columns: Date, Location, Product, Channel, Quantity, and Revenue. To generate the PivotTable, select a cell anywhere in your table, go to Data > PivotTable and PivotChart Report (Insert > PivotTable in Excel 2007), and complete the wizard. This will create an empty PivotTable. Into the PivotTable you can drag and drop fields to create the final product. My table used Location for its rows, Date for its columns, and Revenue for its comparison data.

The main limitation of PivotTables is they only take up to 255 column values. That means that if you have sales figures for every day of the year, you can't display all of them at once. To fix that, right-click on the appropriate field (in this case, Date), select Group, and choose how you want to group the data. When dealing with dates, you can group by years, quarters, months, or days.

Want more detail than just revenue by location and date? Just drag and drop another field into the appropriate section. I added Channel to the columns, which breaks out the revenue by channel and then by date (which I've grouped by quarter to avoid exceeding the 255-column limit). Excel automatically calculates totals on all rows and columns, as well.

That's not quite good enough for me. I'm the sort of person that color-codes everything. That's where upgrading to Office 2007 finally has a benefit. There are the obvious formatting options (Home > Format as Table), which make the headers, footers, and totals different colors. In addition to that, however, you can add data bars to cells. Data bars are horizontal shadings in cells that show relative quantities according to the range of cells you select, allowing you to gauge at a glance which cells have high or low values. To add data bars, select the cells you want to compare to each other (all first-quarter sales by location, for example), go to Home > Conditional Formatting > Data Bars, and select the color you want. There are menu options (More Rules) to allow you to fine-tune the formatting. Voila, we have color.

Quote of the Day:
'Cause I get a thousand hugs
From ten thousand lightning bugs
As they try to teach me how to dance.
A foxtrot above my head,
A sock-hop beneath my bed,
A disco ball is just hanging by a thread...
--Fireflies, Owl City

All Kinds of 'bilities

Findability is the quality of being able to be located by potential users. You may have the greatest website about (insert favorite subject here), but if it's buried, unorganized and unlinked, in the depths of Angelfire, nobody will ever know about it. Findability != SEO; it is focused on humans, not search engines. If findability efforts benefit search engine rankings, that is good, but it is not its primary aim. Findable websites not only facilitate initial visits, but they encourage visitors to return and to recommend the website to friends.

Findability does not exist in a vacuum. It is a part of SEO, but it is not a bunch of keywords stuffed in a page. It is useful content, organized for people to find, read, and use. Once people find your website, they have to be able to use it. Usability describes how easy it is to, well, use the website. Usability is different from accessibility: usability is more about organization and ease of use, while accessibility is about making sure that the website is available to the maximum number of people.

Members of Aarron Walter's Findability class at the Art Institute of Atlanta came up with the following definitions for findability, accessibility, usability, and SEO:

Findability: The quality of being able to be navigated or located.

Accessibility: The general term used to describe the degree to which a product (e.g. device, service environment) is accessible by as many people as possible. Usability and accessibility are often confused. See Also: http://www.w3.org/WAI/

Usability: The term that describes the quality of a website that determines how well tasks can be accomplished and how easy the website can be used. This can be broken down into many qualities, such as learnability, memorability, and efficiency. See also: http://www.useit.com/alertbox/20030825.html

SEO:Search optimization is a hyper-competitive endeavor that requires intense focus and a thorough, up-to-date understanding of how the search engine algorithms and robots operate.

(source)

Resources:

• The 10 Worst Findability Crimes
• Findability, Orphan of the Web Design Industry
  

Quote of the Day:

http://www.flickr.com/photos/morville/ / CC BY-NC 2.0

iPhone Web Development Resources

Yay, time for List Monday. Today's list: sites about iPhone web development.

General:

• iPhone Web Development presentation, covering Mobile Safari's limitations, using the viewport, iUI, and more
• Put Your Content In My Pocket, discussing best practices for optimizing web content for the iPhone
• Manifest Interactive's free tools, including several useful JavaScript/jQuery utilities
  

Working with the viewport:

• Configuring the Viewport, telling you everything you ever wanted to know about the viewport
  

CSS on the iPhone:

• Optimizing Web Content, covering the behavior of the iPhone OS when it encounters conditional CSS
  

Using WebKit:

• 6 WebKit Tricks, revealing the secrets behind some (rather gimmicky, but pretty cool) tricks to enhance the display of content
  

iUI:

• iUI on Google Code, obviously, the official code site for iUI
• Writing an iPhone Page In Minutes Using iUI, which gives sample code and general practices for developing with iUI
  

I Will Have No Hair In Five Years.

MySQL is an open-source relational database system. XML is a markup language designed to provide a good way to organize data and allow computers to get meaning from data (as opposed to HTML, where meaning must be inferred - not something today's computers are equipped to do). So what exactly do they have in common, to both be included in the same post?

They are, colloquially stated, a pain in the butt.

Let's start with XML. The Extensible Markup Language is a descendant of SGML (Standard Generalized Markup Language), which was designed to provide a standard document storage format. XML took that one step further by allowing users to define their own schemata. Once the schema has been defined, the XML document can be validated. After that, it can be transformed through the use of a stylesheet document. Pages thusly transformed will render as HTML, with whatever formatting you specify.

Sounds great, doesn't it? You have a language that you can fully customize to your needs and you can make it look pretty! This, my friends, was what I was still doing at 2:30 this morning, after having started some time in the middle of the afternoon. In my foolish, naive way, I believed that I could create an XML document with sample data, define the schema from that, create the stylesheet, and be good to go. Um...not exactly. The stylesheet is a very finicky animal, and it wants things served to it on a silver platter (oops, I meant "in a particular order, in a particular format). So now I have to figure out how to retool my schema and document in order to display the content I want, in the order I want.

However, MySQL was the topic for the day, when I finally dragged myself out of bed late this morning. After my compatriots and I had input all the data in our database, it occurred to me that one of our tables really needed a 1:1 recursive relationship. This particular table has 7 fields in its primary key. After being reminded of the fact that the ALTER TABLE command does, in fact, exist, I added in the appropriate columns and populated them.

Then I tried to add the foreign key constraint. Nothing worked. It simply would not add that foreign key, choosing instead to give me Error #150. At wit's end, I Googled "mysql 150 add foreign key" and came up with a 2006 MySQL bug report (bug 16290) complaining about the unclear error message that results from attempting to create a foreign key on a non-indexed column. "Aha!" I said to myself. "The columns I'm trying to reference aren't indexed." I created an index on all 7 primary key columns and executed the ALTER TABLE command to add the foreign key - and it worked. I was exceedingly happy.

Quote of the Day:

If you'll come up one by one, unarmed, I'll engage to clap you all in irons and take you home to a fair trial in England. If you won't, my name is Alexander Smollett, I've flown my sovereign's colours, and I'll see you all to Davy Jones.

--Captain Smollett, Treasure Island

iPhones, the Web, and Dashcode, Oh My!

Scene: A twentysomething plays with his iPhone.

Twentysomething: I love my iPhone! I could spend all day doing stuff on it. (thinks) You know, my personal website doesn't display very well on it, though. Everything's all tiny and jumbled up. I wonder how I could fix that?

And so our hero consults The Google for answers. He's not ready to pay the $99 for the privilege of submitting real native apps to the App Store, so he's settling for a little web app development.

There are two ways to develop for the iPhone. One, you can create a full-blown native app, which you can distribute via the iTunes App Store and possibly make money from. Two, you can create a web-based app, which will display in the iPhone's browser. You can't make money off a web app, but you don't have to pay the $99 fee to be in the iPhone Developer Program, either. On top of that, there are really two options for web development: modify an existing web page so it displays well in Mobile Safari, or use Dashcode to mimic the look and feel of a native app.

First, let's look at modifying an existing web page. Web pages are traditionally designed for full-size computer monitors with resolutions of 800x600, 1280x1024, or something similar. The iPhone is considerably smaller than that at 320x480 pixels. If left to its own devices, the iPhone will assume a page width of 980 pixels and scale that to fit the display. In portrait orientation (home button to the bottom), that means tiny pictures and illegible text, since 980 pixels is being forced into 320. Landscape orientation (home button to left or right) fares a little better, since it's only having to reduce to 480 pixels. Still, it generally ends up being pretty tiny.

So, how do we fix that? Obviously, we could leave it as-is and force the user to manually zoom in by double-tapping elements or pinching, but come on. We're classier than that. We're going to make use of a simple meta tag to change the scale. Drum roll please...

<meta name="viewport" content="width=device-width">

Hallelujah, text that's readable without a microscope!*

"That's great," our hero muses, "but I want something...better. How can I create something that looks more like an app and not a web page?"

Enter Dashcode. This is a free program (Macs only, sorry Windows devs) that includes templates, buttons, and code snippets that allow you to create real web apps that look like native apps. You can't take advantage of as many of the iPhone's built-in features this way, but for someone operating on a budget, it's a pretty good alternative.

When you open Dashcode, you can choose a template for your project: Browser, Utility, RSS, Podcast, or Custom. Browser is pretty much a menu interface: You put in a list of stuff, and when someone taps on an item, they get more information about that item. Utility's default interface is a notepad/text area with customizable settings. RSS lets you specify a Feed URL and displays a list of article headlines from that feed. Podcast functions very similarly, but instead of articles, it displays podcast titles and allows the user to listen to them. Custom presents you with a blank slate that you can customize to your needs. Whichever template you choose, you have to provide it with data sources and whatever functionality you need.

Either way you go, you're well on your way to creating a good web app!

*Obviously, there are more things you can tweak to optimize your web page for the iPhone. This is merely the most obvious and easiest. Seriously, Google is your friend.

Quote of the Day:
I was feeling pretty creaky after hearing the TV reporter say, "To contact me, go to my Facebook page, follow me on Twitter, or try me the old-fashioned way -- e-mail."
--Reader's Digest, November 2009, pg. 210