Category: Website Design

Many moons ago I posted about some library fun with google maps API. I’ve finally made some time to add data into the map I had for the Western Springs History (for which I also chose a new WordPress theme). Take a look at the Western Springs History interactive map, and if you like it, here some code. Libraries could use something like this to display the location of the building/s, or maybe just map out the best places to eat around the library.

The code for the map calls in an XML file named “data.xml” which should reside in the same directory as your HTML file. You’ll need to change one thing in the code before you try load it into a brower. Sign up for a google maps api key and paste it in where the code instructs towards the top of the document. You’ll likely also want to Ctrl-F to find “map.centerAndZoom(new GPoint(-87.899300, 41.812600), 3).” The first two numbers are the latitude and longitude that will be displayed when your map is loaded. The third number is the level of zoom. Unlike Yahoo! Maps, Google Maps doesn’t do any geocoding, so you can’t simply enter an address for your new GPoint. Fear not, you can use the free geocoder.us to get the lat/long data of an address.

There are all kinds of fancy things you can do with the XML, but here’s what I chose for my map:

<markers>
<marker lat=”XX.XXXXXX” lng=”-XX.XXXXX” img=”URL TO IMAGE” descr=”TEXT THAT APPEARS ON THE RIGHT” addr=”ADDRESS INFO” url=”LINK TO HOUSE RECORD”/>
</markers>

Add in as many points are you like.

Once you have an HTML file with the altered code and a data.xml file in a folder, open it up and see what happens. You can easily customize your map further by reading the Google Maps API Documentation. Also take a look at EZ Maps and the list of map projects from Mapki.

Many moons ago I posted about some library fun with google maps API. I’ve finally made some time to add data into the map I had for the Western Springs History (for which I also chose a new WordPress theme). Take a look at the Western Springs History interactive map, and if you like it, here some code. Libraries could use something like this to display the location of the building/s, or maybe just map out the best places to eat around the library.

The code for the map calls in an XML file named “data.xml” which should reside in the same directory as your HTML file. You’ll need to change one thing in the code before you try load it into a brower. Sign up for a google maps api key and paste it in where the code instructs towards the top of the document. You’ll likely also want to Ctrl-F to find “map.centerAndZoom(new GPoint(-87.899300, 41.812600), 3).” The first two numbers are the latitude and longitude that will be displayed when your map is loaded. The third number is the level of zoom. Unlike Yahoo! Maps, Google Maps doesn’t do any geocoding, so you can’t simply enter an address for your new GPoint. Fear not, you can use the free geocoder.us to get the lat/long data of an address.

There are all kinds of fancy things you can do with the XML, but here’s what I chose for my map:

<markers>
<marker lat=”XX.XXXXXX” lng=”-XX.XXXXX” img=”URL TO IMAGE” descr=”TEXT THAT APPEARS ON THE RIGHT” addr=”ADDRESS INFO” url=”LINK TO HOUSE RECORD”/>
</markers>

Add in as many points are you like.

Once you have an HTML file with the altered code and a data.xml file in a folder, open it up and see what happens. You can easily customize your map further by reading the Google Maps API Documentation. Also take a look at EZ Maps and the list of map projects from Mapki.

I spent some time redesigning and restructuring MPOW’s website. The old site wasn’t getting much attention from me because I couldn’t stand to look at it anymore. The only way to update it was to rip is apart and start over. The bad part about it is that the navigation suffered a bit, I think, but I’ve got a plan to make it better.

The good part is that the site looks so much better, and is now ACTION ORIENTED and USER CENTERED. So instead of “Readers’ Advisory,” users see “find a book or movie.” Instead of “Adult Services,” “Young Adults” and “Youth Services” users see “adults,” “teens” and “kids.”* It is still fully liquid and scales down decently to 800×600.

I’m really tickled with the corner banner reading “support your library” which Brian points out is a visual metaphor as well, holding up the webpage. If you want to put a corner banner on your site, here’s the code I used:

<div style="position:absolute;top:0;left:0;float:left"><a href="PATHTOLINK"><img src="PATHTOIMAGE" /></a>

Also, here’s a link to the support your library gif [via]

It is a small touch, but I gave people the choice of three font sizes on the page. That is, if people are aware what those As on a page do.

Also, now that it doesn’t look like junk, take a look at our Click-A-Story page. It’ll be interesting to see if anyone uses it as a podcast, if people will just listen in their browsers.

I still have a huge laundry list for the site. Some of it is wishful thinking at this point, some of it is very realistic:

• better action oriented nav
• integration with OPAC (not holding my breath, but since John Blyberg has written some great code for the Innovative ILS, maybe I can get SWAN folk at the MLS to work with me at some point.
• visual cues for being in a certain (age-based) section of the site. i don’t think it should be difficult to find some suitable color changes in the CSS. Also possibly a big, fun, “FOR KIDS” gif placed by the banner for the YS pages
• breadcrumbs leading back to a page’s ‘parent’ (i.e. teen news >> homework help) displayed on each page. this will be simple to do if I make header includes for each department
• better looking middle column content, without sacrificing its legibility
• conversation! I didn’t want to tackle enabling comments right now. easy to do technical wise, but it’ll take some time to formulate and write a policy. this one is important and we’ve gotta get it right.
• more content. the hard part.
• expose RSS where it exits. the site needs some orange gifs, har har.
• etc, etc…

We’re going to start a formal process of planning the next generation of our website in January. Participants will include a board member, four staff members and two or three members of the community.

Now that you’ve read the words, you can see some images with annotations in my flickr set new TFML site. Let me know what you think, feel free to point out anything you think is bad, and of course feel free to write me some CSS to accomplish anything I’ve listed above 😛

*note: I got the okay from the head of Youth Services to use the word “kids.” I know sometime YS librarians see the word as derogatory.

UPDATE: you too can try this at home. there are many great open source and public domain CSS layouts available on the web. this one is from ruthsarian layouts. also take a look at blue robot.

Now I’m testing Flock’s Flickr tool (say that ten times fast). Using the browser’s blog authoring tool, it is possible to pull up one’s (or anyone’s) photos on Flickr. The pictures can then be dragged-and-dropped into a blog post. I’ll choose to post one of my dog in his Halloween costume. I give you Darth Mao:

Interesting to note that the search box in Flock defaults to Yahoo! Could they be poising themselves for a buy-out already? Other options in the search box are google, amazon, ebay, technorati, and wikipedia.

Speaking of wikipedia, tonight the Periodicals librarian beat me to the punch answering a reference question about the usage of a word. She found an answer on wikipedia while I was walking to the dictionary. I tell ya, give’em an inch… 😉 She was pleased and so was I.

One more thought about Flock, or the concept of a highly personalized browser in general. Let’s say, like I have, that I set up my browser to interact with my Flickr account, blogs, del.icio.us bookmarks, and maybe things like RSS feeds and email. I’m sure other things might pop up too like calendar and netflix widgets. This is fine and dandy when I’m on my own machine, but what happens when I’m using a computer at a friend’s house? I won’t have access to my information powerhouse browser, and in fact, I might be invading his space by using a browser with all of his details. Perhaps when this stuff matures, browsers will have a login process to present you with all of your personal goodness and all of the conversations your web applications are having with each other. Right now, though, this seems like a terrifying prospect. Would you give Internet Explorer all of your usernames and passwords *for storage on the web?* Heck no.

With H5N1 going around, I wonder if they wish they chose a different name. 

I’ve been checking out flock for about 5 minutes now, and I think it has some potential.  It isn’t slow, which a good first step.  There is integration with del.icio.us and flock’s favorites, which seems quite handy. 

So let’s try and post this and see if anything blows up!

UPDATE:  I was able to pull up all my old posts in this browser’s blogging tool and edit this one.

You may recall from an earlier post that I updgraded versions of Movable Type, which I’m using as a content management system for my library’s website. The problem is that I can’t get dynamic publishing to work. Therefore I can’t easily have RSS displayed as HTML on the site.

Shifty* sent me an email that cheered me up:

Did you see 3.12 is out? “Dynamic pages are easier to configure: Movable Type creates .htaccess file for webserver configuration.”

http://www.movabletype.org/news/2004/10/movable_type_312_release.shtml

I’ll be on the case, upgrading and testing tomorrow morning.

*see, if i keep linking to her by that name, i can slowly start a meme so that eventually she’ll be a top search result for the word. why? i dunno.