Lesson 1: Structure, style and function
About this lesson
This is the first in a series of lessons to incorporate Graphical User Interfaces (GUIs) into your General Purpose Programming. It follows on from the Visual To Text Coding lesson series.
Year band: 7-8Curriculum Links Assessment
Links with Digital Technologies Curriculum Area
|Processes and Production Skills||7-8||
Design the user experience of a digital system, generating, evaluating and communicating alternative designs (ACTDIP028)
Design algorithms represented diagrammatically and in English, and trace algorithms to predict output for a given input and to identify errors (ACTDIP029)
Implement and modify programs with user interfaces involving branching, iteration and functions in general-purpose programming language (ACTDIP030)
Students undertake a self-reflection of the programming task. The teacher can use the completed self-assessments to assist in summative assessment.
Students will start this lesson by taking a trip back in time to try a computer their parents may have used! They'll do this by testing 3 virtual computers running in the web browser. (Note, these websites have been tested on computer / laptop, but they may not work on iPad or Chromebook.)
- Windows 3.1 (released 1992)
- Windows 95 (released 1995)
- Macintosh (released 1984)
- Students may work in pairs to visit one or more of the virtual computers, and report back to the class on the following:
- What do you notice about the colours available?
- What symbols do you recognise?
- Explain one way that your experience of the interface is different to the modern equivalent (Windows or Mac).
- Explain one way that your experience of the interface is the same as the modern equivalent (Windows or Mac).
The students have been testing some of the earliest mouse-driven Graphical User Interfaces (GUIs). Prior to the arrival of Mac and Windows operating systems, most computer users had only a keyboard and text commands to make everything happen, from creating and deleting files to playing games.
In this lesson series, we'll start each lesson by exploring GUI design principles, as well as conventions - things that GUIs have in common. Many of these conventions have been around for decades.
The Macintosh 128K released in 1984 (image CC-BY-SA-2.5-it All About Apple museum)
Learning map and outcomes
In this lesson, students will:
Let's start with some terms. Read these carefully, then answer the questions below.
HTML is one of the earliest languages of the Internet. It defines the structure of a webpage, the static content that will appear on the page when it first loads. It also allows for links. You can make a webpage purely in HTML, but it's hard to make it look good!
View this article which answers a common question, Does web development meet the requirements of the Australian Curriculum: Digital Technologies?
You might think of HTML as the skeleton of a webpage.
CSS is a script that defines the style of a webpage, allowing for webpages to have interesting and modern look-and-feel: colours, fonts, curved borders, etc.
You might think of CSS as the skin and clothes of a webpage.
- Which is a true general purpose programming language?
- Which defines the structure of a webpage?
- Which allows for loops, decisions and functions for a webpage?
- Which helps to define the look-and-feel of a webpage?
Step 1: Setup
Step 2: A non-interactive webpage
Some current popular frameworks (as of 2020) for GUIs in Python are:
- PySimpleGUI: A code "wrapper" designed to simplify the use of frameworks like TKinter above.
- PyGame: A framework designed for game-making, sometimes used for GUIs.
The video below demonstrates creating a webpage with only HTML and CSS. This demonstration is done in the CodePen environment (environment is no longer active).
Try it yourself using this pre-written tutorial before checking the solution code.
Step 3: Tinker task
Make the following changes to the pH scale website by editing the HTML and/or the CSS:
- Change the text colour for "08 Neutral" to black.
- Change the background colour for the entire page to a light grey: rgb(200, 200, 200)
- Add a short subtitle under the heading but above the scale itself: pH was introduced as a concept in 1909.
Like the main heading, the subtitle should be aligned to the left. It should have a font size of 20 pixels.
Try it yourself before checking the solution code.
Step 5: Tinker task
- Change the blackboard to look like a whiteboard. Board colour should be white and text should be black.
Change the times table to a power table, eg.
2 to the power of 0 = 1
2 to the power of 1 = 2.
2 to the power of 2 = 4.
- Change the main heading text from TIMES TABLES to POWER TABLE.
These challenges use the skills covered so far. By writing or modifying their own programs, students have an opportunity to demonstrate Application and Creation.
Using your preferred online environment, create a website using only HTML and CSS to show a First Nations seasonal calendar with broad, coloured bands.
The solution screenshot below shows the traditional seasons used by the Wurundjeri, an Australian First Nations people of the Kulin nation. The information was obtained from this website, and the specific colours were picked from the image there too. Note that the information source is also linked under the heading at the top of the finished page.
Create a webpage that prompts the user for a number to start a countdown, then displays the countdown from that number to 1, followed by "BLASTOFF!". The page should have a dark red background with a black border, and white text.
The solution screenshot below shows what is presented if the user enters 16 when prompted.
- JSFiddle – simple interface that hides linking HTML code, also used in Visual To Text Coding lesson series
- repl.it – shows complete HTML to reflect offline approach, and allows uploading of images and other files for use in webpages
- Introductory courses
- HTML tutorial – An introduction to HTML
- CSS tutorial – An introduction to CSS