How IceTime Was BuiltI get mails from people asking how these widgets are made, and to be honest trying to explain it is rather complicated through words. One could conceivably write a manual on how the process works and what all the code means and does...and that still wouldn't go into what is different between Dashboard and Yahoo! Widgets...and there are some major differences...nor how one does the graphics...and what CSS does...etc. However, I thought that giving a basic overview of how all the pieces come together might offer people a clue as to how they can construct similar widgets and where one needs to begin to learn the more complicated things. I'll use IceTime as an example as it employs a lot of the basics.
Why?First of all, why did I make this widget the way I did - and why a widget? As in, why not just have the scores in text form, small and condensed or on a web page? The simple answer is because, there are plenty of other widgets available that already do that. The same goes for live scoring. I have never seen the necessity for live scoring in a widget, especially for Dashboard. If you're going to follow a game or just want to know what the current scores are then it's much better to go to NHL.com or any number of other places to get that information...and a lot more. I wanted to create something that offered a different approach to scores and data. Something that looked like hockey, felt like hockey and did things that the other sports widgets didn't already do. Namely complete schedules, team sorting, past results, future games, some basic league stats, etc...all wrapped up in something simple looking and easy to use. It's a widget, not a website or an actual application, since widgets offer the greatest flexibility and the easiest method for - a) cross-platform use, b) being unobtrusive, c) displaying the information in a compact way.
What You NeedWhere to begin...the ingredients. There are no rules to what you need to create widgets, or web programs, or real programs. In all honesty all you need is a text editor, and they exist on all computers. So, you don't really need to go and get anything. With that said, there are things that make life easier and for some tasks you'll need applications a bit more complicated than what's already available to you on your computer. Thankfully there are some really good free alternatives so creating on a shoestring is always possible. The only thing you'll ever be required to spend is a lot of your own time. A lot.
The following is a list of what I use (on a Mac) for making these things:Adobe CS3 (Photoshop and Illustrator)
Yes, very expensive, but nowadays completely indispensable. GIMP, Pixelmator, and other programs will work just as well for doing the graphics, as well as other versions of Photoshop.Taco HTML editor
Free, completely and totally free. Simple and easy to use text editor with everything one needs, without all of the flair.Technically, that's it. But, in the case of IceTime I needed server space with PHP and mySQL, Virtual PC for testing the Yahoo! version, and an FTP program for file transfers (Cyberduck, also free)...and obviously Mac OSX with Dashboard.
Books and HelpI am by no means anything close to a programmer. And by this I mean that I can't hack out code unhindered by the constant fear of having made a lot of errors. I check things relentlessly and one can never have enough books regarding Javascript, PHP etc. There are even books specifically about widget building for Dashboard - although I've never actually seen them. As for Yahoo! they have an extensive knowledge base on-line and a very helpful forum. Dashboard is itself so similar to designing for regular web pages that you can turn to any related forum on-line for answers. There is also a convenient Apple mailing list dedicated to answering questions and offering advice to people working on Dashboard widgets.
Some AnswersWhy is it called IceTime and no longer NHL...?Technically I'm not the NHL, and the widget is not related to the league, so I decided it was better to give it a name that separated it from them.
Why aren't there any logos? You could use the logos for the standings or on the fronts of the jerseys for unplayed games.A lot of people use team and league logos in their widgets. I don't. Primarily because I don't have the rights to. There is a common license act stating that such and such size is acceptable if not in vector format etc. But, to be honest, without the permission of the teams and league I'd rather not take it upon myself to assume that I can use them.
How do you make money off of these things?I don't. To date this site and the widgets have garnered a grand total of $0.00. I make them because I enjoy it, and because it is a great way to learn how to do new things. They have led to a couple paying jobs, and I warmly welcome the opportunity to do commissioned work, however I don't make my own widgets with the intention of charging or asking for donations. IceTime was made because I love hockey and wanted to give something back to other fans.
Why not Google Gadgets, Sidebar Gadgets, Adobe AIR, mySpace Widgets etc.?Well, each of these requires their own set of code. There is no simple way to convert an existing widget to another format. Dashboard and Yahoo! cover the largest number of users and are who I focus on. Even these require two completely different sets of code and are in reality two totally different animals. As for Microsoft Gadgets, the simple answer is I don't own a PC or Vista and hence have no means to test them. I'd be open to allowing someone to the conversion if there was an interest. (The complicated answer is that Microsoft expects images to be in GIF format, which I refuse to do since all of mine are in PNG format.)
Back To The OverviewSo, you have some programs and you have some books, and you know where to get answers. What do you do next?
GraphicsThe first thing I did with IceTime was sit down and make about 80% of the graphics. Determining the size of things and what would be needed where. The majority of this was the small jerseys used to show the scores. How many? 60. All 60 NHL new Rbk Edge jerseys, one home and one away for each team in the league. And then numbers 0-10 for each of these. So, in total 11x60...660 individual image files in the end. These were all done in Illustrator then scaled in Photoshop. They are based on the images available on NHL.com, and use fonts that are available, or in some cases ones I made by hand in Illustrator (the new Senators font etc.) These were made at the progress of about 3 teams a day over the period of about 2 weeks after all of the jerseys had been officially released and made available.
When constructing the actual "shell" of the widget, if one is designing for both platforms, one has to take into account that Yahoo! widgets don't flip and Dashboard widgets don't show preferences when right-clicked. The solution was, and I can hear both Apple and the Konfabulator gang groaning when I say this, to put all of the preferences in a completely different place than both advise/want/tolerate...That is to say I built them all into the main part of the widget itself. This isn't as stupid as it seems when you analyze the workings of IceTime in particular. The "preferences" are more like options and need to be changed depending on how you want to view particular information. In the original NHL widget these were in the typical places, however it became apparent that this was a major inconvenience for users. You had to constantly take the extra step to change which team you wanted to look at, which teams to show and how to show them. Sometimes you want highlighting, sometimes you don't. Etc.
With the "Options" it was a similar issue. When thinking about what type of information I wanted IceTime to be able to show it quickly became obvious that the drop-down menu method wasn't going to work. It would have been way too big to be effective. So, this was also built into the workings of the widget.
So, with the basic premise for the look of the widget down you can start dealing with other graphics. There aren't any real tricks or tools for making things look widget-like. The glass/chrome/plastic looks are the most popular ways of attaining the ideal appearance, but you'll find widgets in all different shapes and looks. It's mostly a matter of finding what works with different tools and tones in Photoshop. IceTime contains 71 seperate image files, in addition to the jerseys (of which 5 numbers are included for each jersey, numbers 0-4. All numbers over 4 are stored on-line to keep the download size down...it's already huge.)
The DatabaseWhile I was doing the graphics my esteemed associate DA was in the Big Apple creating the database which would be used for storing game scores and the schedule. This is a simple mySQL structure with about 10 fields containing team names, game times, and some other bits of necessary information. I don't envy him for the work, I did it last year, and it took about a week to enter 1600+ games. This info can't readily be pulled from anywhere, since the functioning of the widget depends on a specific set of rules. The database also generates the standings and stats dynamically etc. So, to create the look and feel of this type of widget one has to create their own data source. It's a pain, but it gives you a number of options you'd otherwise not have available to you. Such as the limiting of teams to show, divisions, etc. The major, major drawback is the fact that one must manually keep up the info. Everyday the scores are updated...it's a small price to pay.
The Basic Coding StructureWhen you select to show something on IceTime you are querying the database. Everything comes from there, how it gets to the widget and how the widget shows it is the issue you have to look at, and this takes a lot of thinking out. What information do I require, what don't I need, can I manipulate it, how much can I do with it...etc.
Once you've got a structure plan you need to get it to the widget for displaying it. The easiest way to do this is to use PHP. (A common coding language for the web for displaying dynamic information through variables. Those really long URL addresses you see that include things like
peach.php?time=today&yesterday=tomorrow. PHP isn't capable of displaying information on it's own, it's a chameleon of sorts which can take the identity of any other coding language that it chooses to output in. Javascript, HTML, etc. In this case I have PHP output the information in XML, much the same way an RSS feed works, it puts out the basic data in a format which both Yahoo! Widgets and Dashboard can read without any further changes. So, when you want to see which teams are playing today you are essentially determining the date with Javascript through the widget based on your computer's current date, this info is then sent to the database with whatever team preferences you have set, which in turn outputs the results in XML structure back to the widget for displaying.
Displaying the InformationThe combination of the code and graphics is what widgets are all about. IceTime uses the information retrieved from the database to determine not just the scores and stats, but also a large portion of the image elements. This is done through a lot of
if - else statements in the Javascript. In simplified terms it's something like this:
If the score of the game is not 0-0 the background of the game block should be the skated on ice, not the clean ice.
If the home team's score is higher than the away team's score than the lamp should appear on the right side.
If the home team is LA and the home score is 4 show image LA/home/4.png as the home team.
You get the basic idea, you can use this method to display an unlimited amount of different things in countless ways. The same information used to show yesterday's games on the widget, is the same that shows the season results in the compact way with different backgrounds for wins and losses when you choose the "Team Season" option.
The standings tables are probably the biggest problem with the widget in it's current form. The way the NHL breaks ties and orders the Conference standings is a bit tricky to script. Every time a game score is entered into the database it changes the standings by going through all of the games played and changing wins, losses, ties appropriately. Unfortunately it doesn't take into account games played, division matchups, etc when ordering their appearance. Which means teams with the same number of points may not accurately reflect the NHL's official standings tables. I'm working on this.
RSS FeedsI put RSS feeds into this widget with the hopes of offering people some bits of news, gossip, and opinions about the league. It adds a dimension of life and realism to things, and reminds people that these matches are played by real people somewhere. The Battles section came about through contact with Andy Grabia who runs the Battle of Alberta Blog. As for TheCommonFan section, last year they ran free hockey pools which were great. They were simple to use and gave people a place easily set up a pool for any period of time. Due to some licensing issues they unfortunately are unable to continue doing so, however they exist in another form that is equally beneficial to hockey fans. That is to say that they offer a place for anyone to voice their opinions, add comments, and in general discuss hockey. Look at it as every fan's blog all in one place, and so with their permission I put it on the widget. In the next update I hope to add more RSS feeds through a new option.
Mini-JerseysThese were obviously around before the widget and were not created specifically for it. They are included because they offer a slightly more personal (and hockey like) approach to minimizing the size of the widget when not in use. In addition they make a nifty way of showing your support of a certain player and team.
Differences Between Dashboard and Yahoo!Originally the widgets on this site were only for Dashboard and I had no idea how to even start making a Yahoo! version. The coding structure and format are completely different. They involve similar things like Javascript and CSS to some degree, however both require dramatically different sets of files. Dashboard is based on web standards, so if you can build a website you can build a Dashboard widget. Yahoo! despite being at first a bit imposing, turned out to be a rather easy and well documented format to learn.
The Dashboard version (with all of the on-line files) took in total about a month of work, the Yahoo! version (once the Dashboard one was finished) took about 5 days. Both formats have their own positives and negatives. Yahoo! is much simpler when it comes to instrumenting things like scrollbars and saving preferences. Dashboard is much much better at handling positioning of graphic elements and manipulating them. All in all, there isn't a clear winner on functionality and implementation. You can make something that is nearly identical in both.
ConclusionsWell, there you have it. Once all of the pieces were put together IceTime was done, tested and released.
Labels: IceTime widget
Hockey and Halloween are two things that go together about as well as cotton and a walrus, there just isn't any real connection...unless of course you consider Jason Voorhees from the Friday the 13th movies and want to make the leap.
