eos wp2 for writers - infoglue...

MANUAL 2015-05-21

EOS (Edit On Sight) responsive design (WP2)

EOS WP2 for writers 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 TWO DIFFERENT USER INTERFACES OF INFOGLUE ...................................................................................................... 1 PREREQUISITES TO WORK IN EOS MODE ....................................................................................................................... 1 AS AN EOS USER YOU ARE PART OF A CONTEXT! ............................................................................................................. 1

HOW TO EDIT THE CONTENT OF A PAGE .......................................................................................................... 3

EXAMPLE PAGE ........................................................................................................................................................ 3 English version of the page and an article ...................................................................................................... 4

HOW TO EDIT AN ARTICLE .......................................................................................................................................... 4 Open for editing .............................................................................................................................................. 4 The Edit dialogue ............................................................................................................................................ 5 English version ................................................................................................................................................ 5 Format the text ............................................................................................................................................... 6 Links ................................................................................................................................................................ 7 Link to files ...................................................................................................................................................... 7 Images ............................................................................................................................................................ 8 File names ....................................................................................................................................................... 8 Add Table of Contents in an article ................................................................................................................. 9

DELETE TEXTS AND PAGES .......................................................................................................................................... 9

HOW TO PUBLISH YOUR CHANGES ................................................................................................................. 10

NEED HELP? .................................................................................................................................................... 11

COURSES .............................................................................................................................................................. 11 DON’T HAVE YOUR EOS WEB ADDRESS? ..................................................................................................................... 11

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 Edit On Sight (EOS) 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 two different user interfaces of InfoGlue InfoGlue consists of two different user interfaces. This guide discusses the simpler of the two, 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.

Prerequisites to work in EOS mode To be able to update content in EOS smoothly, a web page editor (called Redaktör) or web master (called WPA - webbplatsansvarig) must have created the page, and preferably its article component(s), first (an article component is in InfoGlue a holder for text and images).

As an EOS user you are part of a context! Although your task is to update the texts of one or a few pages inside 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.

If you are not completely sure how or if to make an update, always contact your web master (WPA).

Most important of all is that every contributing writer 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-21 InfoGlue EOS WP2

http://www.uu.se/

2


3

How to edit the content of a page

When editing a page, just follow these simple steps: 1. Log into InfoGlue at the web page address provided by your web master 2. (Go to your page if the logon process hasn’t automatically led you directly to it) 3. Open the text you want to edit 4. Update the text and/or images 5. Save 6. When satisfied with your changes: publish the page

If you want to change the default language in InfoGlue EOS, go to http://admin.webb.uu.se/infoglueCMS/ViewMySettings.action?KeepThis=true, change language and save. Choose Avbryt (Cancel) in the popup window. Reload your EOS-window. (If you choose ”Ja - ladda om” (“Yes – reload”), no worries, just close the window that opens.) The EOS mode is also accessible through the CMS mode. The CMS is accessed at this web address: http://admin.webb.uu.se. Click on the square button on the upper right hand (see screenshot).

Example page This is an example of a page in InfoGlue EOS:


http://admin.webb.uu.se/infoglueCMS/ViewMySettings.action?KeepThis=true

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

4

This is what you see: A. The uu.se header B. The local left hand menu that lead to the different pages of the web site C. An article (texts reside within articles in InfoGlue).

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 an article. 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 articles, there are two ways of doing so. Either click on the link mentioned above, scroll to the desired article, and open it for editing. Or change to the English version after you have opened the article for editing. How you open an article for editing is the topic for the next section.

How to edit an article Before making changes to an article, you need to open it for editing.

Open for editing 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.

If there is no text associated with the article, follow these instructions: 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.


5

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. 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 English on the upper right hand of the Edit dialogue (see screenshot). 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.

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

Paste buttons


6

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.

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

Indented list.


7

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 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 link dialogue

The Upload tab.


http://x/

http://x/

8

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 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!

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

The image dialogue.


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

9

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!

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.

Delete texts and pages If you need to delete pages and/or texts, talk to your web master!

Update a file


10

How to publish your changes

Saving is not enough. You have to publish your changes for them to have effect. Publishing is done with the Publish button, or by right clicking and choosing Publish. 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, 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.

Discuss with your publishing responsible how the publishing should work!

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


11

Need help?

If you need help or come across strange behaviour in InfoGlue that might be software bugs, turn to your web master (WPA) first. He or she will then contact our support if needed.

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

Don’t have your EOS web address? If you haven’t received the address to your web page in InfoGlue EOS, ask your web master (WPA) He or she can also find more information about this on our web support pages at http://support.webb.uu.se/EOS/ (in Swedish


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

http://support.webb.uu.se/EOS/

eos wp2 for writers - infoglue...

Documents