GNOME Website - Plone Implementation

Translation and Deployment

There are extra pages for Translation and Deployment

Proposed Layout and Plone

Roughly said Plone consists of five different areas in layout. Except of the content area all is optional, but it makes much sense to use at least header and footer. Look at this table to illustrate:

If we look at the GnomeWeb/TwoPointTwentyseven/Design we already know about, we can identify the following features:

• header is reduced to portal-tabs (plone speech for the navigation) and live-search (plone speech for the search field)
• footer is enhanced with a modern site-map including areas not part of wgo. We need to builkd the map manually for now.
• no portlet columns are used (switch them off).
• content area has alsways a main title which is combined with logo using a non-web-font
• content area of main page is divided into several parts and should be flexible (see below). It might be useful to have this option for subpages too.

Front page

We will use the add-on Collage which allows editors to arrange pieces of content very freely.

Collage mainly does three things:

1. It allows you to divide the content area into rows and each row into one or more columns.
2. In each column you can add new or reference existing content snippets.
3. Each content snippet gets a 'layout' assigned. I.e. this way a simple document can be shown very differently.

A training session (2 hours, online i.e. video tutorial or irc+read-only-vnc) for editors is needed as Collage and associated concepts (adding content, integrating collections (aka smart folder) or RSS feeds in Collage) may be a bit complex.

Structure & Collage Inner Layout

Collage - content-type in website root.

id = "front-page"
name = "start"
show_title = False
show_description = False

Add content to Collage

Strategy 1: reference existing items As said Collage allows you to reference existing content inside the Plone site and show it within a Collage. I.e. this works fine for Top-5-News and Upcoming Top-5-Events. News and Events are stored dynamics searches called Collection in Plone. In a default Plone both (News and Events) Collections are pre-configured on installation of a vanilla Plone. Both are having already an archive. To show the top-5 (newest) news we reference the collection into collage and apply a layout showing only the top 5 of the listing. Providing a more link to the collection itself the visitor jumps to the full-listing with archive.

PRO:

• All front-page only content (banner, etc.) in all versions from any time at one place.
• Editors can organize their content as they need (sub folders, etc.)
• Content is better accessible for editors and not hidden in a collage/row/column structure.
• Content can easily used anywhere else.

CONS:

• To add something to Collage it has to be created somewhere else. This may disturb the workflow.

Strategy 2: adding new items inside Collage also allows you to create new contents inside a column object. It is useful for documents (text) or images which are never used outside of Collage.

PRO:

• Better workflow.
• Clearer for new editors where to find the contents.

CONS:

• Less accessible for editors.
• Content is not reusable somewhere else.

Content includes...

• Images,
• Pages,
• Files,
• Collections (stored dynamics searches),
• separate Link items (title, description, url),

How to display N newest Blog entries at startpage

(is this feature needed? - there have been discussions: designers, content-creators, get a decision!)

The Gnome Planet offers (need to check, at least the used software Planetplanet offers the feature) a feed of all aggregated entries. We take the link of the feed and create a simple Link item inside collage (strategy 2 like). Then a custom layout is assigned to the Link. It wraps Plones RSS-portlet feature (see python class plone.app.portlets.portlets.RSSFeed) into a Collage layout. Latter need to be created, but its not too difficult.

Example of collage in use

http://www.faces.ch/

Content Types

General Informations about Content Types in Plone

For different purposes Plone provides different content types (e.g. page, image, event). A content type defines what informations are stored, e.g. a text or a date, in plone called fields. For a content type there can be defined a list of display views that mostly use different templates to display the content with other layouts. An example are the listing, tabular and gallery views for folders.

Title and Description

All content types in plone store at least a title and a description (in plone called "fields"). The Title is required, the description is not required.

Some Other Items Commonly Stored on Every Content

references

Editors can add references to other content in the site to most content types except folders. These are displayed when the content is viewed.

categories

Content can be marked with with different categories for searching or listings (better name would be "tags")

exclude from navigation

Don't show this content in the navigation even if it would normally be shown.

publish and expiration date

The content doesn't show up in listings, navigation and searches outside these dates. (but it still accessible if the user has the permission)

Relevant Content Types

Folders

Folders have no additionally fields beside title and description

All content is organized in a tree of folders. For every folder the editor can select the default view (analog to the index.html in a simple web server). This can be

• a listing of the content in a folder with description and author/date
  • (this is the default)
• a tabular view
• a thumbnail view for image galleries
• one of the content items in the folder, e.g. a page

Also, folders can provide a next/previews navigation to step through a number of pages, e.g. in a "Take a Tour" section.

Pages

Pages have the following fields

• a body text that is edited with a wysiwyg editor

• a references field.

News Items

News Items have the following fields:

• a body text that is edited with a wysiwyg editor

• a references

• an image (individual upload)

• a caption for the image

List's of news are normally done with collections (see below). There is a portlet (the boxes on the right or left side like a navigation or a calendar.) that shows the x latest news in the whole site.

Events

Events have the following fields

• a body text that is edited with a wysiwyg editor

• a references field.

• a location (text line)
• start and end date
• a text box for attendees
• url
• contact name, email and phone
• event specific categories (can be used to tag e.g. conferences, sprints, conventions)

List of events are normally done with collections (see below). There are two portlet (the boxes on the right or left side like a navigation or a calendar.). One shows the x next events in the whole site, the other is a calender.

Collections

A Collection is like a folder that displays the results of a search. The editor defines a list of criteria (e.g. which content type, in which part of the site or in which categories) and a sort order. The collections then show's a list of results. It provides different display views to show the results. It's good to show e.g. the news or events in the site or in a subsection of the site. This can for example be used by an editor to create an archive of all events in 2009.

Collage

An add on to compose a Page out of different content. Part of the "Front Page" proposal.

Other Content Types Provided by Plone Out-Of-The-Box

• Link
  Title, Description + URL

Status/Changes for wgo

The content types mostly meet the content management needs of wgo.

There are visual changes in wgo.theme based bugzilla tickets that e.g. replace the name of the original author with the name of the last editor, push the related items from the end of the page to the right side below the title and other, minor tweeks.

The only big change to default plone content types is that we require the desciption on wgo. Title and description are used in many places.

• folder listings
• search results
• the sitemap

The Editors have to fill out the description for every content they add to guarantee a consistent user experience for the visitors.

For all content types that don't have a bigger body text, e.g. an, the description is also displays when viewing the content. For types with a bigger body text (pages, events, news items), the description is not displayed when viewing the content. Authors can add an introductional paragraph to the body text where suitable.

For further informations see the discussion in bug 454564 and the readme of wgo.theme.

I expect some changes to expect with the new graphical design. Otherwise we are already in a phase of minor tweaks and bug fixes that need responses from the Content team.

There are some potentional future changes that are not discussed now or where droped/postponed in the past.

• The Products section was postponed (or droped?, there are two applications atm with GnomeFiles and projects.gnome.org)

• The Take a Tour section that was postponed. Tours can be assembled with the next/previous navigations of folders if they don't need to be too fancy - keep it simple

• Videos or Audios - There is a common Plone add on (Plone 4 Artists) for this.

If additional content types are required to go into 2.28 we should plan this as early as possible and start implementing it when the rest of the site is near beta.

Theming

wgo will be themed with deliverance.

• Deliverance is a tool to theme HTML, applying a consistent style to applications and static files regardless of how they are implemented, and separating site-wide styling from application-level templating.

It works like a proxy that inserts parts of the content into an template with a simple rules language. It makes the theming of plone faster and allows to use the templates developed by Vinicius and Andreas including their semantics. It also reduces the size of the delivered pages.

Deliverance can run in its own process as a proxy or as part of a WSGI pipeline.

The rules are written in a xml format. The selection of elements is done with CSS or XPath selectors. A simple rule that inserts the main content from a plone site into vinicius' and Andreas' gnome.org-templates is:

<replace content="children:#content' theme='children:#content' />

The children of the content element with the id "content" replace the childeren of the theme element with the id "content" (coincidental the same id).

The current theme template looks like:

  ...
  <div id="container" class="container_12">
     <div id="content" class="grid_9">
        <p>
        </p>
     </div>
  ...

the plone content like:

   <div id="content">
      <h1 class="documentFirstHeading"> 
      ...
   </div>

the result will be

  ...
  <div id="container" class="container_12">
     <div id="content" class="grid_9">

        <h1 class="documentFirstHeading"> 
        ...

     </div>
  ...

Tasks

Webdesign

• polish the theme templates
• identify missing parts. These could be e.g.
  • Forms: contact, advanced search, search results (if so based on some kind of plone markup)
  • press/media section (listing, press releases, supporting media?)
  • sitemap (based on the plone markup)

  • call to action boxes (like on the content page for products)

  • preformated/code boxes
  • Friends of GNOME (decide if/how to integrate it and restyle it)
• develop the css for the missing parts
• specify the elements that should be used by the editors (blockquotes, inline quotes, headings, intro text, pre formated, etc. and write styles for them.
• create additional images
• continually test design and adapt some of the styles to the markup that plone produces (e.g. navigation)
• help writing the rules

Programmers

• Add deliverance to the buildout
• create deliverance rules for the design
• adjust components that can't be themed with deliverance alone (afaics done in the current wgo.theme package)
• write documentation for setting up a sandbox and deploying on socket.gnome.org

Sysadmins

• Update socket