working with web pages in infoglue content...

MANUAL 2015-05-26

WP2 (responsive design)

Working with web pages in Infoglue Content Management System

A short technical introduction to the InfoGlue web tool at Uppsala University

Responsible: Therese Hedberg InfoGlue User Support Office of User Support and E-learning Uppsala University

Table of contents OVERVIEW ....................................................................................................................................................... 1

TWO DIFFERENT WEB DESIGNS .................................................................................................................................... 1 THE USER INTERFACES OF INFOGLUE ............................................................................................................................ 1 AS AN INFOGLUE CMS USER YOU ARE PART OF A CONTEXT! .............................................................................................. 1

HOW TO CREATE AND EDIT A PAGE .................................................................................................................. 3

THE BASICS ............................................................................................................................................................. 4 English version of the page and an article ...................................................................................................... 4

HOW TO CREATE A PAGE IN THE STRUCTURE TOOL ........................................................................................................... 4 HOW TO CREATE A FOLDER IN THE CONTENT TOOL .......................................................................................................... 5 HOW TO CREATE AND EDIT AN ARTICLE ......................................................................................................................... 5

Creating an article .......................................................................................................................................... 5 Editing an article ............................................................................................................................................. 6 The Edit dialogue ............................................................................................................................................ 6 English version ................................................................................................................................................ 7 Format the text ............................................................................................................................................... 7 Links ................................................................................................................................................................ 8 Link to files ...................................................................................................................................................... 9 Images ............................................................................................................................................................ 9 File names ..................................................................................................................................................... 10 Add Table of Contents in an article ............................................................................................................... 11

HOW TO PUBLISH YOUR CHANGES ................................................................................................................. 12

NEED HELP? .................................................................................................................................................... 13

COURSES .............................................................................................................................................................. 13

1

Overview

The purpose of this guide is to get a brief overview on how to use InfoGlue (IG) - the common web tool at Uppsala University - and its full CMS (Content Management System) mode in responsive design (WP2 – Web Package 2).

This guide is a short English version of the original document, which is used at the InfoGlue courses at the IT department.

Two different web designs When www.uu.se completely changed its look in November of 2013, the new responsive design (WP2) was launched. Many of the other web sites at Uppsala University is now in the middle of making the transition as well.

An important aspect of the change was to meet the needs of mobile devices and their different screen sizes. The ability to automatically adapt to different screens is called responsive.

The user interfaces of InfoGlue InfoGlue consists of two different user interfaces. The simpler of the two is called EOS (Edit On Sight). The EOS user interface gives the user limited access to functions, but is in return fairly easy to use. EOS is intended for writers of texts, and not for those who need to create new pages.

The full CMS mode is intended for editors and web masters, who are able to create, move and delete pages and their content, and also publish them. This manual discusses the full CMS mode, and focuses on how to create and edit article components. Other types of components include image puffs, calendars, publication lists, education lists for courses and programmes, news, employee lists, and so on. One web page can contain several components.

As an Infoglue CMS user you are part of a context! No matter if you are responsible for only a few or many pages of a web site, you must inform yourself about the rules that apply to the information you publish. This is why a close collaboration between writers, editors and the web master is required.

Most important of all is that every contributing actor knows the target group or groups of the web site! What do they want to know, and what do you want them to know? And most importantly, which target group that is the primary.

© Therese Hedberg, InfoGlue User Support, Uppsala university 2015-05-26 InfoGlue CMS WP2

http://www.uu.se/

2


3

How to create and edit a page

Content and structure are separated in Infoglue, which means that the information shown on the pages (content) is managed separately from the layout and site navigation flow (structure). This division is very important to understand when working in InfoGlue. The structure tool (accessed through the STRUCTURE menu item) is where you create pages, and the content tool (accessed through the CONTENT menu item) is where you put articles (texts), images and so on. The page and the content are then connected by components (e.g. an article component) that reside on pages. The content of a component can be created and edited from the structure tool, but is always stored in the content tool. When a web page visitor clicks on a link to a page, the page and its content are put together: Structure tool

Content tool

An article component that connects an article from the content tool to the page in the structure tool


4

The basics When working in Infoglue, these are the basic steps: • Log into InfoGlue at http://admin.webb.uu.se • Create a new page in the structure tool and (usually) a corresponding folder in the content tool

AND/OR • Add components for content (texts, images, videos, etc) to a page

AND/OR • Create/update content, such as text, files and images • Preview the page • When satisfied: publish the page

Important! Always have a dialogue with the web master when creating pages and folders!

If you want to change the default language in InfoGlue, click on the in the upper right corner, choose My settings (“Mina inställningar”), change language and save.

English version of the page and an article Swedish is the default language for pages and articles. If a page has an English version, you see the link “This page in English” at the top right of a page. If there is only an English version of a page, it is shown directly when you open the page. If you wish to edit only the English versions of a page and its content, it can be accomplished either by changing language to English in the drop down menu in the structure tool, or click on the link mentioned above. You can also access the English version of an article from a Swedish page, by changing to the English tab after you have opened the article for editing.

How to create a page in the structure tool Pages are created by clicking on the Create-menu item in the upper toolbar, while in the structure tool tab. The page is placed one step below the page that is selected when clicking the Create-button. Fill in the page name, title etc, and choose page template, in the window that opens. You can fill in information for both the English and the Swedish versions of the page here, or do that later. Name: the internal Infoglue name of the page. If you write something here first, the other fields are automatically filled (but editable). Title: Page title used by search engines when indexing web pages Navigation title: the name used in navigation elements such as menus Nice URI: the web page address of the published version of the page (avoid changing after go live!) Page responsible Email: the contact person shown in the page footer.


http://admin.webb.uu.se/

5

How to create a folder in the content tool When creating an article in an article component, you can choose to place the article in an existing folder, or create a new one, from within the article dialogue. You can also create a folder directly in the content tool. This is done by placing your mouse pointer over the Create button while in the content tool tab, and then clicking on the Create folder menu item. The folder is placed one step below the folder that is selected when clicking the button.

How to create and edit an article When you create a new page, an article component is added by default.

Creating an article If you want to create another article, or a new article on an existing page, you need to add an article component to the page in question. This is done by clicking on a +-sign on the page where you want the article to be placed. The article can later be moved up or down to a new position.

An article can be created from an article component by clicking the Create link: 1. Click on Create (“Skapa”) 2. Choose where to put the content, 3. Click Next, 4. Choose a name for the article 5. Click Next 6. Start writing If there already exists a text which you want to place in the article, you simply click on Choose (“Välj”) and browse for the content. Be aware, that if you choose to place an existing text in the article, and you edit it, the changes will have effect in every page that contains the article! You can double check where the text in used if you click the tab named References.


6

Editing an article If you create a new article, the edit dialogue is opened automatically. If you wish to edit an existing article, there are two ways of opening an article for editing: either double-click on the text, or click on Edit (“Redigera”) under the text. When you double-click the text, you edit “inline”, whereas if you choose the Edit-link a modal window opens.

The Edit dialogue

Article in the modal edit window.

A. Title If the article is the first on the page, its title1 should have the same wording as the link that leads to the page. Sometimes the title needs to be elaborated to be fully understandable. Never write a title with only one word!

B. The toolbar see description on the following page

C. The full text is where you write or paste text.

1 The title has high value for search engines such as Google. Make sure it describes the article/page


7

If you paste text from another web site, it is ”washed” which means that only correct formatting (according to InfoGlue) is inserted.

You can choose to paste text as plain text - i.e. without formatting. To do so, choose the right-most paste button.

English version An article can exist in both Swedish and English. Swedish is in most web sites at Uppsala University the primary language.

How to create an English version If there is no English version of the article that you want to edit, you can create one. How you do that depends on whether you click on Edit (“Redigera”) on a Swedish or an English page.

• If you click on Edit (“Redigera”) on the Swedish version of a page, you create the English version by choosing the English tab in the edit dialogue. Make sure that the creator of the page has made an English version of it, or your article text won’t be accessible by the web site visitors!

• If you on the other hand click on Edit on the English version of the page, you are directly prompted to create an English version of the article by clicking Save.

Format the text

The styles in the drop down list are used for all “structural” formatting: titles, ingress and body text.

To create titles, use Subtitle (h2) and Paragraph title (h3). It is preferable that h2 comes before h3. (H1 is the title of the article.)

Paragraphs are either made by using the option Body text (p) or by pressing the Enter key.

Ingress is used for a short summary directly beneath the title (i.e. the first paragraph in the full text).

There is also an inline style for quotes.

When numerating, use lists! The numbered list is useful for when you specify a quantity of something, or use the bulleted list. To make an indented list, click the Increase indent-button.

To enhance something, use bold and italic formatting. You cannot use different font colours, sizes or underline.

Paste buttons

Indented list.


8

The toolbar The toolbar contains the following buttons:d

The article toolbar B Bold text (html code: <strong>). Never use for titles! Format as title instead. I Italic text (html code: <em>) Avoid writing long texts in italic.

Indent to the right. If possible, the button for Indent to the left is visible. X2 Subscript

X2 Superscript Create a link and upload files

Create an anchor as a target for an anchor link Insert an image Insert a table

Horizontal line between paragraphs (html code: <hr />)

Insert special character Numbered list

Bulleted list Block quote (there is also an inline style for quotes, found in the drop down list for styles)

Paste formatted text Paste as plain text (all formatting is deleted)

Expand the text field. VERY USEFUL! Undo

Redo

Links To make links in the article text: write and mark the link text to be, and then click on the link button ( ) in the toolbar.

The link dialogue opens (see screenshot) with the Link Info tab active. First, choose type of link:

• URL: ordinary link • Link to anchor in the text: internal link within an article – can be

used if you have made an anchor beforehand • E-mail: for e-mail addresses

The Choose from InfoGlue button is used to make internal links to other pages on the website. The URL is created by InfoGlue (see below). An internal link made by InfoGlue is dynamic; it always finds its target, even if the page is relocated. Because of that dynamic feature, when making internal links, always have InfoGlue make the links for you and never copy the URL from your web browser.

.

In the Title field you can specify additional information about the link. It is displayed when the visitor hovers the mouse pointer over it.

The link dialogue


9

The Target tab gives you an opportunity to decide in which web browser window the link is opened. Usually this is left on <not set>. The Upload tab handles files, which you can read more about below.

Make links that make sense Links in the running text, references and so on, must be easy to understand even »out of context«. Visitors with reading aids can for example choose to have all the links read to them. Links such as “Read more” become totally incomprehensible since they need a context to be understood!

WRONG: Click here. Read more etc. RIGHT: Read more about blablabla blabla

It is a good habit to make links in the running text that point to the same pages as the menu. If the article is shown on another page (or in a mobile device where the menu has changed), a request to “Read more about our project by clicking on the left hand menu” makes little or no sense. Another example of thinking out of context!

Link to files To make links to files: 1. Mark the link text and click the link button 2. Choose the Upload tab, browse to your file and click on Upload. 3. In the Link Info tab: Choose the right file icon in the Link style drop

down (since it is preferable that the visitor who clicks the file link is informed that the link leads to a file and not an ordinary web page), and choose language if you want to make the file readable by reading aids (only for pdf files!).

The file is now uploaded to your article, and can later be found when you open an article and choose the Files tab. It is also possible to link to files already existing in InfoGlue (that is on another page or in a content folder). To do so, click on the button named Choose from Infoglue and then the Link to internal file tab.

Images All usage of images must be discussed with your web master!

To insert images in running text, use the image button in the toolbar. An image dialogue is opened (see screenshot) with the Image Info tab active.

The Upload tab.

To make a pdf icon and the document readable by reading aids


http://x/

http://x/

10

• The URL field: here you can specify the URL to an image on the web (outside of InfoGlue).

• The Choose from InfoGlue button: this buttons gives you the opportunity to use images that are already uploaded

• The Alternative text field: see description below • Width Height: Do not use! You should adjust the size of the

image before uploading it. • Alignment: if you want to place the image next to the text, or in

the middle • Add image caption: a text underneath the image, useful for

copyright information but also for brief descriptions

The Upload tab is where you go to upload the image to the article if you don’t use the Choose from InfoGlue option.

Alternative text for those who cannot see the image For visitors with slow Internet connections, and – more importantly – for people who cannot see the image, you have to describe the image. This is done in the Alternative text field. Make it short, for example “Group picture of the department staff”.

Inserting an image The procedure of adding an image to an article is the same as adding a file used in a link (see previous section).

To keep in mind when using images Use images! They give life to the content. But remember:

• Always process your images before uploading them • Adjust the image size to where you plan to use it • Make sure that the image quality not is too high (which can make the file size large) • Alternative text is mandatory • Add an image caption where possible

Read more about image quality on our support web site (in Swedish).

File names • Use: a–z, 0–9, - (hyphen) • Never use: spacing, period, slashes • Be careful with underlines (_), use hyphen instead (-) • Tip: give the file a descriptive name, seach engines like that!

Extra: How to update an image or a file When you need to update a file or an image, you can change the file instead of uploading a new one. This is accomplished by clicking on the Files tab when you have an article open for editing. The Change file button is then used to change the file. The keyword must be the same as the previous file, and you don’t need to make any changes to the article!

The image dialogue.

Update a file


http://support.webb.uu.se/sidinnehall/bild-bilaga/bildkvalitet/

11

Add Table of Contents in an article If you have a long text you can place a table of contents just below the title. This is accomplished by right clicking somewhere in the article text, choosing Properties, and then Yes next to the field Show table of contents. The table of contents is created from your titles in the text.


12

How to publish your changes

Saving is not enough. You have to publish your changes for them to have effect. Before publishing, the pages can be previewed by clicking Preview in the upper menu.

Publishing is done with the Publish button. Depending on your InfoGlue role, you either is allowed to publish directly, or you need to fill in the e-mail address to somebody who has publishing rights:

A writer cannot publish directly, like an editor or a web master can. When publishing is initiated from the structure tool, everything that has been updated in the page, as

well as the page itself, will be listed. Select the objects that you want to publish.

Part of the publishing dialogue.

After publishing, always verify the result (Menu -> View published)! Normally it takes about five to six seconds before it is visible externally.


13

Need help?

If you need help or come across strange behaviour in InfoGlue that might be software bugs, turn to your web master (WPA). He or she will then contact our support if needed, which preferably is done from within Infoglue by clicking on Menu->Ask/report.

Courses We also have different courses in InfoGlue (in Swedish), which are announced on http://support.webb.uu.se/ig-kurs


http://support.webb.uu.se/ig-kurs

working with web pages in infoglue content...

Documents