Final Flashcards
What is the Internet?
A computer network consisting of a worldwide network of computer networks that use standardized network protocols to facilitate data transmission and exchange
Node
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
The Internet
The Internet is a massive network of
networks, a networking infrastructure
that connects computers globally.
The World Wide Web
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.
Internet vs Web
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.
Internet Access
1980s–Present
• Personal Computing • Portable Computing • Mobile Computing • Ubiquitous Computing • Artificial Intelligence and Ambient Computing
Personal Computers Progress
- IBM 5150 (1981)
- Apple PowerBook 540c (1993)
- Apple iPhone (2007)
- Chalayan dress (2007)
- Arduino Uno (2010)
- Apple Watch (2015)
- AI and Ambient Computing
Digital Revolution
Afterglow
Represents a shift from analog and electronic technology to digital These technological developments build upon and continue to inform each other today
Digital Media
Modern vernacular
of 1s and 0s
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”
Moore’s Law
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
open source
anyone is free to use it
usually free of charge
can be modified and redistributed
Operating Systems
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
Operating Systems
Examples
DOS (Generic term) Microsoft OS Mac OS Linux iOS Android Symbian OS
Operating Systems
History
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
Unix
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
Unix
Commands
tba
Chmod
chmod sets permissions
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)
Chmod
Files and folders
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–
HTML
HyperText
Markup Language
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
HTML
Early history key dates
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
HTML Tag
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
HTML Element
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>
Web Pages
HTML documents describe Web pages Contain HTML tags in plain text HTML documents are Web pages Recommended plain text editors: Atom and Brackets
Web Browsers
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
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
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
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
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
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
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
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;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
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
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
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
Page Layout using <div> tags</div>
The HTML <div> 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.</div>
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.
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
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
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)
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
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
Photoshop Form
Photography Illustration Line and Shape Texture Color Typography Composition
Photoshop Color
Hue
Value
Intensity
Photoshop Typography
Font selection Type size Alignment Letter spacing Line spacing Grammar
Composition
Rhythm Proportion Structure Variation Balance Boundary Space
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
Wireframing
And Prototyping
• Think • Design • Implement • Revise This sequence can be looped through as necessary.
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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.
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
jQuery
Features
- HTML manipulation
- CSS manipulation
- HTML events
- Effects and animation
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
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
forms code
First name:
<br></br>
Last name:
<br></br>
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.
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.
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.
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
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
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
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
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
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?
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
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
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
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
