Final Exam Review

CSS

Cascading Style sheet keeps presentation separate from content nested hierarchy w/in HTML document allows for flexible targeted application of style rules cascading means you can apply general style rules to the entire document and then tweak them for inner elements

What are the two types of interfaces

CLI/GUI CLI: Terminal, typing in lines of code GUI: "gooey" Desktop, OS (operating system)

InDesign: Text Boxes

In order to type in InDesign you must form a text box.

Give the nav a specific ID

In the HTML file: <nav id="MainNav"> In the CSS file: #mainNav

JPEG

Joint Photographic Expets Group. can hold millions of colors, lossy , great for photographs or detailed images

Terminal

Mac application that works with unix shell program, allowing you to type commands to Os directly (CLI) Applications--> Utilities--> Terminal Command + or Command - to shrink/expand

Selection Tools

Rectangular Marquee: creates rectangular selections elliptical marquee: creates circular selections single row/column marquee: creates 1px/wide /tall select quick select tool: creates complex selections by clicking on an object wi/ fair amount of contrast btwn it and everything else magic wand tool: selects pixels of similar color lasso tool: draw freeform an outline around area you want to select polygonal lasso tool: draws only straight lines magnetic lasso: triest to guess the outline of a shape based on the colors of the pixels

XML

XML stands for extensible markup language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive ! SVG is written in XML

Inline vs. Block

block: stands on its own inline: goes with the flow

Writing Styles

body{padding: 15px;background-color:#FF000;} selector, property, value, property, value

Where can we write the additional styles?

can be added to a specific stylesheet: <link rel="stylesheet" href="styles.css" media="print" /> can be added as a style rule within a stylesheet @mediaprint{} nine possible output types: all, aural, braille, handheld, print, projection, screen, tty, and tv most common are screen and print

What do masks do?

colors: black/white does our content show through the black part of the mask or the white part: black conceals white reveals

File Compression (loss/lossless)

compression is when algorithms decrease file size. Different file types use different compression algorithms. LOSSY: some data is discarded and approximated resulting in a smaller file size. LOSSLESS: original data is reconstructed resulting in a more accurate file with a larger file size

HTML vs. CSS

html: hypertext markup language. used for organizing and formatting CONTENT CSS: cascading stylesheet. used for defining and assigning styles PRESENTATION

Character Set

range of characters used <meta charset="UT F-8" />

know the differences between photoshop and illustrator

types of graphics they make- illustrator is mainly vector photoshop can be a raster and a vector

InDesign: Placing Images

To import a graphic into an existing frame, select the frame. If the new image is larger than the frame, you can refit the frame later by choosing Object > Fitting > [fitting command].

Back End

"Back End" Web development refers to the functionality of a website that is not visible to a person If you buy something online, you interact with the front end of the store; the transaction takes place on the back end of a database on a Web Server The back end usually consists of a server, an application, and a database! The languages most often employed in back end web development are PHP, Ruby, and Python

Front End

"Front End" Web development refers to the elements of a website that a person sees and interacts with! The languages most often employed in front end web development are HTML, CSS, and JavaScript HTML describes content CSS defines appearance JavaScript facilitates interaction! All of the above happen directly in the web browser

Style the List with CSS

#mainNav ul{text-decoration:none;text-align:center;} -removes bullets centers text #mainNav ul li{display:inline;} -makes links appear next to each other #mainNav ul li a{text-decoration:none;padding:15px;background-color:white;color:balck;} #mainNav ul li a:hover {back-color:black;color:white;}

Size of a favicon?

16 px by 16 px

HTML & CSS

2 Different docs linked index.html-------------------------->styles.css <link rel="stylesheet" type="text/css" href="styles/styles.css"/>

CSS Separators

:value; property:value;

Commenting

<!--Comments go here-->

Adding a Link

<a href=""> Click Here </a>

New Elements

<header> intro content for doc or sec. of doc <nav> contains navigation <section> defines section w/in doc <article> independent, self contained content <aside> content separate from nearby content <footer> content that ends your doc

Adding an Image

<img src = ""alt="" title="" />

Elements

<strong></strong> <em></em> <time> <cite> <blockquote> <q> <mark>

Tables

<table> tag that surrounds table content <tr> row w/in a table <th> header nested inside <tr> <td> table cell/division nested inside <tr> <caption> normally at beginning <thead> <tbody> <tfoot> additional tags to organize table content colspan ="n" extends <td> the specified # columns rowspan = "n" extends <td> specified # of rows

Lists

<ul> unordered <ol> ordered <li> list item start "n" start value value "n" specified number value for item

Why use it?

Additional interactive components, or "widgets," can extend the behavioral aspect of Bootstrap web pages Such interactivity would normally require an understanding of JavaScript to add to a website Bootstrap simplifies this process by providing several common widgets including tabs, carousels, and tooltips

IP Address

An IP address is an identifier for a node - a computer or a device on a network

Types of Components

Bootstrap is a front end framework for developing responsive, mobile-first projects on the Web! It contains HTML and CSS3 design templates as well as optional JavaScript extensions! Originally developed as an internal toolkit for Twitter, the project was released as open source in 2010! It has since become one of the most popular front end Web frameworks and is used by many different kinds of sites

CLI

Command Line Interface: issues commands to an OS by typing lines of code. Automatic vs. Manual Transmission (GUI) -you work directly with the data,so non data elements can't get in the way -powerful for many tasks (moving, copying, renaming 1000s of files) -ability to use scripts -uses less memory

How do computers Store data?

Constructed of digital electronics, circuits can be on/off. circuits are used to store patterns of #'s using the binary number system. a bit (binary digit) is the basic unit of info in computing (0 or 1). bit depth is the number of bits used to describe a single pixel . more bits=more colors. 1bit=2 colors 8bit=256 colors 24 bit=16.7 million colors

History of Photoshop

Created by Thomas Knoll in 1987, originally called Display • Acquired by Adobe in 1988 • Released as Photoshop 1.0 for Macintosh in 1990 • Released the "Creative Suite" in 2003 • One of the first products to become a verb • Has become the industry standard for graphic/image manipulation software

Domain Names

Domain names serve as a more memorable reference to Internet resources Domain names are used to identify Internet Protocol (IP) addresses

FTP

File Transfer Protocol software application that allows you to add files onto your web server (FETCH) when we connect to the server, we are dealing with. If you have a folder on your desktop and server of "assignment 3" than if you update one you drag them into files on desktop vs. files on server: locally vs. remotely

Unix File System

File and directory paths use the forward slash "/"to separate the directory (folder) folder names in a path Use your "cd" to change the directory to your home directory cd..I'll take you up one level cd <dir name> will take you to that directory

File Size

File size is determined by: bit depth, image dimensions, image resolution, and file type

GIF

Graphic Information Format. .gif. 256 colors, great for flat, simple graphics, smaller file size, lossless, can have transparency, supports animation

GUI

Graphical User Interface "interacting with the OS by manipulating images rather than text commands"

ID vs. CLASS

ID is a specific instance of an element on a page -called by using the # -only ONE instance of an ID can be used on a single HTML page Classes defines specific styles on a page -called by using the . -severals instances of a style can be used on a HTML page

Different Layers

Image layers: pixel based. Type layers: not pixel based, contain type. shape layerS: vector based, can be resized wi/out losing quality. fill layers: can containa solid color, gradietn or pattern. adjustment layer: apply color and brightness effects to layers w/out altering them permanently.

InDesign: Export

Interactive PDF

Internet v. Web

Network of connected computers vs. a system of hyperlinked documents on that network. everything works via shared protocol free for everyone to use http: hypertext transfer protocol

OS tasks/terms

Process Management: keeping apps running, scheduling applications so they share the processor. CPU: central processor unit is hardware within the computer that carries out the instructions of a computer program by performing the basic arithmetical, logical input/output operations of the system. Storing Data in Computer's Memory: retrieving data from the hard drive , catching data , making sure the computer doesn't run out of memory. Random Access Memory (RAM): form of computer data storage. A random access device allows stored data to be accessed quickly in any random order, other data storage: hard disks, CD-ROMS, flash drive, external hard drives.

PNG

Professional Network Graphics. can hold millions of colors, lossless, preserves transparency and gradients, newest image format

SVG code

SVG images can be created and edited with any text editor! SVG images can be searched, indexed, scripted, and compressed! SVG images are scalable, can be printed at any resolution, and are zoomable without degradation! SVG is an open standard SVG images are pure XML

SVG (Scalable Vector Graphics)

Scalable: increase or decrease uniformly In terms of graphics, means not being limited to a single, fixed, pixel size . On the web, scalable means that a particular technology can grow. SVG is scalable in both senses of the word Vector: contain geometric objects such as lines and curves . This gives greater flexibility compared to raster-only formats. Since all modern displays are raster- oriented, the difference between raster-only and vector graphics comes down to where they are rasterized Vector graphics are rasterized client side; raster graphics are, by nature, already rasterized on the server Graphics : Most existing XML grammars represent either textual information or raw data. They typically provide only rudimental graphical capabilities. SVG provides a rich, structured description of vector and mixed vector/ raster graphics

What type of Templates?

The Bootstrap framework is responsive with a mobile-first approach It starts with a baseline of shared styles and introduces more advanced layout rules when screen size permits Media queries are used to determine screen size and apply different styles accordingly Bootstrap also offers a grid layout system which organizes page content into a series of rows and columns

Unix

Uses CLI Free distribution, open system portable, multi-tasking , multi-user servers, workstations, mobile devices basis of linux and mac os, bsd unix, alx many OS are based off of Unix and are considered unix-like systems`

InDesign: Leading

Vertical space between lines of type

REsolution for print and screens

When dealing with print? 300dpi (dots per inch) standard resolution When dealing with screens? 72 dpi (dots per inch) standard resoultion

Styling SVG

a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes, images, and text SVG drawings can be interactive and even styled with CSS.The advantages of stylesheets are now generally accepted, certainly for use with text ! SVG extends this control to the realm of graphics It allows for script-based manipulation of the document tree and the stylesheet

Styling Links

a: visited{} a:hover{} a:active{}

Making Selections

adding to selection: combines to an existing selection. subtracting to selection: deletes from existing selection. intersect: selects the overlapping portion of the selection feather: softens the edges of your selection anti-aliasing: smooths color transition btwn pixels around the edge of your selection and pixels background in contiguous: selects pixels of similar color that are touching tolerance: teh amount of similarity btwn the color of pixels. The lower the tolerance , the more pixels will be selected. the higher the tolerance the less pixels will be selected.

Layer Styles

adjustable, ready made effects for indivdual layers. non-destructible, editable and chagned at any time. activated by double clicking a layer. (drop shadow, inner glow, satin, color overlay, gradient, outer glow, stroke, bevel adn emboss)

InDesign: Kerning

adjusting the spacing between specific characters

Properties

background- color -# followed by a hex color -predefined value (ie. red, black, purple, green) -RGB background-image -use url ('filename') FOR FONTS -color -text-align -font-family (use web safe fonts)

Raster Images

created with a series of tiny dots called PIXELS. each pixel stores color information. Image resolution is based on pixels per inch (ppi). Information is lost when scaled up=pixelation. good for photographs and detailed images. Large file size. Raster--> Vector=Difficult photography, web design, digital effects File: BMP, PCX, TIFF, JPEG, GIF, PNG, PSD,CPT

CMYK

cyan, yellow, magenta, black (key color). subtractive color, light is removed as ink is added, 100% of each is balck and 0% is white. specified as a % 0-100. color mode is standard for anything that will be printed

Manipulating Media:

destructive editing: altering the original image. can never resort to its original state. non destructive editing: not changing the original file. Gives the illusion of altering it but the original is always available.

the DIV

division on the page -good for structuring and separating content areas on longer pages -used w/ ID's for styling CSS, before HTML5 -it's a block element (creates space between and below it) <div> </div>

Add a Box div

doctype html head body div id="box" This allows your content to flat in the center of your browser window, and protects it from resizing you must set a fixed width for your div set margins on right/left to auto change background color to see it in action

Applying CSS

external stylesheet (preferred method ) internal stylesheet (written in the head section between <style> tags In-line style, applied in the .html file to specific elements "latest" style takes precedence Apply styles to SELECTED elements (SELECTORS) by defining the rules for how to display them

timeline panel looping

forever

Basic Website Structure

html: tells the browser you're using hypertext markup language. <html> <head> : section thats not displayed on the page but browser indicates it links to stylesheets scripts and metatags <title>: appearance on top search engine <body> ; inside the window it is visible a: links img: links img hr: creates a horsizontal line <img src="" /> : element attribute value

HSV

hue, saturation, value. hue: the similarity to a percieved color (RYBG) or combination of those colors (in degrees). saturation: colorfulness or purity of color relative to brightness (%) value: the appearance of emitting more or less light (%)

Color theory basics

hue: another for a "color" saturation: describes colors strength or intensity brightness: determines how light or dark a color gets color scheme: group of colors used in a project

Center an Image

img {display:block;margin:auto;}

Meta

info about data <meta> metadata about html document used by browsers, search enginges specify page description, character set, keywords, author <meta name="" content="" />

Principles and Practice

key concepts of use of computers -core principles of web design and development -best practices and process *master hardware, fluency wi/mulitmedia production, soft graphics and web pages histyr of pc

Vector images

made up of points and paths. forms shapes that are filled with color and outlines. based on mathematical equations. scaled infinitely w/out losing quality (resolution independent). smaller file size, easily converted to raster. DON'T handle photographic imagery well. good for large scale printing (banners/signage) (logos/illustration). File: EPS, WMF,AI,CDR,DXF,SVG,PLT

InDesign: Interactivity

make your page "Interactive for Pdf" ADD hyperlinks from your document

Responsive Design Importance

mobile traffic is as relevant as desktop traffic now we should build for the type of screens that will be used to access our sites one way to do this is through alternate style sheets apps are great but most of an app's functionality can be achieved with HTML5, CSS3, and Javascript Responsive web design uses "media queries" to figure out what resolution of device it's being served on flexible images and fluid grids then size correctly to fit the screen build a website with this method and it works across many different screens design for flexibility

The Desktop Metaphor

monitor is on top of your desk//the desktop , documents and folders sit on top of your desktop//files & folders Documents can be opened up on your desk// Windows office accessories can be used with your files//Applications

width vs device width min/max width

most common are: min-width and max-width media queries can be used to load an alternate style sheet or offer alternate styles within an existing style sheet link to external stylesheet: <link rel="stylesheet" media="logic type and (feature:value)" href="stylesheet.css" /> query within a stylesheet @media logic type and (feature:value) {} Media Query Syntax: logic it's optional two possible values : only or not only: screens out older browsers from reading the rest of the query not: negates the result: "not screen" means everything except screen Type it's the media type screen and print are the most common Feature: value must be enclosed by parentheses and preceded by the word, and feature is one of the predefined media features multiple features and values can be combined with and

Media Queries

new in CSS3, media queries enhance the media type methods features you can include in media queries: width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid

Animated Gif: General

opacity position rotation scale speed

TwitterBootstrap: Open Source

open source refers to a computer program in which the source code is available to the general public for use and/or modification from its original design. Open-source code is meant to be a collaborative effort, where programmers improve upon the source code and share the changes within the community.

The Box Model

out ---> in margin, border, padding

Giving Value to padding and margins

padding:15px; global padding-right: 15px;just the right padding: 15px40px15px40px top right bottom left

HEX codes

pair of digits and letters that represent RGB values. each digit represents a number between 0-255. hex codes are based on a 16 digit system (o-f). 123456789abcdef. considered web safe colors, 256 values represented. HEX-->RGB. #CC: start with left #, multiply by 16 then add the right #

OS

piece of software. the KERNEL is the main part of the OS that is the bridge btwn the applications/ peripherals and the actual data processing Application software: aka an app is a piece of computer software designed to help the user perform specific tasks -- this runs on top of the OS, depends upon the basic capabilities of the OS, usually only works on one top of OS/ PERIPHERAL: device connected to computer but not part of it that expands the capabilities but doesn't form core computer architecture..completely independent

Pixels & Resolution

pixel=smallest unity of info in a raster graphic. it has a specific location and can be found in grid of a graphic. each pixel holds specific color info. # of ppi=resolution. the higher the resolution=higher pixel density quality. Standard resolution for screen based image=72dpi (dots per inch). Standard resolution for print= 300 dots per inch or higher. Document or canvas size specifies the height and width of an image but doesn't refer to the image's resolution.

What is resolution based on?

pixels per area: the pixel density. the closer the higher the resolution

InDesign: Tracking

process of loosening or tightening a block of text

RGB

red green blue. additive color, light is added together, 100% of each maeks white, 0% is black. values for RGB specified as 0-255. color mode is standard for anything digital that will be viewed on a screen.

chmod

sets permissions on "read" "write" group "execute"' user owner/other world "" permissions box types of users

What does Photoshop do?

software for manipulating and creating digital images, Tools and metaphors from darkroom photography. Mostly raster or bitmap graphics, images are made up of pixels

bits, bytes, etc.

standard images for the web should be as small as possible somewhere between 5-500 kiloybytes, images can be up to several hundred megabytes

Doctype

tells which version of HTML you're writing *very important to include this for browsers much easier to write in HTML5 No closing tab, incldued at the top of every .html file b4 <html> tag <!DOCTYPE html>

Operating System

the software that supports a computer's basic functions, such as scheduling tasks, executing applications and controlling peripherals Early computers: didn't have operating systems, ran one program at a time, operators would have to allocate computer resources and memory. the first OS was developed in the late 1950s. OS have: files, folders, apps that allow you to browse the file system

Photoshop tweening

the steps between two objects

Turning a list into a nav bar

use the structure of a list to create horizontal or vertical nav bar the hierarchy (nesting) of the list will help us write style rules for the navigation bar be sure the elemetns are properly nested <ul> <li> <a href="index.html"> HOME </a> </li> boome.html rocco.html linkl.html

What type of web addresses do we have?

when you go to www.nyu.edu that is considered a domain each computer has specific ID (IP addresses) series of 3 numbers and periods.

Defining your own XML tags

xml tags are not predefined like HTML tags