Google+Sites+(Intermediate)

=Google Sites:= Vocabulary

Overview
== The purpose of this session is to introduce concepts of using Google Sites as a framework for a course website. We will look at various aspects of site construction, design and layout. The focus of this session is on design issues related to websites: How can you create a website that your students will be able to use easily and regularly?

Time Allotted
One hour.

Goals
Participants will be able to:
 * Discuss some basic concepts of website design.
 * Create a website that is easy to use, and meaningful for student interaction.
 * Explain rationale for the website they created.

Outcomes
Design a website for instructional Purposes Create meaningful and effective navigation menu

Content
Website Design Basics Navigation Basics
 * Always have a reason for creating a page.
 * Always have a rationale for including / not including embedded objects (such as Voki, Google Docs, etc).
 * Make sure the content is as easily understood as possible (Flow & Style issues)
 * Creating a Navigation Hierarchy
 * Creating Sub-Menus
 * Three-Click Rule

Instructional Strategy/Activities
Instruction and Workshop. Online videos will also be available.

Resources
Laptop with either Mozilla Firefox or Google Chrome. Headphones that will work with you computer.

(Microsoft Internet Explorer version 9 has shown some promising results, but version 8 has been known to give some users problems when interacting with Google Sites. Please keep this in mind as you are preparing for this session.)

Evaluation )
Attendees will be able to discuss their website, and explain why certain decisions were made.

=Lesson=

Step 1:
4 Minutes of Instruction; 6 Minutes of working media type="youtube" key="CjO3g7gCljQ?hl=en" height="412" width="509" align="right" Building a Google Site:
 * 1) Log into Gmail.
 * 2) Click More
 * 3) If you are Using Google Apps, Sites should be listed Immediately
 * 4) If you are not using Google Apps, then you will need to click more and find Sites on the next page.
 * 5) If you need to use CRTL-F and type in Sites to help you find it on the page.
 * 6) Click Sites.
 * 7) You might need to accept some terms of service, depending on how things are setup
 * 8) Look for "Create a New Site"
 * 9) As a note, you may be asked to use a Template. Do not do this. For our purposes, and for learning Google Sites, Templates are bad news. There is a lot of extra stuff that gets thrown into a template, and a lot of extra work is needed to get a site up using a template. Don't do it. THANKS! :-)
 * 10) Name your Site (Whatever you like, but probably related to your content)
 * 11) You can Customize the URL if you like, otherwise don't worry (You may be asked to change this later, if the URL is already used)
 * 12) Select a Theme if you like. Notice, the only thing that changes is that line that says "Currently Using: _"
 * 13) Under the More options box, you will be able to add tags, and decide who has access to your site. Set this as you will, but think about the ramifications.
 * 14) Click Create Site - TA DA!

Step 2:
8 Minutes of Instruction; 5 Minutes of working Building Pages: Click Create New Page:
 * Web Page
 * This is the page you're going to use the most. You can insert documents, forms, images, videos, or whatever you'd like.
 * Announcements
 * This page is good for homework assignments, or general reminders. You can publish blurbs that will post themselves automatically at the top of the list.
 * File Cabinet
 * File Cabinets are great for pages that your students need, but do not need a paper copy of. Things like instructions and review pages are well suited for a page such as this.
 * List
 * Aside from having the best name in the selection of various sites, this provides you with a customizable view for a variety of things. Your list will also be sortable based on criteria that you can select.
 * Start Page
 * This type of page has limited use in Educational settings. When you create a start page, you build a page with various widgets. Fun to play with, but not extremely productive for most uses. (That is, you can easily do all the same things as you can with a basic web page).
 * 1) Create a Web Page
 * 2) Name the page, "Important Part of Lesson One!" (Or whatever you'd like that expresses the same idea)
 * 3) Do put it under the top level (Will adjust this soon)
 * 4) When you click Save, you will find yourself in editor mode.
 * 5) You can insert anything from your Google account, or various videos and widgets.
 * 6) Click Insert (Upper - left hand corner of the web page)
 * 7) Select what you would like to insert
 * 8) Follow the Instructions on the screen
 * 9) Embedded objects will not show up as videos, or whatever. They will show up as grey boxes with descriptions (YouTube Video, Google Doc, etc.)
 * 10) The Web Page operates much like your standard document editor (think Open Office Write, or Microsoft Word).
 * 11) When you are done editing the page, click save.

Step 3:
7 Minutes of instruction, 10 Minutes of work Navigation
 * 1) media type="youtube" key="N-TdqK10vzo?hl=en" height="344" width="425" align="right"a) Don't Panic. b)Google Automatically Builds navigation for you. While that is awfully nice of them, it is absolutely wrong most of the time
 * 2) Create a new Page. We'll call it "Lesson 1 Home"
 * 3) Add a link to "Important Part of Lesson One!" to this page.
 * 4) To add a link, type the text into the page and highlight it using your mouse.
 * 5) Then, Click the work "__Link__" in the toolbar of the WYSIWYG editor.
 * 6) You can select "Important Part of Lesson One!" from the list of available pages.
 * 7) Click "OK" and you have made a link.
 * 8) Save this page.
 * 9) Now, click "Edit sidebar" which is located at the bottom of the menu bar.
 * 10) You will see that the screen changes drastically - this is ok. (Refer to 1a of Step 3).
 * 11) Under "Navigation" select, "edit"
 * 12) You will see that the default behavior is to allow Google to "Automatically organize my navigation." (Refer to 1b of Step 3). Un-check this box.
 * 13) When you un-check the automatic box, Google kind of gets in a snit and removes everything from your site navigation menu. This is OK, you can add the pages in Manually.
 * 14) Click Add and select the pages you wish to re-add to the navigation menu.
 * 15) Notice the arrows (Up, Down, Left, Right) and the X button. Those buttons will allow you to move items around in your menu, and the X button removes an item.
 * 16) Add "Lesson 1 Home"
 * 17) Add "Important Part of Lesson One!"
 * 18) Select "Important Part of Lesson One" and click the right arrow.
 * 19) Click OK
 * 20) Make sure you save.
 * 21) Return to site (It will give you a warning if you didn't save).
 * 22) Notice your new Menu! :-) (If it didn't work, please see this ).

Step 4:
Discussion (Up to 10 Minutes) Why? 1) Look at: The ECI 205 Syllabus. Why did the Instructor include the Syllabus as a Google Doc, instead of just embedding the information on the page?

2) The three-step rule states that a page should never be more than three clicks from the home page. Do you agree with this standard of Good website design, or do you think it's unnecessary?

3) What is the importance of Colors & Fonts in website Design?

4) What is it important to consider why you are doing something a specific way?

5) Look at this famously popular website. Why do you think they have chosen to be so minimalistic in their design?

**Step 5:**
Sharing 2 Minutes instruction, 8 minutes of sharing (4 minutes & 4 Minutes)

Show a partner your website. Explain why you did what you did, and what you might do differently if you had the time. Discuss the color scheme of your page; why did you select it, and do you think it appropriately represents your class. Discuss what aspects of the process you are most comfortable with. Discuss any aspects of the process that you had difficulties with.