Traveling Down the Information Backroad

I saw Peggy’s post about Kuler and checked it out last night. This is a great site for anyone looking to find nice color combinations for web, presentation, or print related work. If you own Photoshop you can import these swatches into the program directly, and for web designers you can get the hex# of each color in the swatch. If your district web site is a victim of “clown pants design” go to Kuler and find swatches that contain your school colors, and you’ll be able to have complementary colors in your design that won’t hurt your visitors eyes. You can even use Kuler to add some flair to banners on your site. Here’s an example:

I also ran across an article discussing recent trends in navigation design for web sites The examples shown in the article should really give you some good ideas on making nice navigation on your own site. I do think that some of their examples of what they call speaking navigation are a bit redundant and not that helpful. They also have an example of what I think is one of the worst trends in web design, what I call grey on grey.

The text is barely readable, and I’ve even seen web sites that use this color combo for body text. In my opinion, it’s awful. Another design trend that is shown on the site is vertical tabs, which I wouldn’t use either. Coolness should always take a back seat to readability.

[tags]adobe, kuler, web design, web color, navigation[/tags]

I really don’t like writing posts about issues with my blog, but I wanted to make you aware that a few things are broken,

First, the “Article Series” plugin doesn’t list how many articles are part of a series. If you go to the Category section in the right column of this blog and click on Web Design For Schools, you still see all of the articles. It’s just broken where it is supposed to list all articles within a series post.

Second, I can’t add books to “Now Reading”, and I have three more I’ve wanted to add to the list.

These problems seem to be a result of upgrading to WordPress 2.33. In the case of “Now Reading” a fix will eventually be on the way. I’ve heard nothing if the Article Series plugin will be fixed

[tags]wordpress, 2.33, plugin[/tags]

I think that Greybox is a more useful AJAX Javascript plugin than the Lightbox script I posted about yesterday. With Greybox you can show individual photos or slideshows, and you can also open windows that contain pages from other sites as well as your own site. I’ve used Greybox to great effect in my maps project, and this functionality actually saved me a bit of extra coding, as well as giving a nice look to the app.

Below is a simple demo I’ve done of basic Greybox functionality, but I’m sure anyone can come up with some creative uses to add pizazz and functionality to a web site:

Greybox demo

Here’s the link to the Greybox site. When you download the scripts, make sure to check out the samples and documentation. I also want to point out a possible error in the installation instructions.

The instructions point out that “GB_ROOT_DIR is the URL where static files are located. GB_ROOT_DIR is the greybox directory that is a part of the Greybox package you download. The instructions further state that “GB_ROOT_DIR should be absolute”. For anyone not familiar with HTML coding, absolute simply means to use the full URL to a directory or file. In the case of my example page linked above, I called GB_ROOT_DIR like this:

<script type="text/javascript">
var GB_ROOT_DIR = "http://johnrappold.org/gbdemo/greybox/";
</script>

This didn’t work, but what did work was to use a relative URL, which simply points to the directory in my gbdemo folder:

<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>

I hope this saves you some troubleshooting time if you find that Greybox can’t find your pictures or pages in your links.

[tags] greybox, ajax, javascript, web design[/tags]

Note – After publishing this post I’ve noticed odd behavior for the Lightbox WordPress plugin. In Firefox there seems to be a CSS problem, so navigation doesn’t display properly. In IE6, the lightbox effect only works if you click on Photo 4 first (which is the only photo that is on the server, the other photos are fetched from flickr). The Jet Photo site link works just fine, and I know Lightbox works fine on other pages. This is either a plugin problem or a WP theme compatibility issue. Tomorrow I’ll have two alternatives for you.

One of the cool things about using AJAX for web development is being able to choose from a wide variety of little widgets and plugins to add either functionality or “eye candy” to a web site. AJAX plugins are mostly Javascript in nature, and far from being some sort of mysterious, obscure, and hard to implement code that only web developers can use, many of them can be added and managed easily by anyone with just a bit more work. Usually the method is as simple as adding a couple of Javascript code folders to your web site and then adding the scripts to your page within the <head> section of your HTML.

One of the easiest to use of these tools is called Lightbox, which allows you to add a nice interface for displaying image files. This script is available for regular web pages, and also as a WordPress plugin. It does require that you add a couple of Javascript AJAX-enabled script libraries (just folders with scripts) to your web site. The WordPress plugin takes care of this for you. Whether you install lightbox to your web site, or use the WordPress plugin, using the script is extremely easy. Here’s how to show a single picture:
image #1

All that needs to be added to your image link is rel=”lightbox”. If you add the HTML title attribute to your link it, will appear as a photo caption. You can also group as many photos as you want into a gallery simply by adding a common group name within square brackets as shown here:

image #1
image #2
image #3

A single photo example:

Leaves on Blue Brick

Here’s an example photo gallery using the Lightbox WordPress plugin:

photo1
photo2
photo3
photo4
photo5

Next post I’ll show you a similar AJAX plugin that will allow you to add window overlays, similar to what Netflix uses.

Links

Lightbox page

Lightbox WordPress plugin

Lightbox Image Gallery Using Jet Photo Studio

[tags]lightbox, wordpress, blog, plugin, ajax, photo, gallery, web design, javascript[/tags]

I first learned of the Folding@home project from a vidcast of dl.tv about 8 months ago. The project at Stanford University uses distributed computing to simulate protein folding. I can’t pretend to understand anything about this, but I do understand that by learning about protein folding and unfolding, scientists can make a big leap forward in the prevention and treatment of diseases, and I’m all for that.

To become a part of the project, you simply download a software application. Folding@home then sends a Work Unit for simulation, and after your app has completed the calculations of your work unit, it is uploaded back to Stanford.

Like a lot of things in life, I filed the information in my mind, but had never downloaded the application. When I purchased my Sony PS3 a few weeks ago I was surprised to find that Sony had developed a Folding@home application specifically for the game system. I clicked the icon on the PS3 menu system and a few minutes later I was ready to go. To make things fun, you can participate in teams, so I joined the dl.tv team since I first heard about the project from them. Folding@home publishes team stats and top contributers, and at this time the dl.tv team is ranked 13th.

I have to say that the application looks exceedingly cool on the PS3. The background features a revolving map of the earth with every PS3 console currently active indicated by a yellow dot. On the right side of the screen are stats about your current work unit, how many work units you have completed, time remaining on your work unit completion, etc. Below this information is a 3D simulation of the actual protein you are working on. You can make the protein fullscreen, and move through and around it using the game controller. You can also pause and zoom in on the world map. You can even select music “channels” to play as you view the information.

One other interesting thing to note is that Folding@home says that because of the Cell Processor of the PS3, it is 10 times faster than normal PCs in doing calculations. Because of this, the project uses the PS3 for different work than a normal PC.

I run the application before I go to bed. that Folding@home says is the normal time PS3s are mostly used. I usually run it about 8 hours.

This would be a fantastic project for a school, or several districts in Ohio to form a team to use their machines off-hours to contribute to a worthy project.

Links:

folding@home – Main Site

Official Blog

Sony Folding@home site

Tags: folding@home, stanford university, dl.tv, dltv, sony, ps3, k-12, edtech

One year of blogging as of Sunday. According to Google, I average about 474 “visits” per week. That’s not a lot, but not too bad considering the narrow appeal of my topics on the blog. Lately I’ve slowed down on my posts here, not because I’ve lost interest, but because I’ve been busy. I’m working on a few web projects for SCOCA, I’m about ready to roll out my Photo blog, and I’m getting my podcast site tweaked right now. I’ve also been busy exploring online connectivity and tools with my phone, and the rather strange combination of the Sony PS3 and PSP.

Speaking of the podcast, I’ve lined up five guests for the first show and it should be good. I’m already thinking of the topic and guests for the second show. Right now I’m not sure who my audience is. Show number one is geared more towards technology coordinators and school administrators, while the second show would appeal more to classroom teachers.

I have a number of subjects I want to post about here, but they require lots of writing due to the subject matter and my unbridled verbosity. Once I get the photo and podcasts sites running, I should be back to more regular posts.

Thanks for taking time to read articles here, and please be patient as I begin to add other content.

One of the applications I mentioned in my session at the eTech Ohio Conference was TrackMe, which allows people to view your position in Google Earth as you travel.

TrackMe consists of an application for a GPS-equipped Windows Mobile 5+ device, and a web application that creates the KML file. If your device has a camera or an easy means to transfer photos from your camera, you can also upload photos with annotations as part of the Google Earth file. You’ll also need a good phone data plan for live uploading, or you can save everything to your device and upload later when you are near a wi-fi spot or PC. Here’s a link to the trip back from the eTech Conference to SCOCA. I took a picture at Captain D’s in Circlville where we had lunch, and a picture of SCOCA on our arrival:

Columbus to Piketon

TrackMe is free, and can be found here:

http://forum.xda-developers.com/showthread.php?t=340667

[tags]trackme, google earth, kml, kmz, geoweb, geotag, gps[/tags]

Josh and I are working on a couple of projects, and I hope to post some info soon about them, as one in particular is going to be very cool. While you’re waiting for that post, check out Josh’s post about his recent trip to Malawi, Africa, and make sure to click the link to the photo gallery. He always comes back with great pictures of kids. By the way, Malawi is one muddy place.

Tags: josh leeth, malawi, africa, picture. photo, gallery

I’ve been wanting to do a podcast series for quite awhile. It takes me a long time to think through things, but I’m finally ready to get started and I’m lining up guests for the first show.

The overall direction of the podcasts will be mainly geared towards tech coordinators to learn about online applications that can be used in school districts. and of course web design and best practices. I hope to strike a fine balance between avoiding a lot of educational and tech jargon, while trying to provide the best information.  Far from being an expert on all of the subjects I want to cover, I hope to learn just as much as the listeners.

For the technical side of setting all of this up, I plan to use Skype coupled with Pamela, a plugin that records Skype conversations. I’ll edit with Sony Vegas, which has excellent audio tools. I had originally planned to use the Podpress plugin for WordPress, and dump the shows in this blog, but I’ve decided to use another open source podcast-specific blog app called loudblog. I’ve used loudblog before, and really liked it. My holdup right now is that I don’t like any of the theme templates, so I’m rolling my own, based on a wordpress theme.

I’ll post relevant iinks and more information here, as I get closer to the first show.

[tags]podcast, podpress, loudblog, skype, pamela[/tags]

Although there are a few errors, this is still a nice article that appears in today’s Chillicothe newspaper:

 http://www.chillicothegazette.com/apps/pbcs.dll/article?AID=2008802170313

[tags]scoca, itc, ohio, chillicothe, piketon, k-12[/tags]