Software Engineering › Notes › Programming for the Web (Year 12)

Programming for the Web (Year 12)

Applications of web programming: interactive websites, e-commerce, PWAs

• 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.

How data is transferred: packets, IP addresses, DNS

• 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.

Web protocols and their ports

• 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).

Processes for securing the web

• 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).

Effect of big data on web architecture: data mining, metadata, streaming

• 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 and WAI

• 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.

Web development system: front end, back end, databases

• 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.

Browser influence and developer tools

• 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 and its impact on design

• 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, libraries, open source

• 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.

Methods to support and manage load times

• 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').

Content management systems (CMS)

• 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.

The back-end process of a web request

• 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 vs ORM

• 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.

Front-end and back-end collaboration

• 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.

PWA design: UI and UX principles, accessibility and inclusivity

• 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.

Shell scripts for web development

• 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.

Skeleton: Compare/Distinguish two web technologies (3 marks)

• 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.

Skeleton: Explain why server-side programming/back end is needed (3 marks)

• 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).

Part 2. School notes (Canvas, 12SENX2) by syllabus dot point

Corrections are marked in the text. Anything not marked is the school wording.

Explore the applications of web programming, including interactive websites/webpages, e-commerce, and progressive web apps (PWAs).

Interactive website/webpages

Interactive websites respond to user actions, creating a dynamic UX. By providing personalised content based on user preferences, interactivity keeps users interested and encourages longer site visits

e.g.: simple form submissions, real-time data updates, personalised content - Flask

E-commerce

E-commerce websites enable the buying and selling of goods or services online.

Core Features:

• Secure handling of user information
• Real-time inventory management
• Secure payment processing
• Product Listings
• Shopping Cart: Allows users to add and manage items before checkout.
• User Accounts: Enables login and order tracking for personalised experiences.

Progressive Web Apps [PWA]

PWAs are web applications that combine features of web and mobile apps. PWAs are typically built with JavaScript and service workers. PWAs often offer a full-screen mode, which hides the browser's URL bar and navigation controls, giving you an experience similar to an app.

Benefits:

• Offline Access is empowered by cached resources.
• Users can receive push notifications when not actively using the app.
• PWAs are optimised for fast load times, enhancing the UX.
• Users can add PWAs to their home screens without requiring app store downloads.
• PWA provides the same functionality as native apps E.g.:

A news site that pushes notifications for breaking news, caches articles for offline reading, created in Python Flask backend.

Investigate and practise how data is transferred on the internet, including data packets. Internet Protocol (IP) addresses, including IPv4, and domain name systems (DNS).

Data packets

Large chunks of data are inefficient to send. Data is broken down into smaller segments called packets. Packets travel independently to reach their destination in a packet-switching network. When all packets arrive, the receiving device reassembles them to recreate the original data.

Components of a Packet

Header

• Sender's and receiver’s IP addresses
• A protocol that defines the communication rules (e.g., TCP, UDP).
• Packet Number: Indicates the sequence order for reassembly.

Payload

The payload is the actual data being transmitted. E.g.: a part of a file, an email message.

Trailer

The trailer marks the end of the packet and includes:

• Error Detection Data: Helps verify data integrity (e.g., CRC, checksum, parity bit).
• End of Packet Signal: Indicates that the packet transmission is complete.

Packet security

Packets are susceptible to manipulation for malicious purposes. (e.g. DDos).

Mitigation: Packet inspection, packet filtering

Internet Protocols [IP]

Ports: Protocol-based

IP protocol assigns all connected devices a unique IP address that identifies it from other devices. This allows data to be sent and received across networks in a highly organised way.

When a message or file is sent over the Internet, IP breaks it down into packets, assigns each an IP address, and ensures they reach their intended destination. After the packets arrive, protocol, like Transmission Control Protocol, reassembles them into the original message.

Internet Protocol Version 4 [IPv4]

IPv4 uses a 32-bit address system with 4.3 billion unique IP addresses. An IPv4 address consists of four octets (8-bit segments), separated by periods, each ranging from 0 to 255 (e.g., 172.16.254.1). IPv4 supports dynamic routing, allowing packets to travel through different paths and networks to reach their destination.

IPv6

Responding to the exhaustion of IPv4 addresses, IPv6 uses 128-bit addresses that allow for trillions of unique IP addresses.

Domain Name System [DNS]

Port: 53

DNS translates human-readable domain names (URLs) into IP addresses, which computers use to identify and communicate with each other over the internet. DNS also optimises performance by caching results in DNS resolvers to mitigate repeated lookups.

Key Features:

• Hierarchical structure for resolving queries.
• Caching improves efficiency and reduces lookup times.
• Essential for linking human-readable names to machine-readable IP addresses.

Operation of DNS

• User input: a user enters a domain name into their web browser.
• DNS lookup: the browser sends a DNS query to a DNS resolver, provided by the user's internet service provider (ISP) or configured in their network settings
• DNS resolver: the DNS resolver receives the query and checks its cache to see if it already has the IP address for the requested domain. If the address is still valid in the cache, the resolver returns it immediately to the browser. If not, it proceeds to step 4.
• Recursive query: if the resolver doesn't have the IP address in its cache, it becomes responsible for finding it. It starts by querying the root DNS servers, which hold information about the top-level domains (like ‘.com’, ‘.org’, ‘.net’ and so on).
• Top-level domain (TLD) server: the root server directs the resolver to the appropriate TLD server based on the domain extension. The TLD server holds information about the authoritative name servers responsible for the next level of the domain hierarchy.
• Authoritative name server: the resolver contacts the authoritative name server for the specific domain. This server holds the most up-to-date information about the domain, including its IP address.
• Response: The authoritative name server responds to the resolver with the requested IP address.
• Cache update: the resolver caches the IP address for future use, reducing the need for repeated lookups.
• Website access: the server responds to the browser's request, and the website is displayed to the user.

Investigate and describe the function of web protocols and their ports, including HTTP, HTTPS, TCP/IP, DNS, FTP, SFTP, SSL, TLS, SMTP, POP 3, IMAP

Hypertext Transfer Protocol [HTTP]

Port: 80

HTTP is the protocol responsible for transmitting web pages and other resources across the web. It facilitates communication between web browsers and a server. Each request sent by the client is independent and stateless (A system where each request is handled independently, and each interaction must provide all necessary details). This simplicity makes HTTP fast but insecure, as data is transmitted in plain text. HTTP is also flexible as it can transport various types of media.

Use Cases:

• Loading web pages
• Submitting forms on websites
• Retrieving static and dynamic content like images, videos, and text

Hypertext Transfer Protocol Secure [HTTPS]

Port: 443

HTTPS is the secure version of HTTP. It uses encryption methods such as SSL (Secure Sockets Layer) or TLS (Transport Layer Security) to provide confidentiality, integrity, and authentication between the client and server.

Transmission Control Protocol [TCP]

Ports: Protocol-based.

TCP is a connection-oriented protocol that establishes a connection between the client and the server before transferring data. It breaks data into packets, ensures all packets are received, and reassembles them in the correct order. TCP also handles error-checking and retransmission of lost packets.

FTP (File Transfer Protocol)

Port: 21

FTP is a protocol used to transfer files between computers over a network. It operates in two modes: active and passive. FTP is not secure because data is transferred in plain text. However, it's efficient for moving large files or directories between systems.

Use Cases:

• Uploading files to a website
• Downloading large datasets
• Managing files on a remote server

SFTP (Secure File Transfer Protocol)

Port: 22 (CORRECTED: the school notes say 443, which is wrong. SFTP runs over SSH, whose standard port is 22.)

SFTP is an extension of SSH (Secure Shell) that provides secure file transfer by encrypting both the commands and the data. SFTP has a simpler firewall configuration than FTP, as it uses fewer ports.

Use Cases:

• Securely transferring confidential files (e.g., financial records) over an unsecured network.

• Synchronising files between local and remote systems.

• Backup and storage of sensitive data. Key Features:

• Encrypted data transfer via SSH.

• Supports file manipulation commands (e.g., renaming, deleting).

• Operates over a single, secure port.

SSL (Secure Sockets Layer)

Port: 443 (443 is the HTTPS port that SSL/TLS commonly secures; SSL/TLS are protocols, not a single-port service.)

SSL is a cryptographic protocol designed to secure data transmission between a web server and a client, protecting it from unauthorised access.

Use Cases:

• Secure websites (e.g., HTTPS)
• Protecting data in transit for online transactions Key Features:

Uses certificates to verify server identity.

TLS (Transport Layer Security)

Port: 443 (443 is the HTTPS port that SSL/TLS commonly secures; SSL/TLS are protocols, not a single-port service.)

TLS is a more secure and efficient cryptographic protocol than the SSL protocol. TLS ensures that data transmitted between a web browser and a web server remains private and unaltered.

Use Cases:

• Secure web browsing (HTTPS)
• Secure email (with SMTP, IMAP, POP3)
• Securing VoIP (Voice over IP) communication

SMTP (Simple Mail Transfer Protocol)

Ports: 25 (unencrypted), 465 (encrypted)

SMTP is the protocol used to compress and send emails between servers or from a client to a server. SMTP pushes messages from the sender’s mail server to the recipient's mail server and works with email retrieval protocols like POP3 or IMAP.

Key Features:

• Pushes outgoing emails to the server.
• Email retrieval protocols (e.g., IMAP/POP3) are required for receiving emails.

POP3 (Post Office Protocol v3)

Ports: 110 (unencrypted)

POP3 retrieves emails from a mail server to a local device. Once downloaded for offline usage, emails are often deleted from the server, making this protocol suitable for users who access their email from a single device.

Key Features:

Simple, one-way communication (download only).

IMAP (Internet Message Access Protocol)

Ports: 143 (unencrypted)

IMAP allows users to access their email from multiple devices. Messages are stored on the server until explicitly deleted. It synchronises email across devices, enabling users to read, organise, and delete emails from any device.

Explain the processes for securing the web, including Secure Sockets Layer (SSL) certificates, encryption algorithms, encryption keys, plain text and cipher text, authentication and authorisation, hash values and digital signatures.

SSL Certificates

SSL certificates are digital certificates that establish a secure, encrypted connection between a web server and a client. They are part of the broader TLS certificates category.

Components:

Certificate Authority (CA): A trusted organisation that issues SSL certificates after verifying the identity of the entity requesting the certificate.

Public and Private Keys: The certificate includes a public key, which is paired with a private key held by the server.

Digital Certificate: This file contains the public key and information about the server and the CA.

Process:

• Client initiates the handshake by sending a message with supported encryption methods
• Server responds with its digital certificate and the chosen encryption method
• Client verifies the certificate by checking it against a list of trusted Cas. If the certificate is trusted, the browser generates a session key and encrypts it using the server’s public key.
• The server decrypts the session key with its private key, establishing an encrypted communication channel using the session key.

Encryption Algorithms

Symmetric Encryption

A single key is used to encrypt and decrypt the data. Both parties must securely share this confidential key.

E.g.: AES

Asymmetric Encryption

Two keys are used—one public and one private. Data encrypted with the public key can only be decrypted by the corresponding private key and vice versa.

E.g.: RSA: It relies on the difficulty of factoring large numbers.

Encryption Keys

Key Generation

For symmetric encryption, a random number generator is often used.

For asymmetric encryption, key pairs are generated mathematically.

Key Management

Secure storage and exchange of keys are critical. Methods like Public Key Infrastructure (PKI) are used to manage keys in a structured manner.

Key Length

The security of an encryption key is determined by its length (measured in bits). Longer keys are harder to break.

Plain text and cipher text

Plain Text:

Refers to readable data before encryption.

Cipher Text:

The scrambled version of plain text after encryption. It can be converted back to plain text with the appropriate key.

Hash Values

Convert input data of any size into a fixed-size string. The fixed string will be unique for a unique input data. It’s practically impossible to reverse the hash to obtain the original input.

E.g.: SHA-256, MD5.

Use Cases:

• Password hashed
• Verify the data integrity of files and messages by comparing the hash values

Digital signatures

Digital signature authentication ensures the integrity and authenticity of a message. The document is hashed and then encrypted with the sender’s private key to create digital signatures. Upon receiving it, the recipient decrypts the signature using the sender’s public key to retrieve the original hash. The recipient then generates a new hash from the received message and compares it with the decrypted hash. If the two hashes match, it confirms that the message remains unaltered and originates from the claimed sender.

E.g.:

Digital signatures can verify the authenticity of the software distribution since the digital certificate was signed by the developer.

Investigate the effect of big data on web architecture, including data mining, metadata, and streaming service management.

Big Data

Big Data refers to extremely large and complex datasets that cannot be managed or processed using traditional data processing tools. Big Data drives new structures and technologies to handle the vast influx of data.

Data Mining

Data mining refers to the process of discovering non-obvious patterns from large datasets. Organisations can extract valuable information by analysing large datasets to make informed decisions and predict future trends. Data is collected from various sources (social media, IoT devices, and transaction records).

E.g.:

E-commerce: Amazon uses data mining to recommend products based on user history.

Healthcare: Hospitals analyse patient data to predict the likelihood of diseases.

Common Data Mining Techniques

Classification: Assigning data into predefined categories

Clustering: Grouping similar data points together

Association: Discovering relationships between variables

Regression: Predicting a continuous value based on other variables

Metadata

With the rise of high-variety big data, metadata, a set of data that describes other data, is used more frequently. It allows us to better understand, find and use other complex data.

Metadata standardises diverse sources with common reference points, such as time stamps or geographic coordinates, to compare, categorise and combine them.

E.g., the image can be geolocated using the location metadata.

Streaming Service Management

Streaming service management involves organising, storing, and delivering digital content like movies, music, and videos over the internet.

E.g.: Netflix, Spotify, YouTube

Content Storage: Storing massive amounts of data, including videos, audio files, and metadata.

Content Delivery: Ensure content is delivered quickly and efficiently to users worldwide. This often uses Content Delivery Networks (CDNs) that cache content close to users.

UX: Providing features like content recommendations, fast loading times, and high-quality streaming without buffering.

Analytics and Personalisation: Analysing user behaviour to recommend new content based on their preferences.

Predictive Maintenance

Streaming platforms can use big data analytics, such as network traffic, to identify patterns indicating an impending system failure. This helps proactively troubleshoot, reduce downtime, and maintain a seamless UX. Cloud-based solutions that provide auto-scaling and automated recovery features are needed to create a highly available, fault-tolerant system.

Scalability and Flexibility

By analysing historical data, streaming services need to scale their infrastructure and allocate resources dynamically to meet user demands, ensuring that UX has no interruptions. The architecture is typically cloud-based, scalable solutions that can adjust resources based on demand. Containerisation tools and orchestration platforms like Kubernetes allow streaming services to add or remove resources easily, maintaining performance during peak times.

Enhanced Security and Fraud Detection

Streaming services can analyse user behaviour data with ML models in real-time to detect unusual activities that can indicate fraud and security breaches. Data security measures, including encryption, are integrated into the architecture to protect user data and ensure compliance with regulations like GDPR.

E.g.: multiple logins from different locations suggest account sharing or hacking attempts.

Investigate and explain the role of the World Wide Web Consortium (W3C) in the development of web applications, including the Web Accessibility Initiative (WAI), internationalisation, web security, privacy, and machine-readable data.

The World Wide Web Consortium (W3C) is the main international standards organisation for the web. It develops open standards to ensure the web's long-term growth.

Web Accessibility Initiative (WAI)

WAI is a W3C program that develops strategies, guidelines, and resources to make the web accessible to people with disabilities.

Accessible Rich Internet Applications (WAI-ARIA): WAI-ARIA provides ways to make dynamic web applications accessible.

Authoring Tool Accessibility Guidelines (ATAG): Addresses accessibility in content creation tools.

Web Content Accessibility Guidelines (WCAG): WCAG provides a framework for making web content more accessible.

Internationalisation

W3C’s internationalisation activities ensure that web applications and content can be used by people worldwide, regardless of language, region, or cultural background.

Web Security

W3C standards aim to protect both users and web applications from various threats.

Privacy

W3C’s privacy standards aim to give users greater control over their personal information and ensure that web applications handle data responsibly.

Do Not Track (DNT): A proposal to enable users to express their preference not to be tracked across websites.

Tracking Protection and Privacy Interest Group (PING): These groups focus on developing standards and best practices to minimise privacy risks and enhance transparency in data handling.

Machine-Readable Data

W3C promotes the use of structured, machine-readable data to enhance the interoperability and functionality of web applications.

Model elements that form a web development system, including client-side (front-end) web programming, server-side (back-end) web programming, and interfacing with databases that are based on Structured Query Language (SQL) or non-SQL.

Client-Side (Front-End)

Frontend is the development of UI and UX in a web application. It involves creating a website's visual elements and interactive aspects that users see and interact with directly in their web browser.

Technologies:

HTML (HyperText Markup Language): Defines the structure and content of a web page.

CSS (Cascading Style Sheets): Styles and layouts the web page, controlling the presentation and visual design.

JavaScript: Adds interactivity, dynamic content, and client-side logic to web pages. It can interact with HTML and CSS to manipulate the document object model (DOM).

Frameworks:

React, Vue.js: Popular JavaScript frameworks that simplify UI development and state management.

Bootstrap, Tailwind CSS: CSS frameworks that provide pre-designed components and styles.

Server-Side (Back-End)

Technologies:

• Python (Django, Flask)
• JavaScript (Node.js)
• PHP

Interfacing with Databases

Database interfacing connects the back-end to the databases where data is stored, retrieved, and manipulated.

SQL (Structured Query Language):

SQL databases use structured tables with predefined schemas. They are relational and enforce data integrity through relationships between tables.

E.g.: MySQL, OLAP for data analysis

Operations:

• CRUD operations (Create, Read, Update, Delete)
• Joins, transactions, and complex queries NoSQL (Non-SQL):

NoSQL databases are designed for unstructured or semi-structured data. They are more flexible and can handle large volumes of data with varying structures. They have flexible schemas, horizontal scaling and are optimised for read/write performance. They are suited for big data and real-time applications.

Types:

• Key-Value Stores (e.g., Redis)

Explore and explain the influence of a web browser on web development, including using developer tools.

A web browser is a software application that retrieves, presents, and navigates web pages.

Browser Rendering Engines

Since each browser has unique rendering engine that may interpret the same code slightly differently, this leads to inconsistencies in how web pages appear and function across different browsers.

E.g.:

• Mozilla Firefox: Uses the Gecko engine.
• Safari: Uses the WebKit engine.

Developer Tools

Developer tools are built-in browser tools that help developers test, debug, and optimise their code directly within the browser.

Element Panel

Displays the DOM structure of the current webpage.

Allows developers to inspect and modify HTML and CSS in real time.

Useful for identifying and fixing layout and styling issues, testing different CSS properties, and editing content on the fly.

Console Panel

An interactive shell to run JavaScript code directly within the browser.

Useful for debugging JavaScript errors, executing scripts for testing purposes, and logging outputs.

Network Panel

Tracks all network requests made by the browser.

Useful for monitoring the performance and size of assets, identifying slow or failed requests, and debugging AJAX requests.

Performance Panel

Provides insights into the runtime performance of a website.

Useful for profiling execution time of JavaScript code, analysing render and layout events, and capturing screenshots for performance issues.

Application Panel

Tools to inspect and manage resources such as local storage, cookies, and service workers.

Useful for managing client-side data, testing Progressive Web Apps (PWAs), and inspecting cache storage.

Cross-Browser Compatibility

Media Queries

Some browsers interpret media queries differently, especially for high-resolution displays or certain breakpoints. This can cause unexpected layout changes on different devices.

Default Styles and Behaviours

Different browsers apply default styles to HTML elements using their built-in user agent stylesheets. This can result in inconsistencies in checkboxes, radio buttons and default paddings.

Mitigation: Normalisation libraries that standardise default styles across all browsers.

Performance Optimisation

Performance optimisation improves a website's speed, responsiveness, and overall UX by reducing resource size and ensuring efficient web page rendering. Developer tools like Google Lighthouse provide performance audits to help developers optimise their web applications.

Page Load Time measures a web page's time to fully load and render, impacting the UX and search engine rankings.

Security Features in Modern Browsers

Same-Origin Policy: Restricts how scripts on different pages interact, preventing malicious websites from accessing sensitive data on other sites.

HTTPS: Browsers enforce secure connections for websites, displaying warnings for non-secure HTTP pages.

Investigate cascading style sheets (CSS) and its impact on the design of a web application, including consistency of appearance, flexibility with browsers or display devices, and CSS maintenance tools.

Consistency of Appearance

CSS allows developers to define consistent and reusable styles in one place when HTML content is separated from CSS design, rather than updating styles individually on each page. This reduces discrepancies between different pages and enhances UX.

CSS variables enable developers to define and reuse values such as colours and spacing, ensuring a consistent design language throughout the application.

Flexibility

CSS is designed to be adaptable across various devices and browsers, enhancing the flexibility of web applications:

Responsive Design:

CSS media queries allow developers to create responsive designs that adjust layout and styling based on the device's screen size and orientation. This ensures that a web application looks and functions well on desktops, tablets, and mobile devices.

Viewport Units & Flexbox/Grid Layouts:

Advanced layout techniques using CSS Grid and Flexbox allow for creating complex layouts that adapt to different screen sizes and devices without needing JavaScript-based adjustments.

Maintenance Tools

CSS-in-JS Libraries (Styled Components, Emotion)

These libraries allow developers to write CSS directly within JavaScript files, often in a componentised way. This method promotes scoped styles, reduces global namespace conflicts, and makes managing styles for individual components easier in frameworks like React.

Atomic CSS and Utility-First Frameworks

Approaches like Atomic CSS (or Utility-First CSS) and frameworks like Tailwind CSS focus on small, reusable utility classes. This reduces the need for custom styles and simplifies maintenance.

CSS Architecture Methodologies (BEM, SMACSS, OOCSS)

These methodologies provide guidelines for organising CSS, making it easier to maintain and scale. They promote clear naming conventions and modular structures, reducing complexity in large projects.

Investigate the reasons for version control and apply it when developing web applications.

Created by Linus Torvalds in 2005, Git is a distributed version control system.

Change Tracking: Every modification is tracked with a timestamp and the identity of the person who made it. This allows developers to see the project's history and understand why changes were made.

Backup and Recovery: Version control provides a complete history of changes, enabling developers to restore previous versions if something goes wrong.

Branching and Merging: Developers can create separate branches to work on new features or bug fixes independently, then merge them into the main project when ready.

CI/CD: Version control systems enable seamless integration with CI/CD tools like GitHub Actions, which automate web application testing and development.

Explore the types and significance of code libraries for front-end web development, including frameworks that control complex web applications, template engines, and predesigned CSS classes.

Web Frameworks

Frameworks are comprehensive collections of tools and best practices designed to simplify the development of complex web applications. They offer structured approaches to building applications, managing state, and handling user interactions.

Types

• JS Frameworks: Frameworks like React provide a foundation for building dynamic and interactive web applications.
• Component-Based Frameworks: These frameworks (e.g., React) allow developers to build applications using reusable, self-contained components, promoting modularity and maintainability.

Significance

• Simplifies Development: Frameworks abstract away many low-level coding tasks, allowing developers to focus on the application’s functionality and UX.
• Encourages Best Practices: They provide a structured approach to coding, encouraging best practices and reducing common errors.
• Facilitates Scalability: Frameworks support the development of scalable applications by offering built-in solutions for handling large codebases, complex data flows, and multiple user interactions.

Template Engines

Template engines allow developers to create dynamic HTML pages by combining static templates with dynamic data. They are often used with server-side or client-side frameworks to render pages with user-specific content.

Types

• Server-Side Template Engines: Engines (like Embedded JS) generate HTML on the server, typically for traditional web applications.
• Client-Side Template Engines: Libraries like Handlebars allow developers to generate and update HTML dynamically without server interaction.

Significance

• Template engines make code easier to read and maintain by separating the markup from logic.
• Templates can be reused, reducing redundancy and making it easier to update the UI consistently.

Predesigned CSS Classes

Predesigned CSS libraries offer sets of pre-styled components and utility classes.

Types

• UI Frameworks: Libraries like Bootstrap provide a set of pre-styled components that make creating a consistent UI easier.
• Utility-First CSS Frameworks: Frameworks like Tailwind CSS focus on providing utility classes for common styling needs, allowing for more customised designs without writing extensive CSS.

Significance

• Using predesigned CSS classes allows developers to style elements, saving time and effort.
• Predesigned classes follow a consistent design language, helping to maintain visual consistency throughout the application.

Explain the use and development of open-source software in relation to web development.

Open-source software provides developers with accessible, modifiable, and distributable code that accelerates innovation and collaboration. It is governed by open-source licenses, such as the MIT License, which define how the software can be used and shared.

Use of Open-source Software

Reduced cost: Allows a wide range of users, from individuals to enterprises, to leverage powerful tools without licensing costs.

Modifiable Code: Developers can modify the source code of open-source projects to suit their specific requirements. E.g.: customising UI, system integration

Transparency: Because the code is publicly available, developers can review the code for vulnerabilities, ensuring a higher level of trust.

Time-efficient: Open-source libraries that provide pre-built functionalities save developers time by allowing them to rapidly prototype and focus on building unique features instead.

Development and Contribution

Contributing to open-source projects helps improve software quality and allows developers to gain valuable experience and connect with a global community.

Reporting and Fixing Bugs

Adding New Features

Writing documentation

Impact of Open-Source on Web Development

• Became standardised in the industry. E.g.: Prettier for code formatting
• Empowers a more inclusive web development community with developers from various demographics.

Investigate methods to support and manage the load times of web pages/applications.

Web page and application load times are crucial for user experience and SEO. Faster load times enhance user engagement, decrease bounce rates, and improve overall satisfaction.

Front-End Optimisation

• Minification -strips out unnecessary characters from CSS, JavaScript, and HTML files, decreasing download times
• Image Format – pick more efficient formats like WebP to decrease download times
• Lazy Loading – load only the necessary data for the viewport to reduce the initial load time
• Download the most appropriate image size to reduce unnecessary data transfer.

Defer and Async Loading of JavaScript

By using defer or async attributes in tags, scripts do not block the page, reducing perceived load times.

Critical CSS

Critical CSS refers to the minimum CSS required to render the visible part of the page. Inlining this CSS in the  can speed up the initial paint and reduce perceived load time. Tools like Penthouse can extract critical CSS to inline the necessary styles automatically.

Reducing CSS and JavaScript File Sizes

Modular CSS and JavaScript: Load minimal CSS and JavaScript. Use tree-shaking for JavaScript and modular CSS approaches to remove unused exports.

Caching Strategies

Browser caching stores copies of resources locally in the user’s browser to reduce the need for repeated downloads upon revisits and speed up page loads for returning visitors.

Backend Optimisation

Database Optimisation

• Specify only the required columns to reduce the data retrieved and processed. Instead of making multiple single-row queries, batch queries fetch or update multiple rows simultaneously. This reduces the overhead of multiple database connections.

Server-Side Caching

Server-side caching reduces the time required to generate and deliver content to the user. By storing pre-computed or pre-rendered content, servers can handle more traffic with less strain. This is effective for pages that change infrequently, such as blog posts.

API Optimisation

API responses should be minimised, compressed, and sent in compact formats (protobuf) to reduce payload size, reduce server load, and improve response times.

Research, experiment with and evaluate the prevalence and use of web content management systems (CMS).

A Web Content Management System (CMS) is a software application that helps users manage digital content. It provides an interface for creating, editing, and publishing content, typically through a web-based platform. CMS platforms are designed to simplify web development by allowing users to manage content without extensive coding knowledge.

Key Features

• Content creation and editing
• Content organisation – tags, menus, categories
• Publishing and Scheduling – Strategic content release
• Collaborative workspace – Support users with varying permission
• Themes and Templates – prebuilt and customisable to suit branding
• Plugins and Extensions – provide additional functionality, such as e-commerce

Prevalence of CMS Platforms

Businesses, personal blogs, large enterprises, and e-commerce giants widely adopt CMS platforms. (UNVERIFIED: the school notes quote CMS percentages (over 60% of websites, WordPress over 40%). I could not verify these; do not quote exact figures in the exam. Say CMS platforms such as WordPress are very widely used.)

Assess the contribution of back-end web development to the success of a web application.

Back-end web development refers to the server-side components of a web application. It involves managing the database, server, and application logic. Back-end development is fundamental to a web application’s performance, scalability, security, reliability, and third-party integration, ensuring seamless functionality and an optimal user experience.

It processes requests from the front end—such as fetching data—by interacting with databases. Performance is optimised through efficient query execution and asynchronous processing. Scalability is handled through vertical scaling (increasing server resources like CPU) or horizontal scaling (distributing traffic across multiple servers via load balancers). Security is maintained through user authentication, role-based authorisation, data encryption (e.g., SSL). Reliability and availability are ensured through failover systems. Additionally, the back end facilitates seamless API integrations with third-party services, such as payment gateways (e.g. PayPal).

Observe and describe the back-end process used to manage a web request, including the role of web server software, web framework, objects, libraries, and databases.

Role of Webserver Software

The web server is the software responsible for accepting HTTP (or HTTPS) requests from clients (typically browsers) and delivering responses back to the client, which may include HTML pages, JSON data, images, or files.

Request Handling: The web server receives the client's request and determines whether it is for a static file or for generating dynamic content.

Static files, such as an HTML page, image, are delivered by the web server to the client since static files don’t require additional server-side processing.

For requests that require dynamic content generation, such as retrieving user data, the web server forwards the request to an application server. In this case, the web server acts as a “reverse proxy,” forwarding the request to the web framework.

Web Framework

A web framework provides the structure and reusable components that simplify the development of a web application. It handles the complex tasks of handling HTTP requests, URL routing, database access, and rendering views.

Objects

In a back-end system, objects typically represent key entities or concepts in the application's domain. They are instances of classes that structure and store data, often correlating with database tables (in relational databases) or collections (in NoSQL databases). Objects allow developers to interact with data as if they were working with in-memory objects in code, even though the data is stored in a database.

Object-Relational Mapping (ORM)

Many web frameworks use an ORM to map these objects to database tables. This makes it easier to work with databases using an OOP paradigm rather than writing raw SQL queries.

Libraries

Libraries are reusable sets of functions and tools that enhance functionality and accelerate development by abstracting common tasks. These are often external packages installed via a package manager (e.g., pip for Python or npm for Node.js).

Databases

Web Framework interacts with Database Queries

Connection Management: Web frameworks manage database connections through connection pools, allowing concurrent access to the database.

Query Optimisation: The framework often provides built-in query optimisation, caching, and indexing options to improve performance.

Develop a web application using an appropriate scripting language with shell scripts to make files and directories, and search for text in a text file.

mkdir: Creates a new directory.

COMMAND: mkdir directory

rmdir: Removes an empty directory.

COMMAND: rmdir directory

cd: Changes the current directory.

COMMAND: cd directory

touch: Creates an empty file.

COMMAND: touch myfile.txt

rm: Removes a file.

COMMAND: rm myfile.txt

cp: Copies a file or directory.

COMMAND: cp source.txt destination.txt

grep: Searches for specific patterns or text in files.

COMMAND: grep "search_term" file.txt

cat: Outputs the content of a file.

COMMAND: cat file.txt

Hash bang (#!/)

The hash bang at the beginning of a script is a special sequence of characters followed by the path to the interpreter that should be used to execute the script. It ensures the correct interpreter is used regardless of the execution environment

Shell Scripts in Web Development

Automating Server Management / Efficient File and Directory Management

Shell scripts can automate server-side tasks like file management, backups, server restarts, and configurations, increasing the efficiency and reliability of web applications.

Handling Log Files and Data

Shell scripts can be used to search, filter, and process extensive logs created by web servers to ensure the smooth operation of the site.

Apply a web-based database and construct script that executes SQL, including selecting fields, incorporating ‘group by’, common SQL queries, constraints using WHERE keyword, and table joins.

SQL

Structured Query Language is a domain-specific language designed for managing and manipulating relational databases. SQL allows users to query, update, delete and insert records. It also allows users to manage database structure and access control.

SQL is a declarative language where explicit instructions on how to manipulate data are not needed. Various DBMS, such as PostgreSQL and MySQL, have slight variations of SQL. SQL is generally standardised, making it a transferable and universal language in the database domain.

Insert

INSERT INTO table_name (column1, column2, column3)

VALUES (value1, value2, value3);

Update

UPDATE table_name

SET column1 = value1, column2 = value2

WHERE condition;

Delete

DELETE FROM table_name

WHERE condition;

Create

CREATE TABLE Employees (

employee_id INT PRIMARY KEY,

first_name VARCHAR(50) NOT NULL,

last_name VARCHAR(50) NOT NULL,

department_id INT,

hire_date DATE,

salary DECIMAL(10,2)

);

Alter

ALTER TABLE Employees

ADD email VARCHAR(100);

ALTER TABLE Employees

MODIFY COLUMN salary DECIMAL(12,2);

ALTER TABLE Employees

DROP COLUMN email;

ALTER TABLE Employees

ADD CONSTRAINT fk_department

FOREIGN KEY (department_id)

REFERENCES Departments(department_id);

Inner Join

SELECT employees.first_name, departments.department_name

FROM employees

INNER JOIN departments

ON employees.department_id = departments.department_id;

Compare Object-Relational Mapping (ORM) to SQL.

ORM

ORM is a programming technique that allows users to interact with a database with an OOP model, where rows are instances of a model class. ORM frameworks generate SQL code based on application code, creating an abstraction layer between the database and the application code.

E.g.: SQLAlchemy (Python), Django ORM (Python)

SQL vs ORM

Describe how collaborative work practices between front-end and back-end developers improve the development of a web solution.

Clear communication

Clear communication ensures that both teams understand the requirements and constraints of each other’s work. This can improve development speed and reduce the risks of integration issues. Software like Jira and Microsoft Teams can be used to track tasks and issues.

E.g.:

Front-end developers need to know how data is structured from the backend API. (JSON or XML)

Back-end developers need to create the API endpoints according to the front-end’s data needs.

Rapid Prototyping

Working together during prototyping allows both teams to test functionality quickly and make adjustments before full-scale development. A feedback loop can be created where both teams test small features incrementally to ensure issues are resolved efficiently.

E.g.:

Back-end developers can create early API mocks, which front-end developers can use to build and test UI components before the full back-end functionality is complete.

Shared Responsibility

Both teams must consider how their work impacts overall performance, ensuring a holistic reduction in application latency. Joint performance reviews can be conducted to identify both front-end and back-end performance issues.

E.g.:

Front-end developers should minimise unnecessary API calls, while back-end developers must ensure that database queries are optimised. Together, server load time is reduced.

Problem Solving

Collaboration allows teams to troubleshoot issues that might involve both the front-end and back-end, leading to faster resolution and a more comprehensive solution.

E.g.:

A performance issue such as slow page loads could be due to inefficient API calls (back-end) or excessive rendering (front-end). By working together, both teams can pinpoint the issue more effectively.

Design, develop and implement a progressive web app (PWA), including the application of design and user interface (UI) and user experience (UX), principles of font, colour, audio, video and navigation, and a UI that considers accessibility and inclusivity.

Key Features of PWA

Caching

Caching allows web apps to store frequently accessed assets (such as HTML, CSS, JavaScript, and images) in the browser. This means these assets can be loaded from the local cache on subsequent visits without fetching from the web server, giving it offline capabilities.

Service Workers

A service worker that helps manage web apps and configure offline capabilities. When a browser requests a webpage or image from the server, the service worker can decide whether to fetch it from the Internet or use a cache. Service workers operate independently from the web app, which allows them to continue functioning even if the page is closed. Service workers are built around an event-based model. Hence, they respond to specific user and system events, such as API fetching, installation, and activation.

Web manifest

Traditional web apps typically rely on fetching to load a page's appearance. A web manifest.json is a JSON file that provides metadata about the web app and the UI design when the app is launched.

A web manifest automates this process by defining the structure of the PWA on the client's device or browser.

App Appearance: Defines how the app appears when launched, including its icons, screens, and theme colours.

Behaviour: Specifies the display mode (e.g., fullscreen, standalone) and orientation, determining how the app interacts with the device's UI.

Navigation: Sets the start URL, determining which page loads when the app is launched from the home screen. Usually, this is handled by server-side routing (via Flask) or client frameworks (via React or Angular)

Responsive Design

PWA aims to deliver a responsive UI design that works across various devices.

UI/UX Principles

Font

Consistency: Maintain font consistency across the app by limiting the number of typefaces and styles. Use font hierarchies to guide users.

Colour

Contrast: Ensure sufficient contrast between text and background colours to make content readable, especially for users with visual impairments. Tools like WCAG colour contrast checkers can be used to verify accessibility.

Audio and Video

Use multimedia elements to enhance UX without overwhelming the interface. Multimedia should be optimised to reduce loading times through lazy loading

E.g.: Videos can be used for tutorials, but they should not auto-play with sound, which can disrupt UX

Navigation

Users should reach any part of the app within three taps or clicks.

Accessibility and Inclusivity

• Use semantic HTML (e.g.,
  ,
• Provide alt text for images for visually impaired user to use screen readers
• ARIA (Accessible Rich Internet Applications): Use ARIA attributes to enhance accessibility for dynamic content. E.g.: aria-live can alert users of important updates.
• Contrast Ratios: The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for visually impaired users.

Inclusivity

Language Support

Provide language options for international users. Ensure the app can switch seamlessly between different languages and that text expansion (e.g.: German or Arabic) is accounted for.

Cultural Sensitivity

Avoid using icons, symbols, or colours that could be misinterpreted across different cultures. (e.g.: the colour red may mean danger but also good luck)

Diverse User Needs

Design for different physical and cognitive abilities. (e.g.: simplifying complex tasks, providing visual and text cues)

Flexible Interfaces

Allow users to customise the app to suit their needs, such as changing font sizes, colour schemes (dark mode), and enabling or disabling animations.

Part 3. Where this has been examined (see ../../question_bank.md)