Tutorials



What is a Wiki? Wikis in Plain English

=Google Docs =

media type="custom" key="7787279"

Using Google Docs in Education A website designed by Chris Moore with tutorials about Google docs.

media type="custom" key="7364849"

media type="custom" key="7259835" width="120" height="120"

=Wiki Tutorials =

"How To" Create in a Wiki Tutorials

Adding a New Page A tutorial showing how to add a new page.

Adding a Banner A tutorial showing how to upload and add a banner to a wiki page.

Inserting Images A tutorial showing how to upload images into the file folder and then insert them into the wiki.

Inserting a Table A tutorial showing different ways to create and insert tables onto a wiki page.

Inserting Hyperlinks A tutorial showing how to insert hyperlinks into both text and images on wiki pages.

Embedding Video A tutorial showing how to embed a video from YouTube or TeacherTube onto a wiki page.

Embedding PowerPoint from SlideShare A tutorial showing how to use SlideShare, a free program, to upload and then embed a PowerPoint onto a wiki page.

=How To Tips=



Download this document for complete directions for creating a roll-over image in The Clarion.

Web Accessibility Why do we need to make The Clarion accessible to all people, including those with disabilities?

This Web site, Web site Accessibility Initiative, tells how to make digital materials, including Web sites, accessible for people with disabilities. There is a wealth of information here.

=Design =

Visual Design for Wiki Pages

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Good graphic design is an essential element to any wiki. If a web site is cluttered, is difficult to read because of poor visual contrast, or if graphics are out of focus, then readers will move on to another web site. Using visual literacy techniques to develop a wiki page, will invite readers to view content.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">As you work on the online school newspaper, there are some items that need to considered in the design of the wiki pages. Using appropriate visual design techniques will make content more inviting to view by most people while making it more accessible for people with disabilities. Here are some guidelines to follow for creating this wiki.

=<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Photography =

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">media type="custom" key="5176883"

 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Avoid clutter and overstimulation in photos. Cluttered scenes are difficult to view and are not as inviting to the audience as clean, one subject scenes.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Isolate the subject by taking more close ups.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use a tripod when taking video to avoid camera shake.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use captions for all photos, images, and graphics imported into the wiki. Captions will help people with screen readers.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">In the caption, identify the photographer and describe the image.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use Web Resizer to create smaller sized photos designed especially for the Web. Larger graphics can take too long to load onto the page.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use the formatting tools to align the photos and graphics where you want them on the wiki. Remember that different monitor screens will show the format of the page differently unless it is formatted by the web master.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">All photos, images, and graphics need to be uploaded to the wiki page. Copy and paste does not work for photos and images.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">All photos and images need to be original, ones taken by our school photographers to avoid copy right infringement.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">media type="custom" key="8220554"

media type="custom" key="8220590"

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 130%; line-height: 0px; overflow: hidden;">[[image:WebResizer.png caption="WebResizer" link="@http://webresizer.com/resizer/"]]

 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Images for the Web should be less than 100kb.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">You can check image size by looking at the properties. Right click on the image and you will see the size.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Images can be resized for the Web at Web Resizer. []
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Upload the image from your computer
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Select “Optimized Size” and save with a new file name (consider using a title plus Web. For example, “perryweb.” Adding “web” to the end will remind us that the image has been resized. You won’t confuse these images with the ones that you want to keep larger for printing or using in other projects.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Text

 * ===<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use consistent font style and size. ===
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">In Word, use Arial font, size 14,
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Do NOT do formatting in Word. Do all the formatting in the wiki so that it will be consistent.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Do NOT use Bold for the titles or headings in Word. Instead, use the formatting tool in the wiki to make all headings consistent.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">The title of the page will be Heading 1
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">The other headings of the page will be Heading 2
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use the Text formatting button, the one with the Big T and palette, to do all the formatting on the wiki page
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use black font on a white background for good contrast.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Page Design <span style="font-family: Arial,Helvetica,sans-serif; font-size: 130%;">
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Keep design simple; avoid clutter or too much information.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Be consistent in design within a page and within the wiki.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">all pages should have consistent headings
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">all pages should be similar in layout
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">all pages should have a menu on the side to make it easier to navigate
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Chunk content into logical units to make it visually appealing as well as easy to comprehend.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use diagrams and tables to display and organize information.
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Use the following categories when organizing data on the wiki:
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Time (most recent to oldest)
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Alphabetical
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Categories
 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Continuum (price, score, size, weight, etc.)

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Copyright
<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">All work that is not original shall be properly cited. Our preference is to use original work created by students at our school. Contributors to The Clarion shall ask permission to use work that is not created by the students and will abide by all copyright rules.

= Banners =

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 20px;"> Use this template to create new banners for individual pages on //The Clarion//. This will keep the page banners consistent.


 * 1) Open the **Banners Template 2** publication.
 * 2) In the **text box**, change the name to the **name of your page**
 * 3) Adjust the size of the banner in **MS Publisher to be 75%**
 * 4) Open **MS One Note** and do a **screen capture**
 * 5) Right click on the banner in One Note and do a **"Save As"**
 * 6) Name the file, **"Ban (name of your page)"** For example, "BanClassNews" Leave no spaces.
 * 7) Save in **Tech Lab, Clarion, Banner folder**

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Creating a Banner
<span style="font-family: 'Arial','sans-serif'; font-size: 14pt; line-height: 115%; margin: 0in 0in 10pt;">

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">In Paint—Banner size—700W X 150H pixels <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">In Publisher—start with a wide, narrow rectangle <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">1. Add basic design elements <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">2. Remember to keep the design simple <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">3. Choose a few colors—not too many <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">4. Put in some sort of logo or symbol <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">5. Add a text box to put in the name for the banner page <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">6. Consider adding a smaller text box to put in a motto or subtitle <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">7. Save as <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">8. Do a screen capture using OneNote <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">9. In OneNote, do a “save as” <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">10. When making a new banner, just change the main page name text box and follow the same process described in steps 8 & 9.

= Power Point Tips = media type="custom" key="5593279" media type="youtube" key="jFfFQ9XU7Jw" height="385" width="480"

=<span style="font-family: Arial,Helvetica,sans-serif; font-size: 21px;">Goals and Objectives =

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">The Clarion Goals and Objectives

 * <span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Goal: Students will create an online school newspaper. **

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 1: Students will write interesting, creative news articles to publish on the wiki.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 2: Students will take photos and appropriately re-size them for Web publishing.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 3: Students will upload news articles and images to the school wiki.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 4: Students will create slide shows, movies, cartoon animations, podcast recordings, and other appropriate multi-media resources to save and embed on the wiki.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 5: Students will understand accessibility issues and use best practices to make this wiki accessible to individuals with disabilities.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 6: Students will work collaboratively to complete assignments for the online newspaper by the given deadline.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 7: Students will use abide by appropriate copyright laws and practices.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 8: Students will use Web 2.0 tools to design and/or develop the wiki.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 9: Students will be refrain from publishing personal information other than first names, to protect the privacy of themselves and others.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 150%;">Objective 10: Students will use standard elements of good design in creating the wiki and products for the wiki.

Email The Clarion Teacher Coordinator: Cindy.Perry@CharlestonDaySchool.org​