• images
  • December 19, 2006

I received a call earlier this month from Hillary, a motivated young entrepreneur. She had already started a small business with her brother and sister and they wanted to create a website. Like most small businesses, they could not afford to hire a professional web designer to author, host and maintain their web properties. Consequently, they were researching how they can learn to do it themselves. After Hillary called me with her query, I composed an email with the first steps to getting started. I realized others out there might be facing the same kind of questions and so I decided to start a multi-part post to share the ideas and strategies that Hillary and I discussed.

Step 1 – Learn HTML

First off, you need to learn HTML (stand for Hyperext Markup Language). You don’t have to buy anything to start learning how to create web pages with HTML. Just open notepad and enter the following:

<html>
<head>
<title>The webpage title goes here</title>
</head>
<body>
<h1>This is a big heading</h1>
<h2>This is a slightly smaller heading</h2>
<p>Paragraphs are generally marked like this one. Within paragraphs you can have <b>bold</b> and <i>italic</i> text.</p>
</body>
</html>

Save this file on your desktop with any name. Click on the file on the desktop and change it’s extension from .txt to .htm (If you don’t see a .txt behind the filename, you need to unhide extensions. Do the following:)

  • Go to Start | My Computer
  • Select “Folder Options…” From the Tools menu
  • Select the View tab,
  • Uncheck “Hide extensions for known file types”
  • Click OK

Once you’ve renamed the file, double-click it and it should open in your default web browser (most likely IE7 or Firefox)

HTML is really pretty simple. It’s just text with some tags. Tags typically surround the text that you want to do something special to. For example to bold some text you surround it with a ‘b’ tag (b stands for bold) like so:

<b>some bold text</b>

Opening tags have <>s around them and closing tags add an extra / between the < and the first letter of the tag name. The only tags that must be in a webpage are the HTML, HEAD and BODY tags. The HTML tag should be the first tag in a webpage, and consequently its closing tag should be the last tag in a webpage. The first tag inside a HTML tag is the HEAD tag. Within the HEAD tags you describe the features of the webpage. Most commonly you use a TITLE tag to specify the title of the webpage. You can use other page wide tags within the HEAD tag. Once you have closed the HEAD section using a closing HEAD tag, you should begin the BODY section using an opening BODY tag. The majority of the contents should go in the BODY section. (within the BODY tags) Don’t worry if you forget one. Most browsers are very forgiving and will try to guess what you meant. However, computers that guess often guess wrong so if something doesn’t look the way you expect it to you should check your tags to see if any were missing or forgotten.

Some tags stand on their own and don’t need to surround text, as in the ‘hr’ tag. In which case you use just use a single opening tag <hr>. Recently people have decided this is ambiguous since you can’t tell if the author expected not to close the tag or just forgot to close it. So instead, they want you to do it like this <hr/> indicating that you intended to use the tag with no closing counterpart. Most browsers will graciously handle both in case you are old school or new school in your HTML usage.

Some tags have attributes. For example if you want to create one of those underlines (called a link) where you click on it and it goes to another page you use an ‘a’ tag (a stands for anchor, I don’t know why they call it anchor) with a ‘href’ attribute indicating the url you want to go to when the user clicks the link. For example:

<a href=”http://www.seank.com”>Click here to go to my website</a>

The best place to learn what all the different tags are and what each of the possible attributes do is at the Microsoft Developer Network website. To find the page that lists all the HTML tags do the following:

  • Goto http://msdn.microsoft.com/
  • Click on Library on the topic bar across the top.
  • Click the + in front of Web Development in the tree on the left
  • Click the + in front of HTML and CSS in the tree on the left
  • Click on HTML and DHTML Reference in the tree on the left
  • Click the HTML Elements link about half way down in the page on the right.

Here you will find the exhaustive list of all HTML tags. Try them out and see what you get.

From here I would recommend browsing web pages on the Internet. When you find something that looks interesting and you’d like to know how they did it, select Source from the View menu. (IE7 hides the menu bar. You can see it by pressing Alt-v)

Step 2 – Find a domain name

Once you have a handle on HTML and have a webpage created that you’d like to put on the Internet, the next thing you will want to do is reserve a domain name.

Go to http://www.godaddy.com/ and do a domain search. Type your desired domain name. It can have letters, numbers and hyphens. No spaces or anything else. Then select your TLD (Top Level Domain) .com .net and .org are the most popular. Originally .com was supposed to be for commercial websites, .net for networking infrastructure websites and .org for non-profit organizations but for a while the official website for the Seattle Mariners was seattlemariners.org which is a pretty good indication that no one knows or cares what they stand for. Personally, I’d recommend reserving all three if they are available. I did this with a few of my websites.

That way, you can go to http://www.somesite.com, http://www.somesite.net, or http://www.somesite.org and they will all take you to the same place. I didn’t do this back when I registered http://www.seank.com and so if you go to http://www.seank.net or http://www.seank.org you’ll get someone elses site. Of course back when I registered seank.com it cost $50/year and not $9/year so I had a good excuse. You probably don’t need private domain registration if you already have a PO box for your business, otherwise it might be a good idea since you must provide a mailing address and an email address and this information will be public. To see the difference do a domain search on google.com You’ll see a message that the domain is taken. To the right of that is a link that says (click here for info) You’ll see Google’s address and email address. Now do a domain search on seank.com when you click the (click here for info) You’ll see some address in Arizona and a cryptic email address. I paid extra to make seank.com a private registration. Unless you choose a private registration, the email address that you provide will get a considerable amount of SPAM. Before I had private registration, I had my public email addresses setup to automatically delete anything that doesn’t come directly from godaddy.com. You can do this easily with the email package from your webhost, so when you register you could give the webmaster@whateveryouendupregistering.com as the email address. This is a good one since a lot of spammers will send email to the webmaster address anyway even if you don’t use it. Once you’ve found the domain name you want, just follow the steps to register it. Don’t sign up for free email or anything and just parking the domain for now.

Finally, go to http://www.webhost4life.com/default.asp?refid=seank and pick a webhosting plan. You can probably get by with the Basic Plan unless you think you will need more than 8 unique email addresses (They say 10 but one of them is postmaster and you’ll need another one to be webmaster), or you know for certain you’ll want ASP.Net or MSSQL instead of MySQL. I’m sure you can upgrade later if you find you need one or more of those so don’t feel like you have to over-buy now. When you sign up for webhosting they will ask you your domain name and then provide instructions on what domain name servers (DNS) to point to. You’ll need to then login to your godaddy.com account and unpark/update your DNS entries. Once you do this it typically takes anywhere from an hour to 24 hours for the new name server information to propagate its way around the internet and there you go.

From here you’ll want to upload your web pages and so forth, but we’ll have to cover that in part 2, you are probably already feeling overwhelmed. Feel free to comment if any of this is confusing. I’m more than happy to explain it. What is outlined here is a great start to hosting your own website. No matter how big or small your web requirements. GoDaddy and Webhost4Life are both outstanding services that scale well. You won’t be painting yourself into a corner with either of them.

I’ve been promising to write a post about scripting in Xbox Media Center and so here it is. In case you haven’t heard, Xbox Media Center is the single biggest reason to go out and buy an old Xbox (not 360). It can access media from just about any source, be it local, FTP, SMB or UPnP so you can play movies, or play mp3s while viewing a slideshow of your photos or just watching the awesome Milkdrop visualizations. It will also launch your Xbox games and even display the weather for up to 3 customizable locations. Both my brother and I are heavy XBMC fans. He uses a Plextor PVR to record TV shows and then saves them to his 2TB server, then he accesses them from one of his three Xboxs (he has one for each TV in the house). I obtain my content from a variety of sources (Windows Media Center, TiVo, Podcasts and Videocasts, etc) and store them on my Buffalo NAS and then access them from my Xbox in my living room or the PC in the kitchen upstairs.

One of the coolest geek features of XBMC is its integrated support for python scripts. Most copies of XBMC come with a few scripts already installed. One of the quick favorites is called XBMCScripts. This script will help you download and install other scripts. Like most open source projects, the documentation and support are kind of lite, but if you are not afraid to dig in and try to figure things out, there is enough there to get you started. What follows is a narrative of my adventure discovering how to write my first script for XBMC.

The Goal

Being really into podcasts and videocasts, I wanted to write a script that would list the podcasts or videocasts in a RRS feed and let you download and play them directly on XBMC. I realized that the MultiRSS Reader would be a great place to start as that was almost exactly what I wanted to do. So I connect to my Xbox using Filezilla and downloaded the MultiRSS.py file from the XBMC/scripts directory. Next I opened it up and gazed at the code. Now, I’ve written programs in BASIC, 6502, Pascal, Fortran, iSETL, Redcode, C, 68000, C++, Visual Basic, VBScript, JScript, Perl, C#, PHP and a few more I don’t remember so alot of it looked familiar, but after trying to make a few obvious modifications, it became clear I would need to read some documentation. Thus began my first hunt.

Information Gathering

I started by combing over the XBOXMediaCenter site until I found the wiki page titled Building Scripts this gave some great background information as well as a link to XBMCScripts. From here I was able to download lots of script to use as samples. I also found the most useful link of all to Alexpoet’s XBMC Scripts.Alex shares a few scripts, a XBMCEmulator script and a great tutorial! I also found links to what looked like automatic generated documentation to the xbmc and xbmcgui imports.

After reading the tutorial I wanted to try to install the emulator so I read through Alex’s installation instructions and got a desktop installation of Python up and working. The online documentation that I could find for Python stinks compared to say PHP, but if you take the time to download and unzip the complete documentation it is very good and very thorough.

Synthesis

At this point I realized that python was more bolted onto XBMC than integrated into it. This is good and bad. Good, because python has a rich set of support libraries that makes it very easy to do very powerful things and also good because that meant I could do most of my development on the desktop which greatly sped things up. However it was bad because it meant that accessing the features unique to XBMC could be spotty (which they were). As I was working with MultiRSS.py I quickly realized that it was designed to handle RSS feeds that were signifcantly smaller than the ones I wanted to handle. So I would need to use a different parsing method. I also want to handle OPML directories of RSS feeds and some of these could be huge ( > 2MB ). I eventually discovered and settled on using the xml.parsers.expat library as it lightweight enough to handle monsterous files and could easily be made very robust and recoverable (something I came to appreciate in python scripts). 

Providence

When the student is ready the teacher will emerge….

It was here that I had a most happy accident. I had been playing around with MC360, a very cool skin that almost exactly mimics an Xbox 360 (I know because I have an Xbox360, though it is hardly ever turned on), and noticed some .py files in the extras directory. Here I realized that some of the functionality of this skin was coded in python. I opened up one of these .py files and saw code like the following:

self.addControl(xbmcgui.ControlImage(0,0, 720,576, 'background-green.png'))
self.addControl(xbmcgui.ControlImage(70,0, 16,64, 'bkgd-whitewash-glass-top-left.png'))
self.addControl(xbmcgui.ControlImage(86,0, 667,64, 'bkgd-whitewash-glass-top-middle.png'))
self.addControl(xbmcgui.ControlImage(753,0, 16,64, 'bkgd-whitewash-glass-top-right.png'))
self.addControl(xbmcgui.ControlImage(86,427, 667,64, 'bkgd-whitewash-glass-bottom-middle.png'))
self.addControl(xbmcgui.ControlImage(70,427, 16,64, 'bkgd-whitewash-glass-bottom-left.png'))
self.addControl(xbmcgui.ControlImage(753,427, 667,64, 'bkgd-whitewash-glass-bottom-right.png'))
self.addControl(xbmcgui.ControlImage(60,0, 32,576, 'background-overlay-whitewash-left.png'))
self.addControl(xbmcgui.ControlImage(92,0, 628,576, 'background-overlay-whitewash-centertile.png'))

A quick grep in the skin directory revealed that these files were actually contained in the monsterous Textures.xpr file. So I opened Textures.xpr in my favorite hex editor (Notepad) and lo and behold there at the beginning of the file was a list of all the resource files contained therein. I quickly copied and pasted and cleaned this up into a nice list of resources for the MC360 skin and then I opened the main Textures.xpr and created another nice list of resources for the Mayhem skin. Next I wrote a quick script called ResourceBrowser that merely displayed each Mayhem resource (full-screen) one at a time. With this new found list of resources it was a simple task to create a harness that used xbmc.getSkinDir to determine which resources to try and load.

Hack and Slash

At this point I had a desktop python script that would read RSS and OPML files and parse out the enclosures and an XBMC python script that would display the right kind of UI. All I had to do was merge the two together. Here is where I ran into my first limitation. Since I was working on this at work (long story, don’t ask) I discovered that I couldn’t access the internet, because I was behind a corporate firewall. I had configured XBMC to access the internet through our proxy server, but those settings are not accessible from script, so scripts have no way of knowing what proxy settings you have configured in XBMC.

Before I just added proxy server info to my own settings, I decided to do some poking around. Being fairly confident that I had found all the documentation there was to find on the internet for XBMC, it was time to look at the code. I found the link on XBOXMediaCenter to the SourceForge project and quickly discovered that I could browse the CVS directly from the web. I eventually determined that the code behind the xbmc and xbmcgui imports was in /XBMC/xbmc/lib/libPython/xbmcmodule/ I also discovered browsing the code in xbmcmodule.cpp that a list of all functions that could be called from xbmc.executebuiltin were listed here and all the functions that could be called from xbmc.executehttpapi were listed here. It was here I noticed the FileDownloadFromInternet function. So I ripped out urllib and urllib2 and all the code that went with it and replaced them with a single call that merely downloads the feed to temporary file on the Z drive. I also noticed that built-in PlayMedia command works a lot more consistently than downloading to a temporary file and calling the xbmx.Player().play() function. Why, I am not sure.

Release

So without further ado, here is my first XBMC python script. (I’ve also tried to post this on xbmcscripts but just in case it gets rejected for some reason I’ll leave it up here as well.)

Media Feed Browser – Allows the user to browse a configurable set of RSS and OPML feeds and play any content contained therein.

  • images
  • October 31, 2006

I saw this picture and it made me think of friends who heat with wood, especially since it is getting really cold early this year.

One of the things I enjoy alot is my time around the dinner table with my family. It seems like everyday, I come home with something interesting to talk about that I saw on the internet. Here is the list for tonight.

First, Tim Tucker has come up with a great idea. Merging the fun of play Tetirs, with the bored of regular exercise. Checkout Tetris Weightlifting. This is a lot more exciting that Dance Dance Revolution. Primarily, because I don’t have to put quarters dollars in a machine each time to exercise, and I love Tetris.

Schwinn has a line of electric bikes. The motors are in the front hub and the batteries are very small and very high power.

Finally, someone has slowed down Alvin and the Chimpmonks so you can hear how the real singers sound. This is almost a homeschool science and technology unit study in the making.

  • images
  • October 12, 2006

We were blessed with a happy accident this last weekend. We were intending to go see the Dead Sea Scrolls at the Pacific Science Center, however, upon arriving we learned that the exhibit was sold out for the day and so whilst wondering around the Seattle Center wondering what to do with our day, we discovered that this weekend was the annual NWBrickCon! We saw all kinds of lego creations and I expect this will become an annual event for our family.




















For thos interested, I picked up a little card there with the following links for more information.

  • images
  • October 5, 2006

Look forward to a great post on Xbox Media Center and python scripting therein. I’ve been working really hard at work to put together some great stuff but I’m not quite ready to share.

Until then I did want to shout out to Alex, who submitted a great post on folding roses from maple leaves. As the owner of a larger maple tree and the proud husband of a very creative wife and father of 4 very creative children, I’m sure this will make the fall season very interesting around our home.

  • images
  • September 23, 2006

I just spent some time learning that a nifty little feature in WordPress will make your blog show up as a blank page on some versions of Internet Explorer 6.0. I say some because I have 3 computers at home, 2 with IE 6.0 and one with IE 7.0 beta. I could only produce this on one of my machines with IE 6.0 and so I immediately suspected a virus of some sort. After running a virus scan with eTrust and then running Spybot Search and Destroy, everything came up clean. So next I logged into the control panel of my webhost and started editing files. First I changed index.php in my root to see if I was evening getting to my webpage. I thought the problem might be a redirector incompatibility with my host and so I wanted to rule that out. When I saw that my index.php was actually get executed, I started hacking WordPress.

The first file that WordPress loads is wp-blog-header.php which does a little sanity check at the top followed by the following bit of code:

require_once( dirname(__FILE__) . ‘/wp-config.php’);

wp();
gzip_compression();

require_once(ABSPATH . WPINC . ‘/template-loader.php’);

endif;

I made the following changes trying to narrow down the problem.

require_once( dirname(__FILE__) . ‘/wp-config.php’);

echo "Got Here";

#wp();
#gzip_compression();

#require_once(ABSPATH . WPINC . ‘/template-loader.php’);

endif;

When I saved and pressed refresh in the browse I saw "Got Here". Next I made the following changes.

require_once( dirname(__FILE__) . ‘/wp-config.php’);

wp();

echo "Got Here";

#gzip_compression();

#require_once(ABSPATH . WPINC . ‘/template-loader.php’);

endif;

That worked to. So finally on a hunch I tried this.

require_once( dirname(__FILE__) . ‘/wp-config.php’);

wp();
#gzip_compression();

require_once(ABSPATH . WPINC . ‘/template-loader.php’);

endif;

And it worked. Turns out I had enabled the "WordPress should compress articles (gzip) if browsers ask for them" option and apparently IE 6.0 asks for compressed articles and then fails reading them or something. When I unchecked this option I was able to uncomment out the line above and everything was good to go.

  • images
  • September 20, 2006

Micah got hooked up on an Insulin Pump today and the whole family celebrated by going out to dinner at Krispy Kremes. It’s been over 6 years since Micah has been able to have 3 donuts and a bottle of Milk at the same meal.

  • images
  • September 19, 2006

Today is Primary Election Day in Redmond, Washington and there is a new kind of Democracy at work. A Democracy where only the technologically savvy are allowed to vote. And the best part is that we have managed to keep the plebs out surreptitiously rather than using any high profile methods that might attract attention to this new world order that is under construction.

Back when I was a kid growing up in suburban San Diego, California, I would often confuse Election Day with Flag day because you would see homes, churches, schools, or libraries absolutely littered with flags and signs that read “Vote Here.” It was exciting, and you could hardly miss it. All you had to do was stop by the Polling place nearest your home and vote, or register to do so in the future. Any old 18 year old, no matter how bright, could easily get involved in the democratic process.

Here is a picture of my polling place today taken from my cellphone across the street.

The polls from the street

No flags, no signs, no nothing! Here is a picture standing right in front of the main entrance.

In front of the polls

The only hint is a tiny litte sign on the inner left pillar that says Vote and then something asian underneath it. To find this polling place I had to search Google for this website and find the link that says “King County polling places” where I could download a PDF that you must be fairly proficient with Adobe Acrobat Reader or Foxit Reader to read since the font is microscopic. The PDF contains the locations in order by district. (a 6 digit number with a hyphen between the second and third digit) You can decode this number from the mailing address label on your voters pamphlet if you were luck enough to have kept it.

Isn’t that sneaky? If they had instead asked people to complete a computing and internet competency test before allowing them to vote, there would be a riot. But not this way, no one will ever suspect. I fgiure this makes my vote count more since untold numbers of potential voters will never know or suspect that this day was any different from any other Tuesday.

SquidSoap 

I came across two interesting sites today. The first sells a soap that teaches children how to wash their hands while they are washing their hands. Kind of a learn by doing approach. The trick is that the dispenser has an ink blotter on top that will dispense an ink mark on your childs hand when they dispense the soap. The ink is designed to come off after 15-20 seconds of scrubbing.

The second site I found from an article about using a timer to help your children learn to concentrate. Perhaps I should consider this technique as opposed to the lecture approach that tends to get abstracted and abstracted and overly generalized.