Technologies-I: Uttam K. Roy

eb
Technologies-
I
Uttam K. Roy
Dept. of Information Technology,

Jadavpur University, Kolkata
u_roy@it.jusl.ac.in
© 2
© 3
Infant
© 4
Kid
© 5
Kid
© 6
Kids
© 7
Teenagers
© 8
Professional
© 9
Aged
© 10
Range of users(0-100)
© 11
U s e r s (in b illio n )
0
1
2
3
©
Year
WWW 1990-2015
12
Users in India
USA
CHINA
INDIA
© 13
Are all doing
useful things?
© 14
Impacts of WWW
© 15
They are linked
© 16
Internet Bank Fraud
 Rs11,022 Crore of Frauds
Discovered In Public Sector Banks
Between Apr-Dec 2014
© 17
© 18
Bank Fraud Rate
12000
10000
Farud (in crore)
8000
6000
4000
2000
0
2009 2010 2011 2012 2013 2014 2015
Year
© 19
© 20
Resons?
Is WWW itself
faulty?
Not designed
properly?
© 21
Web as a piece of cake
© 22
Don’t ask me
 I don’tanything.
know
I can use only
 It’s not my job
facebook.
© 23
A little knowledge ↓ no. of
fraudulent activities drastically.
 Don’tbe only an ordinary WWW

user, know it.
© 24
Two options
© 25
eb
Technologies-
I
Uttam K. Roy
Dept. of Information Technology,

Jadavpur University, Kolkata
u_roy@it.jusl.ac.in
TOC
Web Technologies: Basics
Web Safety
© 27
Web
Technologies
: Basics
A brief history
© 29
WWW—A brief history
TimComputer
Berners-Lee was
Year 1990
working in CERN Lab. in
networks exist
Geneva, Switzerland.
that time
© 30
WWW—history contd.
Tim
Fileswanted
Developed
were a
tosystem
access
stored in
them
computers
© 31
What did he developed
 Developed everything
 Web server (CERN httpd)
 Browser (WWW)
 Protocol,
 First website
 Want to see?
© 32
First web site
© 33
First web site
© 34
© 35
Detail history
http://info.cern.ch
© 36
WWW Today
Internet
© 38
WWW—What?
 WorldWide Web—a repository of
information
 Text, audio, video, Image etc.
 Accessible from everywhere
 Mistakenly called as Internet
© 39
WWW
 Purpose
◦ To share information
 How to share?
◦ A protocol is needed
◦ HyperText Transfer Protocol (HTTP)
© 40
HyperText
Transfer
Protocol
HTTP Overview
 Purpose?
◦ Transfer resources
A client-server protocol
 Components
◦ Web server—provides resources

◦ Web client—uses resources
 How it works?
© 42
How HTTP works?
Network
Network
Send
Send me
me
index.html
index.html
Here
Here itit is
is
Web Client Web Server
© 43
Web Server
 Processes requests via HTTP
 Distributes info on the WWW
 Current market share
Product Vendor Percent(April 2015)
Apache Apache 39.25%
IIS Microsoft 27.83%
nginx NGINX, Inc. 14.87%
GWS Google 2.36%
© 44
The Protocol
 Two message
◦ Request message
◦ Response message
Messages
Messages
Request
Request Response
Response
© 45
Message format
© 46
The Protocol
Request
Request
Response
Response
© 47
Resource Addresses
 URL
◦ An addressing scheme to identify

resources
 Example
◦ http://www.yahoo.com/
© 48
URL Format contd.
 Method
◦ protocol used to retrieve the document

 Host
◦ name/IP address of computer where the info

is located
 Port
◦ optional port # of the server (default is 80)

 Path
◦ path name of the file
© 49
HyperText
Markup
Language
What?
 Used to write web pages
 Layout
and hyperlink specification
language
 Definesthe syntax and placement of
various media like text, images etc
 Standardizedby World Wide Web
Consortium ( )
© 51
HTML Flavors
 HTML – Hyper Text Markup
Language
 SGML – Standard Generalized
Markup Language
 XHTML - Extensible HTML
 DHTML - Dynamic HTML
 XML – Extensible Markup Language
© 52
Files
 HTML is structured in hierarchical
order
 Organized in hierarchical fashion
such as File management in
computer
 DOM – Document Object Model
© 53
Components
 Tags
◦ Commands to do something
 <html>, <body>, <hr>, <br>
 Attributes
◦ Modify tag’s appearance and behavior

 <hr width="100" color="red">
© 54
Structure
 Tree like structure <html>
<head>
html <title>
…
head body </title>
…
title </head>
<body>
…
</body>
</html>
© 55
Example
<html>
<head>
<title>First html</title>
</head>
<body>
Hello World!
<hr width="200" align="left">
</body>
</html>
© (/web/html/hello.html) 56
Result
© 57
Another Example
 login.html
<html>
<head>
<title>My First html page</title>
</head>
<body>
<form action="ckeck.jsp">
<table>
<tr><td>login</td>
<td><input type="text" size=10></td></tr>
<tr><td>password</td>
<td><input type="password" size=10></td></tr>
</table>
<input type="reset" value="Clear">
<input type="submit" value="Login">
</form>
</body>
</html>
© 58
Another Example
© 59
 Released5th version
in October 2014
 Deprecated and added

few tags
 http://www.w3.org/TR/html5/
© 60
Cascading
Style Sheet
CSS Motivation
 Mixingdisplay instructions and style
information:
 Adds complexity
 Inefficient mechanism for handling display
characteristics of multi-page Web sites
 Limits cross-platform compatibility of content
 limits diversity of styles
 Solution?
◦ Separating Style from Structure
© 62
Separation of style info
Content
Style
Web
page
© 63
Benefits
 Same CSS may be applied to
different web pages
Style Web
Web
page page
Web Web
page page
© 65
Benefits
 Different
CSS may be applied to a
web page
Body
Layout Text
Text
Physical layout
Heading
Headings
Body
Body
© 66
CSS for devices
 Choose suitable CSS
BROWSER
Content CSS
CSS
CSS
MOBILE
Content
Tab
© 67
Example


<html>
<body>
<head>
<link
<p><p rel="stylesheet" type="text/css"
style='color:red;font-size:40pt;'>
color:red; font-size:40pt;
href="mystyle1.css"
Hello World! />
</head>
</p>
</body>
<body>
</html>
<p>Hello World!</p> /*mystyle1.css*/
</body> p {
</html>
}
© 68
Another example

<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle2.css" />
</style>
</head>
<body>
<p>abc</p>
</body>
</html>
p:first-letter {font-size: 500%; }
p:first-line {font-variant: small-
caps;font-weight: bold }
© 69
Result
© 70
 Latest Standard
 More features
 Modules
 Modern browsers support them
© 71
An HTML system
HTML
document Web Server
Internet
Web Client
Parser, formatter,
interface
© 73
Role of HTML
 HTML
◦ Designed to display data

◦ Focuses on appearance
◦ Has a fixed set of predefined tags
◦ Ambiguity
© 74
Role of XML
 Designed to structure, transport and
store data
 Transformation and Dynamic data
customization
 Interoperable
way to represent and
process documents
 Self descriptive
© 75
Example
<note>
<to>John</to>
<from>Ani</from>
<heading>Reminder</heading>
<body>Return my book on Monday</body>
</note>
© 76
Another example
<song>
<title>Requiem</title>
<composer>Mozart</composer>
</song>
 Equivalent HTML code:
 <p>Requiem is a song composed by

Mozart</p>
© 77
Another Example
<question>
<text>What is the full form of XML?</text>
<A>eXtra Markup Language</A>
<B>eXtensible Markup Language</B>
<C>X-Markup Language</C>
<D>eXpandable Markup Language</D>
<answer value=“B”/>
</question>
© 78
Another Example
<schedule>
<appointment>
<subject>Lecture on web design</subject>
<when>
<date day=‘29’ month=‘08’ year=‘2013’/>
<startTime hour=‘2’ minute=‘30’/>
</when>
</appointment>
<appointment>
<subject>Setting queston paper</subject>
<when>
<date day=‘29’ month=‘08’ year=‘2013’/>
<startTime hour=‘10’ minute=‘30’/>
</when>
</appointment>
</schedule>
© 79
Another Example
<contact>
<person>
<name>B. S. Roy</name>
<number>9345654334</number>
</person>
<person>
<name>G. Mahapatra</name>
<number>9444554734</number>
</person>
</contact>
© 80
Role of XML
 Not a replacement of HTML
◦ XML focuses on what data are
◦ HTML focuses on how data look
 Tagsare custom defined (not
predefined)
◦ Functional meaning depends on
application
© 81
Displaying XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl"
href="books.xsl"?>
<bookstore>
<book category="literature">
<title lang="beng">Sanchoita</title>
<author>Rabindranath Tagore</author>
<year>2009</year>
<price>200.00</price>
</book>
…
© 82
XSLT
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>
<xsl:template match="/">
<html>
<body>
My Book Collection:
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th><th>Author</th><th>Year</th><th>Price</th>
</tr>
<xsl:for-each select="bookstore/book">
<tr>
<xsl:for-each select="./*">
<td><xsl:value-of select="."/></td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
© 83
Result
© 84
Validation
 XML documents contains custom
tags
 Howwill you ensure that XML
document contains expected tags?
 Solution
◦ DTD/Schema and many more
© 85
© 86
XSLT
© 88
XSLT
<employee>
<name>K. Pal</name>
<sex>male</sex>
<status>single</status>
<salary basic='1500' DA='1000'/>
</employee>
Transformation
<employee profile='male single'>

<name>K. Pal</name>
<salary>
<basic>1500</basic>
<DA>1000</DA>
</salary>
</employee>
© 89
© 90
Web
Programming
Paradigm
Web Prog. Paradigm
Request
Network
Network
Response
Client-side Server-side
© 92
Programming Paradigm
 Client-side
◦ JavaScript, VBScript, Applets
 Server Side
◦ Servlet, JSP, JSF, ASP, PHP, CGI
© 93
Role
 HTML
◦ Static tell the browser how a

document should appear
 JavaScript Programming Language
◦ Makes web pages more dynamic and
interactive
◦ Change contents of document, animate
© 95
Example
 The <script> Tag
◦ JavaScript programs are run from within an HTML
document
◦ <script> and </script>
 Used to notify the browser that JavaScript statements
are contained within
© 96
Example contd.
Java Script Start Tag
<html>
<body>
<script language = "JavaScript">
document.writeln("Hello
world!");
</script> Java Script End Tag
</body>
</html>
© 97
Another example
 multiplyEvent.htm
 password.html
 validation.html
 DHTML/dynamicForm.htm
 DHTML/dynamicTable.htm
© 98
Related Technologies
© 99
Server Side
Programming
Basic Idea
Find handler
temp.jsp
Execute
Network
Network
Here it is
HTML Response
Web Browser
Web Server Extension
© 101
Server-side technologies
 Servlet
 JSP
 ASP
 PHP
 JavaScript
 CGI
◦ Perl, C/C++, Python, shell script
© 102
Java Server
Pages
JSP
 Embed Java code in html pages
directly
 Uses delimiters <% and %>
 Java
is an extremely versatile
language
 The power of JSP is unquestionable
© 104
Temperature conversion
<table border="1" align="center">
<caption>Temperature Conversion chart</caption>
<tr><th>Celsius</th><th>Fahrenheit</th></tr>
<%
for(int c = 0; c <= 100; c+=20) {
double f = (c*9)/5.0 + 32;
out.println("<tr><td>" + c + "</td><td>" + f +
"</td></tr>");
}
%>
</table>
© 105
Retrieving parameters
<%
String name =request.getParameter("name");
out.println("Hello " + name);
%>
© 106
Adding two numbers
<%
int a = Integer.parseInt(request.getParameter("a"));
int b = Integer.parseInt(request.getParameter("b"));
out.println(a + " + " + b + " = " + (a + b));
%>
© 107
Examples
 temp.jsp
 getParameterDemo.jsp
 add.jsp
© 108
Session Tracking
 intUrl.jsp
 intHidden.jsp
 intCookie.jsp
 intSession.jsp
© 109
Java DataBase Connectivity
 A Java API used to access database
Get result Query

Network
Network Network
Network
Here it is Response
Web Browser Web Server Database
DataBase access
© 110
Supporting Databases
© 111
Example
 // D:\apache-tomcat-
6.0.18\webapps\wt\ajax
 //result.htm
 //getResult.jsp
© 112
 Problems of traditional web applications
 A framework to develop better, faster and
more interactive web applications

 Commonly uses XML as the format for
receiving data from server
© 114
Example
 // D:\apache-tomcat-
6.0.18\webapps\wt\ajax
 //getResult.jsp
© 115
 Popular scripting language
 Syntax
similar to C which is why it is
so popular.
 An example
© 116
<?php echo '<p>Hi! from php'; ?>
© 117
Perl
#!D:/Perl64/bin/perl.exe
print "Content-type: text/html\n\n";
print "Hi! from perl!";
© 119
#!D:/Python27/python.exe
print "Content-Type: text/html\n"
print "Hi! from python"
© 120
Shell script
@echo off
echo Content-Type: text/plain
echo.
echo Hi! from batch file
© 121
#include <stdio.h>
int main() {
printf("Content-type: text/html\n\n");
printf("Hello world from c");
return 0;
}
© 122
An application
http://127.0.0.1:8080/web/exec.htm
© 123
Web Safety
© 125
© 126
Web Safety
 How important?
 It
is not possible to give up using
web and sit back
 Must find a way out yourself
 Conventional approaches have
failed to fully protect
© 127
Web Threats
 Worms
 Trojan Horse
 Bots and Botnets
 Hacking
 Phishing
 Spam
 Spyware/Malware/Adware/Ransomware
 Virus
© 128
Reasons?
 Is not the web itself safe?
 or
 Users are responsible?
© 129
WWW: Weak Points
 SMTP
 CGI
 Session Tracking
© 130
How do they spread?
 Can't do anything without your help.
 You download them

 Click them to install/open
 They take control
© 131
Anti-virus
Can an anti-virus really
protect your computer?
What is a virus?
An unwanted(?) program
© 132
An example
 Write following in a batch file dc.bat
(say)
del *.class
Is this file a virus?
© 133
How Anti-virus works?
 Consults a virus definition file
 If
file does not have info. about a
virus?
 Anti-virus fails
 Remedy
◦ Update definition file
© 134
Important questions
How frequently will you update?
If a virus gets installed between

two successive updates?
Is your anti-virus reliable?
Don’t they themselves produce

viruses to survive?
© 135
How to be
Web Safe?
Be Web Safe
© 137
Be Web Safe
Check before Install
Don’t rely on key generators
Don't OPEN unknown email

attachments
Use a firewall
© 138
Be Web Safe
 Avoid sites that do not use https
© 139
Be Web Safe
Beware of AJAX
Backup important data

regularly
Get habituated to reinstall

OS yourself
© 140
THINK
True
Helpful
Inspiring
Necessary
Kind
© 141
Web
Be
Wide
Wise

Technologies-I: Uttam K. Roy

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Technologies-I: Uttam K. Roy

Uploaded by

Copyright:

Available Formats

eb

Dept. of Information Technology,

 Don’tbe only an ordinary WWW

Dept. of Information Technology,

◦ Web server—provides resources

Web Client Web Server

◦ An addressing scheme to identify

◦ protocol used to retrieve the document

◦ name/IP address of computer where the info

◦ optional port # of the server (default is 80)

◦ path name of the file

◦ Modify tag’s appearance and behavior

 Deprecated and added

◦ Separating Style from Structure

 Modern browsers support them

◦ Designed to display data

 Equivalent HTML code:

 <p>Requiem is a song composed by

◦ DTD/Schema and many more

<employee profile='male single'>

◦ JavaScript, VBScript, Applets

◦ Static tell the browser how a

◦ Perl, C/C++, Python, shell script

 A Java API used to access database

Get result Query

Web Browser Web Server Database

more interactive web applications

receiving data from server

 Users are responsible?

 You download them

 They take control

Is this file a virus?

◦ Update definition file

If a virus gets installed between

Is your anti-virus reliable?

Don’t they themselves produce

Don’t rely on key generators

Don't OPEN unknown email

Backup important data

Get habituated to reinstall

You might also like