Adding Features

Getting Organized

Create folder structure in Google Drive
Find images
Create document templates, convert to PDF, link documents
Set up calendars
Set up contact forms
Find source-code snippets (embedded third-party functions)
The Deep End - write your own HTML/CSS/JS/...

How?

Google Drive (https://drive.google.com/)

The Google Drive interface is segmented into

Quick Access (recently opened files)
Folders
Files (can be documents, images, forms, websites, etc.)

Using the [+ New] button, you can create folders, upload files, or create files.

TASK:

Create three folders, called "documents", "images", and "resources". This is a basic organizational structure.

Images (https://images.google.com/)

Find images for your subject

You can refine image searches with the [Tools] button, e.g. when looking for specific image sizes. Notice the "Usage rights" option, to look for copyright-free images.

You can also use any image in your Google account at https://photos.google.com/
For event photos, create and link an album (https://photos.google.com/albums). Only use one event photo for each event as title/illustration, e.g. the album cover.
Images can be edited with locally installed editor or with browser-based online services. Check out:
- The GIMP - Free Photoshop complementary
- PhotoFiltre - Simple Windows image editor
- Photo Pea - Online image editor with PSD-file (photoshop format) support
- Pixlr - Online image editor
- Photo Scissors - Online background removal tool
- IMG-Resizer+ - Warning, self-made, this simple tool instantly resizes an uploaded image to the set values, cropping is possible, but a bit 'finicky'. Good for serial resizing.

Create /Link/Share Documents (https://drive.google.com/)

PDF files are elementary to websites, since they are system-independent view-only files. They do not rely on the program they have been created with.
You can simply drag existing PDF files into folders, but PDF files can also generated directly from Google Documents.

TASK:

Click the [+ New] button

Select Google Docs

Create a sample document
In the "File" menu, select "Download", then "PDF Document"
The PDF file will be downloaded to your computer

Drag the downloaded PDF file back into the Google Drive Folder or use the [+ New] button to upload the PDF file.

Linking PDF files

Select the generated PDF file
Click the [link] or [share] button. The [link] button establishes a public link to the document. The [share] button does the same, but provides more options.

In the [share] options, click the [link] icon.

When the link is generated, copy it.

Side-Note: You can also link Google Docs, and enable editing, then send this link to participants, to work jointly on a shared document. Of course this generated link should NOT(!) be posted on a public website.

Go to your website, highlight text you wish to designate as link label.
Select the [link] icon.
Paste the copied link to the shared PDF file.

Maintain Calendars (http://calendars.google.com)

Google provides useful calendar functions, allowing simple event maintenance.

Go to http://calendars.google.com.
Choose the [Month] display option.
To create an event, click the [+ Create] button.

Though an event can be created right here, select [More options].

Enter details as needed
Notice the option for repeating events. Even if individual events of a sequence change, these auto-generated events can be modified, cancelled, moved, etc.

To include the calendar in the website, select it from the right-hand side of the Google Sites editor.

Select the calendar (and others you wish to include, e.g. Holidays) and press [Insert].

Create and use Contact Forms (http://forms.google.com)

Forms can be contact forms, surveys, sign-up lists, or anything feedback related.

A form is a document type. Either go to http://forms.google.com or click the [+ New] button and select from the list.
Select the [+] Blank option to start a new form or choose an existing form.

Enter the form title and description/remark (helpful to remind visitors, processing takes time).
Click the (+) button on the right to add form fields, select the field-type and enter labels.
The six dots on top of the active form field are the handle to move a field up or down in the form.

IMPORTANT! Form submissions are not reported by email. Add-ons for this function are available, but installed by default. Responses need to be checked manually.
Select the RESPONSES tab.
Responses can also be viewed and downloaded as spreadsheet, over the green spreadsheet icon.
A form can also be "closed", e.g. after a deadline.

To embed the form into the website, go to your site and find the Forms entry on the right-hand menu.

Select and insert the form.

Make sure the size the container box AT LEAST(!) until the Google Forms disclaimer shows. Give more, if possible, to avoid "second-window-scrolling" in mobile devices. (See also Source-Code Snippets.)

Embed Source-Code Snippets (https://sites.google.com/)

To add features not supported by Google Sites' native functions, straight HTML and JavaScript source code can be embedded. Usually these items, called "snippets" are generated by a service. Common types are newsletter subscription forms and weather widgets.

For this training, we will generate a weather forecast snippet. Go to http://weatherwidget.io.
Enter "El Paso, TX".
Bring the widget to 300px width.
Click the [GET CODE] button.

Copy the code by clicking the accordingly labeled link

On your website, select the "<> Embed" option from the right-hand menu.

Select the "Embed code" tab.
Paste the copied code into the box.
Press [Next].

The script will be executed and provide a preview.
Press [Insert].

IMPORTANT!!!

Always check your website elements (especially forms and embedded code) for oversize, causing difficult-to-handle secondary scrollbars. Make sure to resize the snippet container box in height until the scrollbar does not appear in mobile view. This can result in large white-spaces below the snippet in desktop view, but is usually the lesser loss than lacking usability on phones. It's a judgement call.

THE DEEP END - Write your own HTML/CSS/JS/...

Learning and reference websites (free):

HTML Crash Course For Absolute Beginners (tutorial video)
W3 Schools (quick reference)
Code Academy (class/lab-style learning, practicing)

+++

Google Sites

Report abuse