CTEC1433 Internet of Things Applications

Announcements

The primary online resource is w3schools.com.

---

Course Description

You will develop a network-capable embedded system using an industry-standard platform, protocols, and software tools. The course will also focus on security concerns and other practical issues facing Internet-connected devices.

Week 1

Unit 1: Intro to WWW

Lab Zero Files

• templates.zip [ZIP; 1,584 bytes]

XAMPP

•    XAMPP [apachefriends.org] — run Apache, PHP and MySQL on your own computer to do web development — using 127.0.0.1 or localhost

---

Week 2

Due Date:

• Lab Zero: January 17th

Unit 2: Basic HTML

Lab 1 Files

• apache.html [HTML; 46 bytes]
• apache_pb.gif [GIF; 4,463 bytes]
•  tidy.exe [EXE; 856,064 bytes]

Links

• World Wide Web Consortium (W3C) [w3.org]
• HTML Validator [w3.org]
• HTML5 Standard [w3.org]
• W3 Schools [w3schools.com]
• HTML Reference [w3schools.com]
• HTML Tutorial [w3schools.com]
• HTML Entity Reference [w3.org]

---

Week 3

Quiz 1 is on Tuesday (Jan. 21) on Brightspace

Due Date:

• Lab 1: January 24th

Unit 3: Basic CSS

Lab 2 Files

• Lab Files

Content

• CSS Examples
• CSS Box Model [PNG, 769 x 555, 54,143 bytes]

Links

• CSS Validator [w3.org]
• CSS Home Page [w3.org]
• CSS Reference [w3schools.com]
• CSS Tutorial [w3schools.com]
• Encycolorpedia [encycolorpedia.com]
• Colours from xkcd [xkcd.com]:
  • rgb.html [HTML; 121,406 bytes] — colour samples
  • rgb.txt [TXT; 19,245 bytes] — list of all colours
  • rgb.css [CSS; 31,569 bytes] — CSS file with a class for each colour that sets the foreground (color)
  • rgb_bg.css [CSS; 44,859 bytes] — CSS file with a class for each colour that sets the background (background-color)

---

Week 4

Due Date:

• Lab 2: January 31st

Unit 4: Images

• Using four-number padding
• Checkpoint 4.1.2 (original): HTML CSS
• Checkpoint 4.1.2 (fixed): HTML CSS
• Checkpoint 4.2.1: HTML CSS Background image [JPG; 7,304 bytes]
• Checkpoint 4.2.2: HTML CSS
• Checkpoint 4.2.3: HTML CSS
• Background image for Checkpoint 4.2.2 and Checkpoint 4.2.3 [GIF; 3,430 bytes]

Links

• Lab image files — for use with lab exercise 2.2

---

Unit 6: More CSS

Unit 6 Code

• box.html
• box1.html
• box2.html
• float.html
• Image [JPG; 23,832 bytes]
• floatyls.html
• floatylsclear1.html
• floatylsclear2.html
• floatylsoverflow.html
• floatylsscroll.html

Unit 7: Page Layout with CSS

Two-Column Layout

Note: all links within each page result in 404's

• Image [JPG; 28,883 bytes]
• version 1
• version 2
• version 3
• version 4

---

Week 5

Quiz 2 is on Tuesday (Feb. 4) on Brightspace

Tables

HTML Tables [w3schools.com] tutorial
CSS Tables [w3schools.com] tutorial

Forms: Unit 9 Code

• contact.html
• form1.html
• form2.html
• form3.html
• form4.html
• form5.html
• form6.html
• formcss.html
• color.html
• date.html
• email.html
• list.html
• range.html
• search.html
• spinner.html
• tel.html
• url.html

Introduction to PHP

• PHP

---

Week 6

Due Date:

• Lab 3: February 14th

Forms Using PHP

•  form.html
•  formproc.php  view source
•  input_tags.php — generates and processes its own form  view source

More Unit 10 code

1. Visitor form example — uses the HTML5 required attribute; and label, fieldset, legend, and datalist elements.
2. Brochure form example — View source uses the required attribute, combined with a PHP function to indicate required fields.
3. Brochure form example 2 View source — inlined CSS into PHP function, plus added PHP code to "process itself".
4. All HTML5 input types:
   
   • Form View source — all possible input types — try it in each browser to see the level of support
   • GET processor View source — action for the <input type="image"> element View image [PNG, 210×70]
5. Comment form example — uses JavaScript to pre-process (validate) the form inputs.

Links

• HTML Forms [w3schools.com]
• HTML Form Elements [w3schools.com]
• HTML Input Types [w3schools.com]
• HTML Input Attributes [w3schools.com]

---

Week 7

Monday, Feb. 17: Family Day (College closed)

Quiz 3 is on Tuesday (Feb. 18) on Brightspace

---

Mid-Term Break: February 24—28

Week 8

Midterm Exam takes place this week, in L117, on your scheduled lab day:

• Section 01:  Monday, March 3rd, 2:30 PM — 4:20 PM

• Section 02:  Wednesday, March 5th, 10:30 AM — 12:20 PM

• Section 03:  Friday, March 7th, 1:30 PM — 3:20 PM

---

Week 9

Raspberry Pi labs begin this week in L117

Raspberry Pi materials

Raspberry Pi Links

• Official site [raspberrypi.org]

---

Week 10

Quiz 4 is on Tuesday, March 18

Due Date:

• Lab 4: March 21st

Sense HAT Links

• Official site [raspberrypi.org]
• Getting started with the Sense HAT [raspberrypi.org]
• RaspberryPiIVBeginners - Sense Hat [youtube.com]
• Python library [pythonhosted.org]
• Online Sense HAT Emulator [trinket.io]
• Sense HAT Projects [raspberrypi.org]

Python Links

• Official site [python.org]
• Python Beginners Guide for Programmers [python.org]
• Python Beginners Guide for Non-Programmers [python.org]
• Moving to Python from other languages [python.org]
• The Python Language Reference [python.org]
• The Python Tutorial [python.org]
• W3Schools' Python Tutorials [w3schools.com]
• Thonny official site [thonny.org]

---

Week 11

Quiz 5 is on Tuesday, March 25

Due Date:

• Lab 5: March 28th

JpGraph materials

MQTT Links

• Beginners Guide To The MQTT Protocol [steves-internet-guide.com]
• Understanding the MQTT Protocol Packet Structure [steves-internet-guide.com]
• Beginners Guide To The Paho MQTT Python Client [steves-internet-guide.com]
• eclipse-paho/paho.mqtt.python [github.org] — Eclipse MQTT client module project page
• paho.mqtt.python client module full documentation [eclipse.dev]
• Eclipse Mosquitto™ — An open source MQTT broker [mosquitto.org]

---

Week 12

Continue to work on Lab 6 …

---

Week 13

Final Exam takes place this week, in L117, on your scheduled lab day

• Section 01:  Monday, April 7th, 2:30 PM — 4:20 PM

• Section 02:  Wednesday, April 9th, 10:30 AM — 12:20 PM

• Section 03:  Friday, April 11th, 1:30 PM — 3:20 PM

---

Week 14

Friday, April 18: Good Friday (College closed)

Due Date:

• Lab 6: Thursday, April 17th