Final Exam Tuesday, December 18, 2:003:50 p.m. Introduction to Web - - PowerPoint PPT Presentation

▶
final exam tuesday december 18 2 00 3 50 p m
SMART_READER_LITE
LIVE PREVIEW

Final Exam Tuesday, December 18, 2:003:50 p.m. Introduction to Web - - PowerPoint PPT Presentation

Feb 09, 2024 592 likes •2.41k views

Introduction to Web Design & Computer Principles Final Review CSCI-UA 4 Fall 2018 Final Exam Tuesday, December 18, 2:003:50 p.m. Introduction to Web Design & Computer Principles Final Review CSCI-UA 4 Fall 2018 The final exam is

slide-1
SLIDE 1

Introduction to Web Design & Computer Principles CSCI-UA 4 Final Review Fall 2018

Final Exam Tuesday, December 18, 2:00–3:50 p.m.

slide-2
SLIDE 2

Introduction to Web Design & Computer Principles CSCI-UA 4 Final Review Fall 2018

Final Exam

The final exam is cumulative and the format is multiple-choice. Questions will be both concept- and code-based. You should be familiar with material from the lectures, slides, and reading. You should be able to read and answer questions about HTML, CSS, SVG, and JavaScript code. Be sure to arrive on time and bring your NYU ID and a pencil.

slide-3
SLIDE 3

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-4
SLIDE 4

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview www.opte.org

slide-5
SLIDE 5

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

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

slide-6
SLIDE 6

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview 1964, On Distributed Communications

slide-7
SLIDE 7

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Networks Centralized, decentralized, and distributed

A decentralized network represents a less-hierarchical structure than a centralized network. Complete reliance

  • n a single point is not required.

The foundational concept of decentralized networks would be deployed in tandem with what came to be known as “packet-switching,” which entails breaking up communications into small parts, sending them along, and reconstructing them at the end.

slide-8
SLIDE 8

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

The Internet and the World Wide Web

slide-9
SLIDE 9

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

The Internet and the World Wide Web

The Internet and the Web are separate but related things. The Internet is a massive network of networks, a networking infrastructure that connects computers globally. 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. 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.

slide-10
SLIDE 10

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Internet Access 1980s–Present

  • Personal Computing
  • Portable Computing
  • Mobile Computing
  • Ubiquitous Computing
slide-11
SLIDE 11

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

IBM 5150
 1981

slide-12
SLIDE 12

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Apple PowerBook 540c
 1993

slide-13
SLIDE 13

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Apple iPhone
 2007

slide-14
SLIDE 14

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Ubiquitous Computing

slide-15
SLIDE 15
slide-16
SLIDE 16

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-17
SLIDE 17

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview Sam Whitehead / GPB

slide-18
SLIDE 18

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

The Open Web and its Discontents

In many ways we are experiencing the afterglow of the technological promise

  • f freedom and openness.

Networked tools and digital media still

  • ffer lots of possibilities but also

significant problems. What are some of the dystopian aspects of the Internet and the Web today?

slide-19
SLIDE 19

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Re-Decentralization

“A new Decentralized Web has the potential to be open, empowering users around the globe to control and protect their own personal data better than before.” Decentralized Web Summit

slide-20
SLIDE 20

Future of Blockchain scet.berkeley.edu/future-blockchain-berkeley-perspective

slide-21
SLIDE 21

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-22
SLIDE 22

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-23
SLIDE 23

1

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-24
SLIDE 24

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Digital Media Storage Modern vernacular 


  • f 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”
slide-25
SLIDE 25

00101011

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-26
SLIDE 26

+

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-27
SLIDE 27

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-28
SLIDE 28

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Digital Media Transfer Megabits (Mb)

Internet connection speed is normally measured in megabits. Megabits (Mb) are not the same as megabytes (MB). 8 bits = 1 byte; therefore, a megabyte is 8 times the size of a megabit. The average Internet connection speed in the United States in 2015 was 12.6 Mb/second.

slide-29
SLIDE 29

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-30
SLIDE 30

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Moore’s Law Describes a constant rate

  • f change in computer

processor speed

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 has held steady for the past 40 years. Digital media is in a constant state of flux.

slide-31
SLIDE 31

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

slide-32
SLIDE 32

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Guiding Principles Open Source

  • Anyone is free to use it
  • Usually free of charge
  • Source code is made available
  • Can be modified and redistributed
slide-33
SLIDE 33

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Guiding Principles Net Neutrality

The principle that Internet service providers should enable access to all content and applications regardless of the source, and without favoring or blocking particular products or websites.

slide-34
SLIDE 34

Introduction to Web Design & Computer Principles CSCI-UA 4 Class 1 Introduction and Overview

Guiding Principles Web Standards

The formal, non-proprietary standards and technical specifications that define and describe aspects of the World Wide Web and its interoperability. These include:


  • HTML5

  • CSS

  • JavaScript

  • SVG

  • WOFF
slide-35
SLIDE 35

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

slide-36
SLIDE 36

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

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

slide-37
SLIDE 37

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

DOS (Generic term) Microsoft OS Mac OS Linux iOS Android Symbian OS

Operating Systems Examples

slide-38
SLIDE 38

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

Operating Systems History

First digital computers had no

  • perating 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

slide-39
SLIDE 39

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

Command Line Interface / Graphical User Interface

slide-40
SLIDE 40

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

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

slide-41
SLIDE 41

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

Unix Commands

See Reading section of course site for basic Unix commands.

slide-42
SLIDE 42

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

Chmod chmod sets permissions

Every file and directory has nine permissions associated with it Files and directories have three types

  • f permissions (or none):


r (read)
 w (write)
 x (execute)


  • (no permission)

The above permissions occur for each

  • f the following classes or users:


u (user/owner)
 g (group)


  • (other/world)
slide-43
SLIDE 43

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

Permission

U G W rwx rwx rwx rwx rwx r-x rwx r-x r-x rw- rw- r-- rw- r-- r--

Command

chmod 777 filename chmod 775 filename chmod 755 filename chmod 664 filename chmod 644 filename

slide-44
SLIDE 44

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present

Chmod Files and folders

Standard file permission:
 644 Owner can read and write file; 
 group can read file; 


  • thers can read file

Standard directory permission:
 755 Owner can read, write and execute file; group can read and execute file;


  • thers can read and execute file
slide-45
SLIDE 45

Introduction to Web Design & Computer Principles CSCI-UA 4 Operating Systems 1950s to Present Palo Alto Research Center, Incorporated, Courtesy of the PARC Library, 1970 ca.

slide-46
SLIDE 46

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

slide-47
SLIDE 47

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

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

slide-48
SLIDE 48

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

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

slide-49
SLIDE 49

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

HTML Tag Opening/Closing

Keywords surrounded by angle brackets, for example: <html> 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

slide-50
SLIDE 50

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

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>

slide-51
SLIDE 51

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

Web Pages HTML Documents

HTML documents describe Web pages Contain HTML tags in plain text HTML documents are Web pages Recommended plain text editors:
 Sublime Text, Brackets, and Atom

slide-52
SLIDE 52

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

Web Browsers Render HTML Documents

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

slide-53
SLIDE 53

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

Example Bare minimum

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> </body> </html>

slide-54
SLIDE 54

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

Example Explained

<!DOCTYPE html> tells browsers that they are interpreting an HTML document Text between <html> and </html> describes the Web page Text between <title> and </title> is displayed as the page title Text between <body> and </body> is the visible page content

slide-55
SLIDE 55

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

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’s published to a web server An FTP client is used to transfer files from a personal computer to a server Cyberduck, Fetch, WinSCP, Transmit, and FileZilla are good SFTP clients “Local” files are those on a personal computer, “remote” files are those on a web server—“live”

slide-56
SLIDE 56

Introduction to Web Design & Computer Principles CSCI-UA 4 HTML HyperText Markup Language

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
slide-57
SLIDE 57

Introduction to Web Design & Computer Principles CSCI-UA 4 CSS Cascading Style Sheets

slide-58
SLIDE 58

Introduction to Web Design & Computer Principles CSCI-UA 4 CSS Cascading Style Sheets

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

slide-59
SLIDE 59

Introduction to Web Design & Computer Principles CSCI-UA 4 CSS Cascading Style Sheets

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

slide-60
SLIDE 60

Introduction to Web Design & Computer Principles CSCI-UA 4 CSS Cascading Style Sheets

CSS Application

CSS can be applied in three different ways to a Web page:

  • In an external .css file
  • In the <head> section of an HTML

document

  • Inline with HTML code
slide-61
SLIDE 61

Introduction to Web Design & Computer Principles CSCI-UA 4 CSS Cascading Style Sheets

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;
 }

slide-62
SLIDE 62

Introduction to Web Design & Computer Principles CSCI-UA 4 CSS Cascading Style Sheets

CSS 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
slide-63
SLIDE 63

Introduction to Web Design & Computer Principles CSCI-UA 4

CSS Display Mode

Elements in HTML are primarily “inline”

  • r “block” elements.
  • An inline element allows content to

flow around its left and right sides.

  • 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.

Web Page Layout HTML and CSS

slide-64
SLIDE 64

Introduction to Web Design & Computer Principles CSCI-UA 4

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 Cascading Style Sheets

slide-65
SLIDE 65

Introduction to Web Design & Computer Principles CSCI-UA 4 CSS Cascading Style Sheets

slide-66
SLIDE 66

Introduction to Web Design & Computer Principles CSCI-UA 4

CSS Units of Length

There are two types of length units in CSS, relative and absolute. Relative units of length include:


  • em (relative to font size)

  • % (relative to the containing element)

Absolute units of length include:


  • px (pixels)

Alternatively specifications:


  • auto (browser calculates length)

  • inherit (from the parent element)

CSS Cascading Style Sheets

slide-67
SLIDE 67

Introduction to Web Design & Computer Principles CSCI-UA 4 CSS Cascading Style Sheets

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

slide-68
SLIDE 68

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics

slide-69
SLIDE 69

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics

Raster Graphics

Also known as “bitmap” 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 points and lines

slide-70
SLIDE 70

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics

Raster Graphics Web Formats

JPEG
 “Joint Photographic Experts Group” PNG
 “Portable Network Graphics” GIF
 “Graphic Interchange Format” WebP
 Up-and-coming image format but not well supported yet

slide-71
SLIDE 71

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics

slide-72
SLIDE 72

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics

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 Layer support introduced in version 3 (c. 1993)

slide-73
SLIDE 73

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics

slide-74
SLIDE 74

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics

slide-75
SLIDE 75

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics

slide-76
SLIDE 76

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Images Raster Graphics Photomontage by: Mmxx

slide-77
SLIDE 77

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

slide-78
SLIDE 78

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

SVG Scalable Vector Graphics

SVG is a language for describing two- dimensional graphics in XML SVG allows for three types of graphic

  • bjects: vector graphic shapes,

images, and text SVG drawings can be interactive and even styled with CSS

Scalable Vector Graphics (SVG) 1.1
 Introduction
 www.w3.org/TR/SVG/

slide-79
SLIDE 79

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

SVG Scalable

To be scalable means to 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

Scalable Vector Graphics (SVG) 1.1
 Concepts
 http://www.w3.org/TR/SVG/concepts.html

slide-80
SLIDE 80

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

SVG Vector

Vector graphics contain geometric

  • bjects such as lines and curves

This gives greater flexibility compared to raster-only formats Since all modern displays are raster-

  • riented, 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

Scalable Vector Graphics (SVG) 1.1
 Concepts
 http://www.w3.org/TR/SVG/concepts.html

slide-81
SLIDE 81

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

SVG Graphics

Most existing XML grammars represent either textual information or raw data They typically provide only rudimentary graphical capabilities SVG provides a rich, structured description of vector and mixed vector/ raster graphics

Scalable Vector Graphics (SVG) 1.1
 Concepts
 http://www.w3.org/TR/SVG/concepts.html

slide-82
SLIDE 82

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

SVG Advantages

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 files are pure XML

SVG Introduction
 http://www.w3schools.com/svg/svg_intro.asp

slide-83
SLIDE 83

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

SVG 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

Introduction to XML
 http://www.w3schools.com/xml/xml_whatis.asp

slide-84
SLIDE 84

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

SVG Styleable

The advantages of style sheets are now generally accepted, certainly for use with text SVG extends this control to the realm

  • f graphics

It allows for script-based manipulation

  • f the document tree and the style

sheet

Scalable Vector Graphics (SVG) 1.1
 Concepts
 http://www.w3.org/TR/SVG/concepts.html

slide-85
SLIDE 85

Introduction to Web Design & Computer Principles CSCI-UA 4 SVG Scalable Vector Graphics

SVG On the Web

There are a variety of ways in which SVG content can be included within a Web page

  • A stand-alone SVG Web page
  • Embedding by reference, using the

HTML ‘img’ element

  • Embedding inline
  • External link, using the HTML ‘a’

element

  • Referenced from a CSS property

Scalable Vector Graphics (SVG) 1.1
 Concepts
 http://www.w3.org/TR/SVG/concepts.html

slide-86
SLIDE 86

Introduction to Web Design & Computer Principles CSCI-UA 4 Design and Accessibility Thought, Form, and Context

slide-87
SLIDE 87

Design and Accessibility Thought, Form, and Context

Thought

Introduction to Web Design & Computer Principles CSCI-UA 4

slide-88
SLIDE 88

Thought Design is a process that involves you.

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-89
SLIDE 89

Form Photography Illustration Line and Shape Texture Color Typography Composition

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-90
SLIDE 90

Form Color Hue Value Intensity

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-91
SLIDE 91

Form Typography Font selection Type size Alignment Letter spacing Line spacing Grammar

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-92
SLIDE 92

Form Composition Rhythm Proportion Structure Variation Balance Boundary Space

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-93
SLIDE 93

Context

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-94
SLIDE 94

Context Device Web browser Age of visitor Literacy Geographic location Language(s) Ability

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-95
SLIDE 95

Accessibility The Web should be accessible to all regardless of ability and we must design for accessibility.

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-96
SLIDE 96

Accessibility Categories of Disability Vision impairment Mobility impairment Auditory impairment Cognitive impairment

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-97
SLIDE 97

Cultivating a mindful design approach allows you to do more with less.

Design and Accessibility Thought, Form, and Context Introduction to Web Design & Computer Principles CSCI-UA 4

slide-98
SLIDE 98

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Page Layout Design and Code

slide-99
SLIDE 99

Introduction to Web Design & Computer Principles CSCI-UA 4

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

Web Page Layout Design and Code

slide-100
SLIDE 100

Web Page Layout Design and Code Introduction to Web Design & Computer Principles CSCI-UA 4

slide-101
SLIDE 101

Introduction to Web Design & Computer Principles CSCI-UA 4

Wireframing And Prototyping

Here is an approach to wireframing that can be adapted to a variety of design projects.

  • Think
  • Design
  • Implement
  • Revise

This sequence can be looped through as necessary.

Web Page Layout Design and Code

slide-102
SLIDE 102

Introduction to Web Design & Computer Principles CSCI-UA 4

Wireframing Site Map

Web Page Layout Design and Code

slide-103
SLIDE 103

Introduction to Web Design & Computer Principles CSCI-UA 4

Display Mode

Elements in HTML are primarily “inline”

  • r “block” elements.
  • An inline element allows content to

flow around its left and right sides.

  • 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.

Web Page Layout Design and Code

slide-104
SLIDE 104

Introduction to Web Design & Computer Principles CSCI-UA 4

Page Layout

There are several ways to design the layout of a web page with CSS.

  • CSS float property
  • CSS positioning
  • CSS flexible box
  • CSS grid

Web Page Layout Design and Code

slide-105
SLIDE 105

Introduction to Web Design & Computer Principles CSCI-UA 4

Page Layout CSS 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

Web Page Layout Design and Code

slide-106
SLIDE 106

Introduction to Web Design & Computer Principles CSCI-UA 4

Page Layout CSS Positioning

Web Page Layout Design and Code

The CSS position property specifies the type of positioning used for an element on a page. static: Elements are render in order, as they appear in the document flow (this is the default) 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

slide-107
SLIDE 107

Introduction to Web Design & Computer Principles CSCI-UA 4

Page Layout CSS Flexible Box

Use the CSS Flexible Box Layout Module (Flexbox) for arranging items along one axis. Flexbox consists of flexible containers and flexible items within. A flex container expands items to fill available free space or shrinks them to prevent overflow. In practice, flexbox can accommodate different screen sizes and different display devices more easily than the CSS float property.

Web Page Layout Design and Code

slide-108
SLIDE 108

Introduction to Web Design & Computer Principles CSCI-UA 4

Page Layout CSS Grid

Web pages are often laid out using grid systems. CSS grids are intended to make this process more intuitive by defining a grid and then specifying where content should be placed within it. Use the CSS Grid Layout Module for the overall page structure.

Web Page Layout Design and Code

slide-109
SLIDE 109

Introduction to Web Design & Computer Principles CSCI-UA 4 Responsive Web Design Media Queries

slide-110
SLIDE 110

Introduction to Web Design & Computer Principles CSCI-UA 4 Responsive Web Design Media Queries

Responsive Web Design

“The control which designers know in the print medium, and often desire in the web medium, is simply a function

  • f the limitation of the printed page.

We should embrace the fact that the web doesn’t have the same constraints, and design for this

  • flexibility. But first, we must ‘accept the

ebb and flow of things.’” – John Allsopp, “A Dao of Web Design”

slide-111
SLIDE 111

Introduction to Web Design & Computer Principles CSCI-UA 4 Responsive Web Design Media Queries

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

slide-112
SLIDE 112

Introduction to Web Design & Computer Principles CSCI-UA 4 Responsive Web Design Media Queries

Responsive Web Design Foundations

Flexible grids (fluid layouts) Media queries Flexible, responsive images

slide-113
SLIDE 113

Introduction to Web Design & Computer Principles CSCI-UA 4 Responsive Web Design Media Queries

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 max- width prefixes Media queries can be used to load an alternate style sheet or offer alternate styles within an existing style sheet

slide-114
SLIDE 114

Introduction to Web Design & Computer Principles CSCI-UA 4 Responsive Web Design Media Queries

Media Query Syntax

Two possible values: only or not

  • nly 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

slide-115
SLIDE 115

Introduction to Web Design & Computer Principles CSCI-UA 4 Responsive Web Design Media Queries

Basic CSS Rule Set body {background-color: orange;} CSS Rule Set with @media Rule @media only screen and (min-width: 480px) {
 body {background-color: orange;}
 }

slide-116
SLIDE 116

JavaScript Introduction Introduction to Web Design & Computer Principles CSCI-UA 4

slide-117
SLIDE 117

JavaScript

You can think of a web page as consisting of three layers: structure, presentation, and behavior

  • HTML is the structure layer
  • CSS is the presentation layer
  • JavaScript is the behavior layer

JavaScript is a programming language for creating interactivity and functionality in web browsers

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Introduction

slide-118
SLIDE 118

JavaScript Background

JavaScript was was invented by Brendan Eich and introduced by Netscape in 1995 At that time, the Java language was ascendant and the name “JavaScript” was an attempt to ride this popularity Eventually, browsers other than Netscape began to support JavaScript functionality, calling it “ECMAScript” Today, JavaScript is not only a lingua franca of the Web but a basis for many

  • ther computational media projects

JavaScript Introduction Introduction to Web Design & Computer Principles CSCI-UA 4

slide-119
SLIDE 119

JavaScript Introduction Introduction to Web Design & Computer Principles CSCI-UA 4

slide-120
SLIDE 120

JavaScript Application

As with CSS, JavaScript targets HTML elements to do something with them There are three ways you can apply JavaScript to HTML

  • Inline JavaScript
  • Embedded JavaScript
  • External JavaScript

External and embedded JavaScript are preferable for their separation of content and behavior

JavaScript Introduction Introduction to Web Design & Computer Principles CSCI-UA 4

slide-121
SLIDE 121

JavaScript Front-End Language

Like HTML and CSS, JavaScript is usually rendered in the web browser Because it’s rendered in the browser rather than on a server, JavaScript is considered a “front-end language” A browser’s “JavaScript engine” interprets and executes JavaScript code in the browser There are different JavaScript engines for different web browsers

JavaScript Introduction Introduction to Web Design & Computer Principles CSCI-UA 4

slide-122
SLIDE 122

JavaScript Capability

Computationally speaking, there isn’t much JavaScript can’t do; it’s a robust programming language Core functionality includes modifying HTML and CSS, communicating with the server, and storing data We will use JavaScript to modify page content and style, and for interactivity As with any technology, it’s good to consider when to—and not to—use it

JavaScript Introduction Introduction to Web Design & Computer Principles CSCI-UA 4

slide-123
SLIDE 123

JavaScript Document Object Model Introduction to Web Design & Computer Principles CSCI-UA 4

slide-124
SLIDE 124

Document Object Model

When a browser loads a web page, it creates a model of that page This is called a “DOM tree” and it is stored in the browser’s memory Every element, attribute, and piece of text in the HTML is represented by its

  • wn “DOM node”

JavaScript Document Object Model Introduction to Web Design & Computer Principles CSCI-UA 4

slide-125
SLIDE 125

Document Object Model Types of DOM Nodes

There are four main types of nodes.

  • The Document node, which

represents the entire page

  • Element nodes, which represent

individual HTML tags

  • Attribute nodes, which represent

attributes of HTML tags, such as class

  • Text nodes, which represents the text

within an element, such as the content

  • f a p tag

We talk about the relationship between element nodes as “parents,” “children,” and “siblings.”

JavaScript Document Object Model Introduction to Web Design & Computer Principles CSCI-UA 4

slide-126
SLIDE 126

JavaScript Document Object Model

<html> <head> <title>New York University</title> </head> <body> <h1>Intro to Web Design</h1> <p>In this lecture-based course you will learn how to build websites.</p> <p>Class notes are available
 <a href="notes.html">here</a>.<p> </body> </html>

Introduction to Web Design & Computer Principles CSCI-UA 4

slide-127
SLIDE 127

JavaScript Document Object Model Introduction to Web Design & Computer Principles CSCI-UA 4

slide-128
SLIDE 128

JavaScript Document Object Model Introduction to Web Design & Computer Principles CSCI-UA 4

slide-129
SLIDE 129

Document Object Model DOM Queries

JavaScript methods that find elements in the DOM tree are called “DOM queries” DOM queries may return one element,

  • r they may return a “node list”

Which DOM query you use depends

  • n what you want to do and the scope
  • f browser support required

JavaScript Document Object Model Introduction to Web Design & Computer Principles CSCI-UA 4

slide-130
SLIDE 130

Document Object Model DOM Queries

JavaScript methods that return a single element node:

  • getElementById()
  • querySelector()

JavaScript Document Object Model Introduction to Web Design & Computer Principles CSCI-UA 4

slide-131
SLIDE 131

Document Object Model DOM Queries

JavaScript methods that return one or more elements as a node list:

  • getElementsByClassName()
  • getElementsByTagName()
  • querySelectorAll()

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Document Object Model

slide-132
SLIDE 132

JavaScript Events Introduction to Web Design & Computer Principles CSCI-UA 4

slide-133
SLIDE 133

JavaScript Events

As you navigate the web, your browser registers different types of events. Common events include:


  • Clicking or tapping on a link

  • Hovering or swiping over an element

  • Resizing the browser window

  • A web page loading

JavaScript can be used to respond to the multitude of events that occur within the DOM.

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-134
SLIDE 134

Event Types

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-135
SLIDE 135

Event Types UI Events

load unload error resize scroll

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-136
SLIDE 136

Event Types Keyboard Events

keydown keyup keypress

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-137
SLIDE 137

Event Types Mouse Events

click dblclick mousedown mouseup mousemove mouseover mouseout

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-138
SLIDE 138

Event Types Focus Events

focus blur

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-139
SLIDE 139

Event Types Form Events

input change submit reset cut copy paste select

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-140
SLIDE 140

Event Types Mutation Events

DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeInsertedIntoDocument DOMNodeRemovedFromDocument

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-141
SLIDE 141

Event Types Touch Events

touchstart touchmove touchend touchcancel

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-142
SLIDE 142

Event Handling

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-143
SLIDE 143

Event Handling

  • 1. Select an element for the script to

respond to.

  • 2. Specify which event will trigger the

response.

  • 3. Run code specific to that event.

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-144
SLIDE 144

Event Handling Binding

Specifying which event will trigger the response is also known as binding. There are three different ways to bind an event to an element.

  • HTML event handlers
  • DOM event handlers
  • DOM event listeners

Introduction to Web Design & Computer Principles CSCI-UA 4 JavaScript Events

slide-145
SLIDE 145

jQuery JavaScript Library Introduction to Web Design & Computer Principles CSCI-UA 4

slide-146
SLIDE 146

jQuery

Introduction to Web Design & Computer Principles CSCI-UA 4 jQuery JavaScript Library

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

slide-147
SLIDE 147

jQuery Features

Introduction to Web Design & Computer Principles CSCI-UA 4 jQuery JavaScript Library

  • HTML manipulation
  • CSS manipulation
  • HTML events
  • Effects and animation
slide-148
SLIDE 148

jQuery And JavaScript

Introduction to Web Design & Computer Principles CSCI-UA 4 jQuery JavaScript Library

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 JavaScript takes time to learn but it’s well worth it if you want to go further with web development

slide-149
SLIDE 149

Forms Receiving Information on a Web Page Introduction to Web Design & Computer Principles CSCI-UA 4

slide-150
SLIDE 150

Introduction to Web Design & Computer Principles CSCI-UA 4

Forms <form>

Web pages are good not just for providing information to visitors, but also gathering information from them. The HTML <form> 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 Receiving Information on a Web Page

slide-151
SLIDE 151

Introduction to Web Design & Computer Principles CSCI-UA 4 Forms Receiving Information on a Web Page

slide-152
SLIDE 152

Introduction to Web Design & Computer Principles CSCI-UA 4 Forms Receiving Information on a Web Page

slide-153
SLIDE 153

Introduction to Web Design & Computer Principles CSCI-UA 4 Forms Receiving Information on a Web Page

slide-154
SLIDE 154

Introduction to Web Design & Computer Principles CSCI-UA 4

<form action="my-script.php"> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> <br> <input type="submit" value="Submit"> </form>

Forms Receiving Information on a Web Page

slide-155
SLIDE 155

Introduction to Web Design & Computer Principles CSCI-UA 4

Forms HTML

Forms always begin with the <form> element. The <form> element’s action attribute specifies how the form will be processed. The <input> element is used for various kinds of user input. The <input> element’s type attribute determines what kind of input is received from users. Each <input> element must also have a name attribute and value in

  • rder for the data to be sent.

Forms Receiving Information on a Web Page

slide-156
SLIDE 156

Introduction to Web Design & Computer Principles CSCI-UA 4

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 client- side, server-side, or both. We will use a jQuery validation plugin for simple client-side form validation.

Forms Receiving Information on a Web Page

slide-157
SLIDE 157

Introduction to Web Design & Computer Principles CSCI-UA 4

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.

Forms Receiving Information on a Web Page

slide-158
SLIDE 158

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

slide-159
SLIDE 159

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

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

slide-160
SLIDE 160

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

Hand Clap

slide-161
SLIDE 161

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

Periodic Wave

slide-162
SLIDE 162

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

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

slide-163
SLIDE 163

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

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

slide-164
SLIDE 164

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

Digital/Analog Sound

slide-165
SLIDE 165

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

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

slide-166
SLIDE 166

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

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)

slide-167
SLIDE 167

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Audio and Video HTML5 Media Elements

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 <audio> and <video> tags The <audio> and <video> tags use the <source> tag to specify one or more media resources

slide-168
SLIDE 168

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

slide-169
SLIDE 169

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

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

slide-170
SLIDE 170

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

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
slide-171
SLIDE 171

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

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

slide-172
SLIDE 172

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

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

slide-173
SLIDE 173

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

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

slide-174
SLIDE 174

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

Web Hosting Selection

Web hosting costs anywhere from $5 per year to $40 per month, depending

  • n a variety of factors
  • Disk space (more is better, but you
  • ften 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?

slide-175
SLIDE 175

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

Web Hosting Extras

Optional extras

  • Databases (for CMS, blog, etc.)
  • Mailboxes (if you want an email

address with your domain)

  • Customer support (email only or

phone also?)

slide-176
SLIDE 176

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

SEO Search Engine Optimization

Search engine optimization is the process of making your site easy for

  • thers 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

slide-177
SLIDE 177

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

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
slide-178
SLIDE 178

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

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

  • f 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

  • f the page that the site links to

Finally, as more people visit your site, the search ranking will also improve

slide-179
SLIDE 179

Introduction to Web Design & Computer Principles CSCI-UA 4 Web Hosting and Domain Names

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
slide-180
SLIDE 180

Introduction to Web Design & Computer Principles CSCI-UA 4 Final Review Fall 2018

Final Exam Tuesday, December 18, 2:00–3:50 p.m.