Africa through the eyes of its children
|
|
|
| Site | Africa through the eyes of its children |
|---|---|
| Industry | Non-profits |
| Location | United Kingdom |
| Contact | not available |
40 years for SOS Children in Africa
As part of its celebration of 40 years working in Africa, SOS Children launched the “Our Africa” project whose centre piece was to be a website which delivered an educationally focused multi media experience. The site would include videos, articles and interactive maps and introduce a dynamic navigation system.
SOS Children had already achieved considerable success using Plone and so it was the natural choice as a CMS to manage the content of the site. However, Our Africa was to be no ordinary website and considerable customization of the public user interface would be required as well as a distinct set of content types and a way to configure the image map menus. Integration with a content delivery network, used to stream the videos, would also be required.
This article describes how some of the latest Plone technologies were leveraged to deliver this innovative website and also provide and an easy to use content management interface behind the scenes.
An innovative navigation using tiles and teasers
Our Africa introduces a dynamic navigation system aimed at engaging users whilst keep the UI easy to use. This menu system is utilised on the home page, country pages (for example South Africa) and interactive map pages (for example this map of Rwanda). The look of each type of page is different but the user interaction the same: hovering over active areas on the image display a teaser for the linked content, clicking takes you to that content.
The client side code required for such a site is of course far removed from that delivered with Plone’s default theme and does not at all lend itself to a WYSIWYG content editing experience. Plone’s tree model of content, whilst perfect for most sites, can’t be used to configure a 2D image map.
Tile based navigation delivered by Diazo
plone.app.theming uses Diazo to allow you to develop and deliver web pages as close to or far way away from Plone’s built in look and feel as you require. It will be shipped as part of Plone 4.2.
This enabled the implementation of Our Africa’s public site without the need to override any of Plone’s core templates. Pages are built by a combination of transforming the HTML delivered as standard by Plone and inserting other blocks of HTML generated by custom views developed specifically for the project. The CSS and Javascript required by the site are also part of the theme.
Editors of the site access the content management interface via a different domain. When viewed through this domain the site uses Plone’s built in theme, except the body of the view template is swapped (using a Diazo rule) for a preview pane that shows the content as it would be seen via the public domain.
Custom content types made easily with Dexterity
Dexterity is a content type framework for Plone that provides an alternative to the default Archetypes framework. It has been developed to enabled rapid implementation of new content types and is likely to be shipped with Plone 4.3.
Our Africa had a number of requirements that made Dexterity the natural choice for its content type framework:
- a number of different content types were required but the exact number and nature of them weren’t clear when development commenced: A flexible framework with types that are easy to change was desired
- the distinct item types that were identified had sets of shared properties: A good fit for Dexterity’s concept of behaviours
- little overlap with Plone’s built in content types: No benefit from re-using them
For example the menu pages (home, country and map) all display teasers for the content they linked to. Any page level content type can be linked to and so all of these content types need fields for holding the teaser title, body and thumbnail. A behaviour was created to model teasers and assigned to each relevant content type resulting in minimal code and configuration and easy maintenance for this feature.
Videos streamed from a CDN
The real beauty of the site is its use of video footage recorded and presented by the children of the continent. Dedicated video pages were required plus the ability to play videos inline from within other articles. Plone is not a streaming server and so a content delivery network was chosen to host and stream the videos.
Again Dexterity behaviours provided a powerful way to reuse code for the video page and inline video content types. A view of these types was created to build the HTML block required for the client side code. This was easily reusable by both a Diazo rule to render the video page and an output filter to render the video inline.
Plone’s use of TinyMCE as the visual editor for formatted fields allowed a dialog to be developed for inserting videos inline into the text. Working much the same way as the insert image dialog this providers a powerful feature for editors to control where videos are placed within the body of pages.
A real success story for Plone
The site was offically launched in the UK in May 2012 and the Our Africa project is considered a great success. At the time of writing 21 countries are live with over 150 videos available to watch and just as many articles to read. This is a real advertisement for the ease of content editing provided by Plone (as well as the great efforts by the content creation team). The site had a “soft launch” in the summer of 2011 and was attracting over 10,000 visits a month by Q2 2012 and has been received tremendously well in schools where it has been trialled.
“The site is compelling and engaging, opening a window into the lives of young people from Morocco to South Africa.”Judges, One World Media Awards 2012
Winner One World Media Awards 2012 new media award
In May 2012 Our Africa was awarded the One World Media Award in the new media category. This award, sponsored by Google, was presented at the 2012 awards ceremony by Jon Snow of Channel 4 news.
Implementation details
“The beauty of ‘Our Africa’ is that it shows children in the UK the similarities between their own lives and children living in Africa. As well as showing the obstacles that many young people face living in Africa, it essentially shows young people with similar mindsets, ambitions, hopes and interests. It is a great learning tool.”Lee Hunter
Deputy Head Teacher at The Tiffin Girls’ School in London
The Plone implementation of the site took around 150 man days with additional development effort for the implementation of the video streaming client side code. The site was soft launched 5 months after development started with the final feature release after 10 months.
About SOS Children
SOS Children is the world’s largest orphan and abandoned children’s charity and its vision is “a loving home for every child”. By sponsoring a child donors provide over 78,000 children worldwide with a family in one of the 500 unique Children’s Villages found in 125 countries whilst a million children and their families are helped through programmes in the surrounding communities.
“SOS Children” refers to SOS Children’s Villages worldwide. SOS Children is also a working name for SOS Children’s Villages UK.
About Our Africa
Our Africa is an ambitious project which sets out to let children across Africa film their lives and countries the way they see them. It celebrates the 40th anniversary of SOS Children’s work in the continent.