Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
4-16-13
GRADES: 4-6 UNIT CONTENT: WEB DESIGN, WEB SAFETY, WEB RESEARCH, AND COMPUTER SCIENCE STANDARDS: INTERNATIONAL SOCIETY FOR TECHNOLOGY IN EDUCATION (ISTE) NATIONAL EDUCATIONAL TECHNOLOGY STANDARDS FOR STUDENTS 2007: 1A, 1B, 2A, 2B, 3B, 3C, 4B, 5A, 5B, AND 6A UNIT SUMMARY: The purpose of this unit is to teach students basic computer literacy concepts through web design. Students will learn how websites are created and will publish websites of their own. This includes learning different features of websites, how coding works, how to be an ethical user of technology, research skills, internet safety, and copyright guidelines. The units culminating project is the creation and publication of a website using Weebly.com to present their research in conjunction with their current social studies project. TABLE OF CONTENTS: PREPARATION AND MATERIALS P. 2 LESSONS P. 3-20 LESSON 1: INTRODUCTION AND INTERNET SAFETY LESSON 2: COPYRIGHT LAW LESSON 3: CODING/PROGRAMMING LESSON 4: WEEBLY INTRO LESSON 5: PARTNER WEB DESIGN LESSON 6: RESEARCH LESSON 7: BUILDING FINAL WEBSITE LESSON 8: CONTINUE BUILDING LESSON 9: WEBSITE CRITIQUE RUBRIC P. 21 SURVEY P. 22 VOCABULARY LIST P. 23 COPYRIGHT QUIZ P. 24 UNIT REFLECTION P. 25 STUDENT WORK (ATTACHED)
MATERIALS:
The bulk of this unit is designed around using www.weebly.com. Weebly is free online website creator and web-hosting service. Its website builder is easy to use and intuitive with drag-anddrop features. There is also an option to set up an educator account where the teacher can create and monitor classes and student accounts. So the web design will be done primarily using this site. Student accounts will need to be created by the instructor as soon as all forms are returned. The each student will need access to a computer during lessons and a projector is also required. All other materials will also be in digital form in an effort to prepare students for the future and to increase other types of computer literacy. So any worksheets or notes will be downloaded by students from my own Weebly site, http://misterreed.weebly.com/, and everything will be done digitally during lessons and for homework expect any research in preparation for their website not done on the computer.
Lesson 1: Introduction and Internet Safety Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: This lesson will introduce the course and define its goals and guidelines. It will teach internet safety as a part of those guidelines. It will also give a basic introduction to how websites are created and new vocabulary. LESSON STRUCTURE:
Time Survey The course should have already been explained to parents and students and they should have already filled out permission forms but remind students that the course is voluntary and will not have an effect on their grade. The course begins with a pre-survey to assist in evaluating whether the course is successful in cultivating student interest in computer science and increasing confidence in their abilities in this area. Pass out the survey and have them only put their assigned number and the date not their name Explain the rating system of the survey and ask them to simply answer to the best of their abilities. DOE Internet Use Guidelines Materials
15 min
Pre-Survey (attached)
Time
Materials
20 min
Display the Hawaii State Department of Education Student Internet Use Guidelines Relating to Use of School Computers, Networks and Internet Services form the students and parents sign at the beginning of the year. Highlight and discuss important points as it applies to this course: http://doeweb - Use of the Internet is a privilege, not a right 2.k12.hi.us/te - All interactions shall be purposeful and appropriate - Users shall not reveal his/her full name, home address or chnology/pol icy/StudentIn telephone number ternetUse_fin - Users shall respect copyright laws and licensing al.pdf agreement (we will talk more about this later) - Use the access for for-profit or commercial business activities. - Students shall have no expectation of privacy in their use of school computers Ask them if they have any other ideas about how to be safe using the internet. Possible subjects: - Strong passwords
- Antivirus - Adult supervision - Only visiting known sites Assess their understanding of the guidelines: - If someone messages you online and says they are in 6th grade how old are they? No way to know. - Should they post pictures of themselves at school doing schoolwork? No personal information - Do the guidelines permit you to use Wikipedia? Yes, as long as you are citing sources and using it purposefully - After you turn off your computer can teachers or administrators see what you have done online that day? Yes, you have no guarantee of privacy - Can you look at your favorite players stats on NFL.com? As long as it is for a school project assigned by the teacher - Can you go to a learning website like MathGames.com? As long as it is for a school project assigned by the teacher - Should you put your name on work you post online? No, no personal information shall be posted online from school computers. This is different from work saved to the computer and not published online. - If a website asks you to upgrade/update should you follow their instructions? No, you can show a teacher but you are not permitted to make changes or pay money. - If you make a really nice website at school and someone wants to pay you to advertise on it can you? No for profit activities. Intro to Creativity and Web Design Lead a discussion to emphasize to students that they are all creators and have the ability to make websites and have a voice rather than just receive what other people make. - What do you do online? - Do you create anything on the internet? - Ask them who puts information on the internet? - Who creates websites? - Would it be useful to know how to create programs or websites? For which professions would this be useful? - Show them sample websites on Weebly to demonstrate what they could potentially make Vocabulary Materials
Time
Weebly.com
5 min
Time 15 min
Materials
Vocabulary List (attached)
Now have them go to or turn on their computers and go to my website: http://misterreed.weebly.com/ Once they are all set have them click Files and then download
the vocabulary list posted and open it in word. The steps will vary depending on the operating system they are using so go through it slowly using the same OS that they are using. Explain that we are going to fill in the definitions as we explore websites on the projector. So they should close their internet browsers and only have Word open. As a whole class list their favorite websites, save this list for future lessons - Keep all of the websites they come up with but explain the ones that they cannot access at school Go to one of the websites they listed and have them analyze the site focusing on its features, looking for any of the vocabulary words - The students will help create definitions and then I will model how to fill in each definition next to the vocabulary word. - Get through what you have time for, many of the terms lower on the list can be filled in later
Time 5 min
Conclusion Have the students create a folder on the desktop with their name on it to save all of their work in. Show how to save the vocabulary document to the folder Check that each of them has saved their vocabulary document into their folder as an exit pass
Materials
Lesson 2: Copyright Law Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: In this lesson Students will learn about copyright law and how to be a responsible creator. They will learn the definition and application of these key terms: plagiarism, copyright, fair use, citation, license, and creative commons. Lastly, they will practice finding images that they can use responsibly for their websites. LESSON STRUCTURE:
Time Plagiarism Intro Think of something you have created that you were proud of. - How would they feel if someone copied that work and pretended it was theirs? Can you think of a time when you used someone elses work in something you created? - Is it Ok to use someone elses ideas or images in something you create? - When is it OK? - If they bring up citations you can write a definition for citations What is it called when you steal someone elses work and present it as your own? - Define Plagiarism as a class Have them open up their Vocabulary Lists we have been working on and add the definition for Plagiarism and any other words discussed that are on the vocabulary list Materials
10 min
Vocabulary List
Time -
Copyright Video Show the video Whose is it, Anyway? by Common Sense Media. Have them just watch it the first time through and ask if they have any questions Then show it again pausing to discuss these parts: 0:27 quick pause to review the meaning of publish online 0:45 What did they do? Review plagiarism 1:11 What does copyright mean? 1:36 Discuss these methods of creation, can we copy and paste? Can we re-mix?
Materials
http://www.com monsensemedia. org/videos/stude nt-intro-videocredit-creativework
15 min
1:51 Go over the checklist and talk particularly about getting permission to use it. We will talk more about fair use next in this lesson but there are times when you have permission without actually asking for it. 1:54 Have them answer the following 3 questions: How will you give respect to creators? Get respect as a creator? And be a responsible creator? Discuss Citation 2:29 Ask them to read the line and define License. Then explain the symbols and Creative Commons Vocabulary Materials
Time
25 min
Use the example of creating a website to explain each of these vocabulary terms in a story: I had the idea of creating a website to help me teach. I could put documents on it and links to things I wanted my students to learn. As soon as I created the site, titled it and put some original material on it, or my own ideas like the title, it has automatically has a copyright. I created this site and put pictures on it that I took so if people copy those pictures and put them up on their site without asking me and without even citing those pictures as mine then it would be plagiarism. Now, if I want people to be able to use the pictures and ideas on my site what kind of license would I use? Creative Commons, yes so I could label my website at the bottom as creative commons. If I read an article about teaching web design that gives me some good ideas can I summarize that article on my website? Now, if a student wanted to use a part of my site like an image of the city just for a school project they probably wouldnt have to ask me because if they used it responsibly that would fall under fair use. Quick discussion on fair use and how it applies to this course. From the Copyright Act: The fair use of a copyrighted work, including such use by reproduction in copies or phonorecords or by any other means specified by that section, for purposes such as criticism, comment, news reporting, teaching (including multiple copies for classroom use), scholarship, or research, is not an infringement of copyright. In determining whether the use made of a work in any particular case is a fair use the factors to be considered shall include: 1. the purpose and character of the use, including whether such use is of a commercial nature or is for nonprofit educational purposes; 2. the nature of the copyrighted work; 3. the amount and substantiality of the portion used in relation to the copyrighted work as a whole; and 4. the effect of the use upon the potential market for or value of the copyrighted work.
Vocabulary List
It is complicated but basically if you are not going to hurt anyone in any way, are not using their work for profit, and are giving them credit you might be able to use their copyrighted work under fair use. Now have them open up their vocabulary lists again and create definitions as a class for each term in we went over today. The teacher can fill it out on the projector as well.
Time 10 min
Conclusion For something more active and fun now we will search for some images we can use Everystockphoto.com has free images and clearly displays the license and author of each image Go over a couple images and explain their license Have the students search for background images like scenery and save them in their folder with the name of the author as the license specifies.
Materials
http://www.ever ystockphoto.co m/
ASSESSMENT:
Formative assessment will take place throughout during our discussions, also when seeing if they can fill in the blanks during the story to test their vocabulary. A more summative assessment will come in the next lesson.
Lesson 3: Coding/Programming Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: By the end of this lesson students should have a basic idea of what coding and HTML are and how they are used to create websites. LESSON STRUCTURE:
Time 15 min Review As a review/assessment of what they learned yesterday I will give a quick quiz on what we learned yesterday about copyright Go over the answers and have them correct their own papers with a pen Materials
Copyright Quiz
Time
Intro Explain that coding is the process of creating programs and images like websites on the computer. The most basic way to create something from scratch is to write out what you want the computer to do using a code or writing in a specific way the computer will understand. It is like a recipe, if the computer understands the instructions in your recipe, it will make what you want. You can change the ingredients and the amount, to cook for more or less people but the instructions need to be perfectly understandable for the computer. Show the code.org video: What most schools dont teach - Lead a quick discussion about who was in the video and any questions they might have.
Materials
10 min
Time
Seeing Website Code All websites are written in some kind of code. Go to one of the websites they listed as their favorite and show the source code. - Different browsers are different but on Firefox this is done by clicking the firefox dropdown menu then clicking web developer - You can also show them the 3D view by selecting the cube icon on the upper-right hand side of the web developer to show them the layers of any website. Go over some of the features of the code and explain that we will use a program that will write this code for us, but all
Materials
10 min
websites, computer programs, and games are like this at their most basic level. Have them try to see the code behind their favorite website by following the steps above Coding Practice Materials Show the HTML5 video by topic simple Explain that HTML is used because we have different devices, web browsers like safari, firefox, internet explorer, etc. so it is important to have standard codes that they all understand. Although developers are making it easier to code and can make programs to help you write all that code it is important to know the basic language as we have seen in our videos today So now the students will try to do some real basic coding using html Have them go to www.w3schools.com/html/ Scroll down and click try it yourself Have the students follow along with your step-by-step instructions on the projector: http://www.yo - First type in anything you want where it says My First utube.com/wa Heading and My first paragraph tch?v=mzPxo7 - Click submit code to see the resulting changes Y6JyA - Now copy the <p>My first paragraph.</p> line and paste it on the line below making another paragraph http://www.w3s line chools.com/htm - Submit code and see that you can duplicate code l/tryit.asp?filena without typing everything out over again me=tryhtml_intr - Now we can change how the words look by adding o other codes - Type EXACTLY: style="color:red" right after the h1 to change the color of your header - Try to change the color to blue - Now try to change the color of your paragraphs At this point circulate around and help those that not changed the color. Those that finish can put a ; after the color and try changing the font and the size by adding: fontfamily:papyrus; font-size:20px; inside the parenthesis Students who need extra help will continue until they have been able to change the color of all fonts while the others can play with the size and style of the font as an extension. Closing Materials
Vocabulary List
Time
20 min
Time 5 min
Ask students to define Coding and HTML Have them add these two definitions to their vocabulary list and save it as an exit pass
ASSESSMENT
I will check that each student has been able to follow the coding instructions and have defined Coding and HTML before they move on.
Lesson 4: Weebly Intro Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: In this lesson students will begin learning how to use Weebly by creating a website about their favourite animal. I will demonstrate how to add and stylize text, how to add pictures, and format multiple pages. LESSON STRUCTURE:
Time Introduction Today we will practice designing websites Show them the steps to sign on to Weebly as a student Show them on the right-hand side that their account is part of a class created by the teacher so the teacher can see anything they do on the site. If they want to change their password so other students cannot log on to their account that is OK, just click account settings and change password. But know that the teacher still can look up their password. Show what happens when you click create a site Explain that their work is saved automatically and they are not to click publish. We will do a practice site together first that will be deleted, it is not to publish. Everyone is going to create a website about their favorite animal. Give expectations: - You will only be on Weebly today, no other websites - If you are being too silly and distracting others you will have to just watch and you will not get to make your own website today - Follow instructions exactly so I know you understand Materials
10 min
www.Weebly.c om
Time
40 min
Creating First Website Give all of the students their username and password and have them log-in to weebly.com then follow these steps: 1) Click create a site 2) Title the site with practice, (your favorite animal) 3) Click the title and change it to (Animal you chose) are Awesome *Pause here to make sure everyone is ready and have them all watch the next 6 steps before they start 4) Hover your mouse over the picture in the middle of your site and click Edit Image then Add Image 5) Next along the top where it says select images from: click
Materials
search 6) Type in the name of your animal 7) Notice what it says at the bottom-Free photos are available
via a Creative Commons license requiring attribution. An attribution link will be automatically added to your website footer. This means that when you add a picture from here
it will automatically give credit to who owns the picture! These are all safe and free to use. 8) Select a picture and what you make fit inside the highlighted rectangle will be what you see on your site 9) Then click save and then save to all pages, this means that if you have more than one page on your site this will be at the top of each page *Now let them try to add their picture and move around the classroom helping those that need it 10) Now on the left side scroll down to where it says columns 11) Click and drag the columns box underneath your picture 12) When your mouse is over the columns you created you can choose how many columns, lets click 3 13) Where it says drag elements here click and drag the text box into one of the columns 14) Now click that text box and write a reason you like that animal 15) Highlight the text and make it bigger by clicking the + 16) Center the text by selecting the paragraph icon and choosing the align center option 17) Now drag the image box underneath your text 18) Choose another image of your animal 19) Add text and an image to the other three columns *Circulate and check as they do the other 2 columns 20) Now drag the title box above the columns and write: Why I Like ______ 21) Go to the DESIGN OPTIONS tab and click change fonts, choose a font for the title and body text *Check an wait for everyone to choose a font 22) Now go to the PAGES tab 23) Click Add Page + and the standard page option 24) Name the page Diet 25) Have the students add pictures and text about what their animal eats 26) Freely experiment with creating this page for the remainder of the time Explain to them that they now click publish, but this site is password protected so other people on the internet cannot see it and it will be deleted. Choose a domain name that has not been taken. Do not select anything else.
Time
Conclusion
Materials
10 min
Have them click the logo with three lines at the very upper right hand corner and select Exit Editor Lastly they will get to view their website by clicking the domain name under the name of their website. Give them the password and let them click around their site
OPTIONAL HOMEWORK: If the students have internet access outside of class they can continue working on this website on their own time. ASSESSMENT
There is formative assessment when checking on each student when walking around in-between steps. Then, as more of a summative assessment, review their sites after class through the teacher account.
Lesson 5: Partner Web Design Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: In this lesson students will pair up to create another web page about a sport or hobby. They will learn how to create buttons and links as well as practicing previously learned skills on their own. LESSON STRUCTURE:
Time 10 min Introduction Before the students start their computers give an overview of what they are going to do today: They will work in pairs to create a website about a hobby or sport on their own. To being this time they will go to the DESIGN tab and click Change Theme They can choose any theme they want to match their hobby/sport Make it clear that they are going to change most of what the template starts off with. For example they must change whatever picture the template starts with, so dont choose the theme based on a picture it has Same expectations: quiet, on-task, but they can go on other websites to get information on their hobby or sport Creative Time The teacher can assign partners or have them find another partner that wants to make a site on the same hobby. Give clear requirements: - Change the main picture and all of the text on the template they choose - They must have 3 or more pages to this website - They must get facts from other sites about their subject and create a links to those other sites (This will be demonstrated during the lesson once they have found other sites to link to) Make sure they know how to open up other tabs on their browser. Have them choose one of their Weebly accounts to create the website on, and explain that it does not matter whose account they use because this is just practice and the site will not be published. Plus both partners need to spend time being the one controlling the mouse. Materials
www.Weebly.c om
Time
Materials
20 min
Time
Links Once they are settled in and have found sources and made progress on their website have them pause and follow along with your tutorial on how to create two different kinds of links 1. Highlight a word or phrase in some part of your text that you learned from a different website 2. Click the icon that looks like a chain link 3. In a different tab go to where you learned that fact 4. Copy the web address 5. Go back to Weebly and paste the web address in where it says Website URL 6. Check the box that says open link in new window 7. Now lets try to create a button 8. Go to a page on your website that is not your home page 9. Scroll down on the left until you see the Button box. 10. Drag that box to the bottom of your page 11. Click on it and name it Home 12. Now click on the menu that pops-up when you click the button click Link option 13. Choose the second option, to link to the home page of your website. This lets people click to go to a different part of your website. You can also make buttons link to other websites just like we did on our other link. Give them time to continue working on their sites while you circulate and make sure they all were able to successfully make the two types of links you demonstrated Conclusion Reward the two partners that worked the best and accomplished the most by letting them present their website to the others on the projector. So publish their websites for now and have them show everyone the links and features of their site
Materials
20 min
Time 10 min
Materials
Projector
ASSESSMENT
There is formative assessment when checking on each student when walking around during the work-time. There is also summative assessment when trying out their links after class.
Lesson 6: Research Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: In this lesson students will begin their individual project. They will practice researching online, collecting media, and writing citations. This lesson can be done in conjunction with research for a social studies project. LESSON STRUCTURE:
Time 10 min Intro to Web Research Introduce the project; each student will create their own website about what they are researching in social studies. This is their final project for this unit and will be what they publish publicly if they have parental permission to do so. Today the goal will be to collect information, images, and find trustworthy websites about your subject. Go over some ways to tell if a website is trustworthy showing different sites on the projector: - Look for citations, where they got their information - If possible, look at the sources they cite - Look at the copyright information - Look for the author or the company that owns the website Materials
Time
Practice Writing Citations Have them all open up a Word document and title it: Works Cited This will be where they can gather facts and citations for their website. Write an example of a simple citation for a website on the projector and have them copy it:
Materials
10 min
Author Last Name, First Name (Date of publication). Title of document. Retrieved from http://Web address Angeli, Joe, (2010, May 5). General format. http://owl.english.purdue.edu/owl/resource/560/01/ Depending on the grade they are in and how much they have practiced citations this can be altered. The goal is just to get them used to giving credit; it is not a citation course. So focus on at least giving the authors name (if there is one) and the
Projector
web address Review using images from the web and demonstrate saving an image and then recording a citation for that image on the Works Cited document including at least the Author, Title of the image, and web address
Time
Research Give the rest of the time for research and writing for the website. Guidelines: - Find and write a citation for at least 3 web sources - Write at least one paragraph in your own words about your subject - Collect some images and their citations Circulate and make sure students are actually reading and writing about their subject and not just looking up images Closing Discussion To end the lesson and give students some ideas for their own website the teacher can lead a discussion of some of the features they noticed on other websites as they were browsing. What do they like on a website? What dont they like? What is useful/important for a website to have?
Materials
40 min
Time
Materials
5 min
HOMEWORK: Continue research and completing any of the guidelines that were not finished. ASSESSMENT:
Check for all three of the guidelines given for each student.
Lesson 7: Building Final Website Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: Students will begin building their website during this lesson. They will get freetime to experiment and problem solve with web design while creating an informational site about their social studies project. LESSON STRUCTURE:
Time Website Requirements The lesson will begin with a discussion of what their website will be required to have: - At least 3 pages - Citations for where they got their information and pictures - Links to other websites where they found their information - Pictures with labels - Added columns and dividers to the website structure - At least 6 of the box features - At least 3 paragraphs (Additions/alterations may be necessary depending on the subject of their website) Then discuss other features they like that could be included to get a score of ME (meets with excellence) Show them how to find the grading rubric on my website Work Time 50 min The rest of the class will be time given to independent work on their websites and research Give expectations of being on-task Circulate and give additional help those you know have been struggling Materials
10 min
Rubric (attached)
Time
Materials
ASSESSMENT:
Take notes on what students are struggling with and with what you see few of them using so you can give further instruction in those areas at the start of the next lesson
Lesson 8: Continue Building Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: This lesson will give additional time to finish their websites and try adding new features. LESSON STRUCTURE:
Time 10 min Intro Take the first 5-10 minutes reviewing what you noted as lacking during the last lesson Make it clear that the websites that are the most original looking will get a higher grade. Try to change as much as you can from the template Lesson Independent work time This is the last of their class time to finish their websites, if they feel finished, have other students who are finished view their sites and give feedback Closing/HTML Review 10 min Review how to publish and have all of the students publish their work Then have them go to their websites and double check that everything is working and looking right Materials Materials Materials
Time 40 min
Time
ASSESSMENT:
Formative assessment
Lesson 9: Website Critique Teacher: Nick Reed LENGTH: 1HR LESSON OBJECTIVES: This is the culminating lesson where the students will get to share what they have accomplished with each other and review what they have learned. LESSON STRUCTURE:
Time 10 min HTML Review Lead a review discussion on what HTML and Coding are. With their website editor open have them click Design and then Edit HTML Then they can see the HTML code for the websites they are designing Website Gallery 40 min Either post links to everyones website on the teacher website and have the students go to each others sites or have each student present their site on the projector one at a time Have the students make a couple positive comments or questions about each website Post-Survey 15 min Give the same survey from the beginning of the course and have them fill it out with only their number and no name Materials Post-Survey Materials Materials
Time
Time
ASSESSMENT:
Review all of their websites according to the rubric to give a summative assessment of the unit content. Also mach up the pre and post assessments to gauge the success of the course on student interest in computer science.
Number:_____ Date:_________________
Answer the following questions as best as you can by checking one box for each:
strongly agree
disagree
1. 2.
I enjoy using computers I Would like to have a job in the future where I use a computer I could make a good website I think I am good at using computers and other electronics I know how to use the internet Websites are always truthful It is fun to learn on computers I understand how programs and websites are made I can be creative on a computer Computer technology is important to know about
3. 4.
5. 6. 7. 8. 9. 10.
strongly disagree
agree
Name Date Web Design Vocabulary: Link Domain Name Address Bar Navigation Menu Icon Publish HTML Coding Copyright License Creative Commons Plagiarism Citation Fair Use
Copyright Quiz Circle True or False: 1. Lisa is writing a fictional story about a fisherman. Lisa learns some fishing tricks from a book about fishing. She then writes about the fisherman in her story using those tricks in her own words. She is plagiarizing: True or False
2. Lisa finds a photo online and uses it as the cover of her story. The cover only says the title of her story and her name. Lisa is breaking copyright law: True or False
3. Fair Use is when you ask someone permission to use their work: True or False
Multiple Choice: Circle the correct answer 4. Creative Commons is: a) creative work done at school c) a citation b) a type of copyright license d) a place to put pictures
5. If I am writing a story about King Kamehameha and I want to include a fact I learned about him from a website I should be sure to: a) include a picture. c) change the fact a little. b) put a copyright symbol after I right the fact. d) give credit to the website where I found that fact with a citation.