Web Development Flashcards
What are end user requirements?
The end-users are the people that are most likely to use a website.
The end-user requirements that what visitors to a website want to do.
Example: Twitter
See tweets of people I follow; See what is trending
Example: School Website
Virtual tour of the school; See who the teachers are.
What are functional requirements?
The functional requirements describe what functions the website is required to perform.
Example: Twitter
User logon; find tweets of people follow; display tweets in order of time.
Example: School Website
Video introduction from head teacher, photos of all teachers.
What elements should a wireframe show?
1- The indented layout of the page
2 - The position of
- Navigational bars/links
- All text
- Media
- Interactive elements
- Form inputs
- Hyperlinks
3- Sometimes the wireframe may also include annotations that specify how the content should be styled using css e.g. background-color, font, size, etc.
What is a low fidelity prototype?
Low-Fidelity prototypes are created fairly-quickly.
They are shown to the end-user group and their feedback should be considered when the final version of the site is being developed.
Do low fidelity prototype include more or less details than a wireframe ?
Low-fidelity prototypes will often include more detail than a wireframe. They might contain all the intended text. Images and video might contain hand-drawn version of the final image/ video.
What are the 3 things that make a design effective?
Visual Layout - The website should be clear and not too cluttered.
Readability - Too much text can take too long read and clutter up the screen. Also consider target user.
Consistency - A well-designed website will have a consisted format across multiple page.
Describe a page structure in html
Webpage can be split up into different sections, all of these are within the .
The element will show the website banner. This will often include a title and a log.
The element will contain navigation links
The elements will contain the page content.
The element will contain information about the webpage/website – usually contact details, links to social media or legal information.
What does the element do and what does it contain?
The element allow users input to be collected in a form.
The elements of a we will use are: Text Number Text Area Radio Submit
Code for capturing a first name in a box with a maximum length of 25
Code for capturing radio buttons (“choice”) with the option A being selected as default, with A meaning - sausages and chips
Sausages and chips<br></br>
Code for a drop down menu to capture a favourite food with one choice being “pizza” and the other being “sausages”
Pizza
Sausages
Code for a box for verbatim spanning across 5 rows and 45 columns
Code to submit the information
What are the 2 types of form validation most often used?
Maximum & Minimum Values - Max, Min & Max Length can be added to text input, numerical input and text area to:
Limit the number of characters that can be entered.
Set a rand of valid numerical values.
Presence Check - When asking a user to complete a form it is sometimes necessary to ensure that one or more inputs are not left blank by the user.
Code for text input with a size of 30 and a maximum length of 25
Text: <br></br>
Code to capture age and check it is between 0 and 100
Number: <br></br>
Code for a box for verbatim spanning across 5 rows and 45 columns, and a maximum length of 250
Text Area: <br></br>
What are the 3 types of Cascading Style Sheets?
Inline CSS
Internal CSS
External CSS
Example of code for an inline css + what does it do?
Inline CSS
Used to apply style to a single element.
<h1>This is a heading</h1>
Example of code for an internal css + what does it do?
Internal CSS
Included in the of each document, only applied to one single page.
h1{ color:maroon; margin-left:40px; }
Example of code for an external css + what does it do?
External CSS
CSS is placed in an external file and linked in the head of HTML document. This means that one StyleSheet can be applied to multiple page.
What does display: block do?
An element uses the entire width of its container.
What does display: inline do?
An element used only as much width as necessary.
What does display: none do?
An element is not visible.
- &
- inside the section. CSS can be used to change the appearance. nav ul {list-style-type:none;} nav ul li {float:left; width:80px; text-align:center;} nav ul li a {display:block; padding:8px; color:black;} nav ul li a:hover {background-color:red ;color:white;}