This document provides an overview and introduction to web development. It discusses ground rules for the session and asks attendees to introduce themselves. It then introduces the presenter, Akshay Mathur, and his background. The document proceeds to define what the web is and its evolution from static pages in Web 1.0 to dynamic pages in Web 2.0 powered by technologies like JavaScript, AJAX, and DOM manipulation. It covers key concepts like the URL, webpage structure, and HTML tags. It also provides introductions to CSS, JavaScript, and how to make pages dynamic using server-side technologies.
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
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
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
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
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
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
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