#CSUC14

1. Hello.
http://scheller.gatech.edu
Joe Macri
Online Communications Manager
Joe.Macri@Scheller.gatech.edu
Andrew Jarrett
Web Developer
Andrew.Jarrett@Scheller.gatech.edu

2. Superautomatic!
How we leveraged
shortcode and server-side
transformations to keep key
data fresh, but still simple
and flexible for our peeps.

3. Today’s Highlights
 Scheller web site redesign
 Considerations and strategy.
 Core solution: tags and feeds.
 Showcase shortcode and promo elements.
 Under the hood…
 Data feeds.
 Shortcode/bricks.
 Server-side transformations.
 What’s next…future enhancements

4. Modern, mobile
friendly design.
New for us:
• responsive breaks
• big fonts
• full-bleed images
• simplified navigation
• aggregated CTAs
• media gallery
• events calendar
• statistics
The Re-design
 Ground-up design
 Focus on automation
Before After

5. Considerations
 An architecture that can grow with us.
 Support of different systems and feeds.
 Hobsons, Talisma, CMS feeds.
 Ease of use for the end user.
 No HTML required, but still can be used.
 A standard, yet flexible method for assigning and rendering content.
 Contextual match of supporting promo content on page.
 Not just a random news article.
 Single source of data when possible.

6. We addressed our considerations
by leveraging TAGS.

7. What is a TAG and what does it do?
 TAGS ID content – allows us to filter later.
 Content managers see TAGS as checkboxes or
custom text fields.
 TAGS also used externally: CRM events, media.

8. TAGS provide flexibility
 Expandable architecture.
 Easy to integrate with other system.
 New feeds are easy to incorporate.
 Easy to create new types of assets.
 Easy to create new XSL transforms and formats
in new and different ways.

9. TAGS keep content fresh, automatically
We utilize dynamic sidebar elements (called promos), in-page
profiles, rankings & stats, and directories.
 No page maintenance required.
 Set it and forget it.

10. TAGS to feeds…the dynamic advantage
 Feeds minimize full site publishing.
 Keep key content fresh without user maintenance.
 Automated events and forms. User sets RSVP on/off, etc.
 Content automatically distributed to highest matched score.
 ex: a story is written, tagged. Then automatically, and
intelligently, promos are updated on targeted content pages.
It’s Mathematical!!!
 An algorithm that scores content.

11. How users interact with TAGS
User generates content, checks the appropriate
boxes, and the most relevant and recent
matched content is rendered.
 Content creators TAG content, feed published.
 Content pages don’t need to be touched again.
 Uses scoring algorithm, Andrew will explain.
The open text field satisfied our needs. However, the number of options is essentially unlimited.

12. ELEMENTS UTILIZING TAGS

13. A few sidebar options
 News articles
 Success stories
 Faculty/staff/student profiles
 Photo galleries
 Videos
 Statistics
 Events
 Custom WYSIWYG

14. Rendered sidebars

15. Selected sidebar
promos on a page
 Undergrad page example.
 With a few checkboxes, sidebar
promos are scored; best match
is rendered.
 Scored sidebars help to make
more meaningful connections
and support of primary content.
 Content can be sticky.

16. METADATA AND SHORTCODE

17. The metadata
 All assets leverage same core metadata.
 Easy to TAG content.
 Andrew will discuss forms for events and the logic
behind the scoring.
Example of TAGGED asset

18. The metadata
 Easy for users to select assets.

19. Flexibility with profiles, enter shortcode
Contact info made easy.
 Single data source.
 Page types, sidebar, WYSIWYG shortcode.
 Create unique groups and arrangements.

20. Degree program pages
Academic area Directory listings / digital signs pages / aggregated research

21. User-controlled shortcode
No blocks. No split regions.
Easily drop shortcode inside the WYSIWYG.
Repurpose shortcode to reduce development time.
[getAssets feed="profile" status="Faculty, Staff" tags="TMProgram"
show-inactive="true" format="contact"]
Shortcode example of
custom Faculty & Staff
profiles.
Stats and Rankings,
also good for variations.

22. YouTube and Picasa
 YouTube and Picasa feed our media gallery.
 A flexible solution for externally housing media.
 TAGS for filtering and target rendering.
 Title flexibility and maximized SEO performance.

23. Messaging vs. SEO
SEO and YouTube
 Long and short titles
Native YouTube
Scheller media gallery
Video on sidebar

24. YouTube and TAGS
Video title, SEO considerations
 Angela, Georgia Tech MBA
student, discovered a program
and culture that was right for her.
Video title, Website
 Angela discovered an MBA
culture right for her. Variable Examples
cat_Full-time MBA
cat_featured
title_[custom title]

25. Next up, Andrew goes…
UNDER THE HOOD

26. Diving in
 Abstract architecture
 Bottom-up approach – from the data layer up to the
page itself
 Data layer – the XML feed that contains all the
information needed for the page
 Code layer – the PHP code that grabs the XML and
runs an XSL transform on the server-side to generate
HTML
 Shortcode layer – the optional interface between the
user and the code

28. Data Feeds
 Serves as the data layer for the dynamic assets
on the website
 Can use XSL transforms to aggregate assets
from external systems into a single feed in real-time
 Events feed combines Cascade events with events
from our CRM
 Uses similar or same structure as Cascade’s
data definition

29. Code layer (PHP and XSL)
 The code layer unites the data layer with a
server-side XSL transform
 Easily create new templates for displaying content on
the page
 Two ways to “pick” your asset
 Filtering – eliminates non-matching assets from the
feed based on input parameters
 Scoring – sorts assets based on a score given by a
scoring algorithm

31. Shortcode layer
 Stole the idea from WordPress
 Generates the PHP code and AJAX call
 [system-view:external]/[system-view:internal]
 Shortcode for a list of upcoming events:
 [getAssets feed=“events” format="current_events_list"
functional-area=“Business Ethics”]
 This is primarily done with some RegEx hackery
 Jack the WordPress shortcode parser – it’s open
source!

32. Related events
 This uses the “scoreAssets” method to give
arbitrary points for certain metadata or tag
matches
 Specific metadata used to match events:
 Program type – “Info Session”, “Class Visit”
 Functional area – “MBA”, “Business Analytics”
 Academic area – “Finance”, “Strategic Management”
 Tags – “event:related-to=123”, “connect-with-tech”

33. Future enhancements
 Sidebar sets with conditional fields.
 Search/lookup for tagged content.
 Optimization using Redis.
 Greater form automation and CRM integration.
 Form builder that exports forms into a feed.
 Expanded event and form association using TAGS.
 Easier RSVPs, which are becoming more in demand.

34. Questions and contact information
Thank you for your time.
Joe Macri
Online Communications Manager
Joe.Macri@Scheller.gatech.edu
Andrew Jarrett
Web Developer
Andrew.Jarrett@Scheller.gatech.edu
http://scheller.gatech.edu