SPHOL213: Intro to Web Content Management in SharePoint 2013

2013 SPHOL213: Intro to Web Content Management in SharePoint 2013 Hands-On Lab Lab Manual

This document is provided as-is. Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it. This document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and use this document for your internal, reference purposes. 2012 Microsoft. All rights reserved.

Contents Lab Objectives... 2 Technologies... 2 Audience... 2 Scenario... 2 Getting Started... 2 Connect to the Lab Environment... 2 Open the Lab Environment... 3 Exercise 1: Create a new layout page and web part page... 4 Task 1 Create a page layout... 4 Task 2 Add a Page Image snippet to the new page layout... 6 Adding a Rendition to the Page Image... 7 Task 3 Create a simple page using custom page layout... 11 Exercise 2 Add Rich Formatted Content to a Page... 13 Scenario... 13 Task 1 Add Formatted Word content to the page... 13 Exercise 3 Insert an Image and Embed a Video... 15 Scenario... 15 Task 1 Insert an image and pick a rendition... 16 Task 2 Embed a video... 19 Exercise 4 Translate the Page to German... 22 Scenario... 22 Task 1 Create the Variation... 22 Task 2 Translate the Page... 24 Summary... 25 Microsoft Confidential Page 1

Introduction to Web Content Management in SharePoint 2013 Estimated time to complete this lab: 30 minutes Lab Objectives In this lab you will learn about some of the core new concepts for Web Content Management in SharePoint 2013. You will create a new page layout using the Design Manager and Snippet Gallery. You will then create a Web Part page using this layout. You will add rich content to the Web Part page, including photos, videos, and pre-formatted text from Microsoft Word. You will then use Translations and Variations feature to machine-translate the page content to another language. After completing this lab, you will be better able to: Use the Snippet Gallery, create a new layout page. Add page content zone, web part zones, and publish the page. Create a new Web Part page that inherits from the layout page. Add rich formatted content by copy/paste from Word. Add an image to the page and explore various rendition options. Embed a video to the page. Inspect the Variations hierarchy used by the site. Publish the Web Part page, and see the page contents automatically in a variation of the site. Technologies Audience Scenario SharePoint 2013 Web Content Management SharePoint 2013 Snippet Gallery SharePoint Site Administrators and SharePoint IT Professionals The Design Manager in SharePoint 2013 allows web site designers and developers to use whatever tools they want to create HTML and CSS designs, and then upload the files to SharePoint, which will automatically convert the HTML and implement ribbons, placeholders, and custom minimal masters. You can use the Snippet Gallery to create code for many dynamic and static elements such as web parts, administration panels and custom ASP.NET markup. In this task, we ll focus on adding a simple text label for site title on each page. Getting Started Connect to the Lab Environment If necessary, log on to the SharePoint (SP) virtual machine (VM) as Garth Fort, with the credentials CONTOSO\GarthF, pass@word1. Microsoft Confidential Page 2

Close any windows open on the virtual machine. Open the Lab Environment 1. To begin the lab, open Internet Explorer, navigate to the demo home page at http://www.contoso.com/sites/sphol-wcm/en-us/, and log into SharePoint as Garth Fort with the following credentials: Username: CONTOSO\GarthF Password: pass@word1 Microsoft Confidential Page 3

Exercise 1: Create a new layout page and web part page Estimated time to complete this exercise: 10 minutes Page layouts define the look and feel of a set of pages by styling page fields and web part zones within the common elements of a master page. The Design Manager allows you to easily create, upload, and manage page layouts, device channels, and designs. The Snippet Gallery helps you to easily customize page layouts by adding Page Field elements, such as a Page image, Summary Links, a Byline. Since an originally uploaded image may not be the size or cropping wanted for a page, you can use image rendition to set the image to one of several pre-defined dimensions. In this exercise, you will use the SharePoint 2013 Design Manager to create a new page layout based on SharePoint s default Article Page. You will then use the Snippet Gallery to add an image field and customize the image field using an image rendition. Task 1 Create a page layout In this task, you will use Design Manager to create a new page layout based on SharePoint s default Oslo Master Page and the default Article Page content type. 1. On the SPHOL-WCM home page, from the Settings menu (gear icon in upper right), click Design Manager. Microsoft Confidential Page 4

2. To create a new page layout or edit an existing page layout, in the left navigation of the Design Manager page, click 6. Edit Page Layouts. 3. On the Edit Page layouts page, click Create a page layout. 4. Complete the Create a Page Layout dialog as follows: a. In Name text box, type SimplePageLayout. b. From the Master Page drop down, click Oslo. c. From the Content Type drop down, click Article Page. d. Click OK. Microsoft Confidential Page 5

The Create a Page Layout dialog will close and you will see the newly created SimplePageLayout in the list with a Conversion successful Status. NOTE: It may take a moment to create the page. Task 2 Add a Page Image snippet to the new page layout In this task, you will preview the layout page just created, then use the Snippet Gallery to modify the Page Image field on the layout page. You will specify a rendition to be used for the Page Image. 1. To open the SimplePageLayout for preview, click SimplePageLayout in the list. Because you have no content in the page layout, you will only see the framework of the page. 2. To open the Snippet Gallery, click Snippets in upper right corner. Microsoft Confidential Page 6

3. On the Design tab, in the Page Fields section, click Page Fields, and then click Page Image. Adding a Rendition to the Page Image The Snippet Gallery allows you to apply a pre-defined image rendition size. No rendition property is applied to the Page Image field by default. 4. Right-click edit renditions link under Page Field: Page Image and Open in new tab. Switch to the newly opened tab, which shows a list of existing Image Renditions. Microsoft Confidential Page 7

5. Click Add new item. 6. Fill the New Image Rendition as follows, and Save: Name: Page Image Width: 200 Height: 200 7. Back on the list of Image Renditions, you ll see the newly added item has ID of 5. We will apply this rendition to the Page Image field in the layout page. You will now set the image rendition size using the RenditionID property in Snippet Gallery. 1. Switch back to the Snippet Gallery tab. 2. Under Customization Page Field: Page Image ( RichImageField), click Rendition Properties to expand. Microsoft Confidential Page 8

3. Change RendtionID from -1 to 5. NOTE: This is will add a Page Image placeholder to the page. Any Page Image added to a page created using the SimplePageLayout content type will be added as a Page Image. 4. Click Update to apply changes to the HTML Snippet code. 5. To copy the HTML Snippet code, click Copy to clipboard below the snippet code. 6. If Internet Explorer displays a dialog box asking Do you want to allow this web page to access your Clipboard?, click Allow access. You will now open the SimplePageLayout.html file in the SPHOL-WCM Master Page library and paste the copied code into the file. 1. From the Settings menu, click Site settings. 2. Under Web Designer Galleries, click Master pages and page layouts. Microsoft Confidential Page 9

3. On the Library tab, in the Connect & Export group, click Open with Explorer. NOTE: If Internet Explorer is not maximized, you will see just an icon. 4. If requested for login credentials, enter the following information: User name: Contoso\garthf Password: pass@word1 5. In the Master Page catalog listing, right-click SimplePageLayout.HTML file. NOTE: The Master Page library contains an HTML file version of the layout page and an ASP.NET Server Page. You will change the HTML file version. 6. In the context menu, click Open with, and then click Notepad. 7. To find the code snippet to change: a. In Notepad, press CTRL+F to open the Find dialog. b. In the Find what text box, type Page Field: Page Image. NOTE: Do NOT copy the text above to paste into the text box. This will overwrite the Snippet code copied to the clipboard. c. Click Find Next. d. Click Cancel to close Find dialog. 8. Highlight the entire DIV element: From the <div> that corresponds with <!--CS: Start Page Field: Page Image Snippet--> to the </div> that corresponds with <!--CE: End Page Field: Page Image Snippet--> : Microsoft Confidential Page 10

9. Press DELETE. 10. Press CTRL+V to paste the snippet code copied to the clipboard. 11. From the Notepad File menu, click Save. 12. From the Notepad File menu, click Exit. Task 3 Create a simple page using custom page layout In this task you will create a simple page using the custom page layout that you created in Task 1 and customized in Task 2. 1. Navigate to the HOL demo site: http://www.contoso.com/sites/sphol-wcm/en-us 2. In left navigation, click Site Contents. 3. On the Site Contents page, double-click Pages to open the library. Microsoft Confidential Page 11

4. In the Pages library, on the Files tab, click New Document drop-down, and then click Page. 5. In the Create Page window: a. In the Title text box, type Simple Page. NOTE: SharePoint will automatically set the URL Name to Simple-Page. b. From the Page Layout list box, click (Article Page) SimplePageLayout. c. Click Create. Microsoft Confidential Page 12

A Simple-Page document is added to the Pages library. 6. In Pages library, click Simple-Page name to open the newly created Simple-Page.aspx page. In this exercise, you used Design Manager to create a custom page layout. You then used Snippet Gallery to customize the page image rendition, and finally you created a new page using the SimplePage layout. Exercise 2 Add Rich Formatted Content to a Page Estimated time to complete this exercise: 4 minutes Scenario SharePoint 2013 makes adding static content on a SharePoint page easy. You can easily copy formatted text from Word and paste it in a page in SharePoint. The content structure (Heading 1 and 2, the table and the bullets) is preserved, but Word s formatting when copying and pasting text is not. In this Exercise, you will update the SImplePageLayout page you created in Exercise 1 by pasting formatted text copied from a Word document. Task 1 Add Formatted Word content to the page 1. Navigate to the Simple-Page.aspx created in Exercise1. URL: http://www.contoso.com/sites/sphol-wcm/en-us/pages/simple-page.aspx 2. From the Settings menu, click Edit Page. 3. Open Windows Explorer and navigate to C:\HOLContent\SPHOL-WCMIntro folder. 4. Double-click HomePage_UpdatedText.docx file to open in Word. 5. Press CTRL+A to select all contents, and then press CTRL+C to copy the text. 6. Minimize Word and minimize Windows Explorer. 7. If the cursor is not already in the Page Content area, in the Page Content area, click the Click here to add new content link. Microsoft Confidential Page 13

13. Press CTRL+V to paste the copied text. 14. If Internet Explorer displays a dialog box asking Do you want to allow this web page to access your Clipboard?, click Allow access. The text is pasted in and Word styles are aligned with SharePoint default styles. 15. Click the (Ctrl) context menu that pops up at the bottom of the pasted text. 16. Click Paste Clean, which is the default paste option. NOTE: You can click through the other two Paste options to see what they do. Make sure you click Paste Clean (C) before moving to the next step. Microsoft Confidential Page 14

17. On the Format Text tab, in the Markup group, click Edit Source. 18. Note the clean HTML markup, and the inheritance of SharePoint s formatting. 19. Click Cancel in lower right corner to close the HTML Source window. In this exercise, you copied formatted text from Word and pasted it into a web part page in SharePoint 2013. You then viewed the clean HTML markup used in the page. Exercise 3 Insert an Image and Embed a Video Estimated time to complete this exercise: 8 minutes Scenario Image renditions let you display different sized versions of an image on different pages. When you create an image rendition, you specify the width and height for all images that use that image rendition. For example, if the site has a news article page layout that contains an image field, you can create an image rendition named Article_image to display the full-sized image in the article page. A second image rendition named Thumbnail_small can be used to display a smaller version of the image associated with a particular article when the image is displayed in a Web Part that lists all recent news articles on the site home page. SharePoint 2013 has made it easier to embed videos into pages, by taking advantage of the code that video providers offer up to embed their videos on your pages. In this Exercise, you will add an image to a custom page and set renditions. You will then use Embed Code to embed a video on the page. Microsoft Confidential Page 15

Task 1 Insert an image and pick a rendition In this task you will insert an image on the page and set an image rendition. 1. If not already open, open the custom Simple Page created in Exercise 1: http://www.contoso.com/sites/sphol-wcm/en-us/pages/simple-page.aspx 2. If asked for credentials, enter the information: Username: contoso\garthf Password: pass@word1 3. If the Simple Page is not already in edit mode, from the Settings menu, click Edit Page. 4. In the Page Image field on the page, click the Click here to insert a picture from SharePoint link. Microsoft Confidential Page 16

5. In the Edit Image Properties window, click Browse beside the Selected Image. 6. In the Select an Asset window, click Site Collection Images. 7. Click Home.jpg, and then click Insert. Microsoft Confidential Page 17

8. Notice that because we forced the image rendition in the SimplePageLayout master page, the Image Rendition field is unavailable for changing at this time. 20. Click OK to add the image to the page. Microsoft Confidential Page 18

Your page will now look like this: Task 2 Embed a video In this task, you will use the Embed Code feature to embed video on the custom page. 1. In a new tab, navigate to the following video on TechNet: http://www.microsoft.com/resources/technet/en- us/office/media/video/video.html?cid=stc&from=mscomstc&videoid=7923b059-abb9-430d- 85d9-3abd86a7b40c Microsoft Confidential Page 19

2. To view the embed code, on the video page, click Share. 3. On the video s Share window, highlight the code in the Embed text box, and then press CTRL+C to copy the code to the clipboard. 4. Navigate to the Simple Page: http://www.contoso.com/sites/sphol-wcm/en-us/pages/simple-page.aspx Microsoft Confidential Page 20

5. Click at end of page after the The Contoso Product Stack table. 6. To embed the video code: a. On the Insert tab, in the Embed section, click Embed Code. b. Click in the text box and press CTRL+V to paste the embed code in the text box. c. Note the video preview in the window. d. Click Insert to add the video to the page. NOTE: You can use the following code if not navigating to that site, to save the time. <iframe width="432" height="243" frameborder="0" marginwidth="0" marginheight='0' scrolling="no" src="http://hub.video.msn.com/embed/7923b059-abb9-430d-85d9-3abd86a7b40c/?vars=bwt0pwvulxvzjmjyyw5kpxy1jtvlodawedq1mczsaw5rb3 Microsoft Confidential Page 21

ZlcnJpZGUyPWh0dHAlM2ElMmYlMmZ3d3cubWljcm9zb2Z0LmNvbSUyZnJlc291cmNlc yuyznrly2huzxqlmmzlbi11cyuyzm9mzmljzsuyzm1lzglhjtjmdmlkzw8lmmz2awrl by5odg1sjtnmdmlkzw9pzcuzzcu3yjaln2qmbglua2jhy2s9ahr0ccuzysuyziuyzn d3dy5tawnyb3nvznquy29tjtjmcmvzb3vyy2vzjtjmdgvjag5ldcuyzmvulxvzjtjm b2zmawnljtjmbwvkawelmmz2awrlbyuyznzpzgvvlmh0bwwmy29uzmlnq3npzd 1NU05WaWRlbyZjb25maWdOYW1lPXN5bmRpY2F0aW9ucGxheWVyJnN5bmRpY2F0 aw9upxrhzyzwbgf5zxiuzni9c2hhcmvlbwjlzc1zew5kawnhdglvbg%3d%3d"> <A href="http://www.microsoft.com/resources/technet/en- us/office/media/video/video.html?videoid=7923b059-abb9-430d-85d9-3abd86a7b40c&src=v5:embed:syndication:&from=shareembed-syndication" target="_new" title="sharepoint 2013 Web Content Management walkthrough">video: SharePoint 2013 Web Content Management walkthrough</a> </iframe> 7. To save the page, on the Page tab, in the Edit group, click Save. 8. Navigate to the bottom of the page and click play to view the video. In this exercise, you added an image to a custom page that had a rendition preset using code snippets in Exercise 1. You then copied embedded code in a Microsoft Technet video and used the SharePoint 2013 Embed Code feature to add the code to the web page. Exercise 4 Translate the Page to German Estimated time to complete this exercise: 8 minutes Scenario The variations feature in Microsoft SharePoint makes content available to specific audiences on different sites by copying content from a source variation site to each target variation site. If necessary, the content can then be customized in the target variation site. The Machine Translation Service in SharePoint Server 2013 lets users automatically translate documents. You can create a Machine Translation service application and configure the Machine Translation Service by using Central Administration, or Windows PowerShell. While Variations were available in SharePoint 2010, in SharePoint 2013 coupled with Machine Translation, it is easier than ever to create multi-language sites and pages. In this exercise you will create a variation of your Simple Page in the German site, you will then translate the variation to German. Task 1 Create the Variation In this task, you will learn to create a new target for your custom page. You will then update the variation to place your custom Simple Page in the German site. 1. If not already open, navigate to your custom Simple-Page.aspx. URL: http://www.contoso.com/sites/sphol-wcm/en-us/pages/simple-page.aspx Microsoft Confidential Page 22

2. If asked for credentials, enter the following information: Username: contoso\garthf Password: pass@word1 3. From Settings menu, click Edit page. NOTE: In order to create a variation, you must check out the page first. 4. On Page tab, in Edit group, click Check Out. 5. On Page tab, in Edit group, click Save. 6. On the Publish tab, click Create new target. 7. In Create Variation, click the check box beside de-de, and then click Continue. A page will display indicating your variation is on the way. 8. Click OK to close the page. 9. On the Simple Page, in the yellow ribbon, click Check it in. 10. In the Check In dialog, click Continue. Once the page is checked in, you can navigate to the German site and view the variation. 11. Navigate to the German site: http://www.contoso.com/sites/sphol-wcm/de-de 12. In left navigation, click Websiteinhalte. 13. In Site Contents (Websiteinhalte), double-click Seiten (Pages) to open the library. Microsoft Confidential Page 23

14. Note the Simple-Page. Task 2 Translate the Page In this task, you will use machine translation to translate the variation copied to the German subsite into German language. 1. In the Seiten library on the German subsite, select the Simple-Page variation. NOTE: Do NOT open the page, but select it instead. 2. On the Varianten tab, in the Übersetzung group, click Maschinelle Übersetzung, and then click Nur ausgewähite Elemente. 3. When the Maschinelle Übersetzungsanforderung Senden dialog displays, click OK. Translation: This can take several minutes. You can check your order by clicking Translation status on the Variations tab. Übersetzungsstatus on the German site., 4. In the Varianten tab, in the Übersetzung group, click Übersetzungsstatus to view the status of the translation. Microsoft Confidential Page 24

5. When translation is complete, check in the translated page to view the results. In this exercise, you created a variation of your custom page in the Pages library of the German language website. You then used machine language to translate the page to German. Summary In this lab, you learned to use the new Design Manager to create a new page layout. You then used Snippet Gallery to customize the new layout page, then created a web part page, embedded a video, and added rich formatted content. You then added an image and worked with renditions. Finally, you inspected variations and translated the page to German Specifically, you learned how to: Use the Snippet Gallery, create a new layout page. Add page content zone, web part zones, and publish the page. Create a new Web Part page that inherits from the layout page. Add rich formatted content by copy/paste from Word. Add an image to the page and explore various rendition options. Embed a video to the page. Inspect the Variations hierarchy used by the site. Publish the Web Part page, and see the page contents automatically translated in a variation of the site. Microsoft Confidential Page 25