Internet Programming Programowanie aplikacji WWW

(1)

Internet Programming

Programowanie aplikacji WWW

Maciej Grzenda, PhD

Warsaw University of Technology

Faculty of Mathematics and Information Science M.Grzenda@mini.pw.edu.pl

http://www.mini.pw.edu.pl/~grzendam

(2)

In practice

Develop modern web applications using browser-side and server-side stack of technologies

(4)

Resources

• Books:

– Deitel, P.J., JavaScript for Programmers, Pearson Education, 2010

– Lemay L. and Colburn R. , Sams Teach Yourself Web Publishing with HTML &

XHTML in 21 Days (4th Edition), 2003

– Schafer S.M., HTML, XHTML, and CSS Bible, Wiley Publishing, 2010 (also: HTML, XHTML i CSS, Helion, 2011)

– Schultz D., Cook C., Beginning HTML with CSS and XHTML: Modern Guide and Reference, Apress, 2007 (also: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW, Helion, 2008)

– Zeldman J., Marcotte E., Designing with Web Standards. Third Edition, Pearson Education, 2010

– …

• Web resources:

– www.w3.org

– www.w3schools.com – www.theserverside.com – . . .

Due to the number of technologies present in modern web computing, resources

(5)

Rules of assessment

• 4 tasks prepared during the labs – max. 100 points

• Bonus 10 points from entry tests

• Labs are obligatory

• To pass the module and get 3.0 or a higher grade:

– at least 51 points from all tasks together are required, and

– at least 25 points from the server-side tasks are required

• Final grade:

– 51-60 => 3.0 – 61-70 => 3.5 – 71-80 => 4.0 – 81-90 => 4.5 – 91-100 => 5.0

(6)

Zasady zaliczeń

(rules of assessment in Polish)

• 4 zadania + wejściówki realizowane w trakcie laboratorium – maks. 110 punktów

• Laboratoria – obowiązkowe

• Do zaliczenia wymagane są:

– Łącznie co najmniej 51 punktów, oraz

– Co najmniej 25 punktów z dwóch ostatnich zadań punktowanych

• Ocena końcowa zależy od łącznej liczby punktów:

– 51-60 => 3.0

– 61-70 => 3.5

– 71-80 => 4.0

– 81-90 => 4.5

– 91-100 => 5.0

(7)

Pointed tasks

• The following pointed tasks are planned:

– HTML and CSS – 25 points

– JavaScript and CSS – 25 points

– HTTP Session and Cookies – 25 points

– .NET WebForms and AJAX – 25 points

(8)

HTML

• HTML - Hypertext Markup Language – a language used to define portable

documents:

– Documents that can be properly displayed on any operating system, in any browser (also text-based and mobile browsers)

– Documents require web browser to be

displayed to the user

(9)

HTML – a simple example

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=UTF-8">

<title> Internet Programming - first HTML file

</title>

</head>

<body>

Body text of the document.

</body>

</html>

This document is not formally valid. A tendency to more strictly follow standards is observed. In particular, elements and attributes deprecated in HTML 4.0 should no longer be placed in documents.

(10)

Basic facts about HTML

• Each document is a pure text document

• All multimedia content is placed in separate files

• Each document is a mixture of text and tags

• Each tag has the following syntax

<tagName [attribute1="value1"

attribute2="value2" …]>

…

</tagName>

(11)

Basic facts about HTML – part II

• The text is formatted by a browser – line endings in your source document are ignored unless you use tags ( br or p)

• Each document can be displayed in a different way in different browsers – this is not an error!

• To preserve portability, the browser must be able to decide about final display – there can be

different screen resolutions, window sizes, number

of available colours …

(12)

Sample tags

Tag name Meaning Example

HTML Encloses whole document content <HTML>

….

</HTML>

HEAD Encloses the header section i.e. the

section containing settings affecting the whole document like character encoding BODY Encloses the actual content of a

document i.e. the information to be displayed

A Defines hypertext link i.e. creates the web out of individual documents

<a href="

http://www.pw.edu.pl

">University</a>

P Encloses the text of a paragraph <P>introduction</P>

(13)

Sample tags – part II

Tag name Meaning Example

BR

Ends the line of the text

Text<BR />

The next line

H1-H6

Headers of different size

<H1>Chapter 1</H1>

<H2>Section 1.1</H2>

PRE

Preformatted text – useful for displaying code listings (text identation is preserved)

<PRE>

1 2 3 4 5 6

</PRE>

UL and

LI

Stand for unordered list and list item respectively. OL is used for order list.

<UL>

<LI>first item

<LI>second item

</UL>

(14)

Sample tags – part III

Tag name Meaning Example

OL and LI

Stand for ordered list and list item respectively.

<OL>

<LI>first item

<LI>second item

</OL>

HR

Horizontal line

<hr />

EM

Emphasised

STRONG

Strong text

BLOCKQUOTE

Citation

<blockquote

address="www.sun.com">…</

blockquote>

CITE, Q, INS, DEL, SUP, SUB,

…

Other tags: citation,

inserted and deleted text, superscript, subscript

…

(15)

HTML specifications

• Current specification: 5

• W3C Recommendation, since 28 October 2014

• Former specification:

• 4.01 24 December 1999 – 27 October 2014

• Previous versions: 3.2 and 2.0

(16)

HTML – the future of the language

• The Working Group Schedule of Milestones was:

– 2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review – (…)

– 2009-06 HTML5 Candidate Recommendation – 2010-06 HTML5 Proposed Recommendation – 2010-09 HTML5 Recommendation

• Newer plans were:

– 2010-12? HTML5 Candidate Recommendation, – 2012-01? HTML5 Proposed Recommendation, – 2012-03? HTML5 Recommendation

• Current plan is:

– Recommendation in 2014Q4

• Reality:

– W3C Proposed Recommendation 16 September 2014 at http://www.w3.org/TR/html5/

(17)

HTML 5 – the status of draft specification in 2012

The publication of this document by the W3C as a W3C Working Draft does not imply that all of the participants in the W3C HTML working group endorse the contents of the specification.

Indeed, for any section of the specification, one can usually find many members of the working group or of the W3C as a whole who object strongly to the current text, the existence of the section at all, or the idea that the working group should even spend time discussing the concept of that section.

Source: http://www.w3.org/TR/html5/ (as of 2012)

(18)

HTML 5 – as of 9.2013

• The HTML Working Group has made much progress on HTML5 and related specifications. The HTML Working Group Chairs and the Protocols and Formats WG Chair have been asked by the W3C Team to provide a credible plan to get HTML5 to Recommendation status by 2014. Challenges remain in achieving this goal. We sought to produce a plan that achieves this date and that has minimal risk of delays from unexpected events.

• We'd like to now propose our draft plan to the HTML Working Group for consideration. Here are the key points of our plan:

– Revise the draft HTML WG charter to indicate an HTML 5.0 Recommendation in 2014Q4 and an HTML 5.1 Recommendation in 2016Q4.

– (…)

• We invite the HTML WG, the Accessibility Task Force and the PF WG to review this plan with an open mind and provide feedback.

Source: http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

(19)

HTML5 – as of 9.2014

• Publication as a Proposed Recommendation does not imply endorsement by the W3C Membership. This is a

draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

• (…)

• This specification is intended to become a W3C Recommendation.

Source: http://www.w3.org/TR/html5/

(20)

HTML5 – ongoing works as of 2013

The following features are at risk and may be removed due to lack of implementation.

• Application Cache

• <dialog>

• <details> and <summary>

• <input type=color>

• <input type=datetime>, <input type=month>, <input type=week>, <input type=time>,

<input type=datetime-local>

• <output>

• <style scoped>

• <iframe seamless>

• Custom scheme and content handlers (registerProtocolHandler and registerContentHandler)

• Outline algorithm

• UA mechanism for navigating to resources linked to in cite="", see Bug 18915 for more.

Source: http://www.w3.org/TR/html5/ i.e. W3C Candidate Recommendation 6 August 2013 Hence, the core of HTML5 seems to be accepted. However, some major decisions (such as

(21)

HTML5 tags not supported yet

• Partly implemented in some browsers i.e. some tags work in some browsers

• Some of them work only in some browsers, but this has largely

changed. Still, when developing web applications, older versions of web browsers should be considered, as the status even now may be:

Source and further details at:

http://www.w3schools.com/html5

http://www.w3schools.com/tags/default.asp

(22)

HTML5 tags no longer present in the standard

• Some tags are no longer present in W3ORG HTML5 standard, but might have been already considered by browser vendors

• Hence, they may be listed at W3ORG schools website

Source and further details at: http://www.w3schools.com/html5, http://www.w3schools.com/tags/default.asp

See http://www.w3.org/TR/html5/index.html#elements-1 for a current listing of tags

(23)

HTML5 - statistics

HTML5 DocType web usage trends. The largest web sites tend to switch to HTML5 faster than the rest of the market. The adoption of HTML5 is 53%, 38%, and 35% for

(24)

Web systems - introduction

Web browser

Web server

1. request is sent

2. Document is read

3. Response (the document content or error) is received

0. the user wants to display a document

4. Response (e.g. a web page)

is displayed to the user In this case we assume that all the documents are static i.e. a priori

(25)

Applications involved

• Web browsers:

– Ms Internet Explorer, – Mozilla FireFox,

– Google Chrome, – Safari,

– Opera,

– Mobile browsers…

• Web servers:

– Apache web server,

– Ms Internet Information Services (IIS),

– Other web servers by Google, Oracle …

(26)

Browser statistics - worldwide and in Poland

(27)

HTTP - introduction

• To allow for communication of different browsers and web servers there must be a common

communication protocol

• HTTP (HyperText Transfer Protocol) is the protocol :

– It is built on TCP/IP communication – Default port for the web server is 80

– The communication is based on plain text commands and responses sent without any encryption

Formal specification of HTTP protocol can be found at http://www.w3.org/Protocols

(28)

Dynamic documents

Web browser

Web server

1. request is sent

2a. Document is read

3. Response is received 0. the user wants to display

a document

4. Response is displayed to the user

In this case documents are also 2b. Script is read and executed

(29)

Server-side scripts

• Allow to generate dynamic content (e.g. display the status of the order you made in an internet shop)

• Can be treated as programs that generate web content, in most cases HTML documents

• In most cases access databases to query and update their content

• Typical server-side technologies:

– Microsoft: ASP,ASP.NET – Java-based: JSP, JavaServlets – PHP

– CGI (historically first, just starts the executable file that produces the web content)

– …

(30)

Application server(s)

(e.g. Java EE app. server)

Dynamic documents: a wider perspective

Web browser

Web server

1. request is sent

Static files

a document

Executable scripts

Database management system(s)

(31)

Dynamic documents: a wider perspective+1

Web browser

Web server

1. request is sent

Static files

a document

Executable scripts

Web crawler

Web mining

(32)

Dynamic documents: a wider perspective+2

Web browser

Web server

1. request is sent

Static files

a document

Executable scripts

Web crawler

Web mining

Big data projects

Other data sources

(33)

Big data: case study

• The prices of plane tickets vary over the time. This is governed by airline policies. Interestingly, not necessarily early buy yields the lowest price.

• Farecast company founded on this observation was a big success (it was sold for $110 million). The main idea is to:

– Collect and process large volumes of price data for different routes from airline websites,

– Build prediction models that can be used to guide the ticket purchase process by prediction models,

– Result: $50 of average savings per ticket.

• The database perspective:

– The data not intended for prediction and modelling is used successfully to deliver new value, not thought of before.

(34)

Images

• <IMG SRC="FileName" > serves to display an image

• Different image formats can be used. The accepted formats are:

– GIF (Graphics Interchange Format)

– JPG (Joint Photographic Expert Group) – PNG (Portable Network Graphics)

• Due to different compression algorithms involved,

the file format HAS TO BE chosen carefully

(35)

Entity references

• Used to display special characters

• Example:

<PRE>

For (i=1;i < 10; i++) {

… }

</PRE>

Entity Meaning

lt <

gt >

quot "

apos ‘

amp &

copy copyright sign

beta beta

… …

Other entity references can be found at

http://www.w3.org/TR/html4/sgml/entities.html#h-24.2.1

(36)

Web-based access

• Reduced hardware requirements

• Easier maintenance (just keep your client browser up-to- date)

• Reduced Total Cost of Ownership (TCO)

• Possible to integrate different systems in one interface

• Reduced cost of training – everyone knows how to work with a web browser

• Web 2.0 applications are more user friendly than their predecessors (user’s experience similar to desktop

applications)

(37)

Web-based access

• Not just internet shopping/social media!

• Complete Enterprise Resource Planning (ERP) suites with web access available: e.g. mySAP

by SAP,

• Asset management systems e.g. IBM Maximo

• Numerical maps (GIS systems) e.g. ArcGIS Server by ESRI - browse or even edit maps using web client

• SCADA clients - control industry process through the

web browser

(38)

JPG – basic facts

• designed for storing photographic images

• the quality of the image can be diminished by the JPG algorithm

• true colour graphics can be stored

• support variable compression i.e. lossy

data compression

(39)

GIF – basic facts

• supports animation

• good for simple images, based on a short palette and/or containing large single-coloured regions

• enables background transparency (but simple transparent-colour specification only)

• up to 256 colours can be used

• progressive display capability

• can be replaced by PNG files

• lossless data compression

(40)

Internet Programming Programowanie aplikacji WWW