Log On to Commonspot Adobe Acrobat Pro Microsoft Accessibility Checker Hero Image with Text... 6

Transcription

1 Log On to Commonspot... 2 Adobe Acrobat Pro... 3 Microsoft Accessibility Checker... 5 Hero Image with Text... 6 Colored Background Section, Collapsible Content... 7 Flex Grid Container... 8 Tabbed Container... 9 Spotlight... 8 House Ads Profile Timeline Milestone News Flip Gallery

2 LOG ON TO COMMONSPOT Open a browser and enter the following web address, replacing your-dept-name with the site name of your department: For example, OIT Training department staff will login using the web address: o Enter your login credentials (MyAU Portal id and password). Then, click the LOGIN link. If you encounter difficulties logging on to Commonspot, please contact the OIT HELP DESK by telephone at (ext. x2550) or, by , at help@american.edu. If you would like more information about creating ADA-compliant/accessible webpages, login to the CP Tools website, click Best Practices from the left navigation bar, and choose Accessbility. If you would like more information about Commonspot elements, click Examples, and choose an element. 2

3 ADOBE ACROBAT PRO The Make Accessible action walks you through the steps required to make a PDF accessible. It prompts to address accessibility issues, such as a missing document description or title. It looks for common elements that need further action, such as scanned text, form fields, tables, and images. You can run this action on all PDFs except dynamic forms (XFA documents) or portfolios. 1. Choose Tools > Action Wizard. The Action Wizard toolset is displayed in the secondary toolbar. Note: A list of available actions is displayed under the Action List in the right-hand pane. 2. From the Action List, click Make Accessible. The right-hand pane changes to display each task included in the Make Accessible action, as well as the instructions to execute the action. 3. Select the files that you want to apply the Make Accessible action to. By default, the action runs on the document that's currently open. Select Add Files to select additional files or a folder to run the action on. Select Add Files to run the report on additional files or folders. 4. Click Start. 5. Follow the prompts to complete the Make Accessible action. 3

4 Check accessibility of PDFs (Acrobat Pro) A good way to check the accessibility of a document is to use tools that your readers will use. Even if you do not have access to those tools, Adobe Acrobat provides an automated way to check the accessibility of a PDF file. The Full Check feature in Acrobat checks a PDF for many of the characteristics of accessible PDFs. You can choose which accessibility problems to look for and how you want the results reported. 1. Choose Tools > Accessibility. The Accessibility toolset is displayed in the secondary toolbar. 2. In the secondary toolbar, click Full Check. The Accessibility Checker Options dialog box is displayed. 3. In the Report Options section, select options for how you want to view the results. You can save the results as an HTML file on your system, or attach the results file to the document itself. 4. Select a page range if you prefer to check individual pages of a document. The report displays one of the following statuses for each rule check: Passed: The item is accessible. Skipped By User: Rule was not checked because it wasn't selected in the Accessibility Checker Options dialog box. Needs Manual Check: The Full Check feature couldn't check the item automatically. Verify the item manually. Failed: The item didn't pass the accessibility check. Accessibility Checker rules statuses. 4

5 MICROSOFT ACCESSIBILITY CHECKER 1. From your document in MS Word, click the File tab on the ribbon, and in the Info section, click Check for Issues and select Check Accessibility. 2. The Accessibility Checker pane opens to the right of the document. o To see information on why and how to fix an issue, under Inspection Results, select an issue. Results appear under Additional Information, and you re directed to the inaccessible content in your file. 3. Picture4 is missing Alt-Text. Click the picture to select it, right-click, and choose Format Picture. 4. In the Format Picture pane, select the Layout & Properties icon, and enter a Title and Description. Titles and descriptions provide alternative, text-based representations of the information contained in tables, disgrams, images, and other objects. A Title can be read to a person with a disability and is used to determine whether they wish to hear the Description of the content. The Accessibility Checker automatically updates and removes errors as they are fixed on the page. 5. To save as a PDF, click File, Export, Create PDF, click the Options button, and select Document structure tags for accessibility. 5

6 HERO IMAGE WITH TEXT The 2016 HERO IMAGE WITH TEXT can only be used in the container below the HEADER. This element requires a photo sized for the computer monitor and another photo sized for the mobile phone. You can use the same photo, but it must be saved in 2 sizes. 6

7 COLORED BACKGROUND SECTION, COLLAPSIBLE CONTENT Add a Colored Background Section element to the page; include a Header (required) and Text (optional). Click the Options tab, and check Add an additional container. Now you can insert a 2016 Collapsible Content element inside the Colored Background. 7

8 SPOTLIGHT First, make sure your photo is sized to the specs listed in the element s dialog box. o The specified size is 640 pixels wide x 550 pixels high. HOWEVER, some photos are being cropped height-wise, when sized to these dimensions (ie. Person s face being cropped in Commonspot when the Spotlight is rendered on the page, to the chin, not displaying the neck/shirt below). If this happens, resize the photo to a smaller height (ie. 500 pixels), even if doing so will make the width smaller than 640 pixels. Then, after you click Save, click the widget, Choose Layout, and select one. The default is Duo; I only had one photo, so I chose Solo (Static) and my spotlight displayed on the page. To have rotating Spotlights (this places a cookie on the pc, person who refreshes page will see Spotlight change b/w as many Spotlights as you ve added to element): Click on the element -> Render Properties -> One or more records manually selected Click Search All Records. You should see a list of them all, pick the ones you want and save, create new ones by clicking Add New Record at the bottom of the screen. Change Layout to Solo (Random with Cookie) 8

9 TABBED CONTAINER Minimum of 2 tabs. If using bullets, set Padding in TextBlock to Both. The formatting may look unaligned (bullets outside of container, container not aligned on the left side with any containers above it); this should be fixed, though, after the page is Submitted/Approved. 9

10 FLEX GRID CONTAINER Use the FLEX GRID CONTAINER w/a layout of 3 Boxes (can use 3 or 6) for the FLEX MODULES elements (ie. Promo with Image, Promo Text Only): You must use a Flex Grid Container when using any of the Flex Module elements! Flex Grid Container with a Promo Text Only element. 10

11 HOUSE ADS A House Ad (Flex Module) must go in a Flex Grid Layout container! The entire image is a clickable link. Add an image, and the webpage/pdf you want to link to when the image is clicked. On the cms.american.edu/cptools pg, in the Examples -> Flex:Miscellaneous section, that s a jpg where someone added the button to an image, but captured the image as one jpg not 2 separate things. There is no Read/Learn More buttons on a House Ad. 11

12 PROFILE If you need to add a Profile element to your webpage, use the old Profile element: Select the Click to Insert link, scroll down to Profile Elements, choose Profile. Click the grey widget to edit the Profile element. Choose One or More Records Based on a Filter or One or More Records Manually Selected. They are exactly the same except you can sort the profiles in any order when using Manually Selected. If you are manually selecting only certain people to display on a page (vs. displaying all people in the same department), choose Profile.Eaglenet ID, value contained in list, and then manually type the username of each person you want displayed on the page. Select Preview Records, place a check in the box that appears before each name, choose Use Checked Records, and then click Save. 12

13 List of staff/faculty doesn t display correctly; you need to click on Profile widget, select Choose Layout, and select one of the 2016 choices. Click the red X to delete people. You can change the order of display by clicking the Up/Down arrow in the first column (Actions column, next to red X). 13

14 TIMELINE MILESTONE When the page refreshes after adding the element to the page, an error will display. This is because there are not yet any records in the Timeline. Click Define the Timeline Milestone settings link. To add more items to the TimeLine (default is 1 item): Choose Render Properties, choose One or More Records Manually, click Next. At the bottom of the dialog box, click Search for More Records. In the next dialog box that opens, click Next. In the next dialog box that opens, click Add New Record. 14

15 Enter the data for the next record in your Timeline. Click Save. Continue to click the Add New Record link. The records will not be added to the Timeline until they are manually selected. When you re done adding records, scroll thru the list to find your records, and click to place a checkmark for each record you want on your Timeline. Click Use Checked Records, then click Save. 15

16 NEWS 1. First, create your News story (My Commonspot, New, Page, News template), and make sure you've Submitted/Approved the page so it's available on www. 2. Then, on the page you want to display the link, Click to Insert New Element, choose AU Content Elements, News. 3. Click the grey widget next to Click Here to Configure this Element, and choose Render Properties. 4. Click One or More Records - Manually, and then Next. 5. Click the Search for More Records to Add link. 6. Click Subset of Records and locate your news story by selecting a News story field from the dropdown, then (possibly) changing Equals to another option, and, finally, entering your search criteria. Click View Records. 16

17 7. Place a check next to the News story, click Use Checked Records, and then click Save. 8. You're not done yet! The entire News story will display. Click the yellow widget, select Choose Layout, and choose 2016 Redesign News Single Story. Now it will look great on your page! You need to repeat all of the above to add another News element for an add'l News story you want displayed on your page. And repeat again if you want a 3rd News story. 17

18 FLIP GALLERY Must use the Click to link in the large container that spans across the entire page. Add a Flip Gallery Container. Click Define Gallery Container and enter a title; if you don t want the title displayed on the page, click the checkbox. Click each Click to (there are 7) and insert a 2016 Gallery Flip Image. Click Click here to define and add an image. The pictures will display in a column, not side-by-side. This will get fixed once the page is submitted/approved. 18

19 CP TOOLS 1. Choose EXAMPLES from the left nav bar. 2. Scroll to the bottom of the very long list of elements, and select USER INTERFACE KIT. 3. Find a format/style you d like on your page. Right-click, select View Page Source, press CTRL+F to find the format/style, and copy the HTML code. 4. Paste the code into the element on your webpage. Adding a link button to a TextBlock: EXAMPLES: 1. Scroll to almost the bottom of the page, and decide the button style you want in your textblock. I chose the Primary Link Button because it has a blue background vs. the Default Link Button with a white background (wouldn t be quite as noticeable against the white background of the textblock). 2. Right-click and select View Page Source. 3. Press CTRL+F, type Primary Link in the Search box, and copy the HTML code. An HTML link uses the <a> anchor tag, which includes href= (the URL the button will link to), and class= (style). 4. Return to your textblock, click the Source icon, and paste the code. You will need to change the href= URL location, and add the closing </a> tag. SEE NEXT PAGE FOR SCREENSHOT. 19

20 <a href=" class="btn btn-primary" >View all FAQs</a> <a Start of Anchor tag href= URL that the button links to when clicked class= The style of the button (created by OIT, can t be changed) Button text </a> End of Anchor tag 20