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.Singulair online 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.

[caption id="attachment_189" align="alignleft" width="250" caption="Sean wanted his homepage to feature prominently his upcoming events and news as well as incorporate images he supplied to provide the overall look of the site."][/caption]

Sean Friar is a young composer currently working out of Princeton and wanted to freshen up his old, flash-template website.

This site incorporates a Mailing List and an Events list which is built using custom fields in WordPress posts.

Bruce Tambling is a passionate Audio Engineering instructor at Foothill College and over the last year he has been aggressively expanding his courses’ online offerings. Having taken some of his classes in the past I fortunate to be involved in this endeavor in various stages as a helping, and occasionally guiding hand.

Bruce started out using manual content management with Dreamweaver, expanded to a custom CMS — developed by another audio engineering student and affectionately dubbed the Andrew Fitzgerald Content Management System (AFCMS) for its creator — and then settled on MediaWiki as the ideal CMS for his needs.

A detail of a Wiki-formatted portion of a software manual. Bruce uses excerpts like these to embed informative content alongside his own tutorials.

Through all stages of this project I have been active in expanding the content base for the courses, chiefly by cleaning and updating some of Bruce’s older pages and converting loads of PDF documents ranging from photocopies of out-of-print textbooks to user manuals into HTML or wiki pages. While some documents convert relatively easily this way, others require a potentially overwhelming amount of text-cleanup, image exporting and other fixings before they are presentable.

The AFCMS pages were coded in HTML/CSS but now all pages are converted straight to wiki using a combination regular-expression processing tailored to each document and an HTML-to-Wiki conversion script. In addition I’ve written a Perl script for finding images which are used in the final documents and moving those files to a separate folder to make uploading the them to site easier.

All told I have prepared about 3,000 pages of PDF source material, written a handful of tutorials for other students and look forward to continue supporting Foothill Music Tech in the future.

The public homepage of Foothill Music Tech contains recent news clippings and information about upcoming guest speakers whose presentations are recorded and archived for student viewing.

Note: The majority of the content on the site is viewable only to students currently enrolled in Audio Engineering courses at Foothill College.

XSL-rendered XML schema used to categorize various pieces of music equipment I own and use.

When I took a recent class on XML I already had a solid idea of its fundamentals from using MaxMSP and designing web pages in XHTML but I hadn’t spent time trying to construct data models or present raw data in an attractive manner.

Being overloaded with choices is a major pitfall in digital music production, so at some point this page will grow into an interface for maintaining information on music tools and associated plug-in files.

This is a major issue for Kontakt 2 which is my primary software instrument and badly needs a way to reference which instruments (out of thousands…) I use in which songs so that I can find appropriate sounds more quickly when producing music.

In the winter I took a grueling CSS class taught by Ken Seto at Foothill College. The entire portfolio, as it was turned in at the end of the class, is available at cssclass.tylermazaika.com.

Final Project

A sample website built with transparent images with "cracks" on top of a concrete texture.

The final project for the class was to style a simple page, in this case some information on Teach for America, in any way we wanted. I used this as an opportunity to try out making and using transparent images to see what kind of textures I could achieve. In particular, I wanted to see if I could imitate a cracked glass look by making some crack overly .png files and then distributing them through the page. Because we were only allowed to use static pages plus additional <div> and <span> tags for styling figuring out where to put each image is a little tricky and would be impractical for a larger site.

Now that I’ve used jQuery a bit, I intend to try automating that process to semi-randomly distribute crack or other similar “natural” features over entire sites. In the meantime, there is just the sample Teach for America project…