9/28/2016

WEBHARE LIGHT COURSE Version September 2016 Marketing & Communications  NL: www.utwente.nl/webhare EN: www.utwente.nl/en/webhare

IN THIS PRESENTATION: LIGHT COURSE (1-14) 1. LOGIN/ PERSONALIZATION 2. WEBHARE OVERVIEW/SCREENS 3. MAIN RULES FOR FILE NAMES 4. NAVIGATION / MENU 5. WORKING WITH THE EDITOR 6. INTERNAL / EXTERNAL LINKS 7. FILE TYPES 8. IMAGES / VIDEO 9. HEADER 10. SEARCH ENGINES / READABILITY 11. ENGLISH VS DUTCH WEBSITE 12. NEO: CENTRAL UT NEWS/EVENT SYSTEM 13. FREQUENTLY ASKED QUESTIONS 14. CONTACT/SUPPORT INFORMATION QUESTIONS?

EXTENTED COURSE (1-22) 15. INLINE COMPONENTS 16. WIDGETS 17. FOOTER 18. STATISTICS 19. WEB SIGN UP FORMS 20. INTRANET OPTIONS 21. SOCIAL MEDIA 22. OTHER TIPS QUESTIONS?

1

9/28/2016

1. LOGIN/ PERSONALIZE ACCOUNT URL: webhare.utwente.nl to login Username: m-number of s-number account Publisher to edit websites WebPack to create web forms

Settings Click your own name to changes your personal settings: • Language preference (NL/EN)

2. WEBHARE OVERVIEW/SCREENS

2

9/28/2016

3

9/28/2016

3. RULES FOR USING WEBHARE Name (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) • No information that changes (put version numbers of documents in the title). Do not delete 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 USING WEBHARE Header title (H1) • Can be longer then the title field, max 2 lines of text • Placed in the header of the page • If empty, the title is shown. Index file • How to recognize: 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

4

9/28/2016

4. NAVIGATION Menu (black, on the left) • All files and folders (with titles) are placed in the menu [old website: they were placed as blue links in your main text area] • One exception: when using a content listing folder, files and folders are placed in the menu AND in the main text area Content overview within a webpage • Sub headings (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 • Better create one long page than many short ones: less pages = better overview; scrolling works faster then clicking (especially on mobile) Change website ordering of files • Select website ordering above the file list (other options sort in WebHare for you, but not on the website) • Use arrows to change ordering or use your mouse to move an item • Advanced sorting settings in the menu Tips • Always use the menu for navigation • Do not create pictures/icons for navigation • Do not create ‘under water’ folders without titles and link to them, people get lost

5. WORKING WITH THE EDITOR About the text editor • To create text pages (no Word documents anymore for creating web pages) • Advantages: • Fast edit online • Only the features that work (lots of Word features do not work on websites) • Create internal links in your text, not only external links; will be explained in section 6) Word Documents • Word documents can be provided for download, just like PDF, Excel, PPT, etc. Creating a text page • Go to the folder where you want to create a text page (select that folder with one click) • Click New file (NL: nieuw bestand) in the left upper corner • Choose Rick Text Document • Fill in name & title and save your file (the file is not published yet, has a red symbol) • Double click the file to open the text editor and add content (type of copy/paste with ctrl+C; ctrl+V) • 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)

5

9/28/2016

5. WORKING WITH THE EDITOR Buttons/options in the text editor 1. 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 picture 5. Add a video (from YouTube or Vimeo) 6. [Add an inline element]  advanced feature 7. Add a table: only for small tables up to 3 or 4 columns Save and publish Save: Saves your text (as a draft), but does not publish on the internet Publish: Saves changes AND publishes your changes on the internet

6

9/28/2016

6. INTERNAL/ EXTERNAL LINKS Two ways to create links • On words in your web text (just like in Microsoft Word) • As a new item in the menu (via new file/nieuwe bestand button in the publisher) Internal and external links • Internal: to a file in your WebHare (button: browse to find the file) • External: to a webpage outside your WebHare (URL: http://...) Use internal links when possible • Internal link keep working when someone changes the link name/location • External links are broken when one letter is different Tips • Put many links on words in the text so people can easily click to other pages (on a smartphone people don’t see the menu so this really helps!) [Advanced] 3rd type: content link • Keeps working like an internal link • Difference: copies the text in you website, instead of linking someone to another website

7. FILE TYPES AND FOLDER TYPES Overview of available file and folder types. Files • Rick Text Document: main page format to create webpages • Links: internal link, external link, content link • FAQ: to create a list of frequently asked questions Folders • Normal: normal folder if you need to go ‘deeper’ in your website • Album: add pictures to this folder to create a picture gallery • Content listing: to create list of files/folders in your main text area • Use if you have some main categories and files (years as main categories, meeting minutes as files)

7

9/28/2016

8. IMAGES/ VIDEO Images • In the text editor by user 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 film strip button (video’s should be uploaded to YouTube or Vimeo first) [Advanced options] Some other advanced options available: • In widgets (blocks under your page) • In inline components (in between your text paragraphs) Picture size • Pictures from camera’s may be very large • Download a little easy tool to your desktop from www.utwente.nl/en/webhare > pictures > resize pictures • Drag and drop a picture to that tool to resize files

9. HEADER 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.

8

9/28/2016

9. HEADER You can upload one or more pictures in the header. Two or more pictures create a picture slider.  Properties of a file of folder > Header tab > add/toevoegen.  Picture size: at least 1500 pixels, better 3000 pixels Tips • If heads are cut off, use the referent point option to mark the most important part of your picture (pen symbol) • How many pictures? – Use a picture on your starting page. Other pages are less important. • Never upload pictures with text on in. On smaller screens half of the text will fall off or will be behind the header title.

9. HEADER You can add a call to action button (‘sign up now!’) to the header. Never upload pictures with text on in. On smaller screens half of the text will fall off or will be behind the white header title.  Properties of a file of folder > CTA tab > fill in the fields (with or without button).

9

9/28/2016

10. GOOGLE SEARCH & READABILITY Follow 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 then 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. • When other websites link to your site, it helps to be found in Google

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 up English site: Dutch site: Short link:

www.utwente.nl/en/designlab www.utwente.nl/nl/designlab www.utwente.nl/designlab > Choose yourself if it links to the NL or EN version (everybody can get a short link with utwente.nl/…)

10

9/28/2016

12. 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 teams 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) Set up your news/event items only in NEO and publish to your website location Easy to share news and events with faculties, institutes and homepage Easy to add other languages

11

9/28/2016

13. FREQUENTLY ASKED QUESTIONS I 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 keybord (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 menu Did you forget to fill in a title? Try the answers of the first question. 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:

12

9/28/2016

14. SUPPORT AND CONTACT INFORMATION

Contact Servicedesk Online Media E-mail address: [email protected] Phone number: 5665 (+ skype chat) Support documents • Manuals and tips: • English: www.utwente.nl/en/webhare • Dutch: www.utwente.nl/webhare • 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

QUESTIONS?

13

9/28/2016

WEBHARE EXTENDED COURSE Slides starting here are topics for the extended WebHare course 

15. INLINE COMPONENTS What is an inline component? An inline component is a special item (other then text & picture), that can be added within your tekst page. What inline components are available? • Button (call to action, CTA) • Quote (with name and pictures) • Accordion content (let the user fold the content open) • Picture carousel • Person contact information • Video • …. 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: • For video, hit the filmstrip button, choose YouTube/Vimeo and search for the video you need. • For other inline components, hit the {…} button and choose the a component to embed Tips • Edit/add space above of under the element: mouse over grey area > right upper corner icons • More examples: www.utwente.nl/test/website-default > widgets & inline components > inline components

14

9/28/2016

16. WIDGETS Your 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 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 • Folder ‘UT_central’: UT widgets • Folder ‘widgets’: your own widgets Two ways of linking widgets to your page • Place them under your page: go to file/folder properties > widgets • Place them as inline component (as explained on the inline component sheet) 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 • Picture can focus on your building (ask WebHare-team) • Contact block: change it yourself (website main folder > properties > footer tab) Black area with links • Link columns: add columns with your own footer-links • Social Media: show UT social media channels, remove them or show your own social media channels • UTwente service block: show general UT links like contact, vacancies, route, etc • Images/logo’s: to present a slideshow of partner logo’s Tip • Footer links should be related to your website (links to content on your own website because they help your search engine ranking)

15

9/28/2016

18. WEBSITE STATISTICS Google Analytics options (GA) • For regular use, request an own GA code and access (with your own Google Account) to monitor your site www.utwente.nl/webhare --> S for statistics • For one time information ask the WebHare team to receive an overview on page visits Tips • Don’t take numbers too serious; many people block these kind of tools • How to use them: change information on your site and see if numbers go up or down

19. WEBFORMS Using the webpack module in WebHare to create webforms • Staff members are automatically authorized, students need to request access • Create a form first, then use the link button to link it to a webpage Features • Easily create a webform without programming • Automatically sends an email to you and the attendee • Stores all information online (download Excel file) Tips • When setting up, in the WebPack form create a • Page (only one if your form is short) • Group (group of questions that belong together, like ‘personal information’) • Questions: open questions, multiple choice, etc. • Multiple choice questions allows you to jump to page x after filling in answer y • Email to organization: see finish page • Email to attendee: create a question of the type ‘email’ • Default: sends a copy of the sign up form • When you upload a Word doc: sends email with your tekst • Can be personalized (Dear Jan, …); • Button language: automatically same language as your website language • Grant right for one or more webforms to colleagues (user management, search for user, grant right, choose webpack.

16

9/28/2016

20. INTRANET & LOGIN OPTIONS Make 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 MEDIA Summary of options • Share buttons below the tekst: let people share your content on 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

17

9/28/2016

22. OTHER TIPS 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 U: go to URL • CTRL I: open properties • Etc. Link checker • For any text file: properties > Link Check tab • Summary for your website in Excel: menu right upper corner > sites > link check RSS feed • Available for news and event folders connected to NEO

18