Lecture Notes, Lectures 1-12 -Web Development, Lecturer: Phil Joyce PDF

Preview

Summary

Lecture notes for Web Development (now Creating Web Applications).
Lecturer: Phil Joyce...

Description

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps!

27/04/2016

Section 1: Web Concepts Internet ‣

Physical structure is very detailed! -

‣

Transmission media includes fibre-optic, satellites, phone-lines etc.!

Internet grown to connect many devices: computers, cells, TVs etc.!

Networks ‣

Group of nodes throughout the world that are linked together by some media!

‣

Most common structure is client/server

‣

-

Server gives/offers something: service

-

Client requests services!

Types of networks: LANs and WANs! -

Restricted to geographical area, but too subjective: what defines that area?!

-

Historically LAN is: Faster, Reliable!

-

Historically WAN: Slow, Prone to errors!

-

Today LANs & WANs have same characteristics: High speed, Low error rate!

-

Internet is world’s largest WAN!

The Internet ‣

A global interconnection of networks and independent computers using a universal language/protocol (TCP/IP) to communicate -

TCP/IP is the underlying difference between the Internet and other global networks (i.e. the telephone network)!

‣

If you want to connect to the net, you must speak/use TCP/IP!

Offers services: WWW, SMTP, FTP, Telnet*, Gopher*, NNTP* (*not greatly used today)!

The World Wide Web (WWW) ‣

A collaboration of computers that allow for the transmission of documents across the Internet!

‣

Uses browser and server software to provide collection of documents in hypertex structure across the internet!

Page 1 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps!

27/04/2016

How the Internet Works Client: Send me a document Server: Which one? Client: Server\Docs\document.pdf Server: Where do I send it to? Client: Me Server: No I can’t: 1-you don’t have permission and 2-that file doesn’t exist

Client IP: 136.186.5.30

Server serves files back to client and client decodes MIME

Server IP: 64.233.167.99 Client Connects

Requests www.google.com

Server retrieves specified file and d it ( i MIME)

THE INTERNET

MIME Type

DNS Looks & matches www.google.com to 64.233.167.99

Page 2 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps!

27/04/2016

Browsers and Servers ‣

Web browsers/severs collaborate in client/server relation!

‣

Client/Server Semantics: I send a request for which I get a response!

‣

Server Software: provides responses to client’s requests!

‣

Client Software (Browser): handles user’s requests:!

‣

-

Client locates and connects to server !

-

Client requests a document from the server: HTTP!

-

Server locates the document within itself !

-

Server serves/responds the document out: HTTP!

-

Client receives the response!

-

Browser formats and displays served document!

Browsers and servers work on universal standards:! -

HTTP: Hypertext Transfer Protocol! ▪

Key protocol that manages the request/response exchange between browsers and servers!

-

URL: Uniform resource locator! ▪

‣

Identifies location of document and how to send it (the protocol)!

HTTP have stateless connections! -

Connection active only for single requests; after response, HTTP forgets abou any connection!

-

Reduces overhead of simultaneous multiple connections to one server!

-

No memory of past connections:! ▪

Username and password forgotten after connection lost; annoying!

How do clients find servers? ‣

All nodes on the internet have a unique IP address!

‣

IP addresses can have simple, easily-remembered domain names: google.com!

‣

DNS (Domain Name System) servers provide a service to translate/match the

domain name to the correct IP address (i.e. www.google.com matched to 64.233.167.99)! ‣

13 root name DNS servers on Internet that store every domain name on it; very we protected in case of failure, others include authoritative and local name servers!

‣

With DNS server, don’t have to remember IP address/look them up manually any more

Web Documents - What Are They?

Page 3 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps! ‣

27/04/2016

WWW is designed on central, singular element called Web Page -

They’re written in a HTML (Hypertext Markup Language) Format!

-

Users view one page at a time: it’s the single “unit of organisation” of the web!

-

They incorporate many media (image, text, sound, Flash) together to give us content!

‣

Web Sites are a collection of Web pages brought together for a specific purpose! Swinburne’s Web Site brings together Web Pages that are Swinburne-related

Web Documents - How are they structured and interlinked? ‣

Structured as Hypertext! -

Text that can act as link (hyperlink) to take user from one document to another!

-

It’s user-based:! ▪

View the content in any topical order that suits user and their objectives!

▪

When designing websites, need to consider why user is there and the objectives in being there!

▪

This is the central and most unique feature of the WWW!

‣

Links can point internally in the webpage, website or externally to another site!

‣

Links linked in a uniform manner through URLs (which describe where links go to)!

Web Documents - How do we define that structure? ‣

Hypertext Markup Language (HTML) -

Markup language that tells browser how to lay out the structure and content o a web document!

‣

-

Indicates the logical ‘elements’ within documents!

-

It isn’t a programming language (JS) nor is it a formatting language (CSS)!

Cascading Style Sheets (CSS) -

Style description language that tells browser how to present and format the logical ‘elements’ of a document!

-

It is a SEPARATE document !

HTML is the structure of building; where the rooms go, location of objects in each room. CSS is the style/presentation of building; what colours to use, the layout and style used.

MIME (Multipurpose Internet Mail Extensions)

Page 4 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps! ‣

27/04/2016

Universally defines rules on how to exchange information that is non-textua information is transferred and interpreted with MIMEs!

‣

Information is encoded as text, exchanged, and then decoded to view it!

‣

MIMEs contain standard sets of names (known as MIME Content Types) fo different types of data!

‣

MIMEs tell the browser to what type of content the data is and hence how to decode it as that data so that it can be viewed !

‣

Without MIMEs, a browser would ask the user how to decode it (again we’re lazy)!

‣

Examples:!

text/html

text/css

text/javascript

image/gif

program/pdf

Server sends a client a PDF document A browser receives that PDF, and sees the MIME ‘program/pdf’. The MIME tells it that data is encoded as a PDF: thus it decodes/reconstructs it as a PDF When MIMEs don’t work: the hieroglyphics when opening a PDF in MS Word! ‣

Why Mail? Email can only send text, not binary!!

World Wide Web Consortium (W3C)—http://www.w3.org/ ‣

Group of developers, programmers and authors formed in 1994 who:! -

Set up standards and protocols of the internet!

-

Help bring web to full potential!

‣

No enforcement power!

‣

W3C recommendations followed; a uniform approach to building the WWW is in th best interest of everyone!

‣

Their recommended standards cover HTML, CSS, XML, SVG, PNG etc.!

Page 5 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps!

27/04/2016

Section 2: History ‣

Internet born in 1969 with 2 nodes -

-

1960s: US DoD create ARPANet that is! ▪

Non-centralised!

▪

Can survive if network partly destroyed/down!

It shares information across universities (universities processed some information of US DoD nuclear bomb testing etc.)!

‣

Email to communicate between machines, FTP to move files back and forth between machines, Telnet to virtually login/be at a machine all made early 1970!

‣

1977: TCP/IP invented; branches of other complex networks linked to ARPANet and it’s standardised in 1982!

‣

1984: DNS introduced (100 nodes connected in 1977; users had to remember all of their IP manually prior to DNS!!)!

‣

1985: First major hypertext system introduced by Xerox!

‣

1989: ARPANet replaced by NSFNet (National Science Foundation Network)! -

‣

Shift from military-based/operated to education-based/operated!

1990: WWW created by Tim Berners-Lee at CERN -

Links across machines (URLs)!

-

Common document markup language for writing hypertext documents (HTML)!

-

Simple common protocol for exchanging hypertext documents (HTTP)!

-

A way to view and read those hypertext documents (Browsers-First graphical web browser in 1993)!

‣

1994: -

WWW grows at >300,000%

-

HTML 2.0 Released!

-

Yahoo Internet Directory begins!

-

First W3C Meeting!

-

6.5 Million Hosts!

‣

1995: IE 1.0, Java!

‣

1997: HTML 4!

‣

1998: Google!

‣

2000: Internet’s excessive growth causes too much investment; stock bubble bursts -

A website that sells ePetfood does not = profits

Websites that embrace a new medium and different way that it works survive eBay, Amazon, Google, Yahoo!

Page 6 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps! ‣

‣

Web matures in early 2000s: -

XHTML 1.0!

-

Napster (illegal use of internet/piracy emerges)

-

No. XML-based apps grows!

-

DDoS (Distributed Denial of Service) attacks!

-

Security is a concern

‣

‣

▪

Academics using web only = no crimes!

▪

Rest of society join web = crimes!

-

Mobiles connected!

-

Broadband!

-

Firefox!

2005: Web 2.0 -

‣

27/04/2016

The Web becomes social

Today: ! -

Web Usage is three times growth rate of human population!

-

6.85 billion users!

-

Recovering from the bust and now beginning of another boom…!

Current web generation:! -

Movies!

-

Games!

-

Email!

-

Business Apps.!

Future of the Web! -

Web currently based on sharing documents not their content

-

W3C works on a semantic web:! ▪

Share information and what the content means directly!

▪

Not just share documents that’s difficult/time-consuming to extract data from!

Googling weather in Melbourne gives: - Webpage with that information - Advertisements and other information I requested just the weather, why do I get all this other unrelated content?

Weather app example is semantic web; it’s not a web-page but still delivers related content

Page 7 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps! ‣

Resource Description Framework:! -

RDF uses meta-data of ‘data about data’!

-

How we describe data!

Description of the format of a library catalogue is an example ‣

One Web Concept:! -

-

-

Web for everyone ▪

accessibility!

▪

security!

Web on everything ▪

mobile!

▪

voice!

▪

rich web (web 2.0)!

Web of data and services ▪

-

Semantic Web (web 3.0)!

Web as an OS that will provide all non-web applications ▪

Do everything you would inside a browser!

27/04/2016

Page 8 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps!

27/04/2016

Section 3: Web Applications Web Applications—What are they? ‣

Applications allowing dynamic generation of content; provide services for us!

‣

Not static web-pages!

‣

-

Require server-side programming!

-

Databases to store information!

-

All to provide interactivity

Examples: Web Search Engines, Web Directories, Forums, Blogs, Wikis, CMS!

Web Applications—How do they work? ‣

Client requests server for something!

‣

Server passes request to the web application! -

‣

Application processes request and generates a dynamic response -

‣

Web application sends a SQL query to the database and retrieves some info.! Details on how to format/present that info. sent too!

Response sent back to client

Web Search Engine ‣

Search engines search for files stored on computers!

‣

Web Search Engines search for Web Files (Web Pages) on the WWW!

‣

-

User enters search criteria (key words/phrases)

-

Search engine looks for possible matches to this criteria!

-

Results ordered by a matching/most-relevant rank in a list!

They work by automated-bots (‘Web Crawlers’) crawling the WWW to collect info. on web pages! -

Google has collected more info. over longer time than say Bing or Yahoo! which is

why it’s better!

Page 9 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps!

27/04/2016

Web Directories ‣

Directories of links to web sires that are categorised -

‣

Categories based on keywords or topics!

Categories organised by people (not bots as per search engines)! -

Allow people to submit their websites; confirmed by Editors!

-

Some web directories ask for money to be included in commercial categories ! ▪

-

Attract customers with ‘featured ads’ in relevant categories!

Examples are Yahoo!, LookSmart, Google!

Online Forums ‣

Allows people to post messages on a message (forum) board to contribute to a broad range of topics!

‣

‣

Organised as:! -

‘Threads’ or topics

-

Chronological order of ‘flat’ posts!

-

Both (including filtering etc.)!

Forums exist complimentary to another website with a specific purpose! -

Apple forums for troubleshooting Apple’s hardware/software!

‣

Avatars: customised profiles and appearances!

‣

Forums moderated to filter out inappropriate or unrelated posts!

Web Logs (Blogs) ‣

Collects posts into common webpage! -

Range from personal diaries to political campaigns!

-

Content work of multiple or single users!

-

Users can comment on posts: dev. community of active and passive participants!

‣

Blogosphere: Collective content of related blog posts/comments!

‣

Blogstorm: Sudden increase of blog activity!

‣

Content archived, so static permalinks (permanent links) to view old content!

‣

Blog sites offer content to be displayed as raw data feeds (as RSS or as Atom XML)! -

‣

Multiple feeds from multiple sites aggregated and read with feed readers

TrackBack: Keeping track of who has seen an original post and then posted anothe entry about it! -

Done via ping messages to provide alerts!

‣

Blogs implemented with CMS!

Page 10 of 12 

Lecture #1

Alex Cummaudo: Sims 1744070

Web Concept, History, Web Apps!

27/04/2016

Wiki ‣

Interactive method for multiple authors to contribute to existing content! Why is it when I write a web page, no one else can modify it? Hence, wikis were born! No one has their own webpage—anyone can modify it

‣

Accessed with browsers and have their own markup language to format links headings, lists etc.! -

‣

‣

‣

Some wiki software offers a WYSIWYG interface (don’t learn a new markup lang.)!

Pages quickly created/updated -

No need for review before modifications accepted!

-

Offers ‘Recent changes’ so can see what’s happened!

Wiki derives from:! -

WikiWikiWeb of Portland Pattern Repository (the first Wiki)!

-

Quick/Fast in Hawaiian!

User registration not required to contribute and edit!

Content Management System (CMS) ‣

CMS: Software that supports collaborative creation and management of content

‣

WCM: CMS as a web site (hence Web Content Management)!

‣

Very general definition:! -

Project Management!

-

eLearning!

-

Online Collaborative Documentation!

-

Inventory/Stock Management!

-