Year 9 Online

Semester - Digital Technologies

Term 1 Overview

Week 1

Lessons 1 + 2: Introduction to Year 9 Digital Technologies
Download and install Visual Studio Code - https://code.visualstudio.com/
Read the following pages. In pairs, create a presentation, poster, or similar (share the file with your teacher via OneDrive) explaining the differences, similarities, and interrelatedness of HTML, CSS, and JavaScript:

Introduction to basic HTML and CSS
- Practice developing a 2-3 page site
  - Create a three page (minimum) 'About Me + Digital Technologies' website OR a website exploring a topic of your choice. Include the following:
    - HTML: titles, paragraphs, links, images, tables, divs, and classes (if appropriate)
    - CSS: link to and use an external style sheet for styling your site
    - Make each page consistent in terms of layout and style
    - Add a menu to the page (read https://www.w3schools.com/css/css_navbar.asp for more information)
    - Explore https://www.w3schools.com/html/ for additional examples

Why Learn HTML, CSS, and JS? - click to expand

Introduction to and / or Refresher on Coding: HTML, JS, and CSS are fundamental building blocks of web development and coding. Introducing these languages at an early age can spark an interest in programming and coding among students. It can serve as a gateway to more advanced programming languages and concepts.

Digital Literacy: In the digital age, understanding how websites work and being able to create basic web pages is an essential aspect of digital literacy. Learning HTML, JS, and CSS empowers students to comprehend and engage with online content effectively.

Creativity and Design: CSS allows students to express their creativity by customizing the appearance of web pages. It enables them to experiment with colors, layouts, fonts, and other design elements, fostering their artistic and design skills.

Problem-Solving Skills: Programming involves breaking down problems into smaller, manageable tasks. By learning JavaScript, students develop problem-solving abilities as they create interactive elements and respond to user actions on web pages.

Collaboration and Communication: Web development projects often involve collaboration, as different students can work on different aspects of a website and then combine their work. This encourages teamwork and effective communication.

Real-World Relevance: Learning HTML, JS, and CSS offers practical skills that students can immediately apply to create simple web pages. They can see the results of their work in a tangible and visible way, which can be rewarding and motivating.

Career Opportunities: As the demand for web development skills continues to grow, learning HTML, JS, and CSS at an early age can give students a head start in exploring potential career paths in technology, design, or other related fields.

Critical Thinking: Web development often requires logical thinking and attention to detail. Students need to understand how different code elements interact and identify and fix errors, promoting critical thinking skills.

Accessibility and Inclusivity: Students can learn about the importance of creating accessible and user-friendly web content that is inclusive to people with different abilities and needs.

Project-Based Learning: Web development lends itself well to project-based learning. Students can work on individual or group projects, which fosters self-directed learning and a deeper understanding of the material.

Week 2

Lesson1:
- - Check CSS + website is functioning appropriately
  - Complete myEdOnline up to and including 'JavaScript Vs Python'
  - Add styles to a new HTML page using named ID tag elements
Lesson2:
- - Watch video comparing JS to Python
  - Create first JS scripts (copy from video)
  - Complete console.log myEdOnline Exercise
  - Start Practice Programming Activities

Full HTML Template you can copy and paste

<!DOCTYPE html>
<html>

<head>

<title>My First Web Page</title>

</head>

<body>

</body>

</html>

HTML Cheat Sheet.pdf

Week 3

What is a variable? Explore types, input, and concatenation
Build a JS program - setting it all up
Computational Exercise 1a & 1b
Introduction to JavaScript
Start Practice Programming Activities
Sign up to a code note taking app. Choose one of the following two:
- https://3cols.com/ - An excellent code snippet app with defineable categories, but no in-browser visual rendering of code.
- https://boostnote.io/ - Similar to One Note but for coders. You can make notes, plus it will render code.
- https://masscode.io/ - A free and open source code snippets manager for developers.
Start recording your snippets of code as you go to create a reference library for yourself

Week 4

Computation Exercise 2
Continue working through JS exercises as a class
Introduction to The Big Project - Please begin Criterion A research whilst undertaking the practice JavaScript Exercises

Week 5

Computation Exercise 3 as class
Continue working through JS exercises
Introduction to arrays

Week 6

Computational Exercise 6 & 7 (if not already attempted).
Introduction to Objects and Arrays - you may choose to create the AFL web app as seen below.
You must thoroughly read the page about Objects and Arrays in JavaScript. Note relevant information in your Criterion A document.
Continue working on Project documentation - Criterion A - Due end of Week 7).
Example of JavaScript code to display selected data from an array of objects is shown below. Note lines 37 to 43 in script.js for the selection and display of data of choice.
A version of this code that displays selected data and related images in a table can be downloaded HERE (click on the AFL Footy Data Web App link).
Link to more table manipulation in JavaScript examples here

JavaScript Objects - web version

Week 7

When designing your web app (for example, the one shown in the image on the right), consider all the page layout areas you will need to give an individual ID. Below is some sample code with a number of clearly define areas labeled with IDs. Additionally, this application will input data into an object, which in turn is pushed to an array. This data is then displayed in a table.
Complete Practice Exercises
Continue working on documentation - Criterion A
Submit Criterion A at the end of this week

Week 8

Continue working on planning - Criterion B - Design

Criterion B - Design Helpful Links

diagrams.net - flowcharts
moqups.com - diagram/wireframe your web app
Flow Charts Information
Creating a flow chart in Draw.io video
An example of a project with full design
Pseudo Code Information

Week 9 - 10

Complete Criterion B - Design of project
Submit to SEQTA for assessment before the end of term

Term 2

Criterion C - Coding Your Project

Project Overview Videos for each Criterion of the Assignment

Assignment can be downloaded from Managebac

Criterion A Overview

Criterion B Overview

Criterion C Overview

Criterion D Overview

Criterion C - Helpful Links for Coding Your Projects

Term 2

Weeks 1 - 7

Criterion C - Coding Your Project
Criterion D - Complete the testing and Evaluation for project - Due Week 7
This half of the project can be presented in a 'multi-modal' format (video, presentation, narration of code + journal + evaluation questions)
You will need to submit the following:
- a zipped copy of your final project
- Word document journal
- video using the structure of the example on SEQTA
- PPT or presentation file of the above video

Criterion C + D - Video recording

Screen recording software for Criterion C + D (assessment details and task structure will be provided on SEQTA in the assessment task)
- Screencastify
- OBS Studio

Suggested plan of attack for Year 9 project

Create web page structure with appropriate headings, paragraphs, tables, input (text, number, dropdown), buttons etc (index.html)
Label ID fields in HTML markup
Name ‘consts’ in JavaScript file (script.js) the same as the IDs
Declare variables, initial values, consider their ‘type’
Declare arrays with values (or blank)
Declare arrays of objects, name them accurately (see AFL example and website)
Console.log *EVERYTHING*, including strings of event occurrence, variable/array/object values etc
If you would like to include images, put them in an image folder, name them appropriately, and conduct further investigation/learning to make them appear dynamically with JS
Name functions even if you aren’t sure of their structure yet
Work on one outcome at a time, coding each function in a stepwise manner
Occasionally work on CSS to style aspects of your web app as necessary (could be left until the end of the project)

Weeks 8 - 9

Extension and Enrichment opportunities
- Micro-Bit Group Task
- Drone coding
- Vex Robot coding
- Voxon 3D coding
- Data Analytics

Data Analytics - click to expand

Read up on Data Analytics here

Activity

What is Data?
What does data look like?
What is big data and how is it used?

Data Analytics Activity - Data Downloads

Your Task

Download one of the data sets

Check the data for any records that are missing data (clean data)
Create a pivot table and chart to find some patterns with your selected data set
Create three questions and find the answers by graphing the data
Extension - Use one of the aggregate functions like sum to create a 4th outcome and graph

Report abuse