Hello.

Joe MacriOnline Communications Manager

Joe.Macri@Scheller.gatech.edu

Andrew JarrettWeb Developer

Andrew.Jarrett@Scheller.gatech.edu

http://scheller.gatech.edu

Superautomatic!

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

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

New for us:

• responsive breaks• big fonts • full-bleed images• simplified navigation• aggregated CTAs• media gallery • events calendar• statistics

Modern, mobile friendly design.

Before After

Ground-up design Focus on automation

The Re-design

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.

We addressed our considerationsby leveraging TAGS.

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.

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.

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.

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.

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.

ELEMENTS UTILIZING TAGS

A few sidebar options

News articles Success stories Faculty/staff/student profiles Photo galleries Videos Statistics Events Custom WYSIWYG

Rendered sidebars

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.

METADATA AND SHORTCODE

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

The metadata

Easy for users to select assets.

Flexibility with profiles, enter shortcode

Contact info made easy.

Single data source. Page types, sidebar, WYSIWYG shortcode. Create unique groups and arrangements.

Degree program pages

Academic area pages / aggregated researchDirectory listings / digital signs

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"]

User-controlled shortcode

Shortcode example of custom Faculty & Staff profiles.

Stats and Rankings, also good for variations.

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.

Messaging vs. SEO

SEO and YouTube Long and short titles

Native YouTube

Scheller media gallery

Video on sidebar

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 MBAcat_featuredtitle_[custom title]

UNDER THE HOODNext up, Andrew goes…

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

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

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

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!

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”

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.

Questions and contact information

Joe MacriOnline Communications Manager

Joe.Macri@Scheller.gatech.edu

Andrew JarrettWeb Developer

Andrew.Jarrett@Scheller.gatech.edu

Thank you for your time.

http://scheller.gatech.edu