Embed Size (px)
DESCRIPTION
#CSUC14
Citation preview
Hello.
Joe MacriOnline Communications Manager
Andrew JarrettWeb Developer
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
Andrew JarrettWeb Developer
Thank you for your time.
http://scheller.gatech.edu
