![Page 1: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/1.jpg)
PLONESYMPOSIUM EAST
PENN STATE2009open source technology solutions
Plone at Harvard SEASMichael Trachtman, Project Manager, Jazkarta
![Page 2: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/2.jpg)
Plone at Harvard SEAS• Overview
• Requirements and Solutions• Implementation
• Status and Takeaways
• Q&A
![Page 3: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/3.jpg)
PLONESYMPOSIUM EAST
PENN STATE2009open source technology solutions
Overview
![Page 4: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/4.jpg)
About Jazkarta• Open source technology consultancy
• Working with nonprofits and .EDUs• Oxfam
• CMRLS
• Harvard• We like chowda
![Page 5: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/5.jpg)
About Harvard SEAS• SEAS - School of Engineering and Applied Sciences
• Part of FAS
• Founded 1847/1950
• 350 graduate students, 300 undergrads, ~70 faculty
![Page 6: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/6.jpg)
ADMINISTRATION
FACILITIESACADEMIC OFFICE
HR
COMMUNICATIONS
COMPUTING & IT
FINANCE
the seas community
![Page 7: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/7.jpg)
STUDENTS
SEAS COMMUNITY
HARVARD COMMUNITY
FACULTY & RESEARCHERS
seas user community
![Page 8: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/8.jpg)
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)
![Page 9: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/9.jpg)
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
![Page 10: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/10.jpg)
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
![Page 11: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/11.jpg)
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
![Page 12: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/12.jpg)
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
![Page 13: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/13.jpg)
TimelineJanuary 2008 - Kickoff
April 2008 - Designs Completed
November 2008 - BETA
January 2009 - Intranet Launched
April 2009 - First Subsites Launched
July 2009 - Public Site Launch
![Page 14: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/14.jpg)
PLONESYMPOSIUM EAST
PENN STATE2009open source technology solutions
Requirements and Solutions
![Page 15: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/15.jpg)
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?
![Page 16: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/16.jpg)
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)
![Page 17: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/17.jpg)
public site
intranet
subsites
Choosing Plone
![Page 18: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/18.jpg)
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
![Page 19: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/19.jpg)
![Page 20: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/20.jpg)
Publi
c Site
![Page 21: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/21.jpg)
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
![Page 22: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/22.jpg)
![Page 23: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/23.jpg)
subs
ites
![Page 24: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/24.jpg)
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
![Page 25: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/25.jpg)
![Page 26: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/26.jpg)
PLONESYMPOSIUM EAST
PENN STATE2009open source technology solutions
Implementation
![Page 27: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/27.jpg)
Implementation• Story development
• Information and Visual Design
• Software Architecture
• Development and Deployment
• Content Migration
• Testing and Acceptance
![Page 28: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/28.jpg)
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
![Page 29: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/29.jpg)
Information and Visual Design• Focus on Research - strip out the marketing speak
• Reinforce Harvard brand
• Information architecture pre-established
• Delivered wireframes and comps• Iterative
![Page 30: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/30.jpg)
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
![Page 31: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/31.jpg)
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
![Page 32: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/32.jpg)
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
![Page 33: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/33.jpg)
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)
![Page 34: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/34.jpg)
Key Plone Customizations• FacultyStaffDirectory
• schema extension
• Optimized views
• synchronization with LDAP
• Plone4ArtistsCalendar
• Calendar views
• Collage
• Custom viewlets
• DeliveranceController
• Workarounds for Deliverance+Subsites
![Page 35: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/35.jpg)
Subsite Machineryseas.siterequest• Request form and workflow• Content Templates
JazMiniSite• Site-within-a-Plone-site
• Navigation Root
![Page 36: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/36.jpg)
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
![Page 37: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/37.jpg)
Transition• Executed functional test plans
• Moved ClueMapper and source code repositories to SEAS
• Acceptance/sign-off
![Page 38: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/38.jpg)
PLONESYMPOSIUM EAST
PENN STATE2009open source technology solutions
Project Status and Takeaways
![Page 39: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/39.jpg)
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
![Page 40: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/40.jpg)
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
![Page 41: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/41.jpg)
PLONESYMPOSIUM EAST
PENN STATE2009open source technology solutions
Questions?
![Page 42: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/42.jpg)
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
![Page 43: Plone at Harvard School of Engineering and Applied Sciences](https://reader034.vdocuments.site/reader034/viewer/2022052505/55512fadb4c905b3598b4e0c/html5/thumbnails/43.jpg)
Thanks!•Harvard SEAS•PSU/WebLion