plone at harvard school of engineering and applied sciences
DESCRIPTION
The Harvard School of Engineering and Applied Sciences (SEAS) wanted to launch a dynamic network of websites that attracts prospective students and promotes academic activities both internally and externally. SEAS engaged Jazkarta, a Boston-based open source technology consultancy specializing in Plone, on a project to build a set of websites that achieve these goals. Jazkarta redesigned SEAS' existing public website, constructed an intranet site that allows SEAS to provide up-to-date information to their community of faculty, staff and students, and developed a facility for deploying faculty and lab subsites within the site infrastructure.Mike Trachtman, Project Manager at Jazkarta, will present a case study of the project that covers development processes, designing highly available and scalable Plone site architectures, integrating/creating Plone components to satisfy functional requirements of .EDU websites, and repeatable deployment of customized Plone software solutions.TRANSCRIPT
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
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
> 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