ryerson specific author training1.41

1

Updated: 17/11/2011

Basic CQ Author Training cms.blog.ryerson.ca

Table of Contents

1 Purpose ......................................................................................................................................................................................................... 4

2 Document Use ............................................................................................................................................................................................. 4

3 Document Updates .................................................................................................................................................................................... 4

4 Audience ....................................................................................................................................................................................................... 4

5 About CQ ....................................................................................................................................................................................................... 4

5.1 Who was Involved? .................................................................................................................................................................. 4

5.2 What is the system? ................................................................................................................................................................. 5

5.3 Where is CQ located? .............................................................................................................................................................. 5

5.4 Why did we move to a new system? ................................................................................................................................ 5

6 Collage | CQ Comparison .......................................................................................................................................................................... 5

7 Getting Started ............................................................................................................................................................................................ 6

7.1 Browsers & Operating Systems ......................................................................................................................................... 6

7.1.1 Windows XP ..................................................................................................................................................................... 6

7.1.2 Microsoft Windows Vista ........................................................................................................................................... 6

7.1.3 Microsoft Windows 2000 ........................................................................................................................................... 7

7.1.4 Apple Macintosh OS X .................................................................................................................................................. 7

8 Logging into CQ ........................................................................................................................................................................................... 7

8.1 Working From Home & On Campus ................................................................................................................................. 7

8.2 Wireless ........................................................................................................................................................................................ 7

8.3 Do I Have Access to CQ? ........................................................................................................................................................ 7

8.4 Log In Screen .............................................................................................................................................................................. 7

9 Finding Content in CQ ............................................................................................................................................................................... 9

9.1 Working in CQ ......................................................................................................................................................................... 10

9.2 Site Admin Screen ................................................................................................................................................................. 10

9.3 Node Structure: Parent Page & Child Page ................................................................................................................ 11

10 Creating & Opening a New Page ............................................................................................................................................. 13

10.1 Templates ................................................................................................................................................................................. 14

10.1.1 Three Columns ............................................................................................................................................................. 14

10.1.2 Two Column with Left navigation ...................................................................................................................... 14

10.1.3 Two Columns with Right Feature ....................................................................................................................... 14

10.1.4 One Column ................................................................................................................................................................... 15

2

Updated: 17/11/2011

10.1.5 Redirect page ............................................................................................................................................................... 15

10.1.6 Blank: No template applied ................................................................................................................................... 15

10.1.7 Blog page ....................................................................................................................................................................... 15

11 Editing a Page ............................................................................................................................................................................... 15

11.1 Content Finder ........................................................................................................................................................................ 16

11.2 Sidekick ...................................................................................................................................................................................... 16

11.1 Preview Mode/Edit and Design Modes ....................................................................................................................... 17

11.2 Adding Content using a Component ............................................................................................................................. 18

11.3 Deleting Components .......................................................................................................................................................... 19

12 General CQ Functions ................................................................................................................................................................. 19

12.1 Find and Replace ................................................................................................................................................................... 19

12.2 Move and Rename a Page .................................................................................................................................................. 20

12.3 Deleting a Page ....................................................................................................................................................................... 22

12.4 Versioning ................................................................................................................................................................................. 22

12.5 Setting Page Properties ...................................................................................................................................................... 23

12.5.1 Page Properties Dialog Box ................................................................................................................................... 24

13 Navigation in CQ .......................................................................................................................................................................... 26

13.1 How navigation is created and maintained in CQ ................................................................................................... 26

13.2 Controlling Navigation via “Drag & Drop” ................................................................................................................. 26

14 Ryerson Components & Common Components ................................................................................................................. 27

14.1 Ryerson Components .......................................................................................................................................................... 27

14.2 Text Component ..................................................................................................................................................................... 29

14.2.1 Editing HTML Source Code .................................................................................................................................... 30

14.3 Image Component ................................................................................................................................................................. 30

14.4 Text Image Component ....................................................................................................................................................... 32

14.5 Title Component .................................................................................................................................................................... 33

14.6 Flash Component ................................................................................................................................................................... 33

14.7 Download Component ........................................................................................................................................................ 34

14.8 Inserting JavaScript or Style Sheets (CSS) .................................................................................................................. 35

14.9 Reference Component ......................................................................................................................................................... 35

14.10 List Component ...................................................................................................................................................................... 36

15 Editing using Dreamweaver with CQ .................................................................................................................................... 38

16 Digital Asset Manager (DAM)` ................................................................................................................................................. 38

16.1 Upload Files to DAM ............................................................................................................................................................. 39

16.2 Creating a New Folder ......................................................................................................................................................... 40

16.3 Tool Bar Functions ............................................................................................................................................................... 42

16.4 Important Guidelines for Uploading ............................................................................................................................. 43

17 Activating (Publishing) Pages ................................................................................................................................................. 43

3

Updated: 17/11/2011

17.1 Activating Pages ..................................................................................................................................................................... 43

17.2 Page Activation Status ......................................................................................................................................................... 44

17.3 Activate Tree ........................................................................................................................................................................... 44

17.4 Deactivate a page ................................................................................................................................................................... 45

17.5 Lock Mode ................................................................................................................................................................................ 45

17.6 Unlock Pages ........................................................................................................................................................................... 46

18 Content Review for Stakeholders .......................................................................................................................................... 47

19 DAY CQ Documentation ............................................................................................................................................................. 47

4

Updated: 17/11/2011

1 Purpose

The purpose of this document:

To provide an introduction to CQ

To provide the knowledge and hands on application of basic authoring functions in CQ

To provide a comparison of Collage and CQ

2 Document Use

To be repurposed online

In class tutorials

Basis for video training presentations

3 Document Updates

The contents of this document will not be updated on a regular basis. Any updates to functionality or components outlined in this document will be made to pages and posts on the CMS Support Blog: http://cms.blog.ryerson.ca/

4 Audience

Current/active Collage users (priority)

Basic Users who will be authoring content

Power Users who will perform administrative tasks, in addition to authoring content

New users

5 About CQ

5.1 Who was Involved?

• Web Services, CCS and current CMS Users defined User and System Requirements.

• CCS, CMS Users and Web Services participated in CMS Selection process.

• CMS Community participated in Proof of Concept.

• Web Services and Adobe provide training, documentation, and support to content authors.

• Content authors to maintain sites.

5

Updated: 17/11/2011

5.2 What is the system?

CQ Web Content Management (WCM) System:

• Created by Day Software, recently acquired by Adobe Systems Inc.

• Enables authors to create, edit and maintain web content

• Replaces Serena Collage

5.3 Where is CQ located?

CQ is located in the same secure server location as Collage. It is accessible at the same web address:

https://cmshost.ryerson.ca

5.4 Why did we move to a new system?

• Serena Collage reached the end of its life cycle and support.

• CQ provides additional functionality to content authors.

• CQ provides users with a responsive and intuitive interface for quick and easy editing.

• CQ allows users to take advantage of new and emerging technologies, including next‐generation web and social media.

• Provides a web‐based WYSIWYG (What You See Is What You Get) drag and drop interface that doesn’t require a knowledge of HTML or other Web technologies.

6 Collage | CQ Comparison

Serena Collage CQ

Assets (images, PDFs, Microsoft documents, etc.) are uploaded into folder structure.

All assets are uploaded into the DAM (Digital Asset Manager).

Users must save page content within the Inline Editor before closing the file.

Content is automatically saved as it is being added to the page. There is no save button.

Only plain text could be copied into a page using the Inline Editor.

Text or Rich text can be copied from any source, including Word.

Content must be deployed from the Deploy tab and requires multiple steps to publish assets.

Content can be activated from editing view via the Sidekick.

Versions are created every time a file is saved. Versions are created manually.

Assets are difficult to upload via Collage. Assets can be uploaded one at a time or as a group – via drag and drop!

6

Updated: 17/11/2011

Assets must be approved before they are activated.

The additional step of approval is unnecessary before content is activated.

Active X and Java are required for Collage. Not reliant on Active X or Java; entirely browser‐based.

No image editing available. Images can be cropped and resized after being added to a page.

Content references not available. References available.

This allows reuse of content without redundant copies of that content.

Reference is linked to the original content so that changes to the original are automatically reflected.

7 Getting Started

Firefox 3.6 is the recommended browser for authoring content in CQ. CQ5 has known compatibility issues in Firefox 4.

Download version 3.6 >> http://www.mozilla.org/enUS/firefox/allolder.html

Please note: Unexpected behaviour may occur depending on the browser you choose.

7.1 Browsers & Operating Systems

CQ uses a web‐based graphical user interface (GUI), so you need a web browser to access CQ (just like you did with Serena Collage).

Here are the supported browsers for CQ:

7.1.1 Windows XP

Browser Support Level

Microsoft Internet Explorer 7.0 A: Supported


Mozilla Firefox 3.x A: Supported

Microsoft Internet Explorer 8.0 D: Validated, optional support available.

7.1.2 Microsoft Windows Vista




7

Updated: 17/11/2011


Microsoft Internet Explorer 8.0 D: Validated, optional support available.

7.1.3 Microsoft Windows 2000


Microsoft Internet Explorer 7.0 D: Validated, optional support available

Microsoft Internet Explorer 6.0 D: Validated, optional support available

Mozilla Firefox 3.x D: Validated, optional support available

7.1.4 Apple Macintosh OS X



8 Logging into CQ

8.1 Working From Home & On Campus

CQ is located at the same address as Collage: https://cmshost.ryerson.ca

VPN (RU‐VPN) access is required for off‐campus connectivity. If you are working on campus with a hard‐wired connection, you do not have to use VPN.

8.2 Wireless

If you are working on a wireless PC or Mac, you must use VPN.

Request an RU‐VPN ID: http://www.ryerson.ca/ccs/connecting/secure/RU‐VPN/getting/

Download & Install: http://www.ryerson.ca/ccs/software/downloads/security/index.html

8.3 Do I Have Access to CQ?

All current Serena Collage authors have been verified and given access to their content in CQ. As with Collage, authors can log in using their my.ryerson (matrix) userid and password.

8.4 Log In Screen

8

Updated: 17/11/2011

Login Screen

Step 1: Open Browser

Step 2: Type in CQ Login Address: https://cmshost.ryerson.ca

Step 3: Bookmark Address

Step 4: Enter your Ryerson user id and password in the “User name” and “Password” fields (see below)

Type address in your browser: https://cmshost.ryerson.ca

9

Updated: 17/11/2011

9 Finding Content in CQ

Once you have logged into CQ, you should see the Welcome Screen below:

Welcome Screen

The GUI is divided into various web‐based consoles where you can access CQ functionality. You will likely only need access to ‘Websites’ and “Digital Assets”.

10

Updated: 17/11/2011

Websites: Access all the web pages in your website; create, edit, and delete pages; start a workflow; activate and deactivate pages; restore pages; check external links; and access your user inbox.

Digital Assets, or DAM: Manage digital assets such as xml, PDFs, images, flash, multimedia, Microsoft documents (.jpg, .png, .doc, .ppt, .xls, etc.)

9.1 Working in CQ

Each console has different options; however, how you work within CQ is essentially the same:

Double‐click to open items.

Access items from the tree list. Click + to expand and to collapse those items.

Click the icons to access other consoles.

Available commands are above the items.

Logging in and out is handled in the upper right corner.

Collapse the sidekick by clicking the arrow.

Search for pages using the search box.

9.2 Site Admin Screen

The site admin screen is where you’ll navigate through your web pages and open them for editing. This is also where you will copy, delete and activate your pages.

Click on the Websites icon to navigate to the site admin (administration) area to create and edit web pages.

Click on the Digital Assets icon to navigate to the Digital Asset Manager to access or upload images, documents, js,etc.

11

Updated: 17/11/2011

Most of your work will be done within this area (Websites). You will see the folder tree containing your site on the left (see below).

Selecting a node in the left (folder tree) will display its children on the right (think: node is like folder, and child is like file).

Along the top, you'll see controls (New, Copy, Delete, Move/Rename, Activate, etc.) and information columns (Title, Name, Published, etc.).

Site Admin Screen

9.3 Node Structure: Parent Page & Child Page

All pages in Websites are considered “nodes” in CQ, as opposed to folders and files as they were in Serena Collage. The following describes the concept of parent and child pages/nodes.

Parent Page The Parent Page will show a ‘+’ next to the page icon in the left pane when collapsed. When you click on the ‘+’, the page name or the page icon, its children will display in the right pane.

Child Page Child pages are the sub‐pages that sit below the parent. Children can also be parents to other pages.

IMPORTANT :

12

Updated: 17/11/2011

Every folder that was previously created in Serena Collage and migrated to CQ is now considered a PARENT page or alternatively, a PARENT NODE. If you do a single click on the parent node in the folder tree (left), it will display all the child pages. Typically, in Collage every folder has an index.html file that acts as a homepage or landing page for content. Example: www.ryerson.ca/ece/index.html If you view the content within the /ece/ folder you will see the following:

The index.html file is still within the /ece/ folder and still acts as the homepage file. Nothing has changed. In CQ, all content within the site admin is treated as a page or node and if you doubleclick a parent node (e.g. ece), CQ will open the former folder as a page. www.ryerson.ca/ece becomes www.ryerson.ca/ece.html However, this will not affect the structure of your website. The content of this page will be blank and the URLs will be maintained as folders.

13

Updated: 17/11/2011

10 Creating & Opening a New Page

When you want to add a new page to your site, select the page (node) which will be its parent. This is done in the folder tree in the left panel.

Once you have selected the parent node, click "New..." to bring up the template chooser and follow these steps:

1. Click “New Page”

2. Title: Select a title that will be displayed to the user. This will be used as the Left Navigation Title if this node is to appear in the navigation. The title field is a mandatory field.

3. Name: Select a file name for the new page – this will come part of the page’s URL. If the field is completed, it will appear as the name in the URL after the “/”. Otherwise, the “Title” field will be used. Note: Try to keep the name short; aim for 8‐16 characters. Page names should be lowercase letters and numbers with no spaces and no special characters. Use a hypen if you need to represent a space. CQ will automatically remove spaces in file names (this is a good thing!).

4. Template: A list of templates is available for your new page (see next section).

5. Click “Create” and you will see your new page in edit more.

6. Select the page from the right pane; double‐click on the page name to begin editing the page in Author Mode; OR right click on the file and select “Edit”; OR, in the left pane, double click the name to edit the page.

14

Updated: 17/11/2011

10.1 Templates

CQ templates are based on previous Serena Collage page layouts. For migration purposes, we have replicated these layouts as CQ templates. Not all templates will be available at the time of CQ’s launch (blog, forms). The template options are:

10.1.1 Three Columns

10.1.2 Two Column with Left navigation

10.1.3 Two Columns with Right Feature

15

Updated: 17/11/2011

10.1.4 One Column

10.1.5 Redirect page

10.1.6 Blank: No template applied

10.1.7 Blog page

A note on templates in CQ: You can use any variety of templates within your site. Users can have a three column page and a two column page sitting at the same level (i.e. in the same parent). You are no longer constrained by the “ContentSizer” restrictions of Collage.

11 Editing a Page

16

Updated: 17/11/2011

When in Edit Mode (or view), you can add, move and delete content, activate and delete a page. There are two main editing interfaces: the Content Finder and the Sidekick. You can drag and drop from the Content Finder and the Sidekick.

11.1 Content Finder

The Content Finder is located on the left side of the CQ5 interface and holds the content you can drag and drop onto your page.

There are six icons at the top of the Content Finder; you will be using the two left‐most icons, Image and Documents, most often.

There is also an option to view files as thumbnails or in more detail.

Images: displays search results for images

Documents: displays search results for documents

Movies: displays search results for movie files

Pages: This tab shows all pages. Double‐click any page to open it for editing.

Paragraphs: This allows you to use a paragraph from another page as a global reference.

Browse: This tab shows all the resources in the repository.

11.2 Sidekick

Think of the sidekick as your toolbox while you're building in CQ. The Sidekick window floats on top of the page (when page is open) and contains components, page properties, versioning and other editing functions for your page. You can also select the view/mode on the toolbar at the bottom.

The Sidekick has a “General” components section and a “Ryerson” Components section:

17

Updated: 17/11/2011

Icons at the top of the Sidekick:

Components: displays the components available to move onto the page.

Page Manage page properties such as title, metadata, description, etc.

Information

This functionality is used by Day Administrators.

Versions Create versions and also roll back to previous versions

Workflow Set up a workflow for the page.

11.1 Preview Mode/Edit and Design Modes

The row of icons at the bottom of the Sidekick is used to switch modes for working with pages.

18

Updated: 17/11/2011

The Sidekick minimizes in certain modes ‐ namely Design and Preview. By clicking on the arrow you can maximize the Sidekick and return to Edit Mode (see minimized view below):

11.2 Adding Content using a Component

After you open the page; you can start to add content. You do this by adding components. Think of the components as "containers" for your content page.

To insert a new component:

Doubleclick the area labeled "Drag components or assets here"

Or, drag a component from the Sidekick to that area. This area appears wherever new content can be added.

Edit Switch to Edit mode

Design Not applicable

Preview Switch to Preview Mode

Site Admin Use this button to navigate back to the Site Admin window.

Refresh Reload the page

19

Updated: 17/11/2011

As you drag your component to the target area (see above), it will turn into a blue dotted line with a green check mark to signify that you are able to insert a component there. Drop the component on the appropriate target area.

Double‐click this component (or, right‐click and select “Edit”) to open the component and insert your content.

11.3 Deleting Components

To delete a component, right mouse click on the component; a menu will appear allowing you to choose "Delete" from a list. You will then be prompted to confirm the "Delete" operation.

You can also click on and select the component so that an orange border appears. Then press the Delete key on your keyboard. You will then be prompted to confirm the "Delete" operation.

For More on Components, see the Components section of this document.

12 General CQ Functions

12.1 Find and Replace

To find and replace content (words, URLs or HTML code), start in the Site Admin window and select the file or directory in which you want to work. Select Find and Replace from the Tools pull down menu.

This opens the Find and Replace dialog box which will:

Confirm the root path where the action should start

Define the content to be found

Define the content to replace it

Indicate whether the search should be case‐sensitive

20

Updated: 17/11/2011

Whether only whole words should be found

Click the Preview button to list where the term has been found. You can select or deselect instances to be replaced. Click Replace when ready. You will be asked to confirm the action.

12.2 Move and Rename a Page

The procedure to move or rename a page is the same. You do not need to do both: you can rename a page without moving it or vice versa.

From the site admin view, click to select the page, then select Move/Rename…

Or, you can also select the page item, then rightclick and select Move/Rename...

The Move/Rename window opens; here you can either specify a new location, a new name for the page, or both.

21

Updated: 17/11/2011

The page also lists any pages that reference the page being moved. Depending on the status of the referencing page it will offer the possibility to adjust those links on and/or republish the pages.

Fill in the following fields, as appropriate:

Move

Specify the page to be moved ‐ this is usually filled in by default, depending on how and where you started the move action.

to

Use the sitemap (available via the drop‐down selector) to select the location where the page should be moved to.

If you are only renaming the page, ignore this field.

Rename to

The current page label displays by default. Specify the new page label, if required.

Adjust

Update the link on the page listed. This can be selected/deselected for each individual referencing page.

Republish

Republish the referencing page; again this can be selected for each individual page.

Click Move.

CQ WCM confirms that you want to move or rename the current page.

Click OK to confirm.

22

Updated: 17/11/2011

12.3 Deleting a Page

You can delete a page from various locations:

Within the Websites console, click to select the page, then right‐click and select Delete from the resulting menu.

Within the Websites console, click to select the page, then select Delete from the toolbar menu.

Within sidekick use the Page tab to select Delete ‐ this deletes the page that is currently open.

After you have selected to delete a page you must confirm the request ‐ as the action cannot be undone.

Note:

After deletion, if the page has been published you can restore the latest (or a specific) version, but this may not have exactly the same content as your last version if further modifications had been made. See How To Restore Pages for further details.

12.4 Versioning

To create a new version of a page:

1. In your browser, open the page for which you want to create a new version.

2. In the Sidekick, select the Versioning tab, then the Create Version sub tab.

23

Updated: 17/11/2011

3. Enter a Comment (optional).

4. To set a label to the version (optional), click the More >> button and set the Label to name the version. If the label is not set, the version is an automatically incremented number.

5. Click the Create Version button. A greyed message is displayed on the page; for example: Version 1.2 created for: Election Results

Note:

A version is automatically created when the page is activated.

Comparing with a Previous Version: http://dev.day.com/content/docs/en/cq/current/wcm/page_create_edit.html#Comparing%20with%20a%20Previous%20Version

12.5 Setting Page Properties

Page Properties can be accessed from the Site Admin by right‐clicking on a page:

,

Also, when the page is open for editing, Page Properties is available via the Sidekick:

24

Updated: 17/11/2011

12.5.1 Page Properties Dialog Box

12.5.1.1 Basic Properties Tab

Title: Change the Title of your page as it appears in the site admin list.

Tags/Keywords: Click on Arrow for Ryerson pre‐defined keywords. *Authors wishing to add their own keywords can request permission from Web Services to do so.

Hide in Navigation: An option that indicates whether the page is shown or hidden in the page navigation.

Support Drag and Drop to generate the left navigation: When enabled on the root level node (example: ryerson.ca/alumni), this feature allows users to drag and drop pages in the order in which they want them to appear in their navigation. This is not a default selection.

Section Number: This is a legacy field from Serena Collage. When content is migrated into CQ, the navigation will continue to be controlled via the section number field – unless the user selects the Support Drag and Drop option above.

Page Title: A title to be used on the page.

Navigation Title: A title for the page for use within the navigation (i.e. Alumni – Home) . Often shorter than the full title.

25

Updated: 17/11/2011

Subtitle: A subtitle for use on the page.

Description: A description of page content.

On Time: The date and time at which the published page will be activated. When published this page will be kept dormant until the specified time. Leave these fields empty for pages you want to publish immediately (the normal scenario).

Off Time: The time at which the published page will be deactivated. Again leave these fields empty for pages you want to publish immediately.

Vanity URL: Allows you to enter a vanity URL for this page.

Redirect Vanity URL: Indicates whether you want the page to use the vanity URL.

26

Updated: 17/11/2011

13 Navigation in CQ

13.1 How navigation is created and maintained in CQ

Navigation is controlled via the Section number in the Page Properties. This is a legacy of Serena Collage and a necessity for the migration of content to CQ. The hierarchy of navigation will continue to be maintained via the Section number field unless the user selects the “Support Drag & Drop” option, also available in the Page Properties.

After logging in and going to “websites”, click on the “ryerson” folder in the tree view on the left. This will display all subfolders in the right pane/column. You will see your root level folder name in the right (example: accessibility).

Need to Know: You can only select a file/folder to view its properties when they are displayed in the right column.

13.2 Controlling Navigation via “Drag & Drop”

Left navigation is automatically generated based on page structure.

When enabled on the root level node (i.e. your website’s root folder name), the Drag & Drop feature allows users to drag and drop pages in the order in which they want them to appear in their navigation. This is not a default selection and must be manually selected by users as previously described in the section Basic Properties Tab.

To re‐order the left navigation, simply select the page in the left pane of the site admin screen and drag it to the appropriate place.

If you enable drag and drop, please be sure to check the order of your folders in CQ. Your original ordering may be affected, and you will have to move the folders into the correct order.

Also, if you notice new files displayed in your navigation, you must select “Hide in Navigation” so that it doesn’t appear.

The advantage to using this feature – you will no longer have to manually add a section number to your navigation

folders (also called nodes). You can simply drag and drop your nodes into the order in which you want them to

appear!

27

Updated: 17/11/2011

More: http://cms.blog.ryerson.ca/training/navigation‐in‐cq/

14 Ryerson Components & Common Components

Please note that as more components are made available, they will be updated on the blog and not within this document. For the most up‐to‐date information on Components, please see the blog:

http://cms.blog.ryerson.ca/category/components/ryerson‐components/

14.1 Ryerson Components

As of November 2011, the following components are available within the Ryerson Components section of the sidekick:

1. Generic HTML Component – This is the component that most content from Collage was migrated to. It allowed us to maintain any CCS and Javascript being used in a page.

2. Plain Text Component

3. Columns ‐ http://cms.blog.ryerson.ca/2011/08/22/columns‐component/

4. Event Release – to be used with Event List http://cms.blog.ryerson.ca/2011/06/28/event‐release/

5. Event List‐ http://cms.blog.ryerson.ca/2011/08/08/event‐list/

6. News Release – to be used with News List http://cms.blog.ryerson.ca/2011/06/28/news‐release/

7. News List‐ http://cms.blog.ryerson.ca/2011/08/05/news‐list/

28

Updated: 17/11/2011

8. Biography– to be used with Biography List http://cms.blog.ryerson.ca/2011/06/28/biography‐component/

9. Biography List: http://cms.blog.ryerson.ca/2011/08/04/biography‐list‐2/

10. Generic Biography Field

11. Include File

12. Ryerson Slideshow: http://cms.blog.ryerson.ca/2011/09/26/ryerson‐slideshow‐component/

13. Gallery: http://cms.blog.ryerson.ca/2011/10/06/gallery‐component/

14. Multiple Download Component

15. Tabs: http://cms.blog.ryerson.ca/2011/10/06/dynamic‐tabbed‐navigation/

16. Calendar – to be used with Event Release and Event List

17. Ryerson Site Map

18. Redirect‐ http://cms.blog.ryerson.ca/2011/08/16/redirect‐component/

19. Security Incident – to be use with Security Watch List

20. Security Watch List

21. Twitter: http://cms.blog.ryerson.ca/2011/09/30/twitter‐component/

29

Updated: 17/11/2011

14.2 Text Component

Cut, Copy, Paste: The first five icons at the top left provide you with cut, copy, and paste functions. This is useful, but the standard windows keyboard commands work as well (Ctrl‐X, Ctrl‐C, Ctrl‐V, etc.).

Find, Replace: The next two icons allow you to search through your text, and/or replace a segment with another.

Formatting: The next several icons allow you to bold, italicize, underline, super‐ and sub‐script your text.

Alignment: Align your text to the left, center, or right of the component's space.

Link: Select a segment of text and click the Link icon to create a hyperlink with the selected text; works with both internal and external pages. The Link icon with the red 'x' will remove the hyperlink, and the Anchor icon inserts an anchor for in‐page navigation.

30

Updated: 17/11/2011

List: The beginning of the second line of icons allows you to select paragraphs and convert them to a list, either bulleted or numbered. You can also select a list item and indent or outdent.

Table: Insert a table. Right‐click on a table to edit its columns, rows, size, padding, spacing, etc.

Special Characters: Insert characters that don't have a common keystroke, such as foreign currency symbols.

Spell Check: Check the spelling of your text.

Source Edit: At any time, you can click this icon and see the HTML code that this component has created.

Format: Change a paragraph's style to one of several Headers, or select a blockquote.

With the Text component on your page, double‐click to open the Edit Component window. Under the Text tab, you'll insert the copy for your page. You can do this either by writing within this window, or copying and pasting from an outside source.

14.2.1 Editing HTML Source Code

To access the HTML source code for your text components, click on the Edit Source icon at the end of the second row of the component menu bar. This will open the HTML window and you can edit your code accordingly.

Note: Once you finish editing your code, click on the Edit Source icon again to save your work.

14.3 Image Component

The image component displays an image and accompanying text according to the specified parameters. You can either drag or drop and image from the Content Finder or click to upload an image.

31

Updated: 17/11/2011

You can drag an image from the content finder, or click to open a browse window where you can load an image. After the image is loaded, you can create a clickable image map, crop the image, rotate it, or delete it. To zoom in and out of the image, use the slide bar beneath the image (above the OK and Cancel buttons)

Map

To map an image, click Map. You select how you want to create the image map (rectangle, polygon, and so on) and specify where the area should point to.

Crop

Click Crop to crop an image. Use your mouse to crop the image.

Rotate

To rotate an image, click Rotate. Click Rotate repeatedly until the image is rotated the way you want it.

Clear

Remove the current image.

Advanced

These tools include the title, description, and the size.

Title

The title of the image.

Description

A description of the image.

Size

Sets the height and the width of the image.

32

Updated: 17/11/2011

14.4 Text Image Component

The Text Image component adds a text block and an image. You can also add text and images separately.

Text

Enter text. Use the toolbar to modify formatting, create lists, and add links.

Image

Drag an image from the content finder, or click to browse to an image. Crop or rotate as required.

Advanced Image Properties

Allows you to specify the following:

Title

Enter the title of the block.

Alt Text

Alternative text to be shown if the image cannot be displayed. If left empty the title will be used.

Description

A description of the image.

Size

Sets the height and/or width of the image.

Styles

Here you can either left or right align the image.

The default is Left aligned, with the image at the left.

The following example shows a Text Image Component displaying the specified content:

33

Updated: 17/11/2011

14.5 Title Component

This component adds a predefined title to the page. Once you have dragged the component to the page, double click to edit.

Either enter specific text or leave empty to use the page title.

14.6 Flash Component

The Flash component lets you load a Flash movie. You can drag a flash asset from the content finder onto the component, or you can use the dialog:

Flash movie

The flash movie file. Either drag an asset from the content finder, or click to open a browse window.

Size

Dimensions in pixels of the display area holding the movie.

Alternative Image

34

Updated: 17/11/2011

An alternative image to be shown

Advanced

Includes all of the following:

Context menu

Indicates whether the context menu should be shown or hidden.

Window Mode

How the window appears, for example opaque, transparent, or as a distinct (solid) window.

Background color

A background color selected from the color chart provided.

Minimum version

The minimum version of Adobe Flash Player required to run the movie. The default is 9.0.0.

Attributes

Any further attributes required.

14.7 Download Component

Use this component to offer a file download.

1. Drag and Drop the Download Component onto your page.

2. Click on the Download icon to select and then double click to open the Download Dialog.

3. Enter a Description (optional)

4. Drag the asset to be downloaded from the Content Finder in the left.

5. Enter the Display Name which will be used as the link text.

6. Click OK.

35

Updated: 17/11/2011

14.8 Inserting JavaScript or Style Sheets (CSS)

Both JavaScript and CSS can be used in your website. Both must be stored in the DAM. References to the JavaScript or CSS must be done via the Section Banner page within your website.

14.9 Reference Component

Use this component to “borrow” content from other pages in the CMS (either in your site or from another site in the CMS to which you have permission).

When content is updated in the original location, it will also update on your page.

1. Drag and Drop the Reference Component onto your page.

2. Double click to open the component, or right click and select Edit from the drop‐down menu.

3. Click through the arrow to navigate to pages within the website.

36

Updated: 17/11/2011

4. To select the content to reference, select the page in the left pane and click on the piece of content to reference in the right pane. Click Select.

14.10 List Component

The List component allows you to configure search criteria for displaying a list:

37

Updated: 17/11/2011

Build List using

Here you specify where the list will retrieve its content. There are several methods:

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 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 either type the complete path directly or type several characters, then use the auto‐suggestion provided. Search query may be a simple character string, such as “aenean”, or may have a search‐prefix, for example “in:”, “tag:” or “title:” amongst others.

Display as

How you want the items to be listed; includes Links, Teasers and News.

Order by

Whether the list is to be ordered, and if so, the criteria to use for sorting. You can enter a criteria or select one from the drop down list provided.

Limit

Specify the maximum number of items that you want displayed in the list.

Enable Feed

Indicates whether an RSS feed should be activated for the list.

Paginate after

38

Updated: 17/11/2011

Here you can specify the number of list items to display at once. A list with more items than specified will use pagination to display the list in several portions.

The following example shows a List component the way it may display a list of child pages, with the design controlled by a site design's custom CSS definitions.

15 Editing using Dreamweaver with CQ

1. Open up Dreamweaver

2. Top Menu, Sites > New Site

3. Under Local Info: enter site name, local root folder, default images folder

4. In left under "category" go to Remote Info

5. Under Access, choose WebDAV

6. Enter URL i.e. https://cqauthor.dev.ryerson.ca/your_root_folder example: https://cqauthor.dev.ryerson.ca/graduate

7. Put in your CQ username and password

8. In the checkboxes, check:

a. Maintain synchronization information

b. Automatically upload files to server on save

c. enable file checkin and checkout (*Use this if there is more than one editor within your site section?)

9. Hit OK

10. To see CQ content, you have to choose "Remote View" in the right dialogue box

11. Go into the "content" folder to see CQ files such as Ryerson & DAM

On subsequent visits...just go into "Manage Sites" instead of New Site.

Any file in the Website or DAM can be edited via Dreamweaver by navigating to the necessary folder/file!!

16 Digital Asset Manager (DAM)`

Click the or icon to toggle between the Websites manager and the Digital Asset manager (DAM).

39

Updated: 17/11/2011

When you want to add new media content (images, documents, etc.) to your site, it must first be uploaded to Digital Assets (DAM). DAM can be accessed by clicking the camera icon.

In the DAM, you should see an identical folder structure to what you see in the Websites console. Each site gets its own DAM repository.

It is a good practice to determine a structure for your asset manager in order to keep assets organized and easy to locate. Content uploaded to the DAM are easily accessible from the Content Finder when in Author mode .

Navigating through digital assets is very similar to navigating in the Websites console. If there's an asset you'd like to modify, double‐click to bring up the Asset Dialog.

Here, you will be able to change the asset's properties: define a Title, enter a Description, etc.

16.1 Upload Files to DAM

Navigate to your site's folder in DAM. It will be located in the same place as your site's root node in the left folder tree. When your content was migrated from Collage to CQ, all digital assets (PDF, .doc, JPG, etc.) were moved to your DAM folder. To add new files, select New…

.

1. Select “New File…”

2. Click "Browse..." in the Upload Assets dialog to choose the files you want to upload. Multiple files can be selected, as seen in the image above. Uploading large amount of images or high resolution images is not advised.

40

Updated: 17/11/2011

3. Select Upload.

After you've uploaded your assets, double‐click to open the Asset Dialog. Here, you'll be able to change the asset's properties: define a Title, enter a Description, etc.

Remember: You must Activate digital assets.

16.2 Creating a New Folder

To create a new folder in the DAM, select an existing folder under which the new folder should be created from the left panel.

41

Updated: 17/11/2011

Click on the arrow beside "New..." to view the drop down menu. Click to select "New Folder..."

A prompt will appear. The Name of the folder is what will appear as part of the URL. For this reason, keeping it shorter and in all lower case letters is recommended. The Title is an optional field. Click Create once you have finished.

The new folder will now appear in the folder tree view under the parent folder you had selected.

42

Updated: 17/11/2011

If you would like to move this folder, drag and drop it into the new location within the folder tree..

16.3 Tool Bar Functions

The top tool bar provides the specified function in both the Websites site admin and the DAM.

The search box can be used to perform queries within the DAM.

43

Updated: 17/11/2011

16.4 Important Guidelines for Uploading

• Ensure names adhere to the asset naming conventions (no spaces, restricted characters, etc.).

• Assets should be deleted if no longer used.

• Images less than 1028 pixels (height or width) can be uploaded to the DAM

• Images should be 72 dpi

• Large files or multiple large files should not be uploaded between 9 a.m. and 5 p.m.

17 Activating (Publishing) Pages

17.1 Activating Pages

Activating (or publishing) your pages in CQ5 is quick and easy. You can activate your page into production from the Site Admin window and/or from the Sidekick. In the Sidekick, click on the Page icon at the top of the palette and then click Activate Page.

Or from the Site Admin window, select the page you want to activate and select Activate, either from the top menu or in the drop down menu available when you right click the page selected. To see that the page has been published, refresh the page. The published page appears in the Site Admin window with information about who activated the content and the date and time of the activation.

44

Updated: 17/11/2011

17.2 Page Activation Status

The green icon in the Published column indicates a page that has been activated and includes the date of activation.

An orange icon indicates a page that is pending activation or deactivation.

A blue icon indicates a page that has been modified since the last activation. This page must be activated again for the page to be updated on the website.

A red icon indicates a page that has been deactivated.

17.3 Activate Tree

From the site admin view you can activate the individual pages. When you have entered, or updated, a considerable number of content pages ‐ all of which are resident under the same root page ‐ it may be easier to activate the

45

Updated: 17/11/2011

entire tree in one action. You can also perform a Dry Run to emulate activation and highlight which pages would be activated.

Full instructions can be found on the docs.day.com website: .http://dev.day.com/content/docs/en/cq/current/wcm/page_publish/tree_activate.html

17.4 Deactivate a page

Deactivating a Page To remove a page from your published site, you deactivate the content. To deactivate a page, select the page you want to remove in the Site Admin window. Select Deactivate from the top menu or in the drop down menu available when you right click the selected page. You will be asked to confirm the deactivation.

Refresh the Site Admin window and the content is no longer published.

17.5 Lock Mode

To lock a page that you are working on so no one can modify the contents or activate it:

1. In the Websites tab, select the page that you want to lock.

2. Double‐click the page to open it for edit.

3. In the Page tab of sidekick, select Lock Page:

46

Updated: 17/11/2011

4. A message shows that your page is locked to other users:

5. CQ WCM displays the page as locked and indicates which user has locked the page.

17.6 Unlock Pages

You can only unlock locked pages if you locked the page or if you have administrator privileges.

To unlock a page:

1. In the Websites tab, select the page you want to unlock.

2. Double‐click the page to open it for edit.

3. In the Page tab of sidekick, select Unlock Page:

47

Updated: 17/11/2011

18 Content Review for Stakeholders

If you need to develop a new website, or redevelop an old one, we have set up a development environment that mirrors the functionality of the production environment. If you wish to get a new development site, please contact Web Services with your request.

The development environment will allow you to fully develop and test your site without impacting your existing live site. It will also allow you to easily provide access to clients or stakeholders to review content as it is being developed.

Once your site is completed, Web Services ‐ http://cms.blog.ryerson.ca/web‐cms‐support/contact‐us/ ‐will do a typical deploy review, package your site and release it to the production server.

19 DAY CQ Documentation

CQ User Guide: http://dev.day.com/content/docs/v5_2/html‐resources/cq5_guide_power_user/cq5_guide_power_user.pdf