Teacher Project Guide for IBM at Wimbledon

Transcription

1 Teacher Project Guide for IBM at Wimbledon Introduction to this guide This Teacher Project Guide gives full details of the IBM at Wimbledon Project, its resources, the learner journey through the content, and suggested lesson plans for its delivery. Separate documents are also available including a short (two-page) guide to the project, a mapping document showing where this is relevant to current Key Stage 4 qualifications, an exemplar completed Student Log with assessment guidance, and guidance for assessing the app solution. There are also related examination-style questions available for further assessment, if needed. This project was designed to occupy a maximum of 10 guided learning hours. Assessment is through the Student Log, which is available as a pdf and Word version from the Resources area of the website, and through the completed app prototype. Students work through the project by interacting with an e-learning unit accessed from the Project Detail frame on the IBM at Wimbledon project landing page. This click-through content is presented as text and images supported by audio. As part of the Behind the Screen programme, students studying the IBM at Wimbledon Project can also engage with an online mentor through the IT Ambassadors programme. Further information, including a link to the registration process for this, is available on the projects landing page of the Behind the Screen website. CRB-cleared IT Ambassadors from the IT Industry are already familiar with this project and are available to discuss the various activities and tasks students will face as they work through the project. An introduction to mobile app development The IBM at Wimbledon project introduces students to creating mobile apps for a purpose. They see a short video from a European tennis player who is asking for a mobile app to help her and a friend compete at Wimbledon for the first time. Although her English is good, her friend Tariq isn t quite so fluent, so the app needs to have limited text and make effective use of images and icons. During the project, students will follow a route that all apps developers take framing the problem, carrying out research, constructing a flow chart of the information that will be presented in the app and finally creating a prototype in an open source app development program. They will record the initial steps (from problem to flow chart) by completing their downloadable Student Log. A choice then needs to be taken between two supported app development platforms. These are: Flowella rapid prototyping software AppShed app development platform We have provided guides to both programs. Flowella is supported by a document that takes the user step by step through the process of creating a prototype app. This is accompanied by the project file generated through the guided process. AppShed has a downloadable text guide, but also has a video tutorial, presented by Torsten Stauch, the co-founder of AppShed. It will take around 2 hours to go through this tutorial, but at the end students will be able to use the key features of AppShed to create their app for this project, as well as apps for other purposes. Copyright e-skills UK Sector Skills Council Ltd Page 1 of 15

2 The e-learning content is text and audio. On each page there is an audio play button and students can hear the instructions for each task. Note, if students are working at individual computers on this project they will require headphones. Resources provided Behind the Screen provides a bank of resources for all projects and challenges. For this project, students can access: A downloadable Student Log in which all the work they do is recorded (available as a pdf and a Word version) Briefing document on defining problems Example app flow chart Map of Wimbledon Copyright free images of Wimbledon Briefing documents of Wimbledon competitor information Guide to using Dia flow chart software Guide to using Flowella Example of the Flowella app prototyping project Guide to using AppShed Video tutorial for using AppShed Video of the IBM Seer mobile application Additional resources for teachers are: Detailed guide with suggested lesson plans Guide to assessing the final app including a completed Student Log Mapping to existing qualifications at Key Stage 4 Accessing and using the content The e-learning unit provides a step-by-step guide to this project. This is a feature of all Behind the Screen projects and challenges. This is accessed by the link in the Project Detail box on the top right of the project landing page. The Student Log has been laid out to match the activities presented in the e-learning unit. This log is referred to throughout. Templates are provided for students to complete the log and there is a tick-list at the end of the log for the learning outcomes achieved when the whole project is completed. Learning outcomes for the IBM at Wimbledon project The broad objective of this project is to help students understand the process of mobile app development, ending with a prototype that (if built with AppShed) can be used on a smart phone (using a QR reader). Along the way students will also cover the learning outcomes as shown in table 1 below. Note these are also listed in the back of the Student Log for students to tick off as they complete them. There are also blank rows for any other skills or knowledge they feel they have acquired along the way. IBM, who supported the development of this project, have kindly offered two free ground passes to the 2013 Wimbledon Championship for the student who produces the best solution to the brief. Entries need to be sent to e-skills UK by end of April Entries should include the completed Student Log, a URL of the app (if created in AppShed) or a report/presentation including screenshots of the app screens and the user journey. See the project landing page for more information. Copyright e-skills UK Sector Skills Council Ltd Page 2 of 15

3 Table 1: Learning outcomes for the IBM at Wimbledon project Learning outcomes Listen to a client brief and identify the problem an application needs to solve Define the client problem in detail so that a solution can be planned and achieved Use information provided to determine the content of the app in planning the solution Carry out product research to understand how other apps have addressed the problem, e.g. made use of images, icons and symbols rather than text Make use of research to inform the design of screens in the app Make decisions about information that needs to be in the app Create a flow chart of the app screens including movement from one to the other and the user journey, making use of the information decisions already made Understand the limitations of certain software when working through a project Make informed choices about the use of software when working through a project Use a suitable software program to create an app prototype making use of images, icons, symbols and text Create a report or presentation to demonstrate the app solution, including screens, interactivity and the user journey Identify any problems or issues along the way and report these as part of your proposed app solution Record your progress in completing a project by using the Student Log for notes, ideas, solutions and answers to tasks and activities Sequence of activities The e-learning unit delivers the IBM at Wimbledon project in five chapters, each with 3-6 pages. Students can move forwards and backwards in the unit by clicking on the next and back buttons. Audio content is available on all pages and is played through an integrated player. There are four key activities for students to complete; framing the problem, carrying out research, constructing a flow chart and creating the app. Dedicated sections of the Student Log allow students to record their ideas and solutions as they work through the project. Table 2 below displays the sequence of activities, their locations in the chapters, with brief detail of each. Further detail can be found later in this document relating to lesson-by-lesson delivery. Copyright e-skills UK Sector Skills Council Ltd Page 3 of 15

4 Table 2: Sequence of activities in the IBM at Wimbledon project Chapter/page Activity/task Detail Location Chapter 1 p. 1-2 Chapter 1 p. 3-5 Optional activity Introduction Activity 1 Work through the AppShed video tutorial to familiarise students with this platform Revisit the brief and introduction to the click-through content Frame the problem making use of the example problem definition in the Resource Bank Chapter 1 p. 6 Activity 1 List the information the app needs to provide Chapter 2 p. 1-3 Activity 2 Carry out research into existing apps, noting their use of images/icons and text Chapter 3 p. 1 Task Planning the app with Post-It TM notes Chapter 3 p. 2 Task Download and use the example flow chart created with MS Word SmartArt graphics, think about limitations of this software Chapter 3 p. 2-3 Task Use a program (either Office software or the open source Dia program) to create a flow chart, insert a copy into the Student log Chapter 4 p. 1 Main task Design the app using either AppShed or Flowella Chapter 4 p. 2 Task Display the app solution either as a presentation or document, including screen shots (suitable for competition entry). Students may want to present their apps to rest of class. Link from project landing page Student log p. 2 Student log p. 2 Student log p. 3 Downloadable from resources area Dia guide downloadable from resources area Student log p. 4 Student log p. 8 Downloadable document from the resources area Delivering the IBM at Wimbledon project The following section of this guide gives more detail of how this project could be delivered. Note, these are suggested and make assumptions about the time students may need for each activity. The lesson plans are based upon 9 sessions of 4. Each lesson plan has been produced so it can be printed off as a separate document. Copyright e-skills UK Sector Skills Council Ltd Page 4 of 15

5 Optional pre-project tutorial on AppShed (3 x 45 minute sessions) Students can work through the AppShed video tutorial, using the provided resources to create an app. This is designed to provide accessibility information for users with an physical impairment. A zipped folder with images and icons and a learning document is provided in the resources area to accompany the video tutorial. Individuals working online 3 x 4 Make available to students the AppShed platform ( Work through individually or in pairs the video tutorial that explains the whole process of building an app with the AppShed platform. This tutorial is useful not just for the IBM at Wimbledon project but for any other app building activities the students engage with (including the Apps for Good programme) Learning document with information to accompany the video tutorial Zipped folder of resources for creating the app, including provided images and icons Additional text guide to AppShed Copyright e-skills UK Sector Skills Council Ltd Page 5 of 15

6 Session 1: Chapter 1 pages 1-3 Students are introduced to Dana through the video on the Project Landing Page. This provides the brief for the app. It needs to provide information about Wimbledon, it needs to include lots of graphics, rather than text as Tariq doesn t speak too much English, and it needs to be easy to use. More information is provided about problems and solutions when designing an app. Group review of briefing video and introduction to the brief Individual or group access to e- learning content Discussion about apps and problem solutions 20 minutes Show the whole class the video brief on the project landing page. At this stage, they can also be shown the resource bank and its contents and where to locate the e-learning unit (from the link in the Project Detail box on the top right of the page) Students can either work individually on the e-learning unit or this can be shared with the whole group, as the opening three pages talk more about the brief and about the problem it has posed. Examples are given of apps that are either games or information providers. These are each providing a solution to either boredom or hunger. Initiate a class discussion about the apps students are familiar with and what problems they solve. Not surprisingly a lot of apps fall into the information provision category. Make a list on the board of apps and their purpose. Move then to the purpose of this app and how it needs to solve a problem. Bring out from the discussion that this app needs to provide information but has additional demands, around the way the information is provided that is, in a way that a non-english speaker could understand and therefore use. Finish the lesson with a request that students look for apps that have been produced to reduce the need to read text. This will be revisited in the research they carry out in the third session. Challenge students to find apps that are not games or information providers. This may be more difficult than it sounds! Student Log Completed Student Log Copyright e-skills UK Sector Skills Council Ltd Page 6 of 15

7 Session 2: Chapter 1 pages 4-5 Remind students of the brief they have for this project, and review the video of Dana if necessary. In this lesson they will identify the problem they have to solve and think more about framing a problem. An example problem definition is provided in the resources area. The more detail they give to their problem definition, the easier it will be to find a good solution. They will complete the first half of activity 1 in their Student Log. Group recap of the app brief with Dana s video Individual or group access to e- learning content including using the example problem definition Completing the first part of activity 1 20 minutes 1 Revisit Dana s video to remind students of the brief. Recap the progress made on the last lesson thinking about how every app has a purpose and usually that is to solve a problem. E.g. a lack of information or boredom/entertainment Students interact with the e-learning content either individually or in pairs from page 4 where they are encouraged to think more about the problem that Dana is posing. They can also look at the example problem definition downloadable (pdf) from the resources area. This looks at the problem of organising time to get things done and how a logical approach can help. On page 2 of the Student Log, students can write in their ideas about what the problem is that their designed app needs to address. The Completed Student Log is available to you to give you ideas of what should be included here (including suggested marks). Finish the lesson with a brief recap of how important it is to frame the problem effectively and with detail to make sure the solution will work. Although Dana provides quite a simple brief, there are issues here that need to be addressed mostly about how icons and images can be used to support someone who doesn t read English. Give students another problem to define this could include how to plan a trip around your local neighbourhood for someone with impaired movements, which is a problem that the AppShed video tutorial tries to address in creating a mobility app. Ask them to think about the information that would be needed by someone who had to get from A to B (two points for you to define) in your local area if they were either wheelchair-bound or visually impaired. Student Log Example definition problem Completed Student Log Copyright e-skills UK Sector Skills Council Ltd Page 7 of 15

8 Session 3: Chapter 1 page 6, Chapter 2 pages 1 Recap the last lesson and how important it is to carefully define the problem this, and any app, will need to solve. Move on to make the point that this app is one of many that provides the user with information. The next activity, the second part of activity 1, is to think about what the actual information is that the user needs. Students can look at the contents of the zipped file that has extracts from the Wimbledon competitors guide (supplied by the All-England Lawn Tennis Club) to help them with this task. They start to think about the research that is needed to get some ideas for how they will create their app. Recap of problem definition Individual access to e-learning content and resource bank to complete second part of activity 1 Group introduction to the need for research into existing products 1 1 Recap the problem definition and its importance in ensuring the final app meets the brief. Identify that the app they are going to design is information providing and that the next task is to work out what information will be included in the app. Refer students to the e-learning unit and the resource bank where they will find a zipped folder full of documents that have been extracted from the Wimbledon Competitors Guide. These will help them to work out what sort of information should be included in the app. Students work through the e-learning content and fill in the second part of activity 1. The ideas that should be included are shown in the Completed Student Log with suggested marks. Bring the group together to introduce the next task. Here they will carry out some research into different apps to identify how images and icons are used. Explain the importance of research this is how actual app and software developers get ideas for how to create new solutions. They look first at what is already out there. Make use of the PowerPoint presentation which shows the Angry Birds app research provided in the Student Log. Keen students may want to start their research early. They need to find examples of apps where there is a good use of icons and graphics rather than text. Be prepared to share these at the beginning of the next lesson. Student Log Zipped file of information documents taken from the Wimbledon Competitors Guide Completed Student Log PowerPoint slide of the Angry Birds app research Copyright e-skills UK Sector Skills Council Ltd Page 8 of 15

9 Session 3: Chapter 1 page 6, Chapter 2 pages 1 Finish the lesson with a recap of how this app will be full of information, but that it needs to be presented in a visually supportive way and not be richly text based. Ask students to see whether they use any apps themselves which could be described in this way. Copyright e-skills UK Sector Skills Council Ltd Page 9 of 15

10 Session 4: Chapter 2 pages 2-3 Students research a range of apps to look for examples of how information is provided with minimal use of text through images and icons. They record the information in their Student Log. The plenary visits some of the examples students have found where icons are used effectively to convey information without text. Group recap of research task including the Angry Birds example provided and examples of icons that provide information Individual or paired access to e- learning content and Student Log to carry out research into apps that use minimal text to convey information 30 minutes Recap the previous lesson by showing the Angry Birds research in the PowerPoint presentation. Remind students that they need to design their app with the minimum use of text and maximum use of images and icons Use the PowerPoint slide that displays icons that can be used to convey information. Students use the e-learning unit either individually or in pairs to find apps in the App Store that make use of icons and images. They may also have experience of apps they, or their friends and family members, use. They record the information into their Student Log, page 3. Finish the lesson with a bringing together of examples of icon/image use and how these can be used in place of text to convey information. Remind students that these examples can help them to plan their app design. Students can continue to research apps at home or by talking to friends and family members who already have and use a range of different apps on their mobile devices Student Log Completed Student Log PowerPoint slides with Angry Birds example and icons example Copyright e-skills UK Sector Skills Council Ltd Page 10 of 15

11 Session 5: Chapter 3 pages 1-3 Briefly recap the research activity that has helped students to see examples of the use of icons and images to replace text-rich information. The next step is to plan the app, particularly the journey a user will take. A simple flow chart is the best method to plan this. An example is provided as a SmartArt graphic in the resources area, with a brief discussion about the limitations of this for creating a flow chart. Students start to plan using Post-It TM notes in pairs or small groups. When they have a plan they can photograph the notes to record the flow of information before moving to software to create this more precisely. Dia flow chart software is supported with a text guide or students can be make use of mind mapping or flow chart software already in school. They make a simple flow chart to show how a user will move between screens in the app and what each screen will include. Group recap of progress so far including research to identify how icons and images can be used. Introduction to the planning activity through group access to e-learning content. Use PowerPoint slide to show the simple flow chart created in SmartArt graphics. Students use post-it TM notes to plan their app and the different screens they will need. When ready, students move to use software to generate their flow chart. 20 minutes Brief recap of the research activity carried out to find examples of the use of icons and images to convey information Introduce the planning activity that will start with Post-It TM notes to show the different screens that will be needed in the app. Use pages 1-3 of chapter 3 of the e-learning content to introduce this to students, and show the example card game app graphic from the PowerPoint slide so students can see how a flowchart can represent the user journey through an app. Take advantage of this to discuss briefly the limitations of SmartArt graphics to create a flow chart (to bring out the need to make good choices of software when working in technology). A slide is provided in the PowerPoint presentation. Students can work in pairs or small groups to plan their app using the Post-It TM notes. Photographing these with a phone or camera to record their plan would be helpful, or Students can download and use Dia at home making use of the text guide to this program. Keen students may wish to volunteer to show others how to use this at the next lesson. Student Log Example of a flow chart for a card game app from the Resource Bank Completed Student Log PowerPoint slide of the card game SmartArt graphic Copyright e-skills UK Sector Skills Council Ltd Page 11 of 15

12 Session 5: Chapter 3 pages 1-3 copying the flow of information into a notebook. If ready, students can move to a program to create their flowchart more formally. This can be existing networked mind mapping or flowchart software, or the SmartArt graphics in MS Word (noting the limitations of this), or by using the supported Dia open source software (see downloadable guide in the Resource Bank). This is easy to use and enthusiastic students may enjoy making use of this software. Finish the lesson with a recap of the progress so far. Not all students will have moved on to software to develop their flowchart, but by the end of this session, they should have some idea of the screens they need to include in their app and how the information will flow. They should have a record of the structure of the Post-It TM notes used in the main activity. Copyright e-skills UK Sector Skills Council Ltd Page 12 of 15

13 Sessions 6-8: Chapter 3 pages 1-3 Chapter 4 page 1 Students continue to create their app flowchart in a software program. When they have completed this, they export a copy of this to their Student Log. The next task is to create their app prototype in software of your choice. Text guides to Flowella and AppShed are provided, plus a video tutorial to AppShed. Decide which software to use and make this available to students. They begin to create their apps making use of the maps, images and documents in the resource bank. The app building activity can take two more sessions in addition to this one. Students complete their flowchart Introduce recommended software for the app development and show students how to access this 20 minutes 20 minutes Review the progress students have already made on their flowcharts. They should have an electronic version, created in either MS Word SmartArt, Dia or a mind mapping/flow chart program of your choice in their Student Log at some point during this session. Students continue to work on their flowchart. When this is complete, show students who are ready to move on the software they are to use to create their app. Students can make use of the downloadable guides to the software or work through the video tutorial for AppShed prior to creating their app. Students make use of the maps, images and information provided in the resources area to continue to create their app prototype. Make sure all students are now ready to create their app and indicate to those who are about to start which software they are using to design their prototype. The app creation process will occupy the next two or three lessons. Students who are particularly enthusiastic about using new software may be willing to master AppShed and share their knowledge with others in the class. Student Log Guides to the app development software (Flowella and AppShed) Video tutorial for AppShed Images, maps and documents in Resource Area Completed Student Log Copyright e-skills UK Sector Skills Council Ltd Page 13 of 15

14 Session 9: Chapter 4 page 2 Students have created their app prototype, and their Student Log is completed with activities 1 and 2 and the flow chart. In this session they finish off the work and decide how to present their app design, particularly if they wish to enter the competition for the IBM ground passes to next year s Championships. If the app has been created in AppShed, they will have a URL that displays their app. This can be included at the end of the Student Log and the whole document can be submitted for assessment and/or as an entry to the competition. Students may also wish to create a report or presentation that explains the journey they took to create the app and displays screenshots of the app screens. This would also be suitable for entry to the competition. Group recap of progress through planning to design of an app prototype Individuals work to ensure their app is ready for assessment and their Student Log is complete Decision about competition entry and ensuring everything is in place to submit and finish 20 minutes Recap progress made to create the app and ensure all students have a prototype built in the platform of choice. If this is AppShed, ensure the URL is recorded in the Student Log. Students check their Student Log and app are ready for assessment. They can also decide at this stage whether to enter their apps into the competition to win the ground passes to the Wimbledon 2013 Championships. Entries can comprise the completed Student Log and AppShed app URL. If apps have been created in a different piece of software, a presentation or report with screen shots of the app screens together with the Student Log can be entered. Students finish this project by ticking off the learning outcomes in the back of the Student Log before submitting for assessment. Congratulate the students for completing this Behind the Screen project. Students who are now familiar with AppShed can use this for further app development. This is also a useful platform for App Building clubs or other extracurricular activities, or for supporting the Apps for Good programme. Student Log Completed Student Log Guidance to assessing the completed app Copyright e-skills UK Sector Skills Council Ltd Page 14 of 15

15 Notes: Copyright e-skills UK Sector Skills Council Ltd Page 15 of 15