Web design/section 3 Flashcards
Analysis
Web developers consider the end-user requirements and functional requirements of a website
Analysis
End-users
The people most likely to use a finished product
Analysis
End-user requirements
Features that are needed or wanted by the end-user
Such as any accessibility requirements
Analysis
Functional requirements
The processes the website should carry out and interactions with databases/information
Design
What act protects the assets of an individual?
Copyright, designs and patents act 1998
Design
What elements related to the Copyrights, designs and patents act do developers need to consider?
Elements such as text, graphics, videos and audio
Design
What do developers have to do with media that isn’t theirs?
Give credit and acquire relevant permissions before using the media
This may also involve paying copyright holders
Design
Copyright holders
The owner of any multimedia
Design
Failure to comply with the Copyright, Designs and Patents Act can result in…
Fines and prosecution
Can include end-users and business owners/developers
Design
Compression
Reducing a file’s size/required storage space
Design
Benefits of compression
Lower storage requirements on the server side, more responsive upload rates/less time to transfer files to the client side
Design
Compression techniques
Lossy and lossless compression
Design
Lossy compression
Removes some of the data when compressing, so compression rates are higher
Only if the file format supports lossy compression
Design
Lossless compression
Maintains all original data, lower compression rates
Design
Types of site navigation sructures
Linear, hierarchal
Design
Linear navigation structure
A structure where the user moves from one page to the next in a sequence
Design
Hierarchal navigation structure
A structure where pages can be accessed dependant on the user’s position in the hierarchy
Design
Wireframes
Used to design the visual layout of the webpage
Design
Wireframes must show…
Navigation links, text areas, media used with file format, position and types of hyperlinks
Design
Benefits of wireframes
Used to show the client the design early-on, easy way to design user-interface
Design
Low-fidelity prototypes
A quick design of the user-interface of a website, usually drawn on paper
Benefit of it being low cost
Design
File formats for audio files
WAV and MP3
Design
Compression in WAV files
Almost always uncompressed
Can sometimes use LCPM encoding for lossless compression
Design
WAV file consistency
Consistent with the original sound
Design
WAV file size
Restricted to less than 4GiB
Design
WAV file sampling rate
44.1-48kHz
Design
Sampling rate
Number of times sound is captured per second
Design
MP3 file compression
Lossy compression that uses perceptual coding
Design
MP3 file quality
Quality depends of levels of lossy compression
Design
MP3 file size
There is no defined limit
Design
MP3 file sampling rate
44.1-48kHz
Design
File formats for images
JPEG, GIF, PNG
Design
JPEG file compression
Lossy compression
DCT encoding
Design
JPEG file animation
Not supported
Design
JPEG file transparency
Not supported
Design
JPEG file colour depth
24 bit; 16,777,216 colours available
Design
GIF file compression
Lossless compression
LZW encoding
Design
GIF file animation
Supported
Design
GIF file transparency
Supported
Design
GIF file colour depth
8 bit, 256 colours available
Design
PNG file compression
Lossless compression
DEFLATE encoding
Design
PNG file animation
Not supported
Design
PNG file transparency
Supported
Design
PNG file colour depth
24 bit; 16,777,216 colours available
Design
JPEG is ____ quality than PNG
Lower, because JPEG is compressed with lossy techniques
Implementation
Basic HTML file structure
<!DOCTYPE html> <html> <head></head> <body></body> </html>
Implementation
<!DOCTYPE html>
Specifies the type of HTML for the browser, starts the document
Implementation
<html></html>
Specifies that all code within the tage is HTML
Implementation
<head></head>
Anything not seen by the end-user, such as links and titles, are stored inside the head tag
Implementation
<body></body>
Anything in these tags is shown in the browser window, elements such as text and images
Implementation
Closing tags in HTML
Used for most elements and begin with a /, these tags end elements that have content in between them
Implementation
<p></p>
Creates a paragraph in the browser window
Implementation
<h1></h1>
Creates a heading; can go from h1 to h6, with the size decreasing
implementation
<div></div>
A container element; good for grouping elements and for applying CSS elements to groups
Implementation
Hyperlinks in HTML
<a href="url">link text </a>
Where “url” is the URL, “link text” is the text you click to redirect
Implementation
Link to CSS file in HTML
<link rel="stylesheet" type= "text/css" href= "theme.css">
Stylesheet stays the same as it specifies a CSS file, same with text/css
Implementation
Link to JS file in HTML
<script src="homepagescript.js"></script>
Implementation
Images with HTML
<img src= "IMAGE LINK" alt= "DESCRIPTION">
ALT is the description for when an image cannot appear
ALT is used for screenreaders
Implementation
Audio with HTML
<audio controls> <source src= "AUDIO FILE" type = TYPE OF AUDIO"> </audio>
Types of audio files: audio/…: mpeg or wav (mpeg for mp3, wav for wav)
controls is a parameter of audio
Implementation
Videos with HTML
<video width="num" height="num" autoplay> <source src="VIDEO FILE" type="video/mp4"> </video>
Same as audio, source is a child of the video tag
Implementation
Types of lists in HTML
Ordered and unordered
Implementation
HTML unordered lists
<ul> <li></li> <li></li> </ul>
<li></li> is list elements, these have the elements of the list
Implementation
HTML ordered lists
<ol> <li></li> <li></li> </ol>
<li></li> is list elements, these have the elements of the list
Implementation
Internal hyperlinks
Take you to another page in the same site
Implementation
External hyperlinks
Take you to a different website entirely
Implementation
Absolute hyperlinks
Completely fixed and don’t change
Include all link information such as server address, path and file name
Implementation
Relative hyperlinks
Take you to a file in the same directory, are more flexible
Implementation
CSS code consists of…
A selector and a declaration
A selector is the element you are applying the style, or declaration, to
Implementation
CSS text properties
font-family, font-size, color, text-align
Implementation
CSS general properties
background-color
Implementation
CSS font-family
A set of fonts that are applied to text
Fonts are in families so that if a font isn’t available the next is used
Implementation
CSS font-size
The size of text, typically in pixels (px)
Implementation
CSS color
Sets the colour of the text
Note that the element is color, not colour
Implementation
CSS text-align
Positions the text; this cold be, left, right or centre for example
Implementation
CSS background-color
A general CSS property, sets the backround colour for any element
Implementation
CSS syntax
p {color: blue; font-size: 12px;}
This code applies to all paragraph elements
Each declaration is seperated by “;”, and there is a colon between the property and the specification for that property
Implementation
HTML style element
<style></style>
Anything inside the style tag is CSS, goes in the <head></head>
tag
Implementation
ID declaration in HTML
<p id="text"></p>
This allows CSS code to target this paragraph of text specifically
Implementation
Using an ID in CSS
#text {color: blue;}
This CSS code only applies to the HTML element with ID “text”
Implementation
Class declaration in HTML
<h1 class= "heading"></h1>
Implementation
Using a class in CSS
.heading {font-size: 30px;}
Implementation
Difference in syntax between a class and ID in CSS
A class uses a .text
as a selector, ID uses #text
as a selector
Implementation
Different uses of ID and class in CSS
Code for a class can be used for multiple elements, code for an ID is used for a specific element
Implementation
The client
The computer system that runs the web browser
Implementation
Client-side scripts
Scripts that are interpreted by the browser and executed on the client system
Implementation
Main client-side scripting language
JavaScript
Implementation
HTML script element
<script></script>
Anything inside this code is JavaScript by default
Implementation
Mouse over events in JS
Changes an element when the cursor goes over it
Implementation
Mouse out events in JS
Changes an element when the cursor goes off it
Implementation
JS functions
function mouseOver() {}
Declare a func with function
, use () for parameters, code goes in {}
Implementation
Creating a mouse-over event in JS
function mouseOver () { document.getElementById("id").style.color = "red"
Must specify the ID in HTML for the code to work, then use CSS after ID
You need to apply the JS function in the HTML element, just the function isn’t enough
Implementation
Creating a mouse-out event in JS
function mouseOut () { document.getElementById("id").style.color = "black"
Must specify the ID in HTML for the code to work, then use CSS after ID
You need to apply the JS function in the HTML element, just the function isn’t enough
Implementation
Code within the JS function to specify what to do in the event of mouse-over/mouse-out
document.getElementById("id").style.color = "red"
The ID is the HTML ID
Implementation
Applying JS functions to CSS elements
<h1 id="id" onmouseover="mouseOver()" onmouseout="mouseOut()"></h1>
onmouseover specifies func to use in a mouseOver event, like a mouseOut
Testing
Factors to take into account when testing a website
user interfance, links and navigation, media, consistency
Testing
How to test user-interface
Ensure the website matches the wireframe and considers end-user requirements
Testing
How to text links
Make sure all internal and external hyperlinks work correctly
Testing
How to test media
Make sure the position & alt tags are correct, and media is working
Testing
How to test consistency
Make sure all CSS elements are consistent and the styling is applied correctly
Evaluation
How to test the fitness-for-purpose of a website
Fit-for-purpose is what you evaluate
Make sure the website meets end-user and functional requirements