Sox Across America - Expand this section to learn about the project.
expand
This project serves as a chronicle of my Red Sox road trips. You'll be able to see where I sat, what my ticket looked like, and any pictures I may have from the game (although some old pictures are M.I.A. right now). I'll also tell you a little bit about the game I saw and my thoughts on the stadium, fans, or city itself.
You'll also notice that some teams show as slightly transparent. These represent parks that I haven't been to yet. In those cases, you'll get some info about the stadium and what I look forward to seeing there.
For those interested in the technology, here are some highlights:
- Game data stored in XML - PHP is being used to extract and format the XML data and AJAX calls are pulling that content into the page.
- jQuery animations - all click and hover events are bound and animated with jQuery
- Deep linking - you can deep link straight to a specific team/game. For example: Phillies link.
- Progressive enhancement benefits - search engines and/or users without javascript have full access to all the data, despite AJAX being used. Non-js browsers open the overlay as a new page. This page is data-populated using the same PHP/XML as the overlay, so there are no duplicate files to maintain. Any users who get to the non-js overlay page (likely via search engine results) and have js enabled will be auto-redirected and deep-linked to the appropriate team on the full experience page.
- ADA compliant - no mouse necessary, all features are accessible using the "Tab" and "Enter" keys. When overlays are launched, items outside of that overlay are removed from the tab order to avoid accessing items you can't see. When the overlay is closed, those items return to the tab order.
- Cross-browser tested - Chrome, Safari, Firefox, IE 7-9, iPad, and Android phone.
- Exception behavior built in - The Red Sox and Hall of Fame logos exhibit slightly modified behavior. Both use the generic behavior, but additional logic allows for the variance.
- Everything hand coded - short of the basic jQuery library, every bit of code on this project was written by me. I wanted to demonstrate I could do more than just implement someone else's plug-ins.
I've enjoyed putting this together, hopefully you'll enjoy checking it out!