METRO Cash & Carry CMS 7.2.1.1 / ACWS 11.3.000 / 2011-09-08 Member of MCC Advanced Customer Website...

METRO Cash & Carry CMS 7.2.1.1 / ACWS 11.3.000 / 2011-09-08 Member of

MCC Advanced Customer Website (ACWS)Training for CMS Authors

Erik Porsche

Jens Affolter

METRO Cash & Carry Member of

Agenda (1)

1

2

Product philosophy of the pirobase CMS®

3

Login, personal desktop and navigation

4

Pages and page tree

5

Smart Editor

6

Content objects and elements

Views


Agenda (2)

8

9 Data sources

10

7 Slots

Special pages (Textual IDs)

Time-based publishing

11 SEO Tasks

12 Additional information



Content is

- modular in structure (building blocks),

- independent of the layout, and it is

- stored in hierarchic page trees.

Access rights control the read and write access to content.

The same content can be re-used on other pages (= referenced)


Login, personal desktop and navigation


Browsers

In general, for viewing web pages created with the CMS, all modern browsers including mobile devices could be used.

For authoring and administration purpose, the supported browsers are:

(Source: pirobase CMS® 7.2.1.1 release notes)

The browsers must also accept cookies to work.


Login

All users responsible for the ACWS(like authors and administrators)use the same web-based toolbox: pirobase CMS® webadmin

It can be accessed by a general URL:http://{Servername}/webadmin

In case of the ACWS, use this URLto access the production server:

http://authors-acws.metro-online.com/webadmin

( The URL should work for all countries if your local workstation is within METRO Group network. )


User interface and navigation

Depending on your role you might see different personal desktops:Authors (left)… … and Community Administrators (right)


User interface and navigation – Browsers and Tooltips

For many elements and icons so-called Tooltips are provided to explain the respective function.

To activate them, place the mouse cursor on the icon for one second; a short explanatory text will pop up.


User interface and navigation – Personal desktop

"Personal data": Personal user data such as first, last and user names but also role and group membership. You can also select Your preferred languages here.

"Bookmarks": List of shortcuts for a fast and simple access to selected CMS content pages in the page trees.

"Locked content": Overview of all language versions and pages that are in the process of being edited by the user and therefore locked for all other users.Could be used to unlock the pages your user currently is editing.

"Scheduled transactions": Overview of all content for which the user has defined a scheduled transaction (publish / delete at some point in the future).


User interface and navigation – Personal desktop

("Publishing workflows": currently not used in the ACWS)

"System tasks": Long transactions started by the user that run in the background (e.g. copying of large sub-trees or inheriting authorizations in large sub-trees).

E-mail notification to the user after completion of the system task.

"Temporary settings": For longer processes, (e.g. system tasks) definition of how longa transaction may take at the longest before it is automatically aborted by the CMS.

Default setting is 30 minutes.

More information about this topic is available

…in the manual “CMS Basics"

…chapter "Personal desktop"

More information…


Pages and page tree


Pages and page tree

Content pages are stored in page tree.

Pages contain one ore more language versions. Therefore, they work like a folder.

Pages could be hidden from viewing (see light folder icon before page).

Access to pages (view or edit) is restricted by access rights.

A green pencil icon means, an author has write access to a page and its content.

1.

2.

1.

2.


Pages and page tree – Action options on pages

The Action menu on the right side shows what you can do.

After selecting a page, all options are displayed that are available for all language versions of the selectedpage independently of the language.

Options may be hidden if they cannotbe applied at the moment OR if theuser has not the access rights to use them.


Pages and page tree – Action options on language versions

After selecting a language version, all options available for the selected language version are displayed.

Again, options not applicable arehidden, e.g. if the selected languageversion is currently edited by some otherauthor, even if you basically have the access rights to edit it, you do not getthe "edit" button.

Use Help function for the modular content principle


Pages and page tree – Modular Content Principle

Use Help function for the modular content principle


Smart Editor


Smart Editor – User interface

1. Menu and tool icons(with tooltips)

2. Page name

3. Page structure overview

4. Content editing area(objects and elements)

5. Attributes(for selected item)

1.

2.

3.4.

5.



The available content objects (= page content templates) are:

Row main content object, contains one or morehorizontally arranged boxes

Column used in maginal column to arrange boxes vertical

GoogleMapWithMarkers Google map with free definable markers for shops, fuel prices etc.

Image Gallery gallery with shadowbox zoom effect

Slider browse images and link (homepage use only!)

List Numbered List, Download List…

Expandable List List with expandable content

Headline different types (styles) of headlines

Form Generator For services, Helpdesk, etc…



The available content objects (= page content templates) are:

Page Rating Everybody could once rate a page

Send a page Everybody could send pages via mail adress

Social Media Integration Integration tabes from Facebook, Twitter, etc…

Stage Dynamical table with pics at the home page


Content objects - Row

Is used to create the content in most cases.

Consist of one or more "Box" elements, which again consist of content elements.

Depending on the selected View for a page, one or more boxes could be used.(see “Views” section of all layout possibilities).


Content objects - Column

Is used only in margin column on right side

Contains one ore more "Box" elements, which are rendered on top of each other (in a horizontal line).

Boxes in a Column may consist of all other content elements.

Admins may use HTML element within a “Box” to insert flash banners (see Belgium website) or facebook Like-Box (see social media feature examples).


Content objects - GoogleMapWithMarkers

Is used to create Google Maps with optional markers (GoogleMapMarkerHTML)and needs these attributes to be set:

latitude of map center, Google style coordinates

longitude of map center, Google style coordinates

altitude zoom level, from 0 (whole world) to 19 (building)

height Google map area height in pixel

width Google map area width in pixel

The sub-element GoogleMapMarkerHTML needs:

latitude marker position

longitude marker position

(HTML) Content will be shown in bubble above marker


Content objects - GoogleMapWithMarkers

Hint:

If You want to find out the latitude and longitude coordinates, use Google Maps

• Go to Google Maps and enter target address

• Go to New! Tab and activate LatLng Tooltip and Marker

• You could then SHIFT Left-Mouse-click for the Tooltip

• Right-Mouse to drop a marker


Content objects - Image Gallery

Is used to create image gallerieswhich could be browsed.

If you click an image, it will be shownin a shadowbox.

Several attributes could be assignedto the shadowbox.

All parts have to be stored in a data source.


Content objects - Image Gallery

1) You put all the images (in original size) in a folder in your datasource (e.g. webadmin -> [Content] [Data Sources] "Czech Republic" "Data" "Images" "horeca")

2) You create a page with the "Image Gallery" object, which has a "Lightbox" element in it.

3) You copy& paste the PATH to the images in the datasource in the text-field of the Lightbox (e.g. in this example "/mcc_cz/data/images/horeca"

4) You set the attributes of the "Lightbox" element, e.g. filename yes/no, height & width of the thumbnail images.

The Image Gallery then creates a preview automatically with thumbnails of the images.

When you click an image, a lightbox opens up in the original size of the image.

Example: please see

http://authors-acws.metro-online.com/public/site/demo/node/67290/Len/index.html


Content objects – Slider

Is used to create a slider-like browser element.

Has paging, if more than five elements are displayed.

The interconnection between all parts and the links are described in one CSV file.

All parts (CSV and images) have to be stored in a data source.

Images should be in an own subfolder in the data source.


Content objects – Slider

The Slider CSV is structured as follows:

Pos. 1: Tab name (= Slider main nav)

Pos. 2: Category name (= slider 2nd nav)

Pos. 3: thumbnail image

Pos. 4: large image

Pos. 5: target URL for the link

Hint:

If you want to have an image show up in a category "all", it means you have to

make sure all images have to be twice in the CSV, one time with category "all"

and one time with their real category.


Content objects – List

Is used to create a list element in a various number of levels.

1 bullet list: Unnumbered bullet lists are available in two hierarchy levels. Text length is not limited (unless stated otherwise in the module description).

2 numbered list: Numbered lists are available in two hierarchy levels. Text length is not limited (unless stated otherwise in the module description).

3 link list: Each link in a link list must have an iconic arrow. Link length should not exceed 1 line.

Expandable List


Content objects – Expandable List

Is used to create a Expandable list element in just two levels .

This module is used to display large amount of text in a clear layout. It avoids extraordinary long pages by using expandable elements. Most common usage is on the FAQ page where many of these modules are used. The module can be used on full width pages.


Content objects – Header

Is used to create a headerelement in a row or column.

4 different styles are available.

You can use what header you like in a different cue


Content objects – Email Form (Form Generator)

ACWS gives you the opportunity to create your own forms using content elements. As you are used to edit pages with the Smart Editor you can simply prepare pages with forms as you need them. The forms generate an e-mail which is then send to one or more recipients. The Form Generator is therefore a flexibel solution to create several kinds of contact forms.

You could create several forms within the same page tree (= same website), but there could be only one form per page. That means, different contact forms for e.g. different assortments or customer groups AND an overall generic contact form at a centralized place in the webiste are possible.


Page rating

Rating has to be assigned as an Community Admin to a countries page tree.

Authors could then individually select Page rating as a page attribute within the page tree.

Page rating will be shown on the bottom right corner of the content area.

It has been implemented as a „star“ rating.

Currently, it is a level from 1 to 5 „stars“.

An average of all votes will be calculated.

You could decide if rating will be available for anonymous or for logged-in users.


Views


Views

Views are used to assign layout structures to a page.

A View is set in the page tree view with option "Attributes".


Views

The views used in ACWS for page layouts are:

mcc-cw-home for country homepage only

mcc-cw-content for 3-column content pages with navigation and marginal column

mcc-cw-contentnomarginal for 4-column content pages with navigation only

mcc-cw-contentnonavnomarginal for 5-column content pages

Additional special views are:

mcc-cw-askquestion special survey form

mcc-cw-ordervoucher special ordering form

…


Views - mcc-cw-home

Use-case: Used for the entry page (= homepage) of a page tree only.

Might have a different logo and logo height in page header. (see page attributes)

Might have call-to-action boxes in page header. (uses slot “header”).

1 box = 5 columns width

2 boxes = 2.5 columns width

5 boxes= 1 column width


Views - mcc-cw-content

Use-case: Used for standard contentpages with sub-navigation on the left sideand a margin column on the right side.


2 boxes = 1.5 columns width



Views - mcc-cw-contentnomarginal

Use-case: Used for wide content pages with sub-navigation on the left side.


2 boxes = 2 columns width



Views - mcc-cw-contentnonavnomarginal

Use-case: Used for extra wide content pages, e.g.with large table structures or large promotional images or flash content.


2 boxes = 2 columns width



Slots


Slots

Slots are used to define where a) content is to be rendered (e.g. object “Column” in slot “Marginal”)b) information is used (e.g. object “Meta Tag” in slot “headerTag”)

Slots could be applied on a CMS object level (e.g. “Row”, “Column”, “Title”…).

The default value is the slot “content” (if NO slot is assigned to an object).


Slots

Which slots are available is dependant on the view selected for a page.

These slots exist:

header on object "Row", rendered on top of header logo(e.g. for call-to-action boxes)

margin on object "Column" only, rendered in right margin column

bottom on object "Row“ (e.g. for the “branch logos“)

Footer_logo object “Row”, contains only one “Box” with one logo “Image”



Some pages play a special role in the system. Therefore, they are marked using a system-wide unique access key, the “Textual ID”: (e.g. the homepage with master.textual_id.root = _ACW_HOME_ )

Depending on the country, a shortcut has to be added to the Textual ID(e.g. homepage for Belgium would have _ACW_HOME_BE_ )

Some special pages should not be visible in the normal navigation. Therefore, it is a good idea to hide them from view (page "Attribute" "hidden" activated).

It is also a good idea to place all the special pages in a special area(e.g. a subtree with a hidden parent page).


Special pages (Textual IDs) – naming conventions

Textual IDs must be unique to work, so a template for the naming is:

<country>_<brand>_<language>_<description1>_<desc2>_<...>

E.g for the newsletter registration form in Belgium in dutch language, it should look like this:

BE_Makro_NL_newsletter_registration


Special pages (Textual IDs) – special slots in layout

In some cases, a Textual ID is used to assign a page content that will be re-used on many pages automatically.

Therefore, create a special page in the special pages area, assign one of the Textual IDs below and publish:

default.content.MARGINAL=

_ACW_DEFAULT_MARGINAL_RO_

default.content.SEO= _ACW_DEFAULT_SEO_RO_

default.content.BOTTOM=

_ACW_DEFAULT_BOTTOM_RO_

The content of the special page will then be shown atone of the positions shown in the screenshot.


Special pages (Textual IDs) – header and footer navigation

Textual IDs are also used to link the small print to a content page.

Create this pages and assign it one of the following Textual IDs:

- Header additional navigation (small print) _ACW_NEWSLETTER_

_ACW_HELP_

- Footer additional navigation (small print)

_ACW_PRIVACY_

_ACW_LEGAL_

_ACW_TERMS_OF_USE_

_ACW_COPYRIGHT_


Data sources


Data sources – What it is

In ACWS project, all binary files are stored in a Data Source.

Their names and access rights are managed by the Community Admins of the countries.

They can be filled with content by the authors, by external agencies or from other systems.

Content from data sources could be :

- images (data source as “image pool”)

- documents from the Office suite

- PDF files

- ZIP archives

- Flash or other multimedia files

- …


Data sources – How it is used

Documents from internal and external data sources could be mixed on thesame page.

A document from a data source couldbe used on several different pages.Therefore it could be centrally replaced.

Data sources should have a hierarchic„folder“ structure according to a countries needs!


Data sources – How it is used

Files in data sources can be linked tofrom within the Smart Editor.


Data sources – Mass file upload (using WEBDAV)

To get access to a data source using WEBDAV, follow these steps:

1. Start Windows Explorer (from Start menu or [Win]+ [E] )

2. Enter access URL in address line, e.g.http://authors-acws.metro-online.com/webadmin/webdav

3. Choose community and data source

4. Navigate to desired folder

5. Click on “Explorer” menu item to start Windows Explorer

6. Login with your CMS user and password

7. Copy & paste or drag & drop files and folders into target WEBDAV folder

6.

4.

5.


Header additional navigation

How to remove links from the header navigation:

Property Editor „mcc_customerweb_layout“ „common“

KEY:

common.head.flags

DEFAULT VALUE:loginLink,newsletterLink,helpLink,sitemapLink,languageBox,searchBox

by removing a link, e.g. „loginLink“, the option is no longer shown in layout



There are several options to do a time-based publishing:

From the „publish draft version“ menu when going to publish a page

From the attributes of a page „Restrict availabilty“

From the attributes for each ROW object individually


Time-based publishing – Publish draft version menu

Open „advanced Options“

Check „Publish At“

Select a date and a time

ATTENTION!

The time used is always the

SERVER TIME, meaning

Central European Time (CEST)


Time-based publishing – Restrict availability of a page

Edit „Attributes“ of a page

Go to tab „Availability“

Choose „Restrict availability“

Set requiered date and time for visibility (from – to)

ATTENTION!

The time used is the SERVER TIME, meaning Central European Time (CEST)


Time-based publishing – Publish draft version menu

Open page in Smart Editor

Select „ROW“ object with mouse

Select „Attributes“

Select „Common“ tab

Check „Hide“ checkbox

Set date and time for „Visible from“ and „Visible to“

ATTENTION!

The time used is always the

SERVER TIME, meaning

Central European Time (CEST)


SEO Tasks


Content objects - Meta Tags

Is used for search engine optimization (SEO) of a page. Creates the meta tags "keyword" and "description" in HTML source code.

Can be used on the same page together with other content objects like “Row”.

A slot “headerTags” must be assigned to the “Meta Tags” object


Content objects – Title

Is used for search engine optimization (SEO) of page. Creates an alternative title tag in HTML source code.

Will also show up on the browser window title bar.


Additional information


Additional information - documentation

All ACWS documentation can be found on the eBusiness suite/MCC collaboration:

http://teamsites.metrogroup-networking.com/sites/MSYS000007/MSYS000071/

SitePages/Homepage.aspx (e.g. Styleguide)

The CMS features are documented in a Wiki:

Wiki/Index_CMS.aspx (e.g. product manuals and ACWS features)

The most up-to-date version of this presentation can be found at:

eBusiness/MCC_ACWS_Training_CMS.ppt

The UX documentation could be found at: http://bit.ly/oTE6o8


Additional information – Support

A) During project phase / before go live(via e-mail):

Author Community Admin METRO SYSTEMS BPE ( DEV )

Supportmail: METRO SYSTEMS DE - ACWS DEPLOYMENT

B) After going live (via HPSM ticket):

Author 1st lvl support in country 2nd lvl support 3rd lvl: DEFECT = DEV

(IM person?) (MSYS) REQ = BA (CMS)

(Community Admin?) INQ = BPE

METRO Cash & Carry CMS 7.2.1.1 / ACWS 11.3.000 / 2011-09-08 Member of MCC Advanced Customer Website...

Documents

Transcript of METRO Cash & Carry CMS 7.2.1.1 / ACWS 11.3.000 / 2011-09-08 Member of MCC Advanced Customer Website...