OU Campus Training Web Services Unit http://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 Self paced tasks new! 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 find what 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
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
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
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
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.jpg 2. student working in a lab 3. 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 3 Advanced Editing Skills
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
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 assets 2. Global image and asset gallery
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
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 Properties 2. Save changes 3. 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 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
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 columns 2. Page name 3. Template type: 1, 2 or 3 columns 4. Slideshow or static image on homepage?
Change Contact Information 1. department.inc file
Create special pages 1. Faculty and Staff 2. News 3. 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