====== BRAINBOX - YOUNG CODERS: ====== === Students learn: === ^Curriculum ^Learning Activities ^ |SCIENCE |Real world monitoring | |TECHNOLOGY |HTML coding | |ART |Blended multimedia elements | |ENGINEERING |Interactive control of real-world devices| |MATHEMATICS |Use co-ordinates for positioning| Based on your results, do you think that knowing more about art is useful for a web coder? === HTML (web page) Coding For Beginners === {{ :brainbox:young-coders:coders-640x360.jpg |STEAMpunks - Young Coders}} HTML is easy to learn. You can do some very neat things with HTML (a lot more than you would guess). You will enjoy it :) Here is a good way to get started using an [[http://www.w3schools.com/html/|on-line HTML editor and set of simple tutorials]] === Task 01: === Using the [[http://www.w3schools.com/html/html_intro.asp|on-line editor]] you can edit the example HTML code (and/or create your own code), and click on a button to instantly view the result: === Figure 1. Example Web Page Coding Using On-line HTML Editor & Tutorials === {{ :brainbox:young-coders:html:lesson-01:lesson-01-html-01.jpg |W3cSchool On-line HTML Editor}} === The Required Tasks for Lesson-01 === Using the [[http://www.w3schools.com/html/html_intro.asp|on-line editor]]: - Create a [[http://www.w3schools.com/html/html_basic.asp|basic web page]] containing a heading and two paragraphs - Create a web page with [[http://www.w3schools.com/html/html_links.asp|two links]] to your two favourite web sites - Create a web page that displays[[http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position_percent|a background image]] when the page is viewed in a browser Copy and paste your finished pages from the on-line editor and copy your three files into the folder provided by your teacher. === Optional Extra Tasks for Lesson-01: === - Create a simple web page (HTML) & store it on your own workstation: - https://developer.mozilla.org/en-US/Learn/HTML/Write_a_simple_page_in_HTML - Design a page or project [[http://www.w3schools.com/html/html_media.asp|using sound and video]] - see the 'simple' and 'advanced' examples below. ---- ==== YOUNG-CODERS - ADVANCED HTML & THE INTERNET OF THINGS ==== ====== Introduction to Machines & The Internet of Things ====== Why circuits and electrical devices will be even more important in the future: According to ABI Research & Forbes: By 2020, the Internet of Things will generate 30 billion autonomously connected end points and $8.9 trillion in revenues. IDC predicts that in 2014 we will see new partnerships among IT vendors, service providers, and semiconductor vendors that will address this market. Again, China will be a key player: The average Chinese home in 2030 will have 40–50 intelligent devices/sensors, generating 200TB of data annually. http://www.forbes.com/sites/gilpress/2013/12/03/idc-top-10-technology-predictions-for-2014/#! "We have a clear vision: To create a world where every object, from jumbo jets to sewing needles, is linked to the Internet" http://en.wikipedia.org/wiki/Internet_of_Things {{ youtube>s9nrm8q5eGg?640x360 |Andy Stanford-Clark - The Internet of Things}} === Fig 1. Dr Andy Stanford-Clark is a Distinguished Engineer and Master Inventor at IBM UK === * IF UNABLE TO ACCESS YOUTUBE TRY:**[[http://viewpure.com/s9nrm8q5eGg|VIEWPURE LINK - Andy Stanford-Clark - The Internet of Things]]** He specialises in technologies which are helping to make the planet smarter, by analysing and reacting to data from remote sensors. === Video: Innovation Begins At Home: The Internet of Things === ====== HTML Coding Project - The Internet Of Things ====== **[[https://en.wikipedia.org/wiki/Internet_of_Things|The Internet of Things]] connects devices and vehicles using electronic sensors and the Internet**. Students can download a complete set of files that they can use to experiment and play with. The files are compatible with all operating systems and most browsers. **You can [[http://web1.wahroonga-p.schools.nsw.edu.au/wps/index.html|view the files here]]** === All of above is optional === * The '**ADVANCED** HTML5 CODING STUFF' is designed for student to prepare students to code HTML and control/monitor devices connected to 'The Internet of Things' (coming to WPS Term 2 2016). * The '**VERY ADVANCED** HTML5 CODING STUFF' is probably well beyond what is possible for most students but supplied as example of what is possible for anyone who wishes to 'go further'. === Download The Example Files And Experiment: === The full set of files have been compressed using '.zip' format. Most operating systems can extract .zip files without requiring any extra software. **{{:bbps-young-coders-html5.zip|DOWNLOAD FULL SET OF FILES}} (NOTE Total approx 10Mbytes)** === IMPORTANT: === * When extracted, the full set of files can be found inside a folder called **wps**. * When adding your own images/sound files, copy them into the 'wps' folder so that all of your files are in that folder. * To edit the files, use a **simple text editor** like notepad or similar * To view a file, navigate to the wps folder and double-click on any file to open it in your favourite web browser. Using the above procedure, students may customise and edit all features found in the examples displayed on the website (see links below), plus optionally incorporate their own original multimedia works: Gaining experience with editing these files will prepare students so that they will be able to easily code their own HTML pages to control devices that will be connected to //The Internet Of Things// (starting at WPS Term 2 2016). ++++ Appendix A| **ThingyPI:** Your mission is to create one or more web pages that can switch the remote devices on/off The things at the remote site are connected to a Raspberry Pi that is running a 'flask' web server. Using the information supplied below, create your own web page and add code that can control the remote 'things' via the Internet. There is a real-time video streaming service that you can view (to monitor the changes at the remote site. There are also real-time sounds which you can be played when you make a change to things connected to the ThingyPi server. Here are the links and tools that you will need to control the things on the ThingyPi server: - Server IP address 10.145.169.27 (only from inside school at the moment - soon from home) * Hostname: thingypi.schools-nsw.org - Mains voltage (240V) radio control (RC) switches (to turn power on/off) * Example: http://10.145.169.27/rf/switch_01/on - Low voltage (3-12V), relays (to turn battery controlled devices on/off) * Example: http://10.145.169.27/gpio/switch_01/on - General Purpose In/Out (GPIO) (write your own code to control Rasperry Pi GPIO logic pins) * GPIO Input: http://10.145.169.27/gpio/16/click/ - Actions: 'click' only * GPIO Output:http://10.145.169.27/gpio/8/click/ - Actions: [on|off|click|flip] - Streaming video with Pan, Tilt and Zoom (PTZ) controls (write your own code to control and/or embed live video stream in your own web page) * Link: http://10.145.169.27:89/wps-stream.html - Infrared streaming camera (write code to view and/or embed live video stream in your own web page) * Link: http://10.145.169.31:88/videoMain - Streaming Sound and Video 'on demand' (write your own code to play/embed remote sound effects in your page) * FIXME A range of example devices and toys are connected to the above switches. These will be updated and changed depending on availability and student ideas/suggestions/requests ++++ ----