Quicksoft Project Team 6 Team members: Brian H Johnson Brannen J Sorem Kenneth Ng, Project Manager Michael Puzon, QA Catherine Gamboa, UI lead

System DesignPalo Alto Bicycle Club

Design ConsiderationsSystem, UI considerations Low cost, using existing technologies possible Supports Mac and PC users Simple design, Easy access with users Fast access. Both review and create rides

Maintenance considerations Minimum maintenance Web master has minimum knowledge about coding No DBA needed

System Design and ToolsSystem Design

Use both Open source server and client side scripting:

Javascript, PHP, jQuery, Zend.- Form verification- gData API access

Use Google Calendar, and API for Ride Event Engine Use Google Map to display meeting address Using Google doc to maintain route library Use Flickr for photo storage Engine Use AccuWeather forecast for 5 days forecast

Development ToolsTools and Hosting

Google Code:

Hosting: http://biking2010.x10hosting.com/photos.php

Photo uploadPalo Alto Bicycle Club

UPLOAD PHOTOError Handling: Title Required File Required (must be JPG/GIF, <=10MB)AJAX Loading icon to let user know it’s working Displays message for 5 seconds, then gently disappearsFlickr API - (through PHP) Tag (persons name)

VIEW PHOTOSAJAX Loaded through Flickr - JSON Loads 10 most recent photos Hovers image when clicked using FancyboxSORT - by tags (user’s name) Error handling - if none found displays message If nothing entered, displays all photos If match found, display matched photos - case insensitive - matches anywhere in string

Graceful degradationIf user has Javascript DISABLED all is not lost!

By default, there is a box with a link to Flickr so users can still view the photos.

The code adds the gallery and upload functionality using Javascript.

WEB STANDARDS

XHTML (Valid)CSS (Valid)JavascriptAccessible (CynthiaSays Valid - Section 508)

TESTED

Apple OSX 10.6 Firefox 3.6 Safari 4 Chrome 5 Opera 10Windows 7 Firefox 3.6 Chrome 4 Safari 4 IE 8 - no Fancybox - gracefully degrades to links

DEMO time!

QuickTime™ and aH.264 decompressor

are needed to see this picture.

QuickTime™ and aH.264 decompressor

are needed to see this picture.