CS7 Computer Studies Fundamentals Module PDF

CS 7 computer studies fundamentals module  TABLE OF CONTENTS Unit 1: The Age of Information 1 Lesson 1: Information and Computing Literacy 3 Lesson 2: All About Computers 8 Unit 2: Collaboratio...

CS 7 computer studies fundamentals module  TABLE OF CONTENTS Unit 1: The Age of Information 1 Lesson 1: Information and Computing Literacy 3 Lesson 2: All About Computers 8 Unit 2: Collaboration and Productivity 17 Lesson 1: Efficient File Management with Google Drive 19 Lesson 2: Word Processing with Google Docs 22 Lesson 3: Presentation with Google Slides 26 Lesson 4: Graphic Design with Canva 32 Hackathon Project # 1 35 Unit 3: The Problem Solving Process 38 Lesson 1: The Problem Solving Process 41 Lesson 2: The IOSP Model 47 Unit 4: The Design Thinking Process 51 Lesson 1: The Design Thinking Process 53 Lesson 2: User-Centered Design (Define and Prepare) 57 Lesson 3: Designing User Interface 61 Lesson 4: Feedback and Testing (Reflect) 63 Hackathon Project # 2 64 UNIT 1 The Age of Information Lesson 1: Information and Computing Literacy Lesson 2: All About Computers CS 7: Computer studies Fundamentals Unit 1: The age of information Unit Summary The pace of technology evolution is very fast. The current generation of learners grew up immersed in a digital world. Thus, they are dubbed as digital natives. Having an understanding about the digital world will help them use technology safely and to improve their academic performance. This unit will take your understanding of information in the digital world deeper. You will also be introduced to the functions, components, and history of computers. Unit Objectives 1. Define and differentiate digital literacy, information literacy, and information technology literacy; 2. Familiarize and demonstrate proper behavior in an online environment; 3. Describe what the computer is through its functions and its components; and 4. Differentiate the events, trends, and inventions in each computer generation. CSTA K-12 Computer Science Standards Computing Systems 1A-CS-01 Select and operate appropriate software to perform a variety of tasks and recognize that users have different needs and preferences for the technology they use. 1B-CS-01 Describe how internal and external parts of computing devices Impacts of Computing 1A-IC-16 Compare how people live and work before and after the implementation or adoption of new computing technology. 1B-IC-18 Discuss computing technologies that have changed the world and express how those technologies influence, and are influenced by, cultural practices. Networks and the Internet 1B-NI-05 Discuss real-world cybersecurity problems and how personal information can be protected. 2 CS 7: Computer studies Fundamentals Unit 1: The age of information LESSON INFORMATION AND 1 COMPUTING LITERACY The futurist and philosopher Alvin Toffler once wrote: “The illiterate of the 21st century will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn.” Alvin Toffler was known for his works discussing modern technologies, the digital revolution, and the communication revolution. As an introduction to this course, information technology will be presented to the students as a part of the 21st-century skills development in the digital age. Lesson Objectives 1. Familiarize and demonstrate proper behavior in an online environment; and 2. Apply the CRAAP Test for fact-checking online resources. Discussion Nowadays, we use technology for socialization or communication, for entertainment — be it to play a game, watch a movie, or listen to music— and now even for work and education. We can do these things because we have computers of varying screen sizes and the Internet. Information Technology Computer Technology deals with the computer hardware and software on it. It is how information is created, stored, and processed. On the other hand, Telecommunication Technology involves the transmission of data, such as signals, images, and sounds. It focuses on how the information is transferred to another. Overall, Information Technology is the use of computer systems and technology to develop and maintain all forms of electronic data and information for processing and distribution. 3 CS 7: Computer studies Fundamentals Unit 1: The age of information Computer Literacy Computer Literacy is the ability to understand the computer, including its characteristics, capabilities, and applications. It is also the ability to transform this knowledge into a productive use of digital texts and computer applications. Information and Information Technology Literacy Information Literacy is a set of abilities that requires individuals to recognize when information is needed and locate, evaluate, and use this information effectively. On the other hand, Information Technology Literacy is the ability to discuss how the technology works, awareness of the latest technologies available in solving a problem, and how to use and interact with computers. Information Technology Skills Ezziane (2007), in his paper entitled “Information Technology Literacy: Implications on Teaching and Learning”, identified the following set of Information Technology skills: Setting up a personal computer Using basic operating system features Using a word processor to create a text document Using a graphics and/or artwork package to create illustrations, slides, or other image-based expressions of ideas Connecting a computer to a network Using the Internet and the web to find information and resources Using a computer to communicate with others Using a spreadsheet to model simple processes or financial tables Using a database system to set up and access useful information Using instructional materials to learn how to use new applications or features Digital Literacy Digital Literacy, as defined by the American Library Association (ALA), is “the ability to use information and communication technologies to find, evaluate, create, and communicate information, requiring both cognitive and technical skills.” Digital Revolution We live in an information society where information is the most significant economic and cultural activity and technology has been an integral part of our lives. The digital revolution is the age in which the online world of digitization has become popular and as the world moves rapidly with the advancement of technology, our dependence on these technologies also increased. How dependent are we on technology? – social, communication, entertainment, and education. 4 CS 7: Computer studies Fundamentals Unit 1: The age of information Netiquette Internet Etiquette or Netiquette is the social code of network communication. It is the philosophy of effective Internet communication that utilizes common conventions and norms as a guide for rules and standards. The Golden Rule Do unto others online as you would have done to you. Rules of Netiquette 1. Remember the human – Internet users have feelings too. 2. Behave online as you do in real life – apply the laws of society and cyberspace in everything you do online. 3. Know where you are in cyberspace – learn the rules. 4. Respect other people’s time and bandwidth – do not spam. To spam means to send irrelevant or inappropriate messages to a number of people. 5. Make yourself look good online – spelling and grammar matter. 6. Share expert knowledge – offer answers and help. 7. Help keep flame wars under control – do not respond to flame bait. Flame baits are statements intended to spark discussions online. 8. Respect other people’s privacy – do not look through other people’s personal accounts and documents. 9. Do not abuse your power – the more power you have, the more important it is that you use it well. 10. Be forgiving of other people’s mistakes – point out mistakes privately and politely. Critical Thinking and Information Fluency Critical thinking or disciplined thinking is activated by the practice of three core skills - analysis, evaluation, and inference. Information literacy, although not a necessary component of critical thinking skills, promotes the development of these higher-order thinking skills. Familiarity with technology does not equate to evaluating Internet sources correctly (Flood, 2015). Bloom’s taxonomy is a framework showing a hierarchy of skills and complexity of learning which goes beyond just memorizing. It goes hand in hand with critical thinking as it leads to a thought process of analyzing information or knowledge critically. 5 CS 7: Computer studies Fundamentals Unit 1: The age of information Bloom’s Taxonomy 1. Remember – lowest form, recall, memorize – lacks inferring 2. Understand – explain and compare concepts – lacks the application 3. Apply – implement and practice concepts – lacks relation to other materials 4. Analyze – understand how concepts work – lacks justification 5. Evaluate – critique and check – lacks originality 6. Create – highest form – propose or produce new work Questioning and Assessing Information Fake News Most of the information circulating on the Internet is what is trending and not what is accurate — “fake news”, which has become rampant specifically on social media platforms. Nowadays, fake stories we hear are political schemes and influence campaigns, but even before all these, we fell for fake science stories, misleading facts, and hoaxes. In 2020, 56% of the world’s population is concerned about what is real and fake on the Internet. Concerns About Misinformation on the Internet Source: https://datareportal.com/reports/digital-2020-july-global-statshot 6 CS 7: Computer studies Fundamentals Unit 1: The age of information Fact-checking Fact-checking is an act of critically evaluating or narrowing down quality information from a pile of books, journals, and even millions of web results. In 2004, Blakeslee highlighted what every document or checklist about information evaluation has in common – the CRAAP. CRAAP Test The CRAAP Test is a checklist for evaluating the content of a material or a post based on the following: 1. Currency – Is the information up to date? 2. Relevance – Is the information appropriate to your topic? Does it answer the problem? 3. Authority – Is the source credible? 4. Accuracy – Is the information data-driven or supported by proof? 5. Purpose – Is the information a fact, an opinion, or propaganda? Is it biased? Examples: 1. Cedrick is fond of nature. He follows Facebook pages and Facebook stories about plants and animals, especially those pages posting facts about rare and endangered species. One day, an advertisement redirected him to a website that calls for help to save an endangered animal. Visit the link and help Cedrick decide and act based on what you have read. 2. Crushed dolomite has been the talk of the town in 2021 since it was dumped along the shoreline of Manila Bay. The Department of Health assures the public that it will not cause health risks. However, you encountered this article saying dolomite causes health hazards. As this involves health, on top of what we are currently facing right now, evaluate the two sources to get informed on what is true about dolomite. 3. Star was tasked to write a report on what is happening to the World in 2020. She found an article that says “The sun has gone into ‘lockdown’ which could cause freezing weather, earthquakes, and famine”. Help Star in fact- checking this source by reading the article and looking for related articles. Evaluate the articles and decide whether to suggest the article to Star or not. 7 CS 7: Computer studies Fundamentals Unit 1: The age of information LESSON 2 ALL ABOUT COMPUTERS For the past years, students have been using computers almost every day for different purposes — education, entertainment, games, etc. How many of these students are familiar with computers and other computing devices? In this lesson, the students will be introduced to the functions, components, and history of the computer. Lesson Objectives 1. Describe a computer through its functions and components; and 2. Identify the events, trends, and inventions in each computer generation. Discussion Early computers are known as apparatuses that are used as calculating instruments. On the other hand, digital computers are electronic devices that collect data from the user, process them, store them based on the instructions, and output data in the desired format. These make the computer a computer because of its main functions and structural components. Architecture and Organization Computer Architecture involves features of a computer system that have a direct impact on how programs are executed. Examples include computer design, data storage (bit-length to represent different data types, input and output mechanisms, and the instruction set), and interaction with another computer, across networks, and with users. On the other hand, Computer Organization focuses on the operational units concerned with the structure and behavior of a computer which include control signals, interfaces between the computer and peripherals, and the memory technology used. 8 CS 7: Computer studies Fundamentals Unit 1: The age of information Computer Functions Computer systems have four main functions necessary to complete or perform a task — data processing, data storage, data movement, and control. 1. Data Processing – can take a variety of forms and ranges of processing such as retrieval, modification, and classification. 2. Data Storage – may it be permanent or temporary, data is stored in a short-term or long-term data storage in a computer. 3. Data Movement – the ability to transport data within existing folders in the computer or to another computer unit or cloud service. 4. Control – management of the computer’s resources and performance in response to the user’s instructions. Four Main Structural Components 1. The Central Processing Unit, or CPU, is commonly known as a processor that performs the data processing of a computer. The CPU is further divided into two units – the control unit and the arithmetic and logic unit. The control unit controls the machine cycle for instructions while the arithmetic and logic unit performs the arithmetic, logic, and operations based on the instruction set. 2. The Main Memory is responsible for data storage. A bit is the basic unit of memory whose values are limited to 0s or 1s. Data is a piece of information that may be processed and stored or simply a raw computer input. 3. The I/O Mechanism collects and moves data within the computer or to an external environment using the input and output devices. Input devices include keyboard, mouse, and drawing tablet. On the other hand, output devices include monitor, printer, and speaker. Input devices Output device 9 CS 7: Computer studies Fundamentals Unit 1: The age of information 4. System interconnection is responsible for the communication between the CPU, the Main Memory, and the I/O Mechanism. Four buses perform individual functions to carry out data or signals from each of the components - the data bus, address bus, control bus, and power bus. a. Data bus - carries data from one component to another. b. Address bus - locates the addresses to specific data in the memory. c. Control bus - conveys signals transferred from one device or network to another. d. Power bus - distributes power, of different voltages, to all computer components. Computer Components Hardware components are physical devices that allow control and access to computer data. Examples of hardware include a monitor, keyboard, mouse, etc. Meanwhile, software components are applications or programs installed in the computer which execute operations and perform tasks on the computer. Examples of software include text editors, calculators, etc. Hardware Devices Software Tools 10 CS 7: Computer studies Fundamentals Unit 1: The age of information History and Development of Computers Early Computers Before electronic computers were developed, early computers were used as calculating instruments to solve mathematical problems. Abacus The earliest known computing device is the abacus. An abacus is an instrument that uses beads that slide along a series of wires and rods set in a frame to represent the decimal places. Abacus Analog Calculators a. Napier’s Bones - John Napier, a Scottish mathematician, devised a set of logarithm- based multiplication tables carved on ivory sticks called “Napier’s Bones”. According to Napier, it is much simpler to add two 10-digit numbers than to multiply them together- logarithms. The simplification follows the logarithmic property, whereas, the logarithm of the product of two numbers is equal to the sum of the logarithms of the numbers. b. Slider Rule - The first slide rule, invented Napier’s Bones by William Oughtred in 1621, was circular and based on Napier’s idea about logarithms. In 1633, Oughtred built the first rectangular slide rule that has logarithmic scales that can be slid past each other. Slide Rule 11 CS 7: Computer studies Fundamentals Unit 1: The age of information Digital Calculators 1. The Calculating Clock - It is considered to be the first real machine, or a calculator, designed by Wilhelm Schickard in 1623. This machine could add, subtract, multiply, and divide. 2. Pascaline - It was invented by Blaise Pascal in 1642. Pascaline is a device that can add two decimal numbers. 3. Leibniz Wheel - It is the first general-purpose calculator invented by Gottfried Wilhelm von Leibniz in 1673. This machine can perform multiplication by repeated addition and shifting. The Calculating Clock Pascaline Calculator Leibniz Wheel Jacquard Loom The Jacquard Loom was invented by a French weaver, Joseph-Marie Jacquard, in 1801. This machine is a power loom with an automatic card reader. The First Computer In 1832, Charles Babbage constructed the “Difference Engine” which is a special machine that can evaluate and print mathematical tables by sequentially adding the difference between certain polynomial values. A more advanced design called the “Analytical Engine” was described by Babbage in a prototype Jacquard Loom that ideally can STORE information in the memory and as OUTPUT, an automated typesetter to type the results of computations. Due to technical limitations and budget constraints, Babbage never finished the Analytical Engine. 12 CS 7: Computer studies Fundamentals Unit 1: The age of information The Difference Engine The Analytical Engine Prototype Early Business Machine Herman Hollerith’s Census Calculator, invented in 1890, was inspired by the Jacquard Loom and utilized punch cards containing each person’s information. The punch cards were analyzed with the help of an electrical and mechanical tabulating machine. Before this machine, the 1880 US Census took 7.5 years to analyze. Digital Computers Herman Hollerith’s Census Calculator The evolution of digital computers is characterized by processor speed, component size, memory size, and I/O capacity and speed. First Generation: Vacuum tubes The first generation of computers was used for circuitry to control the electric current flow using a vacuum in a sealed container. These computers are very expensive and usually take up a room, but are prone to overheat which causes them to malfunction. 1946-1957 a. The Bombe is the first computer machine.The machine algorithm was improved and developed by Alan Turing who cracked the German enigma code during World War II. b. The Electronic Numerical Integrator and Computer (ENIAC) was designed and constructed at the University of Pennsylvania as a response to the needs of the U.S. during World War II. 13 CS 7: Computer studies Fundamentals Unit 1: The age of information c. The Electronic Discrete Variable Computer (EDVAC) has the same idea as the Bombe. It was developed by the mathematician John von Neumann and is the first stored-program computer as it can hold data in memory. d. The Universal Automatic Computer (UNIVAC) is a commercial computer intended for scientific and business applications, involving long and complex calculations and large amounts of text data. Bombe ENIAC EDVAC UNIVAC 1 Second Generation: Transistor The second generation of computers used transistors as they are smaller and cheaper and dissipate less than vacuum tubes. Transistor computers are operated by a small current “on” and “off”. 1958-1964 During the late 50s to early 60s, the first major change in the electronic computer was invented at the Bell Labs-UNIVAC 11. Third Generation: Integrated circuits The third generation of computers is a set of electronic circuits, consisting of smaller transistors, on one small flat piece of silicon chips called semiconductors. 14 CS 7: Computer studies Fundamentals Unit 1: The age of information 1965-1971 Notable events in the evolution of computers during the mid-60s to early 70s include the following: a. Small and medium scale integration where a single, self-contained transistor, called discrete component, was used. b. The computer became more accessible to the public as more components can be packed on the same chip, thus decreasing the cost and the size of the computer. Later Generations: Digital Computers 1978-Present Since the late 70s, the computer generations are less defined beyond the third- generation computers due to the rapid pace of technology. During this generation, the development of handheld devices and personal computers alongside the development of the Internet also became rampant. Future developments are directed at the advancement of artificial intelligence, parallel computing, and superconductors. UNIVAC 1050-11 Personal Computer Digital Computers and Handheld Devices 15 CS 7: Computer studies Fundamentals Unit 1: The age of information References Albacea, E.A. (2007). Information Technology Literacy (4th Edition). JPVA Publishing House. Blakeslee, S. (2004). "The CRAAP Test," LOEX Quarterly: Vol. 31: Iss. 3, Article 4. Retrieved from https://commons.emich.edu/loexquarterly/vol31/ iss3/4 Churchill, D. (2012). Learning Technology: Yesterday, Today, and Tomorrow. Retrieved from https://www.slideshare.net/zvezdan/. [Presentation Slide p. 29] Computer Science Teachers Association (2017). CSTA K-12 Computer Science Standards, Revised 2017. Retrieved from http://www.csteachers. org/standards. Ezziane, Z. (2007). Information Technology Literacy: Implications on Teaching and Learning. Educational Technology & Society. 10. 175-191. Flood, P. (2015). Critical Thinking Skills and Information Literacy Skills: Discerning Online Information Among High School Students. Retrieved from https://digitalcommons.liberty.edu/cgi/viewcontent. cgi?article=2119&context=doctoral Manalang, M. (2015). Introduction to the Internet [PowerPoint Slides] Theme., R. (n.d.). Digital Literacy – Welcome to ALA's Literacy Clearinghouse. Retrieved from https://literacy.ala.org/digital-literacy/ 16 UNIT 2 Collaboration and Productivity Lesson 1: Efficient File Management with Google Drive Lesson 2: Word Processing with Google Docs Lesson 3: Presentation with Google Slides Lesson 4: Graphic Design with Canva Hackathon Project #1 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Unit Summary This unit emphasizes most of the Information Technology skills identified by Ezziane (2007) including the use of a word processor to create a text document, the use of a graphics and/or artwork package to create illustrations, slides, or other image-based expressions of ideas, and the use of instructional materials to learn how to use new applications or features. This unit also presents ways to efficiently organize and manage files on any storage device, particularly on Google Drive, explore Google Docs functionalities and use these functionalities in word processing, and create good presentation slides using Google Slides. The use of Canva as a presentation and design tool for cards, posts, graphic design, and even presentations is also discussed in this unit. Unit Objectives 1. Identify and describe what a computer does through its functions and components; 2. Perform tasks using available software tools; and 3. Collaborate effectively and efficiently with peers using different software tools. CSTA K-12 Computer Science Standards Data and Analysis ○ 1A-DA-05 Store, copy, search, retrieve, modify, and delete information using a computing device and define the information stored as data. ○ 1A-DA-06 Collect and present the same data in various visual formats. Impacts of Computing ○ 1A-IC-17 Work respectfully and responsibly with others online. ○ 1B-IC-19 Brainstorm ways to improve the accessibility and usability of technology products for the diverse needs and wants of users. ○ 3A-IC-27 Use tools and methods for collaboration on a project to increase connectivity of people in different cultures and career fields. 18 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity LESSON EFFICIENT FILE MANAGEMENT 1 WITH GOOGLE DRIVE Technological advancement allowed us to store, access, process, and retrieve data digitally. Nowadays, there are three ways to manage files - locally, externally, and via the cloud. Lesson Objectives 1. Store, retrieve, and organize files and folders on the Cloud using Google Drive; and 2. Utilize the sharing and collaboration feature to files and folders in Google Drive. Discussion Introduction to Google Drive Local Drive – also known as Local Disk or Hard Drive. It is a built-in storage on a computer. Using local drives, files can be accessed across user accounts, with administrator roles. A file can only be edited by the computer user active on the device. File sharing is possible over a local network. External Hard Drive – portable and on-the-go storage. File sharing and transferring can be done using a cable. Multiple people can edit the same file on two different devices, at different times, but will produce two different versions of that same file. Cloud Services - online services that store data and make the files available for access over the Internet. The goal of using cloud services is to improve organization, enhance productivity, save time, secure data, replace paper-based content with digital files, and reduce the need for people to gather to work at the same time. 19 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity External Hard Features Local Drive Cloud Services Drive Files can be Files can be shared Files can be shared shared only within from one device to across networks via File-Sharing the same device another. the Internet. or over a local network. Collaboration is not Asynchronous Synchronous possible using a collaboration is collaboration is Collaboration local drive. possible using possible over the external hard drives. cloud. Primary storage Storage varies from Storage is dependent Storage and ranges from 32GB 80GB to 4TB or on the email’s Backup to 256GB RAM on more. subscription. most computers. The files are at high The files are spared Accidental deletion risk of loss if the from deletion if the of files is possible. computer’s hard computer’s hard drive is damaged. drive is damaged Risk of Data but are not usually Loss saved if it is physically damaged or exposed to a virus. What can you do in a Cloud? a. Online file sharing - enables real-time collaboration b. Syncing files of any type on any device - a way for remote workers to access files in multiple technologies c. Backing up important data - offers convenient storage and retrieval of files Examples of Cloud Storage Services a. iCloud – offered by Apple, it is the best option for exclusive Apple users for file synchronization. b. OneDrive – offered by Microsoft, its access is upon subscription to Microsoft Office 365. The University has a subscription to Microsoft Office 365 that comes along with UP Accounts. c. Google Drive – offered by Google,it is linked to other Google Applications in the suite like Google Classroom. 20 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Efficient File Management with Google Drive Google Drive is a file storage and synchronization service developed by Google. It allows users to store files in the cloud, synchronize files across devices, and share files. The University has a subscription to a paid storage plan which gives each UP Account 1TB storage instead of Google Drive’s default 15GB for all users. Module Cards Access the module cards for the Google Drive How-Tos, specifically the following functions: a. Switch to an account f. Move a file or folder b. Upload files and folders g. Delete a file or folder c. Download files and folders h. Change the color of a folder d. Make a copy of a file i. File sharing and restrictions e. Create folder File Management Tips a. A folder within a folder – create a directory with a logical hierarchy by nesting folders within a folder. b. Descriptive filenames – assign precise or specific filenames for easy identification and retrieval. c. Declutter your files – clear out old files and avoid duplicates. d. Back-up regularly – backups are not a usual concern in a cloud service, just watch out for accidental deletion of files. 21 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity LESSON WORD PROCESSING WITH 2 GOOGLE DOCS In the previous lesson, the students have already set up their individual CS 7 folders accessible online and viewable by anyone in the University with the link. In this lesson, the students will be tasked to create and format a document using Google Docs. Lesson Objectives 1. Create and set up a page document in Google Docs; 2. Format texts, images, and tables in Google Docs; and 3. Explore and use the different built-in tools and features in Google Docs. Discussion Word processing is a process of creating or editing a document using a word editor such as the known word processing tools like Microsoft Word, Google Docs, and OpenOffice Writer. Introduction to Google Docs Google Docs is a free word-processing tool offered by Google which is a counterpart of Microsoft Word. Like other word processing tools, Google Docs allows users to include tables, charts, and pictures along with texts to create a more comprehensive document. Creating a document Navigating through the Google Apps 1. In your Google Chrome browser, locate and click the 3x3 dots beside your user profile (If a default account is logged in, switch to your UP Account). 2. A drop-down menu will show all the applications available in the Google Suite. 3. Click Docs and choose Blank to create an untitled document. 22 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Creating from the Google Drive 1. Go to drive.google.com and switch to your UP Account. 2. Click the New button located at the upper left side of the window and click Google Docs. Shortcut for docs.new 1. Open a Google Chrome browser and switch to your UP Account. 2. Type docs.new in the address bar. 3. Hit Enter and an untitled document will be created. Regardless of how the document was created, make sure to rename the file and move it to its correct file location in Google Drive. You can click the Star icon to easily find it in Google Drive. The Interface Menu Bar The Menu Bar contains multiple dropdown lists containing a set of built-in functions in Google Docs sorted according to specific functionality. 23 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Main Toolbar The Main Toolbar contains a shortcut to the built-in functions commonly used in formatting texts and paragraphs. These functions can also be viewed under the Edit, Format, and Insert Menu. Workspace The workspace is an empty page where all objects are displayed and edited. A ruler, document outline, and section breaks are displayed but these features can be hidden via the View Menu. Hands-on Activity Module Cards Access the module cards for the Google Docs How-Tos, specifically the following functions: a. File Menu b. Edit Menu c. View Menu d. Insert Menu e. Format Menu f. Tools Menu 24 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Keyboard Shortcuts Listed below are some of the common shortcut keys used in navigating through a document. Function Keystroke Function Keystroke Select characters Shift + Arrow Undo Ctrl + Z Copy Ctrl + C Redo Ctrl + Y Paste Ctrl + V Move to top Ctrl + Home Paste Special Ctrl + Alt + V Find Ctrl + F Cut Ctrl + X Go to Ctrl + G 25 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity LESSON PRESENTATION WITH 3 GOOGLE SLIDES In the previous lesson, the students were tasked to create and format a document using Google Docs. In this lesson, the students will be introduced to creating good presentation slides that are concise, easy on the eyes, and focused on the topic. Lesson Objectives 1. Create and set up a presentation slide in Google Slides; 2. Insert element animations and page transitions in Google Slides; and 3. Apply design principles for effective presentation communication. Discussion Creating Presentations A presentation software tool is a program that allows users to convey information efficiently and creatively through presentation slides. Some of the usual software used for presentations are Microsoft PowerPoint, Google Slides, and LibreOffice Impress. Introduction to Google Slides Google Slides is a free presentation tool offered by Google which is a counterpart of Microsoft PowerPoint. Google Slides gives users the ability to produce creative slideshows to deliver presentations efficiently. 26 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Creating a presentation slide Navigating through the Google Apps 1. In your Google Chrome browser, locate and click the 3x3 dots beside your user profile (If a default account is logged in, switch to your UP Account). 2. A drop-down menu will show all the applications available in the Google Suite. 3. Click Slides and choose Blank to create an untitled presentation slide Creating from Google Drive 1. Go to drive.google.com and switch to your UP Account. 2. Click the New button located at the upper left side of the window and click Google Slides. Shortcut for docs.new 1. Open a Google Chrome browser and switch to your UP Account. 2. Type slides.new in the address bar. 3. Hit Enter and an untitled document will be created. Regardless of how the presentation slide was created, make sure to rename the file and move it to its correct file location in Google Drive. You can click the Star icon to easily find it in Google Drive. 27 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Deciding on a theme In a newly created blank presentation, the Themes pane is displayed which contains readily available themes. This can also be accessed under the Slide Menu. Themes give the presentation a coherent look starting from the colors, text formats, and even to the layout. It can be adjusted layer by layer depending on user’s preference. Choosing a slide type Click the + button on the upper left to add a new slide to the presentation. The drop- down displays a variation of the layout under the same theme. 28 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity The Interface Menu Bar The Menu Bar contains multiple dropdown lists containing a set of built-in functions in Google Slides sorted according to specific functionality. Main Toolbar The Main Toolbar contains a shortcut to the built-in functions commonly used in formatting object layouts. These functions can also be viewed under the Edit, Insert, and Slide Menu. Workspace The workspace is an empty slide where all texts, objects, and animations are displayed and applied to. 29 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Hands-on Activity Module Cards Access the module cards for the Google Docs How-Tos, specifically the following functions: a. File Menu e. Format Menu b. Edit Menu f. Slide Menu c. View Menu g. Arrange Menu d. Insert Menu h. Tools Menu Design Principles in Presentations Keep it simple Avoid having text-heavy slides. Make texts readable even by the person farthest from the screen. Keep white spaces on your slide for it not to look cluttered with unnecessary information. Use the 10-20-30 rule — 10 slides, 20 minutes, 30pt font size Don’t Do Be consistent Maintain a color palette and avoid bold and striking colors as backgrounds or as font colors for regular texts. Limit the number of fonts used — no more than three in total. Don’t Do 30 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Consider the objects Supporting objects like images, videos, and audio should always be of good quality. Use suitable charts or diagrams for easier visualization of information. Don’t Do Minimal animations Use minimal animations for the listeners to pay more attention to the information being presented rather than the motion of the objects. 31 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity LESSON GRAPHIC DESIGN 4 WITH CANVA In the past three lessons in Unit 2, the class explored and utilized Google Suite application features to work on their school requirements. In this lesson, the class moves from Google Suite applications to Canva. Lesson Objectives 1. Create a mood board to determine the visual direction of the design project in Canva; 2. Create and set up a design project in Canva; 3. Insert design elements on the page such as graphics, audio, and text; 4. Upload and organize media files; 5. Design and style the page using the color theory; and 6. Share and publish the design project in different modes. Discussion Introduction to Canva Canva is a graphic design and publishing platform that allows users to create social media graphics, presentations, posters, documents, and other visual content. It aims to bring out the creative side of everyone by empowering them to do great things and providing them with the right tools to make complex things simple. The Interface Toolbar The toolbar contains the built-in functions used for setting up the page, formatting object layouts, and sharing or publishing designs. The toolbar displays different 32 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity options depending on the element selected. For example, the element selected is text, the toolbar will display functions for a user to change the font style, color, weight, alignment, etc. Object Panel The object panel or the sidebar is categorized according to an element or object that can be added to the design. This includes the templates, elements, uploads, photos, text, styles, audio, videos, background, charts, folders, etc. Clicking one of these categories will display an extended sidebar that contains suggestions and recently used elements. 33 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Workspace The workspace initially displays a blank page following the dimensions set. The bottom part allows users to add notes per page when presenting or for guides. It also contains a slider to zoom in and out of the active page. Lastly, it displays a preview of all pages in the file. Graphic Design Basics Visual direction Understand the content that needs designing. Plan the project, determine the purpose, and keep in mind the intended audience. Come up with a mood board by gathering inspirations and pegs. The mood board shall serve as a guide for the overall look and feel of the design. Elements shall complement each other and not be the cause of confusion. Layout Use grids and rulers as guides in the workspace. Group all related elements on each part of the page. Maintain negative spaces to balance the design elements. Focal point Determine the element that needs to be focused on. Create a hierarchy on the page by formatting the style, color, size, and weight. 34 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Hands-on Activity Module Cards Access the module cards for the Canva How-Tos, specifically the following functions: a. Organize files e. Set alignment b. Create a design f. Format texts c. Workspace set up g. Colors and photos d. Insert elements h. Share and publish design Hackathon Project #1 Objectives 1. Explore related ideas to the given topic with the group; 2. Organize ideas with the group and develop a plan to accomplish the project; 3. Create a project by gathering resources, distributing tasks, and applying the design process; 4. Connect with peers through feedback by sharing the final project; and 5. Evaluate the project’s overall design process and reflect on the group’s experiences creating the project. 35 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity Film Festival Introduce movies to people your age by giving them an enticing poster and a persuasive pitch as to why they should watch them. This project requires students to: Create a movie poster using Canva. Provide the movie’s information in a Google Document with the following information: ○ Movie Plot ○ List of Characters ○ Soundtrack ○ References Make a pitch during the presentation. Book Fair As an alternative, conduct a book fair in class. Instead of working on a movie poster, ask the students to reimagine a book cover. This project requires students to: Create a book cover using Canva. Provide the book’s information in a Google Document with the following information: ○ Summary ○ List of Characters ○ Possible soundtrack ○ References Make a pitch during the presentation. Music Festival Another possible alternative is a music festival. Instead of working on a movie poster, ask the students to reimagine album covers for their chosen album or soundtrack. This project requires students to: Create an album cover using Canva. Provide the album’s information in a Google Document with the following information: ○ Background ○ List of Artists ○ Soundtrack ○ References Make a pitch during the presentation. 36 CS 7: Computer studies Fundamentals Unit 2: Collaboration and Productivity References Canva.com. (n.d.). Design School: Canva for Beginners. Retrieved from https://www.canva.com/designschool/courses/canva- 101/?lesson=opening-canva-for-the-first-time Canva.com. (n.d.). Design School: Graphic Design Basics. Retrieved from: https://www.canva.com/designschool/courses/graphic-design- basics/?lesson=design-to-communicate Computer Science Teachers Association. (2017). CSTA K-12 Computer Science Standards, Revised 2017. Retrieved from http://www.csteachers. org/standards. GSuite Learning Center. Get started with Docs. Retrieved from: https:// support.google.com/a/users/answer/9300503?hl=en GSuite Learning Center. Organize your files in Google Drive. Retrieved from: https://support.google.com/drive/answer/2375091?co=GENIE. Platform%3DDesktop&hl=en Johnson, L. (2017). Google Apps. London, United Kingdom: Flame Tree Publishing. Retrieved from https://www.flametreepress.com/wpcontent/ uploads/dlm_uploads/2017/03/Document2-1.pdf 37 UNIT 3 The Problem Solving Process Lesson 1: The Problem Solving Process Lesson 2: The IOSP Model CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process Unit Summary This unit introduces the formal problem solving process that is used in computational and non-computational problems — Define, Prepare, Try, and Reflect. This unit will also deepen the student’s knowledge and understanding of the computer’s main functions — Input and Output, Processing, and Storage. In this unit, the students will explore sample applications and identify which computer functions are present. They are expected to come up with a proof of concept for their innovations as an application of the topics covered in this unit and preparation for the second hackathon project. Unit Objectives 1. Determine different problem solving stages and come up with a solution to a problem; 2. Define the input-output-storage-processing model to develop a solution to a problem; 3. Collaborate with students to solve a problem; and 4. Apply the problem solving process and the input-output-processing-storage model to solve real-world scenarios using technology. CSTA K-12 Computer Science Standards Algorithms and Programming ○ 1B-AP-08 - Compare and refine multiple algorithms for the same task and determine which is the most appropriate. ○ 1B-AP-11 - Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process. ○ 1B-AP-16 - Take on varying roles, with teacher guidance, when collaborating with peers during the design, implementation, and review stages of program development. ○ 2-AP-17 - Systematically test and refine programs using a range of test cases. 39 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process Computing Systems ○ 1B-CS-01 - Describe how internal and external parts of computing devices function to form a system. ○ 1B-CS-02 - Model how computer hardware and software work together as a system to accomplish tasks. Impacts of Computing 2-IC-20 - Compare tradeoffs associated with computing technologies that affect people’s everyday activities and career options. 40 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process LESSON THE PROBLEM SOLVING 1 PROCESS Problem-solving is at the heart of Computer Science. Before engaging in the computational part, students must first encounter and solve problems that are non- computational in nature. In this lesson, the students will explore real-world challenges and suggest solutions to these problems. Lesson Objectives 1. Determine different problem solving strategies and come up with a solution to a problem; 2. Define the problem-solving process and its components; and 3. Apply the problem-solving process by identifying actions to solve real-world scenarios. Unplugged Activity Paper Bridge Give the students 10 minutes to plan and design a bridge that can carry two boxes of filled milk cartons. The bridge should be at least 2 inches from the ground. The paper bridge should extend 8 inches from one stack of books to the other. The bridges will be tested only after it was submitted to the teacher. Give the groups another round. Using the same materials and same constraints, ask the students to modify or improve their plans and designs within 10 minutes. Collect the bridges and test if they can hold two milk cartons. 41 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process Aluminum Boat Give the students 10 minutes to plan and design an aluminum boat that can carry the most number of 25-centavo coins. Ask one member from each group to drop the coins on their group’s boat. The boat shall stay afloat while the coins are dropped one by one. Once the boat submerges, count the number of coins inside. Give the groups another round. Using the same materials and same constraints, ask the students to modify or improve their plans and designs within 10 minutes. Collect the boats and test if they can hold more coins than the first try. Spaghetti Tower Give the students 10 minutes to plan and design a tall spaghetti tower that can freely stand without leaning or being taped to the ground. Ask the groups to create the tallest tower using 10 spaghetti sticks, 9-inch yarn, and 9-inch tape for the first try. Give the groups another round. Using the same materials and same constraints, ask the students to modify or improve their plans and designs within 10 minutes. Measure the height and test the stability of the towers. Chain Challenge Give the students 10 minutes to plan and design a paper chain. Ask the groups to create the longest and sturdiest chain using 1 sheet of long bond paper and 36-inch tape for the first try. Give the groups another round. Using the same materials and same constraints, ask the students to modify or improve their plans and designs within 10 minutes. Lay the chains side-by-side and identify the longest and sturdiest chain. Discussion Problem Solving Problems and problem-solving are part of our everyday lives. The term “problem” refers to varying situations as simple as deciding what clothes to wear given a particular weather or as challenging as managing expenses to fit a budget. As problems are inevitable, we try to look for solutions to solve them right away. However, we often do not think things through because of varying factors such as pressure or anxiety. 42 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process A plan of action to approach different kinds of problems makes us good problem solvers. In elementary, we are thought steps to solve math problems: What is asked? What is given? What are the operations to be used? What is the solution? What is the conclusion or final answer? Generally, we can follow these steps in solving any problem. Computer science is fundamentally a problem-solving discipline. Computer scientists, developers, and programmers are on the hunt for solutions to real-world problems using technology. Before these people arrive at a solution, they must first understand the situation - What is the problem? How do humans manually solve this problem? What is lacking? These questions lead them to the next steps: 1. Translating the problem and the manual solution into something a machine can do; 2. Instructing the machine to get the job done; and 3. Testing and trying again. The Problem Solving Process As problems become more complex, they require a methodological approach to find a fitting solution. Sometimes a single, continuous step will solve the problem, sometimes decisions should be made between choices, and sometimes there needs to be a step back until the problem is fixed. Define Understand the problem. Identify what is asked and what are the available resources. When the problem becomes understandable, it becomes easy to plan and identify what has to be done. Identification narrows down the problem. Prepare Brainstorm possible ways to solve the problem. Suggest ideas and examine all possible choices or options and envision what might happen by weighing potential outcomes and consequences. Also, explore and gather additional information from reliable sources. 43 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process Try Given all materials and information gathered, execute the solution. Test the outcome as many times as needed. Reflect Reflect and evaluate the outcome. Identify what works, what needs improvements, and what is lacking. Sometimes, reflecting may lead us to start over or improve what already works. Whichever is the case, do not be afraid to try again. Problem Solving Process Unplugged Activity Word Search Find the following words in this word search puzzle: DEFINE, PREPARE, TRY, REFLECT, PROBLEM, SOLVE, CYCLE, SOLUTION, COMPUTER, SCIENCE. The words are written horizontally or vertically in the grid. After finding all ten (10) words, reflect on how you applied the problem-solving process in accomplishing the activity. 44 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process 1ST TRY 2ND TRY TIME TO ACCOMPLISH DEFINE PREPARE TRY REFLECT Task Delegation An organization is holding a foundation week celebration and decided to form three teams, with exactly five members each, to handle specific tasks — Events Team, Media Team, and Outreach Team. After filling up all three teams, reflect on how you applied the problem-solving process in accomplishing the activity. Names- Alo, Ben, Carla, Damien, Edna, Fan, Genaro, Homer, Isla, Juliet, Kryz, Laila, Max, Nazek, Owen Close Friends In a Fight Expressed team of choice (Not required, but try to (Required to keep them (Assign them on the team put them together) apart) of their choice) Alo and Damien Alo and Genaro Carla - Outreach Max and Isla Ben and Homer Owen - Media Nazek and Laila Fan and Max Kryz - Events Owen and Genaro Damien and Laila Ben and Juliet Isla and Owen Genaro and Edna Kryz and Juliet Events Team Media Team Outreach Team 1. 1. 1. 2. 2. 2. 3. 3. 3. 4. 4. 4. 5. 5. 5. 45 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process After filling up all three teams, reflect on how you applied the problem-solving process in accomplishing the activity. 1ST TRY 2ND TRY NUMBER OF CONFLICTS DEFINE PREPARE TRY REFLECT 46 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process LESSON 2 THE IOSP MODEL As a continuation of the problem-solving process, this lesson connects how computing is used in problem solving. In this lesson, students will explore how computers solve problems using their four main functions- input and output, storage, and processing. Lesson Objectives 1. Define the input-output-storage-processing model to develop a solution to a problem; 2. Identify user input and expected output; 3. Determine different processing techniques to generate output from an input; 4. Identify the correct usage of storage in the problem-solving process; and 5. Apply the model to solve real-world scenarios using technology. Discussion The IOSP Model As discussed in Unit 1 Lesson 1 in CS 7, a computer can collect input from the user, process and store them based on the instructions, and output data in the desired format. These four functions make the computer a computer. Applying the problem solving process, developers must first identify what information is needed to solve the problem, how this information should be transformed or operated, and how this information is presented to give a solution to the problem. First, they must identify the input and the output of their proposed technology. Next, they should decide what types of processing it would need to work on. Finally, they should decide what information should be stored and kept for future use. 47 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process IOSP Model Input and Output A computer begins its work by asking for or receiving input from a user, device, or another computer. A computer responds by giving an output to a user, device, or another computer. Computers are electronic devices that turn input into output. The table below shows examples of inputs and outputs: Inputs Outputs Using and typing on the keyboard Instructs the computer to display the pressed character on the screen. Clicking the play button using a mouse Tells the computer to play the video on the screen and the song through the speakers. Tapping the checkout button on a touch- Tells the application to finalize your screen device orders and display your receipt on the screen. Processing Computers do not simply take input and magically display a new output without performing some processes in between. Processing is what a computer does to transform an input into an output. There are four basic types of processing a computer can use, specifically a computer application — if/then or the conditionals, counting, finding a match or searching, and comparing. 48 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process 1. If/Then or Conditionals are used to make decisions. 2. Counting involves arithmetic operations to produce an output. 3. Finding a match involves searching through stored information or other resources to look for a possible match or output. 4. Comparing helps identify whether any two pieces of information are the same. Storage Not all information should be stored. Considering the limitations of every storage device, the only information to be used in the future is saved or kept. Oftentimes, the stored information is accessed and reused multiple times. While there are different pieces of information that should and should not be stored, it is up to the developers and the owners to identify what, why, and how this information should be stored. Hands-on Activity App Investigation Fill out the table in the activity sheet on the last page by exploring and investigating how the IOSP model is used in the following applications. For every identified form or processing, explain how it was used in the application. Slambook Get to know your teacher more by trying out this slambook mini-quiz game. Calculator Like any existing calculator, this application can perform basic operations like addition and subtraction. Freshies’ Stats Find out how many freshies in UPRHS belong to a specific category. 49 CS 7: Computer studies Fundamentals Unit 3: The Problem Solving Process INPUT STORAGE PROCESSING OUTPUT What is/are Identify what From the four basic forms What is/are APP the required information is/ of processing, what are the produced information as are stored and used in this application? output/s? input/s? not. Slambook If/Then Comparing Finding a match Counting Calculator If/Then Comparing Finding a match Counting Freshies’ If/Then Stats Comparing Finding a match Counting References Code.org. (2022). Retrieved from https://studio.code.org/courses/csd-2021 Computer Science Teachers Association. (2017). CSTA K-12 Computer Science Standards, Revised 2017. Retrieved from http://www.csteachers. org/standards 50 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process UNIT 4 The Design Thinking Process Lesson 1: The Design Thinking Process Lesson 2: User-Centered Design (Define and Prepare) Lesson 3: Designing User Interface (Try) Lesson 4: Feedback and Testing (Reflect) Hackathon Project #2 51  Unit Summary In Unit 3, the students learned that every problem, whether computational or non- computational, can be solved by applying the Problem Solving Process. In this unit, the concept of empathy for others will be highlighted as students address other people or users’ problems by applying the design thinking process— problem-solving with empathy. The students will be introduced to the five-step process of design thinking that will motivate and deepen their appreciation for producing relevant and meaningful innovations with strong social impact. Unit Objectives 1. Determine different design thinking modes; 2. Collaborate with students to solve a problem; 3. Apply the design thinking process as a form of problem-solving with empathy; 4. Identify and assess the users’ needs; 5. Develop a prototype to simulate a solution to the problem; and 6. Gather and respond to feedback about their prototypes. CSTA K-12 Computer Science Standards Algorithms and Programming ○ 2-AP-10 - Use flowcharts and/or pseudocode to address complex problems as algorithms. ○ 2-AP-15 - Seek and incorporate feedback from team members and users to refine a solution that meets user needs. ○ 2-AP-17 - Systematically test and refine programs using a range of test cases. Computing Systems ○ 2-CS-01 - Recommend improvements to the design of computing devices, based on an analysis of how users interact with the devices. ○ 2-CS-02 - Design projects that combine hardware and software components to collect and exchange data. Impacts of Computing ○ 2-IC-20 - Compare tradeoffs associated with computing technologies that affect people’s everyday activities and career options. ○ 2-IC-21 - Discuss issues of bias and accessibility in the design of existing technologies. ○ 2-IC-22 - Collaborate with many contributors through strategies such as crowdsourcing or surveys when creating a computational artifact. CS 7: Computer studies Fundamentals Unit 4: The design thinking Process LESSON THE DESIGN THINKING 1 PROCESS Steve Jobs once said “Design is not just what it looks like, it is how it works”. In this lesson, design will be introduced to students with an emphasis on creating products with relevant and well-thought-out functionalities and not just good-looking. Lesson Objectives 1. Understand the design thinking process as a form of problem-solving focusing on the user’s needs; 2. Analyze an object’s usefulness and design; 3. Suggest improvements to an object’s design based on the user’s needs, and 4. Connect and empathize with users by matching the problem specifications with the proposed design features. Discussion Design Thinking in the Real World Below is a table containing a summary of the challenges and solutions per company or product in the videos. 53 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process Company Challenge/s or Problem/s Solution/s or Product Petit Pli Children grow fast and Ryan Yasin came up with a design outgrow their clothes. for clothes that a four-month-old baby can use until the age of 3. The material is water and wind- resistant. He used his engineering skills to provide sustainable fashion. Stokke Cribs are stowed away after Stokke offered a convertible cot that Sleepi some time and never used a child can use until the age of 10. again until a new baby in the family is born. Jollibee Queueing up to order at the Ordering faster and easier Store cashier. through the self-order Kiosks. Innovations Close contact with meal Convenient and contactless servers during dine-in and receiving of orders through the take-out. Jollibots. Safe and secure pick up of take- out orders through smart lockers and conveyor belts. McDonald’s Energy consumption to Harness the power of the sun to Green and operate stores 24 hours a energize lampposts. Good Store day. Harvest and recycle rainwater to Added cost of water save up at least 6000L of water consumption for general per year. cleanings. Bike-friendly initiatives include Little to no parking for Bike-and-Dine stations where 2-wheel vehicles. cyclists can enjoy their meals while on their bikes. e-Charging stations are also installed for electric bikes and electric scooters. 54 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process The Design Thinking Process What is Design Thinking? Mandi Dimitriadis, an educator and a speaker, defined Design Thinking as: 1. An approach to solving ill-defined or poorly-stated problems; 2. An iterative, non-linear process that helps resolve issues or redefines problems in alternative strategies and solutions; and 3. A strong foundation to formulate reliable strategies that result in good and working products. Problem Solving Process Design Thinking Process 55 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process Design Thinking Modes 1. Empathize (at the heart of the problem-solving process) - means to understand the users’ needs and eliminate judgments, biases, and barriers. 2. Define - identify the problem to work on by asking the right questions. The define mode gives the opportunity and helps the designer build the most authentic solutions. 3. Ideate (equivalent to the Prepare stage in the problem-solving process) - generate ideas by accepting different perspectives, strategizing solutions, and merging and refining insights. 4. Prototype (equivalent to the Try stage in the problem-solving process) - develop prototypes and/or mockups to show how something works and depict a product’s functionality. 5. Test (equivalent to the Reflect stage in the problem-solving process) - test solutions and seek user feedback. Provide a user report that contains complete details and clear information focused on primary concerns and follows standard templates. Importance of Design Thinking It provides designers with creative confidence to adapt and respond to a fast- changing environment. It is grounded on human-centric techniques that redefine problems in an iterative process. It promotes a solution-based approach to addressing problems. It develops empathy with the target user and maintains a hands-on approach to prototyping and testing as a way to contribute to solving real-world challenges. 56 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process LESSON USER-CENTERED DESIGN 2 (DEFINE AND PREPARE) All problems are solvable. The solution to a problem can only come from the people who have experienced or continue to experience the problem. According to Tim Brown1, it is the responsibility of the designers to integrate the three components of design thinking — Technological Possibilities, Business Success, and User Needs. This lesson introduces the first three modes of the design thinking process — empathize, define, and ideate. Lesson Objectives 1. Come up with different and relevant ideas to meet user’s needs; and 2. Translate user’s needs into technical features of an app. Unplugged Activity The Right Fit The right fit activity challenges the students to design with empathy by understanding and knowing their users first. Imagine working as a sales representative where customers go to ask for recommendations about a product. This mini-activity requires students to “put themselves in others’ shoes”. This activity is adapted with modification from Code.org Unit 4 - The Design Process (‘21-’22) Lesson 1, available under the Creative Commons License (CC-BY-NC-SA 4.0). 1 As cited by Mr. Sherwin Pelayo in SP 1001 Week 1 57 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process Footwear Options Choose among these eight different shoe types what will be recommended based on the user’s description or preference. A B C D E F G H User Descriptions or Preferences 1. Someone who loves to dance. 2. Someone who goes hiking. 3. Someone who spends most of their day indoors. 4. Someone who is athletic. 5. Someone who spends most of their day standing. 6. Someone who likes to appear stylish and unique. 7. Someone who lives someplace where it snows a lot. 8. Someone who walks to work. 9. Someone who struggles to put their shoes on due to a physical disability. 10. Someone who likes to go on long walks outside. 11. Someone who lives by the beach. 12. Someone who frequently gets swollen feet due to allergies. 13. Someone who wants to go out and have a good time with friends. 14. Someone who needs to put on shoes quickly to walk their dog. 15. Someone who wants to appear professional. 16. Someone who wants to relax at the end of a long day. 17. Someone who works in a ranch. 18. Someone who goes to school. 58 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process Design Feedback This time, pretend to be a customer looking for a footwear you will use for a specific event. For each of these footwear, finish the statements that give feedback on the object’s design with the following guide questions or statements: Identify where or why you would use it. What do you like about the look of it? What do you wish to change about it? Suggest changes or improvements. I will use this in I like I wish What if I will use this in I like I wish What if I will use this in I like I wish What if Discussion User-Centered Design A human-centered or user-centered design is rooted in people’s actual needs. Different products are made for different people. It is important to consider as many users as possible while designing a product or an application. According to Tim Brown, design thinking is the “human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.” 59 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process Empathize Mode To empathize means to put yourself, as a designer, in your client’s shoes. Your focus is on what they do and not what they want. Empathy is the centerpiece of a human- centered design process (Pelayo, 2021). We can characterize design thinking as problem-solving with empathy as we design for other people other than ourselves. How to Empathize? Observe - view users and their behavior in the context of their lives, disconnect between what someone says and what one does. Engage - engage with the users through interviews. Watch and listen - allow users to show how they do things and listen as they vocalize their perspective of the problem. Define Define Mode Designers begin formulating meaningful and actionable problem statements in the define mode. The define mode requires a designer to bring clarity to the problem by synthesizing what has been learned from the interviews, observations, and research and reframing the problem in terms of the users’ needs. How to Define? Look for something interesting from the gathered information. Observe patterns and make connections. Brainstorm and try different ways to state the problem. Prepare Ideate Mode The ideate mode gives room for designers to generate ideas and concepts for a larger number and a wider possibility of solving problems. The ideation part of the design process requires designers to step beyond the obvious, uncover the unexpected, and create fluency and flexibility. How to Ideate? Combine the conscious and the unconscious mind, and the rational and the irrational mind. Brainstorm or sketch possible solutions. Generate as many ideas as possible. Defer judgment. 60 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process LESSON DESIGNING USER 3 INTERFACE (TRY) Executing the plan begins with trying to make a physical representation of a product. In this lesson, the students will move on from ideating to prototyping. Moving from the ideation phase to prototyping happens when designers have chosen and considered the most likely to delight innovation, the most rational choice, and the most unexpected insight among the selections. Lesson Objectives 1. Introduce different design elements in a user interface; 2. Develop a paper prototype to visualize the user interface, and 3. Share the paper prototype with others and reflect on their design strategies. Discussion Try Prototype To make a prototype means to make abstract ideas concrete or make a tangible representation of the plan for testing and feedback. Prototypes are early models of the product that are understandable and can easily be replaced or modified after feedback before developing an actual application. A prototype is a cheap way to produce a somewhat working product or application that mimics how users will use it in the future. How to create a Prototype? Start building and build with the user in mind. Do not spend too much time working on a prototype. 61 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process Do not get attached to the produced prototype. Iteratively improve each part or feature as deemed necessary. Fail quickly and cheaply. Use cheap materials that are replaceable and can easily be modified. User Interface A user interface or UI contains visual elements that a user accesses or controls to communicate with an application or a machine. Controls that are self-explanatory, efficient, and user-friendly to operate are characteristics of a good UI design. 62 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process LESSON FEEDBACK AND TESTING 4 (REFLECT) The design thinking process, the same as the problem-solving process, is an iterative process that requires consultations and revisions to achieve the best possible solution. This lesson shows the students the importance of giving and receiving feedback, especially that they, as designers, are not addressing a problem for themselves but for a majority of users. Lesson Objectives 1. Test the prototype and gather feedback from users; and 2. Iteratively improve the prototype based on feedback. Discussion Open House Delegate The assigned member/s in the booth will listen and take note of the feedback from other students visiting and testing their prototype. They will also be responsible for answering questions and clarifications from other students. Testers The assigned member/s to test will roam around to visit other groups’ booths. They will give feedback on every feature of the prototype. They may also ask questions and clarifications to the members in the booth. 63 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process Reflect Test Testing goes hand in hand with prototyping. In the previous session, prototypes are a way for users to physically experience and test the product or an application. Testing is an important part of the entire process as it tells how well the prototype meets the user’s needs. Natural and honest user feedback is gained when they are provided an opportunity to test a product for themselves. How to Test? Show but do not tell how the product or application works or how it is used. Solicit feedback and listen to what the users say. Interact and gain empathy for the users again. Hackathon Project #2 Objectives 1. Explore related ideas to the given problem with the group; 2. Organize ideas with the group and develop a plan on addressing the problem; 3. Create a project by gathering resources, distributing tasks, and applying the design process; 4. Connect with peers through feedback by sharing the final project; and 5. Evaluate the project’s overall design process and reflect on the group’s experiences creating the project. Tech Startup Imagine working in a tech company. You are tasked to propose a discovery that will solve real-world problems. Let’s gather and provide solutions that will help improve the usual processes in our school, neighborhood, or community. 64 CS 7: Computer studies Fundamentals Unit 4: The design thinking Process References Code.org. (2022). Retrieved from https://studio.code.org/courses/csd-2021 Computer Science Teachers Association. (2017). CSTA K-12 Computer Science Standards, Revised 2017. Retrieved from http://www.csteachers. org/standards Pelayo, S. (2021). Coursebank | Project SPARTA Ph SP1001 - Design Thinking for Analytics. [Lecture] Makers Empire. (2018). What is Design Thinking? A Handy Guide for Teachers. Retrieved from https://www.makersempire.com/what-is-design- thinking-a-handy-guide-for-classroom-teachers/ 65 UNIVERSITY OF THE PHILIPPINES RURAL HIGH SCHOOL College of Arts and Sciences University of the Philippines Los Baños Brgy. Paciano Rizal, 4033 Bay, Laguna [email protected]