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

• Produce a requirements list

• Produce an outline design (page template/wireframe)

• Create a navigation structure

• Produce a resources list

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

• Produce the rest of the site using the template

• 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

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

• 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

• 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

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

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

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

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

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

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

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

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

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

• 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

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

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

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

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

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

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

Pages are made up of tags:

• A web page has a very simple structure

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

• The anchor tag is used to make a link to another page.

• The ul tag is used to make a bulleted (unordered) list

• The ol tag is used to make a numbered (ordered) list

• 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

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

• The audio tag is used to sound in a webpage

• The video tag is used to video in a webpage

• Headings in HTML work where the smaller the number the bigger the text, so H1 is the biggest:
  

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

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

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

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

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

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

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

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

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

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

• 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 by default accepts text:

• The size="40" sets the width of the input box in characters.

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

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

• The <textarea> element is designed for collecting larger amounts of data.
• Unlike the <input> tag, it is not self-closing.

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

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

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

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

   

• A CSS file is made up of rules.

• We've seen that we can easily style an element by using

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

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

• 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

• 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

• Height and width of elements can be set using:

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

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

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

• But this is inefficient!
• Imagine having to download this CSS file - just look at the repetition!

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

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

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

• For Higher you are expected to build a horizontal navigation bar:

• 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

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

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

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

• At National 5 you would write something like this:

• This can also be written like this:

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

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

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

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

• Let's now add this to a page:

• Now let's call the JavaScript function:

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

• 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

• 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

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

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

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

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

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

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

• 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

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

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

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

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

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

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

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

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

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

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

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

• 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

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

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

• Different browsers also render things differently.

• 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

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

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

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

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

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

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

• 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

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

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.