Web ApplicationHTML, CSS, JS
Ingredients of a Web Application● Front End● Back End● APIs● Devices to support● Accessibility**
Focus on Front EndWhy? Where ? What? How?
Why ? - Naive UserWhere ? - Internet [From Anywhere]What? - Pictures are better way to expresscommunication than letters o...
HTML - StructureCSS - DesignJavascript - Behaviour
How to build a web application● Viewports to support● Devices to support● HTML>CSS>JAVASCRIPT● Way to communicate and get ...
HTML Basic● Significance of doctype● <html>, <head>,<body>● inline/block/table● layouts
CSS Basic● Selectors● Box-Model● Rendering
Javascript Basic● Window, document● Events - important for behaviour● AJAX - Asynchronous **● <noscript>● Security● Debugg...
● Everything is a Object eg function , varanything(Native/Host)● There are also these primitivevalue types like Undefined,...
"Prototype-based programming is a style ofobject-oriented programming in whichclasses are not present, and behavior reuse(...
Prototype● When you define a function withinJavaScript, it comes with a few pre-definedproperties● The prototype property ...
var redbus = function(address){this.address = "honolulu";return this.address;}console.log(typeof redbus) //FUNCTION"Functi...
console.log(redbus instanceof Function) //trueconsole.log(redbus.__proto__ == =Function.prototype) // truevar rb = new red...
This is known as prototype chain!● Ends when prototype of any object is null● By default Objects prototype is null● Confus...
function Animal() {....}Animal.prototype.walk = function(){alert (I am walking Gangnam style!);};function Monkey() {// Cal...
/ inherit PersonMonkey.prototype = new Animal();Monkey.prototype.constructor = Monkey;Monkey.prototype.sing = function(){a...
This is Inheritance !Can be checked by.console.log(vishal instanceof Animal) // trueconsole.log(vishal instanceof Monkey) ...
Closures.The pattern of public, private, and privilegedmembers is possible because JavaScripthas closures.
function Container(param) {function dec() {//uses secret} //privilegedthis.member = param;//publicvar secret = 3;//private...
Enough OOPS!Hoisting● Function level scoping not block level likeC++, Java, C#● Function declarations and variabledeclarat...
Memory Leaks● garbage collection● mark and sweep algorithm● reason for memory leaks● IE - Ohh yeah :P● Possible scenarios
"Best Practices"Good to follow!
Coding == Story Telling??language agnostic
"A good story is onewhich is easy to conveyand takes less time toconvey"Developers need to convey code toBrowsers and othe...
HTML5 - A bubble?Why Facebook shifted back to nativeapplication as compared to html5 ?
Reference● WebPlatform.org● Mozilla Developer Network● Opera developerAvoid w3schools if possible!
Assignmenthttp://apps.topcoder.com/wiki/display/~hello-c/Quick-+48+hours%21+-+UI+prototype+-+Customizable+eFlipbook+HTML+P...
Next session● Performance● Optimization● Algorithms
- Thanks@aquarius_vishalhttp://www.vvishal.com
Upcoming SlideShare
Loading in …5
×

Web application

858 views

Published on

The insight of Web Development using HTML, Javascript & CSS

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
858
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web application

  1. 1. Web ApplicationHTML, CSS, JS
  2. 2. Ingredients of a Web Application● Front End● Back End● APIs● Devices to support● Accessibility**
  3. 3. Focus on Front EndWhy? Where ? What? How?
  4. 4. Why ? - Naive UserWhere ? - Internet [From Anywhere]What? - Pictures are better way to expresscommunication than letters or journalsHow? - HTML/CSS/JS
  5. 5. HTML - StructureCSS - DesignJavascript - Behaviour
  6. 6. How to build a web application● Viewports to support● Devices to support● HTML>CSS>JAVASCRIPT● Way to communicate and get data
  7. 7. HTML Basic● Significance of doctype● <html>, <head>,<body>● inline/block/table● layouts
  8. 8. CSS Basic● Selectors● Box-Model● Rendering
  9. 9. Javascript Basic● Window, document● Events - important for behaviour● AJAX - Asynchronous **● <noscript>● Security● Debugging - Ahh
  10. 10. ● Everything is a Object eg function , varanything(Native/Host)● There are also these primitivevalue types like Undefined, Null,String, Boolean and Number thatarent objects● JS is Object-oriented language or Prototypebased language
  11. 11. "Prototype-based programming is a style ofobject-oriented programming in whichclasses are not present, and behavior reuse(known as inheritance in class-basedlanguages) is accomplished through a processof decorating existing objects which serveas prototypes. This model is also known asclass-less, prototype-oriented, or instance-based programming."
  12. 12. Prototype● When you define a function withinJavaScript, it comes with a few pre-definedproperties● The prototype property is initially an emptyobject, and can have members added to it –as you would any other object.● Every object within JavaScript has a “secret”property added to it when it is defined orinstantiated, named __proto__● __proto__ property shouldn’t be confusedwith an object’s prototype
  13. 13. var redbus = function(address){this.address = "honolulu";return this.address;}console.log(typeof redbus) //FUNCTION"Function is a predefined object inJavaScript, and, as a result, has its ownproperties (e.g. length and arguments) andmethods (e.g. call and apply). And yes, it,too, has its own prototype object, as well as thesecret __proto__ link."
  14. 14. console.log(redbus instanceof Function) //trueconsole.log(redbus.__proto__ == =Function.prototype) // truevar rb = new redbus;console.log(rb__proto__ ===redbus.prototype)// trueconsole.log(rb_proto__===Function.prototype)//false
  15. 15. This is known as prototype chain!● Ends when prototype of any object is null● By default Objects prototype is null● Confusing - Yes , Everything is Object andFunction , no classess , no keywords aspublic - private: "yet we challenge to make itObject Oriented"
  16. 16. function Animal() {....}Animal.prototype.walk = function(){alert (I am walking Gangnam style!);};function Monkey() {// Call the parent constructorAnimal.call*(this*);}
  17. 17. / inherit PersonMonkey.prototype = new Animal();Monkey.prototype.constructor = Monkey;Monkey.prototype.sing = function(){alert(Sing like OM);}var vishal = new Monkey();vishal.walk(); vishal.sing();
  18. 18. This is Inheritance !Can be checked by.console.log(vishal instanceof Animal) // trueconsole.log(vishal instanceof Monkey) // trueIn modern browser this can be achieved by:Monkey.prototype = Object.create(Animal.prototype);
  19. 19. Closures.The pattern of public, private, and privilegedmembers is possible because JavaScripthas closures.
  20. 20. function Container(param) {function dec() {//uses secret} //privilegedthis.member = param;//publicvar secret = 3;//privatevar that = this;this.service = function () {return dec() ? that.member : null;};//public}
  21. 21. Enough OOPS!Hoisting● Function level scoping not block level likeC++, Java, C#● Function declarations and variabledeclarations are always moved (“hoisted”)invisibly to the top of their containing scopeby the JavaScript interpreter. eg.
  22. 22. Memory Leaks● garbage collection● mark and sweep algorithm● reason for memory leaks● IE - Ohh yeah :P● Possible scenarios
  23. 23. "Best Practices"Good to follow!
  24. 24. Coding == Story Telling??language agnostic
  25. 25. "A good story is onewhich is easy to conveyand takes less time toconvey"Developers need to convey code toBrowsers and other clients.
  26. 26. HTML5 - A bubble?Why Facebook shifted back to nativeapplication as compared to html5 ?
  27. 27. Reference● WebPlatform.org● Mozilla Developer Network● Opera developerAvoid w3schools if possible!
  28. 28. Assignmenthttp://apps.topcoder.com/wiki/display/~hello-c/Quick-+48+hours%21+-+UI+prototype+-+Customizable+eFlipbook+HTML+Prototype
  29. 29. Next session● Performance● Optimization● Algorithms
  30. 30. - Thanks@aquarius_vishalhttp://www.vvishal.com

×