Alphamosaik
4000 St-Ambroise
Suite 270
Montreal H4C 2C7
514-931-3169
Iteration 1 – Sprint 3 – TL1-3 page layout
analysis
UNESCO
Daniel Mankarios
daniel.mankarios@alphamosaik.com
Monday, June 01, 2009
Monday, June 01, 2009 Page 2
TABLE OF CONTENTS
1.
2.
1.1.
Description of the mandate
4
Introduction .................................................................................... 4
1.2.
Document subject and scope ............................................................. 4
1.3.
Definitions ....................................................................................... 4
Action Plan............................................................................................ 5
2.1.
Preliminary introduction to SharePoint content ..................................... 5
2.1.1.
Publishing HTML Field Controls ........................................................ 5
2.1.2.
Summary links Field Controls .......................................................... 5
2.1.3.
Web part zones ............................................................................. 6
2.1.4.
Other zones .................................................................................. 7
2.2.
Theme Level 1 Layout ....................................................................... 8
2.2.1.
Theme Level 1 Description.............................................................. 9
2.2.2.
Did you know ................................................................................ 9
2.2.3.
What’s New ................................................................................ 10
2.2.4.
The UIS and X ............................................................................ 11
2.2.5.
Resources .................................................................................. 11
2.2.6.
Forum ........................................................................................ 12
2.2.7.
TL1 Summary ............................................................................. 12
2.3.
Theme Level 2 Layout ..................................................................... 13
2.3.1.
Content zone 1 ........................................................................... 14
2.3.2.
Featured content ......................................................................... 14
2.3.3.
Other resources .......................................................................... 15
2.3.4.
Content zone 2 ........................................................................... 16
2.3.5.
Summary ................................................................................... 17
2.4.
Theme Level 3 Layout ..................................................................... 18
2.4.1.
Image zone ................................................................................ 19
2.4.2.
Content zone .............................................................................. 19
2.4.3.
Download zone ........................................................................... 19
2.4.4.
Link zone ................................................................................... 20
2.4.5.
See also ..................................................................................... 20
2.4.6.
Summary ................................................................................... 20
2.5.
Conclusion .................................................................................... 21
2
Monday, June 01, 2009 Page 3
Document history
Author:
Daniel Mankarios
daniel.mankarios@alphamosaik.com
514-931-3169 x178
Reviewer(s)
Name
Name
Name
Name
E-mail
Your e-mail
Your e-mail
Your e-mail
Date
Date
Date
Date
Document status
Under revision
3
Monday, June 01, 2009 Page 4
1. Description of the mandate
1.1.
Introduction
The UNESCO Institute for Statistics (UIS) wishes to create a new public web site
using a renovated look and a more alluring interface. The platform selected is
Microsoft Office SharePoint 2007. The website will be using AlphaMosaik's
multilingual module as well as several custom components to deliver a rich
experience to all future users of their site.
1.2.
Document subject and scope
This document will cover three particular page layouts within the SharePoint site. These page
layouts are the “Theme level 1”, “Theme Level 2” and “Theme Level 3” layouts which are used
throughout the UNESCO site. The discussions in this document pertain to the analysis of the
nature of the actual zones found on the page and the sources of content for these zones (within
the page or from a container within the site). The elements of the master page (top zone above
and including the yellow banner, grey menu zone at the left) are excluded from this analysis as
they are not part of the content zone.
1.3.
Acronym
MOSS
TL1
TL2
TL3
CEWP
CQWP
DVWP
Definitions
Definition
Microsoft Office SharePoint Server 2007
Theme Level 1
Theme Level 2
Theme Level 3
Content Editor Web Part
Content Query Web Part
Data View Web Part
Static content: All references to static content within this document refer to
content that is entered directly into a zone designated to receive text that does not
change frequently. For example, the description of a theme on the theme welcome
page is considered to be static.
Dynamic content: All references to dynamic content within this document refer to
content that is not directly entered into a zone designated to receive text, but
rather to content that is automatically pulled from a container (list or library) whose
content can change frequently or automatically based on dynamic filters (date
filters and such).
4
Monday, June 01, 2009 Page 5
2. Action Plan
2.1.
Preliminary introduction to SharePoint content
This section will help UNESCO understand the nature of the various zones available
in a SharePoint site and the implications each zone has for editing and approval.
2.1.1.
Publishing HTML Field Controls
SharePoint allows the placing of publishing HTML field controls within a page. These
controls exist as zones and take on a certain position and size within the page.
They are also rich text enabled, allowing editors to customize text to their liking. A
certain number of predefined styles will be available (based on the design material
provided by Akufen) so that editors may ensure uniformity across all HTML field
control zones. However, a certain number of the rich text controls will also be
disabled to prevent overriding the styles. The image below provides a preview of
the HTML field control zone (with the styles dropdown showing).
This type of zone is considered to be a static content zone. Modifications to the
content of this zone are performed directly in the page where the zone is located.
The zone cannot be relocated as it is an integral element of the layout (the layout
can be modified by an administrator with the appropriate tools and permissions).
2.1.2.
Summary links Field Controls
SharePoint is also provisioned to allow content editors to embed links to content or
documents directly within a page. These links are added within a summary link field
control within which a layout and style can be selected and applied to the entire
control to ensure a uniform appearance. The summary links are entered directly in
a page and are considered semi-static. They can be changed by editing a page and
using the summary links management tools.
The summary link zones come in two flavors: field controls and web parts (see
section below).
The following image illustrates the summary link management tools:
5
Monday, June 01, 2009 Page 6
The following image illustrates the new link manager:
2.1.3.
Web part zones
Web part zones are zones in which web parts are added. The following image
illustrates a webpart zone, which has similar properties to a HTML field control zone
in its static placement and size on the page, and the dialog allowing users to add
web parts to the zone.
6
Monday, June 01, 2009 Page 7
Web parts are defined in the following manner:
ASP.NET Web Parts is an integrated set of controls for creating Web
sites that enable end users to modify the content, appearance, and
behavior of Web pages directly from a browser. (Microsoft, 2009)
The web parts to be used will pull content from containers within the site where the
page is located. These containers will be lists or libraries of various sorts. Since the
content of the list can change independently from the page itself, web parts are
generally considered to be dynamic content objects.
The following image illustrates 3 sample web parts in their zone (edit mode) as well
as the final appearance for an end user:
As the content gets pulled from containers throughout the site, editing of the
content displayed in the webpart is performed inside the containers (lists, libraries)
where the content is located. This is the native behavior of SharePoint and should
be understood by UNESCO content editors and approvers.
2.1.4.
Other zones
Other publishing zones do exist (image zones, title zones, other field controls) but
will not be used for the design of the layouts. Therefore, their descriptions are
excluded from this document.
7
Monday, June 01, 2009 Page 8
2.2.
Theme Level 1 Layout
The analysis of this section is to be conducted on the content zone of the
theme level 1 page. The mockups provided by UNESCO will be used to refer to the
various zones on the page with each subsection of the document describing a
different zone on the page. The content zone referred to above is the represented
in the following diagram:
8
Monday, June 01, 2009 Page 9
2.2.1.
Theme Level 1 Description
This zone will contain static text and will be implemented using a publishing HTML
field control.
2.2.1.1
Learn more link
The “learn more” link found in the bottom right corner of the text will expand the
text of the Theme Level 1 Description. The text will expand directly beneath the
existing “teaser” text. This expanded text should be in its own publishing HTML field
control with the “learn more” link simply displaying this zone or hiding it.
After the link has been clicked, the “Learn more” text turns into “Hide”. When the
“Hide” link is clicked, the expanded zone rolls back up and the display returns to its
initial form.
2.2.2.
Did you know
The “Did you know” zone will provide a quick fact and always be displayed in the
top right corner of the page within a zone with a predefined height and width. The
text will have to be short enough to fit within the designated zone.
Given the dynamic nature of this zone (text changes on each page load), the zone
must be implemented using a web part. The behavior of the web part will be
described in a separate document but the most likely candidate for this web part is
the CQWP.
9
Monday, June 01, 2009 Page 10
2.2.3.
What’s New
This zone will contain a listing of recent news (i.e. dynamic content). Therefore it
will consist of a webpart whose behavior and design is described in a separate
document (Iteration 1 – Sprint 1 - What’s New Webpart and derivatives analysis).
The most likely candidate for this webpart would be a Content Query Webpart
(CQWP).
10
Monday, June 01, 2009 Page 11
2.2.4.
The UIS and X
This section will contain a list of TL2 pages of the present site. This zone lists the
pages in the same order as the left navigation menu. Therefore, it will most likely
be advantageous to reuse the same data source used to generate the menu. Given
that the data source will be centralized per theme, this zone should be implemented
using a web part that connects to the data source (either using a DVWP or CQWP).
2.2.5.
Resources
The resources component is a zone of relatively static content. However, given the
uniformity of the formatting (each entry has a standard appearance), it would be
best to use a webpart (DVWP or CQWP) to display the various links in this zone.
Using a publishing HTML field control would allow great flexibility but would make
formatting the links and text a difficult and time consuming process.
11
Monday, June 01, 2009 Page 12
2.2.6.
Forum
The forum zone is out of scope for the present phase but is included for
completeness. The forum, given its dynamic nature, will be implemented using a
web part (presently of unknown nature).
2.2.7.
TL1 Summary
The various zones of content in the TL1 page can be summarized with the following
mockup:
12
Monday, June 01, 2009 Page 13
2.3.
Theme Level 2 Layout
The analysis of this section is to be conducted on the content zone of the
theme level 2 page. The mockups provided by UNESCO will be used to refer to the
various zones on the page with each subsection of the document describing a
different zone on the page. The content zone referred to above is the represented
in the following diagram:
13
Monday, June 01, 2009 Page 14
2.3.1.
Content zone 1
This zone will contain static text and will be implemented using a publishing HTML
field control.
2.3.2.
Featured content
The featured content zone will contain a list of documents available for download.
The documents listed are simply links towards internal or external documents.
Given that they are links and not documents within the theme site, it is possible to
implement this zone using a summary links web part. Using the web part allows
zone to take on the grey heading and style automatically.
2.3.2.1
Show more link
The “Show more” hyperlink at the bottom of the zone allows users to expand the
above list by showing a list of hyperlinks to miscellaneous content. This list is by
default hidden and has the same appearance as the featured content above save
for the missing heading. This zone will also be implemented using a summary link
web part, but with a different layout and style. The image below illustrates the
appearance of the expanded zone:
14
Monday, June 01, 2009 Page 15

2.3.3.
Other resources
The “Other resources” zone behaves in exactly the same manner as “Featured
Content”. The only difference is the style applies to the links in the collapsed and
expanded versions. This zone will therefore be implemented using a web part zone.
15
Monday, June 01, 2009 Page 16
2.3.4.
Content zone 2
This zone will contain static text and will be implemented using a publishing HTML
field control.
16
Monday, June 01, 2009 Page 17
2.3.5.
Summary
The various zones of content in the TL2 page can be summarized with the following
mockup:
17
Monday, June 01, 2009 Page 18
2.4.
Theme Level 3 Layout
The analysis of this section is to be conducted on the content zone of the
theme level 3 page. The mockups provided by UNESCO will be used to refer to the
various zones on the page with each subsection of the document describing a
different zone on the page. The content zone referred to above is the represented
in the following diagram:
18
Monday, June 01, 2009 Page 19
2.4.1.
Image zone
The top left zone of the page consists of an image. As this is considered static
content, the image will be implemented using a publishing image zone.
2.4.2.
Content zone
This zone will contain static text and will be implemented using a publishing HTML
field control.
2.4.3.
Download zone
The layout page will provide an optional link towards a document for download. This
zone will appear underneath the text and be implemented using a custom control.
This zone will therefore not be editable in SharePoint web and its location will be
fixed on the page.
19
Monday, June 01, 2009 Page 20
2.4.4.
Link zone
The link zone is simply a hyperlink towards additional information and appears on
the right hand side of the page underneath the text. This link is to be implemented
using a hyperlink field control and its location will be fixed on the page.
2.4.5.
See also
Finally, the “See also” zone is a list of hyperlinks which can be implemented using a
“summary links” web part. This web part will allow direct edition of the links directly
within the page. Therefore, this zone will be a web part zone.
2.4.6.
Summary
The various zones of content in the TL3 page can be summarized with the following
mockup:
20
Monday, June 01, 2009 Page 21
2.5.
Conclusion
To conclude, the page layouts described in the above sections should address the
needs of UNESCO based on the preliminary analysis provided in the RFP and the
discussions with UNESCO.
21