Web <3 Flashcards
(analysis)
What is an end user?
The people who are going to be using the website
(analysis)
What is an end user requirement?
The tasks end users wish to be able to do whilst using the website
(analysis)
What is a functional requirement?
Processes and activicties that the system has to perform
(design)
what is a heirarchical structure?
They display the navigation of all the webpages throughout a website
(design)
what is a wireframe?
User-interface planning for a website
(design)
What is contained in a wireframe?
nav bars, text elements, meadia and forms/form inputs
(html)
What are the SEMANTIC elements of a web page?
main, nav, header, section and footer
(html)
What is element of a web page which is NOT semantic?
DIV
(html)
What is contained within the header element?
Page banners (often with a title, graphics, logos or a link to a home page)
(html)
What is contained within the nav element?
The navigation bar
(html)
What is contained within the main ?
Page content (graphics, text, sound, text, sound and video)
(html)
What is contained within the footer element ?
General info (external links, contact details, FAQs, copyright info or legal agreements)
(forms)
What are the form elements?
Input:- -text -number -textarea -radio -submit Select
(forms)
What are the types of validation?
Length, presence and range
(forms)
Length check?
Maxlength=”__”
Limits characters available
(forms)
Presence checks?
Required
(forms)
Range checks?
min=”__” max=”_”
Makes sure the number is between the RANGE of __ and __
(duh)
(forms)
What is the purpose of Button (OnClick) ?
Visual aknowledgement for users/candidates when the submit button is clicked
(forms)
Button (OnClick) code?
onclick=”alert(‘______’)”
(forms)
What is the benifate of Button (OnClick) ?
Helpful to candiates who are not yet experiencing a response generated by server-side processing?
(forms)
What is the select element used for?
To create a list of possible inputs –> less user error
(ID attributes)
What is an ID attribute?
The ID attribute specifies a unique id for a html element (the value must be unique)
(CSS)
Define CSS
Cascading Style Sheet
(CSS)
What are the CSS declerations that control the appearance and position of html page elements?
margins/padding display - block, inline, none float - left/right clear - both sizes - height and width
(CSS)
What is a margin?
Declares. atransparent area around the outside of an element. This pushes the element away from other adjacent elements
(CSS)
What is padding?
Declares a transparent area indise the edge of the element. This pushes content in from the edge of the element
(CSS)
What do grouping selectors do??
Grouping selectors … group the selectors
(duh)
Grouping selectors using commas reduces the amount of code required and is more efficient than writing each CSS declaration separately
(CSS)
What are auto margins used for?
To position an element in the middle of the browser’s window or within another element
(CSS)
What can floats be used for?
To word-wrap text around an image
(CSS)
What can clear:both be used for?
It makes the element drop below any floated elements that precede it
(CSS)
What can display:block be used for?
an element takes up the entire width of the container
(CSS)
What can display:inline be used for?
an element takes up only as much room as necesary
(CSS)
What can display:none be used for?
The element is not visable. The space where the element should be collapses as if there was no content in that place
(CSS)
Code to remove bullet points in nav bar
nav ul {list-style-type:none}
(CSS)
Code to position list items horizontally in a nav bar
nav ul li {float:left;}
(CSS)
Code to position list items horizontally in a nav bar AND spacing out each list item
nav ul li {float:left; WIDTH:__PX;TEXT-ALIGN:CENTRE}
(CSS)
Code to create clickable boxes in a nav bar
nav ul li a {display:block}
(CSS)
Code to control vertical alignment in a nav bar
nav {height:___px}
nav ul li a {……. padding:__px;}
(CSS)
Code to add interactive colours in a nav bar
nav ul li a:hover {background-color:#–––;color:White}
(JavaScript)
Why are JavaScript events such as onmouseover, onmouseout and onclick used?
To implement interactive web content
(JavaScript)
Where do the events go?
They are placed within html elements
(usability testing)
What is the purpose of usability testing?
Involves systematic observation to determine how well people can use a product
(usability testing)
What is low-fidelity prototyping?
Low-fidelity prototyping helps to eliminate design problems at an early stage, before money has been spent implementing the design.
The testers use low fidelity prototypes under a variety of conditions whilst being observed.
(usability testing)
How to test links and navigation?
- test the nav bar links take you to the right pages
- test external links
- test that all pages link to the homepages
- test all internal links work
- check to make sure there is no orphan pages
(usability testing)
What is an orphan page?
Pages that are not linked to any others
(usability testing)
How to test media content?
-ensure the text, graphics and video display correctly (from the wireframe)
(usability testing)
What is compatibility testing?
When you test your website to ensure that it works in the same way across a range of platforms (devices/webpages)
(usability testing)
What are the types of compatibility testing?
Browser testing
Device type testing
(usability testing)
What are common compatibility testing problems?
- changes in font size
- changes in the user interface
- alignment issues
- changes in CSS style and colour
- scroll bar related issues
- content or label overlapping
- broken tables or frames
