- Needs to be updated

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 :)

You will be using the W3Schools on-line HTML editor and tutorials to create some simple web pages.

Using the 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:

Using the on-line editor:

1. Create a basic web page containing a heading and two paragraphs
2. Create a web page with two links to your two favourite web sites

- Create a web page that displaysa background image when the page is viewed in a browser

1. Create a web page that contains an image or where an image can be used as a link.

Copy and paste each of your finished pages from the on-line editor into one or more files saved onto your own computer desktop or into your home folder.

Here is some information about how to control things connected to the Internet (the Internet Of Things):

You do not need to spend hundreds or thousands of dollars on your things.

Here are some example 'things' to connect

Using the information supplied below, create your own web page by creating code that can control the remote 'things' (devices and multimedia content) via the Internet.

You will create web (HTML) links to things that are connected to the Internet at remote locations. Your web link will wok like a switch. Instead of using a 'real' switch', you will turn a remote device ON/OFF by clicking on your web link(s).

You will need to create a link between the switch on your web page and the 'thing' that you wish to control.

Creating links to 'things' is like finding the route through a maze: You need to start at the beginning and 'join the dots' that take you on a clear path to the end of the maze.

You can figure out how to join the dots by using a table, such as Table 1. below. When used this way, you are starting to learn about some very useful things that are more commonly known as Truth Tables

For example, referring to Table 1 below, see how to 'join the dots' to create a valid link (URI). To create your link, adding each of the following items in the correct order:

1. Communication method (protocol) for connection to remote site.
2. Publicly advertised Internet address of remote site.
3. Publicly advertised name of remote server.
4. Type of switch at remote site.
5. Name or ID of remote switch.
6. Remote switch action.

Using the above items to create a link is a lot like using electrical components to create a electrical circuit. When you click on your link (switch) data (electricity) flows through the network (electrical circuit) to obtain the desired result.

If your circuit is incomplete or wrongly constructed, your IOT link (circuit) will not work.

• Public server address (proxy): flipster.tv
• Public link to 34Spi server: flipster.tv/34spi/

http://flipster.tv/34spi/rf/switch_06/on/

If you were building a convetional electrical circuit, you would have to join all of the components together using some kind of electrical connector.

Similarly to create your IOT link, you must connect each component by using forward slashes '/' to join each component together, thus making an unbroken to make a link (circuit) to and from your browser (web page) to the remote IOT device.

NOTE: there must be two slashes after the 'http:'

http://

but only a single slash

/

between each of the following elements.

For example, to turn the bowler hat light ON, the link in your web page your link would be something like this:

 http://flipster.tv/thingypi/rf/switch_04/on/

To turn the bowler hat light OFF:

 http://flipster.tv/thingypi/rf/switch_04/off/

1. DP Office - ThingyPi IR Camera REQUIRES NSWDET LOGIN! (RaspberryPi HD InfraRed Streaming & stop-motion video camera)
2. DP Office - Twister01 Low Res. Best way to monitor remote actions via low bandwidth (mobile phone, tablet etc).

You must create a link to 'join the dots' by using forward slashes “/” to join each part together to make a link from your browser to the remote device. You must also place your link within the correct HTML5 multimedia tags.

This is some example HTML5 code that you may add to your web page to create a link to play a remote sound:

<audio controls>
<source
    src="http://flipster.tv/34sfiles/sound01.mp3"
    type="audio/mpeg">
</audio>

And here is some example HTML5 code that you may add to your web page to create a link to play a remote video:

<video
    src='http://flipster.tv/34sfiles/video-01.mp4'
    type='video/mp4' width'210' height='210' controls>
</video>

Here are two working example of files that include the above code:

1. Play remote sound
2. Play remote video

Also, see WC3 Schools HTML5 video and HTML5 audio coding tutorials.

NOTE: It may take a few seconds for a sound and/or video link to appear in the page…! If the link(s) fail(s) to appear after one minute, try refreshing your web page.

See the introductory and advanced HTML coding information and examples for more help.

1. Create a simple web page (HTML) & store it on your own workstation:
2. Design a page or project using sound and video

1. Play Remote Sound 01
2. Play Remote Video 01

1. Create Simple Web-based Multimedia Interactives - Hover mouse around over image areas (head,tummy,window,tree) to find hidden sounds/images! See the X/Y Co-ordinates at top right hand side of image - the co-ordinates are used in code to activate elements when user positions mouse within student-specified co-ordinate values.
2. Create Simple Web-based Multimedia Interactives - More complicated: Some Youtube controls do not work from inside DoE - Click on TV screen to pause video using on-screen control if buttons not working!

Advanced HTML - How to add interactive multimedia to your web pages:

Students will be supplied with a complete set of files that they can download to experiment and play with. This allows the students to customise and edit all features found in the examples below, plus optionally incorporate their own original multimedia works:

1. WPS ImageMap Example 00
2. WPS ImageMap Example 01
3. WPS ImageMap Example 02
4. WPS ImageMap Example 03*

*NOTE: Example 03 requires access to youtube - The TV content may not work from inside school.

1. HTML5 Sound Embed Test
2. HTML5 video Embed Test

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 PI server:

1. Server IP address 10.145.169.27 (only from inside school at the moment - soon from home)
   • Hostname: 34spi.schools-nsw.org
2. Mains voltage (240V) radio control (RC) switches (to turn power on/off)
   • Example: http://10.145.169.27/rf/switch_01/on
3. Low voltage (3-12V), relays (to turn battery controlled devices on/off)
   • Example: http://10.145.169.27/gpio/switch_01/on
4. 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]
5. 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
6. Infrared streaming camera (write code to view and/or embed live video stream in your own web page)
   • Link: http://10.145.169.16:88/videoMain
7. Streaming Sound and Video 'on demand' (write your own code to play/embed remote sound effects in your page)
   • 

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

Your mission is to create one or more web pages that can switch remote devices on/off and to then design your own device to connect to The Internet of Things (IOT).

Some 'test' things have already been connected to a RaspberryPi (named //thingypi//), at a remote location (Mrs Evans' Office).

Each student has been provided with their own private web site, available from within school and via the public Internet. The site is protected by a unique login name and password.

You will login to your IOT web site using your DoE ID and password and login security is the responsibility of each student.

The above link will get you started.

• Some example files have already been copied into your personal web home folder
• You may copy, re-name, upload, edit or delete any of the example files.
• You may also upload your own files and then edit them using the admin.php file here on-line
• You should edit or delete the default file called 'index.html' and replace it with your own page.

You can also access and manage all of your files using a web browser via the public Internet.

The default IOT login page contains a link to a your web that you can use to view, edit, upload, create and copy files and folders.

Once your you have logged in, on future visits you may add 'admin.php' to the end of your website link and login using your DoE username and password. An example link to and the admin.php file would look like this:

http://flipster.tv/iot/joe.bloe/admin.php

Where 'joe.bloe' is your DoE login name (without the extra '@detnsw')

The admin.php app provides each student with their own full, personal web site admin functions, Simple File Manager: You can use this (specially customised for WPS) single app to maintain your entire website, completely in-browser, from anywhere at any time and without needing any external programs.

The app provides all the basic file management features, plus:

• A basic text editor with single-click html preview.
• Sort directory listings by file name, size, or type.
• Browser based view, edit, upload, download, copy, move and delete.

You can edit you web pages and preview the result but do not edit or delete the admin.php file (doing so will break your site!)

If you get lost, the direct link to your admin page will always be:

http://flipster.tv/iot/your.name/admin.php

Replace the 'your.name' with your own DoE login name.

To fully logout, you should always close your browser. If you do not close the browser, someone else may access your files. You are responsible for all of the content on your web site. You should not tell other people what your password is.

More details will be posted here in the next few days.

Appendix