Web Design Flashcards
What is a site structure diagram?
A diagram used to design the names of the required web pages and how the web pages will link together using hyperlinks
What are the two types of site structures?
- Linear
- Hierarchal
What is a linear site structure?
Structure that allows users to move forwards or backwards through a set of web pages - no direct hyperlinks to specific web pages
What is a hierarchal site structure?
Structure that groups web pages into ain topics, which is used to create topic and subtopic web pages
What must an effective user interface have?
4
- Navigational links
- Consistency across multiple pages
- Relative vertical positioning of media
- File formats of the media (text, graphics, video and audio)
What are the two hyperlink types?
- Internal
- External
What does an internal hyperlink do?
Takes the user from one web page to another within the same website
What does an external hyperlink do?
Takes the user from one web page to another in a different website
What is a wireframe used for?
To design the layout of every web page in a website
What must a wireframe include?
4
- All text elements on the page
- Any media elements (graphics, video & audio)
- Elements that allow the user to interact with the page
- Intended position and type of all hyperlinks on page
What are the standard image file formats?
3
- Gif
- PNG
- JPEG
What are the standard video file formats?
2
- MP4
- AVI
What are the standard audio file formats?
2
- MP3
- WAV
Gif Properties
Compression, Animation, Transparency & Colour Depth
- Compression: Lossless
- Animation: Yes
- Transparency: Yes
- Colour Depth: 8 bit
PNG Properties
Compression, Animation, Transparency & Colour Depth
- Compression: Lossless
- Animation: No
- Transparency: Yes
- Colour Depth: 24 bit
JPEG Properties
Compression, Animation, Transparency & Colour Depth
- Compression: Lossy
- Animation: No
- Transparency: No
- Colour Depth: 24 bit
MP4 Properties
Compression
Compression: Lossy
AVI Properties
Compression
Compression: Lossless
WAV Properties
Compression, Quality & File Size
- Compression: Lossless
- Quality: Higher
- File Size: Larger
MP3 Properties
Compression, Quality & File Size
- Compression: Lossy
- Quality: Lower
- File Size: Smaller
What are prototypes used for?
To demonstrate or test the usability of the website design
What is a low-fidelity prototype?
Paper based prototype
What factors affect size / quality?
3
- Resolution
- Colour Depth
- Sampling Rate
How does resolution affect size / quality?
The larger the resolution, the more pixels (better quality), the more datat store and the larger the file size
How does colour depth affect size / quality?
The larger the colour depth, the more colours can be used (better quality), the more data and the larger file size
How does sampling rate affect size / quality?
The larger the sampling rate, the more data to store (better quality) and the larger file size
What is lossless compression?
Compression without quality reduction
What is lossy compression?
Compression with quality reduction
Why is compression used?
2
- To have media require less storage space
- To have media be able to transmit faster
What does HTML stand for?
Hyper Text Markup Language
How is the anchor tag used?
HTML code
<a href="page2.html"> Next Page </a>
What does the href attribute do?
Contain the address of a web page or the name of a HTML file
What are relative addresses used for?
To link pages and resources within the same website (internal link)
What are absolute addresses used for?
To link to web pages outside of your website (external link)
What does the Copyright, Designs and Patents act 1988 make illegal?
3
- Make unauthorised copies of content
- Distribute content without permission of the owner
- Use unauthorised content
What is the purpose of the div tag?
To define and group together a section of code to format with CSS
What are the required attributes of the img tag?
2
- src: specifies the file path of an image
- alt: specifies alternative text for the image if it cannot display
What is the structure of the audio tag?
HTML Code
<audio controls> <source src="quack.mp3" type="audio.mpeg"> Your browser does not support the audio tag </audio>
What is the structure of the video tag?
HTML Code
<video width="1280" height="720" controls> <source src="baseball.mp4" type="video.mp4"> Your browser does not support the video tag </video>
What is CSS used for?
To describe how HTML is to be displayed on the screen
What are the two ways of implementing CSS?
- Internal
- External
What is the selector?
Which element, class or ID of the web page is being styled
What is the declaration?
What is being changed by the CSS
What is the property?
The aspect of the selector being changed
What is the value?
The new value you want for the property
What are the CSS selectors?
4
- Asterisk
- Element
- Class
- ID
What is asterisk applied to?
Every element
What is element applied to?
All HTML elements specified
What is class applied to?
All HTML elements assigned to the class
What is ID applied to?
All HTML elements assigned to the specific ID
What are the five CSS properties and their functions?
- font-family: change text font
- font-size: change text size
- color: change text color
- text-align: change text alignement to left, right or center
- background-color: change background colour of html elements
How is a hex code represented?
RRGGBB and the values go from 00 to FF to identify the colours intensity
What is the link tag used for?
To link the HTML file to an external document in the head tag
How is the link tag structured?
<link rel="stylesheet" type="text/css" href="styles.css">
What are the benefits of using external CSS?
2
- Ensures there is consistency across multiple web pages
- Makes HTML code for web pages more concise and readable
What is the order of priority for CSS styles?
- In-Line CSS
- Internal CSS
- External CSS
What is the order of priority for CSS selectors?
- ID
- Class
- Element
- Asterisk
What are the two JavaScript events?
- onmouseover
- onmouseout
What does onmouseover do?
When the users pointer moves on to an element with the onmouseover event, JavaScript code can run
What does onmouseout do?
When the users pointer moves off of an element with the onmouseout event, JavaScript code can run
What is analysed during website analysis?
2
- End-user requirements
- Functional requirements
What are end user requirements?
Tasks that the people who will use the website must be able to do
What are functional requirements?
The processes the website must carry out and identifies the information required for the website to carry out its purpose
What elements are tested to ensure an effective user-interface design?
4
- Links & navigation works correctly
- All web pages constantly follow the same design
- Matches user-interface design
- Media (texts, graphics, audio & video) display correctly
How does a developer evaluate if a website is fit for purpose or not?
By checking to see if it meets both requirement types