OU Campus Training. Web Services Unit

Transcription

1 OU Campus Training Web Services Unit Last Modified: December 13, 2011

2 Objectives Introduction to new templates Login to your website Make basic edits to your webpage using OU Campus Publish your website View your website online Let's take a tour Self paced tasks new! new!

3 Agenda Part 1 [Harish] Introduction to new templates Building & launching your website Migration update Login OU Campus Overview Part 2 [Scot] Basic Editing skills Part 3 [Charlotte] Advanced editing skills Part 4 (optional) Let's take a tour! [Harish] Self paced tasks [Charlotte]

4 Part 1

5 New Templates The design driving the SJSU Templates was conceived of and developed by students, combined with input from a broad array of campus stakeholders The university engaged Design Creature, an SJSU student design studio led by Associate Professor Connie Hwang New templates were made available in June, 2011 Browsers Support Microsoft Internet Explorer 7.0+ Mozilla Firefox 3.0+ Google Chrome 4.0+ Safari 3.0+

6 New Templates Showcase the best of SJSU Help users find what they need Simplify page authorship

7 Emergency Notification System Office of Public Affairs will enable this feature when needed When enabled you will see information above of your website

8 Emergency Notification System (Example)

9 Template Types Home page templates 1 column, 2 columns, and 3 columns Interior page templates 1 column, 2 columns, and 3 columns Forms List documents with A-Z index News RSS/ATOM reader Faculty & Staff List people with contact information A -Z Site Index* * Auto generated

10 Home Page Template

11 Home Page Template (example)

12 Interior Page Template

13 Interior Page Template (example)

14 Template: Faculty & Staff

15 Template: Faculty & Staff (example)

16 Template: What's New?

17 Template: What's New? (example)

18 Template: Forms

19 Template: Forms (example)

20 Migration Update

21 Known Migration Issues "Links Gallery" & "Did You Know" did not get migrated Folders (except "docs" &"pics") without index.htm did not get migrated Images need to be re-sized or replaced Secondary navigation link text needs cleanup Global Container text copied as static text All pages migrated, even hidden or test pages

22 Building & Launching your website

23 In development... Website visible at Sub-sites: dev.sjsu.edu/webservices Sub-domains: housingstage.sjsu.edu Not sure? Check your welcome Real time updates All content is public Used for internal testing Do not promote Check for accessibility as the website is being developed Follow the Web Style Guide

24 When you are ready to launch your website Complete the Website Registration Form Web Services performs an evaluation that includes testing for usability and accessibility All problems have to be resolved before setting launch date

25 In production... Sub-site Not visible on dev.sjsu.edu Stage: stage.sjsu.edu/#sitename# Example: stage.sjsu.edu/webservices Real time updates Do not promote Production: Example: 10 minutes delay Sub-domain Stage: #sitename#stage.sjsu.edu Example: housingstage.sjsu.edu Real time updates Do not promote Production: #sitename#.sjsu.edu Example: housing.sjsu.edu 10 minutes delay All these changes are done by the Web Services Unit

26 Online Resources & Support

27 Online Resources Add-Ons tab inside OU Campus Announcements Training FAQ Accessibility Check & Repair Documentation (provided by OU Campus) Best Practices Tutorials Reference Docs

28 Support Open an isupport ticket (Preferred)

29 Login

30 How to login? Visit your website (driven by OU Campus) Example 1: Example 2: dev.sjsu.edu/hr Example 3: sercstage.sjsu.edu Not sure? Check your welcome Click on "Last Modified" (at the bottom) Login with your SJSUOne account

31 After successful login (example)

32 OU Campus Overview

33 OU Campus Overview: Features Covered Dashboard Add-Ons Content Staging & Production Check-out & Check-in Delete, Rename & Move Publish "Internal Communication Plan" Develop best practices that meets your business needs

34 Q&A

35 Q & A (Part 1)

36 Q & A (Part 2) How can you communicate using OU Campus? How can you find online resources? What do you do when you have completed working on your site? What do you do when you need more people to work on your website? Can more than one person edit a page at the same time? When do you check-in your page?

37 Part 2 Basic Editing Tools

38 Topics 1. Creating a new page 2. Editing web pages WYSIWYG Toolbar Formatting text Inserting and editing images Inserting video from YouTube Horizontal Rules, Line Breaks, Special Characters Using tables Insert links and anchors 3. Publishing web pages Publish on demand Publish one page Publish multiple pages Scheduled publish 4. Uploading files 5. Questions

39 Creating a new web page 1. Go to the Content : Pages view 2. Browse to the page that will be the parent of the new page 3. Click the New+ button 4. Select the type of page you want to create You can change the number of columns later 5. Enter a name for the directory Brief but descriptive No spaces or special characters Lower-case is recommended (names are case-sensitive) 6. Enter a title for the page Spaces and upper-case are OK. Be descriptive. 7. Keywords, Description, and Author are optional. 8. Click Done

40 Editing a web page 1. Go to Content : Pages 2. Browse to the page you want to edit 3. Click the light bulb icon to check out the page If there is a red lock icon visible, someone else has already checked it out. Put the mouse pointer over the lock to see who it is. 4. Click the Edit button 5. Spell check the page (optional) 6. When you are finished, click the Save button 7. Publish the page or check it in

41 WYSIWYG Toolbar Save Save as Revert Restore auto-saved contents Cut Copy Paste/Paste as text Find/replace Undo/redo Spell check Text styles Lists Link Anchor Styles Image Multimedia Horizontal line Special characters Table Row Column Cell Asset Snippet

42 Publishing web pages Publishing makes a page publicly visible Publish checks spelling, links, validity Some users need to submit for approval before publishing

43 Pop Quiz What is a good description for this image? 1. research3.jpg 2. student working in a lab 3. female student wearing a white lab coat holding up and looking a container of red liquid

44 Pop Quiz You want a link to the Fall final exam schedule on multiple pages on your site, but you want to be able to change the link in Spring. What should you use? Asset Snippet

45 Questions?

46 Part 3 Advanced Editing Skills

47 Topics 1. Web Style Guide 2. Snippets 3. Assets 4. Global image & asset gallery 5. Compare versions of page 6. Send web page for approval 7. Integration with Social Media Update with Facebook and Twitter Direct Wordpress blog publishing Links to Social Media 8. Adding an iframe 9. Edit primary navigation 10. Using Mega Nav for primary navigation 11. Edit secondary navigation 12. Change page properties 13. Change template type 14. Change contact information 15. Create special pages Faculty & Staff News Form

48 Web Style Guide Web Style Guide Draft

49 Snippets and Assets 1. Snippets: Pre-formatted HTML items that can be changed: Example: Table 2. Assets: Non editable items that can be inserted onto a page 1. Can Create Web Asset and Text assets 2. Global image and asset gallery

50 Send and Compare Page Versions 1. Send page for approval 2. Compare page versions: see the changes you have made to your page 3. Scheduled Publish: Publish your page at a later date

51 Integration with Social Media 1. You can publish updates to Facebook and Twitter when your page is published 2. Direct WordPress blog publishing from OU Campus Go to Content Tab Click on blogs Select your blog Select new blog entry 3. Add links to your Facebook, Twitter, and RSS feed on your site

52 Need Integration with Social Media? Open an isupport ticket (Preferred) Do not provide your username or password in the isupport ticket We will set up a one-on-one consultation to add your account information

53 Adding an iframe iframes allow you to add media, such as videos, external calendars, etc.

54 Edit Primary Navigation 1. Change Primary Nav order on Page Properties 2. Save changes 3. Publish Primary Nav file

55 Q&A 1. Who do you contact to add Social Media integration? 2. What is the difference between Social Media integration and having your Social Media site linked on your site?

56 Mega Nav 1. Drop down menu Great for sites with many links 2. Default include file zz-meganav.inc needs to be renamed to "meganav. inc" to activate Links have to be added in "meganav.inc" 3. Created Snippets Rows: vertical drop down with categories of links Sub: horizontal drop down with categories of links

57 Side Nav 1. Automatically generated 2. To edit, open the file in the WYSISWYG editor 3. Add the links you want to change 4. Save Note: You can add links that are outside of the SJSU Website or your own site here

58 Q&A 1. Does my site's Secondary Navigation automatically remove links from my Side Nav file when a page is deleted? 2. Where do I change the order of my pages for my Primary Nav? 3. Which navigation is optional: Mega Nav or Primary Nav?

59 Change page properties 1. Number of columns 2. Page name 3. Template type: 1, 2 or 3 columns 4. Slideshow or static image on homepage?

60 Change Contact Information 1. department.inc file

61 Create special pages 1. Faculty and Staff 2. News 3. Form

62 Feedback or Question(s)?

63 Part 4 (Optional)

64 Let's take a tour of OU Campus websites...

65 15 minute break!

66 Self Paced Tasks Duration: 45 minutes

67 Self Paced Tasks Introduction Visit Click on "Technology" How is this page built? Task List Create a two column page Insert an image Refer to SJSU Web Style Guide Insert a YouTube video Insert "Plain Text" asset Insert "Web Content" asset Create a hyperlink Upload a document & link to it Change Primary Navigation of your site such that your two column page appears as the second link

68 Thank You