Introductions
We are entering a technological age in which we will be able to interact with the richness of living information – not merely in the passive way that we have been accustomed to using books and libraries, but as active participants in an ongoing process, bringing something to it through our interaction with it, and not simply receiving something from it by our connection to it JCR Licklider (1968), The Computer as a Communication Device
The first recorded description of the social interactions that could be enabled through networking was a series of memos written by J.C.R. Licklider (1915-1990) of MIT in August 1962 discussing his "Galactic Network" concept
He envisioned a globally interconnected set of computers through which everyone could quickly access data and programs from any site. In spirit, the concept was very much like the Internet of today.
Licklider was the first head of the computer research program at the Defense Advanced Research Projects Agency (DARPA), starting in October 1962. While at DARPA he convinced his successors, Ivan Sutherland, Bob Taylor, and MIT researcher Lawrence G. Roberts, of the importance of this networking concept Brief History of the Internet – The Internet Society
The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to link several billion devices worldwide
It is an international network of networks that consists of millions of private, public, academic, business, and government packet switched networks, linked by a broad array of electronic, wireless, and optical networking technologies
The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web (WWW), the infrastructure to support email, and peer-to-peer networks for file sharing and telephony
Started as ARPANET - Advanced Research Project Agency Network
Originally an MIT project that was handed off to the Department of Defense’s Advanced Research Project Agency (APRA) in 1962
Launched in 1969 linking four computers at four universities (UCLA, Stanford, then University of Utah & University of California, Santa Barbara)
In the 1980s, evolved into a private/public partnership to provide networked connection to “Personal Computers”
A means of moving data
Developed as an alternative to circuit switching (Think: Sara, the unseen operator on the Andy Griffith Show)
Instead of a dedicated circuit, data is broken into discrete chunks (packets), that are then transmitted to their destination and reassembled by the receiving client
How data is transported across the Internet
The World Wide Web (WWW) is a system used on the Internet for transmitting and retrieving information in a platform independent, easy-to-use manner
The WWW is just one of many technologies that make use of the Internet
Created in 1989 by Tim Berners-Lee at CERN (Conseil Européen pour la Recherche Nucléaire or European Council for Nuclear Research). He helped to specify three fundamental technologies of the Web:
Note that by this time, the Internet had already been around for two decades
The first web page was served in 1990 at CERN
By 1991, people outside of CERN were able to communicate via the World Wide Web
In April 1993, CERN announced that the technologies behind the World Wide Web would be available for anyone to use on a royalty-free basis
Protocol – Established rules governing communication
IP – Internet Protocol. This is the protocol that specifies how information is transmitted over the Internet
IP Address - A unique set of numbers assigned to each machine on a network to identify that machine. Think of IP address as you would a phone number
Created in 1980
Potential number of addresses – 4,294,967,296 (232)
Broken up into smaller 'chunks' and distributed
Spoiler alert: We've run out!
'Dotted Quad'
Addresses expressed as four decimal numbers separated by dots
Each segment ranges from 0-255
e.g., 151.141.92.9
IP addresses are great. However, if you were to tell a perspective student to find out more information about ETSU by visiting 151.141.9.187, would that stick?
We needed a way to translate these IP addresses into a memorable word or phrase – similar to contacts in your phone
Domain Names – Names that are assigned to devices on the Internet to make it easier to refer to the device. Examples include etsu.edu, cnn.com, youtube.com, etc
Most people are more adept at remembering alphabetic/word-based strings (e.g., youtube.com than strings of numbers)
The Domain Name System (more on that in a minute) is a hierarchical (tree-like) structure. There are several levels
Top Level Domains (TLDs) – highest level of the Domain Name System. Examples include .com, .net, .gov
TLDs – Top Level Domains – highest level of the Domain Name System
Common TLDs include .com, .net, .gov, .org, .edu
Countries have 2 letter TLDs - .us (United States), .mx (Mexico), .uk (United Kingdom), .am (Armenia), .me (Montenegro), .ly (Libya), .tv (Tuvalu)
Generic TLDs – created in 2005 by ICANN (Internet Corporation for Assigned Names and Numbers). In 2012, companies were allowed to submit for ownership of potential gTLDs. Currently, over 250 now in existence including .club, .ninja, .cool, .wtf, .democrat, .gop, .republican
Having Domain Names is important for readability and the ability to remember an address. However, we need to translate Domain Names to IP Addresses
Domain Name System - An Internet-based system that translates (people-friendly) domain names into (computer-friendly) IP addresses and vice-versa
Domain Name Servers – Internet-connected computers (servers) that translate Domain Names into IP Addresses to facilitate proper routing on a network
URL (Uniform Resource Locator) – a unique name or address for every document or data element on the World Wide Web
Subdomain – a subdivision of a domain that helps with logical grouping of computers/services (e.g., 'www' - which is where web-related servers are located)
http://www.csci1210.com/labs/lab1/index.php
What if I just type in csci1210.com?
The browser will display http://www.csci1210.com/index.php
Modern browsers and servers will make some assumptions if the information is missing:
Hypertext Transfer Protocol (HTTP) - Specifies the transmission and receipt of hypertext pages (web pages) over a network
Hypertext Transfer Protocol Secured (HTTPS) - Similar to HTTP but secures (encrypts data and verifies the source) the transmission of data
File Transfer Protocol (FTP) - This protocol specifies the transmission and receipt of files over a network
Hypertext - “Linked” text (or images). Allows users to click on text (or images) in a document to take them to other documents and resources
Servers – Powerful computers whose primary role is providing information to other machines (usually many simultaneous requests). This machine waits for a request for information. Once it receives a request, it retrieves the information, performs any processing needed, and sends the data back to the requesting client computer
Clients – End-users' computers that interact with the server
Directory – The structure of files and folders on a drive
Path – The location of a file in a directory
Document root directory – The ‘top level’ directory for a site
Browsers – Browsers are software applications that run on a client machine that displays the web page
The browser is the application that makes the request to the web server
Once it receives the requested file, it will process the file
It may also execute any client side “scripts” (i.e. JavaScript)
Display the file for the user to view
Examples include Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Apple Safari, etc
HTML (Hypertext Markup Language) – HTML is considered the language of the web
It is the language used to create the structure of web pages utilizing 'tags' or 'elements.' These elements are interpreted by the browser and displayed on the screen for end users
CSS (Cascading Style Sheets) – CSS is the way we add style (color, layout, fonts, etc) to our web pages
A web application uses an architecture that consists of clients, a web server, and a network. Clients use web browsers to request web pages from the web server. The web server returns the requested pages
To request a web page, the web browser sends an HTTP request to the web server that includes the name of the requested file. Then, the web server retrieves the HTML for the requested web page and sends it back to the browser in an HTTP response. Last, the browser renders the HTML into a web page
A static web page is a page that is the same each time it’s retrieved. The file for a static web page has .html or .htm as its extension, and its HTML doesn’t change
To deploy a website on the Internet, you need to transfer the directories and files from your computer web server with Internet access. To do that, you can use an FTP program that uses File Transfer Protocol
To see a website, you can enter the URL (Uniform Resource Locator) of the site’s directory into a browser’s address bar. Then, the server looks for the default file in that directory and runs it. If it can’t find a default file, the server displays an index of the subdirectories (unless its sysadmin is smart and blocks it)
HTML (HyperText Markup Language) is the language that defines the structure and contents of a web page. CSS (Cascading Style Sheets) is used to control how the web pages are formatted (more on that later…)
To view the HTML for a web page, you can use your browser’s View Page Source or View Source command. This can be useful when you want to see whether the PHP application generated the correct HTML
To develop web pages, you only need a text editor like Notepad++. Other applications, called Integrated Development Environment(s), including Visual Studio Code, Brackets, Sublime, or TextWrangler, provide extra functionality
Effective and successful websites don’t just happen
In order to better ensure success, a methodological approach, based on research and experience is required
Modern web development is highly competitive
A website can make or break an organization
Web design is a bit of
Graphic Design: 'How the page(s) look'
Interface Design: 'How the page(s) work', methods for doing things – links, buttons, etc
Information Design: 'Organization of the content, how you get to it'
Code Production: 'Coding,' using software tools to create code including editors, editing software, integrated development environments (IDEs)
Web design is a bit of
Programming: Advanced web functionality, forms, interactivity, working w/databases
Multimedia Production: Producing/adding images, sound, video, and animation to a site
Testing: Ensuring the final product meets the clients' and users' needs
Promotion / Marketing: Attracting users to the site; 'selling' the site
Web design is a bit of
Search Engine Optimization: Designing the site so that it will rank high in search engine results
Maintenance Design: Designing so that the site can be easily updated. Errors can be quickly addressed and rectified
Other Concerns: What else might a site's design need?
Web sites exist to be used by people
Not all people have same goals, abilities, equipment, etc
Sites that are not used are not effective
To promote use, web sites must be, well, usable
Usable web sites are designed to meet the needs of targeted site users
By understanding our site users, the principles of usability, and how to use technology, we can create an attractive, usable, commercial web site
A useful system can be used by a real person to achieve a desired goal
Usefulness has two facets:
Utility: Can the desired goal be accomplished? Is the outcome correct?
Usability: How well can users use the system? Is it confusing? Frustrating? Unclear? Ugly?
Useful does not mean boring. Useful means it's fit for the purpose it was intended
'Minimalist Design' seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks
Two primary elements:
Content & Usability
Content
Is it suitable for the targeted audience?
Is use of graphics/sound/multimedia appropriate?
Is it structured appropriately?
This is ongoing / must be considered throughout the design process
Functionally correct
Efficient to use
Easy to learn
Easy to remember
Error tolerant
Subjectively pleasing
Do the page controls work as intended?
Do images display correctly?
Do links work? Are outside links still to active resources?
If things don't work, it is hard to establish trust
What do we mean by 'trust?'
Why is trust important?
Can a user easily find what they're looking for?
Can a user accomplish desired tasks with ease?
Think of users as always being in a hurry. They don't want to have to figure things out and click repeatedly to find what they want
User should be able to [almost] instantly figure out functionality
Site navigation should be intuitive
This is distinct from software that has to be learned / takes time to learn (Think: Photoshop)
"How can I find this quickly in the future?"
"Where was that page that had the information I needed before?"
Sure, users can bookmark pages for later retrieval, but you, the developer, can't count on them to remember to do that
"Oops. I mis-typed my credit card number!"
User enters wrong password
"I missed a required field. Now I have to redo the whole form!"
This issue is particularly noticeable with forms. But any time you're soliciting user input, you also have to plan for users making mistakes. Or worse
Does it look good?
Is it appropriate for its audience? (Harleys vs. Handbags)
How the site looks and whether it is subjectively pleasing are dependent on the site's users. Part of the Design process is learning users' likes/dislikes/interests/needs/goals/etc and applying that knowledge to the design (more, much more on that later)
Usability means a person of average ability and experience can figure out how to use the site to accomplish what they want without it being more trouble than it is worth
To find what they're looking for as quickly and easily as possible
To get information or complete a task with minimum fuss
Not to have to deal with errors
To be able to use/navigate a site without too much head-scratching
To ensure your site satisfies these needs, it's important to know →
Usually land on a site for a specific reason
Scan page(s) to find what they want
Don't like to scroll
Will often scan for links that appear to meet their needs; back-click if the link doesn't
Will get frustrated quickly
Will leave the site when frustrated
Present as much critical information as possible 'above the fold' so the user doesn't have to scroll as much
Group related items and limit the number of groups on each page
Include headers that identify the site and provide navigation to the important parts of the site
Use current navigation conventions, like including a logo that will return users to the home page when clicked, a cart icon that takes the user to his/her shopping cart when it's clicked, previous/next arrows, etc
To create sites that people will use, you must design with those specific people in mind
Understand what interface the user needs
How can we best present our content?
Do users have special needs?
See W3C - Accessibility for more information
To create sites that people will use, you must design with those specific people in mind
Understand who your users are
Who is using the site? What type(s) of person(s)?
Can we create user groups?
Develop profiles
To create sites that people will use, you must design with those specific people in mind
Understand what the user is trying to achieve
Why are they using the site?
What do they want to accomplish?
You must
Test your ideas and interface prototypes with users
Brainstorm / come up with many ideas
Have real users help
Understand how users think
Test 'final' interfaces with your users
Until you obtain specific observations of users in action, you won't know what they will be comfortable with
Remember you, the developer, are not representitative of a typical user
Effective web sites don't just happen
Serious and methodological effort must be applied to
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Answer the following questions. Record your answers in a Word document. When you're done, save and upload the document to the D2L Dropbox - Lecture Quiz 1'
Your uploaded file should look something like this (and, no, the answers in this screen shot are not necessarily the correct answers to the above quiz!)
