01-CCFP4.0_IUWT

Introduction to UI Concepts and Web Technologies

Education, Training and Assessment We enable you to leverage knowledge anytime, anywhere!

Copyright 2013-2014, Infosys Limited ConfidentialConfidential

Copyright Guideline 2014 Infosys Limited, Bangalore, India. All Rights Reserved.

Infosys believes the information in this document is accurate as of its publication date; suchinformation is subject to change without notice. Infosys acknowledges the proprietary rights ofother companies to the trademarks, product names and such other intellectual property rightsmentioned in this document. Except as expressly permitted, neither this documentation norany part of it may be reproduced, stored in a retrieval system, or transmitted in any form or byany means, electronic, mechanical, printing, photocopying, recording or otherwise, without theprior permission of Infosys Limited and/ or any named intellectual property rights holdersunder this document.

2


Confidential Information This Document is confidential to Infosys Limited. This document contains information and data that

Infosys considers confidential and proprietary (Confidential Information). Confidential Information includes, but is not limited to, the following:

Corporate and Infrastructure information about Infosys Infosys project management and quality processes Project experiences provided included as illustrative case studies

Any disclosure of Confidential Information to, or use of it by a third party, will be damaging to Infosys. Ownership of all Infosys Confidential Information, no matter in what media it resides, remains with

Infosys. Confidential information in this document shall not be disclosed, duplicated or used in whole or in part

for any purpose other than reading without specific written permission of an authorized representative of Infosys.

This document also contains third party confidential and proprietary information. Such third party information has been included by Infosys after receiving due written permissions and authorizations from the party/ies. Such third party confidential and proprietary information shall not be disclosed, duplicated or used in whole or in part for any purpose other than reading without specific written permission of an authorized representative of Infosys.

3

3


Course Information

Course Code: CCFP4.0-IUWT

Course Name: Introduction to UI Concepts and Web Technologies

Document Number: IUWT-01

Version Number: 4.0

4


Course Objectives5

Introduction to UI and Web

Technologies

Identify the Internet components, protocols and their functionality

Create a static web page with standard look and feel using

HTML and CSS

Introduce all three ways of specifying styles

(external, embedded, inline)

Validate web page using JavaScript

Add interactivity to a web page using

JavaScript


Topics Internet Basics

Types of network, Topologies, Connecting devices

Network Architecture

TCP/IP reference model

IP Address

Web Fundamentals Browser, URL, DNS, HTTP, Web servers, Types of Web Content

HTML and Cascading Style Sheets (CSS) Formatting tags, List, Links, Tables, Images and Forms

JavaScript Introduction to JavaScript

Client side validations

Introduction to Document Object Model (DOM)

6


Impact of Web 7

We all are living in the web era. Do you know what makes it tick?

Facebook

1.28 billion

active users

Guided Activity : Assignment 1


Information and Collaboration

8

Uses of Web

Chat

E-mailSocialnetwork

Distributeinformation Resource

share

Load share



Web: An overview9

HTTP HTML DNS PROXY

TCP/IPNETWORKS ROUTER

Browser URL

IP AddressServer

Under the hood:Networks


11

Computer Networks Collection of computers interconnected to exchange information and share

resources


Local Area Network (LAN)

12


resources


13


resources

Mexico

Mysore Mangalore


14


resources

Mexico

Mysore Mangalore

Wide Area Network (WAN)


Computer Networks Based on geographical spread15

Local Area Network

Interconnects computers within a limited area such as building or campus

Owned by single organization

Data transfer rate is high and high reliability

Implementation cost is low

Wide Area Network

Interconnects computers across different locations within cities, countries or continentsOwned by multiple organizations or peopleRelatively lower data transfer rate and low reliabilityHigher implementation cost compared to LAN


Computer Networks Based on data flow16

Dedicated communication channel is established between the nodes

Guarantees availability, bandwidth of the channel and remains connected throughout the session

Acts as if the nodes are physically connected Also known as connection oriented type Example: Telephone switching systems

Circuit Switched

No need for dedicated connection between the communicating nodes

Data is fragmented into packets Each packet has the information such as source

and destination address, size of data etc. and can traverse through different paths

Also known as connectionless type

Packet Switched

Under the hood:Network Topologies


Network Topology Refers to how the computers are connected in a network either physically or logically Geometric representation of relationship of all the computer and interconnecting

devices Examples of Network Topologies are:

BUSBUS

MESHMESH

STARSTAR

RINGRING

Choice of topologies is based on communication cost, installation cost, and reliability

18


Bus Topology

Overview Nodes connected through shared communication cable called Bus

Nodes are connected to the bus by drop lines

- Simple, reliable and easy to use, especially in smaller networks

- Less expensive

Advantages

- A break in the bus brings the entire network down- Not very much scalable- Only one node can transmit at a time

Disadvantages

19

Under the hood:Interconnecting Devices


Interconnecting Devices There are many different devices for interconnecting networks.

Repeaters

Bridges

Routers

Gateway

Router/Switch

Gateway

Bridge

Repeater

X.25

NetworkIP network

LAN

LAN LAN

LAN

21

LAN


Repeaters A Repeater enables signals to travel

longer distances over a network.

It works at the OSI's Physical layer.

Repeaters do not translate anything.A repeater regenerates the

received signals and then

retransmits the regenerated

signals on other segments.

Repeater

Weakened Signal Regenerated Signal


Bridges It works at the Data Link Layer of the OSI model.

A bridge can join segments or workgroup LANs. It can also divide a network to isolate traffic or problems.

Uses:

Expand the distance of a segment.

Provide for an increased number of computers on the network.

Reduce traffic bottlenecks resulting from an excessive number of attached computers.

As traffic passes

through the bridge,

information about

the computer

addresses is then

stored in the bridge's

RAM. The bridge will

then use this RAM to

build a routing table

based on source

addresses.

Host Host HostHost

Host

Host

Host

Bridge

Segment 1

Segment 2

Network


Routers

A complex network needs a device,which not only knows the address ofeach segment, but also candetermine the best path for sendingdata and filtering broadcast traffic tothe local segment. Such device iscalled a Router.

It works at the Network layer of the OSI model

Routers can switch and route packets across multiple networks.

Network 1

Network 1

Network 2

Router

10.0.1.0/255.255.255.0

10.1.0.0/255.255.0.0

10.2.1.0/255.255.255.0


Gateway Gateways make communication

possible between differentarchitectures and environments.

Repackages information to match therequirements of the destinationsystem.

Change the format of a message sothat it will conform to the applicationprogram at the receiving end of thetransfer.

A gateway links two systems that do not use the same:

Communication protocols Data formatting structures Languages Architecture

Host A

Host B

Host C

Gateway

Network

NetworkRouter



Gateway Vs RoutersGateway Routers

NetworksGateways regulate traffic

between two dissimilar networks

Routers regulate traffic between

similar networks

Packets Less information in packetsRouters have access to more

information in packets

Complexity Simple Networks Complex Networks

DestinationLooks at the destination node

addressLooks at the network address

Efficiency Low High


Interconnecting devices27

Connects two segments of a network cable Receives, amplifies and retransmits signals in both the directions Enables signals to travel longer distance and useful in larger networks

Repeater

Store-and-forward device Connects two homogeneous networks Divides a large network into smaller segment and filters network traffic

Bridge

Directs packets between different networks along the most optimal route Connects LANs and WANs using a routing table Provides congestion control

Router

Connects two or more entirely different networks Connects networks with different communication protocols Translates information between different network data formats or

network architecturesGateway


Under the hood:Network Architecture -

TCP/IP Model


29

Need for a layered architecture

Predefined dependencies exists among the services which requires

establishing hierarchical relationships


Network Architecture

Overview Defines the design and implementation of computer networks

Has a layered approach which helps in- Reducing the design complexity- Shielding the implementation details of the services

Each layer provides services to the layer above

Different layers use different protocols

Two popularly referenced architectures are,- ISO OSI Reference Model- TCP/IP Model

Corresponding layers in sender and receiver follow the same protocol

30


TCP/IP reference model

Application

Transport

Internet

Network Access

HTTP, SMTP, FTP, Telnet

TCP, UDP

IP, ICMP, DHCP, RIP

MAC Protocols: Ethernet (CSMA/CD), CSMA/CA, Token ring, Token Bus

Routing and delivery of data across networks

31


TCP/IP layers Functions and Protocols32

Allows access to network for communication Important functions include domain to IP address translation, data

encryption and synchronization Protocols include HTTP, FTP, SMTP etc.

Application layer

Provide end to end communication Important functions include defining level of service and reliability Protocols include TCP, UDP, RTP etc.

Transport

layer

Packs data into data packets known as IP datagrams which contains source and destination IP addresses

Important functions include routing and congestion control Protocols include IP, ICMP, ARP etc.

Internet

layer

Provides details about how data is physically sent Important functions include node to node delivery, error and flow

control Protocols include Ethernet, token ring, RS-232C etc.

Network Access layer

Under the hood:IP Address


Internet Protocol Address

Overview A 4-byte addressing scheme used by the IP layerWithin a private or closed network, one can assign any IP address

Every Internet host must have a distinct IP address across the globeIt has two components Network ID Host IDIP addresses are provided by ICANN to the ISPs which in turn provide addresses to the end users

Due to shortage of IP addresses, there is need to switch from IP version 4 (IPv4) to IP version 6 (IPv6)

34


IP address35

This component of an IP address helps to uniquely identify a given network

Network ID

This component of an IP address helps to identify a given computer on a network identified by the previous component

Host ID


36

IP address

1 0 0 0 0 0 1 0 1 1 0 0 0 0 1 1 1 0 0 0 0 0 0 0 0 0 0 1 1 0 0 1

w x y z

NETWORK ID HOST ID

EXAMPLE: 130.195.128.25

130 195 128 25

IP version 4 (IPV4)


IP Address IP address of a machine or device in a network has to be unique under all

circumstances

37

IP Address, once assigned, is fixed for a device in a network and it doesnt change

Used for servers, routers, printers, etc. Allocated by the system administrators

Static address

All devices are not connected to the network all the time IP address for devices are allocated only when the devices

are connected to the network IP addresses are limited and need to be managed efficiently DHCP server is used to allocate an IP address to the

connected device

Dynamic address



IP address - Types38

LAN

Server

2. Another client

DHCPserver

1. Computerboots up

Dynamic IP for LAN users

STATIC IP CASE

LAN

OtherComputerson Network.

Sys Admin Ensuresthat IP address is unique

for all nodes

Server

IBM Compatible

Network administrator ensures that a unique IP address is assigned to a hostcomputerExample: IP addresses of serversClient computer

Static IP for LAN users

Above the hood:Web Fundamentals

39


Web A system made up of hypertext documents interlinked to each other and

accessible through Internet

A computer can access an information from web with the help of web browser and Internet connection

40

Hypertext documents


Web fundamentals41

Retrieves and presents information resources available on a local or remote computer

Browser uses http protocol by default E.g. Internet Explorer, Mozilla Firefox, Google Chrome

Web Browser

Request-response protocol and Stateless (session state is not tracked across requests)

Standardized (allows any HTTP client to communicate with any HTTP server)

Hyper Text Transfer Protocol

(HTTP) Uniquely identifies a particular resource on the Internet Contains protocol, host, port and path E.g. http://www.infosys.com

Uniform Resource

Locator (URL)

DNS server converts the domain names to IP addresses E.g. www.infosys.com 216.251.50.51

Domain Name System (DNS)

Understands HTTP protocol and is able to service concurrent requests

E.g. Apache TomcatWeb Server


42

Working of a web server

PC

Web Browser

Web Server(Internet)

my.mydomain.com202.68.33.47

DNS Server(Local Network)

TheInternet

1. User Invokes URL

http://my.mydomain.com/te

st.html

2. Translate DNS Name to

IP address

3. Cannot Resolve

Locally? Resolve from

other DNS

4. Returns IP Addr

202.68.33.47


43

Working of a web server

PC

Web Browser

Web Server(Internet)

my.mydomain.com202.68.33.47

DNS Server(Local Network)

TheInternet

1. User Invokes URL

http://my.mydomain.com/te

st.html

2. Translate DNS Name to

IP address

3. Cannot Resolve

Locally? Resolve from

other DNS

4. Returns IP Addr

202.68.33.47

Above the hood:Web Content


Types of content45

Static content

Content resides in a file Author determines the

content at the time of creation

Each request will return exactly the same content

Ex: HTML files, gif/jpeg files, etc.

Dynamic content

Created on the fly through execution of predefined business logic by a web server upon a request to reflect the current information

Content for the same resource may vary for each request

Ex: Account statement page in Net banking

Requires more processing power on the server

Active content

Server returns executable code as part of the response

Browser executes the program locally on the client machine

Ex: JavaScript's, Java Applets, Active-X controls for IE

There is a potential security risk

HTML is used to design and develop simple static web pages


Types of Content A Sample Web Page4646

Web Page

includes

Dynamic

Active

StaticStatic Content

Dynamic

Content

Active

ContentGuided Activity : Assignment 6

Introduction to HTML Hyper Text Markup

Language


HTML

Overview HTML stands for Hyper Text Markup LanguageIt is used to design and develop Web Pages

Communication on the web happens through HTTP

HTML is1. A Simple mark up language (NOT a programming language)2. Browser/Platform Independent (plain ASCII text format)3. Not Case Sensitive4. HTML is Interpreted by browser (NOT compiled)5. A medium for Graphical User Interface (GUI)

48

Video Link

http://coursesweb.net/html/video-tutorials_t2 - HTML Document Structure

Video Link

http://coursesweb.net/html/video-tutorials_t2 - HTML Document Structure


Structure of HTML page

49

An HTML file can be created by using a simple text editor viz notepad, text pad, Eclipse IDE editor. HTML file must have an extension .htm or .html.

Contents

Title of the Web Page

Demo 1: Structure of HTML Document


Building Blocks to create contents in HTML Page50

Building Blocks

are Formatting Tags

Lists

Links

Images

Tables

Forms

Character Entities


HTML Text Formatting Tags Defines the font color, face and size Displays the specified text in italics Underlines the specified text

Specifies bold text Aligns text to center

51

Summary: Text Formatting tags helps to define the presentation style of textual content for

better readability, look and feel. To achieve consistency in formatting across pages, each page has to be

modified individually across pages which is tedious for large application. The best way of achieving consistency is through style sheets.

To insert a single line break (new line)

Places the text in a new paragraph

Prints horizontal line

Defines HTML Headings, , , , ,

To define subscripts and superscripts and

Demo 2: Text Formatting Tags


Text Formatting using Cascading Style Sheets (CSS)52

Style Properties are defined and placed in an external file and is saved with extension .css

These files are then included with the HTML Documents as follows

Example:

This way of including style properties to HTML is called as External Style Sheets

Other ways of including CSS (Inline, Embedded) will be discussed later

Demo 3: Text Formatting using Style Sheets

HTML files provide structure to the content and CSS provides style

(formatting) to the content


Syntax for CSS

selector refers to the HTML tag for which we need to apply the style Example: h3

Any HTML tag can be a CSS selector Example: h3,h4,h5,body,p etc.

property is the attribute of the html tag we need to modify Example: font-family, color

Each attribute takes a value Example: Verdana, #8598CC

53

Example :

h3 {

font-family: Verdana;

color: #8598CC;

font-style: italic;

text-align: center;

}

General Syntax:

selector {

property: value;

}


Text formatting in CSS Arial, Verdana, Monospace, .font-family Normal, italic, obliquefont-style normal, small-capsfont-variant x-small, small, medium, largefont-size normal, bold, bolder, light, x-largefont-weight

54

Demo 4: Text Formatting Tags

CSS measurement units:

inches (in) point size (pt) centimeters (cm) pixels (px) millimeters (mm)


Container tags in CSS - tag is used for creating logical divisions within a page. It defines a

generic container to set up tags as a group Example:

55

In the above example tag groups heading, list and link content The id of tag is contenttext specified inside tag as follows :

All the properties defined for the contenttext in .css file is applicable to all the

content existing within the (heading, list and link)

Properties of div id contenttext cascades into all the tags inside it.

Properties of div id contenttext cascades into all the tags inside it.



Container tags in CSS - is an inline element used to provide style properties to selective

content Example:

EasyShop

56

In the above example tag provides style properties to EasyShop word alone

The id of is EasyShopWord

All the properties defined for the EasyShopWord in .css file is applicable to EasyShop word alone

Demo 5: Div and Span


Defining IDs in CSS IDs are unique identifiers for HTML tags which are used to specify the style

properties within the CSS file

In CSS files, IDs are defined by prefixing # with the ID names

Example:

57

#EasyShopWord{font-family: Cursive;color: #8598CC;font-size:20px;}

#contenttext {border:1px solid;border-color:#8598CC;width: 580px;padding:10px;font-family:Arial;margin-left:auto;margin-right:auto;}

div is block level tag whereas span is an inline tag


Defining Classes in CSS Classes are used to specify the style properties to HTML element s within the

CSS file

In CSS files, classes are defined by prefixing . with the ID names

58

.EasyShopWord{font-family: Cursive;color: #8598CC;font-size:20px;}

.contenttext {border:1px solid;border-color:#8598CC;width: 580px;padding:10px;font-family:Arial;margin-left:auto;margin-right:auto;}

In html file, classes are specified as follows :

Thanks for using EasyShop Manager.

Use IDs to apply style for content which occurs only once per page. Use classes to apply

style more than once per page


Chaining of selectors in CSS It is possible to add tags within a div tag in HTML.Example:

Thanks for using EasyShop Manager.For any clarification you may contact anyone of us.

Chaining of tags is required to apply style properties to the tags within the div.Example:#contenttext h4{

font-size:12px;font-family:Verdana;color: #8898CC;

}

59

Usage of h4 tag inside

div tag

Here h4 is chained

with div id

contenttext

Demo 6: Chaining of Selectors


Chaining of selectors in CSS Grouping: Elements may be grouped into a comma-separated list.

Universal selector: The universal selector, written "*", matches the name of any element type.

Type selectors : A type selector matches every instance of the element type in the document tree.

60

h1, h2, h3 { font-family: sans-serif }

*.warning and .warning are equivalent*#myid and #myid are equivalent

h1 { font-family: sans-serif }


Chaining of selectors in CSS Descendant selectors: A selectors to match an element that is the descendant

of another element in the document tree.

Child selectors: A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".

Adjacent sibling selectors: F element immediately preceded by a sibling element E

61

This headline is very important

h1 em { color: blue }

body > P { line-height: 1.3 }

h1 + h2 { margin-top: -5mm }


Chaining of selectors in CSSPattern Meaning

* Matches any element

E Matches an element of type E

E F Matches any F element that is a descendant of an E

E > F Matches any F element that is a child of an element E

E:first:-child Matches element E when E is the first child of its parent.

E:link

E:Visited

Matches element E if E is the source anchor of a hyperlink of which the

target is not yet visited (:link) or already visited (:visited).

E:active

E:hover

E:focus

Matches E during certain user actions.

E + F Matches any F element immediately preceded by a sibling element E.

DIV.warning Language specific. (In HTML, the same as DIV[class~="warning"].)

E#myid Matches any E element with ID equal to "myid".

62

Guided Activity: Assignment 8


Text Properties in CSS (Self Study) measurement (px/cm)word-spacing measurement (px/cm)letter-spacing None, underline, overline, line-through text-decoration none, capitalize, uppercase, lowercase text-transform top, text-bottom, super, subvertical-align measurementtext-indent

left, right, center, justifytext-align

63


Lists in HTML64

Demo 7: Lists

Defines the ordered list Order can be numerical or

alphabetical

Defines the unordered or bulleted list

Define a description list, and


List Properties in CSS (Self Study)

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alphalist-style-type

url(*.gif)list-style-image

Inside, outsidelist-style-position

65


Links in HTML66

The following link opens CreateUser.html and name of the link is Add User.

Add User

The following link opens CreateUser.html in a new web page.

Add User

Demo 8: Links


Properties of Links in CSS Links can be styled with any CSS property (e.g. color, font-family, background,

etc.). In addition, links can be styled differently depending on what state they are in.

The four links states are:

67

a normal, unvisited linka:link

a link the user has visiteda:visited

a link when the user hover mouse pointer over ita:hover

a link the moment it is clickeda:active


Embedding Images in HTML68

tag

Supports JPG, GIF and PNG image formats

ALT attribute was set to provide alternative text for browsers that did not display images. ALT attribute can be used as a tool tip or placeholder information in image-based browsers

=url SRC

= n BORDER

= n (in pixels)WIDTH

= n (in pixels)HEIGHT

= Alternate Text ALT


Embedding Images in CSS69

Guided Activity: Assignment 9

Demo 9: Images

#cartimage {background-image:url(../images/Cart.jpg);background-repeat:no-repeat;float:right;height:80px;width:80px;margin-right:20px;margin-top:20px;}

Properties of Cart Image defined in

style.css

Properties of Cart Image defined in

style.css

Using Cart Image in .htmlUsing Cart Image in .html


Summary Computer networks Types of Network Network Topology Interconnecting Devices TCP/IP Architecture Web Fundamentals

HTML and CSS Text Formatting Tags and tag Lists

Links

Images

70


Self Study71

Study Material - Computer Networks and Web Fundamentals

Videos in Portal- http://coursesweb.net/html/video-tutorials_t2

Computer Networks

Network Topologies

Connecting Devices

TCP/IP Model

IP Address

Types of Web content

Links - Computer Networks and Web Fundamentalshttp://compnetworking.about.com/od/basicnetworkingconcepts/http://compnetworking.about.com/od/networkdesign/a/topologies.htmhttp://compnetworking.about.com/od/workingwithipaddresses/l/blip.htmhttp://docwiki.cisco.com/wiki/Internetworking_Basics


Self Study72

Links - HTMLHTMLhttp://www.w3schools.com/ http://www.w3.org/http://www.w3.org/wiki/HTML/Elements/

2013 Infosys Limited, Bangalore, India. All Rights Reserved. Infosys believes the information in this document is accurate as of its publication date; such information is subject to changewithout notice. Infosys acknowledges the proprietary rights of other companies to the trademarks, product names and such other intellectual property rights mentioned in this document. Exceptas expressly permitted, neither this documentation nor any part of it may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, printing,photocopying,recording or otherwise, without the prior permission of Infosys Limited and/ or any named intellectual property rights holders under this document.

Thank You