Getting Started with Web

75 %
25 %
Information about Getting Started with Web

Published on February 16, 2014

Author: AkshayMathur7



This is the content of first workshop os a 3 workshop series for learning to create Single Page Web Apps.

This focuses on introducing the HTML, CSS and Javascript to the newbies.

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 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" " 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=" /fb#" xmlns=" 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


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 • • • • • • • 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 = {}; = “Akshay”; user.greet = function(){ alert(„Hello!„.concat(; }; @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 + „ „ +; } 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 = • Change desired style attribute = “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! „ +; }, 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 @akshaymathu @akshaymathu 95

#rrggbb presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Getting Started with ASP.NET Web API | The ASP.NET Site

Getting Started with ASP.NET Web API 2. By Mike Wasson | May 28, 2015. In this tutorial, you will create your first HTTP service using ASP.NET Web API.
Read more

Get Started with ASP.NET | The ASP.NET Site

Get started with ASP.NET. Download the free .NET Framework and free Visual Studio Express to get started today.
Read more

Getting Started with Amazon Web Services (AWS)

Want to get started with Amazon Web Services? Learn AWS basics and start building with tutorials, technical documents, and videos in the Resource Center.
Read more

Getting Started with JAX-WS Web Services - NetBeans IDE ...

Getting Started with JAX-WS Web Services. Java API for XML Web Services (JAX-WS), JSR 224, is an important part of the Java EE platform. A follow-up to the ...
Read more

Getting Started with Web Accessibility - World Wide Web ...

Getting Started with Web Accessibility. The Web Accessibility Initiative (WAI) develops strategies, guidelines, and resources to help make the Web ...
Read more

Getting Started - Docker

Getting Started with Docker for Mac. ... For something more adventurous, start a Dockerized web server. docker run -d -p 80:80 --name webserver nginx
Read more

Getting Started with Web Technologies - Microsoft Virtual ...

Learn the basics of web development. Find out about different languages, frameworks, platforms, and vocabulary, in this first step toward a web dev career.
Read more

Getting started with the Web - Mozilla Developer Network

Getting started with the Web is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a ...
Read more

Getting Started with XML Web Services in Visual Basic.NET ...

This article will help you get started creating and accessing XML Web services with Visual Basic .NET and Visual C#.
Read more

Getting started · Bootstrap

Getting started. An overview of Bootstrap, how to download and use, basic templates and examples, and more.
Read more