Archdiocese of Baltimore (AOB) Web Presence Redesign

C108: ColdFusion in Transit Action Theonic Way

VP of Consulting, Strategy & Operations tway@figleaf.com

https://www.figleaf.com | https://training.figleaf.com

Customer Case Study: Design & Development of the new Washington Metropolitan Area Transit Authority Website

https://beta.wmata.com

❏ 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

Introduction to Fig Leaf

Our Profile / figleaf.com❏ Founded in 1992

❏ Certified Service-Disabled, Veteran-Owned Small Business (SDVOSB)

❏ Corporate HQ1400 16th Street NW Suite 450Washington, DC 20036202-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

Our ServicesConsulting

❏ 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

Our Key Technology Partners

.GOV, .EDU, .ORG, .COM CF Clientsnps.gov

umuc.edu

dcbar.org

customermap.exim.gov

belden.comashcroft.com

uwstout.edu

wmata.com

uwp.eduuwsuper.edu

❏ 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

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

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.

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

❏ 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

Creative Visions: Minimal, Flat, Clean & Modern

Open & Airy Design Reducing cluttered feeling

Interactive Trip Planning with Visual Maps

Rider Tool: Trip Planner

Rider Tool: Service Nearby

CMS Solution: CF-powered CommonSpot

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

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

http://beta.wmata.com/service/status/

Custom Scripts for Stations

CMS Enables Content Authors

❏ To change page layout on demand

❏ To display/hide content❏ To group related

content

Integration with External APIs

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.

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

WMATA Developer APIBus Position JSON for Route B30https://api.wmata.com/Bus.svc/json/jBusPositions?RouteID=B30

Hybrid CF & Node.js Solution

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

Demo & Announcements

XBOX One Drawing Today@Fig Leaf Booth 4:30pm

We’re Hiring in Washington DC!

2 ColdFusion Positions - Onsite at WMATA & Department of Justice

jobs@figleaf.com

Questions? Thank you.We’ve Got You Covered.