Final Flashcards
(83 cards)
1
Q
What is the Internet?
A
A computer network consisting of a worldwide network of computer networks that use standardized network protocols to facilitate data transmission and exchange
2
Q
Node
A
A point at which lines or pathways intersect or branch; a central connecting point In computing, a piece of equipment, such as a PC or peripheral, attached to a network
3
Q
The Internet
A
The Internet is a massive network of
networks, a networking infrastructure
that connects computers globally.
4
Q
The World Wide Web
A
The Web is a way of accessing
information over the medium of the
Internet, an information sharing model
that is built on top of the Internet.
5
Q
Internet vs Web
A
separate but related things. The Web is just one of the ways that information can be disseminated over the Internet but it is the one we are focused on in this class.
6
Q
Internet Access
1980s–Present
A
• Personal Computing • Portable Computing • Mobile Computing • Ubiquitous Computing • Artificial Intelligence and Ambient Computing
7
Q
Personal Computers Progress
A
- IBM 5150 (1981)
- Apple PowerBook 540c (1993)
- Apple iPhone (2007)
- Chalayan dress (2007)
- Arduino Uno (2010)
- Apple Watch (2015)
- AI and Ambient Computing
8
Q
Digital Revolution
Afterglow
A
Represents a shift from analog and electronic technology to digital These technological developments build upon and continue to inform each other today
9
Q
Digital Media
Modern vernacular
of 1s and 0s
A
On/Off Electrical impulses (+5v / -5v) • Single 0 or 1 = 1 “bit” • A group of 8 bits = 1 “byte” • 1 million bytes ≈ 1 “megabyte” • 1,024 megabytes = 1 “gigabyte” • 1,000 gigabytes = 1 “terabyte”
10
Q
Moore’s Law
A
The number of transistors that can be placed inexpensively on an integrated circuit doubles every two years. The number of transistors is closely connected to processor speed, memory, etc. Computer processor speed has doubled approximately every two years Moore’s Law seems to be plateauing but held steady for the past 40 years. Digital media is in a constant state of flux
11
Q
open source
A
anyone is free to use it
usually free of charge
can be modified and redistributed
12
Q
Operating Systems
A
Software that manages a computer’s resources Allocates resources among other programs Resources include the central processing unit (CPU), computer memory, file storage, input/output (I/O) devices, and network connections Runs indefinitely and terminates only when the computer is turned off
13
Q
Operating Systems
Examples
A
DOS (Generic term) Microsoft OS Mac OS Linux iOS Android Symbian OS
14
Q
Operating Systems
History
A
First digital computers had no operating systems Ran one program at a time, which had command of all system resources A human operator would provide any special resources needed First operating systems were developed in the mid-1950s
15
Q
Unix
A
Operating system by AT&T Bell Labs Originally developed in 1969 Command line interface Portable, multi-tasking, multi-user Free distribution, open system Servers, workstations, mobile devices Basis of Linux and MacOS
16
Q
Unix
Commands
A
tba
17
Q
Chmod
chmod sets permissions
A
Every file and directory has nine permissions associated with it Files and directories have three types of permissions (or none): r (read) w (write) x (execute) - (no permission) The above permissions occur for each of the following classes or users: u (user/owner) g (group) o (other/world)
18
Q
Chmod
Files and folders
A
Standard file permission: 644 Owner can read and write file; group can read file; others can read file Standard directory permission: 755 Owner can read, write and execute file; group can read and execute file; others can read and execute file
7 –> r w x
6 –> rw-
5 –> r-x
4 –> r–
19
Q
HTML
HyperText
Markup Language
A
A language for describing Web pages HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe Web pages
20
Q
HTML
Early history key dates
A
1990: Original HTML specification written by physicist, Tim Berners-Lee for cross-referencing documents 1993: First text-based browser, Lynx, released 1993: Mosaic browser released, adding images, nested lists, forms 1994: First World Wide Web conference held in Geneva 1994: Netscape is formed 1994: The World Wide Web Consortium is formed, w3.org
21
Q
HTML Tag
A
Keywords surrounded by angle brackets, for example: HTML tags normally come in pairs, like <h1> and </h1> The first tag in a pair is the “start tag,” the second tag is the “end tag” Start and end tags are also called “opening” and “closing” tags
22
Q
HTML Element
A
Everything from the start tag to the end tag Example: <p>This is a paragraph.</p> Start tag: <p> Element content: This is a paragraph. End tag: </p>
23
Q
Web Pages
A
HTML documents describe Web pages Contain HTML tags in plain text HTML documents are Web pages Recommended plain text editors: Atom and Brackets
24
Q
Web Browsers
A
Render HTML Docs Reads HTML documents and displays them as Web pages Web browsers do not display HTML tags, but use them to interpret the content of the page Recommended browsers: Firefox, Chrome, Safari, Edge
25
html explained
```
tells browsers
that they are interpreting an HTML
document
Text between and
describes the Web page
Text between and
is displayed as the page title
Text between and is
the visible page content
```
26
SFTP
SSH (Secure) File Transfer Protocol
```
Web pages are usually created
“locally” on a personal computer, then
uploaded to a web server
A web page is not publicly accessible
until it is published to a web server
An FTP client is used to transfer files
from a personal computer to a server
Fetch, WinSCP, and FileZilla are a few
good FTP client options
“Local” files are those on a personal
computer, “remote” files are those on a
web server
```
27
HTML5
| New standard for HTML
```
First version published in 2008
An official W3C recommendation as of
October 2014
• New Elements
• New Attributes
• Full CSS3 Support
• Video and Audio
• 2D/3D Graphics
• Web Applications
• Smartphone Apps
```
28
CSS
```
Cascading Style Sheets
Defines a Web page’s appearance
CSS separates style and content
Consists of a plain text file with rules
for the display of HTML elements
Formatting includes fonts and colors
as well as layout and position
Can be created outside of your HTML
and applied to multiple Web pages
Well-formed HTML is important for
your CSS to work properly
```
29
CSS History
```
Prior to CSS, Web pages were
commonly styled with HTML tags and
structured with tables
This was both tedious and inefficient
Nine different style sheet languages
were proposed, two were chosen as
the foundation
CSS Level 1 emerged as a W3C
Recommendation in December 1996
Browsers began to support CSS over
the next few years
```
30
CSS Application
```
CSS can be applied in three different
ways to a Web page:
• In an external .css file
• In the section of an HTML
document
• Inline with HTML code
```
31
Style Construction
| CSS Rule Set
```
Selector: Indicates which HTML
element will be formatted
Declaration block: Describes the
formatting to apply
Property/value pair: Specifies format
Style rules are separated by a
semicolon
h1 {
color: green;
background: yellow;
```
32
Cascade
```
The principle of the “cascade” is
applied when style rules are in conflict
Three primary factors determine which
style rule wins out:
• Inheritance
• Specificity
• Location
```
33
CSS3
```
Latest standard for CSS
CSS2 is best supported
CSS3 is still evolving but offers new
features for designers and developers
Modern browsers support many
aspects of CSS3
Backwards compatible with CSS2
```
34
CSS Box Model
```
In a web page, every element is
rendered as a rectangular box.
This box includes the following,
changeable properties.
• Content
• Padding
• Border
• Margin
```
35
CSS Box Model
Setting an Element’s
Width and Height
```
• auto (default)
Browser calculates the dimensions
• Length
Define the dimensions in pixels or ems
• %
Define the dimensions in percent of the
containing block (parent element)
• inherit
Specifies that the dimension should be
inherited from the parent element
```
36
Page Layout using
tags
```
The HTML
tag can be used to
give your page structure.
It has no specific meaning except to
outline a section of content.
The div tag is only used in the body
section of an HTML document.
Initially, this structure will not be visible
to the user.
Used in conjunction with CSS, we will
have more control over the form and
layout of web pages.
```
37
Page Layout
| display Property CSS
```
Elements in HTML are primarily “inline”
or “block” elements.
• An inline element has floating content
on its left and right side.
• A block element fills the entire line,
and nothing is displayed on its left or
right side.
The CSS display property allows
you to specify the type of box used for
an HTML element.
```
38
Page Layout
| float Property
```
The CSS float property allows you to
position block elements inline
This means that any element, block or
inline, can be positioned alongside
another element
The CSS float property is one of the
main techniques of web page layout
```
39
Photoshop
| 1987
```
Created by Thomas Knoll, then a PhD
student at the University of Michigan
Originally called “Display”
For displaying grayscale images,
scanned into a computer
Acquired by Adobe in 1988
Released as Photoshop 1.0 for
Macintosh in 1990
```
40
Technological Basis
| Bitmap/raster graphics
```
A grid of picture elements, “pixels,”
each of which contain color and
brightness information
Pixels can be changed individually or
as a group with program algorithms
Contrast vector graphics which
describe lines
Layer support introduced in version 3
(c. 1993)
```
41
What is a GIF?
Graphics Interchange
Format
```
Bitmap image format
Introduced by CompuServe in 1987
Designed to minimize file size and
electronic transfer time
One of the first two image formats
commonly used on Web sites
```
42
Technical Aspects
```
Color palette of up to 256 distinct
colors
Preserves transparency
Uses a compression algorithm to
reduce file size
Also supports sequential frame
animation
“Dithering” approximates a wider range of colors with a small color palette
```
43
Photoshop Form
```
Photography
Illustration
Line and Shape
Texture
Color
Typography
Composition
```
44
Photoshop Color
Hue
Value
Intensity
45
Photoshop Typography
```
Font selection
Type size
Alignment
Letter spacing
Line spacing
Grammar
```
46
Composition
```
Rhythm
Proportion
Structure
Variation
Balance
Boundary
Space
```
47
Wireframing
Website wireframing allows you to plan the layout of your website
It is the process of making design decisions before they are implemented
Wireframing can range from a simple skeletal framework to a detailed mockup of each page
Spending time planning your site makes coding easier
48
Wireframing
| And Prototyping
```
• Think
• Design
• Implement
• Revise
This sequence can be looped through as necessary.
```
49
Website Layout
| CSS float property
Specifies whether or not an element should be positioned alongside of another element on a web page.
none (default)
Element is not floated, and will be displayed where it occurs in the text
left
Element floats to the left
right
Element floats to the right
The clear property removes a float from HTML elements.
50
Website Layout
| CSS position property
```
Specifies the type of positioning used
for an element on a web page.
static (default)
Elements render in order, as they
appear in the document flow
absolute
Element is positioned relative to its first
positioned (not static) parent element
fixed
Element is positioned relative to the
browser window
relative
Element is positioned relative to its
normal position
```
51
Responsive Web Design
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 with alternate style sheets
Responsive web design uses “media queries” to figure out what resolution of device it’s being served on
Flexible images and fluid grids size correctly to fit the screen
Design for flexibility
52
Media Queries
```
Features you can include in a query:
• width • height • device-width
• device-height • orientation
• aspect-ratio • device-aspect-ratio
• color • color-index • monochrome
• resolution • scan grid
Most of the above can be combined
with min- and max- prefixes
Most common are min-width and maxwidth
prefixes
Media queries can be used to load an
alternate style sheet or offer alternate
styles within an existing style sheet
```
53
Media Query Syntax
```
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 is the media type
feature: value
Enclosed by parentheses and
preceded by the word, and
Predefined media features
Multiple features and values can also be combined with and
```
54
Bootstrap
```
Bootstrap is a front end framework for
developing responsive, mobile-first
projects on the Web
It contains HTML and CSS design
templates as well as optional
JavaScript extensions
Originally developed as an internal
toolkit for Twitter, the project was
released as open-source code in 2010
It has since become one of the most
popular front end Web frameworks and
is used by many different kinds of sites
```
55
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
```
56
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
```
57
Bootstrap
| Layout and Design
```
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
```
58
Bootstrap
| Interactivity
```
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
```
59
Sound
```
Sound consists of pressure waves
moving through air
Without air, there is no sound
Our ears are sensitive to pressure
waves and transmit these signals to
the brain
```
60
Sound Recording
Acoustic waves to
electrical waves
```
A microphone consists of a small
membrane that vibrates
Movements of the membrane are
translated into electrical signals
Higher pressure typically corresponds
to higher voltage
```
61
Digital Audio
| Analog to digital
```
An audio signal is an analog
(continuous) format
The electrical waves must be
converted to digital information for
computational processing
Digital recording is accomplished with
an analog-to-digital converter (ADC)
The ADC captures a snapshot of the
electric voltage on an audio line and
represents it as a digital number
Capturing the voltage thousands of
times per second creates a good
approximation of the original audio
```
62
Digital Audio Playback
| Digital to analog
All computers must give us analog signals to be useful
The screen converts digital information to light
The digital-to-analog converter (DAC) takes the sample and sets a certain voltage on the analog outputs to recreate the signal
This voltage is conveyed to the
speakers which create pressure waves in the air
63
Audacity
Open-source
sound editing software
```
Free, open-source software that can
be altered and redistributed
Multilingual
Easy to use
Records live audio
Cuts, copies, splices and mixes
sounds together
Exports to different formats
(with appropriate plugin)
```
64
HTML5 Audio and Video
HTML5 now supports audio and video natively in the web browser
For years, it was necessary to rely on a third party to deliver this kind of content
Now we can use the and tags
The and tags use the tag to specify one or more media resources
65
jQuery Interaction
```
During the semester we have learned
to use HTML to build web pages and
CSS to style them.
The third layer of front-end web
development is interaction.
JavaScript is a programming language
for creating interactivity and
functionality in web browsers.
```
66
jQuery
jQuery is a JavaScript framework that
makes it easier to achieve common JavaScript tasks
It is simpler to access elements using jQuery’s CSS-style selectors
jQuery takes many common tasks and wraps them inside “methods” that you can call with a single line of code
Furthermore, jQuery takes the guess work out of browser support, since it runs in legacy browsers as well
67
jQuery
| Features
* HTML manipulation
* CSS manipulation
* HTML events
* Effects and animation
68
jQuery
| And JavaScript
jQuery does not do anything that couldn’t be done with pure JavaScript
jQuery itself is just a JavaScript file
Its goal is for you to be able to do more with less code
With an introduction to jQuery, you will begin to get a sense of what can be done with JavaScript in general
69
Forms
```
Web pages are good not just for
providing information to visitors, but
also gathering information from them.
The HTML element is used to
define a form for getting user input.
A variety of form elements are used to
provide an interface for the input.
These form elements include text
fields, checkboxes, drop-down menus,
and buttons
```
70
forms code
First name:
Last name:
Last name:
71
Forms
| HTML
```
Forms always begin with the
element.
The element’s action
attribute specifies how the form will be
processed.
The element is used for
various kinds of user input.
The element’s type attribute
determines what kind of input is
received from users.
Each element must also
have a name attribute and value in
order for the data to be sent.
```
72
Forms
| Validation
```
Before form data gets sent, it’s
important to validate the input.
• You may want to make certain form
fields required.
• You probably want to make sure that
certain fields are completed properly.
• You should also verify that malicious
code is not sent along with form input.
Form validation can be done clientside,
server-side, or both.
We will use a jQuery validation plugin
for simple client-side form validation.
```
73
Forms
| Processing
```
Normally, forms are sent to the server
to be processed.
This requires a server-side application
written in a back-end language.
Since server-side coding is beyond the
scope of this class, we will use a free
service that receives form data and
emails it to you.
Formspree is a project that allows us
to easily add forms to otherwise static
HTML pages.
```
74
Domain Names
Domain names serve as a more memorable reference to Internet resources
Domain names are used to identify Internet Protocol (IP) addresses
An IP address is an identifier for a node—a computer or device on a network
75
Domain Names
| TLD
```
Every domain name has a suffix that
indicates which top level domain (TLD)
it belongs to
Top-level domains today are grouped
as follows:
• Generic top-level domains
• Country-code top-level domains
• Infrastructure top-level domain
• Sponsored top-level domain
```
76
Domain Names
| Generic TLDs
```
Generic top-level domains initially
consisted of:
GOV Government agencies
EDU Educational institutions
ORG Nonprofit organizations
MIL Military
COM Commercial business
NET Network organizations
Some of these, such as .com and .net,
are no longer restricted to their original
intended usage
More generic TLDs have since been
added and are being added today
```
77
Domain Names
| Selection
```
When you register a domain name,
you are not its owner, rather you have
the exclusive right to use it
Some factors to consider when
selecting a domain name:
• Relevance to site
• Communicability
• Availability
Here is a list of all domain name
registrars: www.internic.net/alpha.html
```
78
Web Hosting
A Web hosting service allows
individuals and organizations to make their website accessible to others
The host usually provides storage space on a server as well as Internet connectivity
Theoretically, any computer can serve as a Web host, but it needs to always be on and implement measures for
security and stability
79
Web Hosting
| Selection
```
Web hosting costs anywhere from $5
per year to $40 per month, depending
on a variety of factors
• Disk space (more is better, but you
often don’t need more than a few GB)
• Bandwidth (data transfer)
• Up time (reliability)
• Overage: Would you rather be
charged extra or have a hard cap if
you reach your data limits?
```
80
SEO
Search Engine
Optimization
Search engine optimization is the process of making your site easy for others to locate
The more thoughtfully and selectively you add keywords to your pages, the better your search rankings
There are several factors that help your website to rise in search results
81
SEO
| On-Page Techniques
```
On-page techniques are the methods
you can use to improve search results
for your site
This involves identifying and
implementing keywords in seven
particular places in your page
1. Page title
2. URL
3. Headings
4. Text
5. Link text
6. Image alt text
7. Page descriptions
```
82
SEO
| Off-Page Techniques
```
Search engines also look at the
number of other sites that link to yours
to determine search ranking
This is especially so when the content
of a referring site is similar to yours
It’s ideal when the words that appear in
links to your site also appear in the text
of the page that the site links to
Finally, as more people visit your site,
the search ranking will also improve
```
83
Analytics
```
Once people start visiting your site, it’s
helpful to know!
Analytics tools allow you to observe
data about the traffic your site receives
This can include the following
information:
• Number of visits
• Geographic location of visitors
• Time spent on pages
• Referring web page
• Browser information
• Real-time activity
```
