Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Table of Contents
• Switching between Classic UI and Touch UI (plugin)
• General System Training
• Templates PhonakPro
• Components PhonakPro
• Templates Phonak.com
• Components Phonak.com
• Rollout and Translation process
• Support
I Footer2 24/03/2020
Switching between Classic UI and Touch UI
Switching between Classic UI and Touch UI
Install Chrome plugin:
https://chrome.google.com/webstore/detail/aem-developer/hgjhcngmldfpgpakbnffnbnmcmohfmfc
It has a button to switch between touch and classic.
I Footer3 24/03/2020
General System Training
• 2 Server – Test & Production
−P-Server (Production author – live system): https://prod-author.phonak.com
−Q-Server (Testsystem author – dummy): https://q-author.phonak.com
−Q-Server (Testsystem – publish) B2B: http://qa-www.phonakpro.com/com/en/home.html
−Q-Server (Testsystem – publish) B2C: https://q-publish.phonak.com/com/en.html
−Touch UI Q https://q-author.phonak.com/sites.html/content
−Touch UI P https://prod-author.phonak.com/sites.html/content
I Footer4 24/03/2020
Login, User Groups + Rights
• Tip: Use Firefox or Chrome
• Login: Windows Login + Password
• Please log in after this training to P-Server, we will create then the User Rights
• Every Content Manager will have the rights for his country only
I Footer5 24/03/2020
Frontend Structure B2B
Products: Hearing Aids + Wireless Accessories + Other (Batteries,…)
eSolutions: Solutions +Apps
Support: Product Support + Other Support (Downloads, Contact Addresses,…)
Training + Events: Product Training + Other Training (Webinar, Live Events)
Marketing: POS Materials, Images + Logos
Resources: Apps, Forms, Fitting + Counselling
I Footer6 24/03/2020
Frontend Structure B2C
Hearing loss: Basics about Hearing (Tinnitus, Understand Hearing Loss)
Hearing aids: Client Profiles (First Time User, Experienced User + Power User) and Products
Support: Product Support + Other Support (Downloads, Contact Addresses,…)
Hearing Test: Online Hearing Test for consumers
About: Mission, Locations, History and Press Center
I Footer7 24/03/2020
Structure Websites + DAM
Structure AEM
• Website / Digital Assets
• Website
−The page structure reflects the navigation:
I Footer8 24/03/2020
Structure DAM, Rules, Meta Data + Tags
• Structure DAM
−The DAM structure reflects the navigation and the page structure
−Always two folders: Image + Documents
• File-Name Rules
−Lower case
−No spaces: The sign “_” can be used instead of empty spaces
−No version number
−No Language Code (EN/FR)
−No special characters: / “ + & * ( ) = ! # @ ? : ; é è à
−No Umlauts: ä ö ü
I Footer9 24/03/2020
Structure DAM, Rules, Meta Data + Tags B2B
• Meta Data + Tags in DAM
− Title
− Description
− Tags (Asset Type, Product, Status,
Literature)
− Creator: Phonak or another company
− Content Owner Team
− Publication Date (today)
• Image with correct sizes
• Metadata for images
− Title
− Original MAM Name
− Expires date (find in MAM)
I Footer10 24/03/2020
Structure DAM, Rules, Meta Data + Tags B2C
• Documents
− Title & Description
− Tag (Asset Type, Product, Literature)
− Creator: Phonak or another company
I Footer12 24/03/2020
To keep the DAM clean and tidy, please deactivate and/or delete items from your local library if they are not
referenced to any component anymore
Structure DAM, Rules, Meta Data + Tags B2C
• Images with correct sizes
− Title & Description
− Original MAM Name
− Expires date (find in MAM)
− Indicate size in the file name:
e.g.300x300
− Indicate SAP number: 080-0505
− Example:
packshot_audeo_v_312_xsreceiver
_050-0187-q1_900x900.jpg
I Footer13 24/03/2020
Metadata provides the search engines and user detailed information about the asset
Replacing assets – e.g. documents
Replace with the identical file name in the overview
I Footer14 24/03/2020
1) Select folder
Select folder in which to replace the assets.
2) Drag and drop
Drag and drop the asset from your local drive to the
selected folder.
3) Notice of name conflict
Click “Create Version" to replace the asset.
Activate document
Activate the replaced documents in the library by
selecting the document and clicking “Quick Publish”
1
2
3
4
Website view
1) Additional Navigation:
This navigation can be used to show content tree,
information about the page adaptations or references.
2) Site map:
The site map shows the structure of the web page. If
a new page is created, this appears directly in the
selected level of the site map.
3) View menu:
Allows to change the view of the site map.
4) Menu bar:
The menu bar contains all the actions which can be
applied to the current page. These functions are also
available via the Context Menu, which can be called
up at any time via a right-hand mouse click.I Footer15 24/03/2020
4
1
23
Storing new pages
I Footer16 24/03/2020
1
Normally new pages are build by HQ Content Managers and rolled out to the countries. In this case you don’t have to build your own pages.
But if you need a country specific page which is only used in your country, you are able to build a new page.
Note: The page you create by your own is not inherited to the HQ pages. Local authors are responsible that the content is always updated.
2
1) Create new page
A new page is being stored in Sites. New pages are
always subordinate to a selected page.
Add following infos to a new page:
• Title: Title of the new page
• Name: Will be used in URL, please follow the URL structure rules
• Template: Select template depending on case of the page
2
3
2) Open page
To work on a page select page and click on «Edit»
3) Page Info
when selecting a page you can check page
information as Title, Name, Template and status
URL Structure
The URL (Uniform Resource Locator) is the address of an HTML document in the World Wide
Web. Ideally, the URL describes the content and structure of a website for visitors and search
engines. A clear and concise URL structure can influence the organic rankings in a positive way.
Best Practices:
−Use Keywords within the URL structure
−Different words within the URL structure should be separated by a hyphen
−Words should not be separated by underscores, space or other characters
−URLs should be descriptive and as short as possible (max. 2.083 signs)
−URLs should not contain figures or special characters
I Footer17 24/03/2020
Process page
I Footer18 24/03/2020
1) Change view
Select List View to get a better overview.
2) Published
Check in column «Published» if the page is live or
deactivated.
«Not published» can be a new (not published page)
or a deactivated page
3) Modified
See last modification date. If there is an
exclamation mark the page was modified since last
activation
1
23
Edit page: WYSIWYG* mode
I Footer19 24/03/2020
1) Side Panel
Find all assets from Asset Library, all
Components and the site structure in a Content
Tree.
2) Page Information
Find more information about the page here.
Among other functions you can open properties
and publish a page.
3) Page in edit mode
Changes to the page can be done in this area.
4) Edit
Change among different Edit views of the
page.
5) Preview
See how the page would look like when
published.
1
* What you see is what you get
3
4 52
Side Panel
I Footer20 24/03/2020
Assets – Filter
Search for a specific
asset with the filter
function
Components
Select from the range of
components. You can also
filter on a specific term, or
select a group.
Add component via
drag&drop to the page.
Assets – Types
Filter for different
Asset Types like
Images or Documents
Assets – Enter path
Search for a specific
asset by using the
path in dam
Page Information / Edit
I Footer21 24/03/2020
Page Information
1) Open Properties
Open page properties directly from the page
2) Publish Page
Quick publish to activate current page
3) View as Published
Opens page in a new tab as it would look when activated
4) View in Admin
Opens Sites consoles on the path of the current page
Edit
5) Edit
Mode to use when editing the page content
6) Live Copy Status
Check if inheritance of a component is disabled or enabled
1
2
3
4
5
6
Working with Page Versions
Create Version
1) Select a page
2) Open the Timeline column
3) Open menu by clicking the up-pointing arrow
4) Select Save as Version
5) Enter a Label and Comment if required.
6) Confirm the new version with Create
Reverting to a Page Version
7) Select page and Versions in dropdown in Timeline Column
8) Click on Version
9) Check Preview, Compare two versions or Revert to this Version
6
1
Versioning creates a "snapshot" of a page at a specific point in time. With versioning,
you can restore a page to a previous version in order to undo a change.
2
4
5
7
8
9
3
I Footer22 24/03/2020
Cancel inheritance and edit components
I Footer23 24/03/2020
Cancel Inheritance
1) Hover component and select «Cancel inheritance»
2) Confirm canceling
Configure component
3) Component is now editable
Re-enable Inheritance
4) Hover component and tab «Re-enable Inheritance»
5) Select «Synchronize after reverting inheritance» to get
content from master page back
Every content on an inherited page can be edited. For this you need to cancel inheritance.
1
2
3
4
5
Deleting and restoring components
I Footer24 24/03/2020
Delete component
1) «Cancel inheritance» and confirm
2) Hover component again and delete component
3) Placeholder for deleted componend appears
Re-enable component
4) Re-enable inheritance of deleted component
5) Click «Synchronize after reverting inheritance»
Delete a component from a Live Copy page when the content is not needed. A placeholder
for the deleted component appears in its place. If you decide that the content is needed, you
can restore the component.
3
1
2
4
5
Placing and moving components
I Footer25 24/03/2020
Place component from editing bar
1) Select on component you like to add a
new component above and click “+”
Place component from Side Panel
2) Go to Componets in Side Panel, search
for needed component and drag&drop it
to the page
Moving components
3) Move component by dragging them to
the new position while holding down left
mouse button
1
2
3
Templates PhonakPro
• Detailed information about
−PhonakPro Without Hero Page
−PhonakPro With Hero Page
• Short information about
−PhonakPro Hearing Aid Family Template
−PhonakPro Product Page
−PhonakPro Carousel Lightbox Template
I Footer27 24/03/2020
Templates PhonakPro
Page Properties (depending on the template)
−Title / Page Title / Navigation Title
−Description
−Tags (only for product)
−Content Owner Team
I Footer28 24/03/2020
Template – Without Hero Page
Use this template to create sub-pages and orphan pages that are not available from the primary
navigation. The background color you select should mirror other pages within the section.
I Footer29 24/03/2020
Template – With Hero Page
The “hero” section is the “splash” at the top of the page. Use this template for non-product pages
that require a hero. This template allows you to use the subnavigation, hero, headlines,
descriptions and tabbed page navigation features.
I Footer30 24/03/2020
Hero without
navigation
Use when
content
covers a
single topic.
Hero with
tabbed
navigation
Use when
content
includes sub-
topics.
Hero with
sectional
navigation
Use when
content covers
a single topic
and there are
other important
related links.
Hero with
sectional and
tab navigation
Use when
content includes
sub-topics and
there’s important
related content to
link to.
Other Templates PhonakPro
I Footer31 24/03/2020
• Hearing Aid Family Template
– Use this template to create a hearing aid product overview page
• Product Template
– Use this template to create a product overview page
for non-hearing-aid products such as wireless accessories,
batteries, cleaning and care, etc.
• Carousel Lightbox Template
– This template is used to create pages that are not directly visited by users. Instead, the template allows
for the authoring of content that will be displayed as part of a carousel or within a lightbox.
Components PhonakPro
I Footer34 24/03/2020
– Images
• Image component has option like hyperlinking, animated gif, define size and alignment.
– Button
• Buttons provide a stylized link that is used for important calls to actions. The various options allow for different visual
options to achieve the proper visual weighting and balance in page layouts.
Components PhonakPro
I Footer35 24/03/2020
– Column
• The columns component provides flexibility in visual layout by providing various options for the horizontal
distribution of content. This is achieved by creating additional paragraph systems of various widths where
other components can be placed.
– Asset Item
• Asset items allow for the viewing, downloading and sharing of digital assets such as documents, videos, and
audio.
Components PhonakPro
I Footer36 24/03/2020
– Forms 1) Start with B2B Form
2) Fill out “Start of Form” and “End of Form”
3) After submit the form
When submitting a form the submitter lands on a thank you page.
At the same time an email will be sent to the defined email address(es). This email includes the URL of the
submitted form, all the form values and an excel file with the values.
Components PhonakPro
I Footer37 24/03/2020
– Teaser
• Teasers are used to provide important cross links to other pages on the B2B site. Teasers can be used by themselves
or within a Teaser Group which creates a multi-column layout of teasers.
Components PhonakPro
I Footer38 24/03/2020
– Table
• This component provides a way to add tables to the site. Tables can be created in a number of pre-defined styles.
Components PhonakPro
I Footer39 24/03/2020
– Lightbox Template
• This template is used to create pages that are not directly visited by users. Instead, the template allows for the
authoring of content that will be displayed as part of a carousel.
Components PhonakPro
I Footer40 24/03/2020
– Grid
• A grid is a layout component that creates a multicolumn layout with grid lines separating the contained grid items.
Product Grid ItemA grid item for linking to a product. To simplify the
management of product tiles the information on the title is
configured from metadata of the product page for the item.
Generic Grid ItemA generic, reusable grid item.
Link Only Grid ItemA smaller sized grid item to allow for grids
in a more confined space.
Small Grid ItemA grid item with a single link.
Templates Phonak.com
Depending on the type of page template, different components can be used on the page
• Most used Templates
−Product Page
−Content Page
− Inform Page
−Accessory Page
−Lyric Landing Page
I Footer42 24/03/2020
Page Properties
• Title /Page Title
• Description
• Tags
I Footer43 24/03/2020
• Page titles and descriptions are important for SEO purposes
Templates Phonak.com
Product Page
• e.g. Bolero Marvel https://www.phonak.com/com/en/hearing-aids/phonak-bolero-marvel.html
I Footer44 24/03/2020
Templates Phonak.com
Content Page
• e.g. Hearing Loss https://www.phonak.com/com/en/hearing-loss.html
I Footer45 24/03/2020
Templates Phonak.com
Inform Page
• e.g. Contact https://www.phonak.com/us/en/contact-us.html
I Footer46 24/03/2020
Templates Phonak.com
Accessory Page
• e.g. Phonak PartnerMic https://www.phonak.com/us/en/hearing-aids/accessories/phonak-
partnermic.html
I Footer47 24/03/2020
Templates Phonak.com
Landing Page
• e.g. USA Today Better Hearing https://prod-author.phonak.com/content/phonak/us/en/phonak-
landing-pages/phonak-usa-today-better-hearing.html
I Footer48 24/03/2020
Components Phonak.com
I Footer50 24/03/2020
• Visual
– A visual component combines an image, static image or video with text. The text can be aligned on the image.
• Page Title
Components Phonak.com
I Footer51 24/03/2020
• Product Header
– A product header combines an image, static image or video with text.
• Title
– Title is <h1>, Subtitle <p>
Components Phonak.com
I Footer52 24/03/2020
• Content Container
– Some components can only be used on a page if you drop them into a “content container”
• Multi Column Layout
– Define the number and proportions of the columns
Components Phonak.com
I Footer53 24/03/2020
• Text (Wide) / Text (Column)
– The text component is available in column and in full width. Full width is the same width as the width of two
columns.
• Image
– Image component has option like hyperlinking, animated gif, define size and alignment.
Components
I Footer54 24/03/2020
• Button Bar / Button
– The button bar is a container component for button components. Use button within button bar.
• Quote (Wide)
Components
I Footer55 24/03/2020
• Video (Column) / Video (Wide)
– The video component is available one column wide and in full width. Video can be added by entering a video embed code.
• Video Tabs
– Possible to show up to 4 videos in the component.
Components
I Footer56 24/03/2020
• Downloads Container / Download
– Download links need to be placed in a container "Product downloads".
• Links Container / Link
– Links need to be placed in a container "Products links".
Components
I Footer57 24/03/2020
• Product Teaser Slide Show Container / Teaser (Wide, Small, Slide)
– The product teasers component is the container component for two small teasers, one wide teaser or a teaser slider
Components
I Footer58 24/03/2020
• Video Slider Container / Video Slide...
• A slider with teaser that contain Title, Description, Benefits, Button, Image or Video. Always use Content Container > Video Slide Container > Video Slide
Components
I Footer59 24/03/2020
• Benefits
– The product benefits component contains a list of product benefits and a background image.
• Models Container / Model
– Product models can be configured by using the product models container and the product model component.
Components
I Footer60 24/03/2020
• Mix and Match
– Product colors can be configured by using Mix and Match component with the Product ID of the product family
• Social Icons
Rollout process
I Footer63 24/03/2020
hq_en/en
lang/de lang/eslang/fr • dk/da
• no/no
• pl/pl
• ru/ru
• se/sv
• jp/ja
• kr/ko
• …• com/en
• au/en
• ca/en
• fi/en
• nz/en
• sg/en
• uk/en
• us/en
• at/de
• ch/de
• de/de
• be/fr
• ca/fr
• ch/fr
• fr/fr
• es/es
Build pages/layout
Rollout to lang and gc
Translation
Rollout for lang/
en, de, fr, es, it, nl and
pt
lang/en lang/nl
• it/it • nl/nl
• be/nl
lang/it lang/pt
• br/pt
Translation process
I Footer64 24/03/2020
AEM
Translation
Memory
Clay
Tablet
NLG
Clay
Tablet
Linguistic
Reviewers
Review
System
Glossary
Content
Managers
Offline
Material
Support material
• Find all support material incl. training presentation here:https://prod-author.phonak.com/content/phonakpro/Training/support-material.html?wcmmode=disabled
I Footer66 24/03/2020