Inside the Pantheon<br />A flexible Dreamweaver Framework for managing traditional and dynamic content practically and cos...
Agenda<br />Presentation<br />The need and Environment at Kent<br />The Pantheon Product<br />Demonstration<br />Product A...
The Situation in 2006<br />Service Departments (~20)<br />Academic Departments (~40)<br />External company<br />Department...
The need and environment<br />Apply central brand and unified look and feel<br />Provide departments with the flexibility ...
CODE<br />The need and environment<br />CODE<br />CODE<br />CODE<br />3. Improve the manageability of the code to simplify...
The need and environment<br />Corporate Site Themes<br />Departmental Theme<br />Arts Centre Theme<br />Special project si...
The need and environment<br />5. Create a standard user interface<br />6. Create a permissions system<br />7. Restore old ...
The need and environment<br />9. Allow content sharing<br />
The need and environment<br />Summary of the Institution’s needs<br />Apply central brand and unified look and feel<br />P...
How to implement a CMS?<br />CMS Components…<br /><ul><li> Content Management
 Page Management
 Image Management
 Site Structure and Navigation Management
 Admin (editing) interfaces
 Permissions systems
 Content Categorisation and tagging
 Data migration ….. etc</li></li></ul><li>The Product<br />What does the current setup provide?<br />Apply central brand a...
The Product<br />Page 12<br /><ul><li>Enterprise solution
Extensible and flexible framework
Updates easy to apply</li></ul>Central Codebase<br />Departmental Template<br />Central Template<br />Conferences Template...
Allow departments to theme a sectionwithin their site</li></ul>Finance<br />School of Physical Sciences<br />School of Eur...
Customisable
Code accessible by the department</li></ul>German<br />French<br />
The Product<br />
Departmental Template<br />Kent Header<br />Departmental Banner<br />A title and strong image consistent with the departme...
The Product<br />What does Pantheon provide?<br />Apply central brand and unified look and feel<br />Provide departments w...
Upcoming SlideShare
Loading in …5
×

Iwmw b9 inside_the_pantheon_uploadversion

582 views
552 views

Published on

Using Dreamweaver as a publishing interface may not have been considered for institutions who want to manage their dynamic web content as its traditional focus has been on editing static web pages. However, at Kent, time and resource issues required an intermediate solution to roll out a new branding across our websites. In the process we developed a framework (codenamed Pantheon) for pulling in and managing dynamic content using static pages and a series of tools which integrate with Dreamweaver giving departments great flexibility in creating good looking web pages.

Although initially intended as a temporary solution, the package was very well received by the University web publishers, so much so that a version 2 was approved and recently built and deployed. This talk will look at the project, the relative merits and drawbacks of the approach and how it has altered our approach to the development of the final CMS.

At the end of this session, delegates will have investigated and discussed a new take on old technology and discussed the possibility that maybe this is another stepping stone on the path to a full content management system.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
582
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Icebreaker:
  • I’m going to talk about the environment at kent that led to the creation of pantheon
  • Each department managed its own website The service departments mostly using Dreamweaver and a single site-wide template supported by a small web team (approx 3 people) The academic sites mainly had their own sites developed either internally or on contract to an outside body Web support helped maintain the websites individually No way to add central components to web pages Departments manage their own websites and have their own budgets Some websites built by external companies which may or may not have support contracts or may have gone bust. Web support having to step in and support not only different code bases but different web publishing tools as well. Users getting a different experience in different areas of the Kent website
  • 1. The centre at the University would like the ability to apply branding and links to all pages of the site easily and to have a site wide brand image for all departmental sites. This would improve the general presentation but also allow users to get a consistent experience across the site.2. Departments also want the freedom to express themselves and have their own stylised sites so that they can market their own uniqueness.
  • All department sites typically supported by a single web author in each department. Site was often un-updateable once they left. Dynamic elements were created on an ad-hoc basis and applied directly to pages which required them. This left code fragments scattered across multiple pages and impossible to support. There was no standard way of developing dynamic elements.What was required was to bring all dynamic elements into a single manageable framework that could be supported centrally. Dynamic elements could be presented to web authors as a selection of standard widgets. New functionality could then be produced centrally when requested and rolled out to departments.
  • Web team supports not only the departments and main university web sites but also a myriad of other small scale websites for special uses. There are lots of requests to deploy new websites with their own look and feel and brand requirements which diverge from the central university theme. To have a different support structure in place for each would soon become impossible. Instead, allow the web engine to support site themes so the codebase is the same, but can apply a completely different look and feel to a site.
  • Again, to improve support, there needs to be one supported user interface for the web publishing system. To ensure web publishers can only edit their parts of the website, there also needs to be a permissions system in place allowing authentication of changes.In case of mistakes and to rollback pages to previous time periods it is necessary to provide the ability to restore old files. It would be particularly useful to be able to rollback files to a particular date.
  • Some content items are replicated in many places. Instead of having to retype them out the we author needs the ability to pull content in from a central store. This can prevent content from going stale as when the central version updates, everything which is using it updates as well.
  • Audience questions: “Who recognises this?”, “Have I missed anything?!”“What is the solution?” -&gt; Typically a Content Management System to centrally manage all content then pump it out to web-pages arranged by the web authors.
  • What happens in the question mark? Sourcing, trailing, requirements gathering…“How long to develop all this?” “How long to hack an open source product to fit into our setup?”“How long or expensive to deploy a commercial solution?”“Anyone know any good solutions? How long did they take?”Any one of these elements is a large project. Altogether, perhaps this is 2/3/4 years. A JISC report suggested this was as big a project for a University as its student records system.What do we do in the meantime? Our website needs improving now!Can we improve our current system at all for a quick win whilst the CMS project gets underway?
  • Although not the greatest system in the world, the flat file structure we currently have for editing web pages does provide a permissions system in the form of group permissions on folders on the web server. The web server is backed up so restoration of old files is possible, if difficult, however this requirement is infrequent enough that it wasn’t a major drawback. Being able to edit raw HTML gives departments complete freedom.Dreamweaver is already in use and fits the mentality of the web publishing community well as they are mostly used to desktop editing applications such as Word.So this left us with the question of how could the other items be addressed.
  • So what is Pantheon?It is a web template system to allow University departments to have and manage their own websites using Dreamweaver as the web publishing interface.This diagram describes the levels of a web templating system. From a central codebase there are several themes and within each theme a number of distinct websites. The University departments all live under the departmental template. Departments also have the ability to create and manage their own sub-sites which are children on their own sites.This setup is centrally manageable but gives departments a large degree of freedom to produce distinctive sites and market themselves using a standard set of tools.
  • The solution was to use some of the lesser known features within Dreamweaver to separate the styling from the content in the flat HTML files. This features are templates, snippets and our own XML markup.Content in the files can then have style markup wrapped around them using XML. This styling markup is ignored by Dreamweaver but when rendered through the Pantheon code base it turns it into a page element which is controlled and supported by the central codebase.Dreamweaver contains the ability to create ‘snippets’ which are the little dynamic widgets that authors want to use on their pages and allows them to simply drag and drop them onto the pages. The Dreamweaver template system allows all pages to have a standard base which include all the required central style elements.Dreamweaver templates can be updated should the need arise to make a change at that level however almost all the changes can be applied to the central codebase which automatically applies to all pages when they are rendered in the browser.
  • And this is the departmental template. This is described by a combination of Dreamweaver template file and the decorators for the departmental theme.The elements of the page unique to the department itself such as the banner and colours are located in that department’s website directory, accessible and changeable by the web authors from within Dreamweaver.
  • So this leaves versioning and content sharing and reuse. Versioning could be provided by a versioning file system although we’ve not implemented this and would not be web author controllable. However it would be useful for seeing the state of the web-server on a particular date.Content sharing and reuse is difficult with a flat file system but we did find we could make Pantheon work as a mashup engine to bring in content from other systems…
  • Over the past 4 years a number of other centrally supported tools were brought online as needs arose. Although at first it was considered many of them would form part of the greater CMS product, many were considered too important and needed implementing immediately. These were specific tools for specific jobs. Examples are listed and include blogs, forums, central collections of staff profiles and news feeds.The web authors then asked for ways that this information could be displayed again on their own web pages without having to re-type. So, we developed a Dreamweaver snippet to pull in RSS feeds and format those in a number of ways for the pages. In this way, the web pages became mash-ups of the various other systems. They are tailored views of the data from a departmental perspective. Perhaps a particularly influential academic deservers their blog posts to appear on the home page. Staff profiles can be stored in one place then selected content from them pumped out to the public website.As this developed it changed our view of the CMS itself. From one giant all encompassing system we saw that actually it made sense to bring in smaller systems one at a time and link them using standard data transport layers such as RSS. Systems which need more interaction would need their own snippet which supports their particular web service API
  • Last diagram for a while.Out of interest, the name of the templates are always names of Greek deities which live inside the Pantheon.
  • Here is the feature list of Pantheon compared with the original requirementsMain wins:Brings departments websites into central serviceIn standard design/template Solve hierarchy structure issues Improves content/layoutAllow dynamic content/share150 developments/agreements250 sites100,000 pages650 publishersCost: to develop pantheon £15-£20K, to rollout £10 - £20K
  • Demo;Creating a page from templateAdding a menu itemTabbed pagesRss snippet – link to wordpress install on laptop to demo a blog post coming through
  • Is Proper versioning required on static content changed annually?Quick Page edit: : required on static content changed annually? Mention contributeStatic content reuse: Content on the DW static pages tends to be very site/department specific. Content requiring reuse should end up in one of the factories or another system to be pulled into the static pages.
  • The decentralised design of the University of Kent means that we cannot force departments to use the Pantheon product. If they want they can take their IT budget and employ outside contractors to build them a website to their own specifications. The Web support team who role out the Pantheon migrations are largely paid for by departments and others entering into a contract with them to build and support a Pantheon enabled website.For this reason, Pantheon must be a good product and offer value for money for the departments.When giving a department or group a Pantheon enabled website, a project must be created to enable this to happen. If it is a department then the process is generally straight forward but special groups who require a derivative template design, such as the arts centre will need more planning and more work in the design phase. Specialist widgets may also need to be created but these are always built with a view to giving everyone access to them.The consultation phase involves a web consultant ‘selling’ the Pantheon product and gathering the requirements for the project. This phase ends with an agreement of work which describes the scope and timescales for the delivery of the Pantheon enabled website. The client can choose several levels of project from us giving them a skeleton site and Dreamweaver training to us designing a unique template, unique functionality and doing a complete content migration from their existing site. Delivery can take anywhere from 1 to 6 months depending on requirements, complexity and volume of content.Each phase is run in an agile manner with iterative development cycles ending in frequent feedback sessions as the customers needs are evaluated and the developments reassessed
  • Some final benefits to the University departments of using Pantheon.
  • Iwmw b9 inside_the_pantheon_uploadversion

    1. 1. Inside the Pantheon<br />A flexible Dreamweaver Framework for managing traditional and dynamic content practically and cost effectively<br />John Ennew MEng CEng MIET[Project Manager / Software Engineer]<br />Dan Fryer[Web Consultant] ; <br />Dave Clark[Senior Web Developer]<br />Email: j.ennew@kent.ac.uk<br />
    2. 2. Agenda<br />Presentation<br />The need and Environment at Kent<br />The Pantheon Product<br />Demonstration<br />Product Assessment<br />Rollout projects and the web author community<br />Discussions<br />
    3. 3. The Situation in 2006<br />Service Departments (~20)<br />Academic Departments (~40)<br />External company<br />Department’s web specialist<br />Central web support<br />Web Authors<br />Bespoke UI<br />Bespoke UI<br />Dreamweaver<br />Dreamweaver<br />
    4. 4. The need and environment<br />Apply central brand and unified look and feel<br />Provide departments with the flexibility to express themselves<br />
    5. 5. CODE<br />The need and environment<br />CODE<br />CODE<br />CODE<br />3. Improve the manageability of the code to simplify support<br />
    6. 6. The need and environment<br />Corporate Site Themes<br />Departmental Theme<br />Arts Centre Theme<br />Special project site themes<br />Kent Central Theme<br />4. Allow bespoke themes<br />
    7. 7. The need and environment<br />5. Create a standard user interface<br />6. Create a permissions system<br />7. Restore old versions of pages in case of mistake<br />8. Versioning of pages <br />
    8. 8. The need and environment<br />9. Allow content sharing<br />
    9. 9. The need and environment<br />Summary of the Institution’s needs<br />Apply central brand and unified look and feel<br />Provide departments with the flexibility to express themselves (sub sites)<br />Improve the manageability of the code to simplify support<br />Allow bespoke themes<br />Create a standard user interface<br />Create a permissions system<br />Restore old versions of pages in case of mistake<br />Versioning of pages<br />Allow content sharing and reuse<br />
    10. 10. How to implement a CMS?<br />CMS Components…<br /><ul><li> Content Management
    11. 11. Page Management
    12. 12. Image Management
    13. 13. Site Structure and Navigation Management
    14. 14. Admin (editing) interfaces
    15. 15. Permissions systems
    16. 16. Content Categorisation and tagging
    17. 17. Data migration ….. etc</li></li></ul><li>The Product<br />What does the current setup provide?<br />Apply central brand and unified look and feel<br />Provide departments with the flexibility to express themselves<br />Improve the manageability of the code to simplify support<br />Allow bespoke themes<br />Create a standard user interface<br />Create a permissions system<br />Restore old versions of pages in case of mistake<br />Versioning of pages<br />Allow content sharing and reuse<br />
    18. 18. The Product<br />Page 12<br /><ul><li>Enterprise solution
    19. 19. Extensible and flexible framework
    20. 20. Updates easy to apply</li></ul>Central Codebase<br />Departmental Template<br />Central Template<br />Conferences Template<br /><ul><li>Sub Sites
    21. 21. Allow departments to theme a sectionwithin their site</li></ul>Finance<br />School of Physical Sciences<br />School of European Culture and Language<br /><ul><li>Departmental sites
    22. 22. Customisable
    23. 23. Code accessible by the department</li></ul>German<br />French<br />
    24. 24. The Product<br />
    25. 25. Departmental Template<br />Kent Header<br />Departmental Banner<br />A title and strong image consistent with the department’s branding. Consistent throughout the site but can be changed for sub-sites<br />Content area<br />Departmental colour Scheme<br />Allows easy inclusion of web snippets<br />Menu<br />Defines the site navigation. Departmentally configurable. Independent of the file structure<br />Footer<br />Departments contact details accessible from every page<br />
    26. 26. The Product<br />What does Pantheon provide?<br />Apply central brand and unified look and feel<br />Provide departments with the flexibility to express themselves<br />Improve the manageability of the code to simplify support<br />Allow bespoke themes<br />Create a standard user interface<br />Create a permissions system<br />Restore old versions of pages in case of mistake<br />Versioning of pages<br />Allow content sharing and reuse<br />
    27. 27. The Product<br />Streaming Video Server<br />Staff Profiles<br />Kent Academic Repository<br />Reading Lists<br />Module details<br />Forum discussions<br />Blog Posts<br />Knowledgebase articles<br />News and events<br />
    28. 28. The Product<br />
    29. 29. The Product<br />What does Pantheon provide?<br />Apply central brand and unified look and feel<br />Provide departments with the flexibility to express themselves<br />Improve the manageability of the code to simplify support<br />Allow bespoke themes<br />Create a standard user interface<br />Create a permissions system<br />Restore old versions of pages in case of mistake<br />Versioning of pages<br />Allow content sharing and reuse<br />
    30. 30. Demonstration<br />
    31. 31. What’s missing<br />Tagging of static content<br />Proper versioning of pages<br />Quick page edit<br />Static content reuse<br />
    32. 32. What’s next<br />Quick site setup through web forms<br />Quick page setup through web forms<br />Central content snippets<br />Main site brand refresh: 3 months to develop theme, style snippets, and rollout onto all top level pages.<br />
    33. 33. Website Rollout Projects<br />
    34. 34. The Community<br />Fortnightly Web workshops – sharing best practice<br />Departments pay for additional training<br />Commission new functionality<br />Kent on the Web <br />Knowledgebase<br />Forums <br />
    35. 35. Support and Maintenance<br />Well established – 3 years old and just released version 2<br />Well supported and maintained by IS Web Team<br /><ul><li>Dedicated web support helpdesk (9-5 Mon-Fri)
    36. 36. Telephone support (free to University departments)
    37. 37. Email support (free to University departments)
    38. 38. In person support (free to University departments)</li></ul>Large user base identifies problems quickly<br />Used by almost all University academic and service departments as well as a number of affiliate organisations<br />Constantly being improved<br /><ul><li>New snippets
    39. 39. Code fixes
    40. 40. Security audits
    41. 41. New core features</li></li></ul><li>Discussions and Questions<br />Content creation vswebsite creation<br />Static vsDynamic Content<br />The right tools for the right job<br />Department Mash-Ups and Departmental Web Authors<br />Departmental Flexibility vsCentral Control<br />
    42. 42. References<br /> Details on the Pantheon system:http://www.kent.ac.uk/web/services/university-template<br />A list of the 'snippets' - tools that are available to web publishers using Pantheon:http://www.kent.ac.uk/web/bacchus-snippets/snippets/index.html<br />Gallery examples of different website designs hosted by Kent:http://www.kent.ac.uk/web/services/portfolio<br />Pantheon owners guide:Handout in session<br />

    ×