OU Campus Training

Web Services Unithttp://www.sjsu.edu/webservices

Last Modified: December 13, 2011

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

● Self paced tasks new!

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]

Part 1

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+

New Templates

● Showcase the best of SJSU

● Help users findwhat they need

● Simplify page authorship

Emergency Notification System

● Office of Public Affairs will enable this feature when needed

● When enabled you will see information above of your website

Emergency Notification System (Example)

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

Home Page Template

Home Page Template (example)

Interior Page Template

Interior Page Template (example)

Template: Faculty & Staff

Template: Faculty & Staff (example)

Template: What's New?

Template: What's New? (example)

Template: Forms

Template: Forms (example)

Migration Update

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

Building & Launching your website

In development ....● Website visible at

○ Sub-sites: dev.sjsu.edu/webservices○ Sub-domains: housingstage.sjsu.edu○ Not sure? Check your welcome email

● 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

When you are ready to launch your website● Complete the Website Registration Form

○ http://www.sjsu.edu/webservices/services/siteregister

● Web Services performs an evaluation that includes testing for usability and accessibility

○ http://www.sjsu.edu/webservices/services/website/rollout

● All problems have to be resolved before setting launch date

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: www.sjsu.edu/#sitename#■ Example: www.sjsu.edu/webservices■ 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

Online Resources & Support

Online Resources

● Add-Ons tab inside OU Campus○ Announcements○ Training○ FAQ○ Accessibility Check & Repair○ Documentation (provided by OU Campus)

■ Best Practices■ Tutorials■ Reference Docs

Support

Open an iSupport ticket (Preferred)http://www.sjsu.edu/webservices/support

Login

How to login?

● Visit your website (driven by OU Campus) ○ Example 1: www.sjsu.edu/webservices○ Example 2: dev.sjsu.edu/hr○ Example 3: sercstage.sjsu.edu○ Not sure? Check your welcome email

● Click on "Last Modified" (at the bottom)

● Login with your SJSUOne account

After successful login (example)

OU Campus Overview

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

Q & A

Q & A (Part 1)

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?

Part 2

Basic Editing Tools

Topics1. Creating a new page2. 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 publish4. Uploading files5. Questions

Creating a new web page

1. Go to the Content : Pages view2. Browse to the page that will be the parent of the new page3. Click the New+ button4. Select the type of page you want to create

○ You can change the number of columns later5. 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

Editing a web page

1. Go to Content : Pages2. Browse to the page you want to edit3. 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 button5. Spell check the page (optional)6. When you are finished, click the Save button7. Publish the page or check it in

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

Publishing web pages

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

Pop Quiz

What is a good description for this image?

1. research3.jpg2. student working in a lab3. female student wearing a white lab coat holding up and

looking a container of red liquid

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

Questions?

Part 3Advanced Editing Skills

Topics1. Web Style Guide2. Snippets3. Assets4. Global image & asset gallery5. Compare versions of page6. Send web page for approval7. 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 navigation11. Edit secondary navigation12. Change page properties13. Change template type14. Change contact information15. Create special pages

○ Faculty & Staff ○ News ○ Form

Web Style Guide

Web Style Guide Draft

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 assets2. Global image and asset gallery

Send and Compare Page Versions

1. Send page for approval2. Compare page versions: see the changes you have

made to your page3. Scheduled Publish:

○ Publish your page at a later date

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

Need Integration with Social Media?

Open an iSupport ticket (Preferred)http://www.sjsu.edu/webservices/support

● 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

Adding an iFrame

iFrames allow you to add media, such as videos, external calendars, etc.

Edit Primary Navigation

1. Change Primary Nav order on Page Properties2. Save changes3. Publish Primary Nav file

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?

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

Side Nav

1. Automatically generated2. To edit, open the file in the WYSISWYG editor3. Add the links you want to change4. Save

Note: You can add links that are outside of the SJSU Website or your own site here

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?

Change page properties

1. Number of columns2. Page name3. Template type: 1, 2 or 3 columns4. Slideshow or static image on homepage?

Change Contact Information

1. department.inc file

Create special pages

1. Faculty and Staff2. News3. Form

Feedback or Question(s)?

webservices@sjsu.edu

Part 4 (Optional)

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

15 minute break!

Self Paced Tasks

Duration: 45 minutes

Self Paced Tasks Introduction

● Visit http://dev.sjsu.edu/demo● 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

Thank You