Since July I’ve been working on a large web dashboard project for Tri-County Mental Health Services in Lewiston, Maine. It’s been fun learning their business and working with the great people there. Although the project is moving more slowly than I’d like, progress is good and I think it looks nice. It will certainly be simpler to maintain than their manually generated legacy Excel spreadsheets. Not only do the charts tell stories about the business impossible with tabular data, they will see significant reductions in the amount of time spent generating their business analysis tools.

The user is able to not only change the date range, but also toggle the display of each individual metric series on each chart, including goals for each. The interactive changes are made dynamically, without requiring a page load. Kinda cool, eh?

The data is culled from disparate data sources and aggregated into a Microsoft SQL Server database I designed. Some of the data is entered via web-based forms I also developed. The server side code is written in PHP and the client-side scripting, obviously, is a combination of HTML, CSS and JavaScript. I make heavy use of the jQuery JavaScript Library and the flot plotting library. All data is sent from the server to the client in the JSON data-interchange format.

Site navigation is done utilizing CSS lists and the fixed zoom buttons–which change the range of all charts on the page simultaneously–use a single CSS sprite image technique.

There’s a lot of work to do, and I’m having a great time.

TCMHS Web Dashboard

January 26, 2010 – While there is much to be done on the web dashboard, there is not enough money to do it. Today my contract is over and, unfortunately, it has not been extended. Here are a couple screenshots of the product as of today.

TCMHS Web Dashboard - AGENCY

TCMHS Web Dashboard - ADULT

css, flot, javascript, jquery, php, sql server, web development, webdev Hide

I haven’t been satisfied with The Rhetoric’s theme for a long time and have been intending to design/develop my own from scratch. In the past I’ve always selected a well-designed theme and modifying it to meet my needs.

To prepare myself for this adventure I read the WordPress Codex sections about theme development. I also read the applicable chapters of WordPress 2.7 Complete: Create Your Own Complete Blog or Website from Scratch with WordPress by April Hodge Silver and Hasin Hayder.

Yesterday I spent a long time in Photoshop doing design mock-up. The early stages were frustrating and a bit humorous as the design shifted wildly and often in not-so-good directions. I was only vaguely sure of what I wanted; I know I want a fairly simple and clean design that fits my personality.

Design mockup - The Rhetoric

This afternoon I readied a local sandbox for theme/plugin development: I created a MySQL database with a copy of data from this blog for testing, installed and configured WordPress, and created a folder to hold the files for the new theme. A development sandbox allows me to play around with the new design without confusing and annoying the visitors of the live blog.

When the new theme is done I’m going to create several custom plugins. That should be fun, too.

Then I’ll update my resume.

codex, custom, mysql, php, plugin, theme, wordpress Hide

Sometimes 140 characters just isn’t enough room to express our thoughts, activities, quotations, recipes, tutorials, diatribes, announcements, affections, tips and lessons. Our most valiant attempts at compendium often extend beyond the limitations imposed by Twitter. The solution is quite simple: all a tweeter has to do is include a URL to point to a blog post, photo or video.

But, what if the URL is too long?

This URL is 176 characters: http://www.amazon.com/gp/product/1416594787/ref=s9_intb_gw_tr02?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=1Q4Z3EN485H4KY6HXSVS&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846

URL shortening services have sprung up to satisfy the burgeoning need for shorter links. They accomplish this by storing lengthy URLs in a database table with a corresponding alias. When a user points to the shortened URL the longer link is fetched from the database and the user is automatically redirected.

While perusing tweets I noticed Justin Russell had posted a link using a short domain that looked close to his own name, http://jusr.us/. Upon inquiry he pointed me to an open source PHP URL shortener called Phurl.

(more…)

.htaccess, php, phurl, redirect, twitter, url Hide

Tweeting is nice because it’s terse; I can update my tweeps about what I’m doing, resources I’ve discovered and articles I’ve read between more lengthy and media-rich blog posts (and to publicize those posts).

The Twitter Tools plugin is a great way to integrate tweets into a WordPress blog. The most obvious benefit of this is that it keeps the content on the blog page fresh and allows bloggers to communicate bitlets of information that do not require their own post.

In addition to other worthwhile features, Twitter Tools allows a blog admin to display recent tweets in a sidebar widget, and to automatically publish tweets in a daily or weekly digest format. Twitter Tools caches tweets in a table of the WordPress database to reduce the number of calls to Twitter.

There were a few things about the plugin I didn’t particularly like out of the box. First, there was a link below the last tweet in the sidebar widget to take a visitor to my Twitter page. I prefer to have the widget title be that link. Second, the digest post title date format was ugly: “2009-06-29″ instead of “June 29, 2009″. Third, the link at the end of each tweet in the digest post had a simple ‘#’ instead of the date and time of the tweet, which also serves as a link to the original tweet.

(more…)

development, php, plugin, programming, social networking, twitter, wordpress Hide

Everybody knows what a lamp is, but how many have ever heard of a wamp?

For years I used one distribution of Linux or another as my primary operating system and mostly loved it. But Gimp isn’t Photoshop and I was tired of using my laptop to manage and edit my photo library. Photoshop CS3 and Lightroom are the programs I use most after Firefox. So I’m back to Windows XP on the desktop. *sigh*

I’ve been developing in Notepad++ lately and love it! The syntax highlighting and FTP functionality make it a wonderful environment. All I have to do is connect to the server, double-click the file to edit, make the modifications and save. The file is automatically uploaded back to the server and immediately available. It is wonderful.

(more…)

apache, development, environment, linux, mysql, php, programming, web, webdev, windows Hide

Brent Danley Photography has been ajaxified!

**The new url is photography.brentdanley.com.**

The “pages” in the gallery have previously been generated by a single PHP file. This was done by passing to itself a page parameter using the get method. This worked well except that the entire page, including images and linked scripts, had to be reloaded every time the user clicked to go to a “new” page. It was certainly better than creating a separate document for each set of thumbnails, though, even if the header and footer were reused. It made little difference to the user who doesn’t know, and probably doesn’t care, how the page is created. An asynchronous transfer would be an improvement the user would notice.

What I did today was eliminate the necessity of the page reload.

Now, using Prototype’s Ajax.Updater method, a PHP script is passed a page value corresponding the the link on which the user clicked. The PHP script retrieves the thumbnail and image information from the Flickr API using phpFlickr and returns an XHTML string to the calling method on the client. The return string from the PHP script is automatically inserted into the client element specified in the Updater’s url parameter.

function updateGallery(page){	
	new Ajax.Updater('gallery', 'ajax_gallery.php', 
		{method: 'get', 
		parameters: 'page=' + page});
}

I also performed some CSS jujitsu to animate the thumbnails when the user passes the mouse pointer over them. It was as simple as increasing the size of the images and reducing (to -1px) the size of the margins.

#gallery  a:hover .thumb{
	background-color:#888;
	width:85px;
	height:85px;
	border:6px double #003e7c;
	margin:-1px;
	padding:0;
}

Go have a look.

It still takes some time to load each new set of thumbnails. Besides caching, I’m not sure what could be done to remedy that. I’d also like for the navigation links to be better looking buttons or tabs or an accordion. And the return from the Updater call should probably return an XML document. Another day, perhaps.

Let me know what you think.

ajax, bdp, brent danley photography, javascript, php, programming, prototype, webdev Hide

It’s up.

Today I put up a temporary page at BrentDanleyPhotography.com. I registered the domain some time ago and used it as a sandbox for learning Lightbox. I’ve been feeling a ton of pressure to keep up with web development technologies. I need to be able to perform well should I be offered my dream job. I’ve been reading up on XHTML, CSS, PHP, JavaScript, MySQL and, especially, how they all come together to create asynchronous dynamic pages.

Lightbox, it turns out, is as simple as adding a single rel attribute to an anchor tag. First you must embed the Prototype JavaScript Framework and the Script.aculo.us and Lightbox libraries.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Then you simply add the rel attribute with value lightbox to any anchor tag that points to a picture. Voila!

Click <a href="http://url/to/image.jpg" rel="lightbox">here</a>.

The pictures for BDP are served by Flickr and retrieved via the API with the help of phpFlickr. I used Flickr’s machine tag feature to allow me to more precisely search the photos for inclusion in each category of BDP.

Cheers. Let me know what you think.

ajax, brent danley photography, business, javascript, lightbox, photography, php, programming, prototype, scriptaculous, web Hide

Last week I wrote PHP scripts to generate tag clouds for The Rhetoric’s sidebar. Tag clouds are a specific kind of weighted list in which words are arranged in a continuous list. The words are generally displayed with a weight and/or size that correspond to their frequency.

The first cloud I wrote was for my Flickr tags. Each picture in my photostream has multiple tags that describe the photo and allow people to find it in a search and to find similar pictures in my stream and others. The script I wrote uses the Phlickr PHP libraries to get the tags from the Flickr API and output the cloud to the sidebar.

The second cloud was for post categories on this blog. Each post has one or more categories which enable the user to find other posts with similar subjects. Instead of querying a web server using API calls, I wrote SQL statements in PHP to query The Rhetoric’s MySQL database for the category names.

The methods the two PHP scripts use to query the databases and build the data structures are very different. The code used to build the clouds, however, was almost identical. Therefore, I moved this code to functions in a seperate PHP file. This allows me to make changes to one file and have the changes propogated instantly to each cloud.

While surfing at O’Reilly I discovered a paper titled “Building Tag Clouds in Perl and PHP“. I was interested to know how the author designed his tag cloud algorithms so I purchased the paper and quickly read its 46 pages. Our algorithms are almost identical. One major improvement I made to my clouds after reading this paper was to use logarithms in my calculations of size and weights. Weighted lists, like many things, are susceptible to power curves. Throttling the sizes and weights with logarithms solves the power curve problem. In my code I use an associative array to store the tag and tag count where the author of my O’Reilly paper uses multidimensional arrays. To me an associative array is cleaner, simpler, more efficient, and faster. So he had a better idea and so did I.  It was $10 well spent.

The author of the O’Reilly paper, Jim Bumgardner, used tags from his del.icio.us site in one of the examples. I had wanted to do this for my sidebar but couldn’t find good documentation at del.icio.us. Using Jim’s code as a reference I wrote a PHP script to pull my del.icio.us tags from an RSS feed, process them through MagpieRSS, and output them to the sidebar using my cloud generation functions. It worked great in testing until I moved it to The Rhetoric. After hours of frustrating troubleshooting I went to bed. The solution to my problem came just after crawling under the covers and was crystal clear by morning. The Rhetoric’s blog engine, WordPress, must be using a wrapper function, I thought. I typed “global” in front of my tags variable and voila, it works!

code, php, web Hide

Today I wrote a script to dynamically create a cloud of categories for The Rhetoric’s sidebar. It was fairly simple with PHP, MySQL, and the WordPress libraries. I also moved some things around on the sidebar and brought back the blogroll that’s been missing since the upgrade to WordPress 2.1.

Let me know what you think.

code, php, web Hide