PLONESYMPOSIUM EAST

PENN STATE2009open source technology solutions

Plone at Harvard SEASMichael Trachtman, Project Manager, Jazkarta

Plone at Harvard SEAS• Overview

• Requirements and Solutions• Implementation

• Status and Takeaways

• Q&A

PLONESYMPOSIUM EAST

PENN STATE2009open source technology solutions

Overview

About Jazkarta• Open source technology consultancy

• Working with nonprofits and .EDUs• Oxfam

• CMRLS

• Harvard• We like chowda

About Harvard SEAS• SEAS - School of Engineering and Applied Sciences

• Part of FAS

• Founded 1847/1950

• 350 graduate students, 300 undergrads, ~70 faculty

ADMINISTRATION

FACILITIESACADEMIC OFFICE

HR

COMMUNICATIONS

COMPUTING & IT

FINANCE

the seas community

STUDENTS

SEAS COMMUNITY

HARVARD COMMUNITY

FACULTY & RESEARCHERS

seas user community

Current Setup• www.seas.harvard.edu• HTML hand-edited, backed by dynamic scripting

• Site stats, October 2007:• www: 530,000 page serves per day (5-10 rps)

• subsites: 99,000 page serves per day (2-5 rps)

Business Objectives• Develop with flexible CMS that is easy to use for non-technical community

• Provide integrated directory

• Offer robust site and directory search tool

• Use familiar open source tools

Team Roles• SEAS• Dean’s Office, Communications and IT

• Sponsor and Stakeholder

• Resource Procurement

• Jazkarta• Project Management

• Information Design

• Visual Design• Software Architecture and Development

Process• Agile management and development principles (iterative, transparent, adaptive)

• Weekly status and bi-weekly on-sites• ClueMapper (“Super Trac”) for planning/documentation/ticketing

• Google Docs for shared resources• Functional test plans• LDAP schema references

Cluemapper• “Super-TRAC”• Multi-project, single instance, TTW project onboarding

• Shared authentication system for Trac and Subversion

• Integrated time-tracking, pastebin• WYSIWYG wiki editing• http://www.cluemapper.org

TimelineJanuary 2008 - Kickoff

April 2008 - Designs Completed

November 2008 - BETA

January 2009 - Intranet Launched

April 2009 - First Subsites Launched

July 2009 - Public Site Launch

PLONESYMPOSIUM EAST

PENN STATE2009open source technology solutions

Requirements and Solutions

How do I plan an event

at SEAS?

HOW DO I OBTAIN A DIgITAL COPy OF THE SEAS LOgO/

SEAL?

How do I get a website for myself or my lab?

help!

what research is happening in the applied physics

department?

Choosing a Platform• University supportive of open source

• Familiar to IT office - Drupal and Plone• Required easy content editing, workflow, access control, news and event management

• Integration capabilities with LDAP-based directory (authentication and non-biographical information)

public site

intranet

subsites

Choosing Plone

Intranet• Repository for shared information• Targeted at internal users• Directory and site search• Internal news, events and important announcements

• Public and protected information• Department landing pages - who does what?• FAQs, How-tos, policies and procedures

Publi

c Site

Public Site• Site redesign with a focus on research

• Organized resources by research area• User-targeted content (prospective students, alumni, partners)

• Highlight activity via news and events• Directory and site search

subs

ites

Subsites• Relieve load for communications and IT• Provide microsites for faculty, research groups and special events like conferences

• Accessible for the technically challenged; easy = fresh

• Separate visual theme with some customizability with adherence to university standards

• Distinct access control specifications• Shared infrastructure and online procurement

PLONESYMPOSIUM EAST

PENN STATE2009open source technology solutions

Implementation

Implementation• Story development

• Information and Visual Design

• Software Architecture

• Development and Deployment

• Content Migration

• Testing and Acceptance

Story development• Defined stories, ran a card sort

• Grouped stories into high-level groups for classification and prioritization

• Developed iteration plans based on task estimation

Information and Visual Design• Focus on Research - strip out the marketing speak

• Reinforce Harvard brand

• Information architecture pre-established

• Delivered wireframes and comps• Iterative

design process

This wireframe is not meant to convey any design concepts, but is instead solely

meant to convey, in a visual manner, the functional elements which must exist on

any given page. Placement of elements along with page copy and nomenclature

will be determined upon final definition of the elements required on this page.

1 in. = 100 pixels

Outer frame is 1076 pixels

wide.

PAGE DESCRIPTION

PAGE SPECIFICATIONS

- Sample wireframe for layout of Second Level Nav (2nd Level) webage; NOT User-centered nav.

- All Level 1, 2 navigation visible globally

- Search is Global feature/location

NOTES

THE CONTENT ON THIS PAGE REFLECTS THE NOT-SIGNED-IN STATE.

- Layout is centered in browser window

- ‘Flexible Column’ in right-column is placed until SEAS staff decides ‘rules’ for this column for each

section/specific pages

- page maintain a global Footer

- Below nav, above H1 Header; photo placed to emphasize content below. unique photo/Level2 section

- User-Nav moves toleft-hand side to establish majority location; is not fully revealed, but AJAX functionality

upon click would reavel all options.

-

WIREFRAME

Harvard Schol of Engineering- Website

© 2008 Jazkarta, Inc. Filename: SEAS_wireframes_xxx.pdf 5 April 2008

FOOTER

Meta Nav | Meta Nav | Meta Nav | Meta Nav | Meta Nav | Meta Nav |

Meta Nav | Meta Nav

Office Name

123 Street Ad

City, ST

ZIPXXX

email@seas.com

HELPFUL LINKS

> Learn It Headline Here

> Learn It Headline Here

> Learn It Headline Here

> Learn It Headline Here

H1 PartnerLorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pharetra nunc id urna.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis

egestas. Suspendisse dignissim tempus augue. Duis ipsum lectus, ultrices vitae,

lacinia a, pretium eget.

H2 Headline Here

Uisque aliquam magna in justo. Nunc lacinia dignissim arcu. Proin sit amet dolor non

leo pharetra semper. Proin convallis odio bibendum nulla. In sapien velit, nonummy

quis, vestibulum eu, dictum non, pede. Mauris sapien tellus, tincidunt ac, sodales sed,

posuere sit amet, velit. Integer dignissim, leo at adipiscing rhoncus, mi sem suscipit

lectus, vitae hendrerit urna pede accumsan arcu. Aliquam erat volutpat. Proin congue

vulputate eros.

Ut id magna. Aenean metus ligula, facilisis nec, vehicula at, rutrum eget, risus. Morbi

tristique urna eget tortor adipiscing auctor. Morbi varius. Cras faucibus. Quisque

tempus auctor libero. Cras scelerisque metus at est elementum feugiat. Nunc conse-

quat neque eget neque. Donec mattis massa ac libero. Etiam pellentesque. Proin

lacus. Etiam euismod sodales tellus. Fusce volutpat feugiat tellus. Fusce id purus

quis justo lobortis pulvinar. Praesent placerat mattis tortor. Pellentesque tincidunt

turpis et dolor elementum cursus. Morbi fermentum scelerisque ipsum.

FUNCTIONALITY NOTE:

- fixed image, no rotate

- image/link CMSCORPORATE/PARTNER IMAGE

Bread > Crumb > Trail....

PRIMARY NAV PRIMARY NAV PRIMARY NAV PRIMARY NAV PRIMARY NAV

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

Secondary Nav

What type of User are You?

FEATURED PARTNER

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit. In ac

nulla in odio sollicitudin congue.

Praesent in lacus. Mauris sit amet

lorem ac purus suscipit blandit. In

gravida orci id metus. Nunc

tincidunt massa a odio.

Quisque eget augue. Vestibulum

tincidunt ante sed enim. Nulla

augue.

PHOTO

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Logomark/BrandingSearch:

Option 1 Option 2 Option 3

This wireframe is not meant to convey any design concepts, but is instead solely

meant to convey, in a visual manner, the functional elements which must exist on

any given page. Placement of elements along with page copy and nomenclature

will be determined upon final definition of the elements required on this page.

1 in. = 100 pixels

Outer frame is 1076 pixels

wide.

PAGE DESCRIPTION

PAGE SPECIFICATIONS

NOTES

THE CONTENT ON THIS PAGE REFLECTS THE NOT-SIGNED-IN STATE.

- Layout is centered in browser window

- ‘Flexible Column’ in right-column is placed until SEAS staff decides ‘rules’ for this column for each

section/specific pages

- page maintain a global Footer

- User-Nav moves toleft-hand side to establish majority location;on Primary Nav page(s) *all options visible*

- Photo slideshow in right-hand column; contents are specific to content at-hand in this Primary Nav section.

Whether this is controlled from a ‘global’ photo library and tagged, or individual galleries is TBD.

- Sample wireframe for layout of User-centered nav

- Search is Global feature/location

WIREFRAME

Harvard Schol of Engineering- Website

© 2008 Jazkarta, Inc. Filename: SEAS_wireframes_xxx.pdf 5 April 2008

FOOTER

Meta Nav | Meta Nav | Meta Nav | Meta Nav | Meta Nav | Meta Nav |

Meta Nav | Meta Nav

Office Name

123 Street Ad

City, ST

ZIPXXX

email@seas.com

> Learn It Headline Here

> Learn It Headline Here

> Learn It Headline Here

> Learn It Headline Here

HELPFUL LINKSH1 UserType One-to-SixLorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pharetra nunc id urna.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis

egestas. Suspendisse dignissim tempus augue. Duis ipsum lectus, ultrices vitae,

lacinia a, pretium eget.

H2 Headline Here

Uisque aliquam magna in justo. Nunc lacinia dignissim arcu. Proin sit amet dolor non

leo pharetra semper. Proin convallis odio bibendum nulla. In sapien velit, nonummy

quis, vestibulum eu, dictum non, pede. Mauris sapien tellus, tincidunt ac, sodales sed,

posuere sit amet, velit. Integer dignissim, leo at adipiscing rhoncus, mi sem suscipit

lectus, vitae hendrerit urna pede accumsan arcu. Aliquam erat volutpat. Proin congue

vulputate eros.

USERTYPE 1-6

>Undergraduates APPLY >Graduates APPLY|

><FUNCTIONALITY NOTE:

- text description of user

- jQuery used

- nav on left highlights accordingly

Bread > Crumb > Trail....

PRIMARY NAV PRIMARY NAV PRIMARY NAV PRIMARY NAV PRIMARY NAV

What type of User are You?

FEATURED STUDENT

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit. In ac

nulla in odio sollicitudin congue.

Praesent in lacus. Mauris sit amet

lorem ac purus suscipit blandit. In

gravida orci id metus. Nunc

tincidunt massa a odio.

Quisque eget augue. Vestibulum

tincidunt ante sed enim. Nulla

augue.

PHOTO

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Tertiarty Nav

Logomark/BrandingSearch:

Option 1 Option 2 Option 3

data

base

se

rver

software architecture

presentation

caching

theming

browser

load balancing

database

application directoryBACK END

FRONT END

CLIENT

web

ser

ver

app

server

data

base

se

rver

dire

ctor

y se

rver

web

ser

ver

app

server

app

server

app

server

pound

Deliverance

Server Architecture• VMWare virtual environment

• Web servers load balanced with hardware• Varnish for caching Plone content

• Software load balancers for ZEO clients

• Heartbeat for failover• Supervisor for process control

Development and Deployment• Deployment configurations via Buildout

• Separation of theming from application programming using Deliverance

• Repeatable deployment across server infrastructure via Fabric

• Repeatable load testing setup (jMeter)

Key Plone Customizations• FacultyStaffDirectory

• schema extension

• Optimized views

• synchronization with LDAP

• Plone4ArtistsCalendar

• Calendar views

• Collage

• Custom viewlets

• DeliveranceController

• Workarounds for Deliverance+Subsites

Subsite Machineryseas.siterequest• Request form and workflow• Content Templates

JazMiniSite• Site-within-a-Plone-site

• Navigation Root

Content Migration• Handled exclusively by the SEAS team

• New designs and different approach to targeting users required new content

• Plone training - general user training + train the trainer

Transition• Executed functional test plans

• Moved ClueMapper and source code repositories to SEAS

• Acceptance/sign-off

PLONESYMPOSIUM EAST

PENN STATE2009open source technology solutions

Project Status and Takeaways

Current StatusLaunches

• Intranet - January 2009

• Subsites - April 2009

• Public Site - July 2009

Upcoming Enhancements

• News management tools

• Alternate subsite themes

• Improved multimedia integration

• Bulk file upload

Areas of Improvement• User experience• Content editing improvements - customization of editor

• File upload - consider SWF-based multi-file upload solution

• Subsites• JazMiniSite - consider migration opportunity to collective-based solution

• Deliverance - upgrade

PLONESYMPOSIUM EAST

PENN STATE2009open source technology solutions

Questions?

Resources•ClueMapper - http://

www.cluemapper.org•Plone4ArtistsCalendar - http://plone.org/

products/plone4artistscalendar•Collage - http://plone.org/products/

collage•FacultyStaffDirectory - http://plone.org/

products/faculty-staff-directory•Fabric - http://docs.fabfile.org

Thanks!•Harvard SEAS•PSU/WebLion