Harmonic Northwest

Note: This post is one of a series of posts that breaks out the individual topics of my presentation “Pimp My Web Page” given atWebVisions 2009. You can see the fully pimped page that includes the code detailed below at http://pimpedblog.harmonicnw.com. Code tested for XHTML 1.0 Strict pages on IE 6 and 7 for PC, Firefox 3 for PC/mac, Safari 4 public beta for mac.

Tracking site statistics through Google Analytics is remarkably easy. Basically you just sign up for your free Analytics account, then paste some provided JavaScript code into the bottom of your page. Simple! To get going, follow these steps:

1. Create a Google Analytics Account (www.google.com/analytics)
2. Complete signup process, copy tracking code
3. Paste the code just above </body>

You can check out a good video tutorial here.

Notes

Don’t expect the stats to start working immediately–there’s about a 24 hour lag processing data.

Also, Google Analytics doesn’t track file downloads by default, just page views. To track downloads you can add a JavaScript file from here that enables this functionality.

Filed under:
HTML, Web Development, WebVisions by Gage

Note: This post is one of a series of posts that breaks out the individual topics of my presentation “Pimp My Web Page” given atWebVisions 2009. You can see the fully pimped page that includes the code detailed below at http://pimpedblog.harmonicnw.com. Code tested for XHTML 1.0 Strict pages on IE 6 and 7 for PC, Firefox 3 for PC/mac, Safari 4 public beta for mac.

To add a Google Calendar to your web page, once again Google has some nice cut-and-paste code we can use.. just follow these easy steps:

1. Sign in to your Google Calendar account and find the calendar you want to add
2. Click “Calendar settings” from the calendar dropdown menu
3. Click “Customize the color, size and other options”
4. Customize and preview
5. Copy code
6. Paste into page

You can check out a more in-depth tutorial here.

Filed under:
HTML, Web Development, WebVisions by Gage

Note: This post is one of a series of posts that breaks out the individual topics of my presentation “Pimp My Web Page” given at WebVisions 2009. You can see the fully pimped page that includes the code detailed below at http://pimpedblog.harmonicnw.com. Code tested for XHTML 1.0 Strict pages on IE 6 and 7 for PC, Firefox 3 for PC/mac, Safari 4 public beta for mac.

Google gives you some cut-and-paste code to embed a map in your HTML, so it’s really really easy to add a map to your web page. The steps are:

1. Find map at maps.google.com
2. Click Link in the upper right
3. Click Customize and preview embedded map
4. Customize and preview
5. Copy code
6. Paste code into HTML

I won’t expand too much on this as there are already some good tutorials out there for adding maps this way. Using this method you can choose all sorts of map parameters, including map size, location, zoom level and view type (map, satellite, terrain, etc.)

Pinpointing Tip

The only other useful thing I think I can add here is a note about pinpointing the specific location. I have found that if I type a location like “Oregon Convention Center,” I’ll likely get more than one pinpoint on my map. If I want just one pinpoint, I should copy the exact address of my location and put that in the search box. So, for example, I would want to use “777 NE ML King Blvd., Portland, OR” rather than “Oregon Convention Center” to get just one pinpoint.

Using the Google Maps API

If you want to do something fancier than just embed a map on your page, then you’ll want to use the API. It’s free and there is lots of documentation.

If you just want a plain static map image, check out the Google static map API.

Filed under:
HTML, Web Development, WebVisions by Gage