Google Sites Tutorial (Programming in Python)

Google Sites Tutorial

Evolution of the Wiki

Wikipedia has over three million articles and very few employees.

What are the distinctive characteristics of Wikipedia?

collaborative-- anyone can edit!

wysiwyg -- you don't have to know HTML to edit

example: usf page: http://en.wikipedia.org/wiki/University_of_San_Francisco

How does it compare with Encyclopedia Britannica? Nature article

Google Sites: The Personal Wiki Stored in the Cloud

    Wikis are not just for "anyone can edit". Small groups, organizations, etc.

    Internet or intranet, various sharing options

    Stored in the cloud!

    Can create hundreds of sites.

    Don't have to download anything or have any systems-level knowledge

Instructor Demo: creating a site, editing, editing sidebar, importing an image, a youtube video, sharing

Tutorial

1. Get a Google Account and Register for Sites

Go to sites.google.com. You'll see the following:

If you have a Google account (e.g. gmail) just enter your email and password. If not, click 'Sign up for Sites' and register with Google.

2. Create a New Site

When you've successfully logged in to Google Sites, you'll see the following:

a. Click on 'Create new Site'
b. Provide a name for your site, maybe something like 'Gavin Newsom's Portfolio'. Note that the name must be unique in Google's database.
c. You can choose a theme-- the colors and other styles for the site. Just choose one for now and you can change it later.

3. Add some basic information to the home page.
To add or change information to your home page, click on "Edit Page". In edit mode, the top right corner of your window will look like this:

On your new home page, add some profile information for yourself:

name and contact information
short bio

Then click 'Save'. After saving, the top-right of your window will change to look like:

You can edit again by clicking 'Edit Page' again.

4. Insert Images
You can insert images on to your page either from image files on your computer, or from the web. Follow the instructions below so you'll know how to do both. When you feel comfortable, add a picture of yourself to your profile home page.

First, insert an image from the web. Open another browser window and search Google images for a picture you like (go to http://images.google.com/ to search the web for images). When you have found an image you like, right click on it and select 'Copy Image Location'. This will put the image link in your copy clipboard.

To make the image appear on your Google Sites page, first make sure you are in 'Edit' mode, then select Insert | Image from the top menu. You'll see a dialog like the following:

Click on 'Web Address (URL)', then paste in the image URL you created above. The same image that appeared in the Google Image search should appear on your new Google Sites page.

You can also insert an image from the hard drive of your computer. If you have a picture of yourself, great. Perhaps you can use a digital camera to take a picture of yourself and then upload it to your computer. If you don't want to do this right now, just go back to the Google image search and find another image from the web. This time, however, right click it and select "Save Image As". Save the file onto the desktop of your computer.

Click Insert | Image again, and browse for the image you want on your Google Sites page. When you click 'Add Image' it should appear on your page.

5. Create a "Sample Apps" Page
a. If you're in Edit mode, save to get out of it.
b. Select 'Create a new Page' from the top-right menu.
c. In the dialog that appears, enter 'Sample Programs'. This is where you'll link to summaries of the sample programs you write in class.

Note that creating a page is different than creating a new site. A page is one part of a site. So you might have a "Sample Programs" page and a "Projects" page in your Portfolio site. You might make a completely different site for some particular project you work on with others.

6. Customize the Sidebar
The sidebar appears on all the pages of your site. You can customize it with different items and links, and even move it around on the page.

a. Click 'edit sidebar' below the sidebar of your site on the left. You'll see a dialog with the following:

Click on the 'edit' link under Navigation. You'll see a dialog like the following:

You can move items up and down in the navigation bar using the arrows on the right. You can add new items, that is, links to other pages, by clicking 'Add Items'.

Add a link to your 'Sample Apps' page to the navigation bar by choosing 'Add Items' and selecting it from the list.

Also add links to three other pages: Projects, Tech Q&A, and Blog. You can do this within the navigation bar editor by choosing "Create Page" and then linking to it.

You can also add links to the outside world and other items in the sidebar. You'll have to create a new sidebar item, different from Navigation. When you create it, choose the "Text" type. This allows you to put in any components, including links. Add this Text navigation below the navigation bar and add links to your profiles on facebook, etc. and to the course web page.

7. Change the logo on your site

Create a logo for your site. It might have your picture on it, or just a nicely styled title. If you are working in a USF computer science lab, you can use Fireworks, which is similar to Photoshop, to create the logo. Fireworks only runs on Windows, so if your computer is currently running Linux, restart it and choose Windows when the choice appears.

Create your logo of dimensions something like 750x140 to fit into a Google Sites page.

Add it to your site by choosing Manage Site in the top-right "more actions" menu, then choosing change layout and update logo.

8. Send your portfolio to T.A. for inclusion in course web site.

When you have completed this tutorial, email your T.A. a link to your portfolio. He'll add a the link on to the students page on the course web site.