Technical Tips

You will probably be including a variety of artifacts and images in your portfolio. Some of your artifacts may be audio or video clips; some may be large or contain private information. Your users may be viewing your site on the small screen of a hand-held device; other users may be using adaptive technology, such as a screen reader or enlarged text; still others may be viewing your site with a slow internet connection.

There are many things to consider when creating a web site. This page contains information about some of the technical, legal, and ethical issues that may arise as you create your site.

For additional details, see Choosing Appropriate Files on the Artifacts page of this site.

File Sizes and Formats

The following information is from Storage and File Limits on the Google Help page (support.google.com/sites/answer/96770?hl=en) You may want to visit this page to see if the information is still current.

For Google Sites created with the free Google Sites tool (with a URL starting with sites.google.com/site):

Site quota: 100MB/site

Max attachment size: 20MB

Pages per site: No set limit (see note below)

"Embedded documents, including Google documents, don't count against the Sites storage quota. However, items added as an attachment or to your file cabinet do count against your quota."

"Designing a site with thousands of pages and attachments can slow the Site and create a poor user experience. Such sites or their individual pages may be disabled or temporarily unavailable at times. We recommend breaking such large sites into multiple related sites and/or disabling dynamic sidebar elements such as automatically organized navigation and recent site activity."

Additional information:

Google Sites: Unsupported file types support.google.com/sites/answer/153986?hl=en&ref_topic=1046070

Privacy

Redacting private information from a file

Obscuring information in images

Copyright

Accessibility for users with disabilities

Multimedia Issues

Using Graphics

Prior to uploading an image file to your site, you may want to re-size the image, crop it highlight the most important part of the picture and get rid of unnecessary background, or save the file in another format. Below are some suggestions for doing this type of image editing for Windows and Mac operating systems as well as basic instructions for using a free, online tool that works with both Windows and Mac, Pixlr.

- Tips for Windows - Paint

Right-click on the image you want to use and "Save image as" to your desktop.
It is a good idea to save a copy of the image with another name before you begin to make changes to it.
Double click on the file to open it.
Many Windows computers are set up to open an image in Windows Photo Viewer.
Choose Open -> Paint
(If your computer is set to open in another media viewing program, it may have editing features in it or links to programs that do. If not, you can go to the list of programs on your computer, look for Accessories, and choose Paint.)

Resize

To change the size of the picture in Paint, click Resize from the ribbon menu.
It make take a little trial and error to get the size you want. The key is to confirm that Maintain aspect ratio is checked so your image does not get distorted.
Also, remember that you can use the Undo button (or Ctrl-Z) to Undo the last action.
You can try making the image smaller by choosing Percentage and then typing in 50. That will reduce the size by 50%.
You can also choose Pixels to see the current size in pixels. You can change one of those numbers and try re-sizing that way.
- If you want a series of pictures to be the same width, for example, you will want to use the same number of pixels in the horizontal box for each picture. The height of the pictures may vary if you keep them in proportion ("maintain aspect ratio"), but they will be the same width.

Crop

To crop the picture in Paint, click on the Select button.
Place your cursor in the top, left corner of the area you want to keep. Drag the cursor to the lower, right corner. You will see a dotted box appear around the area to save.
- If you don't like your selection, click Undo and try again until you do like it.
When you have created the box around the part of the image you want to keep, Crop will become available. Click Crop.
You will want to save this picture with another name. (This allows you to have the original image and a copy of the original in case you don't like the look of your new picture in your site.)

Other Options

There are other simple editing tools in Paint. For additional instructions, go to a site like:

How to Work with Paint in Windows 7 & Windows 8 [by George Grigoriţă] www.7tutorials.com/how-work-new-paint
Using Paint http://windows.microsoft.com/en-us/windows/using-paint#1TC=windows-7
- To change the version of Windows, use the drop down beside Windows 7 in the upper right side of screen.

Save As

To save the picture in a file format that will work in Google Sites, click on the drop down on the Paint tab to the left of the Home tab.
- jpeg is a good choice for format because it also compresses the file to make it smaller
Click on Save As and choose JPEG Picture.
Browse to where you want to save the picture.
You can re-name it here if you haven't already done so.

- Tips for Mac

soon

- Using Pixlr

Pixler (pixlr.com) is a free, online tool that has been around for a long time.

Pixlr also allows you to create a simple image (see creating your own Banner Image

Using Audio Files

clips, clips, clips

Using Video Files

Use YouTube - It is a Google app.

very short clips, clips, clips

Browser Safe Colors

The Browser Safe Colors [Elizabeth Castro] http://www.cookwood.com/cookwood/html4_examples/4files/colorhex/colorcharthex.html

HTML Colors [W3Schools] http://www.w3schools.com/html/html_colors.asp

HTML Color Charts http://www.devguru.com/features/colors

From USC Marketing Toolbox: Official Colors sc.edu/toolbox/officialColors.php

- garnet = #73000A (RGB = 115, 0, 10) (HSL = 355°, 100%, 23%)

black = #000000
white = #FFFFFF