SlideShare a Scribd company logo
Getting Started with Web
Akshay Mathur
Ground Rules
• Post on FB and Tweet now
• Disturb Everyone during the
session
– Not by phone rings
– Not by local talks
– By more information and
questions

@akshaymathu

2
Let’s Know Each Other
•
•
•
•
•
•
•

Do you code?
OS?
Programing Language?
HTML?
Javascript?
JSON?
Why are you attending?
@akshaymathu

3
Akshay Mathur
• Founding Team Member of
– ShopSocially (Enabling “social” for retailers)
– AirTight Neworks (Global leader of WIPS)

• 15+ years in IT industry
– Currently Principal Architect at ShopSocially
– Mostly worked with Startups
• From Conceptualization to Stabilization
• At different functions i.e. development, testing, release
• With multiple technologies

@akshaymathu

4
What is Web?
The Web
• Many computers world
wide connect to each
other
• Information stored in
one computer can be
viewed from other
computer

@akshaymathu

6
Involved Software
Web Browser
Core Engine

Web Server
Web Server
Application Server

DOM Renderer

Database Server

Message Queuing Server
Task Workers
JavaScript Runtime
Caching Engine
The Evolution

@akshaymathu

8
Web 1.0 - Static
• Static pages
– Were Read Only and B&W
– Colors and other simple formatting came in

• Input Forms
– Came in just for data collection to start with
– Server side response based on input came in

@akshaymathu

9
Web 1.0 - Dynamic
• Client Side Dynamism
– With DHTML, color changing web pages became
popular
– Changing other basic properties of the text also
became possible

• Server Side Dynamism
– Dynamically generated pages made the web
responsive to inputs
– Embedded scripting languages gave it a boost
@akshaymathu

10
Web 2.0: The Power
• Changing part of the webpage
– Programmatically reading and writing DOM
elements
– Rich event handling

• Communicating with server without refreshing
entire page
– AJAX

@akshaymathu

11
Understanding URL
https://sub.domain.com:8086/a/folder/file.html?key=val&ke
y=val2#some_place

•
•
•
•
•
•
•

Protocol
Sub-domain, Domain and TLD
Port
Path
File
Query string
Fragment
@akshaymathu

12
Understanding Web Page
Overall Structure

@akshaymathu

14
Doctype and DTD
• Tell browser what standards this document is
following
– How to parse
• HTML or XHTML
• HTML version 1.0 or 1.1

– Show strict errors or not

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/x
html1-transitional.dtd">
@akshaymathu

15
Html
• Only the content within <html> and </html> is
parsed
• xmlns tells where the tags being used in the
document are described
• Multiple xmlns attributes can be used
<html xmlns:fb="http://ogp.me/ns
/fb#" xmlns="http://www.w3.org/1
999/xhtml">
@akshaymathu

16
Head
• Typically Contains invisible items
– Title
– Meta
– Link

– Script
– Style

@akshaymathu

17
Title
• Title of the page
• Shows up on title bar of browser

<title>ShopSocially
Amplify</title>

| Engage Convert

@akshaymathu

18
Meta
• Additional metadata of the page
• Multiple meta tags can be used
<meta

http-equiv="Content-Type"
content="text/html; charset=utf-8">

<meta

name="keywords"

content="social platform, conversion">

<meta

property="fb:app_id"

content="213036345945">
@akshaymathu

19
Content Type
• Tells browser how to parse and execute the
content
– Character set info is also incuded

<meta

http-equiv="Content-Type"

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

• ‘text/html’ is used for HTML pages
– A few others are text/csv, application/pdf etc.
@akshaymathu

20
Link
• Link to external files
• Typically used for CSS

@akshaymathu

21
Script
• Tells browser that the content is an executable
script
– Javascript, vbscript etc.

@akshaymathu

22
Style
• Embeds CSS on the page

<style type="text/css">
.fb_reset div{overflow:hidden}
.fb_link img{border:none}
</style>
@akshaymathu

23
Body
• Contains all visible elements
• Different elements can be used for laying out
the page
– Look and feel can be controlled by style elements
– Some elements can not contain anything inside
them e.g. input, br etc.

@akshaymathu

24
HTML Tags
Types
• Containers
– Have opening and closing tags of same name
– ‘/’ is used for closing e.g. <html>…</html>

• Non-containers
– Don’t have a closing tag
– ‘/’ is used at the end of same tag for closing e.g.
<br />, <input type=“text” />

@akshaymathu

26
Display
• Block
– Take up complete available width by default
– Consecutive elements stack vertically

• Inline
– Take up width only equal to the content
– Consecutive elements stack horizontally
– Typically word-wrap

@akshaymathu

27
Writing Text
• Text can be written directly in body
• It is a good to have it in blocks
– <p>…</p>
• Block display
• Some default style

– <div>…</div>
• Block display
• No default style

– <span>…</span>
• Inline display
• No default style

@akshaymathu

28
Headings
• Preformatted text size
– Seven sizes are available i.e. h1 … h7
– Defaults can be overridden by CSS

• Important for SEO
<h1>This is heading</h1>

@akshaymathu

29
Bulleted List
• Can be un-ordered (<ul>) or numbered (<ol>)
• List items (<li>) are shown indented
• Can be multilevel and mixed
<ol>
<li>item1</li>
<ul>
<li>sub item1</li>
</ul>
</ol>
@akshaymathu

30
Taking Input via Form Elements
•
•
•
•
•
•
•

Text box: <input type=“text” />
Radio button: <input type=“radio” />
Check box: <input type=“checkbox” />
Button: <input type=“button” />
Hidden: <input type=“hidden” />
Multiline Text box: <textarea></textarea>
Dropdown/List:
<select>
<option>…</option>
…
</select>
@akshaymathu

31
Styling Elements
Making it Look Different
• Look can be defined in style attribute of an
element
<h3 style=“color: #aaa;
background-color: #eee;
font-size: 16px; width: 100%;
padding: 5px;>This is Heading3
as I want</h3>
@akshaymathu

33
Font
• Font-face
– Name of font to be used

• Font-family
– Multiple font names in order

• Font-size
– Text size in any unit i.e. px, percentage, em

• Font-weight
– Bold or regular
@akshaymathu

34
Changing Colors
• Color value can be specified in many ways
– Hex RGB is mostly used i.e. #rrggbb

• Background-color
– Specifies color of background fill

• Color
– Specifies color of text

• Border-color
– Specifies color of border line
@akshaymathu

35
Box Model
•
•
•
•
•
•
•
•

Width
Padding
Border
Margin
Position
Z-index
Top/Bottom
Left/Right
@akshaymathu

36
Where to write style?
• Inline
– As ‘style’ attribute of an element

• Style block
– On page in <style>…</style> block

• CSS file
– In an external file

• This is also the preference order for applying
style
@akshaymathu

37
Defining CSS
• Multiple styling properties can be grouped
together
• Element(s) where to apply style is determined
by CSS selector
– Multiple CSS selectors may refer to an element

• All properties are applied to the element

@akshaymathu

38
CSS Selectors
• Tag name
a {color: blue;}
• ID
#my_unique_a {color: red;}
• Class

.common_class {color:#ccc;
margin:5px;}
• Compound
.common_class a {color: green;}
• Psudo
a:hover, a:visited {color: #ccc;}
@akshaymathu

39
CSS Frameworks
• Provide ready-to-use collection of classes for
common requirements
– Grid
– Navigation bars
– Form elements
– Buttons
–…

• Bootstrap is the great one
@akshaymathu

40
@akshaymathu

41
JavaScript
JavaScript
•
•
•
•
•
•
•

Born in 1995 at Netscape
Not at all related to Java
Syntax influenced by C
Interpreted ECMA scripting lanuage
Dynamically typed
Object Oriented as well as Functional
Prototype based
@akshaymathu

43
Javascript
• Object Oriented
– But different from other OO languages

• Single threaded
• Runs in its sandbox
– Has full access to the objects on the page
– Has restricted access to other pages or client
machine file-system

@akshaymathu

44
Typical Usage
• Web programing
– Client side
• Web pages
• Browser plugins

– Server side
• SSJS (not in use)
• NodeJS

• PDF documents
• Desktop Widgets
• MongoDB
@akshaymathu

45
JavaScript Language Reference
Comments
• Single line
– Starts with //
– Can also be used after a statement

• Multi line
– Starts with /* and ends with */

@akshaymathu

47
Statements
• Case sensitive
• Ignore whitespace
• Semicolon (;) is used as delimiter for
statements
• Block of statements is delimited by curly
braces ({})

@akshaymathu

48
Output
• Visible to all using DOM functions
document.write(„Hello‟);
alert(„How are you‟);

• For developers in console
console.log(“This is working”);

@akshaymathu

49
Variable
• Explicitly defining is optional
– JS runtime automatically defines as needed
– Defining all variables with ‘var’ keyword is good

• Loosely typed
– No need to define the type (int, str etc.)

• Dynamically typed
– Type changes at runtime as the value changes
var my_var = „Hello‟;
my_var = 6;
@akshaymathu

50
Data Types
•
•
•
•
•
•
•
•
•

String: “1”, “Hello! How are you”
Number: 1, 2, 121.22
Boolean: true, false
Array: [1, “1”, false, {a: 10}]
Object: {lang: “JS”, val: my_var}
Null: null
Undefined: undefined
Functions: function(){}
Date: Mon, 23 Sep 2013 12:18:54 GMT
typeof “1” // String
@akshaymathu

51
Operators
• Arithmetic
+, -, *, /,
%, ++, --

• Assignment
=, +=, -=,
*=, /=, %=

• Concatenation
+

• Comparison
==, ===, !=,
!==, >, <,
<=, >=
• Logical
&&, ||, !
• Conditional
() ? :
@akshaymathu

52
Conditional Blocks
• If… else if … else
If (age > 18){
can_vote = true;
} else {
can_vote = false;
}
Or
can_vote = (age>18) ? true : false;
@akshaymathu

53
For Loop
• For
for (i=0; i<array.length; i++){
console.log(array[i]);
}
• For/in
for (item in array){
console.log(item);
}
@akshaymathu

54
While Loop
• While
while (is_extra_water){
drain();
}
• Do/while
do {
drain();
} while (is_extra_water);
@akshaymathu

55
JS Functions
Function
• Code block that executes on ‘call’
//define the function
function say_hello(name){
alert(„Hello! „ + name);
}
//call the function
say_hello(„Akshay‟);
@akshaymathu

57
Function Arguments
• Any number of arguments can be passed without
declaring
• Named arguments are not supported

say_hello(1); // Hello! 1
say_hello(); // Hello! undefined
say_hello(„Akshay‟, „Mathur‟);
//Hello! Akshay
@akshaymathu

58
Naming a Function
function my_func(){}
• A function may not have a name
function(){};

my_func = function(){};
@akshaymathu

59
Variable Scope
• By default all variables are global
• Variables defined with ‘var’ keyword are local to
the function
• It is assumed that all variables are defined in the
first line
function(){
var my_var = „Hello‟;
console.log(msg);
var2 = 6;

}
@akshaymathu

60
Return Values
• Anything can be returned from a function
using return statement
function sqr(x){
var sq = x * x;
return sq;
}

var four_sq = sqr(4);
@akshaymathu

61
Other Facts
• A function can be assigned to a variable
• A function can be defined within another function
• A function can return a function
function sqr(){
sq = function (x){
return x * x * x;
};
return sq;
}
My_sqr = sqr(); // function
My_sqr(3);
// 27
@akshaymathu

62
Global Functions
• encodeURI(),
encodeURIComponent()
Encodes a URI
•

•

•

decodeURI(),
decodeURIComponent()

Decodes a URI
•
•

•

escape() Encodes a string
unescape() Decodes an

•

String() Converts an object's
value to a string
Number() Converts an object's
value to a number

•

•

a value is a finite, legal number
isNaN() Determines whether a
value is an illegal number

parseInt() Parses a string and
returns an integer
parseFloat() Parses a string

and returns a floating point
number

encoded string
•

isFinite() Determines whether

eval() Evaluates a string and

executes it as if it was script code

@akshaymathu

63
@akshaymathu

64
JS Objects
Objects
• Everything in JS is an object (instance)
“string”.length // 6
“str”.length.toFixed(2) // “3.00”
[„hell‟, „o!‟].join(„‟) // „hello!‟

• Custom objects can also be defined

@akshaymathu

66
JSON
• Javascript Object has a key and a value
• Key is always string
• Value can be of any type
– Including another JSON object

A = {key1: value1, key2: value2};
or
A = new Object();
A[„key1‟] = value1;
A.key2 = value2;
@akshaymathu

67
Object as Namespace
• It is a good practice to group variables and
functions together in an object rather than
keeping them global
var user = {};
user.name = “Akshay”;
user.greet = function(){
alert(„Hello!„.concat(user.name);
};
@akshaymathu

68
Object as Named Argument
• Objects can be passed to a function as an argument
• They proxy for named arguments
Say_hello = function (options){
if (typeof options === „Object‟){
options.msg = (options.msg)?
options.msg : ‟Hello!‟;
}
alert(options.msg + „ „ + options.name);
}
Say_hello({name: „Akshay‟});
@akshaymathu

69
@akshaymathu

70
Dynamic Pages
Server Side Dynamism
• At web server
• Ability to execute a program in context of a web
request
– The program takes input from the request
– The program creates a HTML page as output
• Web browser understands only HTML

• Embedded scripting technologies make it simpler
– Allow the program to be inserted within an HTML
page
• PHP, ASP, JSP etc.
@akshaymathu

72
Client Side Dynamism
• At web browser
– Javascript

• Ability to change properties of elements on
the web page on user’s action
– Text color, image source etc.
– On click, on hover etc.

• Ability to validate Form input without the
round trip
@akshaymathu

73
Document Object Model
• Window Object
– Represents the browser window
– All Javascript functions and variable are attached
here by default

• Document Object
– Represents the page rendered inside the window
– All HTML elements are available here
• In the hierarchy they are attached

@akshaymathu

74
Manipulating the Web Page
• Get programmatic handle of an HTML element
via Document Object Model (DOM)
var el =
document.getElementByID(
„a_unique_id‟);
• Change desired property of the element
el.src = “my_photo.png”
@akshaymathu

75
Changing Style
• Access to inline style properties is via style
object
text_color = el.style.color

• Change desired style attribute
el.style.fontSize = “16px”

@akshaymathu

76
Responding to User Actions
• Browser raises an event on user action
– A few of them are onclick, onkeypress

• A JavaScript function can be called when the
event happens
el.onclick = function(){
alert(„User clicked!‟);
}

@akshaymathu

77
@akshaymathu

78
presents

Creating Single Page Web App
Series of 3 workshops
Full Day
Hands-on
1. Simple Web Pages
•
•
•
•
•
•
•
•

Introduction to Web and its evolution
Web page basics and HTML tags
Styling elements
JavaScript basics
Introduction to DOM
Changing style using JavaScript
Simple DOM manipulation
Responding to user actions
@akshaymathu

80
2. Dynamic Web Pages
•
•
•
•

Jquery JavaScript Framework
Handling DOM events
Getting data asynchronously via AJAX
Client side dynamism using JavaScript
templates
• Simplify JS coding via CoffeeScript
• Writing JS classes (prototypes)
@akshaymathu

81
3. Single Page App
•
•
•
•
•
•

Understanding MVC concepts
Introduction BackboneJS and UnderscoreJS
Using Backbone models, views and router
Dealing with collections
Custom events and their handlers
Adjusting URLs for making browser buttons
work
@akshaymathu

82
Document Object Model
• Window Object
– Represents the browser window
– All Javascript functions and variable are attached
here by default

• Document Object
– Represents the page rendered inside the window
– All HTML elements are available here
• In the hierarchy they are attached

@akshaymathu

83
Manipulating the Web Page
• Get programmatic handle of an HTML element
via Document Object Model (DOM)
var el =
document.getElementByID(
„a_unique_id‟);
• Change desired property of the element
el.src = “my_photo.png”
@akshaymathu

84
JS Framework
• Library for simplifying JS coding
– Jquery is most popular

• Provides simple interface and syntactic sugar
for common JS work
– Selecting DOM element
– DOM traversal and manipulation
– Event handling

• Takes care of cross browser and cross version
issues
@akshaymathu

85
Jquery
• Takes care of cross browser and cross version
issues
• Library for simplifying JS coding
– Everything is via functions
– Same function for get and set

• Provides simple interface and syntactic sugar for
common JS work
– Selecting DOM element
– DOM traversal and manipulation
– Event handling
@akshaymathu

86
Javascript Templates
• Dynamically creates HTML code in JS
– Data driven HTML
– Allows variable substitution, looping and
conditional statements

• Generated HTML is inserted into the DOM for
changing part of the page on-the-fly

@akshaymathu

87
Using Template
<script type="text/x-jquery-tmpl”
id=”photo">
<img src=“${photo_url}”
title="${name}" />
</script>

<script type="text/javascript”>
template = $(‟#photo').template();
t_html = $.tmpl(template, data);
$(“#container”).html(t_html);
</script>
@akshaymathu

88
AJAX
• A way in web browser to communicate with
server without reloading the page
• XmlHttpRequest (XHR) object can also create
HTTP request and receive response
– The request happens asynchronously
• Other operations on page are allowed during the
request

– Received data does not render automatically
• Data needs to be received in a callback function and
used programmatically
@akshaymathu

89
AJAX Call
$.ajax({
url: „/my_ajax_target‟,
type: „POST‟,
DataType: „json‟,
data: {id: 2},
success: function(response){
alert(„Hello! „ + response.name);
},
error: function(){
alert(„Please try later‟);
}
});
@akshaymathu

90
CoffeeScript
• A language with simple syntax
– No semicolons and braces
– Resembles to English
– Indentation decides the code blocks

• Compiles into Javascript
– Provides syntactic sugar for boilerplate code
• Manage variable scope
• Class instead of prototype

– Generates good quality, error free code
@akshaymathu

91
Cofeescript to Javascript
greet_me = (name) ->
greeting_word = 'Hello!'
alert "#{greeting_word} #{name}”
Compiles to
greet_me = function(name) {
var greeting_word;
greeting_word = 'Hello!';
return alert("" + greeting_word
+ " " + name);
};
@akshaymathu

92
BackboneJS
• Provides MVC structure for Javascript
– The model object holds data
– The view object handles visual elements and
interactions
– The controller object glues everything together and
provides communication amongst objects

• Custom Events help writing good code and
eliminates use of global variables
– The event object allows raising and handling custom
events
@akshaymathu

93
BackboneJS code in Coffeescript
class LoginModel extends Backbone.Model
class LoginView extends Backbone.View
initialize: =>
@template = $(‟#login_template').template()
@render()
render: =>
$(@el).html $.tmpl(@template, @model.toJSON())
events:
'click #login_btn' : ‟login_handler‟
login_handler: (ev) =>
window.mpq_track ‟Login Click‟
class LoginController extends Backbone.Router
initialize: =>
@l_model = new LoginModel window.app_info
@l_view = new LoginView model: model, el: ‟#login_div‟

@akshaymathu

94
Thanks

http://www.quora.com/Akshay-Mathur

@akshaymathu
@akshaymathu

95

More Related Content

What's hot

Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
JavaScript
JavaScriptJavaScript
JavaScript
Ivano Malavolta
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQuery
Gill Cleeren
 
jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events
WebStackAcademy
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
WebStackAcademy
 
Handlebars and Require.js
Handlebars and Require.jsHandlebars and Require.js
Handlebars and Require.js
Ivano Malavolta
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
WebStackAcademy
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects
WebStackAcademy
 
Ajax
AjaxAjax
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
Karol Depka Pradzinski
 
Simpler Core Data with RubyMotion
Simpler Core Data with RubyMotionSimpler Core Data with RubyMotion
Simpler Core Data with RubyMotion
Stefan Haflidason
 
JavaScript - Chapter 7 - Advanced Functions
 JavaScript - Chapter 7 - Advanced Functions JavaScript - Chapter 7 - Advanced Functions
JavaScript - Chapter 7 - Advanced Functions
WebStackAcademy
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
Arwid Bancewicz
 
Java script
Java scriptJava script
Java script
vishal choudhary
 
How dojo works
How dojo worksHow dojo works
How dojo works
Amit Tyagi
 
Introduction to javascript templating using handlebars.js
Introduction to javascript templating using handlebars.jsIntroduction to javascript templating using handlebars.js
Introduction to javascript templating using handlebars.js
Mindfire Solutions
 
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Ayes Chinmay
 
Local storage in Web apps
Local storage in Web appsLocal storage in Web apps
Local storage in Web apps
Ivano Malavolta
 
RequireJS & Handlebars
RequireJS & HandlebarsRequireJS & Handlebars
RequireJS & Handlebars
Ivano Malavolta
 

What's hot (20)

Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQuery
 
jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events jQuery -Chapter 2 - Selectors and Events
jQuery -Chapter 2 - Selectors and Events
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
 
Handlebars and Require.js
Handlebars and Require.jsHandlebars and Require.js
Handlebars and Require.js
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects
 
Ajax
AjaxAjax
Ajax
 
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
 
Simpler Core Data with RubyMotion
Simpler Core Data with RubyMotionSimpler Core Data with RubyMotion
Simpler Core Data with RubyMotion
 
JavaScript - Chapter 7 - Advanced Functions
 JavaScript - Chapter 7 - Advanced Functions JavaScript - Chapter 7 - Advanced Functions
JavaScript - Chapter 7 - Advanced Functions
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 
Java script
Java scriptJava script
Java script
 
How dojo works
How dojo worksHow dojo works
How dojo works
 
Introduction to javascript templating using handlebars.js
Introduction to javascript templating using handlebars.jsIntroduction to javascript templating using handlebars.js
Introduction to javascript templating using handlebars.js
 
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
 
Local storage in Web apps
Local storage in Web appsLocal storage in Web apps
Local storage in Web apps
 
RequireJS & Handlebars
RequireJS & HandlebarsRequireJS & Handlebars
RequireJS & Handlebars
 

Similar to Getting Started with Web

xhtml_css.ppt
xhtml_css.pptxhtml_css.ppt
xhtml_css.ppt
fakeaccount225095
 
Html presentation
Html presentationHtml presentation
Html presentation
Jordan Dichev
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
Karthikeyan Dhanasekaran CUA
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
Sónia
 
Introduction_Web_Technologies
Introduction_Web_TechnologiesIntroduction_Web_Technologies
Introduction_Web_Technologies
Deepak Raj
 
Concept of CSS unit3
Concept of CSS unit3Concept of CSS unit3
Concept of CSS unit3
SURBHI SAROHA
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
smitha273566
 
Introduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSSIntroduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSS
Jussi Pohjolainen
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
smithaps4
 
CSS
CSSCSS
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptx
karthiksmart21
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
Sun Technlogies
 
DHTML
DHTMLDHTML
Building Webs Better
Building Webs BetterBuilding Webs Better
Building Webs Better
David Eldridge
 
Intro to web dev
Intro to web devIntro to web dev
Intro to web dev
kamar MEDDAH
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
 
ppt.ppt
ppt.pptppt.ppt
ppt.ppt
Sana903754
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basics
messinam
 

Similar to Getting Started with Web (20)

xhtml_css.ppt
xhtml_css.pptxhtml_css.ppt
xhtml_css.ppt
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
 
Introduction_Web_Technologies
Introduction_Web_TechnologiesIntroduction_Web_Technologies
Introduction_Web_Technologies
 
Concept of CSS unit3
Concept of CSS unit3Concept of CSS unit3
Concept of CSS unit3
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
Introduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSSIntroduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSS
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
CSS
CSSCSS
CSS
 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptx
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
 
DHTML
DHTMLDHTML
DHTML
 
Building Webs Better
Building Webs BetterBuilding Webs Better
Building Webs Better
 
Intro to web dev
Intro to web devIntro to web dev
Intro to web dev
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
 
ppt.ppt
ppt.pptppt.ppt
ppt.ppt
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basics
 

More from Akshay Mathur

Documentation with Sphinx
Documentation with SphinxDocumentation with Sphinx
Documentation with Sphinx
Akshay Mathur
 
Kubernetes Journey of a Large FinTech
Kubernetes Journey of a Large FinTechKubernetes Journey of a Large FinTech
Kubernetes Journey of a Large FinTech
Akshay Mathur
 
Security and Observability of Application Traffic in Kubernetes
Security and Observability of Application Traffic in KubernetesSecurity and Observability of Application Traffic in Kubernetes
Security and Observability of Application Traffic in Kubernetes
Akshay Mathur
 
Enhanced Security and Visibility for Microservices Applications
Enhanced Security and Visibility for Microservices ApplicationsEnhanced Security and Visibility for Microservices Applications
Enhanced Security and Visibility for Microservices Applications
Akshay Mathur
 
Considerations for East-West Traffic Security and Analytics for Kubernetes En...
Considerations for East-West Traffic Security and Analytics for Kubernetes En...Considerations for East-West Traffic Security and Analytics for Kubernetes En...
Considerations for East-West Traffic Security and Analytics for Kubernetes En...
Akshay Mathur
 
Kubernetes as Orchestrator for A10 Lightning Controller
Kubernetes as Orchestrator for A10 Lightning ControllerKubernetes as Orchestrator for A10 Lightning Controller
Kubernetes as Orchestrator for A10 Lightning Controller
Akshay Mathur
 
Cloud Bursting with A10 Lightning ADS
Cloud Bursting with A10 Lightning ADSCloud Bursting with A10 Lightning ADS
Cloud Bursting with A10 Lightning ADS
Akshay Mathur
 
Shared Security Responsibility Model of AWS
Shared Security Responsibility Model of AWSShared Security Responsibility Model of AWS
Shared Security Responsibility Model of AWS
Akshay Mathur
 
Techniques for scaling application with security and visibility in cloud
Techniques for scaling application with security and visibility in cloudTechniques for scaling application with security and visibility in cloud
Techniques for scaling application with security and visibility in cloud
Akshay Mathur
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
Akshay Mathur
 
Getting Started with Angular JS
Getting Started with Angular JSGetting Started with Angular JS
Getting Started with Angular JS
Akshay Mathur
 
Releasing Software Without Testing Team
Releasing Software Without Testing TeamReleasing Software Without Testing Team
Releasing Software Without Testing Team
Akshay Mathur
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
Akshay Mathur
 
Using Google App Engine Python
Using Google App Engine PythonUsing Google App Engine Python
Using Google App Engine Python
Akshay Mathur
 
Testing Single Page Webapp
Testing Single Page WebappTesting Single Page Webapp
Testing Single Page Webapp
Akshay Mathur
 
Mongo db
Mongo dbMongo db
Mongo db
Akshay Mathur
 

More from Akshay Mathur (16)

Documentation with Sphinx
Documentation with SphinxDocumentation with Sphinx
Documentation with Sphinx
 
Kubernetes Journey of a Large FinTech
Kubernetes Journey of a Large FinTechKubernetes Journey of a Large FinTech
Kubernetes Journey of a Large FinTech
 
Security and Observability of Application Traffic in Kubernetes
Security and Observability of Application Traffic in KubernetesSecurity and Observability of Application Traffic in Kubernetes
Security and Observability of Application Traffic in Kubernetes
 
Enhanced Security and Visibility for Microservices Applications
Enhanced Security and Visibility for Microservices ApplicationsEnhanced Security and Visibility for Microservices Applications
Enhanced Security and Visibility for Microservices Applications
 
Considerations for East-West Traffic Security and Analytics for Kubernetes En...
Considerations for East-West Traffic Security and Analytics for Kubernetes En...Considerations for East-West Traffic Security and Analytics for Kubernetes En...
Considerations for East-West Traffic Security and Analytics for Kubernetes En...
 
Kubernetes as Orchestrator for A10 Lightning Controller
Kubernetes as Orchestrator for A10 Lightning ControllerKubernetes as Orchestrator for A10 Lightning Controller
Kubernetes as Orchestrator for A10 Lightning Controller
 
Cloud Bursting with A10 Lightning ADS
Cloud Bursting with A10 Lightning ADSCloud Bursting with A10 Lightning ADS
Cloud Bursting with A10 Lightning ADS
 
Shared Security Responsibility Model of AWS
Shared Security Responsibility Model of AWSShared Security Responsibility Model of AWS
Shared Security Responsibility Model of AWS
 
Techniques for scaling application with security and visibility in cloud
Techniques for scaling application with security and visibility in cloudTechniques for scaling application with security and visibility in cloud
Techniques for scaling application with security and visibility in cloud
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
 
Getting Started with Angular JS
Getting Started with Angular JSGetting Started with Angular JS
Getting Started with Angular JS
 
Releasing Software Without Testing Team
Releasing Software Without Testing TeamReleasing Software Without Testing Team
Releasing Software Without Testing Team
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
 
Using Google App Engine Python
Using Google App Engine PythonUsing Google App Engine Python
Using Google App Engine Python
 
Testing Single Page Webapp
Testing Single Page WebappTesting Single Page Webapp
Testing Single Page Webapp
 
Mongo db
Mongo dbMongo db
Mongo db
 

Recently uploaded

Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 

Recently uploaded (20)

Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 

Getting Started with Web

  • 1. Getting Started with Web Akshay Mathur
  • 2. Ground Rules • Post on FB and Tweet now • Disturb Everyone during the session – Not by phone rings – Not by local talks – By more information and questions @akshaymathu 2
  • 3. Let’s Know Each Other • • • • • • • Do you code? OS? Programing Language? HTML? Javascript? JSON? Why are you attending? @akshaymathu 3
  • 4. Akshay Mathur • Founding Team Member of – ShopSocially (Enabling “social” for retailers) – AirTight Neworks (Global leader of WIPS) • 15+ years in IT industry – Currently Principal Architect at ShopSocially – Mostly worked with Startups • From Conceptualization to Stabilization • At different functions i.e. development, testing, release • With multiple technologies @akshaymathu 4
  • 6. The Web • Many computers world wide connect to each other • Information stored in one computer can be viewed from other computer @akshaymathu 6
  • 7. Involved Software Web Browser Core Engine Web Server Web Server Application Server DOM Renderer Database Server Message Queuing Server Task Workers JavaScript Runtime Caching Engine
  • 9. Web 1.0 - Static • Static pages – Were Read Only and B&W – Colors and other simple formatting came in • Input Forms – Came in just for data collection to start with – Server side response based on input came in @akshaymathu 9
  • 10. Web 1.0 - Dynamic • Client Side Dynamism – With DHTML, color changing web pages became popular – Changing other basic properties of the text also became possible • Server Side Dynamism – Dynamically generated pages made the web responsive to inputs – Embedded scripting languages gave it a boost @akshaymathu 10
  • 11. Web 2.0: The Power • Changing part of the webpage – Programmatically reading and writing DOM elements – Rich event handling • Communicating with server without refreshing entire page – AJAX @akshaymathu 11
  • 15. Doctype and DTD • Tell browser what standards this document is following – How to parse • HTML or XHTML • HTML version 1.0 or 1.1 – Show strict errors or not <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x html1-transitional.dtd"> @akshaymathu 15
  • 16. Html • Only the content within <html> and </html> is parsed • xmlns tells where the tags being used in the document are described • Multiple xmlns attributes can be used <html xmlns:fb="http://ogp.me/ns /fb#" xmlns="http://www.w3.org/1 999/xhtml"> @akshaymathu 16
  • 17. Head • Typically Contains invisible items – Title – Meta – Link – Script – Style @akshaymathu 17
  • 18. Title • Title of the page • Shows up on title bar of browser <title>ShopSocially Amplify</title> | Engage Convert @akshaymathu 18
  • 19. Meta • Additional metadata of the page • Multiple meta tags can be used <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="social platform, conversion"> <meta property="fb:app_id" content="213036345945"> @akshaymathu 19
  • 20. Content Type • Tells browser how to parse and execute the content – Character set info is also incuded <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> • ‘text/html’ is used for HTML pages – A few others are text/csv, application/pdf etc. @akshaymathu 20
  • 21. Link • Link to external files • Typically used for CSS @akshaymathu 21
  • 22. Script • Tells browser that the content is an executable script – Javascript, vbscript etc. @akshaymathu 22
  • 23. Style • Embeds CSS on the page <style type="text/css"> .fb_reset div{overflow:hidden} .fb_link img{border:none} </style> @akshaymathu 23
  • 24. Body • Contains all visible elements • Different elements can be used for laying out the page – Look and feel can be controlled by style elements – Some elements can not contain anything inside them e.g. input, br etc. @akshaymathu 24
  • 26. Types • Containers – Have opening and closing tags of same name – ‘/’ is used for closing e.g. <html>…</html> • Non-containers – Don’t have a closing tag – ‘/’ is used at the end of same tag for closing e.g. <br />, <input type=“text” /> @akshaymathu 26
  • 27. Display • Block – Take up complete available width by default – Consecutive elements stack vertically • Inline – Take up width only equal to the content – Consecutive elements stack horizontally – Typically word-wrap @akshaymathu 27
  • 28. Writing Text • Text can be written directly in body • It is a good to have it in blocks – <p>…</p> • Block display • Some default style – <div>…</div> • Block display • No default style – <span>…</span> • Inline display • No default style @akshaymathu 28
  • 29. Headings • Preformatted text size – Seven sizes are available i.e. h1 … h7 – Defaults can be overridden by CSS • Important for SEO <h1>This is heading</h1> @akshaymathu 29
  • 30. Bulleted List • Can be un-ordered (<ul>) or numbered (<ol>) • List items (<li>) are shown indented • Can be multilevel and mixed <ol> <li>item1</li> <ul> <li>sub item1</li> </ul> </ol> @akshaymathu 30
  • 31. Taking Input via Form Elements • • • • • • • Text box: <input type=“text” /> Radio button: <input type=“radio” /> Check box: <input type=“checkbox” /> Button: <input type=“button” /> Hidden: <input type=“hidden” /> Multiline Text box: <textarea></textarea> Dropdown/List: <select> <option>…</option> … </select> @akshaymathu 31
  • 33. Making it Look Different • Look can be defined in style attribute of an element <h3 style=“color: #aaa; background-color: #eee; font-size: 16px; width: 100%; padding: 5px;>This is Heading3 as I want</h3> @akshaymathu 33
  • 34. Font • Font-face – Name of font to be used • Font-family – Multiple font names in order • Font-size – Text size in any unit i.e. px, percentage, em • Font-weight – Bold or regular @akshaymathu 34
  • 35. Changing Colors • Color value can be specified in many ways – Hex RGB is mostly used i.e. #rrggbb • Background-color – Specifies color of background fill • Color – Specifies color of text • Border-color – Specifies color of border line @akshaymathu 35
  • 37. Where to write style? • Inline – As ‘style’ attribute of an element • Style block – On page in <style>…</style> block • CSS file – In an external file • This is also the preference order for applying style @akshaymathu 37
  • 38. Defining CSS • Multiple styling properties can be grouped together • Element(s) where to apply style is determined by CSS selector – Multiple CSS selectors may refer to an element • All properties are applied to the element @akshaymathu 38
  • 39. CSS Selectors • Tag name a {color: blue;} • ID #my_unique_a {color: red;} • Class .common_class {color:#ccc; margin:5px;} • Compound .common_class a {color: green;} • Psudo a:hover, a:visited {color: #ccc;} @akshaymathu 39
  • 40. CSS Frameworks • Provide ready-to-use collection of classes for common requirements – Grid – Navigation bars – Form elements – Buttons –… • Bootstrap is the great one @akshaymathu 40
  • 43. JavaScript • • • • • • • Born in 1995 at Netscape Not at all related to Java Syntax influenced by C Interpreted ECMA scripting lanuage Dynamically typed Object Oriented as well as Functional Prototype based @akshaymathu 43
  • 44. Javascript • Object Oriented – But different from other OO languages • Single threaded • Runs in its sandbox – Has full access to the objects on the page – Has restricted access to other pages or client machine file-system @akshaymathu 44
  • 45. Typical Usage • Web programing – Client side • Web pages • Browser plugins – Server side • SSJS (not in use) • NodeJS • PDF documents • Desktop Widgets • MongoDB @akshaymathu 45
  • 47. Comments • Single line – Starts with // – Can also be used after a statement • Multi line – Starts with /* and ends with */ @akshaymathu 47
  • 48. Statements • Case sensitive • Ignore whitespace • Semicolon (;) is used as delimiter for statements • Block of statements is delimited by curly braces ({}) @akshaymathu 48
  • 49. Output • Visible to all using DOM functions document.write(„Hello‟); alert(„How are you‟); • For developers in console console.log(“This is working”); @akshaymathu 49
  • 50. Variable • Explicitly defining is optional – JS runtime automatically defines as needed – Defining all variables with ‘var’ keyword is good • Loosely typed – No need to define the type (int, str etc.) • Dynamically typed – Type changes at runtime as the value changes var my_var = „Hello‟; my_var = 6; @akshaymathu 50
  • 51. Data Types • • • • • • • • • String: “1”, “Hello! How are you” Number: 1, 2, 121.22 Boolean: true, false Array: [1, “1”, false, {a: 10}] Object: {lang: “JS”, val: my_var} Null: null Undefined: undefined Functions: function(){} Date: Mon, 23 Sep 2013 12:18:54 GMT typeof “1” // String @akshaymathu 51
  • 52. Operators • Arithmetic +, -, *, /, %, ++, -- • Assignment =, +=, -=, *=, /=, %= • Concatenation + • Comparison ==, ===, !=, !==, >, <, <=, >= • Logical &&, ||, ! • Conditional () ? : @akshaymathu 52
  • 53. Conditional Blocks • If… else if … else If (age > 18){ can_vote = true; } else { can_vote = false; } Or can_vote = (age>18) ? true : false; @akshaymathu 53
  • 54. For Loop • For for (i=0; i<array.length; i++){ console.log(array[i]); } • For/in for (item in array){ console.log(item); } @akshaymathu 54
  • 55. While Loop • While while (is_extra_water){ drain(); } • Do/while do { drain(); } while (is_extra_water); @akshaymathu 55
  • 57. Function • Code block that executes on ‘call’ //define the function function say_hello(name){ alert(„Hello! „ + name); } //call the function say_hello(„Akshay‟); @akshaymathu 57
  • 58. Function Arguments • Any number of arguments can be passed without declaring • Named arguments are not supported say_hello(1); // Hello! 1 say_hello(); // Hello! undefined say_hello(„Akshay‟, „Mathur‟); //Hello! Akshay @akshaymathu 58
  • 59. Naming a Function function my_func(){} • A function may not have a name function(){}; my_func = function(){}; @akshaymathu 59
  • 60. Variable Scope • By default all variables are global • Variables defined with ‘var’ keyword are local to the function • It is assumed that all variables are defined in the first line function(){ var my_var = „Hello‟; console.log(msg); var2 = 6; } @akshaymathu 60
  • 61. Return Values • Anything can be returned from a function using return statement function sqr(x){ var sq = x * x; return sq; } var four_sq = sqr(4); @akshaymathu 61
  • 62. Other Facts • A function can be assigned to a variable • A function can be defined within another function • A function can return a function function sqr(){ sq = function (x){ return x * x * x; }; return sq; } My_sqr = sqr(); // function My_sqr(3); // 27 @akshaymathu 62
  • 63. Global Functions • encodeURI(), encodeURIComponent() Encodes a URI • • • decodeURI(), decodeURIComponent() Decodes a URI • • • escape() Encodes a string unescape() Decodes an • String() Converts an object's value to a string Number() Converts an object's value to a number • • a value is a finite, legal number isNaN() Determines whether a value is an illegal number parseInt() Parses a string and returns an integer parseFloat() Parses a string and returns a floating point number encoded string • isFinite() Determines whether eval() Evaluates a string and executes it as if it was script code @akshaymathu 63
  • 66. Objects • Everything in JS is an object (instance) “string”.length // 6 “str”.length.toFixed(2) // “3.00” [„hell‟, „o!‟].join(„‟) // „hello!‟ • Custom objects can also be defined @akshaymathu 66
  • 67. JSON • Javascript Object has a key and a value • Key is always string • Value can be of any type – Including another JSON object A = {key1: value1, key2: value2}; or A = new Object(); A[„key1‟] = value1; A.key2 = value2; @akshaymathu 67
  • 68. Object as Namespace • It is a good practice to group variables and functions together in an object rather than keeping them global var user = {}; user.name = “Akshay”; user.greet = function(){ alert(„Hello!„.concat(user.name); }; @akshaymathu 68
  • 69. Object as Named Argument • Objects can be passed to a function as an argument • They proxy for named arguments Say_hello = function (options){ if (typeof options === „Object‟){ options.msg = (options.msg)? options.msg : ‟Hello!‟; } alert(options.msg + „ „ + options.name); } Say_hello({name: „Akshay‟}); @akshaymathu 69
  • 72. Server Side Dynamism • At web server • Ability to execute a program in context of a web request – The program takes input from the request – The program creates a HTML page as output • Web browser understands only HTML • Embedded scripting technologies make it simpler – Allow the program to be inserted within an HTML page • PHP, ASP, JSP etc. @akshaymathu 72
  • 73. Client Side Dynamism • At web browser – Javascript • Ability to change properties of elements on the web page on user’s action – Text color, image source etc. – On click, on hover etc. • Ability to validate Form input without the round trip @akshaymathu 73
  • 74. Document Object Model • Window Object – Represents the browser window – All Javascript functions and variable are attached here by default • Document Object – Represents the page rendered inside the window – All HTML elements are available here • In the hierarchy they are attached @akshaymathu 74
  • 75. Manipulating the Web Page • Get programmatic handle of an HTML element via Document Object Model (DOM) var el = document.getElementByID( „a_unique_id‟); • Change desired property of the element el.src = “my_photo.png” @akshaymathu 75
  • 76. Changing Style • Access to inline style properties is via style object text_color = el.style.color • Change desired style attribute el.style.fontSize = “16px” @akshaymathu 76
  • 77. Responding to User Actions • Browser raises an event on user action – A few of them are onclick, onkeypress • A JavaScript function can be called when the event happens el.onclick = function(){ alert(„User clicked!‟); } @akshaymathu 77
  • 79. presents Creating Single Page Web App Series of 3 workshops Full Day Hands-on
  • 80. 1. Simple Web Pages • • • • • • • • Introduction to Web and its evolution Web page basics and HTML tags Styling elements JavaScript basics Introduction to DOM Changing style using JavaScript Simple DOM manipulation Responding to user actions @akshaymathu 80
  • 81. 2. Dynamic Web Pages • • • • Jquery JavaScript Framework Handling DOM events Getting data asynchronously via AJAX Client side dynamism using JavaScript templates • Simplify JS coding via CoffeeScript • Writing JS classes (prototypes) @akshaymathu 81
  • 82. 3. Single Page App • • • • • • Understanding MVC concepts Introduction BackboneJS and UnderscoreJS Using Backbone models, views and router Dealing with collections Custom events and their handlers Adjusting URLs for making browser buttons work @akshaymathu 82
  • 83. Document Object Model • Window Object – Represents the browser window – All Javascript functions and variable are attached here by default • Document Object – Represents the page rendered inside the window – All HTML elements are available here • In the hierarchy they are attached @akshaymathu 83
  • 84. Manipulating the Web Page • Get programmatic handle of an HTML element via Document Object Model (DOM) var el = document.getElementByID( „a_unique_id‟); • Change desired property of the element el.src = “my_photo.png” @akshaymathu 84
  • 85. JS Framework • Library for simplifying JS coding – Jquery is most popular • Provides simple interface and syntactic sugar for common JS work – Selecting DOM element – DOM traversal and manipulation – Event handling • Takes care of cross browser and cross version issues @akshaymathu 85
  • 86. Jquery • Takes care of cross browser and cross version issues • Library for simplifying JS coding – Everything is via functions – Same function for get and set • Provides simple interface and syntactic sugar for common JS work – Selecting DOM element – DOM traversal and manipulation – Event handling @akshaymathu 86
  • 87. Javascript Templates • Dynamically creates HTML code in JS – Data driven HTML – Allows variable substitution, looping and conditional statements • Generated HTML is inserted into the DOM for changing part of the page on-the-fly @akshaymathu 87
  • 88. Using Template <script type="text/x-jquery-tmpl” id=”photo"> <img src=“${photo_url}” title="${name}" /> </script> <script type="text/javascript”> template = $(‟#photo').template(); t_html = $.tmpl(template, data); $(“#container”).html(t_html); </script> @akshaymathu 88
  • 89. AJAX • A way in web browser to communicate with server without reloading the page • XmlHttpRequest (XHR) object can also create HTTP request and receive response – The request happens asynchronously • Other operations on page are allowed during the request – Received data does not render automatically • Data needs to be received in a callback function and used programmatically @akshaymathu 89
  • 90. AJAX Call $.ajax({ url: „/my_ajax_target‟, type: „POST‟, DataType: „json‟, data: {id: 2}, success: function(response){ alert(„Hello! „ + response.name); }, error: function(){ alert(„Please try later‟); } }); @akshaymathu 90
  • 91. CoffeeScript • A language with simple syntax – No semicolons and braces – Resembles to English – Indentation decides the code blocks • Compiles into Javascript – Provides syntactic sugar for boilerplate code • Manage variable scope • Class instead of prototype – Generates good quality, error free code @akshaymathu 91
  • 92. Cofeescript to Javascript greet_me = (name) -> greeting_word = 'Hello!' alert "#{greeting_word} #{name}” Compiles to greet_me = function(name) { var greeting_word; greeting_word = 'Hello!'; return alert("" + greeting_word + " " + name); }; @akshaymathu 92
  • 93. BackboneJS • Provides MVC structure for Javascript – The model object holds data – The view object handles visual elements and interactions – The controller object glues everything together and provides communication amongst objects • Custom Events help writing good code and eliminates use of global variables – The event object allows raising and handling custom events @akshaymathu 93
  • 94. BackboneJS code in Coffeescript class LoginModel extends Backbone.Model class LoginView extends Backbone.View initialize: => @template = $(‟#login_template').template() @render() render: => $(@el).html $.tmpl(@template, @model.toJSON()) events: 'click #login_btn' : ‟login_handler‟ login_handler: (ev) => window.mpq_track ‟Login Click‟ class LoginController extends Backbone.Router initialize: => @l_model = new LoginModel window.app_info @l_view = new LoginView model: model, el: ‟#login_div‟ @akshaymathu 94

Editor's Notes

  1. After first session add lines
  2. DNS Query that is done by Network stack is also very important