Web design

Learning Intentions

Be able to develop a website using an appropriate information architecture

Success Criteria

I can explain the term information architecture
I can build a website with an appropriate information architecture

INDUSTRIAL WEBSITE DESIGN

In the industry, web development is considerably different to how we develop it within school.
For a start, websites are structured in folder layouts called an information architecture.

Information architecture

The first step to developing a website properly is to develop this information architecture.
In the industry, this is often done using techniques such as card sorting where the developers get together and figure out what pages go where.
Creating these folders also can help generate the URL of the webpages on the website. For example, in the previous example structure, the URL to add a user to the site is website.net/members/add_user/

Organization chart icons created by Freepik - Flaticon

Index.html

Every folder in the information architecture will include an index file, normally the index.html webpage.
For example, https://www.apple.com/index.html and https://www.apple.com/ are the exact same webpage.

Frameworks and libraries

On the web there are tons of free frameworks and libraries
Examples of frameworks include HTML5 Boilerplate, Bootstrap and Foundation

We are going to begin building a website from the ground up. The first step is to decide what you are going to build your website on. When you have done that, write down what pages you will need on your website. Create the information architecture of your website.

We're going to do this with HTML code, CSS and JavaScript.

What we are going to work on is more advanced than what you would be expected do in National 5 Computing Science, but we've got more time to do this!

Task

Presentation Overview

Web Design

10:49 | 29-04-2024

Join Live Session

Start Remote

Save Progress

Slideshow Outline

Presenter Mode

Widget Screen

Canvas Controls

Random Selector

Timer

Volume Meter

Binary Converter

Python Editor

Show Knox 90

Provide Feedback

Help

Keywords

DragonDocs Management

Random selector

Remove after pick

Sections

Binary conversion

Denary to binary conversion

Binary to denary conversion

Use two's complement

Slideshow Outline

Help

The following are key shortcuts for using DragonSlides and reveal.js.

Key combination	Action
→, PAGE DOWN, SPACE	Next slide
←, PAGE UP	Previous slide
SHIFT + →	Last Slide
SHIFT + ←	First slide
B	Whiteboard
W	Widget Board/White Screen
C	Toggle Notes Canvas
DEL	Clears Whiteboard/Notes Canvas
S	Show Presenter Mode
SHIFT + D	Toggle Dark Mode
H	Goes to the Home Slide
META + P	Show Print options window

In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.

Feedback 👍

Accessibility

Apply a filter:

Dark Mode

Bold Text

All slideshow files