Loyola University ChicagoLoyola eCommonsComputer Science: Faculty Publications and OtherWorks Faculty Publications11-2012My Materials Supporting the Exploring ComputerScience CurriculumRonald GreenbergRgreen@luc.eduThis Other is brought to you for free and open access by the Faculty Publications at Loyola eCommons. It has been accepted for inclusion in ComputerScience: Faculty Publications and Other Works by an authorized administrator of Loyola eCommons. For more information, please contactecommons@luc.edu.This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.© 2012 Ronald I. GreenbergRecommended CitationGreenberg, Ronald. My Materials Supporting the Exploring Computer Science Curriculum. , , : , 2012. Retrieved from LoyolaeCommons, Computer Science: Faculty Publications and Other Works,My Materials Supporting the Exploring Computer Science CurriculumIncluded here will be my personal materials supporting the Exploring Computer Science (ECS) curriculum, specifically version 4.0. (Some teachers in Chicago may also be using a version of this curriculum with integrated experiences providing preparation for Microsoft Office Specialist certification: Taste of Computing curriculum.)My materials have not been reviewed by others, and do not have any official status within the ECS curriculum; rather they are simply a few handouts, web pages, and suggestions that I have prepared to support certain pieces within the ECS curriculum.Most of my materials are available inPDF format. (If you don't have it already, you can download the free Adobe PDF Reader for .pdf files.)LaTeX format. (If you are not already familiar with this format, you will probably want to skip over it, but here is a starting point for learning more about LaTeX.) Feel free to edit and repackage these materials for your own use. If you are not familiar with LaTeX, you will probably want to cut-and-paste from the PDF to whatever document preparation tool you prefer.My materials are organized under the standard ECS units, just the first three for now:Unit1: Human Computer InteractionUnit 2: Problem SolvingUnit 3: Web Design© 2012 Ronald I. GreenbergMy Materials Supporting Exploring Computer Science Curriculum Unit 1Included here will be my personal materials supporting the Exploring Computer Science (ECS) curriculum, specifically version 4.0. (Some teachers in Chicago may also be using a version of this curriculum with integrated experiences providing preparation for Microsoft Office Specialist certification: Taste of Computing curriculum.)My materials have not been reviewed by others, and do not have any official status within the ECS curriculum; rather they are simply a few handouts, web pages, and suggestions that I have prepared to support certain pieces within the ECS curriculum.Most of my materials are available inPDF format. (If you don't have it already, you can download the free Adobe PDF Reader for .pdf files.)LaTeX format. (If you are not already familiar with this format, you will probably want to skip over it, but here is a starting point for learning more about LaTeX.) Feel free to edit and repackage these materials for your own use. If you are not familiar with LaTeX, you will probably want to cut-and-paste from the PDF to whatever document preparation tool you prefer. These materials are presented in the same order as the standard curriculum for Unit 1 and labeled with appropriate topical descriptions. Many topics are skipped, since it may be sufficient to hand out things copied directly from the official curriculum or materials that it references. I include here only additional/modified handouts. In a few places, I have introduced minor innovations such as replacing discussion of certain kinds of activities with activities that are less sensitive for high school students in conservative communities. I also created a couple supplements up front that are not directly connected to the ECS curriculum but might be useful if time is available. (See also available materials for other units.)Supplement with some direct education about computing applications and careers in the form of questions with references that you could go through in class; includes robotics videos generally of high interest to students. HTML.Supplement with information about metric prefixes, bits, bytes, nibbles, pixels, and other hardware terms; some of this could be useful for computer buying project. PDF, LaTeX.Questions with references for website evaluation. Part assumes you have copied and distributed the website evaluation rubric from ECS. HTML.Communication Methods Chart with a few changes in the list of scenarios, for example planning a surprise party instead of gossiping. PDF, LaTeX.Privacy Activity with activities less sensitive for high school students: PDF, LaTeX.Handouts for 5 groups for Room Activity:1. Group 1: Directions for picture. PDF, LaTeX.2. Group 2: Directions for word cloud. (Need to cut and paste word cloud in empty space.) PDF, LaTeX.3. Group 3: First word list and directions. PDF, LaTeX.4. Group 4: Second word list and directions. PDF, LaTeX.5. Group 5: Third word list and directions. PDF, LaTeX.6. Second page common to all groups. PDF, LaTeX. (The word cloud here is a good leadin for an activity to use when students are to report/discuss on reading material; see what I have at the beginning of Unit 2 for the articles on privacy/data.Communication Methods and Data Chart with a few changes in the list of scenarios to correspond with Communication Methods Chart above. PDF, LaTeX.For convenience in conducting Computer Science Unplugged Activity 20 (Conversations with Computers --- The Turing Test), these handouts provide the questions for the class to look at and answer/reference sheets for the students playing computer and human:Questions. PDFQuestions and answers for computer. PDF, LaTeX.Questions/instructions for human. PDF, LaTeX.A chatterbot handout based on ECS page 73 Part I; the online version includes clickable links to the referenced websites. This handout references the 17 Turing Test questions from Computer Science Unplugged Activity 20. PDF, LaTeX.An additional activity I suggest is to have students play rock-paper-scissors at http://www.nytimes.com/interactive/science/rock-paper-scissors.html and reflect on the results. (This also foreshadows Instructional Day 18 in Unit 4.)Other units: Next Unit: Unit 2, Unit 3.© 2012 Ronald I. GreenbergMy Materials Supporting Exploring Computer Science Curriculum Unit 2Included here will be my personal materials supporting the Exploring Computer Science (ECS) curriculum, specifically version 4.0. (Some teachers in Chicago may also be using a version of this curriculum with integrated experiences providing preparation for Microsoft Office Specialist certification: Taste of Computing curriculum.)My materials have not been reviewed by others, and do not have any official status within the ECS curriculum; rather they are simply a few handouts, web pages, and suggestions that I have prepared to support certain pieces within the ECS curriculum.Most of my materials are available inPDF format. (If you don't have it already, you can download the free Adobe PDF Reader for .pdf files.)LaTeX format. (If you are not already familiar with this format, you will probably want to skip over it, but here is a starting point for learning more about LaTeX.) Feel free to edit and repackage these materials for your own use. If you are not familiar with LaTeX, you will probably want to cut-and-paste from the PDF to whatever document preparation tool you prefer. These materials are presented in the same order as the standard curriculum for Unit 2 and labeled with appropriate topical descriptions. Many topics are skipped, since it may be sufficient to handout things copied directly from the official curriculum or materials that it references. I include here only additional/modified handouts. (See also available materials for other units.)Convenient 2-page (11pt type) version of New York Times article about search data referenced for instructional days 1--2. This version elides sexually-related and suicide-related material. PDF, LaTeX.Convenient 2-page (11pt type) version of New York Times article about online privacy referenced for instructional days 1--2. PDF, LaTeX.Suggestion based on an idea of Baker Franke: For each article, have students read and then submit through a Google form 10 keywords they think are most descriptive of what the article is about. Then collect all the submitted words and make a word cloud at http://wordle.net.A handout with a scenario and questions to get students thinking about a community problem. PDF, LaTeX.A general list of problem-solving strategies that could be useful to present to students; got this from Dan Wheadon at a professional development workshop. HTMLA handout presenting the four problem solving steps and helping guide students to work on the candy bar problem. PDF, LaTeX.A handout to help guide students through the dictionary exercise for linear and binary search. PDF, LaTeX.Other units: Previous Unit: Unit 1, Next Unit: Unit 3.© 2012 Ronald I. GreenbergMy Materials Supporting Exploring Computer Science Curriculum Unit 3Included here will be my personal materials supporting the Exploring Computer Science (ECS) curriculum, specifically version 4.0. (Some teachers in Chicago may also be using a version of this curriculum with integrated experiences providing preparation for Microsoft Office Specialist certification: Taste of Computing curriculum.)My materials have not been reviewed by others, and do not have any official status within the ECS curriculum; rather they are simply a few handouts, web pages, and suggestions that I have prepared to support certain pieces within the ECS curriculum.Most of my materials are available inPDF format. (If you don't have it already, you can download the free Adobe PDF Reader for .pdf files.)LaTeX format. (If you are not already familiar with this format, you will probably want to skip over it, but here is a starting point for learning more about LaTeX.) Feel free to edit and repackage these materials for your own use. If you are not familiar with LaTeX, you will probably want to cut-and-paste from the PDF to whatever document preparation tool you prefer. (See also available materials for other units.) For this unit, I have created a set of handouts that can be used to complete the web design work with minimal access to the internet in case of connectivity that is not entirely reliable. The parts in my plan that use internet access are as follows; generally, one could even work around these items:Grabbing images and manipulating using Photoshop Express. (Could potentially avoid internet access if some version of Photoshop is installed locally.)Exploring available colors. (Could just provide a more limited set of colors to students.)Exploring more advanced styling than in the handouts, but this is an optional activity. I have done a little bit of reordering of the ECS material relative to the ECS order, and developed the following set of instructions to students in four parts:Web Design Part 1: Creation of an initial web page including at least a title, headings, paragraphs, two links, and other specific requirements. PDF, LaTeX.Web Design Part 2: Preparing and inserting images. PDF, LaTeX.Web Design Part 3: Incorporating emphasized and strongly emphasized text, inline styling, and an internal style sheet. PDF, LaTeX.Web Design Part 4: Creating a site of three interrelated pages and using an external style sheet. Also tables and ordered and unordered lists. PDF, LaTeX.Other units: Previous Unit: Unit 2, Unit 1.© 2012 Ronald I. GreenbergSome questions with references for learning about computing applications and job prospects1. List six to ten things that a robot can do. (References: bionic arms video, realistic robot woman video, robotic snake video, "Big Dog" video, Humanoid robot Nao.)2. List three fields of study other than computer science where computers are very useful and explain how. (References: CMU Roadshow excerpt, Presentation by Jeanette Wing.)3. According to the 10-year projections prepared by the Bureau of Labor Statistics in 2008, what are the four fastest growing occupations? (For this question and next two, see beginning of jobs sheet.)4. According to the 2006 CNN analysis of the highest-paying, fastest-growing jobs, which two are the highest paying jobs among those listed in your answer to the previous question?5. In the 2011 ratings of CareerCast.com, what is the best job in America based on based on work environment, stress, physical demands, and hiring outlook?Here are some terminologies relating to computing hardware, etc.1 Metric prefixesSome of these prefix names may be familiar, but here we give more extensive listings than mostpeople are familiar with and even more than are likely to appear in typical computer science usage.The range in which typical usages occur is from Peta down to nano or pico.A further note is that the terminologies are classicly used for powers of 10, but most quantitiesin computer science are measured in terms of powers of 2. Since 210 = 1024, which is close to 103,computer scientists typically use these prefixes to represent the nearby powers of 2, at least withreference to big things like bytes of memory.For big things:Power In CS, Place-value Metric metricof 10 may be name prefix abbrev.103 210 thousands kilo k106 220 millions mega M109 230 billions giga G1012 240 trillions tera T1015 250 quadrillions peta P1018 260 quintillions exa E1021 270 sextillions zeta Z1024 280 septillions yotta YFor small things:Power In CS, Place-value Metric metricof 10 may be name prefix abbrev.10−3 2−10 thousandths milli m10−6 2−20 millionths micro µ10−9 2−30 billionths nano n10−12 2−40 trillionths pico p10−15 2−50 quadrillionths femto f10−18 2−60 quintillionths atto a10−21 2−70 sextillionths zepto z10−24 2−80 septillionths yocto y2 Bits, bytes, nibbles, and pixelsInformation in computers is essentially stored as sequences of 0’s and 1’s. For numbers, this isreferred to as a binary or base two representation, whereas our usual number system is base ten.We will learn more about binary numbers later, but for now, we just want to be aware that numberscan be represented with the two digits 0 and 1 in base two rather than the digits 0 through 9 thatwe use in base ten.The term bit refers to one binary digit, i.e., a 0 or a 1. Since a bit can have just two values,it is enough to represent one small piece of information, e.g., a “yes” or “no” to some question.1Typically, bits are organized into larger chunks that encode more information. For example, 8 bitsare enough to represent the numbers from 0 to 255. A collection of 8 bits is referred to as a byte.Occasionally, computer scientists also like to refer to chunks of 4 bits; the term for this is a nibble.Bits may be abbreviated as “b” and bytes as “B”; for example “6GB” would mean six gigabytes(see metric prefixes below).The term “pixel” comes from “picture element”. It is a single tiny dot on a computer monitor.Color displays, generally specify an amount of red, an amount of green, and an amount of blue foreach pixel, with the amount of each color expressed as a number from 0 to 255. The range from0 to 255 is exactly what can be represented with one byte. (Again, we will learn more later aboutrepresenting numbers in binary, but the 256 values we want to represent can be done with one byte,because there are 8 bits in a bit, and 256 = 28.)Based on our discussion so far, we can see that 3 bytes of storage are required to representone pixel. So if you have, for example, a 2 megapixel camera, the pictures it takes will require6 megabytes if stored in a naive fashion. In reality, the storage requirement is generally severaltimes less than this, because pictures are typically stored in a format such as JPEG that doesimage compression. Instead of just listing the three color values for every pixel in the image, moresophisticated coding techniques are used. For example, if a corner of the image containing 100pixels is a background of a solid color, we could just note the boundaries of that region and that allthe pixels are of the same color instead of listing that color 100 times. JPEG images are actuallyonly an approximation of the original picture, but it is generally possible to reduce the storagerequirement greatly without doing anything that the human eye will notice.3 Other terms you may see in computer adsA limited selection is included here.• OS: Operating System• HD: High definition (in reference to monitors)• RAM: Random-access memory. Refers to the working memory in the computer that pri-marlily determines the speed with which you can run complex applications manipulating alot of data. Often, you will see specific varieties mentionend such as SDRAM (xynchronousdyanamic), DDR (double data rate), etc.• MHz: Megahertz (i.e., millions of cycles per second). You may see this as a rating of how fastthe memory or the central processor can operate. Usually, a higher clock rate means being ableto do things more quickly, but it is not an extremely reliable indicator; it just measures thefrequency of executing elementary steps, but some processors utilize less powerful elementaryoperations than others.• RPM: Revolutions per minute. Along with the number of bytes of storage, this is the othermain measure for disk drives. The RPM gives some idea of how fast information can beread/written on the disk drive. (Some drives may also make reference to a RAID level, whichrefers to a method of using multiple disks for increased speed and/or redundancy (backup).)• USB: Universal serial bus. The most common mechanism for connecting peripherals likecameras and phones to your computer. There are different versions, e.g., 2.0, 3.0, eachallowing for faster data transfers if both the computer and peripheral support it.2Some Website Evaluation MaterialsMartin Luther King We will look a bit at the four sites that turn up in the top of a Google search for "Martin Luther King". Use the links here to look at these sites (the last with a bit of inappropriate language masked):1. http://thekingcenter.org2. http://en.wikipedia.org/wiki/Martin_Luther_King,_Jr.3. http://www.nobelprize.org/nobel_prizes/peace/laureates/1964/king-bio.html4. Front page from martinlutherking.org here at mlkorg.pdf For each of these four sites, make a note in your journal of what sort of organization or people have authored the site and what sort of goals the presentation evidences.World Trade Organization Both of the pages here are titled "World Trade Organization" and bear its logo:1. http://www.gatt.org2. http://www.wto.org Examine these two sites, and decide which is the real World Trade Organization site. Make a note in your journal of which URL is the correct site.Evaluation of web sites for your own research In your desk pairs, look at two web sites you would consider as sources of information for an upcoming required report in another class or a topic one of you has recently researched. For each of them, fill out a copy of the ECS rubric (from page 40 of ECS curriculum version 4.0). Include partner names and the full URL of the web site on the top of each rubric sheet.A more extensive rubric If you have time, you can look at the more extensive rubric at http://www-personal.umich.edu/~pfa/pro/courses/WebEvalNew.pdf for further ideas of possible considerations in evaluating web sites, but we will not get so detailed in our work in this course.© 2012 Ronald I. GreenbergNameCommunication Methods ChartLet’s consider some different ways you can communicate with others. For each of the following scenarios,fill in the table below with the method you would choose for that scenario and why. The methods are:• Texting• Phone call• Talking in person• MySpace / Facebook• Twitter• EmailScenario to communicate Method Why you chose this method1. Canceling an activity when it will reallydisappoint a friend2. Asking parents’ permission to do some-thing when you think they’ll likely say “no”3. Figure out where and when to meet afriend for pizza.4. Plan a surprise birthday party for some-one who could hear you if you spoke.5. Plan a surprise birthday party for some-one not around you.6. Get help on homework.7. Feedback on a big decision (like whatcolor dress for a big event, what game tobuy, what phone to get)8. Announce you met someone famous.9. Mourn someone you lost.10. Buy something from someone youdon’t know well.Additional questions:1. How would life be different if you could only communicate 1-on-1 instead of with multiple people at once?2. How would life be different if you could only communicate in person?Privacy ActivityData are everywhere. You are ’giving off data’ and providing data to others all the time.Sometimes this data can be directly linked to you as an individual; sometimes not.Read the scenario assigned to you (some based on real stories):A. A boss sees an employee who called in “sick” in a picture that someone posted onFacebook. In this picture, the employee is at a ball game on the day of the “sickness”.The boss fires the employee.B. A company that has contracts with the Federal Government doesn’t want to hireyou because a Facebook friend leaves lots of anti-government postings on your wall.C. A teacher at a public school is fired because there’s a picture of this teacher holdingalcoholic drinks on her MySpace page.D. Someone’s Netflix rental history is being used as evidence in a murder case becausethis person rented a lot of horror movies.E. A student is called in to the principal’s office for disciplinary action, because herFacebook page shows postings in which she makes fun of another student becauseof the way she dresses.Prepare a 3–5 minute presentation for the class that includes answers to the following:1. Names of everyone in your group.2. The scenario you were assigned.3. In your scenario, did the people have the right to use the information they did, orshould it have been private? Why?4. Are the people who were affected by the use of this information at fault? Why?5. Give another example of something unexpected happening because of informationshared at sites such as Facebook, Twitter, MySpace, blogs.6. Think about what data you’ve made available in different places/spaces such as Face-book, Twitter, texting, Netflix, email, at the grocery store, etc. What might otherpeople think about who you are based on these data? Is it an accurate impression ofwho you are?7. Consider each of the following broad categories of societal change:• Privacy• Safety• Globalization• Connectivity (keeping in touch with people)• Permanence of historical informationDiscuss whether availability of data has had a positive or negative impact on eachaspect of society and, if negative, how these consequences can be minimized.Group 1Look at the picture in your handout or athttp://rig.cs.luc.edu/~rig/ecs/hci/RoomPicture.doc (landscape mode).1. As a group, make a list of the objects in the picture.Then each student should answer the following questions in your journal:2. What does the data tell you about the person who lives in this room? What does itnot tell you?3. What are most of the items in this room related to?4. How many toy soldiers are there?1Group 2Consider the following items found in someone’s room as per this word cloud:1. As a group, draw a picture of the room including each of the items from the list above.Then each student should answer the following questions in your journal:2. What does the data tell you about the person who lives in this room? What does itnot tell you?3. What are most of the items in this room related to?4. How many radios are there?1Group 3Consider the following items found in someone’s room:• Lava lamp• Books(10)• Burger• Cell phone• Pringles can• Television• Calendar• Glasses• Sandwich• Pizza• Paintings(2)• Person• Sprite can1. As a group, draw a picture of the room including each of the items from the list above.Then each student should answer the following questions in your journal:2. What does the data tell you about the person who lives in this room? What does itnot tell you?3. What are most of the items in this room related to?4. How many radios are there?1Group 4Consider the following items found in someone’s room:• Trophy• Pizza• Guitar• Sandwich• IPod with ear buds• Radio(2)• Toy soldiers(3)• Person• Shoe• Cell phone• Violin• Harry Potter poster• Ribbons(3)• Sandwich• Laptop• Goldfish1. As a group, draw a picture of the room including each of the items from the list above.Then each student should answer the following questions in your journal:2. What does the data tell you about the person who lives in this room? What does itnot tell you?3. What are most of the items in this room related to?4. How many radios are there?1Group 5Consider the following items found in someone’s room:• Books(75)• Burger• Globe• Gold medal• Goldfish• Harry Potter poster• Phone• Paintings (2)• Person• Plaques(3)• Posters(8)• Ribbons(3)• Toy soldiers(3)• Trophy• Violin1. As a group, draw a picture of the room including each of the items from the list above.Then each student should answer the following questions in your journal:2. What does the data tell you about the person who lives in this room? What does itnot tell you?3. What are most of the items in this room related to?4. How many radios are there?1Now compare your results with the other groups, and answer the following questions:5. Are there any advantages to one representation or another?6. Do you think different representations can tell different stories?7. What do you think came first, the drawing of the room or the list?2NameCommunication Methods and Data ChartLet’s look at what kinds of data you ’give off’ when using the different forms of communication. For each ofthe following examples, fill in the table below with which method you chose for the given scenario and why (youshould already have completed that part) and the other information indicated. Keep in mind that “data” hereis not just the content you communicate (what you say or write) but could also refer to details like the time ofa telephone call and the number. The methods are: Texting, Phone call, Talking in person, MySpace /Facebook, Twitter, Email.Scenario to com-municateMethod What data isavailable?Who has ac-cess to thedata?What can belearned fromthe data inaggregate?Why youchose thismethod1. Canceling an ac-tivity when it willreally disappoint afriend2. Asking parents’permission to dosomething when youthink they’ll likelysay “no”3. Figure out whereand when to meet afriend for pizza.4. Plan a surprisebirthday party forsomeone who couldhear you if you spoke.5. Plan a surprisebirthday party forsomeone not aroundyou.6. Get help on home-work.7. Feedback on a bigdecision (like whatcolor dress for a bigevent, what game tobuy, what phone toget)8. Announce you metsomeone famous.9. Mourn someoneyou lost.10. Buy somethingfrom someone youdon’t know well.Additional question:How does the type of data being exchanged affect which method you choose?1. What is the name of Bart Simpson’s baby sister?2. What do you think of Roald Dahl?3. Are you a computer?4. What is the next number in the sequence 3, 6, 9, 12, 15?5. What do you think of nuclear weapons?6. What is 2× 78?7. What is the square root of two?8. Add 34957 to 70764.9. Do you like school?10. Do you like dancing?11. What day is it today?12. What time is it?13. How many days are there in February in a leap year?14. How many days are there in a week?15. For which country is the flag a red circle on a white background?16. Do you like to read books?17. What food do you like to eat?Instructions: Choose questions from this list to ask the hidden humanand “computer”.From “Computer Science Unplugged”c©Bell, Witten, and Fellows, 1998Page 225Turing Test answers for person pretending to be the computer1. What is the name of Bart Simpson’s baby sister?I can’t remember.2. What do you think of Roald Dahl?He writes funny books.3. Are you a computer?Are you a computer?4. What is the next number in the sequence 3, 6, 9, 12, 15?185. What do you think of nuclear weapons?Nuclear Weapons are very dangerous and should not be used.6. What is 2× 78?166 (deliberately incorrect)7. What is the square root of two?1.414213562373095048788. Add 34957 to 70764.Wait for about 20 seconds before giving the answer: 1056219. Do you like school?Yes, I like school.10. Do you like dancing?Yes, I like dancing.11. What day is today?Give correct day of the week.12. What time is it?Give correct time.13. How many days are there in February in a leap year?2000 and 2004 are leap years.14. How many days are there in a week?Seven.15. For which country is the flag a red circle on a white background?I don’t know.16. Do you like to read books?Yes, I like to read books.17. What food do you like to eat?I’m not hungry, thanks.Turing Test answers for human1. What is the name of Bart Simpson’s baby sister?Give your own answer.2. What do you think of Roald Dahl?Give your own answer.3. Are you a computer?Give your own answer.4. What is the next number in the sequence 3, 6, 9, 12, 15?Give your own answer.5. What do you think of nuclear weapons?Give your own answer.6. What is 2× 78?Give your own answer.7. What is the square root of two?Give your own answer.8. Add 34957 to 70764.Give your own answer.9. Do you like school?Give your own answer.10. Do you like dancing?Give your own answer.11. What day is today?Give your own answer.12. What time is it?Give your own answer.13. How many days are there in February in a leap year?Give your own answer.14. How many days are there in a week?Give your own answer.15. For which country is the flag a red circle on a white background?Give your own answer.16. Do you like to read books?Give your own answer.17. What food do you like to eat?Give your own answer.A program passes the “Turing Test” if a person can have a conversation with both it anda person and not be able to tell which one is the computer.Working in desk pairs, try each of the following chatterbots with your three questions,chosen as follows. Use the questions from TTQuestions.pdf corresponding to your seatnumbers (if applicable) and then supplement with whatever else you would like from the listor elsewhere.Complete the following in your journal.1. Try chatting with Eliza (http://nlp-addiction.com/eliza). Record the questionsand answers in your journal. How realistic is this chatterbot? Would it pass the TuringTest?2. Try chatting with Dr. Romulon (http://nlp-addiction.com/chatbot/dr.romulon).Record the questions and answers in your journal. How realistic is this chatterbot?Would it pass the Turing Test?3. Try chatting with Athena (athena.blueinfos.com). Record the questions and an-swers in your journal. How realistic is this chatterbot? Would it pass the TuringTest?4. Try chatting with InteliAvatar (inteliwise.com). Record the questions and answersin your journal. How realistic is this chatterbot? Would it pass the Turing Test?5. Which of the above chatterbots was the most like a real person?6. What is the Chatterbox Challenge (chatterboxchallenge.com)?Following is most of an article from the New York Times of August 9, 2006. Elisions areindicated an ellipsis.A Face Is Exposed for AOL Searcher No. 4417749By MICHAEL BARBARO and TOM ZELLER Jr. (reporting also contributed by Saul Hansell)Buried in a list of 20 million Web search queries collected by AOL and recently released on theInternet is user No. 4417749. The number was assigned by the company to protect the searcher’sanonymity, but it was not much of a shield.No. 4417749 conducted hundreds of searches over a three-month period on topics ranging from“numb fingers” to “60 single men” to “dog that urinates on everything”.And search by search, click by click, the identity of AOL user No. 4417749 became easier todiscern. There are queries for “landscapers in Lilburn, Ga”, several people with the last nameArnold and “homes sold in shadow lake subdivision gwinnett county georgia”.It did not take much investigating to follow that data trail to Thelma Arnold, a 62-year-oldwidow who lives in Lilburn, Ga., frequently researches her friends. medical ailments and loves herthree dogs. “Those are my searches”, she said, after a reporter read part of the list to her.AOL removed the search data from its site over the weekend and apologized for its release, sayingit was an unauthorized move by a team that had hoped it would benefit academic researchers.But the detailed records of searches conducted by Ms. Arnold and 657,000 other Americans,copies of which continue to circulate online, underscore how much people unintentionally revealabout themselves when they use search engines — and how risky it can be for companies like AOL,Google and Yahoo to compile such data.Those risks have long pitted privacy advocates against online marketers and other Internetcompanies seeking to profit from the Internet’s unique ability to track the comings and goings ofusers, allowing for more focused and therefore more lucrative advertising.But the unintended consequences of all that data being compiled, stored and cross-linked arewhat Marc Rotenberg, the executive director of the Electronic Privacy Information Center, a privacyrights group in Washington, called “a ticking privacy time bomb”.Mr. Rotenberg pointed to Google’s own joust earlier this year with the Justice Department overa subpoena for some of its search data. The company successfully fended off the agency’s demandin court, but several other search companies, including AOL, complied. The Justice Departmentsought the information to help it defend a challenge to a law that is meant to shield children fromsexually explicit material.“We supported Google at the time,” Mr. Rotenberg said, “but we also said that it was a mistakefor Google to be saving so much information because it creates a risk”.Ms. Arnold, who agreed to discuss her searches with a reporter, said she was shocked to hearthat AOL had saved and published three months’ worth of them. “My goodness, it’s my wholepersonal life,” she said. “I had no idea somebody was looking over my shoulder”.1In the privacy of her four-bedroom home, Ms. Arnold searched for the answers to scores of lifesquestions, big and small. How could she buy school supplies for Iraq children? What is the safestplace to live? What is the best season to visit Italy?Her searches are a catalog of intentions, curiosity, anxieties and quotidian questions. There wasthe day in May, for example, when she typed in termites, then tea for good health then matureliving, all within a few hours.Her queries mirror millions of those captured in AOLs database, which reveal the concerns ofexpectant mothers, cancer patients, college students and music lovers. User No. 2178 searches forfoods to avoid when breast feeding. No. 3482401 seeks guidance on calorie counting. No. 3483689searches for the songs Time After Time and Wind Beneath My Wings.. . .But while these searches can tell the casual observer — or the sociologist or the marketer —much about the person who typed them, they can also prove highly misleading.At first glace [sic], it might appear that Ms. Arnold fears she is suffering from a wide range ofailments. Her search history includes “hand tremors”, “nicotine effects on the body”, “dry mouth”and “bipolar”. But in an interview, Ms. Arnold said she routinely researched medical conditionsfor her friends to assuage their anxieties. Explaining her queries about nicotine, for example, shesaid: “I have a friend who needs to quit smoking and I want to help her do it”.Asked about Ms. Arnold, an AOL spokesman, Andrew Weinstein, reiterated the company’sposition that the data release was a mistake. “We apologize specifically to her”, he said. “There isnot a whole lot we can do”.Mr. Weinstein said he knew of no other cases thus far where users had been identified as aresult of the search data, but he was not surprised. We acknowledged that there was informationthat could potentially lead to people being identified, which is why we were so angry.AOL keeps a record of each users search queries for one month, Mr. Weinstein said. This allowsusers to refer back to previous searches and is also used by AOL to improve the quality of its searchtechnology. The three-month data that was released came from a special system meant for AOLsinternal researchers that does not record the users AOL screen names, he said.Several bloggers claimed yesterday to have identified other AOL users by examining data, whileothers hunted for particularly entertaining or shocking search histories. Some programmers madethis easier by setting up Web sites that let people search the database of searches.John Battelle, the author of the 2005 book The Search: How Google and Its Rivals Rewrote theRules of Business and Transformed Our Culture, said AOLs misstep, while unfortunate, could havea silver lining if people began to understand just what was at stake. In his book, he says searchengines are mining the priceless database of intentions formed by the worlds search requests.Its only by these kinds of screw-ups and unintended behind-the-curtain views that we can pushthis dialogue along, Mr. Battelle said. As unhappy as I am to see this data on people leaked, Imheartened that we will have this conversation as a culture, which is long overdue.Ms. Arnold says she loves online research, but the disclosure of her searches has left her disil-lusioned. In response, she plans to drop her AOL subscription. We all have a right to privacy, shesaid. Nobody should have found this all out.2Following is an article from the New York Times of March 16, 2010.How Privacy Vanishes OnlineBy STEVE LOHRIf a stranger came up to you on the street, would you give him your name, Social Security numberand e-mail address?Probably not.Yet people often dole out all kinds of personal information on the Internet that allows suchidentifying data to be deduced. Services like Facebook, Twitter and Flickr are oceans of personalminutiae — birthday greetings sent and received, school and work gossip, photos of family vacations,and movies watched.Computer scientists and policy experts say that such seemingly innocuous bits of self-revelationcan increasingly be collected and reassembled by computers to help create a picture of a person’sidentity, sometimes down to the Social Security number.“Technology has rendered the conventional definition of personally identifiable information obso-lete”, said Maneesha Mithal, associate director of the Federal Trade Commission’s privacy division.“You can find out who an individual is without it”.In a class project at the Massachusetts Institute of Technology that received some attention lastyear, Carter Jernigan and Behram Mistree analyzed more than 4,000 Facebook profiles of students,including links to friends who said they were gay. The pair was able to predict, with 78 percentaccuracy, whether a profile belonged to a gay male.So far, this type of powerful data mining, which relies on sophisticated statistical correlations, ismostly in the realm of university researchers, not identity thieves and marketers.But the F.T.C. is worried that rules to protect privacy have not kept up with technology. Theagency is convening on Wednesday the third of three workshops on the issue.Its concerns are hardly far-fetched. Last fall, Netflix awarded $1 million to a team of statisticiansand computer scientists who won a three-year contest to analyze the movie rental history of 500,000subscribers and improve the predictive accuracy of Netflix’s recommendation software by at least 10percent.On Friday, Netflix said that it was shelving plans for a second contest — bowing to privacyconcerns raised by the F.T.C. and a private litigant. In 2008, a pair of researchers at the Universityof Texas showed that the customer data released for that first contest, despite being stripped of namesand other direct identifying information, could often be “de-anonymized” by statistically analyzingan individual’s distinctive pattern of movie ratings and recommendations.In social networks, people can increase their defenses against identification by adopting tightprivacy controls on information in personal profiles. Yet an individual’s actions, researchers say, arerarely enough to protect privacy in the interconnected world of the Internet.You may not disclose personal information, but your online friends and colleagues may do itfor you, referring to your school or employer, gender, location and interests. Patterns of socialcommunication, researchers say, are revealing.1“Personal privacy is no longer an individual thing”, said Harold Abelson, the computer scienceprofessor at M.I.T. “In today’s online world, what your mother told you is true, only more so: peoplereally can judge you by your friends”.Collected together, the pool of information about each individual can form a distinctive “socialsignature”, researchers say.The power of computers to identify people from social patterns alone was demonstrated last year ina study by the same pair of researchers that cracked Netflix’s anonymous database: Vitaly Shmatikov,an associate professor of computer science at the University of Texas, and Arvind Narayanan, now aresearcher at Stanford University.By examining correlations between various online accounts, the scientists showed that they couldidentify more than 30 percent of the users of both Twitter, the microblogging service, and Flickr, anonline photo-sharing service, even though the accounts had been stripped of identifying informationlike account names and e-mail addresses.“When you link these large data sets together, a small slice of our behavior and the structure ofour social networks can be identifying”, Mr. Shmatikov said.Even more unnerving to privacy advocates is the work of two researchers from Carnegie MellonUniversity. In a paper published last year, Alessandro Acquisti and Ralph Gross reported that theycould accurately predict the full, nine-digit Social Security numbers for 8.5 percent of the people bornin the United States between 1989 and 2003 — nearly five million individuals.Social Security numbers are prized by identity thieves because they are used both as identifiersand to authenticate banking, credit card and other transactions.The Carnegie Mellon researchers used publicly available information from many sources, includingprofiles on social networks, to narrow their search for two pieces of data crucial to identifying people– birthdates and city or state of birth.That helped them figure out the first three digits of each Social Security number, which thegovernment had assigned by location. The remaining six digits had been assigned through methodsthe government didn’t disclose, although they were related to when the person applied for the number.The researchers used projections about those applications as well as other public data, like the SocialSecurity numbers of dead people, and then ran repeated cycles of statistical correlation and inferenceto partly re-engineer the government’s number-assignment system.To be sure, the work by Mr. Acquisti and Mr. Gross suggests a potential, not actual, risk. Butunpublished research by them explores how criminals could use similar techniques for large-scaleidentity-theft schemes.More generally, privacy advocates worry that the new frontiers of data collection, brokering andmining, are largely unregulated. They fear “online redlining”, where products and services are offeredto some consumers and not others based on statistical inferences and predictions about individualsand their behavior.The F.T.C. and Congress are weighing steps like tighter industry requirements and the creationof a “do not track” list, similar to the federal “do not call” list, to stop online monitoring.But Jon Kleinberg, a professor of computer science at Cornell University who studies social net-works, is skeptical that rules will have much impact. His advice: “When you’re doing stuff online,you should behave as if you’re doing it in public — because increasingly, it is”.2Problem Solving — a community problemThe city of Chicago would like to get more recycling done and keep down costs of recyclingand trash collection. Discuss this problem in your groups. In your journal, note your answersto the following types of questions:1. How would you approach the problem?2. What kind of data might you need to collect?3. How would you collect and analyze the data?4. What research question do you want to focus on? (You might be engaging in advocacy(making a case, for example, telling the principal about something that needs to bedone at the school) or discovery (documenting a situation and using the data to learnsomething, for example, determining if your food choices could be improved or whetheryou always take an efficient route to activities).5. Why did you choose to collect the data you’ve suggested for this question?6. What can you confidently say based on this data?7. What perspectives will be left out based on your data?Some Problem Solving StrategiesDraw a picture or graph.Solve a simpler problem.Make a table.Make an organized list.Look at extreme cases.Find a pattern.Work backwards.Write a number sentence.Guess and check.Candy Bar ActivityDecide how many breaks it will take to divide a candy bar into 12 equal pieces, and putthe answer in your journal.Then discuss with your group members and write your possible revised solution plan inyour journal.We can think about the main phases of problem solving as defined by G. Polya inHow to Solve It:1. Understand the problem: Read or listen to the problem statement, and clarifyambiguities.2. Make a plan to solve the problem: Use pictures, charts, graphs, systematic lists,objects, or act out the solution to help you devise a plan to solve the problem. Incomputer science, we call this plan an algorithm.3. Carry out the plan: Once the plan is conceived and understood, follow the plan. Ifyou have planned well, this is the easy part.4. Review and reflect on how the problem was solved: Once the problem is solved,reflect on the plan that was used, the significance of the problem and solution, etc.We will implement your plans in class and discuss. Then jot in your journals any furtherreflections on the solution and any real-life situations you can think of where this type ofproblem arises.For extra credit, consider also a variation on the problem in which you can stack piecesof your candy bar, break them together, and count that as one break. Then how many breaksdoes it take to get 12 equal pieces? There may be a theoretical answer and a different answeras to what you can do in practice.Linear and Binary Search1. Pick a word you would like to find in the dictionary, and record what it is in yourjournal.2. Go through the pages of the dictionary in order from the beginning until you find thepage containing your word. After a while, you may get tired of this process, so, instead,you can just look at the page numbers and figure out how many steps it would take.Record the number of steps (pages) in your journal.3. Now find the word using the binary search technique that will be explained in class.How many pages did you need to look at? Record the answer in your journal.4. Repeat steps 1–3 using three other words, and record the results for each in yourjournal.5. (A) Record in your journal a summary of how linear and binary search work andwhich one is typically better when searching in a dictionary. (B) Can you draw anyconnection to your experience with the Tower Building activity?6. For binary search to work, what condition must be satisfied by the list of things inwhich we are searching? Note the answer in your journal.Web DesignYou will create a single web page and later a multi-page web site on a flash drive. You can alsostore your materials on one or more computers and perhaps eventually on a web server where it will bepublicly visible. But keep track of the flash drive, which you’ll eventually turn in to your teacher.The basic steps we will go through will be on a series of handouts and will extend over several classes.The checklist of items to turn in for the 2nd term also gives a brief overview of what will need to bedone, but starting with this handout, you will get more detail.Web Design Part 11. Make a storyboard (a basic layout plan) for a web page including a title, headings, paragraphs,and at least two lists (for example, favorite books or favorite hobbies.2. Make an initial web page including the content from your storyboard. If you envisioned somecomplicated layout features, simplify it for now. Create your web page by using Notepad (generallyavailable in the “Accessories” folder from “All Programs” on the Start Menu of Windows computers.Make your web page look exactly like this but with your own document title and your own documentcontent:Title of the documentThe content of the document......That is, type exactly what you see above, but change the part between and, and change the part between and . Note that the title is somethingthat will appear in the upper bar of the browser window, not in the main part of the page; youmight want to repeat this title or some version of it as the first thing in the body of your page.(The style used above for the DOCTYPE declaration (first line) is to fit the new HTML standardreferred to as “HTML 5”. Some browsers may not yet support all features of HTML 5, but thisis probably the best framework for you to be thinking about, and everything else we put in ourpages in this class should be basic enough to work in any browser.)You may notice that different “elements” in the page are enclosed by matching tagsat the beginning and the end, the first without a slash and the second with. Do notuse < or > except for tags. Also, sections may be contained inside one another (such as thehead and the body being contained within the html, and the title within the head), but a sectionwon’t overlap another except when it is completely contained or containing.3. Save your web page in an a file on your flash drive using the “File” pulldown menu in Notepad. Usean appropriate name ending in “.html” and containing no spaces. (I always recommendon Windows machines to uncheck the box for “Hide extensions for known file types” that you will1find in Windows Explorer by starting from “My Computer” and going to “Tools” and then “FolderOptions” and then “View”. This will make it easier for you to be sure of the full name of each ofyour files.) You may have to hit a button to “browse folders” and then go to “My Computer” andthen to an entry with a label like “USB Disk (E:)”.You can now view this page in a browser. It’s ok if you leave Notepad open, but you’ll want tominimize it to get it out of the way while you find the file you just saved to (e.g., going from “MyComputer” on the Start menu to “USB Disk (E:)). When you find the .html file you have saved,you can right-click on it and use “Open With” to open with a browser such as Internet Explorer,Mozilla Firefox, or Google Chrome. You should find all your content in a big mush (except thetitle in the upper bar of the browser), so we’ll proceed to improve that.4. Go back into your page in Notepad and add additional HTML tags that will improve the formatting.Specifically, each heading should be surrounded by tags that look like

and

(or

,and

, etc. for smaller and smaller subordinate headings). Notice how there is a tag at thebeginning that does not contain a slash and then a corresponding tag at the end that does containa slash. Next, do the same thing for each paragraph in your page but with the tags

and

.(Browsers will generally let you get away without the closing tag on paragraphs, but it is betterto be in the habit of always pairing these tags.) Note that there are no numbers in the

and

tags, and you can use the same tag as many times as you want. Meanwhile, the headers getsmaller and smaller as you go from h1, to h2, . . . , to h6. But you can have as many headers asyou wish that are of type h1, as many as you want of type h2, etc.Now open the file with your web browser again, or if your web browser is still running, just gothere and refresh the page. Hopefully the page will look nicer now, but your lists will probablystill look pretty ugly.5. Experiment with adding the tags
, which creates a line break, and

, which creates ahorizontal rule (line). These tags do not come in pairs; browsers will generally allow you to omitthe space and slash, but it is best form to include them. Use these tags to neaten up your lists.(There are also other tags that can be used for lists; we’ll see that later.)6. Include at least two hyperlinks in your web page. (This is the name for things that you click onin the web browser to go to another page.) Since you only have one web page of your own rightnow, you will need to make these hyperlinks go to other existing pages on the web. The form fora hyperlink is basically to surround the text that appears in the link with the tags and (“a” for “anchor”). But the opening tag will need to also include what is referred to as an atribute;specifically you must specify a value for the href attribute that indicates what web page to go towhen the link is clicked. Thus the opening tag will look like this: where you willneed to replace “URL” with the appropriate web address (uniform resource locator). The URL iswhat you would type in the top of your browser to visit a chosen web page, for example somethinglike http://google.com. Open your web page in your browser, and make sure the links work asdesired. A full example of something you might type for a hyperlink and sourrounding text is this:I love the city of Chicago, even its winters.When you do this, the text displayed in your page will be “I love the city of Chicago, even itswinters.”, but the words “city of Chicago” will be displayed in a special way (e.g., different colorand underlined), and clicking on it will take you to the page at http://www.cityofchicago.org.2Web Design continuedWeb Design Part 21. The next thing we’ll include in our web pages is images (pictures). First, you’ll have tofind and perhaps manipulate images that you want to include; we’ll use a free AdobePhotoshop Express tool for manipulations. You can grab pictures from the web (orof your own from your email for example), but there also are several sample imagesavailable in Photoshop Express, and you are encouraged to expedite your work by usingthose for now. If you do want to use your own image, get an image in JPEG format(file name ending in .jpg) onto your computer. (Another good format for images inweb pages is .gif, but you won’t be directly able to edit these in Photoshop Express.)To get started with photoshop express, use your web browser to go tohttp://www.photoshop.com/express, and use the “Online Tools” pulldown to go to“Photoshop Express Editor”. Then upload a photo from your computer, or click onone of the samples. You can experiment with any of the Photoshop features, but don’tget too carried away, and get a couple images ready for your web page, and put themon your flash drive.You may particularly want to use a couple things in the “Basic” palette at the leftof the editor: “Crop & Rotate” and “Resize”. You can crop down to a particularsection of the image by clicking and dragging on the corners of the cropping selector.(Sometimes, you may also need to zoom out to see everything.) You may want touse “Resize” and then hit “Website” just above the picture to get something withan appropriate number of pixels for general website usage, or you may want to use“Custom” and change the “Height” or “Width” number to get a smaller picture, butit can be a good idea to leave the larger “Website” version, and then you will stillbe able to scale to a different display size when you insert an image in yourwebpage. (If the initial image is small, resizing for “Website” will do nothing.)2. Once you have two images ready, you can insert them into your web page. Do thiswith content like the following, where you will have to change FILENAME, and youcan put in whatever number of pixels you want for the width of the displayed image:

You also could use height instead of width (or you could use both, but then you maybe stretching/distorting the picture).You can place the image at whatever location in the page where you want it to appear;you might want it inside a paragraph but probably not inside a header.Web Design continuedWeb Design Part 3A summary of the things we will continue with is as follows:1. Learn about commonly used tags that generate bold and italicized text.2. Learn about the use of styles, which can provide for things like coloring text and backgrounds,changing type styles and sizes, and adjusting positioning and alignment of parts of a page.3. Learn about tags for tables and lists.4. Create a multi-page web site.In this handout, we will get through beginning styling to the point of incorporating an internal stylepage in your initial web page. We elaborate this via the following sequence of detailed steps:1. Experiment with inserting the tags and for “emphasis” and “strong emphasis”, re-spectively. Each of these tags gets paired with a corresponding closing tag ( and ).Text surrounded by and will appear in italics; text surrounded by and will appear bold. Remember that elements (surrounded by an opening tag without aslash and a closing tag with a slash) can be nested one inside another, but don’t otherwise makethem overlap. So you might have something like:Here is bold, italics inside and back to just bold.but don’t do something like:Don’t overlap bold and italics like this.2. The technology we will use for further styling is referred to as “css”, which stands for “cascadingstyle sheets”. We will not cover this in full generality, but we will use all of the three possiblemethods of inserting styles:• Inline styles• Internal style sheet• External style sheetWe will work with the first two methods before working with tables and lists and the thirdafterwards.3. Experiment with adding inline styles to a few of your elements. This is done by adding a styleattribute to the opening tag of any element (heading, paragraph, link, etc.) that you would like,similar to the way that we included an href attribute in our links (tagged with a for “anchor”).For example, if you have a top-level heading you would like to appear in green and underlined,you can do something like

My heading

• Notice how the value of the style attribute is given with an equal-sign and quotes. Withinthat value, each setting ends with a semicolon, and each setting contains a specific propertyfollowed by a colon followed by a value.– color is used to change text color, and you can find available color names athttp://www.w3schools.com/tags/ref_colornames.asp or use the color picker athttp://www.w3schools.com/tags/ref_colorpicker.asp to get a color code comprisedof a sharp-sign and six more characters.– text-decoration can provide some other properties: blink (doesn’t work in Explorer,Chrome, or Safari browsers), underline, line-through, and overline.• You could put such a style attribute in the opening tag of one of your paragraphs instead oreven in the opening body tag to apply to the entire body of your page. You can also make anew grouping of a bunch of stuff in your page by putting a

tag at the beginning and

at the end. Then you could apply a style to this chunk of your page by inserting itin the opening

tag.• You can set many other things in a style attribute. A good reference for all the choices ishttp://www.w3schools.com/css ; the things we’ve seen so far are under “Styling Text” inthe set of links at the left. Another example there is that you could put text-align: center;to horizontally center the text in your lines. You might also be interested in things like“Styling Backgrounds”, “Styling Fonts”, and “Styling Links”. Later, we will also look atthings that come under “Styling Lists” and “Styling Tables”.• You could look at many more things under “CSS Box Model” and even “CSS Advanced” athttp://www.w3schools.com/css , but don’t get carried away at this point. Just come upwith two or three inline styling things that you would like to incorporate into your page.4. Once you are comfortable with the use of styles, create an internal style sheet. You do this byadding it in the head section of your page (between and ); it can appear beforeor after the title part. It will begin with .An example is as follows:This example will change the background color of the entire body of the page but use a differentbackground color for all paragraphs (since they are marked with the p tag). It will also make thetext in paragraphs white, put 25 pixels of space on all sides around the text of each paragraph,and put the text of all paragraphs in a large arial font. Finally, it puts each image (marked withthe img tag) on a white background and surrounds it with 10 pixels of space on each side and adotted red border that is 5 pixels wide. Make your own internal style sheet for your web page.Web Design continuedWeb Design Part 4We will complete our web design unit by:1. Creating a second web page that uses tags for tables and lists.2. Creating an external style sheet for the second web page.3. Creating at least a third web page and making some links between the pages so they function together asmulti-page web site.The detailed steps are as follows:1. Create a second web page that can be related to your first web page (without losing the original page) andeventually be part of a web site of at least three pages. To create your new web page, use Notepad as before,and save the page in a new filename (again ending in .html and containing no spaces). Your page will havethe same structure as before but with different content between the opening and closing tags for title andbody. (I don’t care if what you communicate is very similar to your first page as long as you use the newlayout features described below.) As before, remember that the title appears in the upper bar of the browserwindow, and you may want to repeat it in the body if you want it to display in the main part of the page.2. In your second web page, include at least one table. Like everything in HTML (the language of web pages),a table begins with an opening and closing tag ( and

in the most basic form). Withina table, one can place one or more rows of content; each row begins with (for “table row”) and endswith . Within a row, one can place several cells of table data, each beginning with and endingwith . One also can choose to instead surround a cell with and , which generally makes itappear bold and centered so as to constitute a heading for a column or row. Below is a full example of atable, which also incorporates an optional attribute into the opening tag to display a border of onepixel around the table:

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Make your own table. If you want to see more examples and variations, you can look athttp://www.w3schools.com/html/html_tables.asp .3. Now you should include at least two lists, but unlike the approach used in your first web page, you will useHTML markup specifically designed for lists instead of just inserting line breaks. There are two kinds oflists: unordered and orderd. An unordered list could look like this:

cat food
bread
milk
veggies
paper towels

and would generally display with a “bullet” in front of each list item. An ordered list would be created thesame way but with

instead of

. Note that the ordered list will display with numbers(or you can choose a different enumeration style) in front of each list item. Include at least one unorderedlist and at least one ordered list in your page. For extra credit, nest one list inside of another.4. For this web page, you are to provide styling with an external style sheet (like the internal style sheet youdid before, but in a separate file). Instead of using a section beginning , youwill include a line just like this in the head of the page (again before or after the entire title element):The only thing you might change in the line above is the name of the external style sheet, style.css.Whatever name you use, create a file of that name in the same folder as everything else you have beenworking on; then put your style sheet into that file.5. One last feature you might want in your style sheet is to use id and class attributes. Actually, it is boththe .html file and the style sheet that you will need to modify to work with id and class. The idea of bothof these things is that you can mark certain elements in your .html file as having a particular id or class;then the style sheet can provide styling specifications that apply just to elements that have the indicated idor class. An id is usually used for a single unique element, while a class may be applied to a number ofdifferent elements. An example of HTML using each is as follows:

This is a special paragraph that is going to havea styling specification that applies just to this particularparagraph.

And here is a table:

first row

second row

third row

fourth row

fifth row

Now we can apply a special text color to the paragraph above and apply different background colors to theodd and even rows of the table by putting the following styling directives in the style sheet:#special-par { color: red; }.odd { background-color: yellow; }.even { background-color: aqua; }Note that in the style sheet, we use # before an id and . before a class.6. The last step in the web design unit is to make at least a third web page that uses the same external stylesheet as the second web page. Make some links between your pages so that they function together as amulti-page web site. You can continue to work on your web pages to make the coolest possible site; timepermitting, we will look at each other’s sites.7. Totally optional is to put your web site in a publicly accessible place. If you want to do this, ask your parentsfor permission and search for “free web host” in a search engine or try one of the top-rated choices athttp://www.free-webhosts.com/webhosting-01.php . Then following the instructions there to registerfor an account and upload to the web host.

LoyolaChicagoBooks/curricula: v0.1

Abstract

Extracted data

LoyolaChicagoBooks/curricula: v0.1

Abstract

Extracted data

Related items

Related items