ColdFusion in Transit action
1 like•392 views
This document summarizes a presentation given by Theonic Way of Fig Leaf consulting about their work redesigning the Washington Metropolitan Area Transit Authority (WMATA) website. It discusses the background of the current WMATA website, visions and solutions for the new site, and a demo of features like trip planning, alerts and the content management system. The new site uses a ColdFusion, Node.js and CommonSpot CMS architecture to improve responsiveness, integrate APIs and enable content authors.
ColdFusion in Transit action
- 1. Archdiocese of Baltimore (AOB) Web Presence Redesign C108: ColdFusion in Transit Action Theonic Way VP of Consulting, Strategy & Operations [email protected] https://www.figleaf.com | https://training.figleaf.com
- 2. Customer Case Study: Design & Development of the new Washington Metropolitan Area Transit Authority Website https://beta.wmata.com
- 3. ❏ Intro. to Fig Leaf (~5 min) ❏ Background on current WMATA.com (~5 min) ❏ Visions & Solutions for new WMATA.com (~40 min) ❏ Demo & Announcements (~10 min) Agenda at a Glance
- 4. Introduction to Fig Leaf
- 5. Our Profile / figleaf.com ❏ Founded in 1992 ❏ Certified Service-Disabled, Veteran-Owned Small Business (SDVOSB) ❏ Corporate HQ 1400 16th Street NW Suite 450 Washington, DC 20036 202-797-7711 main ❏ Senior Executive Team with Certified ColdFusion Developers, Certified Technical Trainers & Authors ❏ President & Founder - Steve Drucker ❏ CEO - Dave Gallerizzo ❏ CTO & Co-founder - Dave Watts
- 6. Our Services Consulting ❏ Content Strategy, Usability Review & Analysis ❏ UI/UX, Web Design & Branding ❏ CMS (Drupal, CommonSpot, Episerver, Sitefinity, WordPress) ❏ Web App Development (ColdFusion, Node.js, ExtJS, PHP, .NET, Sencha, JavaScript, HTML/CSS) Training & Courseware ❏ Developed Official Adobe ColdFusion Courseware & Salesforce Lightning & Trained more 35,000+ Web professionals ❏ Adobe, Acquia, Google and Sencha Training Partner: https://training.figleaf.com Managed Services ❏ Amazon Web Services (AWS) Cloud Hosting & Premier Support Services ❏ Microsoft Azure, Google Cloud
- 7. Our Key Technology Partners
- 8. .GOV, .EDU, .ORG, .COM CF Clients nps.gov umuc.edu dcbar.org customermap.exim.gov belden.comashcroft.com uwstout.edu wmata.com uwp.eduuwsuper.edu
- 9. ❏ Intro. to Fig Leaf & Our Relationship with ColdFusion ❏ Background on current WMATA.com ❏ Visions & Solutions for new WMATA.com (~40 min) ❏ Demo & Announcements (~10 min) Next on Agenda
- 10. Background on Current WMATA.com ❏ Non-responsive Design & 60% of traffic from mobile ❏ Powered by ColdFusion 10, IIS, MS SQL, Google Custom Search Engine ❏ Limited CMS ability with custom-built tools ❏ 8-year-old design & 22M page views per month
- 11. Key Audiences & Traffic ❏ Savvy Daily Commuters, Out-of-town First-time Transit Passengers, Vendors and Contractors doing business with WMATA, WMATA Internal Users ❏ About 3⁄4 of visits to the site are local to the DC area; Over half of traffic from searches involving the terms WMATA or metro; A third of traffic comes to the site directly. ❏ Referral traffic from related WMATA web tools, local government, and other local transportation websites.
- 12. Redesign Objectives & Scope ❏ Simplify Trip-planning, Fare-finding, Next Bus/Train Arrival with Visual elements & Interactive Maps ❏ Provide effective, compelling communications for breaking news, real-time alerts and advisories ❏ Mobile-first Responsive Design ❏ User-centric Action-oriented IA ❏ Three Visual Design Concepts ❏ Built with Adobe ColdFusion 10+/ IIS / MS SQL ❏ < 2s page load time ❏ Hosted inside WMATA on-perm datacenter
- 13. ❏ Intro. to Fig Leaf & Our Relationship with ColdFusion ❏ Background on WMATA.com Redesign ❏ Visions & Solutions for new WMATA.com ❏ Demo & Announcements (~10 min) Next on Agenda
- 14. Creative Visions: Minimal, Flat, Clean & Modern
- 18. Interactive Trip Planning with Visual Maps
- 19. Rider Tool: Trip Planner
- 21. Rider Tool: Service Nearby
- 23. CMS Solution: CF-powered CommonSpot
- 24. PaperThin CommonSpot CMS Supports ❏ Popular Grid Systems for Responsive Design ❏ 100% Bootstrap Compatible ❏ Custom Code Integrations ❏ .Net, PHP, Ruby, Java, CFM, CFC, etc. ❏ Embeddable Custom Code ❏ CFML or HTML Code through Custom Scripts ❏ Latest Web Standards HTML5/CSS3
- 25. Custom Script for Rail & Bus Alerts ❏ Fetched from RSS sources ❏ http://www.metroalerts.info/rss.aspx?bus ❏ http://www.metroalerts.info/rss.aspx?rs ❏ Transformed into JSON object cached on the file system ❏ Updated asynchronously via AJAX ❏ Rendered on multiple locations
- 27. Custom Scripts for Stations
- 28. CMS Enables Content Authors ❏ To change page layout on demand ❏ To display/hide content ❏ To group related content
- 29. Integration with External APIs
- 30. ATIS API by Trapeze Group ❏ ATIS API provides trip planning and other transit information. ❏ Use of third-party geocoding services such as those provided by Google Maps can be used to supply the latitude / longitude required by many of the ATIS SOAP methods. ❏ Locate Methods: provide geocoding services for ATIS-powered apps and eliminates the need to maintain an external DB. Not suitable for auto-complete/type-ahead. ❏ Type-ahead Methods: literal in their search and are implemented using SQL LIKE statements. ❏ TransitMethods: Plan Trip, Closest Stops, Next Bus/Train, Service Nearby, etc.
- 31. Google Places API ❏ Google Places API Web Service and Place Autocomplete share a usage quota. ❏ Enforces a default limit of 1,000 free requests per 24 hour period, calculated as the sum of client-side and server-side requests ❏ Autocomplete is a feature of the Places library in the Google Maps JavaScript API, offering two widgets: Autocomplete & SearchBox http://goo.gl/wZuKe7
- 32. WMATA Developer API Bus Position JSON for Route B30 https://api.wmata.com/Bus.svc/json/jBusPositions?RouteID=B30
- 33. Hybrid CF & Node.js Solution
- 34. Why CF/Node.js Architecture ❏ Embedded AJAX applications fetch data from an XML-based API behind the firewall ❏ Node.js Server-side components best-suited for REST APIs and handling large-volume asynchronous requests for dynamic data ❏ CF & Node.js share the workload giving scalability & cost-effective solution
- 36. XBOX One Drawing Today @Fig Leaf Booth 4:30pm
- 37. We’re Hiring in Washington DC! 2 ColdFusion Positions - Onsite at WMATA & Department of Justice [email protected]
- 38. Questions? Thank you. We’ve Got You Covered.