Teacher Website Training Chapin High School October 10, D5 Guidelines

Transcription

1 Teacher Website Training Chapin High School October 10, 2011 D5 Guidelines The purpose of District sponsored web sites is twofold: to make parents, students, and the community aware of school, classroom, and student activities to foster communication among those groups. What s required? School contact information (including work phone and District address) Course content overview with link to syllabus Classroom rules Copyright and last updated information Links to teacher s school and the District web site Links to District Copyright and Privacy Policy What s recommended? Tips and Reminders for All Users (adapted from Homework assignments Class Calendar Student work activities and achievements Links to enrichment and appropriate educational resources Other information that would enhance instruction General Reminders: 1. Design for your audience s needs. a. Use headings effectively. (Refer to the way I ve structured this handout. The headings immediately give a visual pattern for information.) b. Facilitate scanning. Web visitors rarely read, so keep things short. Similarly, follow the threeclick principle Users should find what they need in no more than three mouse clicks. c. Keep user disabilities in mind. Describe any images you upload. 2. Keep things operational. a. Proofread your content. b. Update your content. Outdated information is deadly on the web. Post information that you plan to update. Keeping a complex website is like teaching another prep. c. Make sure your links are up-to-date and that they are not broken. d. Use the standard blue link color only for hyperlinks. 3. Introduce yourself as the author on the home page. Provide basic school contact information. Graphic Design Reminders: 1. Maintain proximity. Keep related things grouped together. 2. Use rules of alignment. Did you just wonder where #2 went? Information on a page should be visually connected to other information on a page. Breaking patterns jars your audience. 3. Use consistent repetition. Repeat design elements (headings, fonts, colors) to guide reader. Aesthetic Design Reminders: 1. Use space wisely. There s a reason it s called building a website. You are an architect. Use subpages to build with depth rather than listing everything as main sections in your navigation. 2. Use color wisely. Keep things simple. Use color to direct attention, but don t overwhelm the user. Be consistent. (Note: 10% of all males are red-green colorblind.) 3. Use movement wisely and appropriately. Too much motion is distracting and detracts from the quality of your page. 4. Use sound appropriately. Let the user be in control. You would not barge into someone s house without politely knocking; web pages that blare sound when the user lands on them may interrupt the user s quiet work environment. Let the user decide when to play sound clips, music, or videos. A. Carter

2 Resources Web Design: A List Apart (for more advanced users): A Process for Web Design (basic design info): Accessible Web Page Design (designing for all users): Color Matters: HTML Goodies (for more advanced users): Web Style Guide (great reference for any user): School World Sites Getting Started: 1. Access your page from any Internet connection: 2. Log in with your first name, your last name, and your password. If you do not know/remember this information, Margaret Adams can assist you. Main Sections: Figure 1 3. Main sections are prominent parts of your Navigation Bar. (The Navigation Bar is the menu that always appears on the left side of the webpage.) The default pages for everyone s main sections are: Home Page, Resources, and News. o You can turn off any main section except the home page. o You can add main sections by clicking Add Main Section in the lower left side of the window. Figure 2 4. Add sections according to your own organizational preference. o Suggestion: Add a main section for each prep you teach. If you change preps next year, these sections can be turned off when not in use. A. Carter

3 o To add information to a main section, click edit [main section name]. In figure 1, I would click edit English 1 Honors if I wanted to modify that page. That would take me to a page that I could type information in a field at the bottom of the page. Sub-Pages: 5. Sub-pages allow you to build depth in your Navigation Bar (figure 3). Add sub-pages to main sections to organize information within that main page. o Add sub-pages by clicking add a sub page beneath main sections (figure 4). o Suggestions: Use sub-pages to mimic the structure of a class notebook. Post materials to the web in the same place you would require students to file the information in their notebooks. Use sub-pages to post a calendar or diary for class assignments. Figure 3 Figure 4 Basic How To s: 6. Add an image, file, or link to any page: Once you click on edit for a main section or a sub-page, you will be taken to an editing screen (figure 5). Click the appropriate tab across the top of the page information bar (the first yellow bar). o To add an image, click images. In the select image field, browse for the image on Figure 5 your A. Carter

4 computer. Note that images have to be in gif or jpg formats, so some clipart may not work. There s an easy online file converter that can help you convert other images to gif or jpg at Once you add an image, there are a few questions to answer about how you want it to display. o To add a file, click Files. In the New File field, browse for the file. Give it a friendly file name that will show up next to the file as a title. You can also add comments by typing in the File Description field at the bottom. If you are finished, click save at the bottom. If you want to add more files, click add 1 more in the lower right. You can view all the files on a page by clicking Uploaded Files right above the yellow bar on this screen (figure 6). Figure 6 To delete a file, click on uploaded files, find the file and put a check mark in the delete box. Click save at the bottom. To sort files, click on uploaded files and change the numbers in the sort boxes. To change/update a file, click on uploaded files and click edit next to the file you want to modify. Browse for the newer version and click save. o To add links, click on the Links tab. Enter the web address, give it a friendly name that will appear instead of the web address, and include a description if you want one. To sort your links, click the Links tab. Scroll to the bottom of the page where you will see Current Web Sites. Modify the numbers in the sort boxes. 7. To add/edit text, click edit for any page or sub-page and scroll to the bottom. Use the text editor to type and edit text. There are several options available here. Mouse over each icon to see a description of what the icon does. The double arrow button at the far right expands this editing bar to open more options (figure 7). Figure 7 o For more advanced users, you can toggle between the design view and the HTML view at the bottom left. If you know HTML coding, you can add coded information to your web page that way. My Applications Options for your website: 8. From the main menu, click on the My Applications tab (figure 8). Figure 8 Only use what you plan to maintain. Turn off anything that you won t use. When you turn applications off, they will be accessible if you click show inactive sections. Your active applications A. Carter

5 (those that appear on the site) will be listed for you by clicking the My Applications tab. You have the following options: My Booklist: Feature class reading lists or your own. You can rate books and organize them into categories. My Links: Create categories and add an infinite amount of links. This is a great way to build a supplemental reference library for your classes or just to house those links that you visit frequently. Forms: Create online forms that can be open or password protected. Gather information from users by having the forms sent directly to your . You can also view the overall results from your forms. Some teachers use this feature to gather parental information for the yearly syllabus information sheet. My Polls: Survey your students or their parents by posing quick survey questions. My Blog: Discuss what is happening in class or allow students to post responses. My Calendar: Create/maintain one curriculum calendar by using the categories for each class and adding events for each class to the calendar. Advanced Homework: Gather homework from your website. Create assignments and require online submissions. Puzzles/Word Searches: Develop review activities based on your content by using the puzzles. My Slide Shows: Show what is going on in your class by uploading pictures of your students or their work. (Be mindful of the no media consent list!) Other Options: 9. Embedding widgets: Widgets are small programs that you can embed in your webpage. They make connecting to other pages or tools very easy since they are right there for your users to explore. I use a widget for Grammar Girl on my writing pages. The content is updated with a new feature every day. To embed a widget, o find the widget you want (I did a search for Grammar Girl Widget ) o click on the share link that should be located around the widget. This will give you an embed code. o copy the code o go back to the edit page and click on the film reel icon on the text editor bar ( insert media see figure 9). This will take you to a screen that asks you to paste the embed code you copied. Once you do, click insert. Your widget will appear on your website. Figure Embedding other media: You can also embed any other media (presentations, videos, slideshows, etc.) that have embed codes by following the same steps outlined in step 9. YouTube, Voice Thread, Slide Share, and Glogster are a few web tools that can be embedded into your webpage. These options offer great ways for you to supplement your instruction, as well as feature student work. A. Carter