Tyler Mazaika

This is a dynamic, AJAX and PHP driven website built as a group project for a class on AJAX.  The purpose of the site was to allow visitors to the site view and post information about upcoming bicycle rides around Palo Alto as well as have pages for announcements and displaying older, text-file based instructions on the web.

Details of a group ride on the Palo Alto Bicycle Club website uses the Google Maps API to display the start point for the ride.

Project Requirements

The Palo Alto Bicycle Club project was a scenario-based exercise emphasizing organization and collaboration with teammates. We were tasked with making a site which allowed users to view posted rides, add rides, plus see the contents of an archived library (in .txt format) of rides. Determining the right tools for each task — and learning how to use them — was each team’s responsibility.

Tom, Archana, Vern, Jacqueline and I decided on a LAMP-stack server side and javascript on the client side. We used free Google apps for collaboration (Code and Groups). Most of us had little or no experience with javascript libraries at the time and we decided we would introduce ourselves to jQuery where we felt it could improve out coding experience and the site as a whole.

My Role

Route Library

Early in the project, I volunteered to create the Route Library, designing both the backend php script for parsing the text file and the interface which used the very handy Datatables jQuery plug-in. This was a quick and easy task because its functionality was isolated and had no impact on the rest of the site, and we used it to satisfy our first checkpoint requirement.

Integration

As crunch time came around, I assumed the responsibility of making sure all our sites components worked together, piecing together javascript functions and php scripts from all team members and making them work harmoniously together within the site. This was mostly because, since the site was hosted on my school domain, I was the first person to see where code wasn’t meshing properly. I would have slept much earlier these nights if we had been more diligent with our UML in our (rushed) planning phase, but we had numerous capable team members who could all fix bugs so the work never boiled into total panic.

Design/CSS

Although this was an ajax class, I was eager to work on my CSS skills as well so I volunteered to oversee the site design.

Part of our class involved having guest speakers come to class and help us by providing feedback on our sites. I took advantage of this and sought advice on the page layouts. Our speaker pointed out that our layout looked a little too heavy on pure information, particularly on our sidebar which at the time was a stack of unrelated elements: calendar/date-picker, links to the route library, links to the newsletter archive, advertisements. He suggested I move the links to the top navigation bar and provide a “call to action” for the remaining sidebar elements.

He did not specifically comment on the orange and blue color scheme (which was made to match the Bicycle Club logo we were required to use). He certainly could have, though… .

Lessons Learned – Project Management!

In the spirit of learning, we wanted to give each group member enough freedom to pursue their own curiosities and implement their own ideas when possible — we all wanted to learn. However, by not setting some things in stone two problematic areas surfaced over time: data structure and site architecture.

With less than two weeks to go, we had finalized neither the MySQL database schema or the return format (XML or JSON). Our dB admin was absent (a.k.a. very busy in the real world) the last week of the project so I ended up needing to make ‘executive’ calls about what information we could get into and out of our database and switching our php script to return in JSON instead of XML.

We also decided very late to completely “ajaxify” our site rather than use separate, static php pages. This was done in the spirit of taking a class on ajax but required a fair amount of reorganization of header information and form-submittal code as we could no longer simply count on a POST to cause a page reload and go to a new page.

Room for Improvement

The site technically satisfied all the requirements laid out by our “client”, but we all felt there was room for improvement at the end of the day. What follows is a brief list of recommendations that would need to be addressed before launching a real Palo Alto Bicycle Club website:

• Load Time – The page currently takes far too long to load while retrieving the weather and Amazon storefront widgets. These need to be loaded via ajax so as not to disrupt the user experience and give more of an indication that the page will load in a reasonable length of time.
• Color Scheme – Not that orange and blue and black can’t coexist happily on a web page, but the way the colors are distributed at the moment is more “functional” than it is attractive.
• Authentication – A real-world site would required some sort of authorization or at least an email address to register for posting rides and announcements. Fortunately, if the site is built in a CMS there are many tools for this purpose and for filtering out spam messages.
• Photo Library – It would make more sense for the “Photos” page to load using a Flickr widget or similar resource within the PABC site itself rather than redirecting to an external site.
• User Feedback – In general, the site could be more user-friendly by providing more clear, consistent feedback to users who are entering and viewing information.