9/28/2020

1

Marketing & Communication NL: www.utwente.nl/websitesEN: www.utwente.nl/en/websites

BASIC SLIDESWEBHARE

IN THIS PRESENTATION:BASIC COURSE SLIDES (1-14)

1. LOGIN/ PERSONALIZATION

2. PUBLISHER OVERVIEW/SCREENS

3. RULES FOR FILES & FOLDER NAMES

4. NAVIGATION / MENU

5. WORKING WITH THE EDITOR

6. INTERNAL / EXTERNAL LINKS

7. (ALL) FILE EN FOLDER TYPES

8. IMAGES / VIDEO

9. HEADER AREA

10. SEARCH ENGINES / READABILITY

11. ENGLISH VS DUTCH WEBSITE

12. LAWS: ACCESSIBILITY & PRIVACY

13. NEO: CENTRAL UT NEWS/EVENT SYSTEM

14. FREQUENTLY ASKED QUESTIONS

15. CONTACT/SUPPORT INFORMATION

EXPERT COURSE SLIDES (1-22)

16. INLINE COMPONENTS

17. WIDGETS

18. FOOTER

19. WEBSITE ANALYTICS

20. WEB FORMS / SIGN UP FORMS

21. INTRANET OPTIONS

22. SOCIAL MEDIA

23. OTHER TIPS

1

2

9/28/2020

2

1. LOGIN/ PERSONALIZE ACCOUNTURL for login: webhare.utwente.nlUsername: UT account (email address)

WebHare start screenPublisher to edit websitesNEO to add news and events to your site

only visible if your site is connected to the NEO-systemUser Management to grant rights

only visible if you are allowed to grant rights to othersOther applications: for a small user group, not in this PPTRight side: updates/contact information

SettingsClick your own name on start screen to change your personal settings:• Language preference (NL/EN)

2. PUBLISHER OVERVIEW/SCREENS

3

4

9/28/2020

3

2. WEBHARE OVERVIEW/SCREENS

2. WEBHARE OVERVIEW/SCREENS

5

6

9/28/2020

4

3. RULES FOR FILES & FOLDERSName (shown in the URL):

Allowed: • Lower case letters / numbers• Special characters: ( ) -• Space: use - between your words

Not allowed:• No space• No capital letters• No other special characters (&%@ etc)Keep the extension (.pdf, .docx, .ppt, etc.) when uploading a file!

Title (shown in the menu): • No specific rules, but keep it short to fit in the menu!• Title not filled in: file or folder not visible in the menu

(but you can find it on Google please delete old files!)

3. RULES FOR FILES & FOLDERSHeader title (H1)• Can be longer than the title field, max 2 lines of text• Placed in the header of the page (above the text area)• If empty, the title is shown

SEO title (optional/advanced)• A different title visible in a list of search results (like

google.com) to better match the words your customers use/search for

Index file• How to recognise: marked green and has an arrow• About the index file:

• Index file is the first file that is opened when someone clicks the folder

• Index file is first file in the menu• No index in a folder? Folder not clickable, therefore

removed from the menu

7

8

9/28/2020

5

4. NAVIGATIONMenu (black, on the left)• All files and folders (with titles) are placed in the menu• One exception: folder type ‘content listing’: files and folders are placed in the

menu AND in (below) the main text area below the index file text• Important: Always use the menu for navigation (=title of file), prevent webpages without titleTip: Too many menu items on deepest level of menu (like a list of 10 student assignments, projects, etc)? Use ‘content listing’ folder type to show them in main screen and hide them in menu (properties of folder > content related > hide subitems in menu).

Content overview within a webpage• Subheadings (heading 2) are listed on the right next to the text• Helps people see what’s on the page use lots of subheadings on your page• Don’t be afraid of longer pages: scrolling (especially on touchscreens) works better

and faster than clicking and reduces menu levels

Change website ordering of files• Select website ordering above the file list

(other options below the line sort in WebHare for you, but not on the website)• Use arrows to change ordering or use your mouse to move an item

5. WORKING WITH THE EDITORSteps for creating a new text page1. Go to the folder where you want to create a text page (select that folder with one click)2. Click New file (NL: nieuw bestand) in the left upper corner3. Choose Rich Text Document4. Fill in name & title and save your file (the file is not published yet, has a red bar symbol)5. Double click the file to open the text editor and add content (type your text or copy/paste with ctrl+C; ctrl+V)6. Check if all styles are correct (all major subheadings heading 2, all bullets real bullets and not - symbols, etc)7. Hit save (opslaan) to save it for you, and hit publish (publiceren) to publish it on the internet

(you may skip the save button if you directly want to publish)

9

10

9/28/2020

6

5. WORKING WITH THE EDITORButtons/options in the text editor1. Style: normal text, heading 2 (sub heading between paragraphs), etc.2. Change properties (of an existing link, of an existing picture, etc.)3. Add a link 4. Add a picture5. Add a video (from YouTube or Vimeo)6. [Add an inline element] advanced feature (slide topic #15)7. Add a table: only for small tables up to 3 or 4 columns

• Right click for properties like: • Changing the style of the table/adding a black title row• Deleting the table• Getting space below and above the table• Adding/deleting columns and rows

• No merging of cells, only full columns and full rows

Save and publishSave: Saves your text (as a draft), but does not publish on the internetPublish: Saves changes AND publishes your changes on the internet

11

12

9/28/2020

7

6. INTERNAL/ EXTERNAL LINKSCreate different types of links on words in your web text• External: URL to a webpage outside your WebHare (URL: https://...) > URL history will forward you if

link has changed; if link is broken > error message• Internal: point to a file in your WebHare (button: browse to find the file) > Link changes automatically

when destination gets new location/name; if link is broken > nobody will ever see there was a link• Osiris code links: opens Osiris course information in WebHare, links update automatically each year

Tips: • Put links on relevant words (never on click here) in the text so people can easily

click through (on a smartphone people don’t see the menu so this really helps!)

[Advanced] 3rd type: content link in navigation• Automatically changes and keeps working like an internal link• Difference: copies the text into your website, instead of linking to another website

[old] Internal/external links in menu/navigation• As a new item in the menu (only available for admins > use can be confusing for visitors as the menu

jumps to a different location in utwente.nl)

7. FILE TYPES AND FOLDER TYPESFile types• Rich Text Document: create webpages • Content link:duplicate content that’s located somewhere else and keep it in sync• Forms: to create web forms (see 20.)• Table with filter: like UT ABC list (www.utwente.nl/abc)• News/events: placeholders voor news/events added in NEO• Uploaded files: Word, PDF, PPT, etc (user will download these). Tip: place them in an inline component ‘Downloads and links’

Folder types (some folders have additional folder properties)• Normal: normal folder for another level (deeper) in your menu• Content listing: to create list of files/folders in your main text area, will be shown below the text of your index file

• Use if you have some main categories and files (years as main categories, meeting minutes as files)• Picture gallery: add pictures to this folder to create a picture gallery (resize your images first, zie #8)• People Folder: a who-is-who page (for options, see folder properties, ‘people’ tab)• Timeline folder: to present your history or a story line• [widgets: one folder to store all your widgets/banners, see slides #16]• [footer: one folder to store your footer links and setings, see slides #17]

13

14

9/28/2020

8

8. IMAGES/ VIDEOImages• In the text editor by using the image button

(Double click image for settings like image size)• In the header (see next sheet)

Video• In the text editor by using the video button

(video’s should be uploaded to YouTube or Vimeo first)• Try to prevent embedding with raw html: video will not resize on small screens

[Advanced options]• In widgets (blocks under your page) > see topic #15• In inline components (in between your text paragraphs) > see topic #16

Picture size• Pictures from camera’s may be very large > download a little easy tool to your desktop from

www.utwente.nl/en/websites > images/video > resize pictures > button halfway the page• Drag and drop a picture to that tool to resize files

9. HEADER – DEFAULT This is the default header.• Every time a page opens another UT universe element is shown. • The element's color is slowly changing and the element is moving.

Text/navigation on the header:• Big header title (heading 1 on your page; may be removed on your homepage)• Breadcrumb (NL: kruimelpad) above header title: path from your homepage to where

people are now to easily navigate back to higher levels with one click

15

16

9/28/2020

9

You can upload one or more pictures in the header. Two or more pictures create a picture slider.Properties of a file or folder > Header tab > add/toevoegen.Picture size: at least 1500 pixels, better 3000 pixelsDefault: large picture; checkbox to reduce image height

Tips• If heads are cut off, use the reference point option to mark the most important

part of your picture. > Details on next slide. How many pictures? Suggestion: Use on picture on your homepage (maybe also second level) and set pictures always on single pages.

• Never upload pictures with text. On smaller screens half of the text will fall off or will be behind the header title.

• Use the one-click-tool (chapter 8 of this presentation) to resize your pictures for the web before uploading. Will resize .jpg images to about 0.6 MB instead of 1-20 MB.

9. HEADER – IMAGE

Use the WebHare picture editor to • Crop globally and set a referent point on the most important area (e.g. a head of a person)• see if your picture size meets the requirements Details: utwente.nl/test/website-default > content area > pictures.

9. HEADER

17

18

9/28/2020

10

You can add a call to action button (‘sign up now!’) to the header. Properties of a file of folder > CTA tab > fill in the fields (with or without button).

9. HEADER

10. GOOGLE SEARCH & READABILITYFollow these tips to make sure that• Google can find your site• People can easily read your content and find what they are looking for

Tips• Use a good heading structure (only use Heading 3 after a Heading 2)• Use relevant words for names, titles, header titles, sub headings (between

text paragraphs). These elements are keywords for Google• Keep text paragraphs short (not more than 10 lines)• Use lots of sub headings between your paragraphs

(this helps people finding the content they are looking for without reading the whole page)• Keep it short in general, people don’t like to read on screens• Use bullets (like this list) of 1,2,3 lists for a list of items• Add pictures or other relevant elements (a button instead of simple link when you ask

people to sign up)• When creating links, do not put the link on general words like click here, but on words that

tell you what the link is about (Example: www.utwente.nl/mesaplus).• When other websites link to your site, it helps to be found in Google

19

20

9/28/2020

11

11. ENGLISH WEBSITE VS. DUTCH WEBSITE“My website visitors can read English, therefore I have an English website.”That’s not how the internet works….

Why is having both languages important?• Most visitors reach your site through Google• Google presents search results in the language people search in

(one Dutch word in the search presents mainly Dutch websites)

How to set it up without double work• Primary site (mostly in English), completely filled• Secondary site (in Dutch), just one page

(with important words what your site is about and a link to the EN version)

UT default set upEnglish site: www.utwente.nl/en/designlabDutch site: www.utwente.nl/nl/designlabShort link: www.utwente.nl/designlab > Choose yourself if it links to the NL or EN version

(everybody can get a short link with utwente.nl/…, based on availability/logic URL)

12. LAWS: ACCESSIBILITY & PRIVACY Accessibility: Government sites need to be accessible for everybody (www.utwente.nl/en/websites > Standards > accessibility)We need to make our websites available for people with different (physical) limitations. Some examples:• Visual limitations: websites must be readable by ‘read out loud’ tools for blind people.

• Never open links in new tab or new screen• Always give images an alternative text (specific field available) • Downloadable documents (Word, PDF, etc) need to be optimized for those tools

• Movement limitations: all buttons in WebHare have a certain minimum size for people with shaky hands (Parkinson)• Do not build or create own buttons/navigation or other features, use the options provided (they always meet the requirements)

• People who only have a smartphone: websites need to work (page/text has to scale/resize on smaller screens) • Do not create own pages outside the UT website template

Privacy: GDPR (Dutch: AVG) and Telecommunication laws (www.utwente.nl/en/websites > Standards > privacy/GDPR basics)• Save personal data only if and as long as you really need them / use data only for the purpose provided. Some examples:

• Webform settings: change the default value of 800 days to a couple of weeks/months• Only send people the type of email they asked for/offer option to unsubscribe. Newsletters: only after active opt-in by user.

• Cookies: visitors need to agree before we set cookies, do not put snippets of HTML code in your website (they might use cookies)• Example: when adding a YouTube video, do not use the HTML code YouTube provides. Use the video-button in WebHare.

• Photos: people need to agree if their photo is placed online (even intranet). For who-is-who pages use the people folder because then it only shows photo’s of people that have agreed to show them)

21

22

9/28/2020

12

13. NEWS/EVENT SYSTEM (NEO) Why using NEO• Place a news item (or event) once in a central system, even if it has to be placed on four

different websites• Easily add news/events from other websites to your site• Easily add a second language version without uploading pictures etc. again

How the user rights work:• The WebHare team needs to set up the NEO connection for your website once• Everybody with rights for NEO can see ALL news and events• The organization that placed it (e.g. MESA+) is the only one who can edit• Everybody else can add the item to his own site (but cannot change it)

13. NEWS/EVENT SYSTEM (NEO)

23

24

9/28/2020

13

14. FREQUENTLY ASKED QUESTIONSI changed something but on the website I still see the old version• Did you only hit save and not hit the publish button in the editor?• When viewing the website, hit the F5 (refresh) button on your keyboard (computers sometimes show earlier versions

because they have saved them on your computer) or Ctrl + F5 (hard refresh)• Open a browser (Firefox, Chrome, Internet Explorer) you never use (that has not saved this webpage in the past)• Send the webpage/folder/whole website to the internet again (on the left screen, select a file or folder and use the

right mouse button > republish/herpubliceren)• Is the file still busy updating (yellow dot) or has it finished updating (green check mark)

I added a file/page but I don’t see it in the menuDid you forget to fill in a title? Try the answers of the first question above. If your menu is not updated yet on some parts of the website, republish your website (left screen, right mouse on globe).

How do I change the ordering of files/folders on my website?This is explained in chapter 4 of this presentation

Where can I find some examples on what options I can use?www.utwente.nl/test/website-default: this site is also available in WebHare:

15. SUPPORT AND CONTACT INFORMATION

ContactServicedesk Online MediaE-mail address: onlinemedia@utwente.nlPhone number: 5665 (+ skype chat)

Support documents• Manuals and tips:

• English: www.utwente.nl/en/websites > webhare/websites > UT default template• Dutch: www.utwente.nl/websites > webhare/websites > UT standaardtemplate

• Test websites with examples (also available in YOUR WebHare)• 2016 style instruction/examples: www.utwente.nl/test/website-default• Example website research groups: www.utwente.nl/test/vakgroep• Example website study programme: www.utwente.nl/test/programme

25

26

9/28/2020

14

Slides starting here are topics for theexpert WebHare course 

EXPERT SLIDESWEBHARE

15. INLINE COMPONENTSWhat is an inline component?A special item (other then basic text/picture), that can be added within your text page.

What inline components are available?• Button (call to action, CTA)• Contact information loaded from people.utwente.nl• FAQ (including a feedback form)• Accordion content (let the user fold the content open)• Text box with a paperclip• Embed publications from Pure• Etc.

How do I create an inline component?• Hit enter on the place in the document where you want your inline component.• Add your online component:

• Video: hit the filmstrip button > YouTube/Vimeo > search for the video.• Other components, hit the {…} button and choose the a component to embed

Tips• Edit/add space above/under the element: mouse over grey area > right upper corner icons• More examples: www.utwente.nl/test/website-default > widgets/ inline components > inline components

27

28

9/28/2020

15

16. WIDGETSYour own widgets vs. UT widgets• Option 1: use the widgets provided by the WebHare team: contact information, campus map,

UT video, UT magazine, building widgets for route information, etc.• Option 2: create your own widgets in the ‘widget’ folder of your stie

How to create your own widgets• Find out what type you need: www.utwente.nl/test/website-default > widgets > types• Your website should have a widget folder named ‘widgets’, create all widgets in there

• Create one (choose a type), fill in name and save• Double click the widget to edit

• Go to the file or folder where you want to show widgets and link them to your page• For option 1: folder ‘UT_central’: UT widgets > choose language > folder• For option 2: folder ‘widgets’: your own widgets

Two ways of linking widgets to your page• Under your page: go to file/folder properties > widgets [many next to each other]• Place them as inline component (see 15) [max 2 next to each other, in line with text]

Tips• For UT widgets available see www.utwente.nl/test/website-default > widgets > for reuse• Waterfall system: placing widgets on a folder places them in all subfiles until you stop them

(by defining other widgets or choosing ‘don’t show widgets’)

17. PERSONALIZE THE FOOTER AREA Campus image with contact information• Image: focus on building (ask Online Media)• Contact block: change it yourself

(website main folder > properties > footer tab)

Black area with links Add footer folder to site (type: footer; name: footer)• Link columns: add subfolder in your footer folder,

create links (internal/external) in there• Social Media: open folder properties; show UT

social media channels, hide or show own• UTwente service block: open folder properties;

show UT links like contact, vacancies, route, etc• Images/logo’s: open folder properties; present a

slideshow of partner logo’s

Tip• Footer links should be related to your website (they help your search engine ranking)

29

30

9/28/2020

16

18. WEBSITE STATISTICSGoogle Analytics options (GA)• For one time use, request a PDF overview • For regular use, request one of the two:

• PDF file in your inbox (weekly, monthly, etc)• an own GA code and access (with your own Google Account)

to monitor your site

www.utwente.nl/websites > Other systems > Google Analytics

Tips• Don’t take numbers too serious; many people block these kind of tools• How to interpret them:

• change information on your site and see if numbers go up or down• compare one page to another to see what’s more popular

19. WEBFORMSCreate a file of the type ‘form’ to integrate a web form in your page.

Features• Easily create a web form without programming• Automatically sends an email to you and the attendee• Stores all information online (download Excel file), by default for 800 days

Tips• Anti-spam field is automatically shown outside the UT

(you will not see it when on UT network or logged in)• ‘Dependencies’ tab of the question allows you to hide other questions

or groups of questions based on previous answers• Long questions? Choose form settings > mobile layout • Add form handlers:

• Email to visitor (with own text and/or filled in results)• Email to you/organizer (with own text and/or filled in results)

>>> For more tips and instruction see www.utwente.nl/webforms

31

32

9/28/2020

17

20. INTRANET & LOGIN OPTIONSMake file inaccessible outside the campus• Create a folder ‘intranet’ or ‘intra’ • Place all files in this ‘Intranet’• [We don’t protect files separately]

With login• Request login for a certain URL (and do not change your URL!)• Options:

• M of S numbers• Departments or LISA-mailing lists in Outlook (new members get access

automatically)• Local account ‘projectABC’ with own password if no other options possible

• Problem: one UT user per browser; you cannot use the local account when logged in with your m number on another tab

• Solution: use incognito tab in your browser

21. SOCIAL MEDIASummary of options• Share buttons below every text/page: let people share your content on their social media• Follow us buttons in the footer: let people follow your accounts• Widgets:

• Twitter widget: show tweets from account or #hashtag• Facebook widget: promote your page• Contact widget: show organization’s accounts• Contact person: show personal accounts

• Inline components: • Person contact with LinkedIn or Twitter profile

33

34

9/28/2020

18

22. OTHER TIPSURL history • Renaming or moving a file will not cause broken links because URL history will automatically forward visitor to the new page URL• View URL history for a page or manually add pages to URL history (e.g. after deleting files): menu (right upper corner, edit, url history). For details: google

‘utwente url history’.

Language switch• Connect folders to each other to create a language switch (e.g.: the website folder and all main folders in you site, NL>EN; EN>NL)• Properties of a file or folder > content related tab

Use shortcuts in WebHare• See the menu (right upper corner) for more options and shortcuts

• CTRL SHIFT G: go to URL• CTRL I: open properties, etc.

• One click open: create a bookmark to this link: javascript:location.href=location.origin+'/.publisher/tools/find/?url=' + encodeURIComponent(location.href)

Link checker• One text page: properties of the page > Link Check tab• Whole website: select website main folder (globe) > menu right upper corner > sites > link check

RSS feed• Available for news and event folders connected to NEO on request

35