Fundamentals

A Brief Intro to the Internet

• In the late 60s early 70s ARPAnet was founded to allow 4 universities to share information

• Later it became the bases for the Internet!

• In the early 80s BITNET was created. It was used for email and list servs.

What is the Internet?

• A world-wide network of computer networks

• At the lowest level, since 1982, all connections use TCP/IP

• No Single organisation is currently responsible for running the Internet

Internet Standards & Coordination

ICANN - The Internet Corporation for Assigned Numbers & Names

• Non-profit organization • Main function is to coordinate the assignment

of:• Internet domain names• IP address numbers• Protocol parameters• Protocol port numbers.

Web Standards and the W3C Consortium

W3C – World Wide Web Consortium

• Develops recommendations and prototype technologies related to the Web

• Produces specifications, called Recommendations, in an effort to standardise web technologies

• www.w3.org

Web Accessibility

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.

• WAI– W3C’s Web Accessibility Initiative

http://www.w3.org/WAI

• WCAG – Web Content Accessibility Guidelines

http://www.w3.org/WAI/WCAG20/quickref/

Universal Design for the Web

The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design

Website Design

There is not enough time in this course to talk extensively about good web site designWeb site design is based on a few obvious principles which are ignored by 99% of web sites• make sure you know who is going to maintain it• avoid well known bad practices• pay attention to accessibility• be clear what your aims are• put yourself in the shoes of your visitors

Intranet & Extranets

Intranet:• A private network contained within an

organization or business used to share information and resources among co-workers.

Extranet• A private network that securely shares part of

an organization’s information or operations with external partners.

The Client/Server Model

• Client/Server can describe a relationship between two computer programs –the "client" and the "server".

Client• Requests some type of service (such as a file or

database access) from the server. Server• Fulfils the request and transmits the results to the

client over a network

The Internet Client/Server Model

• Client –Web Browser• Server –Web Server

Web Client

• Browsers are clients - always initiate, servers react (although sometimes servers require responses).

• Most requests are for existing documents, using HyperText Transfer Protocol (HTTP).

• Mosaic: the first graphical web browser, became available in 1993. Developed by Marc Andreessen and graduate students working at NCSA (National Center for Supercomputing Applications).

• First to use a GUI, led to explosion of Web use.

Wed Servers

• Continually connected to the Internet• Provide responses to browser requests, either

existing documents or dynamically built documents.

• All communications between browsers and servers use Hypertext Transfer Protocol (HTTP)

Web Servers (Cont.)

• Runs web server software (such as Apache or Internet Information Server).

• Apache (open source, fast, reliable)• IIS: Maintained through a program with a GUI

interface

Domain Name

What is “Domain Name”?• It is a unique name for your website. To get a

domain name you have to register the name from domain name registration companies like eHost.com.

• Example: www.google.com

Uniform Resource Locator (URL)

• A type of URI (uniform resource identifier) which represents the network location of a resource such as a web page, a graphic file, or an MP3 file.

• It is a pointer to specific information on the internet. You can think of it as street address for information on the internet.

Top-Level Domain Name (TLD)

• A top-level domain (TLD) identifies the right-most label of the domain name.

• Current generic TLDs:• .com, .org, .net, .mil, .gov, .edu, .int, .aero, .asi

a, .cat, .jobs, .name, .biz, .mobi, .museum, .info, .coop, .post, .pro, .tel, .travel.

County Code TLDs

• Two character codes originally intended to indicate the geographical location (country) of the web site.

• In practice, it is fairly easy to obtain a domain name with a country code TLD that is not local to the registrant.

Examples:.sa, .uk, .ae, .jp, .auSee http://www.iana.org/cctld/cctld-whois.htm

Internet protocols

Protocols• Rules that describe the methods used for

clients and servers to communicate with each other over a network.

• HTTP• Email Protocols• TCP/IP• FTP

Hypertext transfer Protocols (HTTP)

• Set of rules for exchanging files such as text, images, audio.

• Web browsers send HTTP requests for web pages and their associated files.

• Web servers send HTTP responses back to the web browsers.

E-mail protocols

Sending E-mail• SMTP Simple Mail Transfer Protocol

Receiving E-mail• POP (POP3) Post Office Protocol• IMAP Internet Mail Access Protocol

Internet Protocol (IP)

• A set of rules that controls how data is sent between computers on the Internet.

• IP routes a packet to the correct destination address.

• Once sent, the packet gets successively forwarded to the next closest router (a hardware device designed to move network traffic) until it reaches its destination.

IP Address

• An Internet Protocol address is a numerical label assigned to each device, using the IP address you can determine the geolocation which is what country, including down to the city and post code level.

• Each device connected to the Internet has a unique numeric IP address.

• These addresses consist of a set of four groups of numbers, called octets.

Domain Name System (DNS)

• Divides the Internet into logical groups and understandable names

• The DNS associates Domain Names with IP addresses.• Maintains the relationship between IP addresses and

domain names.

Example:Browser: http://google.comIP Address: http://74.125.224.72/

TCP/IP Transmission Control Protocol/

Internet Protocol

• TCP/IP has been adopted as the official communication protocol of the Internet.

• TCP and IP have different functions that work together to ensure reliable communication over the Internet.

• How data should be formatted, addressed, transmitted, routed and received at the destination.

File Transfer Protocol (FTP)

• Web developers commonly use FTP to transfer web page files from their computers to web servers.

• The hosting company will provide you the FTP access details.

Markup Languages

• A markup language is a computer language that use tags to define elements within a document. It is human-readable, meaning markup files contain standard words, rather than typical programming syntax.

Difference between a markup language & programming language ?

• Markup Language:– A language designed to format text.– A markup language is just interpreted by the browser and

not compiled.– E.g. HTML.XML,XHTML and MML

• Programming language:– It is an set of instructions to the computer to perform. – The computer hardware is responsible to execute an

programming language (compiling).– Few Programming Languages are JAVA,C++,C, and VB

Markup Languages

• SGML – Standard Generalized Markup Language– A standard for specifying a markup

language or tag set

• HTML – Hypertext Markup Language– The set of markup symbols or codes

placed in a file intended for display on a web browser.

Markup Languages (cont.)

• XML – eXtensible Markup Langauge– A text-based language designed to describe,

deliver, and exchange structured information. – It is not intended to replace HTML -- it is intended

to extend the power of HTML by separating data from presentation.

• XHTML – eXtensible Hypertext Markup Language– Developed by the W3C as the reformulation of

HTML 4.0 as an application of XML. – It combines the formatting strengths of HTML 4.0

and the data structure and extensibility strengths of XML.

Markup Languages (Cont.)

• HTML5

– The next version of HTML 4 and XHTML 1

– http://www.w3.org/html/– http://www.html5doctor.com

Difference between HTML4, XHTML & HTML5

• HTML4 has a very loose syntax -for example closing tags are often optional.

• This loose syntax was great for amateur developers and made HTML very easy to adopt -however loose syntax isn't great if you want to achieve a specific result across browsers, as it makes it harder for browsers to accurately guess at what you mean .

Cont.

• In XHTML all tags, once opened, must be closed. There are also some restrictions about what tags can be nested inside each other.

• HTML5 provides some important new functionality, especially the explosion in use of the mobile web.

HTML5

Some of the high-profile HTML5 Features are:• Video-HTML5 allows developers to embed video

directly in to a web page without using a plugin. • Geolocation-enables the site to locate the user,

either by GPS (in mobile phones, iPads, etc...), by IP Address (for desktops) and also via Wi-Fi and Bluetooth

• Canvas-This new feature for images allows you to manipulate graphics and photos -it uses JavaScript to allow you to draw graphics on a web page.

Extra Reading?

• Top Ten Mistakes in Web Design: http://www.nngroup.com/articles/top-10-mistakes-web-design/ (See other series)

• Web Accessibility: https://en.wikipedia.org/wiki/Web_accessibility