Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)

Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing Page Menu Details... 3 Create a New Web Page Step 1 through Step 6... 4 Copy & Paste Text into the Page Text Area using a Mac computer... 9 Copy & Paste Text into the Page Text Area using a PC computer... 10 Formatting & Editing Text on the Jadu Page Text Area... 11 Adding Files to Jadu Documents like Pdf, Word, etc.... 12 Adding Images/Photos into Jadu... 14 Links... 16 External or Internal Website Link... 16 Email Address Link... 16 Finding the url (link) of a File then link to it... 17 Replace a File that is already Linked without editing the Web page Link... 19 Publish Submit, Approve and Make Live... 23 Edit Text on Existing Web Page - Quick Method But Text Only!... 25 Editing an Existing Web Page Images, Links & Text... 27 Inserting Images to a Page when the image was previously added to the Multimedia Items... 28 Adding Images to a Web Page in the Page Text Area as you are Adding Text... 30 Modify the placement of an Image on a Web Page in the Page Text Area... 31 Adding a Table to a Webpage... 32 Gallery Webpage Multiple Images/Photos Displayed in Gallery Format... 34 1

Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out Jadu (pronounced Jardoo ) content management system is used within a browser. The recommended browser is Chrome or Mozilla Firefox on either PC or mac computers. Document Page is when you first start creating a web page short, one or two words Document Details Page Title is found on the editing page, where you see the area to type in text for your webpage, this is a couple of words that could include the Document Page word/s. See details here (page 6): Document Title and Page Tiles Examples Download is a file, like pdf or word doc Multimedia Items are images or photos Naming of Files (Downloads - docx, pdf, ppt, xls, ect) or (Multimedia Items - jpg, gif or png) Be sure the name of the files, documents, pictures & images DO NOT have any spaces or special characters. Naming Examples: events_2013.doc or smithphoto.doc or budget2012.xlsx or proposal.pptx or samson2013.jpg If you Submit, Approve & Make Live they (pages and files) are on the internet! Remember in our previous webpages, the tabs or table with cells that were links to your other pages. That is done by Marketing & Communication Department, so please email helpdesk & provide the webpage url that you want to be a navigation/menu link to the page. Links don t need underlined, once they become a link it will be automatically underlined. To Log In: http://www.dickinson.edu/jadu (your Dickinson username and password) To Log Out: Under your name at the far right top of the screen as shown below. Click Log Out. You will be asked to confirm that you wish to log out in a final dialog box. 2

Landing Page Menu Details Left Top Side of Window New: Document Page create new webpage Download add files Multimedia Items add images/photos Gallery multiple images page Open, Publishing: Document Pages webpages already created Downloads files already added Multimedia images already added Galleries Gallery pages already created Right Top Side of Window Your Name: Under your name is: My Tasks & Log Out Middle of Window Tasks outstanding Task awaiting action Bottom Right Side of Window Online Now: Users logged into Jadu at the moment. 3

Create a New Web Page Step 1 through Step 6 Click on New, Document Page The New Web Page creation area appears where you start to add details for your new page as shown in steps. As you move within each step as completed you will come back to this page to find the next step. Notice the Save button to Save this page during the editing process. 1. Document Title A shorter version of the Page Title or the same as the Page Title 2. Categories 3. Metadata 4. Do Not need to be filled out 5. Do Not need to be filled out 6. Click on the Save button. 4

Step 1. Document Title This should only be a couple of words, it is the page name that will appear in the list of webpages to your website, and it will also be the Heading or Title of your web page. Design is the Document Title for this example & displays in Jadu under document title listing. Print Center Design is the Document Details Page Title and both will appear on the top of Browser. See Examples below: Example of Document titles listed for the Print Center (notice, they are very short titles): Example of a where the Page Title is typed, on the Document Details page: Example of how the Document Tile & Page Title will look on browsers: Example of how Document Title and Document Details Page Title will appear on website. Document Title - larger Document Details Page Title - smaller If you only want one Heading on your web page, make both of these the same. 5

Step 2. Categories This is where you will click on the letter to find your department or program. It will appear on the left side as shown below. You need to add it to the right side pane. Once you find the Category you want, select it so that the Add button becomes active, then click Add. Notice you have the Back link if you need to go back. The Print Center has been added to the right side, now click on Apply Categories. 6

Step 3. Metadata Under Standard Metadata are two sections to fill out: Additional Keywords: Enter words that describe your page, lowercase & separated by commas. Always a good idea to include your department name first. Description: Enter a brief description of your page. Click on Assign Metadata. Content Schedule & Advanced Metadata - No need to fill out any details Step 4. & 5. Both DO NOT need to be filled out. Leave the default settings for 4 and 5. Step 6. Save - Click the Save button to complete these steps. Click on Create one now 7

You are on the Document Details page to start creating your web page by adding text, images and links. 1. Image: Use only if needed because it does not need to have an image added here. 2. Page Title: This Page Title is what will appear on top of the browser. The Page Title will usually will be a 2-3 words and will look like a heading on your finished page. If you make it the same as Document Title, then you will have only one Heading. 3. Page Text: You can type text into this area. See details next on how to copy and paste text. Image can be added here too. 4. Save: The Save button is on bottom of window. 8

Copy & Paste Text into the Page Text Area using a Mac computer Any copied text you are using for a webpage must first be copied into TextEdit on a Mac computer (even if it is from an email or from a word document) you need Copy and Paste text into this program so it removes formatting. You must copy and paste into a text editor first! First you need to get into the Hard drive on your mac (usually a shortcut on desktop), then open up the Applications folder to find the program called TextEdit & click to open it. Hard Drive Applications Folder TextEdit Application Once TextEdit is opened, click on Format, Make Plain Text. Notice there is only plain text, no bold or links, just text is in TextEdit: Once the text has been added to TextEdit, then select the text from within TextEdit and copy and paste into the Document Page Text area of the new webpage you are creating. 9

Copy & Paste Text into the Page Text Area using a PC computer Any copied text you are using for a webpage must first be copied into Note Pad on a PC computer (even if it is from an email or from a word document) you need Copy and Paste text into this program so it removes formatting. You must copy and paste into a text editor first! On a Windows 7 computer, click on start button, type in Notepad, click to open the program. On XP computer, click on Start, then under Programs find Notepad. Once opened click on Format, Word Wrap before using Notepad for the first time. This will keep the text wrapped in a paragraph form. You must first paste the text into Notepad, then from within Notepad you will copy & paste it into the Jadu webpage. Notice there is only plain text, no bold or links when text is in Notepad: 10

Formatting & Editing Text on the Jadu Page Text Area On the Text Tool bar, under Format, you can choose Heading & Subheading. Notice the various text editing tools. Notice the Bold & Italics tools. Paragraphs by default should be Normal. Bulleted Lists: Numbered Ordered List: Tip: Add hard returns (Shift/Enter keys on your keyboard) between headers and paragraphs if they do not already exist. 11

Adding Files to Jadu Documents like Pdf, Word, etc. Files are called Downloads in the form of brochures, files, documents, powerpoint, ect. NOTE: Be sure the name of the file/document has no spaces or special characters. (Naming File Examples: events_2013.doc or smithphoto.doc or budget2012.xlsx or proposal.pptx or samson.pdf ) In Jadu select the New, Downloads. Title of Download - This will be used when searching for it in Jadu. Assign Categories - click to then Add your department then Apply Category Description of download - Enter a short description of the download Enable download password field keep the default selection of No Click Save. At the bottom appears: There are no files assigned to this download. There are 3 methods for uploading files as buttons at bottom show above. Recommend to use either Upload or Drop in New Files. Mozilla Firefox works best. 12

Upload New File This option is most commonly used to upload one file that will be linked to in a web page. Title - Enter a name for the file in the box File selection - Select Upload a new file Browse click the button to navigate to your file. Select the file and click Open. Click Save. Now the file was added and will look like this screen shot below. Drop in new files This option is used to upload multiple related files. (Use Chrome or Mozilla Firefox to drag and drop files.) Click Drop in new files. Drag one or more files for the download into the grey Drop your files here area. Click Save. Remember to then Submit & Approve. 13

Adding Images/Photos into Jadu Images/Photos are called Multimedia Items in Jadu. The image size should not be any wider than 670 pixels. Note: Be sure the name of the picture or image is text only, no spaces or special characters. The accepted files extension types are gif, png and jpg. (Naming Examples: events_2013.jpg or smithphoto.png or jones4.gif) In Jadu select the New, Multimedia Item. Either Choose File to navigate to your file, then you must click Upload File button or you can Drop your files here by dragging the images onto the gray area of the screen. Click the Continue button. Note: Look for Complete under Progress of file upload Both methods are shown below. 14

Title - Give this a short title that you can search on when needed Tags - All keywords are comma separated and are all in lower case. Enter metadata key words that might be used when searching the central image library in Jadu. Include department name too! Alternative Text - Enter a short but informative description of the image. This text will be displayed when a mouse hovers over the image on the page. Make it a complete sentence. Description - Enter a short but informative sentence about this image. Could be the same as the Alternative Text, copy and paste it from above. Categories Put a check in the one that applies to your department. Resize Image Leave at Keep as Original Size Click Save. Note: If you have uploaded more than one it will take you to the next image after saving each Image Details about the image. 15

Links External or Internal Website Link In the Jadu text editor, select the text that will be linked. Click the Insert/Modify Link button. (it is a green globe with a chain) The Insert/Modify Link dialog box appears. Paste the link of the external/internal web site into the Web or Email Address area. Enter a Title for the link. (not necessary) The title will display when a mouse hovers over a link. Click the Insert link button. Email Address Link Select the text that you want to become the email link. Click on the Insert/Modify Link button Type in the email address in the Insert/Modify Link dialog box that appears, then click the Insert Link button. 16

Finding the url (link) of a File then link to it To find the url (link) to a file that has already been added to Jadu, click Open, Publishing, Downloads. Click on file name under Download Title for the file you want to link to. Look for a blue Actions button (found on top left of page). Click Actions, View live. If View Live isn t listed, then the files was not Made Live after Approving. A preview web page appears, click on the Document Title that you need to find the URL for. (Biology Symposium is the example shown below). Once it is clicked a new web page will appear, that previews the page with this file link on it. Right mouse click on the file link and choose Copy Link Address, Copy Link Location or Copy Shortcut. Each browser has different menu wording when you right mouse click. Mozilla: Chrome: HINT: If you have several files/documents to get links for, leave the page open while adding the link to various pages in Jadu. 17

To add this link to this file on a webpage you will need to open the document page. Click on Open, Publishing, Document pages. Open the page you want to add the link on. In the text area or the webpage select the text that will be used to make a link. Click the Insert/Modify Link button. The Insert/Modify box displays. Paste the document URL into the Web or Email Address dialog box. Enter a Title for the link. The title will display when a mouse hovers over a link. The title will aid in accessibility. Click Insert link. 18

Replace a File that is already Linked without editing the Web page Link Do you need to replace a file that is already linked in Jadu? This tutorial explains details on how to upload a new file within Jadu that would be replacing an already linked file. With this procedure you do NOT need to edit the webpage link, only replace a linked file with a new file and the webpage will automatically have the new file linked. The file name must be the same!! Tip: NEVER change the File Title name in Jadu. The name of the file (pdf, word, ect) can be a different name. In Jadu, click on Open, Publishing, Downloads You will be taken to the area in Jadu where your files are located. The first one on Download Title is what will be replace in this tutorial. Click on the Download Title name, the name of the file you want to replace with a new file. 19

Under File Listing, (bottom section of page) click on the File title name that you want to replace with a new file. In this case I want to replace the file called Abstracts_2013SymposiumOriginal.pdf file with a new updated file. Note: The Title of Download name can be changed in the upper section of this page and it will not break the link. Remember to click the Save button if you do. 20

After clicking on the File Title name the bottom section opens to be completed as shown below. Step 1. Leave the Title of download the same! Do NOT change. Step 2. Put a check in Change File? Step 3. In the File selection, click on Upload a new file, then click on Choose File (or Browse) to navigate to your new update file. This new replaced file name is called SymposiumAug2013.pdf. As long as you do not change the Title of download the link will reflect the new file. Step 4. Click Save. 21

Notice the Filename/URL has been changed but the File Title remains the same. Remember to Submit, Approve to publish, the Live should already be green. Under Actions, click on View Live to check your link & newly replaced file. Notice in the View Live Biology Symposium Details is the Title of Download in Jadu & appears as a Title on this webpage. Biology Symposium is the link to pdf file is called File Title in Jadu. 22

Publish Submit, Approve and Make Live Once your page is completed you will need to publish the page. Click on the Submit button. Decline and Approve buttons appear on the right side. Click Approve. Look for Document has been approved to appear. Click on Make Live Look for Live to turn green 23

View Live A way to check your page after any editing is done is to View Live. Two ways to View Live. Either click on View Live under Check Page. The best way is found under the blue Actions button, choose View Live. Example shown below is how your web page will appear on a separate browser tab, close that browser tab when you are finished viewing. It helps to close each after Viewing Live. 24

Edit Text on Existing Web Page - Quick Method But Text Only! To edit an existing page, click on Open, Publishing then Document Pages Click on the webpage you want to edit under Document Title. The screen will change to: Edit FAQ. Remember: Making changes to text only, click once on Preview. NOTE: You cannot add links or images with the procedure. 25

The webpage will open, in a new browser window, giving you the ability to type into the text area found inside the dotted area as shown below. Remember: TEXT EDITING ONLY!! Click the Save Changes button at the bottom when finished. You will need to close that browser tab/window that opened for this preview. Back in Jadu, you will need to Submit and Approve for these changes to be applied to the webpage. 26

Editing an Existing Web Page Images, Links & Text To edit an existing page, click on Open, Publishing then Document Pages Click on the webpage you want to edit under Document Title. The screen will change to: Edit FAQ. The Edit FAQ at the top will let you change the Metadata & Categories if desired. Click on the Page title to edit the page content area in which you can edit Text, Images and Links. Click Save, Submit & Approve to make the changes automatically live on the internet. 27

Inserting Images to a Page when the image was previously added to the Multimedia Items Details on how to add an image to the text area of a web page when the image was added to Jadu previously in the Multimedia Items area is explained here. You will need to know the name of the image. See Note on next page if you do not remember it. In the Jadu Page Text area, place your cursor where you would like to add the image onto the web page. Click the Insert/Modify Image button and the Image Library will open. The Image Library dialog box appears. Click to select on the left panel the area you added the image to, but selecting the department. Type in the name or department that was used when creating this images data details. When that is selected the images appear. Select the image and the image details appear on the right panel. You can choose the Alignment and also Show Caption on this pane. Click Use This Image. If you need to change a Caption or look at any of the details of an image then click the Edit button and continue to the next area of this tutorial. 28

If you click on Edit the Image Properties window above it will display as shown below. You can see all the image details including the caption. Click the Save And Use button. The image now displays on your web page in the text area as shown below. Note: If you forget the name of your image then go under New, Publishing, Multimedia Manager to find all the images added to Jadu. This list can be large so go to bottom right and choose 80 in the drop down arrow by 10. Notice the Next and page numbers on left. Each image displays on the right column. 29

Adding Images to a Web Page in the Page Text Area as you are Adding Text Images can be added to your web pages as you are adding the text. This tutorial explains how to add an image that has not been added to Jadu previously in the Multimedia Items area. Note: Be sure the name of the picture or image is text only, no spaces or special characters. (Naming Examples: events_2013.jpg or smithphoto.png or jones4.gif) The image size should not be any wider than 670 pixels & JPG, GIF or PNG extensions. In the Jadu Page Text area, place your cursor where you would like to add the image onto the web page. Click the Insert/Modify Image button and the Image Library will open. When adding a new image, click the Upload Image green plus button on the top right corner of the window. Once clicked the Upload Image window will display. Click the Browse or Choose File button to navigate to find the image & click Open. Check the Optimize Image check box. Click Upload. The Image Properties window will display. 30

First select a department (Category) then click the Add Category button. Title: Enter a title for the image. Tags: All keywords are comma separated and are all in lower case, using your department name too. Alternative text box: Enter a short sentence about the image. This text will be displayed when a mouse hovers over the image on the page. Caption: Add a caption in the box if desired Categories: The Category that you added (above) should be listed here. Save and Use: Click on this button. Modify the placement of an Image on a Web Page in the Page Text Area Once an image is on a web and you want to change the placement, double click the image when in the text box. Under Alignment you can choose: Left, Right, Center or Inline. Under Alignment notice the Show Caption option. Click Use This Image 31

Adding a Table to a Webpage Due to embedded styles, tables cannot be copy/pasted into the Jadu Text Editor. Tables must be created and formatted using the Jadu table tools. Click Insert Table. Enter the number of Rows and Columns. Enter the Width of the table (100% or 50% of the page) Keep the Width as Percent. Put a check in for Fixed with columns. Enter the table s Title in the Title box. Enter a Summary for the table in the Summary box. Next to the Header & Footer label, click (show) to add headers for each column and/or footer for the table. See the example below of a Table Header & Table Footer in a table. 32

Click Insert Table and start to enter you table details. Example of Table Header (top row) it has a slight background color. Table Footer (Blank row across the bottom) Once a table has been added the Table Tools icons appear. Hold your mouse over to see the tool details. Below are the details of each tool that can be used within the Table. Button Tool Purpose Insert table Insert a table. Merge cells Merge cells within a table. Insert before Insert a table cell before the one selected. Insert cell after Insert a table cell after the one selected. Delete column Delete table column. Split column Split table column. Insert row after Insert a table row after the one selected. Insert row before Insert a table row before the one selected. Table properties Specify table properties. Split row Split table row. Delete row Delete table row. Highlight row or cell Highlight a table row or cell. Insert column before Insert a table column before the one you selected. Insert column after Insert a table column after the one you selected. Delete cell Delete table cell. 33

Gallery Webpage Multiple Images/Photos Displayed in Gallery Format In Jadu a Gallery is a page filled with images in a navigable, gallery format. We will start creating a Gallery from the beginning by adding all your files first. This tutorial also covers how to add or remove files to an existing Gallery page, edit text, and finally how to add an image caption. Note: If you want to drag & drop files be sure to use Chrome as your browser. Internet Explorer will not allow this function, some versions of Mozilla/Firefox do work. 1. Collect your images into a folder. Files types allowed are: jpg, png and gif. Tips: If these images are on the Dickinson website drag/drop your images (or right click and save picture as) into a folder. Rename these files so that there are no spaces or special characters. The only special characters that are acceptable are an underscore and a dash. Keep notes on what you call your files because you will be adding them to Jadu in the same location as everyone else so searching for them by name will be the way to locate them. Examples of Correct Names of Files: 2013Jones3.jpg or Economics_Jones_2013.jpg or Spring2014_Alumni_Jones.jpg 2. First you need to add your images into Jadu through the Multimedia Manager. In Jadu, click on New, then Multimedia Manager. Note: Recommended browser is Chrome, if you want to drag & drop files. To upload an image file make your browser window smaller to allow the folder of files to opened at the same time to select the files to be dragged by using the Drop your files here method. Otherwise click the Browse or Choose File button to select a file. Note: Drag/drop will NOT work with Internet Explorer. Chrome browser has Choose File button: Mozilla Firefox has a Browse button: Shown below is after I selected 6 images, which I dragged & placed the mouse on top of the Drop your files here area on the page. To do this I have the browser & folder open within the computer screen to be able to see both. Note: Depending on which browser you use it will show Copy or Move as you drag, don t worry, it will only make a copy of your files. 34

The 6 images have been copied & added to the Filename & Progress as Completed. If you need you can Cancel Selected. Otherwise, click the Continue button at bottom of window. Now in Jadu you will need to enter the following details for each image you added. 35

1. Filename: This just shows the name of the file you are working with. 2. Title: The title should have a name and a date. Images cannot have the same. Example: Gardenfest 2012 1 next one Gardenfest 2012 2 & so on. 3. Tags: These are metadata tags. The tag should have the department name, name of the event a year, and the gallery name (Example: german, gardenfest 2012, gallery). This should be in all lowercase separated by commas. 4. Alternative Text: Enter a sentence for the alternative text. This is the text that a screen reader would read out loud for a visually impaired person. 5. Description: The description area can be left blank or copy and paste what was used for the Alternative Text above. If you want a caption under each image you need to do this in a separate step, see the last section of the tutorial for details. 6. Categories: Select a category (Department) by putting in a check in the box (Example: For German, Russian the category is Academic Programs, if they are not listed.) 7. Resize image: Keep as the default Keep original size. 8. Click the Save button when each area is completed. Note: If you added several files Jadu will automatically go to the next file for you to complete each area listed above on 1 through 7. Notice the Skip Item button at the bottom. 36

Now you can start to create your new Gallery webpage. In Jadu click on New, Gallery. 1. Title: Make this 2 or 3 words. This will appear on the top of the browser page. 2. Category: Add 2-5 key words. Always have the department name as a keyword. These should be all lower case and separated by commas. Click Apply Categories. 37

3. Enter Metadata - Enter a description of the gallery. This should be a sentence. Click Assign Metadata. 4. Summary Text - Don t enter any summary text. Now scroll down to start entering text to the Page Content area if you want text at the top of a gallery. Type in text or copy then paste text into Notepad (PC) or TextEdit (MAC). Then copy and paste from Notepad or Textedit into the Jadu text area. Format any text as needed with bullets or numbering or bold, ect. Click the Save button. Click on the Add some now! link to start adding images to your Gallery webpage. Since the images have already been added to Jadu, select the area it was uploaded to such as Academic Programs or Administrative Offices, ect. Use the Search area to type the name of the file then click the Search button or scroll down to see the list of images. Once an image is selected you will see the details as shown below. 38

Once you find the image, select the image by clicking on the name and then click on Use This Multimedia Caption: If you want to add a caption click on the Edit button, add a Caption then Save and Use. Continue to add all your images to the gallery by clicking the Add another item button. See more Caption details on last section of this tutorial. Notice the Remove button to delete any images in the Gallery. You must click in the box above Remove to it to be remove. After you have finished be sure to Submit, Approve & Make Live. Click the orange Submit button in the upper right corner. Click Approve Click Make Live You can now preview your gallery by going to the blue action button and selecting View Live. 39

Adding Files to a Gallery after it has been published & How to Edit the Text. First add images in the beginning of this tutorial to the Multimedia Manager area. Then in Jadu, click on Open, then Publishing, then Galleries. In the Gallery area, all Galleries are listed. Click on Your galleries link to find your gallery. Click the Gallery title (Title Example Gallery) as shown below. You are not in the area with the list of images for the Gallery. Click on Add another image button found at bottom. The Remove button will delete a checked image. To edit the webpage text area, click on the quoted Title in orange. 40

Adding Captions to an Image The easiest method to add a caption is while you are adding images to a Gallery. To add a Caption to an image click on Edit. Type in the Caption details area, Click Save and Use. If you already added your images and now want to add a caption you must open them in the Multimedia Manager area covered in the first section of this tutorial. To find that image click on Open, Publishing, Multimedia Manager. This area in Jadu shows the list of all images for Dickinson s web sites. Notice at the bottom of this page, the list of pages, Previous & Next & the Items per page selection. Click on the Find a multimedia item link (across the top) to open the search dialog bar across the top. Type in the name of your image file you want to find. 41

Click on the image name to open, on Step 5 you can add a Caption. Click the Save. After you have finished be sure to Submit, Approve. 42