Slides badge

Authoring a website

NPA Software Development - Level 6

Basics

Advanced

Production

Web Design

What this unit involves

  • This unit is all about authoring a website. 
  • You'll look back at HTML, CSS and JavaScript. 
  • You'll investigate using libraries to assist in development and you'll look at using templating frameworks to help.
  • There are four outcomes you need to complete.

Unit outcomes

Outcome 1 - Factors Affecting Web Development

  • Range of devices, browsers and operating systems that people might access your website from

  • The role of the W3C, and how it sets standards for web development

  • The different types of development tools available (code editors, visual tools, etc.)

Outcome 2 - Plan and design a website

  • Produce a requirements list

  • Produce an outline design (page template/wireframe)

  • Create a navigation structure

  • Produce a resources list

Unit outcomes

Outcome 3 - Produce the Website

  • Produce a template page to give consistent formatting for other pages

  • Produce the rest of the site using the template

Outcome 4 - Upload and Test the Website

  • Upload a website to an FTP server

  • Produce a test plan (how you are going to test the website)

  • Implement your test plan

  • Log the results, and fix any errors you found

What is the Internet and what is the web?

Have a quick chat about what you think the Internet is and what you think the Web is

Analysis

Learning Intentions

  • Understand end-user and functional requirements of a website

Success Criteria

  • I can explain the user and functional requirements of a website

Website requirements

  • The analysis phase of Web design and development requires the
    web site designer to identify the end-user (also known as non-functional) and the functional requirements of the final website.

End-user requirements

  • The end-user is a person who ultimately will be using the website.

  • The developer should have a clear idea of who the end-user(s) are of a website.

  • Often the type of users can be grouped into categories such as:

    • Young children

    • Elderly 

    • Customers/clients

    • Employees

    • Inexperienced users or expert users

    • Users who require additional support to aid accessibility:

      • Screen readers

      • Voice recognition

End-user requirements

  • It's often easy to group users and sometimes it's fairly possible that users fall under many categories.

  • By categorising the end-users, it becomes clearer what needs to be in place for the users to successfully use an end product.

  • Often the developer will need to spend time with the client to figure out what end-user requirements must be accomplished in the finished product

End-user requirements

  • The tasks that the end-users should be able to carry out on the finished website are known as end-user requirements.

  • Sometimes end-user requirements actually inform the functional requirements of a website too.

Functional requirements

  • Functional requirements are requirements that describe what processes the system must be able to carry out.

  • Functional requirements also state what data/information or database the system must have access to

Activity

  • Pick any website and identify the user and functional requirements of it

Design

Learning Intentions

  • Describe an exemplify a website structure

  • Describe, exemplify and implement a website design

  • Compare file formats in terms of file size and quality

  • Describe copyright laws affecting the content of a website

Success Criteria

  • I can design a website, based on a set of requirements
  • I can compare several file formats based on file size and quality
  • I can discuss the legal implications of building a website

Website dESIGN

  • The first step of website development is to plan the structure of the website. This is how the pages will link together, to allow for navigation between pages of the website and any links to external pages.

tOP-LEVEL

  • All of the designs will start with the homepage at the top level,
    and then there will be the pages of level one (there will be no
    more than 4 internal pages linked). The homepage and the pages
    on level one will be the links that appear in the navigational bar.

  • The SQA will highlight the pages that are to appear in the navigational bar using an area of shaded background, the home page SHOULD ALWAYS be in the navigational bar.

Second-level hierarchical diagrams

  • When showing how the pages on level two will link we add to the
    diagram similar to the following.

  • In the structure designs the pages linked with horizontal lines (level one and the homepage in the examples) will be two way links. The pages linked by vertical lines will be one way links from the source of the line.

Website structure

  • However, it is not always the case that a website has a linear or hierarchical structure. On occasion, website structure is a bi-directional link between the homepage and other subpages.

Wireframes

  • Wireframes are a way of representing the visual design of a webpage and are very common in the industry.

  • A wireframe should:

    • navigational bars/links

    • text elements on the page (but not necessarily including all the text that will be in the element)

    • interactive elements such as buttons

    • images, videos and audio

    • form inputs

    • hyperlinks (and where they go)

Wireframes

  • Occasionally, wireframes will include annotations to give a rough idea of how an element will be styled.

  • For example, a wireframe may include annotations such as colours, fonts and the size of media elements such as video or images.

User interface

  • The user interface is the way in which the computer and user communicate.
  • If a UI is poor, then no matter how good the software is, no one will want to use it.
  • The person who designs a user interface is called a user experience (UX) designer.

Target audience

  • The target audience is the group of people who will use the website.
  • Any website that is built, needs to take in to consideration the target audience - what they need and want from the website.
  • The target audience can be experienced users or inexperienced users, they may be employees or they may be clients.

Age range

  • The age range of the users can also be helpful in deciding how the website should be built.
  • For example, younger generations may find using a tablet interface easier than an older generation who may struggle. Further, younger generations might find desktop computers harder to use than a smartphone or tablet computer.
  • All of this can help generate a target audience of a website.

User interface requirements

  • The user interface requirements are the features of the user interface that should be taken in to consideration by the web designer.
  • User interface design should consider the following:
    • Visual layout
    • Readability
    • Navigation links
    • Consistency

low-fidelity prototypes

  • After a wireframe is built, the web development team often move towards the construction of a low-fidelity prototype. 

  • This is often developed by a graphics designer.

  • Low-fidelity prototypes are often more detailed than wireframes and may contain more text than a wireframe and images might actually be hand drawn into the prototype.

  • Construction of a low-fidelity prototype is cheaper than building the finished product as it is faster to build. This way the client can suggest changes early on in the development cycle.

Create a wireframe for each of the following websites:

  • apple.com
  • amazon.co.uk
  • ebay.co.uk
  • gov.uk

Task

Standard file formats

  • Over the years computers have been developed, so too have many standard file formats.

  • Standard file formats are used to ensure that no matter what platform you are using the system will be able to understand the file.

Standard file formats

  • Some applications such as Adobe Photoshop do not save their files in a standard file format by default to allow them to store more than just the standard file (in Photoshop's case, the image).

  • For example, Photoshop stores things like information on layers, whereas exporting to a JPEG or PNG (which are both standard file formats) will remove the information on layers.

More about file sizes

  • If you want to know more about what affects file sizes such as compression, quality, bit-depth, sample rate etc, look at my National 5 slides on Web Design and Development: Design.

Copyright, Designs and Patents Act (1998)

  • The Copyrights, Designs and Patents act covers all sorts of media, ranging from text to graphics to video and audio.

  • It's often the case that a website designed or developer includes a copyright statement about materials used.

  • Sometimes the website developer may not own materials on the website. If this is the case:
    • credit for use of material must be given
    • the permission to use the materials needs to be obtained

Responsive web design

Responsive web design

Responsive web design

  • Responsive design is all about building a website that works on all devices.

  • Often with responsive design simply means rearranging columns of information on a desktop site into a single vertical column. 

  • Sometimes responsive design means hiding certain elements that don't work well on a smartphone or tablet.

High-fidelity prototypes

  • As you can imagine, a high-fidelity prototype is an even more complete prototype of a webpage or website.

  • A high-fidelity prototype will have been developed using HTML and CSS as well as JavaScript, and will offer an example of a finished product. 

  • Some companies go straight to the high-fidelity prototype as it can actually be quicker to transform the prototype into the finished version.

  1. State one place where you might find a linear structure
  2. Draw a multi-level structure for the eBay website
  3. What is a wireframe?
  4. Which elements should be included in a wireframe?
  5. Explain:
    1. Readability
    2. Visual Layout
    3. Consistency
  6. Create a low-fidelity prototype for the amazon.co.uk website

Task

HTML

Learning Intentions

  • To write HTML – the code needed to make websites

  • Understand why we use HTML

Success Criteria

  • To develop a simple webpage using just HTML

HTML tags

Pages are made up of tags:

Image copyright jamiebalfour.scot

HTML structure

  • A web page has a very simple structure

<!doctype html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <p>
      Hello class
    </p>
  </body>
</html>

The <HTML> tag/Element

  • The html element is the first element you need to add to the page.
  • This element tells the browser that everything inside it should be treated as part of the webpage.
  • Anything outside of here is not part of the page (for example, you can use HTML comments outside of the <html></html> tags).

The <head> tag/Element

  • The head element contains information about the page, including the title, any linked CSS (more later) or JavaScript (more later).

  • Anything that appears in the head tag is not guaranteed to display on all browsers (some browsers do display certain tags from it but others display zilch)

  • The information stored in the head element is often referred to as meta data.

  • Such information that might be found in the head tag is things like the page title, any keywords used on the page, links to any CSS pages or JavaScript scripts, locations of assets such as favicons etc or the author of the page.

The <body> tag/Element

  • The body element contains the content of the page. It must come after the closing head tag.

  • The body tag is where all content should go.

  • In the body tag you will find all sorts of content such as paragraphs of text, images links etc.

Answer each of the following questions:

 

  1. Where should JavaScript go? [head or body]
  2. What kind of information might you find in the head tag?
  3. What might happen if you have tags inside the head tag?
  4. What might happen if you have two body tags?
  5. What issues might you face if you don't close a tag?

Revision questions

Some tags - the anchor

<a href="page2.html">To another page</a>
  • The anchor tag is used to make a link to another page.

Some tags - the ul

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
  • The ul tag is used to make a bulleted (unordered) list

Some tags - the ol

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>
  • The ol tag is used to make a numbered (ordered) list

Some tags - the img

<img src="cat.png" alt="Cat">
  • The img tag is used to include an image on a webpage. 
  • If the image is in the same folder as the HTML webpage, it can be referenced by it's name as shown below

Some tags - the p tag

<p>Paragraph 1</p>
<p>Paragraph 2</p>
  • The p tag is used to include a paragraph of text on a webpage.
  • Like with actual paragraphs in a document, paragraphs are spaced out automatically.

Some tags - the audio tag

<audio width="500" controls>
  <source src="music1.mp3" type="audio/mpeg">
  <source src="music1.wav" type="audio/wav">
</audio>
  • The audio tag is used to sound in a webpage

Some tags - the video tag

<video width="500" controls>
  <source src="hare.mp4" type="video/mp4">
  <source src="hare.webm" type="video/webm">
</video>
  • The video tag is used to video in a webpage

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
  • Headings in HTML work where the smaller the number the bigger the text, so H1 is the biggest:

Semantics

  • Semantics literally means to do with meaning.
  • When you program something, syntax is the words you use to write your program, semantics is what the order of those words means to the computer.

Semantic HTML

  • HTML is a descriptive (declarative language) that tells a web browser how to display content on a page.
  • HTML5 introduced 'semantic elements'.
  • Semantic elements are designed to assist with this, but were designed primarily with screen-readers in mind.
  • Semantic elements don't actually change the layout or style of the page, but can, of course, be styled with CSS.

Semantic HTML

  • You need to know about and use the following semantic elements:
    • <nav>
    • <header>
    • <footer>
    • <section>
    • <main>
  • What you might get asked in an exam varies from adding in the semantic element where appropriate or identifying it in a diagram.

<nav>

  • The <nav> tag is used to contain information about website or page navigation. 
  • Often the <nav> element surrounds the main menubar or webpage navigation (like Wikipedia has)

<header>

  • The <header> tag often contains what is called the masthead of the webpage.
  • The <header> may contain a logo or text that takes the user back to the main page via a hyperlink, as well as a title and potentially a site-wide search box.
  • On ecommerce websites such as Amazon, you'll often find the basket here too.

<footer>

  • The <footer> tag is used to contain site links and legal information (such as copyright information). 

<section> and <main>

  • The <main> tag is usually the main content of the page. 
  • It contains all of the main content of the webpage, including graphics and text.
  • The <main> tag is often composed of <section> tags. 
  • These <section> tags help break up the material or content of the page.
  • Within courseworks, the SQA often styles <section> tags and expects you to style them further.

Activity

You are now going to create your own personal website. You have control over what you include in this, however, here are some example of pages:

  • Home page
  • About me
  • My Projects
  • Contact Me

 

Ensure that you use semantic elements across your pages.

 

You'll be looking at navigation bars in a later lesson but for now create links between each of the pages so that you can test them.

HTML forms

  • Many websites across the web have ways in which we can submit data to the website.
  • Often this data is data like login data (username and password) but it could be anything.
  • When HTML was developed over the years, this was one of the most important features.
  • The feature of a webpage to allow a user to submit data is a form.

HTML forms

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>
  • The term form comes from the fact that they are like paper forms - made up of multiple fields that the user is expected to fill in.

HTML forms

  • You need to know about the following form elements:
    • Text
    • Number
    • Text Area
    • Radio
    • Submit

The <input> element

  • The <input> element is used to take a single piece of data from the user. 
  • It's intended to contain just a short amount of data.
  • It's also not limited to one type and there are several styles of <input>.

The <input> element

  • The <input> element by default accepts text:
<input type="text" name="username" size="40">
  • The size="40" sets the width of the input box in characters.

The <input> element

  • The <input> element can also be set to accept numeric values only. 
  • With numeric inputs you can specify the range to validate the input between two values (range check).
<input type="number" name="count" min="0" max="10">

The <input> element

  • The <input> element can be styled as a radio button
  • Note that to create a radio button 'group' all buttons need to have the same name attribute:
<p>Would you like salad with your order?</p>
<label><input type="radio" name="salad" value="1">Yes</label>
<label><input type="radio" name="salad" value="0">No</label>

The <textarea> element

  • The <textarea> element is designed for collecting larger amounts of data.
  • Unlike the <input> tag, it is not self-closing.
<textarea name="order">Please insert your order here</textarea>

Submitting a form

  • When a user has completed the form, they next need to send the data from the form to the web server.
  • When the data is received by the server, a server-side programming language, such as PHP, will handle the data. 
<?php
  echo $_POST['username'];
?>
<form action="submit.php" method="post">
  <input type="text" name="username">
  <input type="submit" value="Submit data">
</form>

Submitting a form

  • To submit a form, there needs to be a submit button.
  • To do this, we use the <input> tag and give it a type attribute of submit:
<input type="submit" value="Send data">

Dropdown lists

  • A dropdown list can also be used in HTML. To create one, we use the <select> element alongside the <option> element.
  • These are very similar in structure to how lists are created. Do not forget to include the value attribute on each option.
<form>
  Select city:
  <select name="city">
   <option value="Aberdeen">Aberdeen</option>
    <option value="Dundee">Dundee</option>
    <option value="Edinburgh">Edinburgh</option>
    <option value="Glasgow">Glasgow</option>
    <option value="Inverness">Inverness</option>
    <option value="Perth">Perth</option>
    <option value="Stirling">Stirling</option>
  </select>
</form>

Dropdown lists

<form>
  Select city:
  <select name="city">
   <option value="Aberdeen">Aberdeen</option>
    <option value="Dundee">Dundee</option>
    <option value="Edinburgh">Edinburgh</option>
    <option value="Glasgow">Glasgow</option>
    <option value="Inverness">Inverness</option>
    <option value="Perth">Perth</option>
    <option value="Stirling">Stirling</option>
  </select>
</form>

lists with multiple selection

<form>
  Select city:
  <select multiple name="city">
   <option value="Aberdeen">Aberdeen</option>
    <option value="Dundee">Dundee</option>
    <option value="Edinburgh">Edinburgh</option>
    <option value="Glasgow">Glasgow</option>
    <option value="Inverness">Inverness</option>
    <option value="Perth">Perth</option>
    <option value="Stirling">Stirling</option>
  </select>
</form>

Bringing it all together

<form>
  <p>
    Welcome to the sign up form for Loch Tay Adventure Park!
  </p>
  <label>
    Name
    <input type="text" name="name">
  </label><br>
  <label>
    Number of guests
    <input type="number" name="number_of_guests" min="1" max="10">
  </label><br>
  <label>
    Why Loch Tay? <textarea name="explanation">I love...</textarea>
  </label>
  <input type="submit">
</form>

Open your personal website. 

Add a form to the Contact Me page to your website. 

 

Extension: try adding some PHP that will display what the user has typed into the form when they submit it

Task

CSS

Learning Intentions

  • Learn how to write CSS

  • Learn how to link CSS to a HTML page

Success Criteria

  • To add CSS to a website or webpage
  • To be able to explain the purpose of CSS properties

What is CSS?

  • CSS or Cascading Style Sheets add style to a webpage

  • Without CSS we just have HTML on our webpage – so no colour, no borders and just no fancy stuff

  • HTML on it’s own is just boring text on a white background!

     

What is CSS?

<html>
  <head>
    <title>My webpage</title>
  </head>
  <body>
    <p>Hello everyone!</p>
  </body>
</html>

What is CSS?

<html>
  <head>
    <title>My webpage</title>
    <style>
      p {
        color : green;
      }
    </style>
  </head>
  <body>
    <p>Hello everyone!</p>
  </body>
</html>

CSS properties and values

  • A CSS file is made up of rules.

Image copyright jamiebalfour.scot

Adding CSS to a page (internal CSS)

<html>
  <head>
    <title>My website</title>
    <style>
      h1 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1>I’m green!</h1>
  </body>
</html>

Adding CSS to a page (External CSS)

<html>
  <head>
    <title>My website</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p class="green_class">I’m green!</p>
  </body>
</html>

Adding CSS to a page (Inline CSS)

<html>
  <head>
    <title>My website</title>
  </head>
  <body>
    <p style="color:green">I’m green!</p>
  </body>
</html>

Classes and IDs

  • We've seen that we can easily style an element by using
p {
  color : green;
}
  • CSS also allows styling of groups of elements and individual elements using a class and ID.
  • In CSS, a class begins with a . symbol and an ID with a # symbol.

Classes and IDs

<html>
  <head>
    <title>My website</title>
    <style>
      .green_background {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1 class="green_background">I’m green!</h1>
    <p class="green_background">This is green</p>
    <p>But this is not green</p>
  </body>
</html>

Classes and IDs

<html>
  <head>
    <title>My website</title>
    <style>
      #big_text {
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
    <p id="big_text">This text is bigger</p>
    <p>This is regular text</p>
  </body>
</html>

Font

p {
  font-family : Garamond, Georgia, "Times New Roman";
  font-size : 12pt;
}

Text colour

p {
  color : green;
}

Text alignment

p {
  text-align : center;
  text-align : left;
  text-align : right;
  text-align : justify;
}

Background colour

p {
  background-color : green;
}
body {
  background-color : red;
}

tHE diSPLAY PROPERTY

  • At Higher, the display property has three values, block, inline and none.
  • An element that is positioned using display:block will prevent any other elements from appearing next to it. Examples of block elements include <div>, <h1>, <p>, <form>, <header>, <main>, <footer> and <section>
  • Inline content is within the standard flow of the content. Examples of inline elements include <a> and <img>

Margins and padding

  • The margin sets the space outside of an element and other elements
  • Padding sets the internal space between the edges and its content within an element

Margins and padding

  • The margin sets the space outside of an element and other elements
  • Padding sets the internal space between the edges and its content within an element

Margins and padding

/*15px all round*/
margin : 15px;
/*15px to the top and bottom, 5px to left and right*/
margin : 15px 5px;
margin-left : 5px;
margin-right : 5px;
margin-top : 15px;
margin-bottom : 15px;

/*15px all round*/
padding : 15px;
/*15px to the top and bottom, 5px to left and right*/
padding : 15px 5px;
padding-left : 5px;
padding-right : 5px;
padding-top : 15px;
padding-bottom : 15px;

Height and width

p {
  width : 100px;
  height : 100px;
}
  • Height and width of elements can be set using:

Floating elements

img {
  float : right;
}
  • Before any styling is applied, a browser will display all elements vertically down a page.
  • Much like text-wrapping in Microsoft Word, text be positioning next to other elements (such as images) when the float property is specified.
  • When the float property is specified, other elements wrap around the element.

Floating elements

The clear property

footer {
  clear : both;
}
  • The clear property and value pair can be used to stop floating elements from stacking on top of the element
  • In general, it means no element can be at the side of the element with the clear property. 
  • There are four values for the clear property; left, right, both, none.

The Clear property

Grouping selectors

  • Sometimes we want to apply the same styles to multiple elements.
  • With CSS we normally create a separate rule for each element we want to style:
h1 {
  color: #f00;
  font-weight: bold;
}
.warning{
  color:#f00;
  font-weight:bold;
  font-size:14px;
}

Grouping selectors

  • But this is inefficient!
  • Imagine having to download this CSS file - just look at the repetition!
h1 {
  color: #f00;
  font-weight: bold;
}
.warning{
  color:#f00;
  font-weight:bold;
  font-size:14px;
}
.bad{
  color:#f00;
  font-weight:bold;
}

Grouping selectors

  • So we can write it more efficiently using a CSS grouping selector.
  • In the example below, using a comma, we are specifying that we want to style both the <h1> and any elements with the warning class:
h1, .warning, .bad {
  color: #f00;
  font-weight: bold;
}
.warning{
  font-size:14px;
}

Descendant selector

#main_content p{
  color:#222;
}
  • We also need to know about descendant selectors.
  • A descendant selector is simply a selector that tells the browser to style elements within another element.

 

 

 

 

 

  • This is simply styling all paragraphs within the element with the ID #main_content.

:hover

a:hover{
  color: #0f0;
}
div:hover{
  background-color: #ddd;
}
  • CSS also includes several pseudoselectors, a term which basically refers to selectors that are applied to another selector
  • In Higher, you only need to know about the :hover pseudoselector:

Using these new skills to build a horizontal menu

<!doctype html>
<html>
  <head>
    <title>Navigation bar</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
      </ul>
    </nav>
  </body>
</html>
  • For Higher you are expected to build a horizontal navigation bar:
nav ul {
  list-style-type:none;
}
nav ul li {
  float:left;
  width:50px;
  text-align:center;
}
nav ul li a {
  display:block;
  color:#fff;
  background:#000;
}
nav ul li a:hover {
  color:#000;
  background:#fff;
}

Using these new skills to build a horizontal menu

<!doctype html>
<html>
  <head>
    <title>Navigation bar</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page2.html">Page 2</a></li>
      </ul>
    </nav>
  </body>
</html>
  • For Higher you are expected to build a horizontal navigation bar:
nav ul {
  list-style-type:none;
}
nav ul li {
  float:left;
  width:50px;
  text-align:center;
}
nav ul li a {
  display:block;
  color:#fff;
  background:#000;
}
nav ul li a:hover {
  color:#000;
  background:#fff;
}

Activity

Now you are going to style up your websites.

  • Add a navigation bar to your website. Use the code from the slide before to help you to do this.
  • Use some of the CSS from the previous slides on your websites
  • Look up additional CSS properties such as text-shadow, box-shadow and border-radius.

JavaScript

Learning Intentions

  • Learn how JavaScript is used at Higher level

  • Learn to write a simple JavaScript function

Success Criteria

  • I can add JavaScript to a page
  • I can create and use a JavaScript function

Write the HTML for a simple page with a paragraph in it. Put some text into the paragraph.

Write the JavaScript so that when the mouse enters the paragraph the text colour becomes red and when the mouse leaves it again it becomes black.

National 5 task

What is JavaScript?

  • JavaScript or JS adds interaction to a webpage

  • Interactions such as clicking, mouse over, even when the page loads are done with JavaScript. 

  • Unlike CSS and HTML, JavaScript is a programming language.

  • JavaScript is run in the browser and is therefore a client-side scripting language

Click me

What is JavaScript?

  • JavaScript can also be used for form validation to ensure that data entered into forms is validated

  • Since JavaScript is a scripting language, it is downloaded from the web server then interpreted by the browser before being executed by the browser.

We spoke about client-side scripting languages, but there are also server-side scripting languages that are used to process data on the server rather the client. Server-side scripting can be used to access databases securely and ensure that a user is logged in. It can also validate data, and process data.

more about JavaScript

  • JavaScript is a weakly typed language (like Python)

  • JavaScript is also dynamically typed (like Python)

  • It is not compiled to object-code (or machine code) but is interpreted

  • JavaScript can be used as a server-side language with the node.js framework

  • The most popular JavaScript interpreter is called V8. It is open source and was originally started by Google.

What is JavaScript?

  • JavaScript is one of the three component languages that make up the front end of a webpage, with the other two being HTML and CSS.

  • JavaScript can manipulate elements on the page, including removing them and adding new elements.

  • JavaScript is normally contained in an external file and linked to the page.

<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body></body>
</html>

How does JavaScript work?

  • At National 5 you would write something like this:

<div onmouseover='this.style.backgroundColor="red";' onmouseout='this.style.backgroundColor="#ddd";'>
  This div will change colour when hovered.
</div>

How does JavaScript work?

  • This can also be written like this:

<div onmouseover='mouseOver(this);' onmouseout='mouseOut(this);'>
  This div will change colour when hovered.
</div>
<script>
  function mouseOver(e){
    e.style.backgroundColor="red";
  }
  function mouseOut(e){
    e.style.backgroundColor="#ddd";
  }
</script>

Types of JavaScript

  • As with CSS, our JavaScript can be:
    • Inline: Beside our HTML for the page content
    • Internal: In a section of the page we reserve for our scripts (between <script> and </script> tags
    • External: In a separate JavaScript document. Save the document with a .js file extension. For example, script.js.  Use <script src="scripts.js"></script> to link to the scripts page

Mouse events

  • Mouse events such as onmouseover and onmouseout are used to trigger an event.

  • These are triggered when the mouse interacts with the element in a specific way.

<div onmouseover='mouseOver(this);' onmouseout='mouseOut(this);'>
  This div will change colour when hovered.
</div>
<script>
  function mouseOver(e){
    e.style.backgroundColor="red";
  }
  function mouseOut(e){
    e.style.backgroundColor="#ddd";
  }
</script>

Mouse events

  • There are a few more mouse events:

    • onmouseout - occurs when the cursor is moved away from an element such as a button or a heading.

    • onmouseover - occurs when the cursor is hovered over an element such as a button or a heading.

    • onmousedown - occurs when the user presses a mouse button over an element.

    • onmouseup - occurs when the user releases the mouse button over an element.

    • onclick - occurs when the user clicks on an element such as a button or hyperlink.

    • onmousemove - occurs when the cursor is moving over an element such as an image or menu.

JavaScript functions

  • JavaScript is quite a descriptive syntax.

  • This means that the language features an easy to read syntax where function names often do exactly what they say.

  • For example, document.getElementById gets an element using it's ID.

  • Compare that to Python where you have functions like ord.

document.getElementById

  • The document.getElementById function is used to obtain an element on the page using it's ID tag. We can then apply styles to it using the style property.

var e = document.getElementById("main_content");
e.style.backgroundColor = "#ddd";

document.getElementById

  • Let's now use this by putting it in a function.

function changeColour(){
  var e = document.getElementById("main_content");
  e.style.backgroundColor = "#ddd";
}

Adding JavaScript to a page

  • Let's now add this to a page:

<!doctype html>
  <html>
    <head>
      <title>JavaScript example</title>
      <script>
        function changeColour(){
          var e = document.getElementById("main_content");
          e.style.backgroundColor = "#ddd";
        }
      </script>
    </head>
    <body>
      <div id="main_content">

      </div>
    </body>
</html>

Adding JavaScript to a page

  • Now let's call the JavaScript function:

<!doctype html>
  <html>
    <head>
      <title>JavaScript example</title>
      <script>
        function changeColour(){
          var e = document.getElementById("main_content");
          e.style.backgroundColor = "#ddd";
        }
      </script>
    </head>
    <body>
      <div id="main_content">
        <button onclick='changeColour();'>Click me</button>
      </div>
    </body>
</html>

Making only one section visible

<button onclick='showSection('section1');'>Show part 1</button>
<section id="section1">This is section 1</section>

<button onclick='showSection('section2');'>Show part 2</button>
<section id="section1">This is section 2</section>
<script>
  function showSection(sectionId){
    //Hide them all first
    document.getElementById("section1").style.display = "none";
    document.getElementById("section2").style.display = "none";
    //Now just display the one you wanted
    document.getElementById(sectionId).style.display = "block";
  }
</script>

Create an element on a webpage. Using an internal script tag:

 

Make the element change the colour of an other element when it is clicked. Use a JavaScript function to perform the action.

Task

Server-side code

Learning Intentions

  • Understand the term server-side code

  • Understand how server-side code connects to front-end code

  • Understand how to write server-side code using PHP

Success Criteria

  • I can explain the term server-side code
  • I can write PHP code to recieve data from the user

sERVER-SIDE code

  • Server-side refers anything that runs on a webserver.

  • Some programming languages like PHP, Java Server Pages (JSP), Python, JavaScript and C# can be run as server-side code.

  • When a webpage is processed prior to the client viewing it, it is called a dynamic webpage (contrast this to an interactive webpage which is modified on the client's computer)

  • These languages are used to preprocess pages before they are sent to the client's browser.

  • There are huge benefits to doing this such as being able to control what is displayed on the webpage, requiring users to login first, processing databases and so much more.

  • Whilst this part of the course isn't a core part of what you need to know about to pass, it's useful that you know a bit about it for work placements.

PHP as a server-side language

  • PHP is an example of a server-side language we have looked at.

  • It's the most commonly used server-side language due to simplicity, performance, database-connectivity, community and compatibility.

  • PHP can run on Apache, Nginx and IIS servers.

Getting started with PHP

  • PHP is written inline within a HTML page saved as .php file.

  • A piece of server software such as Apache uses a directive to tell it what to do with the PHP file (i.e. pass it to the PHP preprocessor)

  • The PHP preprocessor then looks for all the PHP tags (<?php...?>) and processes the PHP within them.

  • The server then send back the processed page to the client

Embedding PHP

<!DOCTYPE html>
<html>
  <head><title>My website</title></head>
  <body>
    <h1>Welcome to my website</h1>
    <p>Hello, and welcome to my website. The time is <?php echo date("H:i:s"); ?></p>
    <ol>
    <?php
       $con = CreateDatabaseConnection();
       $con->query("SELECT * FROM favourites");
       foreach ($con->query($sql) as $row){
         echo '<li>' . $row['name'] . '</li>';
       }
    ?>
    </ol>
  </body>
</html>

Processing form data

<!DOCTYPE html>
<html>
  <head><title>My website</title></head>
  <body>
    <h1>Contact me</h1>
    <form method="post" action="submit.php">
      <input name="name">
      <input name="email" type="email">
      <textarea name="content"></textarea>
      <button type="submit">Submit form</button>
    </form>
  </body>
</html>
<?php

  echo "The person " . $_POST['name'] . " has been in touch with you."
  echo "Their email address is " . $_POST['email'] . ".";
  echo "They said the following " . $_POST['content'] . ".";

?>

Processing form data

<?php

  echo "The person " . $_POST['name'] . " has been in touch with you."
  echo "Their email address is " . $_POST['email'] . ".";
  echo "They said the following " . $_POST['content'] . ".";

?>
<!DOCTYPE html>
<html>
  <head><title>My website</title></head>
  <body>
    <h1>Contact me</h1>
    <form method="post" action="submit.php">
      <input name="name">
      <input name="email" type="email">
      <textarea name="content"></textarea>
      <button type="submit">Submit form</button>
    </form>
  </body>
</html>

Cookies and session variables

<?php

  setcookie("username", $_POST['name']);

  start_session();
  $_SESSION['user_email'] = $_POST['email'];

  echo $_COOKIE['username'];
  echo $_SESSION['user_email']);

?>

What else PHP can do

  • PHP is a fully-fledged programming language. Apart from creating dynamic content, it can do the following:

    • Connecting to and working with databases

    • Accessing files on a server

    • Collect data

    • Maintain sessions

    • Encrypt and process data

Activity

Using the content from previous lessons plus the additional documentation for PHP, create a dynamic website using PHP.

Libraries

What is a library?

  • Libraries are a set of functionalities, often classes or procedures, that can be used to extend an existing programming language. 

  • For example, the C programming language uses .h files (header files) to build the language. In fact, C has no IO features in it and requires the stdio.h header in order to implement this.

What is a library?

  • The C# language uses the .NET Framework which is a bunch of dynamically linked libraries (DLLs) written in C#.

  • Java is built using a JVM which itself is written in Java and composed of several hundred JAR files.

JavaScript libraries

  • For this course, we're only interested in JavaScript libraries.

  • There are literally hundreds of JavaScript libraries, if not thousands.

  • These libraries are designed to bring features to JavaScript that would otherwise be complicated or take a while to write.

  • jQuery is the most popular, partly because it sticks to it's motto: 'write less, do more'.

  • React is one of the most popular libraries and is gaining popularity (it was my last job in the industry).

Why do we use libraries?

  • Libraries are so popular for a variety of reasons, but the most common ones are as follows:

    • Libraries are tried and tested.

    • Libraries like jQuery mean you write less code than if you didn't have it. This means you actually make your JavaScript files smaller and indeed reduce download times.

    • Libraries save you writing complex code that would take hours to write.

    • Libraries are updated by the developers all the time, and if you use the lastest track, you'll always get the latest version.

Adding a JavaScript library

  • Documentation on the library will include specific details on how we can add a library.

  • Below is an example of how to add and then test jQuery.

<!DOCTYPE html>
<head>
  <title>Page with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <h1>jQuery</h1>
  <p>This page has jQuery</p>
  <script>$("h1").fadeIn();</script>
</body>

Activity

Pick any library and test it on your website. Some examples of libraries include:

jQuery 

MooTools

jQWidgets

D3.js

ftp

Learning Intentions

  • Understand what FTP is, why it is used, the variations of it and the advantages of each type

  • Understand how to use FTP using software such as Filezilla

Success Criteria

  • I can explain what FTP is, why it is used and compare FTP, SFTP and FTPS
  • I can use FTP software to transfer a file to a server and back

FTP

  • FTP or File Transfer Protocol is a protocol for transferring files from one host to another over a TCP-based network like the internet.

  • Developed in the early 1970s by Abhay Bhushan (pictured), FTP is one of the oldest and most widely used protocols for file transfer.

  • FTP allows the transfer of both individual files and directories.

  • Web developers rely on FTP or SFTP in order to put their files onto a production server (unless they are remotely editing these files)

How FTP works

  • FTP is simple. It comprises of a server and a client (who accesses the server). The steps involved are:

    • A server opens a port

    • The client requests FTP access

    • The server responds

    • The client uses FTP commands to request file transfers or other operations

FTP opens two channels - one channel for sending commands and another for transferring the files

Versions of FTP

  • There are currently three versions of FTP:

    • FTP - standard FTP - no security and really simple

    • SFTP - SSH File Transfer Protocol - uses SSH (or Secure SHell) tunnelling to transfer data adding security to data transfers. SFTP is considered the most secure since you do not need to login with a username and password but can instead opt for an SSH key.

    • FTPS - File Transfer Protocol Secure - uses SSL or TLS to transfer data securely. 

FTP

  • FTP protocols normally uses certain ports for file transfer:

    • FTP - port 21 - no security - fastest

    • SFTP - port 22 - highest security - slowest

    • FTPS - port 990 - good security - fast

Using FTP

  • FTP requires the user to have an FTP account with a username and password. 

  • Both of these must be specified when the FTP connection is initiated. 

  • FTP is not secure! This means that although you need a user name and password to login, any data sent between the client and server is left unencrypted which means that a third-party attack could expose the data!

  • SFTP or FTPS fix this.

Filezilla

  • Filezilla is perhaps the most commonly used FTP client (other than command line!) due to it's wide ranging feature-set but also down to the fact it is free and open-source.

  • Filezilla has a complicated interface with far too much going on at the one time, but once you master it Filezilla is one of the most useful tools you can use.

Filezilla

Filezilla

192.168.1.2

jamie

******

22

Filezilla

Filezilla

Activity

We're going to attempt to use (S)FTP to login and upload a file to a server and then a file back.

Testing Websites

Learning Intentions

  • Understand how the methods of testing websites work

Success Criteria

  • I can create a simple test plan for testing my website

Test plans

  • For this course, you need to be able to create a test plan to test that a website works correct.
  • Like with testing software, this should be done using a matrix format, which includes the tests on the left side and each page being tested at the top:
Homepage About Me Contact page
Images display Yes Yes Yes
Links work Yes Yes Yes
Forms submit correctly N/A N/A Yes
No JavaScript errors N/A Yes No

Test plans - platform compatibility

  • Another thing you need to look out for is platform independence. 
  • All pages should load correctly and look similar on all browsers and operating systems. This kind of testing is normally huge but for this course, you could limit it to just a few browsers:

Homepage About Me Contact page
Chrome Yes Yes Yes
Firefox Yes Yes Yes
Safari Yes Yes Yes
iOS Safari Yes Yes Yes
Android Chrome Yes Looks weird Yes

Test plans - how to record

  • You should ensure you test all links, images and interactivity on the site (for example dropdowns, embeds and audio/video).
  • From the tables, you should be able to decide what needs to be looked at. 
  • For this course, you are expected to find some errors and record them. You can then explain how you fixed them.
Page Error Fixed
Homepage Image of me didn't load Format of image needed changing as it was unsupported (fixed 21/10/2022)
Contact page User could enter letters into the quantity field Changed the type to number on quantity field (fixed 11/11/2022)

Activity

Produce a test plan for your own website.

Development tools

Learning Intentions

  • Understand the types of development tools

Success Criteria

  • I can explain the different types of development tools
  • I can state the advantages of each type of web development tool and make a decision as to what is the best for each job

Developing a website - text editors

  • When we are developing a website, we have multiple options. 

  • Throughout National 5 and Higher you'll likely have been using something like Visual Studio Code or Atom (also known as Pulsar).

  • These are all examples of text editors.

Developing a website - web authoring packages

  • The other method we can use to develop websites is by using web authoring packages.

  • Examples of web authoring packages include Adobe Dreamweaver or Serif Web. 

  • Web authoring software like this allows you to drag-and-drop parts to make your pages and the editor will generate the code for you (this is called WYSIWYG). They may not offer full drag-and-drop however.

  • Web authoring software allows you to see and change the code that makes the webpage as well, giving you some control over the code that will be produced.

Developing a website - Drag-and-drop

  • The final method of website development is through the use of a drag-and-drop only editor. 

  • These have seen a huge decline in the last few years with web authoring packages filling the gap, and even tools like wix.com offering code editing.

  • The main issue with editors like Google Sites is that although they are easy for beginners to use due to their drag-and-drop nature, they do not offer access to the code to generate them and therefore are incredibly limited.

Developing a website - comparison of packages

For this course, we need to understand the differences between these two types of tools:

 

Text editors Web authoring tool Drag-and-drop
Drag-and-drop None Partial Full
Code editing Full Some None
Project management tools Can be installed Included by default None (not needed)
Pricing Free Often expensive Often free

Activity

  • Write an essay of up to 500 words, comparing different types of editors. 
  • You should explain the pros and cons of each over the other as well as give clear examples of each type of editor.
  • State any additional features that might be present in a web authoring tool that wouldn't often be found in a text editor.

Platforms

Learning Intentions

  • Understand what a platform is with regards to a client
  • Understand how platforms inform decisions in web design

Success Criteria

  • I can explain what a platform is and how it can affect a website's development

A long, long time ago...

A long time ago, we had two browsers. One called Internet Explorer and Netscape Navigator. 

Both of these browsers aimed to be better than the other by adding features which, although not on the standards track, offered functionality to the users that the other party could not offer. One such example is the <marquee> tag. 

The W3C who manage the web wanted to make things more standardised. We continued to get garbage like Internet Explorer right up until 2011 that refused to follow the standards, unlike it's competitors, Firefox and Safari who unfortunately didn't get the same level of market share due to Internet Explorer being installed on all Windows computers by default.

Then came along Chrome in 2008. Chrome was a young keen little guy and was built on the rendering engine used in Safari called WebKit. Chrome followed standards and was massively faster thanks to the V8 Engine. 

Internet Explorer endured for another couple of years releasing three more versions that tried to follow standards better than before, but couldn't match Chrome, Safari or Firefox's speed and features.

Chrome has since continued to push the web to be a better place but has also allowed the the browser to creep towards ubiquity. Chrome's dominating position has allowed Google to steer the direction of the web in the way that suits them. Not all of this is bad, but some of it is to make them more money.

It is a sad time for browsers.

Platforms

  • A platform refers to the hardware and software configuration. 
  • Within the context of web development, there are two types of platform; sever-side and client-side.
  • For this course, we'll be looking mostly at the client-side platform.

Platforms - device type

  • Platform can be a classification that relates the device being used.
  • There are many platforms that we can use, including:
    • Windows PCs
    • Macs
    • Linux
    • Android tablets
    • iPadOS tablets
    • Android smartphones
    • iOS smartphones
  • Whilst these devices themselves run on different operating systems, the physical hardware can be a dictator of what we can do with them rather than the operating system.

Platforms - Operating system

  • There are many operating systems available today. Here are a few of the most common operating systems:
    • Windows
    • macOS
    • iOS
    • iPadOS
    • tvOS
    • watchOS
    • Android
    • wearOS
    • Linux desktop (there are many distros under this umbrella)
    • BSD
    • Tizen

Platforms - browser

  • Then another part of the platform is the browser.
  • Browser is the most common reason that web developers have to test so many different platforms since different browsers have different features.
  • CSS is always getting more and more, yet some browsers don't actually implement this for a long time. 
  • Some browsers still implement non-standard features using prefixed CSS properties. For example, -webkit-text-fill. This means Chrome can support this feature, but other browsers such as Firefox (as well as some Chromium based browsers) may not. And by implementing these features early the vendor of the browser (e.g. Google) may have to change them considerably when the feature becomes a standard.

Platforms - browser

  • JavaScript also has different features in different browsers. 
  • For example, Chromium based browsers like Edge, Opera and Chrome all use the V8 Engine where as old versions of Edge use the Chakra Engine, Firefox uses SpiderMonkey (the very first JavaScript engine). 
  • This means that each browser may support or not support new features in JavaScript. 
  • JavaScript is actually a dialect of a language called ECMAScript which Adobe ActionScript (which powers Flash) is also a dialect of. The latest version of this is ES6.

Platforms - browser rendering engines

  • Different browsers also render things differently.

Brave

Firefox

Other considerations regarding platforms

  • When designing a website, you always need to consider what the client user is going to be using to access the website. This means you need to consider the following:
    • The user's bandwidth
    • The user's screen size (we'll discuss RWD later)
    • If the user has a data limit (e.g. over LTE)
    • If the user only has access to an older browser (some government agencies only use Internet Explorer)
    • The performance of the user's device (older devices cannot handle massive amounts of CSS and/or JavaScript effectively)
    • The user's battery life! JavaScript drains battery, so making it efficient is so important

The marquee - how could we do this today?

Quirks and polyfills

  • Quirks and polyfills are both methods of dealing with these issues in both CSS and JavaScript. 
  • New features are being added to CSS all the time since it is a living standard. This means that browsers need updated all the time. Unfortunately, new versions of browsers sometimes require a new version of an operating system and older devices like smartphones or PCs cannot always be updated to those operating systems. 
  • To add in those new CSS features, users develop polyfills using JavaScript which 'simulate' those features.

Testing those webpages

  • We can easily test our webpages by simply opening them on a different device, browser or operating system. 
  • However, there are useful tools like browsershots.org that can automate this process.

Activity

  • Go on to the Internet and open the browsershots.org website.
  • Identify a website and test it with the tool. 
  • Note any differences between different types of browser.

W3C

Learning Intentions

  • Understand the role and purpose of the W3C

  • Understand the term vendor neutral and the importance of it

Success Criteria

  • I can explain the role of the W3C
  • I can explain the term vendor neutral and why it is important to the web

The W3C

  • Up until about 2009 the web was a mess with companies like Netscape and Microsoft trying to force their own features on to the standards track. 
  • This all changed after companies like Apple and Amazon joined this and there tends to be more agreement than disagreement now.
  • The W3C or the World Wide Web Consortium is a group of companies that comprise of companies like Google, Apple and Microsoft that manages the standards for the world wide web. 

Standards track

  • In the last couple of lessons/slides you've already seen the term standards track.
  • In simple terms, the standards track is the main set of standards that have been approved for use in mainstream browsers and for use on production websites (client-facing websites).
  • Some browser vendors implement these standards faster than others, for example Mozilla is often the first to introduce standards and ditch vendor-specific features whereas Google is often one of the last.
  • It was originally headed by Sir Tim Berners-Lee (the creator of HTML and the Web)

What standards do we have?

  • Within the context of the W3 we have several standards including:
    • HTML
    • CSS
    • JSON
    • XML
    • SVG
    • SOAP
    • ARIA

Other standards 

  • The W3C also manages other standards for screen readers and accessibility on the web, including the ARIA standard, XPATH for traversing an XML file quickly, MathML for displaying mathematics on a webpage and much more.

Vendor neutrality

  • Vendor neutrality is the dream for web developers.
  • Neutrality seeks to promote what they call interoperability and whilst it's not always possible to have ever web browser display content the exact same way, it's possible to ensure it is accessible to everyone in a way that makes sense.
  • Vendor neutrality also seeks to prevent certain browsers supporting features that only they can use

Activity

  • Write an essay of up to 500 words, describing the purpose, role and activities of the W3C.
  • Your essay should clearly state what would happen if the W3C did not exist, how the W3C helps push towards a more standardised and vendor-neutral approach to the web and how the web has evolved under their leadership.
  • You are also required to ensure that the essay reads well, is clear and concise and is your own work.
  • You are also required to include references to any other sources you use in your essay

RWD

Learning Intentions

  • Understand the term responsive web design

  • Be able to write code that produces a design that follows responsive design principles

Success Criteria

  • I can explain what responsive web design is
  • I can write code to produce a webpage that is responsive

RWD

  • RWD or Responsive Web Design is one of the most important steps that web technologies have ever taken.
  • The idea behind RWD is that any webpage should work on any device and should look good on every device.
  • There are three types of layout that are available today:
    • Fixed layouts
    • Liquid layouts
    • Responsive layouts

Fixed websites

liquid Layouts

Responsive websites

Responsive websites

The importance of RWD

  • Responsive design is so important in today's world.
  • Google will penalise websites which do not implement RWD techniques or do not work on all devices.
  • Around 60% of all website traffic comes from mobile devices like smartphones.
  • Everyone is doing it, so to remain competitive you also need to.

Media queries

  • Media queries are used to make CSS respond to different aspects of the web browser serving the page.
  • Media queries are composed of conditions and instructions:
    • Conditions: Media queries allow you to set conditions like "If the screen is smaller than 600 pixels wide" or "If the device is in landscape mode."

    • Instructions: You can then give instructions to the browser, like "Make the text bigger," "Hide this element," or "Change the background color."

@media only screen and (max-width: 800px){
  body {
    background: #f60;
  }
}

Media queries

It's very common across websites to see certain items disappear or take up the whole width of the viewport when the screen gets smaller.

@media only screen and (max-width: 800px){
  .big_screen_only {
    display: none;
  }
  .col_6{
    width: auto;
  }
}

Media queries - Demo

It's very common across websites to see certain items disappear or take up the whole width of the viewport when the screen gets smaller.

@media only screen and (max-width: 800px){
  .big_screen_only {
    display: none;
  }
  .col_6{
    width: auto;
  }
}

Activity

  1. Experiment with media queries. 
  2. Work through the webpage on media queries making the page responsive
Presentation Overview
Close
JB
Authoring a Website
© 2020 - 2024 J Balfour
16:19 | 23-05-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
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files