1. Martin Norris Computing Teacher/Leader at Moldgreen Community Primary School, Huddersfield www.computingcpd.weebly.com Martin.Norris@kirkleeseducation.uk CAS Master Teacher www.computingatschool.org.ukwww.computingatschool.org.uk (CAS)

2. CPD session 3 1.00pm HTML to write a webpage Websites using templates 1.30pm Touch Develop: Creating a background 1.50pm BREAK 2.00pm Touch Develop: Sprites 2.50pm EmailQuestions? 3.00pm Finish.

3. Today’s intended outcomes: Create webpages using HTML and templates Develop programming skills using a different environment

4. HTML Hack the web! Mozilla Thimble EAK

5. Hack the Web (X Ray Goggles!) https://goggles.mozilla.org/

6. Mozilla Thimble https://thimble.mozilla.org/en-US/ Save projects easily with one class login (UN = mrnorris -> pw = …) Other projects on there to remix With a login, you can publish your work to the web!

7. Good Great Even Better ❶Change the heading ❹ Introduce a different picture ❷Write a new paragraph ❸Make something bold or italics Tip: Don’t forget to close the tags, especially tags Extra challenge: You could even upload your own picture to the web amazi ng ….. …

8. Thimble – Further challenge Hyperlink X-Ray Goggles (http:// is important here) Video hosting Wordpress/Weebly for Education– children can try to write the blog using html.

9. No internet connection? Use notepad/wordpad and printed helpsheets to write some HTML files eg. Title goes here! Some text can come in here! Save as ***.html - open the file and it should open in a browser window.

10. EAK www.eraseallkittens.com

11. Further HTML help Hour of code http://www.w3schools.com/html/defa ult.asp http://www.w3schools.com/html/defa ult.asp http://primary.quickstartcomputing.org

12. Email/Websites Google Mail Google Sites - https://sites.google.com/https://sites.google.com/ Planning example in Communicating page of my website – http://www. computingcpd.weebly.com Blog sites – Wordpress (ads), Blogger or Weebly for Education http://help.weebly.com/education-webcast.html http://help.weebly.com/education-webcast.html

13. web app iPhone, iPad, Android, Windows, Mac, Linux touch develop

14. Cloud computing Create at home on your mobile Anywhere with internet access Program to respond to touch or mouse clicks. Publishing a script to make it available for all other users.

15. touch develop If you are typing on a keyboard you should notice that as you start to type each command a list of matches will appear on the left. When you see the command you are looking for, you can use the UP and DOWN cursor keys to move onto it and then press ENTER to select it.

16. The main code for your program is called main() so anytime you want to go back to your code select main() from your scripts. Game properties score – controls the score in the game lives – controls how many lives you have left in the game Board properties width – controls the width of the game playing area height – controls the height of the game playing area background – controls the background of your game playing area Sprite properties artwork – controls the appearance of your sprite character or obstacle speed – controls the speed at which your sprite moves height – controls the height of your sprite width – controls the width of your sprite Position – controls where the sprite appears on the screen

17. Game object functions If we want to change the value of a property, we usually call a function. Functions are programs we can call that do something for us. In this case, the functions change the value of a property for us. To change the value of a score we call set score, to change a width we call set width etc. NB there are a few slight irregular names eg. change the position you call set pos.

18. Game functions set score – change the score set life – changes the number of lives Board functions set width – changes the width set height – changes the height set background – allows you to change the background color set background picture – allows you to display a picture as a background

19. Background I want to do something to the board object The set background scene function can be used to change the background picture

20. Background 1) Add art to the media section

21. Background 2) Let's add code to set the game's background scene.

22. Game function: set lives For example, if I want to change the number of lives in the game, I will work with the game object, since lives is a property of the game object. Which function? To set the number of lives to 1000, The code will look like this: game-> set life(1000) Change the number of lives in your game.

24. Sprites (variables) Each obstacle, power up, enemy, or character is created by adding a sprite. 1) Add a picture to the art section first Creating a variable or a var. The name of the variable is selected automatically, and we can change it if we like. The variable will start appearing in the tiles so we can use it later.

25. y, x Origin is the top left corner = (0,0)

26. Sprite functions set speed – changes the speed of the sprite set height – changes the size of your sprite set width – changes the size of your sprite set pos – changes where on the screen your sprite is displayed

27. Set a speed for your sprite Select the tile for your sprite. Select set speed, and enter an x (horizontal) velocity, and a y (vertical) velocity. Let’s try it and try changing the speeds to see the effects.

28. Other code code to create a boundary on the board. game → bounce on sides code to set a gravity force on the board so that sprites fall when they appear on the board. board → set gravity(0, 200)

29. Conditionals (if, then, else) What function do you want to call?

30. User input User input can be introduced by using the gamepad object and asking the program to do something when (on) button is pressed: In my example, the football is moved by the click or touch of the screen.

31. Other challenges… Can you make our player sprite move up and down too? Can we add a 2 nd ball that loses you points? Add a sound resource to the art/media…then include a line of code to play the sound…when they overlap?

32. Further touch develop Resources https://mva.microsoft.com/en-US/training- courses/learn-to-code-with-codexist-the- birth-of-bot-8470?l=O2GJDJXz_6304984382 https://mva.microsoft.com/en-US/training- courses/learn-to-code-with-codexist-the- birth-of-bot-8470?l=O2GJDJXz_6304984382