Category Archives: Web Development

Android Saga App – Mileage tracking

Early in January I heard about the Saga app for Android and iPhone. It bills itself thus: “Record your life automatically and share it effortlessly with the people you care about.”

It will aggregate all of your social media stuff so that you can share EVERYTHING about your online self. Well I didn’t care to share my life in that way, but I have long been looking for a way to automatically track business mileage. Apps that I have tried have not been particularly useful, mostly because I’d forget to push the START button when I head off to an appointment. The Saga app, on the other hand, tracks travel when the phone is on and with me. And it does it without draining the battery too fast.

For my purposes, I just wanted to aggregate Google Calendar data and Saga travel data. The saga app has an option to export raw data in JSON format. I wrote an online utility to process that raw export into a spreadsheet. I’ll be using that to summarize business travel monthly.

If this sounds worthwhile, you may utilize the utility here: mcguirepiano.com/saga

DHTML Menu: Friendly to No-Script Browsers

Earlier I described in my design objectives for a new website, http://www.whitebarncondo.com. This article describes the menu system used for that site.

My objective was to use a DHTML mouse-over menu to aid navigation and site layout, but to preserve good functionality for browsers which do not support Javascript or have Javascript turned off.

Here’s the demo:

If you view this demo with Javascript disabled, your experience will be much different, but very appropriate.

The demo above is also available here: http://www.duanemcguire.com/blog/menudemo/

The Javascript library I used for this implementation is from BrainJar. I made one modification the the brainjar.js library they present in their demo3 . The modification I made allows for the use of <UL> instead of <DIV> for menu containers.
Discussion
The menu is implemented using CSS, Javascript (when detected), and ColdFusion. Though ColdFusion is used in these examples, any server-side technology could be used. And in fact no server-side technology is required, but as you will see, the server-side coding creates attractive code, which leads to easy maintenance.

The core code is contained in menu.cfm:

<cfparam name="url.area" default="home">
<cfscript>
	// Server side function modifies the
	// class name of the current tab.
	// In this demo, modification is based on url of request.
	function activeTab(vArea){
		// this logic is for demo only
		// should be changed to suit the site architecture.
		if (url.area eq vArea){
			return "Current";
		}else{
			return "";
		}
	}
</cfscript>
<!--- Main Menu Bar --->
<cfoutput>
<!---
	The class of each "a tag" below is modified by the
	value of the function activeTab(area) below.
	The activeTab function returns either 'Current' or ''.
	Thus the "a tag" class is either menuButton or menuButtonCurrent
--->
<div class="menuBar" >
	<a class="menuButton#activetab('home')#"
    href="index.cfm"
>Home</a
><a class="menuButton#activetab('document')#"
    href="noscriptMenu.cfm?menu=documentMenu&area=document"
    onclick="return buttonClick(event, 'documentMenu');"
    onmouseover="buttonMouseover(event, 'documentMenu');"
>Documents</a
><a class="menuButton#activetab('community')#"
    href="noscriptMenu.cfm?menu=communityMenu&area=community"
    onclick="return buttonClick(event, 'communityMenu');"
    onmouseover="buttonMouseover(event, 'communityMenu');"
>Community</a
><a class="menuButton#activetab('contact')#"
    href="index.cfm?page=contactUs/contactUs.cfm&area=contact"
>Contact&nbsp;Us</a
></div>
</cfoutput>
<!---
Rather than putting out the dhtml menu directly, write it out with
client side script.  In that way, alternate browsers which may have
JS disabled will not see the divs at all.  We have also decluttered the
screens of these browsers if they also do not recognize CSS. We could
do this without coldfusion processing, but by stripping out CR and
TAB and escaping JS code, the menus:  documentMenu.cfm,
communityMenu.cfm, etc. are highly readable.
--->
<cfsavecontent variable="dhtmlMenu">
	<cfinclude template="documentMenu.cfm">
	<cfinclude template="communityMenu.cfm">
	<cfinclude template="communityMenuNewsletters.cfm">
</cfsavecontent>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(10),"","all")>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(13),"","all")>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(9),"","all")>

<script language="Javascript">
	document.write('<cfoutput>#jsstringformat(dhtmlMenu)#</cfoutput>');
</script>

One of the menu <UL>’s, documentMenu.cfm, is shown here:

<!--- Document Menu --->
<ul id="documentMenu" class="menu"
     onmouseover="menuMouseover(event)">

	<li><a class="menuItem" href="index.cfm?page=content/documents/white_barn_PRUD_CCRs.pdf&area=document">Covenants and Restrictions</a></li>
	<li><a class="menuItem" href="index.cfm?page=content/documents/white_barn_PRUD_bylaws.pdf&area=document">By Laws</a></li>
	<li><a class="menuItem" href="index.cfm?page=documents/communityRules.cfm&area=document">Community Rules</a></li>
	<li><a class="menuItem" href="index.cfm?page=documents/petRules.cfm&area=document">Pet Rules</a></li>

</ul>

Complete source code for this demo is available here:
http://www.duanemcguire.com/blog/menudemo/menudemo.zip

And finally, by the way, the pages look fine when viewed on the simplest of browsers, lynx:
A view of the Documents Menu rendered by lynx

Tidy Web Design

Recently I had the chance (volunteer work) to do some web development from the ground up. That’s not part of my everyday work, where I do mostly maintenance on existing web applications. I approached this project with several objectives:

  1. HTML/CSS standards compliant
  2. No Table layout
  3. Attractive, functional layout for screen sizes 800×600 and higher
  4. Javascript DHTML menus which support a good experience in a No Script environment
  5. Support the visually impaired by using resizeable fonts
  6. Provide a good print layout through use of CSS @media selector
  7. Strong use of CSS

Its still a work in progress! I’m not quite there with 1 and 2 above. I need to continue my quest in those areas. However, I’m quite pleased with other aspects of the objectives above. More later. Here’s a view of my work: http://www.whitebarncondo.com