Section 1
Preview this deck
Web Technology Lead
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (106)
Section 1
(50 cards)
Web Technology Lead
Determines technologies (database, Content Management System (CMS), Development environment (Notepad++, netBeans, notepad, BlueJ), Servers (capacity size, bandwidth, disk space, memory, backups, operating system), languages, platforms and framworks) Considerations
Sample Output Phrase Element
<samp> </samp>
Code Phrase Element
<code> </code>
Client/Server Model
Refers to computers joined by a network. Describes a relationship between two computer programs: the client and the server The client requests some type of service from the server The server fulfills the request and transmits the results to the client over a network. Ex: The Internet
Abbreviation Phrase Element
<abbr> </abbr>
Lists
Ordered Unordered Description
Title
<title> </title> Text that shows up in the title's browser bar
Emphasis Phrase Element
<em> </em>
Description List
<dl> = ? <dt> </dt> Description Term <dd> </dd> Description Description </dl> Ex: Vocabulary Sheet
Strong text Phrase Element
<strong> </strong>
Who owns the Internet?
No single person runs it. Different companies are providers of the Internet.
Web Project Manager
Oversees project Manages schedule Manages costs Manages what needs to be done, when it needs to be done, and who does them Does not do any of the work on the actual project Communicates with the sponsor Helps with communication between team members and departments
Fine print Phrase Element
<small> </small>
Subtext Phrase Element
<sub> </sub>
Bold Phrase Element
<b> </b>
Difference between web design and web developers
Web Designers: use various design programs such as Adobe Photoshop to create the layout and other visual elements of the website Web Developers: use HTML, CSS, Javascript, PHP, and other programming languages to bring life to the design files.
Site Production Lead
Constructs the website Uses wireframes as a guide Constructs templates Writes HTML Writes CSS Adds content Adds graphics and media
Tag
Element is comprised of this 2 kinds of this; an opening and a closing on Ex: <html> </html>
Variable output Phrase Element
<var> </var>
Site Editor
Site copywriter Content domain expert Responsible for SEO Long-term role
SEO
Search Engine Optimization
Identifies user text to be typed; usually a fixed-space font Phrase Element
<kbd> </kbd>
Purpose of website
Service-based business website: to convince website visitors that they should become customers of the service company.
Web Client
Connected to Internet when needed Runs web browser software, like Internet Explorer or Firefox Uses HTTP Requests web pages from a web server Receives web pages and associated files from a web server
Quotation mark
"
Cite Phrase Element
<cite> </cite>
Phrase Elements
Indicate the context and meaning of the text between the container tags Displayed directly in line with the text and can apply to either a section of text or even a single character of text
Stakeholder/Sponsor
Client (internal or external) Representative of the client States requirements Provides content Approves budget
Blockquote
<blockquote> </blockquote> Text that is quoted elsewhere
What things should we consider when designing the Client/Server Model?
Security Speed: Connection, Device Used, Server Used Physical size of the webpage: including text and multimedia that should be optimized for web through compression Page refreshes when user clicks something: desktop app, multiple devices, screen size
Unordered List
Unnumbered list; bullet points <ul> <li> </li> </ul>
Network
Consists of 2 or more computers connected for the purpose of communicating and sharing resources.
Usability Lead
User research Determines uses experience Develops website's persona Usability standards Evaluates the outcomes
Ways in which websites can use accessibility.
Use of colors Ability to resize fonts Allowing the website to be resized Screen reader Functional with a keyboard
Web Server
Continually connected to Internet Runs web server software (like Apache or Microsoft Internet Information Server) Uses HTTP Receives a request for the web page Responds to the request and transmits the status code, web page, and associated files
What are the structural elements in HTML?
Header Nav Main Footer
Superscrit text Phrase Element
<sup> </sup>
Italicized Phrase Element
<i> </i>
HTML5
Current HTML version
Line break
<br/> Makes text go to next line
Horizontal Rule
<hr/> Adds a horizontal line on the page
Art Director
Visual elements that need to work together in order to create a cohesive whole Fonts, Colors, Pictures, Multimedia
Ordered List
<ol> <li> </li> <ol> <li type = "a"> //will make it be a, b, c, etc </ol> </ol> The browser will automatically number your list 1, 2, 3, etc.
Why do we care about accessibility?
Equal access for everyone It's the right thing to do Government laws for accessibility Direct impact on business: Losing users, sales, money, etc.
Things that go in the Heading
Meta information Information about the webpage to help the browser display it
Information Architect
Basic website structure Basic page layouts Site map Wireframes: mock up of the page structure Consistent structure Navigation strategy Consistent wording
Paragraph
<p> </p> Can be many lines of text Basic web page content
Definition Phrase Element
<dfn> </dfn>
Element
Tells the browser something about the construction of a web page Has predefined meanings Building block for a web page
Highlighted Phrase Element
<mark> </mark>
Section 2
(50 cards)
Load Time
Amount of time a web page visitor is aware of waiting while your page is loading
RGB Colors
Used on monitors Additive scheme Light Red, green, blue Combining all colors gives white
Shade
Adds black
Random
Offers no clear path through the site No clear home page and no discernible structure Not as common as the other two organization strategies Usually found on artistic sites or sites that strive to be different and original
White Space
Placing blank space in areas around blocks of text increases the readability of the page
Hexadecimal: base 16
#XXXXXX 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F There are 166 possibilities (around 16,000,000) Ex: #FF0000 (bright red) #00FF00 (bright green) #000000 (black) #FFFFFF (white) #888888 (gray) #DEDEDE (light gray) #F2F2F2 (dark gray)
Linear
Useful when the purpose of a website or series of pages within a site is to provide a tutorial, tour, or presentation that needs to be viewed sequentially Pages are viewed one after another
Triadic
Three colors that are equidistant on the color wheel
Tone
Adds gray
Site Map
Type of navigation that provides an outline of the organization of the website with hyperlinks to each major page
Colors on CSS
Each rule contains a Selector and a Declaration property and value The Selector specifies which elements the rule applies to The Declaration is contained within curly brackets. There can be multiple properties inside the rule, but they need to be separated with a semi-color (;). Ex: body {color: blue} // body(selector), color(property), blue(value)
Image
<img src= "URL of image to display" alt= "Text that describes image" /> Ex: <img src= "http://www.css.edu/CIS/faculty.jpg" alt= "2017 CIS Faculty" /> src: source, finds image URL of image to display alt: alternate text, describes image
Tint
Adds white
Proximity
Group like-topics/sections together
Analogous
Select a main color and the two colors that are adjacent to it on the color wheel
Complementary
Consists of 2 colors that are opposite each other on the color wheel
Tetradic
Consists of 4 colors which are 2 complementary pairs
HTML Syntax Validation
Provides you with quick self-assessment You can prove that your code uses correct syntax It serves as a quality assurance tool Invalid code may cause browsers to render the pages slower than otherwise
Hue
Base color
Links stylesheet to a webpage
CSS is for style whereas HTML is for structure Link to CSS from any webpage name document .css Ex: Style.css
Fluid Layout
Liquid Layout Content configured with percentage values for widths, often taking up 100% of the browser viewport Content will flow to fill whatever size browser window is used to display it
Above the Fold
Technique borrowed from newspaper industry Use technique to attract visitors and to keep them on your web pages Arrange interesting content above the fold For 1024x768, the above the fold is usually 600 pixels
Less than sign
<
Long dash
—
Breadcrumb
Navigation that indicates the path of web pages a visitor has viewed during the current session Usually set up like: Home > Tours > Half-Day > Europe
Dynamic
Type of navigation that provides a way to offer many choices to visitors while at the same time avoid overwhelming them. Menu items are dynamically displayed as appropriate
CSS Format
Stylesheet format: ELEMENT { ______: ________; ______: ________; } Ex: p { color: #880000; background-color: blue; } h3 { color: #yellow; }
Headings
Text at the top of the page or sections of a page. This text is usually styled differently and/or larger Usually one line of text h1-h6 h1 largest <h1> </h1>
Repetition
Repeats one or more components throughout the page; ties the work together Colors Fonts Shapes
RGB
rgb(x, x, x) x: 0-255
Monochromatic
Consists of shades, tints, or tones of the same color
Copyright symbol
©
Anchor Element
Hyperlink tag Links to another web page <a> </a> Ex: <a href="URL" target="_blank"> LINK TEXT </a>
Fixed Layout
Ice design Content has a fixed width and may hug the left margin
Types of Design Principles
Repetition Contrast Proximity Alignment
Split Complementary
Comprised of a main color, the color opposite it on the color wheel and 2 colors adjacent to the complement
Alignment
Organizes the page so that each element placed has some alignment (vertical or horizontal) with another element on the page
Background images CSS
background-image: url(path to image); background-repeat: repeat-x; background-position: right; Ex: body { color: #880000; background-image: url(css.jpg); background-repeat: repeat-x; }
Wireframes
Sketch or diagram of a webpage that shows the structure of basic page elements, such as header, nav, content area, and footer Used as part of the design process to experiment with various page layouts, develop the structure and navigation of the site, and provide a basis for communication among project members
Hierarchical
Characterized by a clearly defined home page with links to major site sections The home page plus the first level of pages in a hierarchical site map typically indicates the hyperlinks that will be displayed on the main navigation bar of each web page within the website Site design needs to be organized into fewer, easily managed topics or units of information (CHUNKING) Three-click-rule: web page visitor should be able to get to any page on your site with a maximum of three hyperlinks
CMYK color scheme
Used for paint/ink C: Cyan: Blue M: Magenta: Red Y: Yellow K: Black Subtractive scheme: white light comes down, the color absorbs certain colors, the colors we see are the ones reflected off of the color. Combining all colors gives black.
Ampersand
&
Greater than sign
>
Vertical Bar
|
Navigation Bars
Type of navigation that makes it obvious to website users where they are and where they can go next
Types of organization
Hierarchical Linear Random
Nonbreaking space
Contrast
Emphasizes the differences between page elements in order to make the design interesting and direct attention Adds interest Makes things stand out If website was all white or using only dark colors, it wouldn't stand out and would be boring. Ex: CSS's use of blue and gold has enough contrast to make it interesting and stand out.
Site Search Feature
Type of navigation that helps visitors find information that is not apparent from the navigation or site map
Right single quote
’
Section 3
(6 cards)