Adobe Experience Manager (AEM) Author Training

Transcription

1 Adobe Experience Manager (AEM) Author Training McGladrey.com 11/6/2014 Foster, Ken

2 Table of Contents AEM Training Agenda... 3 Overview... 4 Author and Publish Instances for AEM... 4 QA and Production Websites... 4 Login... 5 The Adobe Experience Manager (AEM) Interface... 5 WCM Interface... 6 Sidekick... 7 Content Finder... 8 Digital Asset Manager (DAM)... 9 Page Templates... 9 Article Template Three Column Template Page Properties "Basic" Tab Article Metadata Tab Components Embedded Components Components Available in the Sidekick Column Control Hi-lite box Horizontal Rule Left Navigation Rich Text Editor (RTE) Rightrail Editor Spotlight Component Authoring Content Edit Existing Content Creating a New Page Activating a Page AEM Documentation Page 2 of 32 11/5/2014

3 AEM Training Agenda Topics Logging into AEM (QA and Production) Practice in QA and begin managing content in your respective sections in Production (Live site) Author and Publish The Author environment is where content is created and/or edits and the Publish environment is the actual website being viewed by the general public. The action for publishing content from the Author environment to the website for public viewing is called Activate. AEM Interface WCM Tree structure, child pages, etc. Sidekick Components, Page properties, Activation, etc. Content Finder Locating digital assets, web pages, etc. Digital Asset Manager (DAM) images, PDFs Page Templates Article Template Three Column Template Exercise 1: Creating a new page using the article template and various components Rich Text Editor component - Inserting text, formatting text, subtitles, tables, images, etc. Hi-Lite Box Component Special formatting Right Navigation Rightrail Editor, horizontal rule and Spotlight components Page Properties Title, subtitle, navigation, tags, description, etc. Article Metadata Publish date, insight icon, authors, etc. Activate page Exercise 2: Creating a new page using the three column template Left Nav Component Defining the path Similar to Article template with exceptions: o Does not display the content type, publish date or authors on the page. o Pages using the Three Column template appears in the left nav by default unless set to hide in navigation. o The page title in manually created using the RTE instead of during the page creation steps. Questions Duration 10 minutes 10 minutes 15 minutes 15 minutes 20 minutes 15 minutes 5 minutes Page 3 of 32 11/5/2014

4 Overview This document is intended to be a quick start guide to train content authors on managing content on McGladrey.com using Adobe Experience Manager (AEM) also known as Adobe CQ. AEM was implemented on McGladrey.com in September 2013 and the newly designed website is built using Responsive Web Design (RWD), to deliver an optimal experience across mobile, tablet and desktop devices. For more in-depth documentation from Adobe, go to Author and Publish Instances for AEM The Author instance is the environment where you, and your colleagues, will perform content authoring tasks, such as: input and edit your content configure the layout and design of your content activate your content to the publish environment Activating content transports that content from the Author instance to the Publish instance, which is the production website for McGladrey.com. The Publish instance is the environment where visitors will access your website and content is publically available. Production Environment (Live Website) Author Instance Publish Instance author.mcgladrey.com mcgladrey.com Only Authors McGladrey.com, can view available to all QA and Production Websites The training will be conducted in the QA environment for McGladrey.com. The QA environment functions and looks the same as the Live production website, but may contain content based on a prior version of the production site. The QA site is the ideal place to learn and develop skills in using AEM so that you are confident when you begin managing content on the production site of McGladrey.com. Below are important URLs you will need for accessing our QA and production environments: QA Authoring Instance: QA Publish Instance: (view pages as they appear on the website) Production Authoring Instance: Production Publish Instance: Page 4 of 32 11/5/2014

5 Login You will use your McGladrey network credentials to login to AEM. For example, your Username will be your E0XXXXX McGladrey employee ID and you will use your network password that you use everyday to login to your computer. As you update your password, it will also be updated for logging into AEM. This is the login screen for AEM (Adobe CQ). The Adobe Experience Manager (AEM) Interface The Digital Media team recommends Firefox or Google Chrome web browsers for the Authoring environment in AEM. If you do not have either of these browsers installed, you must request this from the Help Desk. Once logged into AEM, you will see the screen below. You will click Websites to access the Authoring environment. Page 5 of 32 11/5/2014

6 WCM Interface This is the WCM (Web Content Management) interface for managing pages, page properties, content, etc. All content resides under McGladrey Home. The tree expansion is used in the left side of the interface showing a hierarchical structure by nesting the pages of the site. For each item selected in the tree structure, the child pages will appear in the right side pane of the interface. Tree Structure (left hand pane) Single-click on the page name (in the left pane) will: List the child pages in the right pane (if the item contains child pages) Also expand the structure in the left pane to show the child pages in the left pane. Double-click on a page name (in the left pane) will open the page in author mode to edit. List of Child Pages (right pane) In the right pane, double click the child pages to open and author mode for editing. Single-click the pages to activate or deactivate from the drop-down menu. Page 6 of 32 11/5/2014

7 Sidekick Once you have selected and opened a page to edit, you will see the Sidekick. One of the tabs in the Sidekick is for component selection and placement. Components Tab The Sidekick organizes components in groups such as General, Boilerplate, Columns, McGladrey and Right Nav. Page Tab The Page tab is for managing page properties such as titles, tags, how the page appears in the navigation, description text, etc.. Page 7 of 32 11/5/2014

8 Content Finder Positioned on the left side of the page is the Content Finder with a row of tabs that include images, document, pages, videos, etc.. This is a quick and easy way to insert various assets create hyperlinks. Page 8 of 32 11/5/2014

9 Digital Asset Manager (DAM) The DAM contains all digital assets such as images and PDFs. Page Templates Page templates are used to create the various pages within the McGladrey website. This section details the primary templates and highlights some typical use cases for when to use a particular template. A total of eleven (11) page templates have been developed in AEM to align with the McGladrey design. Among the eleven, we will be focused on two primary templates used for most content on the website, the Article template and the Three Column template. 1. Article Used for insight articles, white paper landing pages, case studies 2. Event Used for events 3. News Release Used for news releases 4. Profile Used for bios of the leadership team only 5. Audiocast Used for audiocasts 6. Webcast Used for webcasts 7. Two Column Left Nav What We Do, Who We Are (major landing pages) 8. Three Column Landing pages for Industries and Services pages 9. One Column Locations page and Contact Us 10. Three Column Faceted Our Insights 11. Two Column Faceted Upcoming Events Page 9 of 32 11/5/2014

10 Article Template The Article Template is the basic template used for content. It includes a blue header with the article title and sub-title (optional), and also includes the Print and Download icons when set and the Sharing icons by default. Characteristics of the Article template: The default content type is set to Article and the page will display the content type at top of the body. The content types typically applied to the article template are: o Article (standard web page, but not considered thought leadership) o Insight Article (standard web page for thought leadership) o Audiocast o Case Study o Testimonial o Video o White Paper o Newsletters The publish date will also be displayed at the top of the body if it is set. Author(s) will appear at the top right once one or more authors have been identified under Page Properties. Page 10 of 32 11/5/2014

11 Three Column Template The Three Column template is primarily used for most landing pages and considered a general template for content that is not thought leadership, but informational or describing McGladrey s services. It includes the breadcrumb navigation and Sharing icons by default. It does not have the Print and Download icons. Characteristics of the Three Column template: The page will not display the content type or the publish date like the Article template. The content types typically applied to the Three Column template are: o McGladrey Services o Resource Center Includes a left navigation and navigation on the right side of the page (right rail). Author(s) will not appear at the top right corner if they have been identified under Page Properties. Page Properties Page Properties are identical on both the Article template and the Three Column template with exception to: 1. Article template can be assigned author(s) and the Three Column template can be assigned authors, but they will not appear on the page. 2. Three Column template the Title must be manually inserted on the page opposed to the Article Template where the Title is automatically placed in the blue area at the top of the page. 3. Subtitle is only used on the Article template and is not used in the Three Column template. To create a new page, one of the pre-set templates will need to be selected and the page will require a title as well. Once created, a page will allow you to modify the Page Properties and add components to create the desired content. Page 11 of 32 11/5/2014

12 Note: Tags will be applied to pages in Page Properties, and various other configurations may be desired and/or required in some cases. "Basic" Tab Title: Maximum of 74 character (includes spaces and punctuation) and sets the page title and the content used in the HTML <title> tag Tags/Keywords: sets the tags for the page, which is used for indexing, metadata, etc. Hide in Navigation (checkbox): sets whether or not a page should appear in the breadcrumb and left navigation unchecked by default. When this is checked, the page will be excluded. The global navigation is not affected by this checkbox. More Titles and Description: o Description: Enter a maximum of 150 characters (includes spaces and punctuation), which is used at metadata. This content is not displayed on the page, but is displayed on landing pages and search results along with a link to this content. o Navigation Title: Sets the title of the page as it should appear in the breadcrumb and left navigation. Its best practice to keep the navigation as the Title, but sometimes the title is too long and needs to be shortened as a best practice for our navigation. This feature allows you to keep the Title at the desired length (maximum 74 characters) and shorten text to be displayed in the navigation. o Page Title: Primarily used for the Article template, this is used when you want the Title displayed on the page to be different than the title used in the <title> tag. It s a best practice to keep the title displayed on the page the same as the title used for the <title> tag for consistency and web analytics uses the <title> tag for reporting. o Subtitle: Maximum of 74 characters (includes spaces and punctuation), used only with the Article template and is optional. The subtitle is positioned just below the Tile in the Article template. Page 12 of 32 11/5/2014

13 o Vanity URL: Shortened URLs are created for use in print. Before a vanity URL is created please enter the vanity URL in your web browser to see if it is currently being used. Vanity URLs are cases sensitive and the Redirect Vanity URL checkbox should be checked. Article Metadata Tab Publish Date: Sets the publishing date for the page and displayed directly on the page. Spotlight Image: Sets the insight icon associated with this page when the page is linked from landing pages, Our Insights or the search results page. Authors: Sets the author(s) for the content displayed directly on the page using the name, title and preferably a high quality photo. Page 13 of 32 11/5/2014

14 Components Components in the Sidekick can be dragged and dropped into the appropriate containers on a page template. This section details all the components and highlights some typical use cases for when to use a particular component. Note: Do not use the Image component within the General component group. This component places images on pages, but disables their responsiveness for multiple screen sizes. Component Group/Name Sample Pages General Brightcove Video Image Table Boilerplate Tax Alert Disclaimer News Release Boilerplate Sample Page Before using this component, you must contact the Digital media team to upload the video to Brightcove. Do not use this component, insert images within the Rich Text Editor component. Do not use this component. Insert tables using the Rich Text Editor. Sample page When boilerplate content needs to be displayed at the bottom of a page on many pages (e.g Tax Alerts disclaimer), creating a boilerplate component for the disclaimer content is the most efficient way to place the content on the page and manage the disclaimer content. See Digital Media to request a new boilerplate component. Sample Page Sample Page Columns Column Control Sample Page McGladrey Campaign Spotlight Eloqua Form Editor Hi-lite box Horizontal Rule Left Navigation MapBox Editor Profile Spotlight Sample Page Sample Page Sample Page Sample Page Sample Page Sample Page Sample Page Page 14 of 32 11/5/2014

15 Rich Text Editor Right Rail Editor Spotlight List Right Nav Most pages use Rich Text Editors Most pages use Right Rail Editors Sample Page Standard right navs can be pre-built and placed on pages to maintain consistency and all links in the right nav will be managed in a single component so that changes can be made to the component and updated instantly on multiple pages where the component is in use. Embedded Components All components defined as embedded have been setup to be included as part of one or more page templates. While they can be set up to show desired content, they cannot be selectively or freely moved to a different section of a page. They are set to appear in a specific section of the page, as set by the design. Author Spotlight The Author Spotlight component is used on pages to highlight the authors associated with that article, webcast, or audiocast. It includes the authors name and title to the extent that his/her profile is setup on his/her profile page. Please contact the Digital Media team to create a profile page if one does not exist. Elements managed through the author s profile page are: Author s name Author s title Author s photo For the Leadership team only, full bios are published on their profile pages. This enables the author s name in the author spotlight to be linked to their profile page. See example below for Gary Sturisky. Page 15 of 32 11/5/2014

16 Note: Customization of this component is not possible as it is controlled by the content of the Profile page associated with the author(s). Breadcrumb The Breadcrumb component is embedded in all page templates except the Base Page Template, which is used for the homepage. It shows the location of the current page as it relates to the site s structure or navigation tree. The titles that appear in the breadcrumb are set by the Navigation Title metadata in the Page Properties of the different pages in the breadcrumb. All titles in the breadcrumb are clickable and will redirect you to the relevant page when clicked on. Note: If a page should not appear in the breadcrumb, the option for Hide in Navigation as part of the Page Properties for that page should be checked. This component is not editable and is preset in the page templates. Document Utilities Page 16 of 32 11/5/2014

17 The Document Utilities component is embedded in all article page templates (Article, Profile, Event, Press Release, Webcast, Audiocast). When setup, it brings up the option to Print the active page and/or Download any applicable PDF or other asset linked to the page. No more than one (1) asset can be set to be downloaded per page. Typically, there are other links to the downloadable asset placed within the body of the page. In the Author environment, this component will appear as a title that says Add print of download link if neither have been set. To modify the settings, Right-click on the component and select Edit as shown below. To setup the Print and or Download options, the author must edit the component and: Check the Enable Print option if desired; and/or Set the Download Link path of the asset (PDF or other file) that should be downloaded when clicked on. All Download links are set to open in a new browser tab by default. Page 17 of 32 11/5/2014

18 Components Available in the Sidekick Column Control The Column Control component has been setup to allow the author to setup the body of a page to have 2, 3, or 4 columns (as set by the design) that will allow the horizontal placement of various components in the Desktop and Tablet view, or vertical placement of the same components in the Mobile view. Pre-set options for columns have been set to accommodate the responsive nature of the website and allow the correct placement of the embedded component to appear accordingly. Components to from Left to Right in Desktop will appear respectively from Top to Bottom in Mobile. Once placed in the body of a page, the component must be set to use one of the following option: 2 column: 2; two-col-control 2 Columns (50%, 50%) cn 3 column: 3; three-col-control 3 Columns (33%, 33%, 33%) cn 4 column: 4; four-col-control 4 Columns (25%, 25%, 25%) cn Hi-lite box The Hi-lite Box component is used when content on the page needs unique formatting, but remain consistent across the site. This is an example of the styling applied to the content using the Hi-lite Box. The Hi-lite Box component should only be placed in the body area of the Article template or the Three Column template. The content within the Hi-lite Box is managed by selecting Edit after the component is placed on the page. Under the title tab, edit the title, subtitle and adjust the width by entering a percentage. A similar control bar as shown in the Rich Text Editor component is also available here to style the text. The content in the body area of the Hi-lite Box component is managed under the Body tab. Page 18 of 32 11/5/2014

19 Horizontal Rule The Horizontal Rule component is a basic component set to insert a horizontal line, set by the design to the left navigation area, the body of a page, and/or the right-rail area. Visually, the element differs depending on the location placed. This component is used to separate other components visually. The Horizontal Rule can be placed: Left Navigation Body of Page Right Rail Note: The functionality of this component is set by the script included in the edit area of the component, including any in-page validation for elements required for submission. Left Navigation The Left Navigation component is a navigation element that can be placed in the Two Column Left Nav and Three Column templates to allow for further navigation of the child pages of a certain page. Children pages are set according to the tree structure of the site in AEM. By default, the hierarchy shown for the newly placed left navigation component will be the parent of where the page resides within the tree Page 19 of 32 11/5/2014

20 structure of the site. This can be modified in the component to show another hierarchy of the site. When this component is placed on a page, the current page is listed at the top of the component and the child pages are listed next in order they appear in the tree structure of the site. Note: If a page does not appear in the Left Navigation, the option for Hide in Navigation as part of the Page Properties for that page should be checked. This component is not editable and is preset to automatically list out pages once place in the left column. Only content published using the Two Column with Left Nav and Three Column templates will appear in the left nav. Content published using the Article, Events, Profiles and Webcast templates will not be included in the left navigation. Rich Text Editor (RTE) Page 20 of 32 11/5/2014

21 The Rich Text Editor is a commonly used component set with predefined styles for placing and setting copy (text) elements to the body areas of most templates. This component also enables the embedding of images, links, and more. When set to Source Edit view by clicking on the icon, the markup or HTML for the text to be placed on the page can be customized. Style formats have been pre-set according to the design standards to format the text with the following styles: Page Title (H1) Intro (H2) Subhead (H3) Subheadline (H4) Heading (H5) Paragraph Pull Quote Image Caption To minimize overlapping styles and avoid any undesired behaviors, the best approach to setting up this component in most cases is to: 1. Type in (or copy/paste from Notepad) unformatted text that needs to show on the page in the component s editor area. This includes titles, paragraphs, pull quotes, etc.. a. Note: Copying and pasting from Microsoft Word or other applications that already includes formatting should be avoided as it can included pre-set formatting and add additional mark-up to the web page that can cause browser compatibility issues, interfere with the responsiveness of the page, formatting issues, etc.. 2. Ensure that separate elements are not on the same line in the unformatted text format (i.e. the title element is on a separate line from the paragraphs, etc ). This makes it easier to apply the correct style. 3. By default, when text is pasted into the RTE <br> (line break) are used instead of <p> (paragraph) tags. The <br> is a single line return and the <p> tags are double line spacing and to separate paragraphs, you should always use the <p> tag and avoid using two <br> tags. 4. Select each section (one at a time) of the text that needs a specific format to be applied; set the format using the Format drop-down option pre-set. Page 21 of 32 11/5/2014

22 Text Controls Most of the controls are straight-forward, some of the more commonly used controls are: Editing the source Inserting tables Inserting hyperlinks Inserting a table: To insert a table, insert the cursor within the text where the table will appear and select the Table icon. The following prompt will appear. Define the number of columns, rows, header and set the width to 100% and the border to 1. All other settings can be adjusted as needed. Page 22 of 32 11/5/2014

23 Inserting a hyperlink: To insert a hyperlink, select the text to be linked and select the Hyperlink icon. Yo can select the file or page to link to it, or paste a URL of the page directly into the field. You can also use the content finder on the left side of the interface to locate a specific file or page on the site. Once you have located the file or page in the content finder, drag it into the Link to field. Note: All URLs to files and pages on the site should be relative and do not include full paths such as: This link should be relative and does not need the.html extension at the end: /content/mcgladrey/en_us/what-we-do/services/assurance/simplified-accounting-alternatives-forprivate-companies Check the Open in a new window only if you are linking to a PDF or content on a website other than McGladrey.com. Inserting an image: All images should be inserted on the page using the RTE component. Do not use the image component from the sidekick because it will insert an image that is not responsive. To insert an image, the image must have been uploaded into the Digital Asset Manager (DAM). The image can be inserted on the page by editing the source or the image can be placed directly on the page through the content finder by dragging the image and releasing it into position on the page. This is sample HTML for inserting an image (bar chart): <p><img src="/content/dam/mcgladrey/images/figure/monitor-report/figure-11.png" class="big-articleimage"></p> Page 23 of 32 11/5/2014

24 Inserting an image using the content finder: Using the content finder, drag the image into the RTE. The following HTML will be inserted into the RTE: <p><img src="/content/dam/mcgladrey/images/figure/monitor-report/figure-11.png"></p> To ensure the image is responsive, you must insert the class (class="big-article-image"). Page 24 of 32 11/5/2014

25 Inserting a green, call-to-action button: To create the standard green button style consistent across the website, add the following around any text, the attributes assigned through the stylesheet will force all caps on the text of the button. This is the mark-up for the green button: <p><a href="/content/mcgladrey/en_us/what-we-do/services/risk-advisory/contact-our-risk-advisoryprofessionals.html" class="button"><span class=" "> US</span></a></p> To remove the icon, simply change the <span class= generic >: <p><a href="/content/mcgladrey/en_us/what-we-do/services/risk-advisory/contact-our-risk-advisoryprofessionals.html" class="button"><span class="generic"> US</span></a></p> Rightrail Editor Similar to the Rich Text Editor component, the Rightrail Editor enables the setting of text and markup elements in the right-rail or right nav sections of the Three Column Template and the article-type templates (Article, Press Release, Event, Profile, Webcast, Audiocast). It is best to only use the Rightrail Editor if the content requires special formatting and mark-up, text only and not hyperlinks or you need to insert links to an external website. If you are simply inserting links to other pages on McGladrey.com, use the Spotlight component because it functions more dynamically and requires less manual maintenance than the Rightrail Editor. See example below for a good use of the Rightrail Editor. How can we help you? For example, the How can we help you? call-to-action uses the Rightrail Editor component because it requires special formatting for the green button The Rightrail Editor in Author mode: Page 25 of 32 11/5/2014

26 Spotlight Component The term Spotlight refers to the ability to highlight content within a website. A spotlight list allows content editors to run dynamic or manual lists of content based on queries, tags or fixed lists. Once the Spotlight List is dragged and dropped on to a page from the sidekick, there will be an edit and delete button that displays. The advantage of using the Spotlight list is the automation it provides opposed to the Rightrail Editor. The Spotlight list generates all of its content from the source file (page being linked from the Spotlight) dynamically, so if anything changes on the source file, then it will automatically be changed in the spotlight without any manual edits required. Clicking on the "Edit" button revels a dialog box with the following options, although the Advanced Search and Fixed Lists are the most commonly used options on McGladrey.com: Build list using: Child pages - All child pages of the current page will then be listed. If you leave this empty the current page will be used as the root. Fixed list - Here you can specify pages and the order for them to be listed. Use the various buttons to add, remove and position these pages. Search - Here you specify the search query and the page to start the query in. Start in specifies the path the search is to occur in. You can enter the complete path directly or type several characters. Advanced Search - Here you can define the Querybuilder predicate notation for your required search. This functionality is commonly used across the site for specific query displaying a specific content. For example, the Spotlight can display a specific list of content types that also require a specific Service or Industry tag. Please contact the Digital Media team for creating Advanced Search Queries. Tags - Specify the Parent page, Tags/Keywords and match criteria. Order by: The only time you will select an option is when you build the list by Child pages or Tags. The other options will define the order and this should be left blank. Limit: Page 26 of 32 11/5/2014

27 Specifies the maximum number of items that you want displayed in the list. If you are using a Fixed list, this should be blank and controlled in the Fixed list. Paginate after: Please do not use. Display options: Select the items to display in the Spotlight list. At a minimum, select Title which is used as the anchor text (hyperlinked text). Typically, the options used for spotlights in the body area of the page are Title, Content Type, Image (insight icon), Description, Author and Date. For spotlights in the right rail, common options are Title, Content Type and Date due to the restricted space in the right rail. Inserting a Header for a Spotlight List: Right-click the area above the list and select Edit Enter the header text for the Spotlight list. Always enter the text using initial caps and allow the stylesheet to control the capitalization so the header styles can be controlled by the stylesheet on a site-wide basis rather than individual pages. Page 27 of 32 11/5/2014

28 Authoring Content Edit Existing Content To find the content in AEM, navigate the tree structure in the WCM interface or use the search: Tree Structure Search by title To open the page, double-click to open and begin editing. Right-click any component with a green outline and select Edit to open the Rich Text Editor. Editing steps may vary depending on the component type. Page 28 of 32 11/5/2014

29 Creating a New Page To create a new page, first identify the location for the new page within the tree structure interface and select the page or level the new page will be located. For example, to create a new page to reside within the Assurance section, select Assurance in the left pane and select New Page from the drop-down in the right pane. Enter the Title in the title field, leave the Name field blank, select the template then click Create. The new page will appear at the bottom of the list by default. Double-click the page in the right pane to open the page and author content. Page 29 of 32 11/5/2014

30 Activating a Page (Publishing to the Live site (production)) To preview the page, click the Preview icon in the Sidekick To activate a page, click Activate Page under the Page tab located in the Sidekick: Page 30 of 32 11/5/2014

31 The following message will appear when the page has been activated: To access the page directly on the Live site, copy the URL path in Author mode and enter the URL in a new browser tab after <enter URL from Author mode>. Page 31 of 32 11/5/2014

32 AEM Documentation Page 32 of 32 11/5/2014