CS 2033 Final Exam
jQuery
jQuery is a JavaScript-based library used to simplify the code. It's almost like another language but it ties in closely with JS. Regular JS is now called vanilla JS. jQuery contains various shortcuts and built-in functions that help us to leave out redundant code. Easy to access elements by tag, class, and ID with jQuery. ex. $(".theClass") - Similar to getElementsByClassName() $("#theID") - Similar to getElementById() $("tag") - Similar to getElementsByTagName()
What goes in the head section?
Head <head></head> Meta data, setting title, linking external files, internal CSS or JS, etc.
how many pixels is a favicon normally?
16x16 pixels
What is interpolation?
A mathematical method of estimating an unknown value using the known values on either side of the unknown. In simple terms, interpolation means averaging the colours of the neighbouring pixels. This may work well if there is a consistent gradient between the colours but this isn't often the case.
what is a wiki?
A page or collection of Web pages that can be viewed and modified by anybody with a Web browser and Internet access ex. Wikipedia (the most popular wiki) Wikis are special kinds of CMSs. Collaboration is key with wikis. Many users contribute to the website's content. Wiki means "quick" in Hawaiian. Term quick in Hawaiian makes sense because you involve many people and can get a lot of work done with many people really quickly as opposed to one person making all this stuff They are seen as quick and simple because the content is added by a community rather than one person.
what is a rule set?
A rule-set is a group of styles for a certain selector or selectors. There can be any number of styles within a rule-set (even 1 or 0!)
photo filter
Apply a cooling, warming, or other colour filter to the image. Similar to Instagram filters.
bootstrap components looked at in class?
Navbar Navbars (navigation bars) are easy to create in Bootstrap. This includes dropdown menus. They are easy to customize using various built-in nav styles. Modal windows Pop up over the main website Often a translucent tint covers the site and this window appears above it all. Draws immediate attention to info contained in the window. Figures Images and other media may need captions underneath them. Bootstrap provides CSS classes for easily creating figures and captions. Carousel Clean image slideshow. Images slide in and out with smooth transitions. Often have arrows and/or line indicators to change images manually. requires jQuery, which is another library similar to Bootstrap - they provide lots of pre-built functions and features to save time for website developers!
Navigation Menu tips in terms of responsiveness?
Navigation menu Navigation menus should become vertical on smaller screens. These often get added to an expandable list that can be toggled open and closed. Use JS to switch between open and closed classes on clicking a button.
what is a pseudo-class?
Pseudo-classes are advanced CSS selectors that apply to certain states or actions on elements. i.e. hovering the cursor over an element They are specified with a colon : followed by a pseudo-class type. i.e. :hover Hover means the mouse is over something, which means the element is being covered. So this state is active when the mouse is over the button so we want something to happen to it. Apply pseudo-classes to elements by tag, class, or ID, or any combination. ex. a:hover { } .link:hover { } #title:hover { } ul li:hover { } There are lots of pseudo-classes besides :hover. :required :focus :visited :active :enabled and many more
what is pixel manipulation?
Remember images are just grids of individual coloured cells. These colours can be analyzed and changed to other colours. Can be done on the entire image or on a specific region (selection). For example, say we want to darken an image. Recall that low colour values are darker (close to 0). The algorithm looks at each pixel colour individually and decreases its colour value in all 3 channels.
what is the parent-child relationship in CSS?
Remember that divs and many other HTML elements can be nested within one another. Important for creating layouts. This relationship is known as parent-child, where the parent is the container / outer element and the child is the inner element.
display style in relation to placing things sequentially?
The display style affects how elements are shown sequentially. There are several display options. The most common ones are: Block: takes up the entire row Inline-block: placed side by side if fits Table-cell: placed side by side and resizes to fit in a row Margins work with inline-block. Not so much with table-cell, although you can nest divs within and add margins that way.
so we know some common forms of validation. how do we actually use JS to perform the validations?
The first step is to get the user's input in the form as a variable. Then we can examine it for validation. Access an input field normally: get element(s) by ID/class/tag. Then use dot notation to retrieve the value of that element. For text, password, and textarea, use element.value For radio buttons and checkboxes, use element.checked For select dropdown menus, use element.selectedIndex to get the array index and element.options to get the array of options. var opts = dd.options; var si = dd.selectedIndex; var sel = opts[si]; alert(sel.index + ", " + sel.text);
Parallax simple form
The simplest is no movement on the background while the foreground moves with the scrolling. This simple form uses just CSS. Add an image to an element using the CSS background-image style. The background-attachment style indicates whether the image scrolls. .myclass { width:100%; height:300px; background-image: url('sky.jpg'); background-attachment: fixed; }
what type of editor is bracket?
a plain text editor
Vector mask
a resolution independent path that clips out the contents of the layer can be used to select something which you want to move. like moon example for ppt 3 slide 40
how are most image effects done?
often by pixel manipulation
what are the types of selectors?
Marquee Tools Lasso Tools Quick Selection Tool Magic Wand Tool
TRBL
Top, right, bottom, and left (TRBL) can be set, but their behavior depends on the position type. No effect on static position. Think of this as a Cartesian plane grid, with the top-left corner being (0,0) in terms of (left,top). You can start from any corner though! Use either T or B, and either L or R. For ex. If you go from bottom left (denoted 0,0) then you can say if you to top right corner, you can say bottom 100 left 100. this is a bit weird but it says where you came from. These quantities are measured in pixels or percent ect.
what is e-commerce?
e-commerce (also written as eCommerce) is online vending. Selling or purchasing anything online counts as e-commerce. This includes ordering a pizza from the Pizza Pizza website/app or a meal through Uber Eats or JustEat. eBay and Amazon were the main pioneers for e-commerce, and now many businesses use it in some way. Amazon began with Jeff Bezos selling a book from his garage over the Internet. That started a revolutionary company that now generates hundreds of billions of dollars through global purchases.
Alert JS command
ex. alert("Hello world"); alert(______) will open a popup window to display the given text. Alert is very alarming and generally is not to used when making website, but good to use when debugging your own code.
document JS command
ex. document.write("Hello world"); document.write(______) will add the given text directly in the webpage. Same with document, although not as forward
which areas are good for using selectors to make sure they are correct?
high contrast colour areas! if you have similar colours, can be done but wont be as accurate. not realistic, but is reality. lots of research done in this area.
Content-Aware Move Tool
- Content-Aware Move Tool is used to move something in a picture (for ex. move mole from left to right cheek). Both of these (content-aware and patch tool) allow you to draw a selection around the item to move or remove. Both use nearby pixel colours to try to fill in the gaps
what is the best HTML element?
- Div is the best element to use because nothing associated with it from the start, its like an empty panel. One element that hasn't been taught yet is called the div (short for division/divider). This is essentially a panel that may contain other divs or different HTML elements, used for creating layouts without a table. When in doubt, use a div! can apply styles to our divs to form a layout using css
Healing Brush Tool
- Healing Brush Tool requires you to choose a good sample with which it will cover the blemish you select.
Patch Tool
- Patch Tool is typically used to remove something from a picture.
Spot Healing Brush Tool
- Spot Healing Brush Tool picks a sample automatically based on the pixel colours around the blemish.
RGB?
3 bands x 8 bits = 24bits/pixel
CMYK?
4 bands x 8 bits = 32 bits/pixel
how many options are there in terms of decimation/interpolation types?
6, dont have to know types but here they are anyways: nearest neighbor bi linear bi cubic (4 other variations of this)
each individual band is an?
8 bit grayscale image. a colour image is a composite (or sum) made of several grayscale bands.
what does the shell for a website look like?
<!doctype html> <html> <head></head> <body></body> </html>
what are some common body elements?
<h1>Largest header</h1> <h6>Smallest header</h6> <p>Paragraph of text</p> <a href='index.html'>Link</a> <img src='picnic.jpg'/> <b>Bold text</b> <i>Italicized text</i> <ul> creates an unordered list. <ol> creates an ordered list. <li> adds a list item to a <ul> or <ol> - for ex. <ol> <li>Apples<li> <li>Grapes<li> </ol> <table> creates a table. <tr> creates a row in the table. <th> creates a header/title cell. <td> creates a data cell.
how do you code a favicon in?
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> Notice the image is .ico format. Photoshop plugins to save .ico www.favicon.cc This is meta data about the page, so it goes in the head section.
media queries
A CSS3 feature that detects the user's type of screen and sizes the output accordingly CSS includes media queries which allow us to specify which files load depending on the screen size (or other properties) without using JS. Add media queries as attributes within the HTML <link> tag for loading the CSS files. <link rel="stylesheet" href="styles.css" media="(max-width: 600px)"> Set the min-width and/or max-width that apply to this stylesheet. You may also specify the screen's orientation (landscape for wider or portrait for taller). The CSS media queries also provide a third way for us to make our sites responsive. In this approach, we load the CSS files the way we did before, without any media queries in the HTML. Instead, media queries are within the stylesheet(s). These media queries contain rule-sets that apply to the specified screen properties. @media (min-width: 600px) { p, .title { color:red; width:300px; } }
what is a basic, but clunky approach to get responsiveness for screen sizes?
A basic approach different sizes is to use JS to get the browser size and load the CSS accordingly. To load a CSS file from within the JS conditionals, use the HTML line to load a CSS file within the JS function document.write() This way is a bit clunky. Some potential problems with loading stylesheets this way. - Disabled JavaScript - would result in no styles or only default styles loaded - Resizing browser - loads files at initial window size - A lot of code - consider separate pages (similar to internal CSS issues)
how many layers does a clipping mask require?
A clipping mask requires 2+ layers: One mask background layer. The texture to show through. One or more foreground layers. The visible shape outlines on which the texture will appear. background layer must be immediately on top of the foreground layer(s) so that the letters will only show what appears over them in the image. text will be hidden but that is fine! once you create the clipping mask there will be an arrow to denote the relationship between the layers.
Filepath types and descriptions?
Absolute filepaths point directly to a file using a full path to its location. Relative filepaths indicate how to get to the file relative to the HTML file containing that link. Use relative paths exclusively! This way, they will work on your computer AND on the server because the relative location does not change. Absolute location changes when you upload, so do not use them! examples: C:/Users/tomsmith/Desktop/website/images/apple.jpg (absolute path) Works on Tom Smith's laptop Does NOT work ANYWHERE else! images/apple.jpg (relative path) Works on Tom Smith's laptop Works on server too :)
Accessibility
Accessibility Allowing people with disabilities or impairments to use the website. For example, those with colour blindness or limited hand control should be able to use websites. Blind users depend on screen readers to read the content of websites aloud. Deaf users depend on text transcriptions of audio/video. Other disabilities may mean other tools or appliances are required.
what is the lasso tool?
Allows you to make selections from drawing segments in freeform. need a steady hand
what are tips for alt text content in accessibility?
Alternate text is what shows up when an image doesn't load. Screen readers also read this. This is good practice in general - but now even more so!
what is child selection?
Another approach is selecting all the children of parent elements. i.e. all paragraphs within divs. It is easy to select specific children. Write the parent selector, then a space, and the child selector. Selectors can be any combination of types (tag, class, or ID). ex. #wrapper p { } div .red { } ul li.link { } They can continue with multiple levels of children. ex. i.e. #main div ul.nav li p { } We can also use the comma grouping method combined with these child selectors. ex. i.e. ul.nav li, div p, #buttons { }
what is a function in JS?
Another common structure in code is a function. A function is a process that can be executed at any time, and any number of times. Great for routine processes that need to be used multiple times. ex. function myFunction() { // code here. // code here. } The above code creates a function but does not actually call (run) the function. Calling it looks like this: myFunction();
What statement do you use in SQL to remove existing entries in a database table?
Another commonly used database statement is DELETE. It is used to remove an entry (or entries) from a table. Note that this is permanent! DELETE FROM tableName WHERE condition; Examples: DELETE FROM Grades WHERE StudentID = "250174834"; DELETE FROM Grades WHERE Grade < 70; Note that there could be multiple entries deleted at once. - It depends on the conditional used.
what is a loop in JS?
Another special code structure is the loop. This is used to run code repeatedly in a row. There are two main types of loops: while-loop and for-loop but we will focus on the for-loop. They contain 3 parts: variable initialization, condition, increment. ex. for (x = 0; x < 5; x++) { alert(x); } They also work great with arrays. data = [9, 4, 7, 3]; for (x = 0; x < data.length; x++) { alert(data[x]); } - x++ means you are incrementing by 1, so going up by 1. easier way of writing this.
What is an artifact?
Artifacts are distortions due to missing pixels in an image.
what are tips for audio and video in accessibility?
Audio If you have audio, transcribe it to text and provide the text in a file. Video If you have videos, provide closed captioning at least as an available option for deaf viewers.
what are the benefits of JS?
Benefits of JavaScript: User input (mouse, keyboard, etc.) Modify HTML elements and CSS dynamically (change styles, etc.) Analyze data like user input (validating form input, etc.) Change content based on specific conditions (different message for students vs. teachers, etc.) Advanced animations / transitions. Change classes or IDs.
What is bitmapped imaging?
Bitmapped graphics are composed of grids of pixel cells. Each pixel has exactly one colour. Cameras convert analog scenes into digital pictures by performing sampling and quantizing. Resolution denotes how big the pixels are, usually measured in PPI.
Masks are shown in black and white (and gray). What do these regions say about the mask?
Black = hidden regions White = visible regions Gray = controls opacity (partially visible regions) similar to rgb channels!
what goes in the body section?
Body <body></body> The main part of the website.
What is Bootstrap?
Bootstrap is a library for website development. Many pre-made modules that are free to use for anyone making a website. Saves us time having to write all the code for everything in a website
border styles have how many parts?
Border styles have 3 parts: Colour Width Line type (solid, dotted, etc.)
of the 3 options to make your website responsive, compare.
Both media query options are better than the JavaScript option. The option in the HTML forces you to keep separate, organized files. The option in the stylesheets allows for more freedom with files. This is both a blessing and a curse. - Too much freedom can result in disorganized code.
brightness/contrast
Brightness/Contrast Brightness is simple: how dark or light the image is. Contrast is how different the brightness is throughout various parts of the image. Emphasizes the extremes (darks and lights)
How can CMS help create distinct team members?
By splitting up the code and content, these websites can have distinct team members. Editors - writing/creating content only. Programmers - making the layout and handling other functional modules. Neither one has to deal with the other since they are completely separated.
popular CMS platforms?
CMS platforms: WordPress (most popular one) Joomla! Drupal Cascade (UWO uses this one) Big companies may create their own CMS instead of using one of these.
in printing, which colour channel mode is used?
CMYK? stands for cyan, magenta, yellow and black
What statement do you use in SQL to make a new table within a database?
CREATE is used to make a new table within a database. Defined with column names and data types (integers, strings, dates, etc.) Should have a primary key column: a unique value to identify each entry.
what if we want to style one specific type of input field at once?
CSS allows us to select based on attribute values as well! Remember most input types are specified by the type attribute. i.e. <input type="text" /> i.e. <input type="radio" /> We can specify an attribute value in square brackets [ ] to select that type for a CSS selector. ex. input[type=text] { border: solid 2px #FA4949 } input[type=submit] { width: 200px; } these can also be incorporated with group selectors as we see above, with the use of commas to separate the items
In addition to the title and favicon, the header often links to _____
CSS or Javascript in external format or internal inline coding
CSV
CSV is a slightly better format. It's essentially the same as TXT but values are separated by commas. CSV: Comma Separated Values Values that have spaces are easier to handle now since the commas indicate where each value ends and begins. check slide 22 on ppt 11 for comparison
what is cart abandonment?
Cart abandonment is an issue that e-commerce vendors hate! This is when users begin adding items to their cart and then leave the site without placing an order. There are marketing articles written about how to avoid the dreaded "abandoned cart" dilemma.
what is CSS?
Cascading Style Sheets CSS is used only to style websites. This is the standard for styling and goes hand in hand with HTML. Used for layouts/positioning of elements and their appearance, like colour, font colour, border, etc.
how do we perform validation step to see if user has left a textbox empty?
Checking if a textbox is left empty. Compare the text to "" (quotation marks with nothing in between) if (name == "") { // Empty. } else { // Not empty. }
how do we perform validation step to see if user has typed enough characters?
Checking if the entered text is long enough (in characters). Examine the number of characters in the string variable using .length if (name.length < 5) { // Too short. } else { // Long enough. }
class selectors
Class selectors apply to all elements that are given the specified class. HTML elements can be given a class as an attribute. i.e. <div class='myclass'> Classes can be applied to any number of elements and any combination of element types. If you set the name to myclass, any element with the same class will all have the same styles from the CSS rule class. So this is how you end up making some specific text green and have the rest red by the div tag on the last slide. These selectors in CSS are labelled with a period (.) followed by the specific class name it applies to. i.e. .myclass, .anotherclass Ensure the class name is spelled identical in HTML and CSS. i.e. <div class='my-class'> will not match the selector .myclass ex. .my-class { position: relative; } .nav { margin: 5px; color: darkblue; width: 100%; height: 50px; }
what are tips for colours in accessibility?
Clear colours Colour blindness is common, affecting nearly 5% of people. Use crisp colours with high contrast (i.e. black text on white background or vice versa). Be careful with using colour-specific phrases.
what is client side used for?
Client side is used for: Interactivity / animations. Non-secure form processing. Receiving user input in real-time. Loading or changing elements that appear on a user's device.
what is a clipping mask?
Clipping masks link a background layer to foreground layers, such that the background texture is shown only in the regions defined by the foreground. "Shining the picture through text to fill the shapes" is an example!
Column structure tips in terms of responsiveness?
Column structure 1 column is best on small screens 2 columns could fit on tablets Resize your columns accordingly If you have 3 columns across a normal screen, make them wider on mobiles so they become single columns.
what are some common layout style properties?
Common layout style properties: position TRBL display margin float - Float is used if you want something to be forced to a side; works well if you want text to wrap around an image on a site. Used to stop right in line with images, and then continue normal text on the next line. width / height
binary files
Companies may want private, proprietary file formats. This way the files are only editable through the company's software. These are binary files because they use binary codes to store the content rather than human-readable text. This coding is used so that only your company can present this info and that you cant just access it everywhere. what powerpoint files load up as in notepad
what are conditionals in JS?
Conditionals are a foundational structure in code. Portions of code will only execute when specific conditions are met. For example, check if a number is less than 10 or if a flag is set to True The if- or if-else statement is used for conditionals in JavaScript. ex. if (condition) { // do stuff; } The condition can be anything that boils down to a True or False value. x > 5 (greater than) x == 1 (note the double equal signs) course != "CS2033" (not equal) One equal sign assigns that value to the item, you need a double equal sign in order to meet the conditions for the if statement. We can add multiple conditionals using the else if operator. ex. if (x == 1) { // do stuff. } else if (x == 2) { // do different stuff. } else if (x == 3) { // do other different stuff. } The else operator is a catch-all for any cases not yet accounted for. if (x == 1) { // do stuff. } else if (x == 2) { // do different stuff. } else { // do other different stuff. } putting it all together example: Suppose we received the user's age online and then checked if the user was allowed to buy booze... if (age >= 19) { canDrink = true; } else { canDrink = false; }
can conditionals be composed on multiple sub-conditions that all have to be met?
Conditionals might be composed of multiple sub-conditions that all have to be met. We combine them with the && (and) operator. ex. if (age >= 19 && pregnant != true) { canDrink = true; } else { canDrink = false; }
what is a CMS?
Content Management Systems (CMS) are useful website platforms. They make it easy to create and maintain websites without having to know any code. The content is separated from the code so website content can be updated in a visual interface. Consider a large website like Wikipedia.org or msn.com. Imagine how time consuming and complicated it would be to update content if it was within the code. Instead, the code and content are split up into separate components.
how does CMS work?
Content is typically saved into a database or external files. The code is used for the website layout and template. The code also loads the content from the database. - Note that HTML cannot load from a file or database; use PHP or ASP. "Code without content" - You need server side language to load the content from a data base or external file. You cant load straight from HTML.
corners can be?
Corners can be square or rounded. Rounding values are usually in px. If you use really high rounding values, you can create a circle If width = height and the rounding value is at least half of that width.
bootstrap layouts for rows and columns
Create a div with class: row. Within a row, add cells based on the size you desire (1 is small, 12 is large). Cell classes are: col-lg-1, col-lg-2, col-lg-3, col-lg-4, ..., col-lg-12. Sum of cell sizes in a row must = 12. You can also omit the size value and they will try to auto-size it to fill the available space. These blocks were designed to work on all different screen sizes... They are responsive! For full control over the responsiveness, they provide 4 size classes: xs, sm, md, and lg.
What statement do you use in SQL to remove a table from a database?
DROP is used to remove a whole table from a database.
what are databases used for?
Databases are used a lot for storing website information: - Account information (username, email, password, etc.) - Social media posts - CMS content - e-commerce products/inventory - Other dynamic-content sites
how are databases made up?
Databases contain tables, each with a specific focus or purpose. This way a database can contain several distinct tables of data. Table consist of columns and rows: - Rows are the individual entries - Columns are the fields or properties being stored for each entry ex. on slide 7 PPT 11
what are some ways we can place elements side by side?
Display: block, inline-block, table-cell Float: left or right Position: absolute Within a relative position element Usually not the best option
how should we validate/process our web forms?
Do you need to store the form data in a file or database? Are there private data like PINs or passwords? Server side Do you need it to run in real time? Client side
how would you use dot notation as an event listener?
Dot notation is the other method for creating event listeners. This can go in internal or external JavaScript code (after the element is created!) ex. box.addEventListener("click", function() { this.style.width = "300px" });
Downsampling
Downsampling = making it smaller. Pixels are removed via decimation
what are event handlers in JS?
Events are a huge part of JS! - User input events - Mouse-based - Keyboard-based - Load event - Timer events
what are event listeners?
Events are handled with event listeners applied to HTML elements. Event listeners are like stimuli always listening for certain events to occur. When an awaited event occurs, the listener detects it and triggers the event's code. There are two main ways to add event listeners to elements. - Inline: attach the event listener as an attribute in the HTML element tag. - Dot Notation: use the addEventListener function as a property on the element using dot notation.
what does examining a character mean in terms of JS in form validation?
Examining a character usually means comparing it to another value or a range of values. One option is to get the value directly from the string at position i and use that value for the analysis. ex. var char = msg[i]; if (char == "W") { }
What are some other formats for storing data externally? other than databases
External files - TXT - CSV - Binary - JSON - XML some files as backups if databases not usable
how do you use JS to change a style?
First, we must select/get the HTML element(s) in JS. Several ways to do this: ex. document.getElementById(id); document.getElementsByTagName(tag); document.getElementsByClassName(class); Bottom two element is plural, because they are not unique and there will be more than one element. The ID element getter is typically the best one to use. Getting elements by tag or class may be helpful in specific cases in which multiple elements need to be accessed at once. Note the difference between singular and plural element(s). Suppose you have an HTML div with the ID "mydiv". Access that element in JS with: document.getElementById("mydiv"); Simplify the code by storing this element in a variable. var md = document.getElementById("mydiv"); Now the styles can be modified. JS uses dot notation for accessing levels of properties. style is a property in HTML elements. CSS styles are properties within style. Type the element (dot) style (dot), then a style property to access it. i.e. md.style.width After specifying a style, simply use an equal sign and set the new value in quotation marks. md.style.width = "100px"; md.style.margin = "5px"; md.style.color = "red";
float layout style
Float is another layout style. Often used to let text wrap around an image on the left or right. Can also help with column layouts. Floating may break the natural flow and cause overlapping. Not the best option unless you know what you're doing!
folder structure in HTML5
Folder structure is also important. Have one root folder which will contain all the website files. Within that, have a folder for images, and folders for CSS, and JavaScript (once we get there). HTML files should generally stay in root folder, not in sub-folders.
Fonts tips in terms of responsiveness?
Fonts Titles or headers with very large font might not fit on a mobile screen. Make those font sizes smaller and/or change the unit type. Units vw and vh are relative to window size (similar to %) so they may be helpful for responsiveness.
what are gradient masks useful for?
Gradients are also useful for fades and gradual colour changes.
difference between HTML and XML?
HTML tags are pre-defined (a, p, h1, img, head, body, etc.) XML tags are not pre-defined. - You have freedom to name the tags as you want! ex. <class>Multimedia</class> - Custom attributes can be added. ex. <class code="CS2033">Multimedia</class> ex of XML on slide 31 in ppt 11
what are the primary trinity of languages?
HTML5 CSS3 JavaScript
what are tips for text content in accessibility?
Have no or minimal text in images. Screen readers read text but cannot read text inside images. Keep the text organized and use proper spelling and grammar. Have fonts clear to read or an option to change font size.
what is RSS?
Have you seen this symbol before? It's the RSS icon. It is a way of tracking new content posted online, like news stories. They use a push and pull system in which the sites push the RSS and other programs pull from the RSS. When blogs or news sites make new posts, they push it into an RSS feed. Users log in to an RSS aggregator program which pulls the articles based on the topics selected. Think of it like your Facebook timeline - it pulls stories from your friends but not from everybody! RSS requires structure and hierarchy so it is written in XML.
What kind of tools are used when retouching an image in photoshop?
Healing Brush and Spot Healing Brush cover blemishes really well. Patch Tool Content-Aware Move tool Red Eye Tool Clone Stamp Tool
What is hexadecimal color?
Hexadecimal are 6-digit strings of numbers 0-F (F=15) for ex. FFFFFF is white and 000000 is black, and FF0000 is red
other types of inputs in forms, listed in slide?
Hidden - Hidden is not something you need to use too much, but its like when you want info to be part of a form but not shown. Meta info to do with the form. For ex. Email address to not be shown, but there so that it will be sent to after the form is submitted. Date chooser Colour chooser And others!
how are styles actually coded?
How are styles actually set? property: value; Examples: width: 200px; display: block; position: absolute; background-color: beige; background-color: #9595AA color: yellow; color: #37B182 color: rgb(255,32,175) border: solid 2px darkred; border: rgb(0,0,50) dotted 1px; border-bottom: solid 1px #A744B9; border-width: 4px; border-top-color: purple;
how do we add CSS externally?
However, internal CSS is still not completely efficient. Suppose you have a website with multiple pages and want the styles to apply to all pages. The best option is external CSS. Store the CSS in its own file(s) and link the webpages to the CSS file(s). External CSS is stored in files usually with the .css extension. Linking these files into HTML pages is very simple: ex. <link rel="stylesheet" type="text/css" href="styles.css"> This is also meta information so it goes in the head section of the HTML.
hue/saturation
Hue - the base colour, without specific information about darkness Saturation - the intensity of the hue; pure vs. muted or whitewashed Lightness - the brightness of the colour HSL is a colour model like RGB and there are algorithms to convert between these different models.
ID selectors
ID selectors apply to the element with that ID (if there is one). Just like classes, HTML elements can be given an ID as an attribute. i.e. <div id='menu'> Unlike classes, IDs must be unique and not given to multiple elements. This is important! These selectors in CSS are labelled with a pound sign (#) followed by the specific ID name it applies to. i.e. #menu, #profile-picture Ensure the ID name is spelled identical in HTML and CSS. i.e. <div id='topmenu'> will not match the selector #menu ex. #menu { height: 100px; line-height: 100px; background-color: black; color: white; } #title { font-size: 40px; }
What statement do you use in SQL to add a new entry into a database table?
INSERT is used for adding a new entry into a database table. Somewhat similar to SELECT. INSERT statements also require you to individual column values. INSERT INTO tableName (column1, column2) VALUES (value1, value2); Examples: INSERT INTO Grades (StudentID, CourseCode, Grade) VALUES ("250712995", "CS2033", 86); INSERT INTO Grades (StudentID, CourseCode) VALUES ("250472940", "CS2033"); - No Grade specified here. It will be an empty slot but could be added in later. Quotations around everything except the grade - This is because it's a string of integers or text. Grade is a numeric value where as everything else was text. - Including the student number which is interpreted as a string or text as It is an identifying factor, not a numeric representation.
if several styles need to be changed in JS what do we do?
If several styles need to be changed, it's inefficient to do each one individually. A better option is to change the class on the object within JS. In CSS, an element can have multiple classes. It's the same in JS. Get the element the same way: var tb = document.getElementById("topbox"); Use dot notation to access className or id on the object. It's safer to leave the id alone and just change classes. ex. HTML: <div id="tb" class="box"></div> JS: var tb = document.getElementById("tb"); tb.className = "newbox"; // Single class. tb.className = "box newbox"; // 2 classes. Notice the difference between the two class change options. Single class is a replacement. Multiple classes are usually additions. Retain original class styles. Additional class(es) provide new or modified styles. We can now add and remove CSS animations dynamically with JS. Create a CSS class selector that triggers an animation. Use JS to add/remove the class to an element. Adding the class starts the animation. Removing the class stops it.
display element types?
In addition to position, another way to affect layout is with display. There are several possible values for this but the most important ones for now are: Block - takes up entire row. Inline-block - can be placed in row. None - not added to page.
what is the inverse selection tool used for?
In some cases, it is easier to select the opposite of what should be masked. The inverse selection tool can help to toggle between the selected and non-selected regions. cactus and sky example from ppt 3 slide 35
pros and cons of individual short pages
Individual short page format: PRO: Keeps content separated. CON: More files and links.
which 3 ways can we add CSS to webpages?
Inline - in HTML element attributes. Internal - in HTML head section. External - in its own file.
what is easier inline or dot notation event listeners?
Inline event listeners are the easiest. Although inline CSS and JS is generally frowned upon, event listeners are a different story! Inline event listeners start with "on" followed by an event name (sometimes abbreviated). All lowercase, no spaces or hyphens. Common mouse events: Click: onclick Double click: ondblclick Mouse over: onmouseover Mouse out: onmouseout Focus a form field: onfocus Leave a form field: onblur Change a form value: onchange Common Keyboard events: Key press: onkeypress Key down: onkeydown Key up: onkeyup ex. <div id="box" onclick="document.getElementById('box').style.width = '300px'"></div> In this example, the style change applies to the element itself, so we can use a shortcut: this <div id="box" onclick=" this.style.width = '300px'"></div>
what is ASCII code for analysis in JS?
Instead of getting the character value itself in the loop, you could get its ASCII code for analysis. ex. var code = msg.charCodeAt(i); if (code >= 65 && code <= 90) { } Look up ASCII code charts for the ranges (65 to 90 is capital letters). With values is harder to check range, but since ascii code is numeric you can check ranges.
What is a wrapper class?
It is usually a good idea to include all or most of the content in a giant div. It is common to call this the wrapper or container. The wrapper is often centered to keep the content in the middle. This does NOT mean the content is centered, remember never center text!! The wrapper may be given a width in pixels or %. Either is fine. Pixels keep a rigid structure. % is flexible for any window size.
how can we change the content within an HTML element using JS?
JS can also change the content within an HTML element. Use dot notation to access the innerHTML property of an element. tb.innerHTML = "Text shown in div."; As its name suggests, this supports HTML as well. tb.innerHTML = "<p>Hi there!</p>"; Style/content changes will typically be done as a result of an event.
What external file works well with JS?
JS works well with JSON. JSON can even be created directly in JS rather than an external file. ex. prod = {ID: "1", name: "Banana", weight: 130, price: 0.65}; Either way, JS parses the data into an object that it can then access directly with dot notation. examples of how to access JSON values with dot notation: prod = {ID: "1", name: "Banana", weight: 130, price: 0.65}; Parse JSON into an object variable. var product = JSON.parse(prod); - Access with dot notation. document.write(product.name) document.write(product.weight) document.write(product.price)
JSON
JSON is a more structured format. Entries consist of named properties and their values. It's hierarchical meaning property values can have sub-properties and values, like lists within lists! JSON: JavaScript Object Notation look to slide 26 on ppt 11 for example Just know that this is what JSON looks like roughly, hint for exam will probably be deciphering between external files, and you know what this looks like.
what type of coding helps static websites more dynamic and interactive?
JavaScript
what is a common client side language?
JavaScript is used for client side coding.
if you click in a box and it updates automatically, its real time validation and therefore is?
Javascript
Differentiate keypress, keydown, and keyup events.
Keydown is moment user uses a key, Key up is upon release, Key press is when you hold the key down. Very slight diff between these, normally best to use key up (when key released) and key press, because you don't want something as soon as key pressed usually
what is a label?
Labels are often placed beside or above each of the input fields to indicate the purpose of that field. When you click a label, the associated field becomes focused. Focus means the field is activated so that the user can begin typing it in, or for other input types, it may mean selecting a radio button or checkbox. Link a label to an input field using the for attribute and referencing the field by its ID attribute. - for ex. <label for="emailField">Email</label> <input type="text" name="email" id="emailField"/> Clicking a label for a radio button selects that button.
what types of style types are there?
Layout - Width, height - Position type (Position type is not where it is but how it interacts with other things) - Position values (Position values looks at where its positioned and again how it interacts with other things.) - Display type / float - Margins and padding - Top, right, bottom, and left (I call these TRBL ) Appearance Background colour Background image/texture Font colour Border style Rounded corners Opacity Many styles overlap - Goes to say not every parameter is independent and they have effect on how the others are displayed
how do we use/activate scrollfire?
Like parallax, we start with an onscroll listener and retrieve the scroll position in the event handler. Rather than calculating a position, use conditionals to check the range of the scroll. Change classes or individual styles depending on the range. Making the element visible isn't that appealing on its own. Often there is a smooth transition, like a fade-in or slide-in, which looks nicer than a sudden appearance.
how do you load bootstrap?
Load Bootstrap with link/script tags in your website. Just like you would link your own external CSS and JS files. You can download them to your folder or use a hosted set of files.
what is the magic wand tool?
Magic Wand Tool Creates a selection at once based on a selected pixel colour. The tolerance affects how much the selection will include pixels of similar colour or brightness.
what is the magnetic lasso tool?
Magnetic Lasso Tool As you drag the selection, it snaps to the nearby edges which it detects automatically. Uses edge detection algorithms to look at different pixels or differences in pixel contrast, in order to select exactly where the edges are.
what are the main advantages of using a CMS?
Main advantages of using a CMS: - Split content from code - Keep job roles separate - So you can have team of people managing content only, and separate group of people managing code. This means content people don't have to know coding and can only manage content. - Keep the site more organized - Pre-made themes - Pre made themes if you don't have CSS background. Like for ex. A blogger with no CSS background could just use these themes. - Many easy-to-add modules - Built-in SEO - WordPress is the main content management system out there! - Search engine optimization (SEO) includes ways to use words that are better to use and have more searchability to be used in your website.
transition style rule
Make a style change gradual in a selector with the transition style rule. Within this rule, we can specify the animation parameters like duration, speed curve (i.e. ease or linear), and time delay (i.e. start after 5s). These can be specified for individual style changes or for all styles at once. ex. Suppose we have: div { background-color:red; } div:hover { background-color:black; } Hovering the div will turn it black but by default it will be immediate. VS Add the transition line in the div rule-set. Apply a 2s transition. div { background-color:red; transition: background-color 2s; } div:hover { background-color:black; } You can specify multiple style properties to be animated by separating them with commas. Suppose you want the width and height to change. Add the following line: transition: width 2s, height 2s; To apply the transition to all style properties at once, use the word all in place of a property name. i.e. transition: all 2s; This helps simplify the code in cases where many changed styles are intended to have a transition.
some tips for transitions and animations?
Make looped animations seamless. Use the alternate direction parameter. Use the % based keyframe structure and set the same styles for 100% as 0%. Don't make your page overly flashy with animations. Not all properties are animatable.
what are selections?
Many Photoshop features can be applied to any region of the image. The region could be the entire canvas, a small rectangle or oval, or a complex polygon. These regions are called selections and they are an important part of using Photoshop. Selections are usually indicated with "marching ants", or rotating dashed lines around the perimeter
what are input parameters for functions in JS?
Many functions have input parameters which are placed within the parentheses. Parameters make the function reusable and flexible to work in different scenarios. To call a function with parameters, include the parameter values in the function call parentheses. ex. function average(x, y) { var z = (x + y) / 2; document.write("Result: " + z); } This has 2 parameters: x and y. Call this function: average(5,9); // Result: 7 average(10,20); // Result: 15
margin
Margin is the space outside the element, keeping it away from other elements.
what is the marquee tool?
Marquee Tools Simple to use, just drag your cursor. Rectangular and Elliptical are commonly used marquees. Single row / column marquees are not as important.
what is a mask?
Mask is essentially a specific region of a layer on which colour and transparency levels can be modified individually. Doesn't that sound like a selection? Yes! They are similar. In fact, selections are often converted directly to masks. Masks are like saved selections and give you more control by allowing you to refine the edges and apply blending techniques to them. A mask preserves the selection so you can experiment with effects without losing the selection.
how do we perform validation for more specific criteria like character types or patterns?
More specific criteria like character types or patterns require that we examine individual characters. Loops are important to iterate over a string or a list of items. For these validation criteria, we can loop over the input string and check the characters at each slot. Checking the character types within a string can be complex. One basic option to check if the entire string is a number or not is with the built-in isNaN() function (checks if value is Not a Number). ex. isNaN(34) = isNaN(2.5) = false isNaN("abc") = isNaN("B7") = true
how are input types added in code?
Most input types are added like: <input type="type"/> - where "type" is whatever type you want Some have their own tags: <textarea></textarea> <select> <option>1</option> <option>2</option> <option>3</option> </select>
how do we seperate "structures" of code?
Most lines of code end with a semi-colon ; There are structures of code that may contain multiple lines in a sequence. The first and last line of those structures end with a curly bracket { or } instead of a semi-colon.
if a selection is messed up, what should you do?
NOT START OVER can add to a selection, remove from a selection, as well as intersect with a selection. Buttons are arranged in this order. Intersection one is where the software finds the overlap and selects that overlap as the selection.
input attributes?
Name ID for the input which will help when we get to the JavaScript portion. Value Text displayed on/in the input. Placeholder Temporary, descriptive text. Tabindex Gives an order to the elements for users to "tab" through them.
Advantages of e-commerce for the consumer?
No need to go out of the house Quick and easy to do Comparison shopping Look at reviews before buying No time or geographical restrictions No waiting in line
Advantages of e-commerce for businesses?
No/less geographic limitations No need for retail space Lower number of employees Easy to track inventory, payments, demographics, user trends, etc. Easy to use such information to create targeted specials, recommended products, etc.
how do we add CSS directly in HTML tags?
One way to add CSS is directly in HTML tags in the style attribute. This can work well for applying a style to a single element and doing so quickly for testing purposes. i.e. <div style='width: 50%; height:300px'>Welcome</div>
what are tips for overlaid text in accessibility?
Overlaid text Text overlaid on an image must be entirely high contrast. This is difficult when images have many varying colours/shades. Use outline or shadows or an intermediate coloured panel to split the background and foreground.
what is a common server side language?
PHP is a common server side language
padding
Padding is the space just inside the element, keeping its contents away from the edge.
Parallax
Parallax effect Elements moving at different rates to create the illusion of depth (3D). By default, everything moves at the same rate as the user's scrolling. We want to change that! There are different kinds of parallax.
what are some modern website features that are gone over in this class?
Parallax effect Scrollfire Accessibility Responsive Transitions Interactivity Icons
What is a path in photoshop?
Paths are sequences of one or more lines, which can be straight or curved. Closed paths create shapes. Text can follow along paths or be added inside a closed shape. Line segments are separated with anchor points. Several tools for creating and editing paths including: - Pen Tool - Free-form Pen Tool - Curvature Pen Tool - Convert Point Tool
what is the polygon lasso tool?
Polygonal Lasso Tool Similar to the regular Lasso tool but keeps the edges straight rather than freeform.
Posts Vs Pages
Posts are for articles, news items, products, etc. Pages are whole webpages Posts generally don't have a fixed web location, which is unlike webpages Blog pages usually contain one or more posts WordPress allows you to create both
what is captcha?
Prevents bots from automatically filling out your web forms! Include something that only a human can answer. Some sites have a simple math question or ask you to type a word (i.e. the current month) Those can be sufficient for low-key websites but bot programmers may catch on to those questions. Bigger sites often have more complex captchas. Google's reCaptcha is another popular method. Sometimes it will ask you to select images that contain a certain item. Very hard for bots to get in!
what is query language in relation to databases?
Query language used like a search term in google. Query a database to gather certain data. All about performing actions on the tables in the databases.
what is the quick selection tool?
Quick Selection Tool Similar to magnetic lasso tool. As you drag, it looks for colours similar to the current selection Not effective if there are similar colours in the background and foreground.
what is a quick mask?
Quick mask is not really a mask. It's actually another selection tool. The name is deceiving! Allows you to paint out a selection. By default, painted area is shown as translucent red so you can see it on top of the picture. By default, you are actually painting the area that you don't want selected which is backwards. Inverse tool can often help here. Or change the controls so that you paint the part to actually select. Can be a beneficial tool for selecting complex regions.
Computer graphics use what channel mode?
RGB channels
what types of selection inputs are there for forms?
Radio button (round circle with selected one, finite selection) Checkbox (can select many, or one) Select list (select one item from a list)
Red Eye Tool
Red eye (from flash) is very easy to remove. The Red Eye Tool allows you to draw a rectangle around each eye and it automatically removes the red glare.
two ways to test responsiveness on browser?
Resize your browser. Simulate a smaller screen by resizing your browser big and small. Use the Chrome screen emulator. Click the three dots, More tools, Developer Tools, then click the little icon of the phone and tablet. This toggles the device mode in which you can select a specific device or free responsive mode. Several device specs are provided so you can test on those sizes. The "Responsive" mode allows you to resize the emulator freely.
What's the difference between resampling and resizing images?
Resizing is in terms of print if you gunna change how big you print something. This does not involve changing the pixels (samples). It simply changes the resolution. Mainly used for printing, as this only affects the size it will print. no change in quality. Resampling is choosing differences in sampling. This means number of pixels will change. So pixels=samples. This process changes how many pixels are in the image, not how big the pixels are. chnage in quality
Responsive
Responsive Display nicely on any platform, device, and screen size.
mathimatical component of advanced parallax?
Retrieve the current scroll position in pixels using window.scrollY. This value starts at 0 from the top and increases per pixel scrolled. Now we can use this value to calculate the elements' positions. How do we calculate this? Linear equations work well. y = mx + b x: scroll position (independent) y: image position (dependent) m: amount of change (slope) b: position when x=0 (y-intercept) m and b are the parameters. Let's start with b. Remember b is the position when x=0 (no scrolling). Thus, b must be where we want the element to start by default. i.e. if we use CSS to position an element at 50px from the top, then b in our linear equation must also be 50px. The m parameter is the rate of movement of our element. m=0 means no movement. m<0 means up movement. m>0 means down movement. Values are typically less than 0.5, i.e. within [-0.5, 0) or (0, 0.5]. Play with it until it looks good!
how are rule sets formatted?
Rule-sets are formatted like: selector { property1: value1; property2: value2; ... } in CSS
what variations of JS form validation are there?
Run validation as the user types or selects data, or at the end when they submit it, or a combination. Add event listeners to run the validation accordingly. For real-time validation: Keyboard events: keypress / onkeyup Blur (lose focus) event: onblur For submission-time validation: Button click event: onclick / onsubmit
SQL
SQL (Structured Query Language) Main language used in databases. This is a query language meaning that every statement is performing some action on the database. They include retrieving, adding, deleting, and updating data. Language used to grab data from these databases and this is the language used to command these data grabs
Scrollfire
Scrollfire Elements transition in as user approaches them. Track section in navigation bar as you scroll. (Image popup that we used) This is when elements appear or change as you scroll into specific ranges. Common form is applying an entry transition on an element that triggers as you scroll near it. For example, have an image in your website that starts hidden and appears as you approach it. Another option is to display or change a different element, i.e. a side button that is unrelated to the range you entered. Navigation bars use derivatives of this to change their placement or "stickyness" depending on the scroll. Some also highlight the current section name as you scroll through.
pros and cons of one long scrolling page
Scrolling long page format: PRO: One file, everything loads at once, clean on mobiles. CON: May take longer for users to find the info they need.
what is the section class?
Sections are HTML elements similar to divs but intended for keeping the different areas separated. This is the only difference between divs and sections, in that in divs you can have unrelated things. It's good practice to use sections to contain each distinct portion of a page, and then use divs within it for additional layout control.
what is a selector?
Selectors are ways of determining which element(s) are given the styles of the rule-sets. We're essentially indicating which element(s) we want to apply a style to and then using any combination of rules to create the overall style.
what do do when you want a style selector to apply same style to more than one tag?
Selectors can be grouped together using a comma to separate them. ex. input, textarea { width: 200px; } - This rule-set applies to all input elements AND textarea elements Grouping rule-sets is not only for form input elements but for any combination of selectors (tags, classes, and IDs). ex. p, input, .longtext, #login { width: 200px; color: blue; }
what s server side used for?
Server side is used for: Databases / external files. Processing orders (e-commerce). Functions involving security. Anything that the host needs to know about or track.
difference between server and client side?
Server side work is done on the host machine, while client side work is done on the user's device.
What kind of e-commerce CMSs are there?
Shopify (Canadian :)) Volusion Magento
in mask properties panel, a masks outline can be refined using what types of parameters?
Smooth Feather Contrast Shift Edge
event listeners in jQuery
Speaking of event listeners, they are also easy to add in jQuery! Add listener to selected element(s) and its function is contained with it. element.mouseover(function() { // Do something. });
what are strings, and their purpose in form validation?
Strings are just arrays of characters; only one character can be placed in each slot. Recall that positions start at 0 from the leftmost slot. var course = "CS2033"; var msg = "HELLO WORLD"; for first example, C is 0, S is 1, 2 is 2 and so on. same for the next example. important note, space in second example is 5 and gets it own spot in the string. Like other arrays, access each of the characters with a for-loop. ex. var msg = "HELLO WORLD"; for (var i = 0; i < msg.length; i++) { // Examine character at position i }
how are style properties denoted in JS?
Style properties that contained a hyphen in CSS are defined differently in JavaScript. Instead, the words are back to back and the initial of each word (except the first) is capitalized. ex. i.e. backgroundColor This is called camel case. more examples!! box.style.backgroundColor = "red"; box.style.color = "rgb(100,78,19)"; mydiv.style.width = "400px"; mydiv.style.borderColor = "black"; mydiv.style.left = "50%"; tb.style.display = "block"; tb.style.display = "none";
styles are applied in what order?
Styles are applied in top-to-bottom order generally. This only matters if there are conflicting rules or rule-sets. The order doesn't matter otherwise. p {color: red; width: 50px; } is the same as p {width: 50px; color: red; } since the rules are independent. So where does the order matter? - Conflicting rules within a rule-set. ex. In cases of conflicting rules within a rule-set, the bottom-most rule overrides previous ones. p { color: red; color: blue; } In this case, color: blue is applied only. It overrides color: red; - Multiple rule-sets with conflicting styles applied to an element. (more on this in next que card)
what types of buttons are there for forms?
Submit button Reset button Generic button
what are suggested screen size ranges for each device?
Suggested screen size ranges (not every device conforms to these ranges) Phones: <= 640px Tablets: 641px to 1007px Monitors: >= 1008px This is a good guide for responsive web design.
TXT
TXT is the simplest format: plain text. There is no built-in structure to it. Lack of formatting/structure makes it ineffective for most datasets. explanation related to slide 20 on ppt 11: Problem is that we are using spaces as the main delineator. So what is a fruit had a space in its name for ex. Gala apples. Then since the columns are separated by spaces, the order structure would be messed up. Gala would be assumed as product, apple as weight and everything would be messed.
tag selectors
Tag selectors apply to all elements of the specified HTML tag. i.e. <p>, <h1>, <body>, <img> These selectors are labelled with the tag name, as it is in HTML, but without the <> brackets. i.e. p, h1, body, img ex. p { color: red; } body { margin: 0; } div { background-color: #ff0000; }
What is the doctype tag?
Tells the browser which HTML version is being used. This must be the very first line. <!doctype html> Most browsers will assume HTML 5 if not specified but it is best to include this line regardless! Doctype means you indicate you are using html 5 which is most standard version that is compatible with most browsers
what types of user input areas are there for forms?
Text Textarea (large box) Password (blocked out letters)
What statement do you use in SQL to retrieve data?
The SELECT statement is probably the most popular and useful. It is used to retrieve data. It does not change the database in any way, it only grabs data to look at. You must specify which column(s) you want to retrieve. Use * to indicate all columns in a specific row. You also have to specify which table(s) you are retrieving from. Optionally include a conditional to choose which entries are included based on certain values. SELECT column1, column2 FROM tableName WHERE condition; "WHERE" is a conditional Examples: SELECT Name, Email FROM StudentInfo; SELECT * FROM Grades; SELECT StudentID, Grade FROM Grades WHERE Grade > 80;
What statement do you use in SQL to edit existing entries in a database table?
The UPDATE-SET statement is used to edit existing entries in a table. Use this to fill in an empty slot (like the Grade example) or to override an old value. UPDATE tableName SET column1 = value1, column2 = value2 WHERE condition; Examples: UPDATE Grades SET Grade = 87 WHERE StudentID = "250174834"; UPDATE Grades SET CourseCode = "CS2033", Grade = 87 WHERE StudentID = "250174834";
what is the asterisk * used for in CSS?
The asterisk * is used to select everything at once. i.e. * { margin: 2px; }
what does the body section contain?
The body is typically much larger than the head. This contains content and layout design elements that are displayed in the actual webpage. Some head data (i.e. CSS or JavaScript) can be done in the body as well.
stats for e-commerce?
The good news (for these companies) is that e-commerce sales are occurring constantly. In 2017, there were over 1.5 billion online consumers (20% of the global population!) This is expected to increase to over 2 billion by 2021.
position layout style
The last main layout style is position (often used with TRBL) Static and relative position follow natural flow of elements (blocks). Fixed position remains when scrolling. - Useful for navigation bar, footer, feedback link, etc. For column-based layouts, absolute positioning can be used. They must be contained in a relative positioned element first! Absolute is a precise location, but it is ironically relative to its parent. Never use absolute if it's not inside a relative parent element. refer to slide 27 on ppt 6 Absolute within relative position can create side-by-side layouts. Disadvantages? Sticks out of page on small windows. Each element's location has to be calculated and specified. Behaves like floats if height of parent is not known.
position style type
The position style type determines how (but not where!) the element is positioned in the page or its parent. The default value is static, meaning it's added sequentially in the site and cannot be moved. - Most of the time relative or static are the most common. Some times absolute is used. Other position options are: Relative - similar to static but can be shifted with TRBL values. Absolute - location is directly based on TRBL values within its parent! Fixed - location is locked in place. Sticky - position changes between relative and fixed on scrolling.
what is the specificity order from low to high?
The specificity order (low to high) is: 1. Type selectors (p, div, etc.) 2. Class selectors (.home, etc.) 3. ID selectors (#title) This is why class overrode type, and ID overrode both type and class in our examples. - Type selectors are lowest priority, ID selectors take precedence over both the other things.
how can you break the regular order of rule set specificity?
The word !important immediately after a style gives it top priority. p { font-size:24px !important; } It's not recommended to use this unless you absolutely need to.
can there be sub-conditions such that at least one must be met?
There also might be sub-conditions such that at least one must be met. In this case, use the || (or) operator. if (age >= 19 || allowed == true) { canDrink = true; } else { canDrink = false; }
what are the main types of selectors?
There are 3 main types of selectors. Based on tag / element type. Based on class name. Based on ID. There are additional types based on the state of the element, known as pseudo-classes.
what kinds of variables are there in JS?
There are several types of variables: String - text, surrounded by quotations String is just text, also can be a number in quotation marks. ex. x = "hello"; Integer - whole number x = 13; Float/Double - decimal number x = 7.3 Array - list of multiple items x = [2, 7, 4, 8, 1];
what is the advantage of making a layer mask for a selection?
They actually can be added without a mask, but this way we can easily add, change, and remove effects and never have to make the selection by hand again! Masks and selections go hand in hand.
array in JS
Thing about array is that we can index individual elements in an array using the position indices. Start at 0. Arrays are indexed such that each item has a position, starting at 0. We can access individual elements using square brackets and indices. ex. x = [2, 7, 4, 8, 1]; alert(x[0]); // Displays 2. x[4] = 3; // Changes last item to 3.
selective colour
This allows you to control specific colours in the image. Choose which colours you want to affect in the original image. Use the C, M, Y, and K sliders. Play with them to see the effects. If the colour you chose isn't in the image, the sliders won't do much. i.e. if you have an image entirely of green grass and you choose Reds, the sliders won't change anything. If you choose Greens, then the sliders will make a big difference!
what types of websites use CMSs?
This is not only used for large, complex websites. Many websites now use CMSs. - News sites - Blogs - Sites with articles - Sites with changing content - Wikis (more on wikis shortly...) - Pretty much useful for any website in that you can easily change the content.
black and white
This is straightforward; it simply converts the image to grayscale.
title section in the header in denoted by?
This is the text that shows up in the browser tab. <title>Website - Webpage</title> This is meta data about the page, so it goes in the head section.
What is Tilt Shift Photography?
Tilt-shift is an effect in which the foreground is focused and the background is blurred. This is usually used to give the illusion of a miniature model. Works best for pictures from an elevated viewpoint, and that contain cars, houses, boats, etc. Simple way to apply this effect is: Enter Quick Mask mode Use the gradient tool and select "reflected gradient" Create a vertical gradient over the main foreground area Exit Quick Mask mode Apply Lens Blur to the selection
what are CSS animations?
Transitions are for style changes, usually triggered by :hover, ;focus, or another pseudo-class. Sometimes we want an animation that is independent of user input. i.e. a shape growing and shrinking back and forth continuously. This is called an animation in CSS. Note the difference between transitions and animations. CSS animations use keyframes ex. @keyframes growAnim { from { width:200px; } to { width:300px; } } - This animation, named growAnim, has 2 keyframes. Start (from): width of 200px End (to): width of 300px If we want it to grow in different segments, we can use a %-based keyframe structure instead. ex. @keyframes growAnim { 0% { width:200px; } 75% { width:250px; } 100% { width:300px; } } This is similar to ease-in. Once a keyframe structure is created, it can be applied to a rule-set easily. ex. animation: growAnim 3s infinite; The main parameters are: - Animation name - Duration - Iteration count (looping)
Upsampling
Upsampling = making it larger. Pixels must be added via interpolation.
other modern features for websites?
Use transitions on rollovers. Add interactivity to attract users. Add call-to-action buttons. Include an e-newsletter and subscribe button (if applicable). - MailChimp can help with this. Multilingualism may expand the website audience. Icons help de-clutter unnecessary text and they are language-independent. Add annotations to give a preview or quick explanation on hovering.
tips on smart website design?
Use web-safe fonts or Google Fonts. Create a consistent and cohesive design for your website. Limit the number of colours you use. Ensure all text is readable. Avoid having tons of text. Do not center paragraphs of text. Invite users with friendly, clean call-to-action buttons.
Is Vanilla JS still used?
Vanilla JS isn't used on its own as much as it used to be. Web developers nowadays use a lot of jQuery and other frameworks. -Angular - React - node.js - etc.
can a variable be changed?
Variable values can be changed after they are first created. ex. var course = "CS1033"; document.write(course); course = "CS2033"; document.write(course); Notice var is needed when you create it but not when you change its value. Code is executed in top-to-bottom order, so this would first write "CS1033" and then "CS2033". Only need var when you are first overwriting a variable. Anytime a variable has a new value, you are overwriting it, you don't need to write var again.
variables in JS
Variables make it easy to store items that are reused. ex. var course = "CS2033"; Now we can use this variable by using its name. ex. alert(course); document.write(course);
what are the best options for layout styles according to Bryan?
Verdict: inline-block or table-cell display are usually the best options!
What is warping?
Warping is a method to skew or rotate specific parts of a picture. Best to have object on its own layer. Then click Edit > Puppet Warp They triangulate the object. A mesh is added on the object. Mesh is made up of many triangles. Gives structure to the object. You should add pins around the object to hold down the portions that should not be skewed. They don't have to be too close together but also don't be too skimpy with the pins. If you make a mistake, right-click on a pin and click Delete. Then you can add a new pin. To skew the image, hold down Alt and push the Left mouse button down and drag the mouse around. While holding Alt, you should see a little curved arrow by your cursor to indicate that you can now rotate.
changing content in jQuery using innerHTML?
We also changed the content of elements a lot using JS's innerHTML. In jQuery, it is just .html() element.html("content"); Example: $("#top").html("Welcome"); $(".link").html("<p>Home</p>");
Parallax Advanced form
We can improve this by including motion on both the background and foreground elements. This requires JS so that we can access the elements and change their positions dynamically. This form of parallax is more elegant than the pure CSS form. There's another event listener that helps with this! onscroll - triggers as the user scrolls up or down the site Note there are many ways to scroll with different sized jumps: - Mousewheel - Up/Down keys, PgUp/PgDn keys - Clicking or dragging the scrollbar Add onscroll listener to the body.
what are two other common event types in JS?
We talked about mouse events and keyboard events already. There are two other common event types in JS: the loading of the webpage and custom timers. The loading is simple. Just attach an onload listener to the body and it will trigger when everything loads. There are two types of timers. - Timeout: trigger a function once after a specified time has elapsed. - Interval: trigger a function repeatedly in intervals of the specified time. - Start them with setTimeout(function, ms) or setInterval(function, ms)
what are the types of web development categories?
Web development is often split into two categories: front-end and back-end. Front-end deals with the design. Back-end deals with the server system and functionalities. Full-stack is the combination of front and back end development.
what are some common validation criteria in JS form validation?
What are common criteria in the validation process for text? - Textbox not left blank - Valid text length - over minimum or within a range - Type(s) of characters in text - Specific pattern (i.e. postal codes) What are common criteria in the validation process for other inputs? - Radio / Dropdown list: was an option selected? Is the selected option valid? - Checkboxes: is there a limit/range of how many should be selected?
when multiple rule sets are applied, how does order matter?
When multiple rule-sets are applied, it's a little more complicated. ex. p { color: red; } .home { color: blue; } <p class='home'>Hello world</p> Does the text turn red because it's a paragraph or blue because it has the 'home' class applied to it? The class rule-set takes precedence so the text will be blue. How about if there is an ID too? ex. p { color: red; } .home { color: blue; } #title {color: green; } <p class='home' id='title'>Hello world</p> ID, class and tag (order of priority), ID takes precedence. Not to do with order again, ID would take precedence.
within jQuery, what is needed when using grouped selectors?
When using grouped selectors, like by tag or class, it's likely you will need to also use the this selector. i.e. add an event listener to all elements of a certain class but only the triggered one should react. $(this)
In RGB, colour channels measure how much colour in each channel, and which colours denote how much colour coming from that channel?
White: full colour from channel Black: no colour from channel Gray: some colour from channel
width and height
Width and height are simple. Often measured in pixels or %.
can wikis be private? public?
Wikipedia is the most popular wiki. This is a public wiki, meaning anyone can edit it. Some wikis are private so only select communities or user groups have access to view or edit them. OWL is an example of a special, private wiki! - Owl is a special wiki - Different roles with different permissions; students, profs, Ta's
Clone Stamp Tool
With the Clone Stamp Tool, you can select a part of the image that you want to start cloning. Then when you drag the cursor in another area, it clones the first area onto the second area as you draw.
what is the column class?
Within sections, there are many options for placing text, images, and other multimedia. The most basic option is to have a single element across the entire width of the section / wrapper. Many sites have multiple columns of side-by-side content.
how do we add CSS internally?
Within the head, use the <style> tag to create a place for CSS and then add the styles in there. Works well for a single page site, or styles that only apply to one page. Definitely better than inline styles. ex. <head> <style> p { color: red; } div { width:300px; border: solid 2px red; } </style> </head>
WordPress, and also what is a cPanel?
WordPress is free and easy to use. After registering, they provide you with an online control panel, shortened to cPanel. - cPanel is used by other platforms as well as WordPress. cPanel is the main hub for editing the site without touching code.
What important news feed uses XML?
XML is also used for RSS feeds.
XML
XML is another structured and hierarchical file format, like JSON. XML uses tags much like HTML. Both are called markup languages. The same general tag rules apply to XML, like reverse closing order. XML: eXtensible Markup Language XML looks very similar to HTML Difference is that XML is made for storing data and HTML is for web design.
What if we want to do server side work but to invoke (start) it based on user interaction? Can we mix client side interactivity and user input with server side work?
YES!! AJAX is a technology that combines JavaScript with PHP or other server side languages. We can run server side code (i.e. find keywords in a database) triggered by user input (i.e. typing on a keyboard). slide 58 in ppt 4
changing CSS in jQuery?
You probably noticed that a common task in JS is changing CSS. It's easy to do this in jQuery too. element.css("property", "value"); Examples: $("#top").css("display", "block"); $(".link").css("margin", "5px");
why cant you use word for coding?
because its not a plain text editor
what are types of ways to do colour manipulation?
brightness/contrast hue/saturation black and white photo filter selective colour
colour models are made up of?
channels or bands
what is an important JS element for form validation?
conditionals
what are forms?
forms are website features that ask people to fill in some type of info. Notice that the forms are asking people to fill in some kind of info. Forms can be used in websites too. Made with <form> tag. Web forms provide a way to receive more kinds of user input. Examples: Typing their name in a textbox. Selecting their year of birth from a dropdown menu. Checking boxes to indicate which foods they like.
order in which spacing elements are arranged?
margin border padding content look at slide 10 on ppt 5
masks vs erasers
masks: pixels are visible or invisible but are always there easy to change which are visible and arent visible within the mask erasers: erased pixels are removed permanently undo or history state can be used to correct a mistake but limited to one session
how do we incorporate payment directly into your website?
paypal and stripe are examples An option for incorporating commerce into a website is PayPal. Set up an account that links to your bank account. Insert "Add to cart" buttons in the site and PayPal manages the cart. Checkout will also use a Paypal module to handle the payment. PayPal was/is a popular method before because they handle and process the payments. They also take a cut of the transactions though. The processing of a transaction is called a payment gateway. This is not specific to PayPal.
What is RGB?
red, green, blue with triplet number sets from 0-255 for ex. 255-0-0 is red 75-75-75 for a shade of grey. all same numbers will result in a shade of grey 0-0-0 is black and 255-255-255 is white
common uses for Photoshop
removing acne and wrinkles, changing body size (muscles, waist, stomach, legs, ect.) It is often used in ads, tabloids, and magazines to make people look different (better or worse)
what types of form validation are there?
required fields meeting number of characters types of characters (for ex. number of email, including @) can be given "maxlength" attribute to limit how much you type. (no min length) this is just in HTML, in JS you can do alot of this!
Vanilla JavaScript
the old JS we learnt at the beginning of the year. original version that is now kinda outdated, but fundamental.
HTML (Hypertext Markup Language)
the predominant language used to create web pages Consists entirely of tags. Tons of elements, some of which we'll go over in detail. Standard language for making static websites. Files usually end in .html or .htm The homepage or splash page must be named index.html to be loaded first. Other files should be named appropriately and: All lowercase (fruit.html) No spaces (myfamily.html) Not too long (uwo.html)
definition of photoshop
to digitally alter (a photograph or other graphic) using image-editing software such as Photoshop