MIS-3450 Exam 1 - Pam Dupin-Bryant
How do you validate your html
Check each page using the W3C HTML validator, vS code - W3C validation extension, Red squiggly line, view/problems, go to http://validator.w3.org/, validate by direct input, copy and paste your markup or validate by file upload, check
what does FTP stand for
File Transfer Protocol
Behavioral
JavaScript, Dom
what is symmetrical balance
formal balance, occurs when the elements are the same on either side of an axis line, mirror image
monochromatic
having only one color
what is the definition of bandwidth
the length of the metaphorical pipe that connects the client to the server, where the data travels, measure in mb or gb per month
standard doc type
<!DOCTYPE html>
Closing brackets in HTML
</tag>
4 common methods for creating placeholder links
<a>Midterm</a> <a href=" ">Midterm</a> <a href="#">Midterm</a><a href="/">Midterm</a>
common elements in footer blocks
<footer> tag, includes some or all of the following: copyright, contact info, legal info, a few links to the man section, site map, social media links
What is the html markup that links to an external stylesheet
<link rel="stylesheet" href="stylename.css">
characte encoding markup in html
<meta charset="utf-8">
which tags are block level?
<p>, <div>, <ul>, <ol>, <dl>, <blockquote>, <span>, <table>, <nav>, <main>, <header>, <footer>
Opening brackets in HTML
<tag>
what are multiple declarations separated with?
A Semi colon
Advantage of Web Standards
Accessibility Forward Compatibility Simpler and Faster Development Faster Download and Display
selector type: descendant
Aka contextual, example: #fun p
embedded style sheet
Aka internal styles are defined within a style element in the head section of a web page, there style instructions apply to the entire webpage document
who coined the phrase "less is more"
Architect ludwig mies van der rohe
Presentation
CSS
external style sheet
Coded in a separate text file, this text file is associated with the web page by configuring a link element in the head section
Inline style sheet
Coded in the body of the webpage as an attribute of HTML tags, the style applies only to the specific element that contains it as an attribute
Field of study that is devoted to analyzing the emotional and behavioral effects produced by color and color combination
Color Psychology
What are meta documents
Data about data, self referencing provide info not displayed on screen, keywords, descriptions, authors name, redirect to new page, self contained tag. no ending necessary
7 parts of the user expierence
Desirable, delightful, useful, learnable, memorable, efficient, effective
Structural
HTML
Requirements of HTML
HTML, Head, Title, and Body elements
Where are Meta Elements
Head of the Doc
what is a you are here indicator
Highlight the current location in the menu or showing bread crumbs, make it prominent
HTML stands for
Hypertext Markup Language
what does isp stand for
Internet Service Provider
Required elements in document head
Meta charset, meta name and content, title MUST INCLUDE TITLE
what are the 3 traits of pages with clear visual hierarchy
Prominence, group, nesting
what does qr code stand for
Quick Response Code
Behavioral
Script and programming, adds interactivity and dynamic effects, dom, java, etc
imported style sheet
Similar to external styles, they connect styles coded in a separate text file with a web page document. An external style sheet can be imported into embedded styles or into another external style sheet by using the @ import directive
Presentation
Specified with CSS sheets, how the doc should look
Correct markup to insert a comment into a CSS document
Starts with /* and ends with */
What group has maintained HTML sine 2004 and makes living standards for HTML5
WHATWG (Web Hypertext Application Technology Working Group)
Role of W3C in development of Web Standard
Works on a more static snapshot of HTML5, Organization that creates and oversees web tech efforts of experts to develop technologies, come up with proposals for how markup languages should be written, not official
3 ingredients of responsive design described by ethan marcotte
a flexible grid based layout, flexible images media and media queries, a module form the css3 specifications, create a design that can adapt to the constraints of the browser windows or any device that redners
what is the definition of web usability
a person of average or below average ability and expierence can figure out how to use the thing (learnable), to achomplosh something (effective), without it being more trouble than its worth (efficient)
who benefits from increased accessibility
a person with physical disabiltites, slow internet connection, old outdated computer, mobile device/smart phone
what is emmet?
a plugin for text editors which greatly improves html and css flow
what is a high fidelity prototype
a prototype that is close to the final product, lots of details and functionality, from a user testing point of view - close enough to the final product to examine usabiltiy, question in detail and make strong conclusions
What is happy talk?
a self congragulatory promotional writing that you find in badly written brochures, unlike good promotional copy it convyes no useful information and focuses on saying how great we are as opposed to delineating what makes us great.
what is a storyboard, when it comes to website structure
a series of wireframes
what is the different between serif and sans-serif
a serif is the decorative stroke at the end of a letter, the feet of the letter. Sans-serif does not have the serif.
the rule of thirds is?
a simplified version of the golden ratio, one twice the size of the other, draw a grid and divide it into thirds, 6 horizontal 3 vertical
what is an attribute
a word or symbol placed within an opening tag that affect the behavior of an element (a characteristic of an element) <img src="img_girl.jpg"> its the src part
what is the base font size used in responsive design?
about 16px or 12 point
correct markup for linking to an external URL
absolute hyperlink, <a href=http://www.usu.edu/>USU</a>
analogous
across the color wheel from each other
what are the benefits of the grid layout
add order, creativity, harmony in presentation of information, allow an audience to predict where to find information, allow an audience to predict where to find information, which aids in the communication information, make it easier to add new content in a more consistent overall vision of the presentation, facilitate collaboration of design of a single solution without compromisiong the overall vision
ids
an id is a unique identifier for the page elements such as #wrapper
inline styles
an inline style is attached directly to the element to be styles
parts of an HTML link
anchor element <a> is used to identify strong of text or an image that serves as a hypertext link to another document, the href refrers to the url to which you are linking, link is the relationship between documents
what is a focal point
any element fo the page that draws the viewers attention
block level
begins a new line, might insert a space before or after, takes up full width
what are cool colors
blue, green, purple
what is wide site hierarchies
broken into more categories, fewer levels, fewer clicks to get to the bottom
inheritance
certain css properties are passed down to elements nested within a container element such as <div> or <body> element, which properties are inherited by default and which are not largely common sense, if you want to be sure you can consult the css refrence each seperate proprety page contains a summary table inclduing various details about that element including whether it is inherited or not
Selector Types
class and id selectors, descendant selectors, pseudo classes, pseudo elements
complementary
closer on the colorwheel to each other
Many cultures have different associations with and interpretations of _____
color
8 steps in website development
conceptualization, analysis, design, production, testing, launch, maintenance, evaluation
what is the span element used for in web design?
configure a specially formatted area displayed in line with other elements such as, within a paragraph. used to make inline elements, almost always used with a class attribute, apply a style to a small section of text, <span class="resort">text</span>, .resort {color:red;}
components of a typical element
container of the webpage, everything is kept in the container, <html lang="en"> </html>
various parts of common webpage anatomy
container or containing block, logo, navigation, content, footer, whitespace
<nav>
contains a section of navigation hyperlinks
<footer>
contains the footer content of a webpage, section, article, paragraph, or blockquote element
<header>
contains the headings of either webpage document or an area in the document such as section or article
<main>
contains the main content of a web page document, there should be only one main element per webpage
6 important things you can do to make sure users see and understand your site
create a visual hierarchy, use conventions, break up pages, make obvious what can't be clicked, minimize business and noise
How do you validate your css
cssvalidation serves as a quality assurance tool, code written incorrectly may render pages more slowly, strangely, or not at all. must validate your makrup before you publish the content on the web, w3c has a free markup validation service that will validate your css and check it for syntax errors
correct markup for linking to a page within a document
default top of page, used id attribute for all fragment identifiers. In headers <hi id="top">pacific trails, <a href="#top">return to top</a>
What are the steps for choosing the right font for your website?
define the feeling you are trying to evoke in your target audience (attitude and identity), narrow the field to a few good candidates, limit your selection, use at least two fonts but no more than 4, avoid combining 2 different serif fonts, or 2 san-serif fonts
what is the <div> element used for?
divide up webpages, provide structure, vitally important for CSS sheet, contains no styling except for adding a break before and after the text, defines divisions/sections, block level, can have many <p> tags in the div element, can not place a div inside paragraphs
Standard HTML element used in HTML5
doc type (<!DOCTYPE html>), HTML Element (<html lang="en">), meta element (<meta charset="utf-8">)
krugs first law of usability
dont make users think
why are HTML5 placeholder link used
during developments, when you write the <a> tag without any attributes (minus href)
what is white space
empty space between visual elements
attribute names
enclosed in quotes, the thing you are pulling in, the attribute name is what it actually is
what is the definition of a domain name
established web presence for your business or organization, chose domain name when selecting a company name, chose a domain name that relates to your established business presence
functions of web design
every page needs a name, the name should be prominent, located in the right place, and need to match the link and navigation system
selector type: id
example: #fun, name can only be used once on a page, <div id="wrapper">this is some text</p>
selector type: class
example: .fun, class=classification, <p class="fun">this is some text</p>, <blockquote class="fun">text</blockquote>
Selector type: element (type)
example: h1, id attribute and class attribute, both assign a name to the element
absolute hyperlink
external, indicate the absolute location of a resource on the web, protocol identifiers, host name, path to filename, <a href=http://www.usu.edu/>USU</a>
fixed width web page layouts
fixed at a particular size, giving more control of the page dimensions, wrapped in a div with a pixel based width and centered wtihin the body tag using margin:0, auto;
when approaching a project from a progressive enhancement perspective, what is the core focus of the content that everything builds upon
fostering the exchange of info is the primary focus when constructing any web interface, fundamentally about accessibility, ensures all content is available to anyone
Structural Layer
foundation of other layers, structure for the document, no instructions for the look, HTML5
how do you add and apply google web fonts
go to google fonts, select and appropriate font, click +select this font, click on one family selected, scroll down and locate the necessary html markup and css style, copy the html link into your head section on each of your pages, add the font family declaration (property and values) within the appropriate block
css format for a type font family
h2 { color:orange; font-family: impact, charcoal, sans-serif; } font-family:"1stchoice";"2ndchoice";"3rdchoice";
what is co located hosting
hosting a domain through another server
what are web font services
hostt= the fonts and keep up with the embedding nuances for you, pick up a font and grab a snippet of code and drip it into your site, no embeddings, like googlefonts
id attributes
identification, assignes a unique name to the element, can be paired with any tag element, but to idenfity and define an area on your page - use with div tag. name (value) can only be used once on a page
Specificty
if there are two or more conflicting css rules that point to the same element the browser follows some rules to determine which one is most specific and therefore wind out, think the specificity as a score/rank that determines which style declarations are ultimately applied to an element, use the rule set with the highest specificity, specificity is a common reason why your css-rules do not apply to some element although you think they should
what are there legal ramifications for?
if you are required to have an accessable website but do not have an accessible website
relative hyperlinks
internal, used with pointing to antoher document withing our own site, <a href="index.html">
What is asymmetrical balance?
involves objects of differing size, shapes, tones, or placement. despite differences they are reorganized so they they equalize the weight of the page, used often in web design, visually interesting
what is krugs second law of usability
it doesnt matter how many times i have to click, as long as each click is a mindless choice, following the scent of information
what is alignment
items on a page that are lined up with one another, chose alignment and use it on the whole page, type sits on an invisible line called the baseline
what is a wireframe used from?
its the blueprint of a single page of the website
Fluid webpage layout
liquid width, resizing and adapting to various window sizes, designed with percentage based widths
what is emphasis
make important element into a focal point, placement, continuance, isolation, contrast, proportion
class attributes
may be applied any number of elements on a page, whereas id is a unique attribute and should appear only once per page
what are the 6 classic color schemes
monochromatic, analogous, complementary, split complementary, triadic, tetradic
what is deep site hierarchies
more levels, requires more clicks, fewer options
What is the development philosophy of graceful degradation
newest browser approach, focus - making sure sites work with modern browsers, assumed old browsers will have inferior expirence, image over substance, undermines both content availability and accessibility
what is the development philosophy of progressive enhancement
not about the browser or version of html/css, a philosophy aimed at crafting experiences for users by giving access to content without technological restrictions
what is krugs 3rd law of usability
omit needless words get rid of half the words on each page, then get rid of whats left
what are the 4 principles used for content accessibility
percieveable, openable (interface components must be operatable), understandable, robust (works with current and future tech)
How do you group elements, if you want the same style of different elements on a webpage?
period followed by a class name without a space (.big), define a style that can be used over and over again to style many different elements, can assign more than one class element, can be used multiple times on a page, .big [font-size:120%:], <pclass="big">lorem ipsum...</p>, <li class="big">headted outdoor...</li>
in line
places within block level tags, context and meaning between tags
what is proximity
placing an object close together within a layer to create a focal point, relationship that items develop when they are close together, group items together that belong in a group
correct markup to clickable email link
point of contact link, <a href=mailto:[email protected]>
What are warm colors
red, orange, yellow
correct markup for linking to an internal file
relative hyperlink <a href="index.html">
what do the <body> </body> tags contain
required elements, almost all elements of a normal document flow, contains almost everything you see on screen
what is the name of the design theory that provides optimal viewing across a wide range of devices that is fluid, adaptive, reactive, and flexible
responsive web design
various items in a css rule set
selector, declaration block, declaration, property, value
if you are unable to make a page self-evident you should seek to make it
self explanatory
what is absolute size
sets the text to a specified size, does not allow user to change text size in browsers, bad for accessibility, useful when the physical size of the output is known
5 elements of persistent (global) navigation
site Id (this is going to be the company logo), sections (these are the main overall categories or pages of your site), utilities (utilities are quick links to important pages that may not exist in the overall flow of the regular site) a way home (a dedicated link in either the main navigation or subsequent utilities to ensure users can reset their journey if they need to), search (a means to search your website in case the user does not want to use the navigation)
what is relative size
size relative to surrounding elements, allows a user to change the text size in browser, larger or smaller relative to parent object
embracing the fluidity of the web means starting by flexibily ______, use a combination of percent and em for the most responsive approach
sizing fonts
what does it mean to design a self evident site
so that just by looking at it the averagve user will know what it is and how to use it. in other, they'll "get it" without having to think about it.
what is an ftp client used for in web publishing?
software that allows you to access and explore the server where your website is hosted directly on your computer
class attributes
specified on or more class names for an element, point to class in a style sheet, can be sued to make changes to html elements with a specified class
what is the <hr> element used for?
stand alone tag, horiziontal rule, used to seperate content in html page
what is the <br> element used for>
stand alone tag, replicated what happens when you hit the carriage return tab on a typewriter, if you want to signify the start of a new like rather than a new paragraph
correct markup used to insert a comment
starts with an <! and ends with a -->
how do you calculate relative type size? (Marcotte formula)
target / context = result, base font size = 100% (body=12px or 12pt), if you want 40px h l (40/16=2.5em)
know the various functions of web navigation
tell a user what's on your site and how to use it, but good navigation gives the user the confidence in the people who built the site itself, which translated to a positive image of your brand
An External Style Sheet is a
text document, separate from HTML
what grid uses the golden ratio
the grid theory, composition divided by lines proportionate to this ratio are considered to be aesthetically pleasing
what part of the html doc includes the external stylesheet
the head section
what does the term fault tolerance mean?
the systems ability to continue to operate when it encounters an unexpected error, has been basic component of html and css from the beginning, as prescribed by the specifications of the languages, browsers must ignore anything they do not understand, makes it possible to ensure all content delivered on the web is accessable and availible to everyone at all times
what is the cascade rule of precendence
the term cascading style sheet refers to more than one style sheer can be applied to a single web page, if two or more rules for the same property are applied to the same element, the cascade order and other rules determine which rules take precedence
the definition of html semantics
the various elements and attributes used on a page that provide additional meaning and context to the written words
what is unity
the way in which different elements of a composition interact with one another, a unified layout is on that works as a whole rather than being identifies as seperate pieces, unity must exist on each page throughout the site, proximity and repititoin help achieve unity
classes, attribute selector, or pseudo-class selector
this category includes .classes, [attributes] and pseudo-classes such as :hover, :focus, etc
an element or pseudo element
this category includes element name and pseudo-elements, such as h l, div, :before, and :after
what is the definition of a qr code
two dimensional matrix barcodes that can hold thousands of alphanumerical characters
what is the definition of a url
uniform resource locator, the actual location of a resource on the web
when using embedded fonts...
use only free commerical-use fonts and always read the license agreement on the fonts you employ
what is repetition
visual elements that have the same purpose or level of importance should look the same, rhythm and consistency, repeating colors, style, illustrations, format, layout, navigation
what is contrast
visual elements with a different purpose or level of importance should appear different, more important elements should be more prominent than less important elements, contrasting elements guide your eyes, create a hierarchy of info, enable skimming of info
3 facts about real-world web use
we don't read web pages, we scan them. since most of us are in a hurry, we don't make optimal choices - we just satisfice, we don't figure things out we muddle
what questions do you ask when creating a statement of website purpose and scope
who is the target audience, how can i tailor the site to reach the audience, what are the goals for the site, how will i gather the information, what are my sources for media content, what is my budget, what is my timeline, who is my project team, how often should the site be updated, who will upadte the site, additional questions
what is a link dominant user
will almost always browse first, searching only when they've run out of likely links to click or when they have gotten sufficiently frustrated by the site
what is a search dominant user
will almost always look for a search box as soon as they enter a site
what are embedded fonts
with css3, web designers can use whatever font the like, including the font file on your webserver and it will automatically download to the user when needed
how do you identify the domain name
www.yoursite.com, its the your site part
what is dedicated hosting?
you buy and make and host the domain yourself