Programming for the Web (Year 12)

Interactive website — A site that responds to user input and updates content without a full reload (forms, live search, maps), using HTML/CSS/JavaScript on the front end and server-side code and a database behind it.

E-commerce — Buying and selling goods or services online: product catalogue, cart, secure payment (HTTPS), user accounts, order tracking, stock database. Needs strong security and privacy controls for payment and address data.

Progressive web app (PWA) — A web app that behaves like a native app: installable to the home screen, works offline, loads fast and can send push notifications. Built with a service worker, a web app manifest and HTTPS.

Service worker — A script that runs in the background, separate from the page. It intercepts network requests and decides to serve from the cache or the network, giving offline use and background sync.

Web app manifest — A JSON file (manifest.json) giving name, icons, theme colours, start URL and display mode (standalone/fullscreen) so the app can be installed and launched like an app.

Caching — Storing HTML, CSS, JS and images locally so repeat visits load without the server and the app can work offline.

PWA v interactive site (2025 Q16a, 'Compare', 3 marks) — MG sample: both are platform-independent (any device with a browser). PWAs can pre-cache updates so they work offline, but may not show real-time changes to weather or warnings; interactive websites need a constant internet connection for any update. MG also allows: some PWAs prompt for installation or setup which might deter users. Compare = similarity AND difference, applied to the weather app.

Responsive design — A layout that adapts to screen size (media queries, flexible grids), essential for PWAs across devices.

Data packet — A small chunk of data sent over a network. Each packet has a header (source and destination IP address, sequence number, protocol information) and a payload (the actual data).

Packet switching — Large data is split into packets that may take different routes through routers, then are reassembled in order at the destination using the sequence numbers. Lost packets can be re-sent (TCP).

IP address — A unique number that identifies a device on a network so packets can be routed to it. IPv4 uses 32 bits written as four decimal numbers (0–255), e.g. 192.168.1.1, with about 4.3 billion addresses.

DNS — The Domain Name System is the internet's 'phonebook': it translates a human-readable domain name (e.g. nsw.gov.au) into the IP address of the server. Uses port 53.

Request flow — Browser asks DNS for the IP, opens a TCP connection to the server (port 80 or 443), sends an HTTP/HTTPS request, server returns a response (status code + content), browser renders it.

HTTP — HyperText Transfer Protocol: request/response between browser and web server. Port 80. Not encrypted.

HTTPS — HTTP over SSL/TLS (encrypted, authenticated). Port 443.

TCP/IP — The core suite. IP addresses and routes packets; TCP makes delivery reliable by establishing a connection, ordering packets and re-sending lost ones.

DNS — Translates domain names to IP addresses. Port 53.

FTP — File Transfer Protocol: moves files between client and server. Port 21 (control). Not encrypted.

SFTP — SSH File Transfer Protocol: encrypted file transfer. Port 22 (runs over SSH). FLAG: the school notes list SFTP as 443; the usual port is 22. Know the protocol is the secure alternative to FTP; give 22 if a port is asked.

SSL/TLS — Secure Sockets Layer / Transport Layer Security: encrypt data in transit and authenticate the server. TLS is the modern successor to SSL. They secure other protocols (HTTP becomes HTTPS) so they do not have their own main port.

SMTP — Simple Mail Transfer Protocol: sends email between clients/servers. Port 25 (secure submission 465/587).

POP3 — Downloads email from the server to one device (usually removes it from the server). Port 110 (secure 995).

IMAP — Accesses email on the server and keeps it synchronised across devices. Port 143 (secure 993).

Port — A number identifying the service on a device that receives the traffic (IP address finds the device, port finds the application).

SSL certificate — A digital certificate issued by a trusted certificate authority that proves a website's identity and holds its public key. Enables HTTPS (padlock) and gives authentication of the server.

Encryption algorithm and key — The algorithm is the method for scrambling data; the key is the secret value used with it. Longer keys are harder to break.

Plain text and cipher text — Plain text is readable data; cipher text is the encrypted, unreadable form.

Symmetric and asymmetric — Symmetric: same key both ways, fast. Asymmetric: public/private key pair, safe key exchange. TLS uses asymmetric to agree a shared key, then symmetric for the session.

Authentication and authorisation — Authentication proves who you are (login, certificate). Authorisation decides what you may access.

Hash value — Fixed-length output of a one-way function. If the data changes, the hash changes, so it checks integrity (and stores passwords as hashes).

Digital signature — A hash of the message encrypted with the sender's private key. The receiver decrypts it with the public key and compares hashes, proving who sent it (authenticity) and that it was not changed (integrity).

Big data — Extremely large, fast, varied datasets that traditional tools cannot handle. Drives new web architecture: distributed storage, cloud, scalable servers.

Data mining — Discovering non-obvious patterns in large datasets (classification, clustering, association, regression) to predict trends, e.g. product recommendations or predicting peak demand.

Metadata — Data that describes other data (e.g. a video's title, duration, format, timestamp, location). It standardises diverse sources so data can be found, compared and mined.

Streaming service management — Organising, storing and delivering content over the internet: storage, content delivery networks (CDNs) that cache content near users, load balancing, auto-scaling, personalised recommendations.

Predictive maintenance — Analyse network traffic and logs to spot patterns that signal a coming failure and fix it before it affects viewers.

2025 Q18 (3 marks) — Metadata and data mining work TOGETHER: metadata describes the content so data mining can accurately find viewing patterns and predict high demand. Streaming management uses this with real-time user data to balance server loads (scale servers up early) and give smooth playback, preventing technical difficulties during the live event. Markers: do not address metadata and data mining separately; focus on preventing technical issues.

Security use — ML on user behaviour data can detect fraud (e.g. logins from several locations at once).

W3C — The World Wide Web Consortium is the international standards body for the web. It develops open standards (HTML, CSS) so the web works consistently, long-term, across all browsers and devices.

WAI — Web Accessibility Initiative: a W3C program making the web usable by people with disability. Produces WCAG (Web Content Accessibility Guidelines), ATAG (Authoring Tool Accessibility Guidelines) and WAI-ARIA (making dynamic content accessible).

Internationalisation — Standards so content works across languages, scripts and regions (Unicode, text direction, date formats).

Web security — Standards that protect users and apps (e.g. HTTPS, same-origin policy, content security policy).

Privacy — Standards giving users control of their data (school notes example: Do Not Track, a proposal letting users say they do not want to be tracked across websites).

Machine-readable data — Structured data (e.g. JSON, semantic markup, schema) that software can interpret, supporting interoperability and search.

Front end — Client-side: what the user sees and interacts with in the browser. HTML (structure), CSS (style), JavaScript (behaviour). Frameworks: React, Vue, Bootstrap, Tailwind.

Back end — Server-side: application logic, authentication, and data access that run on the server. Python (Flask, Django), Node.js, PHP.

Interface to databases — The back end connects to a database to create, read, update and delete data (CRUD) and sends results to the front end, often as JSON via an API.

SQL database — Relational: structured tables with fixed schemas, relationships and integrity (e.g. MySQL, SQLite, PostgreSQL). Good for transactions and complex queries.

Non-SQL (NoSQL) — Flexible schemas, horizontal scaling, suited to big data and unstructured data (e.g. key-value stores like Redis, document stores).

Circular data flow (2025 Q23b) — Front end sends a request, the back end gets the data from the database and returns it to the front end. Server-side programming is needed for dynamic content such as the changing menu, subscriptions and order tracking.

Back end contribution — Performance (efficient queries, caching), scalability (vertical: more CPU; horizontal: more servers behind a load balancer), security (authentication, authorisation, encryption), reliability (failover), third-party integration, error handling.

Rendering engines — Browsers interpret the same code with different engines (Gecko in Firefox, WebKit in Safari, Blink in Chrome/Edge) so pages can look or behave differently. Developers test cross-browser.

Elements panel — Inspect and edit the live HTML/CSS (DOM) to fix layout.

Console — Run JavaScript and see errors and logged output for debugging.

Network panel — Lists all requests, sizes and times to find slow or failed requests and test API calls.

Performance panel — Profiles page speed and rendering.

Application panel — Inspect cookies, local storage, cache storage and service workers (key for PWAs).

Lighthouse — A tool that audits performance, accessibility and PWA features.

Same-origin policy — Browser rule that restricts scripts on one site from reading data from another origin.

CSS — Cascading Style Sheets control presentation (colour, layout, fonts) separately from HTML content.

Consistency of appearance — One external style sheet gives every page the same look; change it once and the whole site updates.

Flexibility — Media queries and flexible layouts adapt the site to different browsers and display devices (phone, tablet, desktop).

Maintenance tools — Pre-processors (Sass), frameworks (Bootstrap, Tailwind), linters and normalisation libraries (reduce browser default differences).

2025 Q7 style item — Read the CSS fragment and decide the result: the answer was 'Blue background, white text, border around the heading'. Practise reading selectors, properties and values (background-color, color, border).

Selector syntax — selector { property: value; } e.g. h1 { color: white; background-color: blue; border: 2px solid black; }

Version control — Tracks every change to code, supports branching (work on features separately) and merging (combine them), keeps an audit trail of who changed what, and lets you revert to a stable version. Git with GitHub is the common example. Essential for collaboration.

Frameworks — Provide structure and reusable components to control complex apps (React, Vue, Flask, Django); encourage best practice and scalability.

Template engines — Combine static templates with dynamic data to produce HTML (Jinja2 in Flask, Handlebars). Separate markup from logic and make pages reusable.

Predesigned CSS classes — Libraries like Bootstrap (components) and Tailwind (utility classes) save time and keep a consistent design.

Open-source software — Code that is freely available to view, modify and distribute under a licence (e.g. MIT). Benefits: lower cost, transparency (public review finds vulnerabilities), community contribution and speed. Developers contribute by fixing bugs, adding features and writing documentation.

Why it matters — Slow pages increase bounce rate and reduce satisfaction and search ranking. 2025 Q16b asked for TWO ways to MINIMISE load time (not investigate it).

Minification — Remove unnecessary characters (spaces, comments) from HTML, CSS and JavaScript to reduce file size.

Image optimisation — Compress images, use efficient formats (WebP) and appropriate sizes; marker sample: offer lower-resolution images or text-only display.

Lazy loading — Load images and media only when they are about to be seen, cutting the initial payload.

Caching — Browser caching stores resources locally for repeat visits; server-side caching stores pre-built content; marker sample: cache commonly requested weather data.

CDN — A content delivery network stores copies of files on servers near the user, reducing latency.

Async and defer — Add async or defer to script tags so JavaScript does not block page rendering.

Back-end tuning — Select only required database columns, batch queries, index tables, compress and minimise API responses.

PWA — Service worker caching makes repeat loads fast and works offline.

Answer pattern — Method + how it works + effect on load time (e.g. 'lazy loading shows only the images in view, reducing the initial data downloaded so the page appears sooner').

CMS — Software to create, edit, organise and publish web content through a web interface without extensive coding (WordPress, Drupal, Joomla).

Features — Content editing, organisation by tags/menus, scheduling, user roles, themes/templates, plugins/extensions (e.g. e-commerce).

Prevalence — Widely adopted by blogs, businesses and enterprises. School notes claim over 60% of websites use a CMS and WordPress runs over 40% of all websites. (Figures are from the school notes; they are approximate and change each year.)

Trade-offs — Faster and cheaper to build and non-technical editing, but plugin security risks, performance overhead and less flexibility than custom code.

Web server software — Listens on a port for HTTP/HTTPS requests (e.g. Apache, Nginx), serves static files directly, and passes dynamic requests to the application (acting as a reverse proxy). Returns a response with a status code (200 OK, 404 Not Found) and content.

Web framework — Provides structure for routing URLs to functions, handling requests, templates and database access (Flask, Django).

Objects — Instances of classes representing entities (user, order) and mapped to database tables.

Libraries — Reusable packages installed by a package manager (pip, npm) that provide common functions.

Database — Stores and retrieves the data; frameworks manage connections (connection pools) and queries.

Sequence — Request arrives, web server receives it, forwards to the framework, route function runs using libraries, queries the database (maybe through an ORM), renders a template or JSON, response goes back to the client.

2025 Q23b style — 'Explain why server-side programming is needed': give 3 things with scenario examples (read from the database, produce dynamic menu/order status, keep data secure on the server).

SQL — Structured Query Language: declarative language to query and manage relational databases. Direct, low-level, full control, fast for complex queries; needs SQL knowledge; syntax varies slightly between database systems.

ORM — Object-Relational Mapping lets programmers use classes and objects (rows are objects) and generates the SQL. Examples: SQLAlchemy, Django ORM. Higher abstraction, less boilerplate, easier to switch databases; less control, can be slower for complex queries.

2025 Q9 answer — Code focused on object manipulation: ORM. Tables can be joined to enhance searching: both. Programmers can choose the language used to access the database: ORM.

Compare in one line — SQL = control and performance; ORM = convenience and portability.

Clear communication — Agree API data formats (JSON/XML) and endpoints; use tools like Jira or Teams.

Rapid prototyping — Back end builds API mocks so front end can build and test the UI early; small features tested incrementally.

Shared responsibility — Front end minimises unnecessary API calls; back end optimises queries; joint reviews reduce latency.

Problem solving — Slow page loads may be inefficient API calls or heavy rendering; working together locates the cause faster.

Font — Limit typefaces and use a clear hierarchy (size/weight) for consistency and readability.

Colour — Enough contrast between text and background. WCAG: 4.5:1 for normal text and 3:1 for large text. Do not rely on colour alone to convey meaning.

Audio and video — Add value (tutorials) but do not auto-play with sound; optimise and lazy load; provide captions/transcripts.

Navigation — Clear, consistent menus; reach any page within a few taps (school rule: three); visible back/home.

Accessibility — Semantic HTML (header, nav, article), alt text for images, ARIA attributes (e.g. aria-live), keyboard navigation, scalable text.

Inclusivity — Language options (allow text expansion), cultural sensitivity in icons and colours, flexible interfaces (dark mode, font size, reduce animations), design for different abilities.

mkdir — Create a directory. mkdir mysite

cd — Change directory. cd mysite

touch — Create an empty file. touch index.html

cp — Copy a file. cp index.html backup.html

rm — Remove a file. rm old.html (rmdir removes an empty directory)

cat — Print file contents. cat notes.txt

grep — Search for text in a file. grep "error" server.log

Hash bang — #!/bin/bash as the first line says which interpreter runs the script.

Use — Automate server tasks: creating folders, backups, restarts, searching logs.

Define A — One sentence on A.

Define B — One sentence on B.

Similarity — One shared characteristic (e.g. both can use caching).

Difference — One clear difference with a consequence for the scenario.

Scenario — Name one detail from the stimulus.

Point 1 — State the role (processes requests, retrieves data from the database).

Point 2 — Scenario example (dynamic menu, order tracking, subscriptions).

Point 3 — Back-end security/logic that the client cannot be trusted with (payment, authentication).