Client Side Technologies

5,749 views
5,505 views

Published on

Explores 3 aspects of developing user interfaces for web based applications - HTML, CSS and JavaScript.

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
5,749
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Client Side Technologies

  1. 1. Web Technologies - Clients
  2. 2. Each point is an IP address Length of line between points is indicative of the delay between 2 nodes Only 30% of Class C Networks are Represented here <ul><li>Lines are colour coded based </li></ul><ul><li>upon the network type – </li></ul><ul><li>Dark Blue – net, ca, us </li></ul><ul><li>Green – com, org </li></ul><ul><li>Red – mil, gov, edu </li></ul><ul><li>Yellow – jp, cn, au, de </li></ul>
  3. 3. What’s in store… <ul><li>Basic HTML </li></ul><ul><li>Defining with CSS </li></ul><ul><li>Powering up with JavaScript </li></ul><ul><li>Events firing everywhere! </li></ul><ul><li>Dynamic and not-so basic HTML </li></ul>
  4. 4. HTML’s T I M E L I N E <ul><li>Derived from SGML , extended to XHTML </li></ul><ul><li>November 1995 – HTML 2.0 </li></ul><ul><ul><li>Basic form based, table structure, internationalisation support </li></ul></ul><ul><li>January 1997 – HTML 3.2 </li></ul><ul><ul><li>Adopted Netscape’s visual tags </li></ul></ul><ul><li>December 1997 – HTML 4.0 </li></ul><ul><ul><li>Strict , transitional and frameset DTDs introduced </li></ul></ul><ul><li>January 2008 – HTML 5.0 working draft released </li></ul><ul><li>XHTML is a separate language </li></ul><ul><li>Began as a reformulation of HTML 4.01 using XML 1.0 </li></ul>
  5. 5. The Problem with X H T M L <ul><li>Adoption has been really slow </li></ul><ul><li>Breaks backward compatibility – adoption almost non-existent </li></ul><ul><li>Most of the XHTML based websites invalid </li></ul><ul><li>Some work as browsers treat them as normal HTML </li></ul><ul><li>Too many restrictions, too fast! </li></ul>
  6. 6. The M A R K U P Language <ul><li>DOCTYPE – specifies declarations to which that conform to a particular markup </li></ul><ul><li>ELEMENTS </li></ul><ul><ul><li>Structural – describes purpose. <h2> </li></ul></ul><ul><ul><li>Presentational – describes appearance of text. No purpose. </li></ul></ul><ul><ul><li>Hypertext – links parts of a document to other documents </li></ul></ul><ul><li>ATTRIBUTES – name-value pairs </li></ul>
  7. 7. The M A R K U P Language <ul><li>Meta tags – metadata to inform the browser of the content type, caching, redirecting, etc </li></ul><ul><li>head – container for important set of tags like title , link external files, script and style elements </li></ul>
  8. 8. Important H T M L T A G S <ul><li>Besides the <html>, <head>, <body> … </li></ul><ul><li><form> - encapsulating relevant elements. Can have other forms too! </li></ul><ul><li><div> - container, used primarily for formatting </li></ul><ul><li><table> - provides a table layout </li></ul><ul><li><input> - to capture user interaction </li></ul><ul><li><img> - embedding images </li></ul><ul><li><b>, <i>, <u> - text formatting </li></ul>
  9. 9. Important H T M L Attributes <ul><li>Common set of attributes across elements </li></ul><ul><li>style – specifying inline styling properties </li></ul><ul><li>id – unique identifier for the element </li></ul><ul><li>name* – name of the element </li></ul><ul><li>value* - associates a value with the element </li></ul>
  10. 10. Cascading S T Y L E S H E E T S <ul><li>What’s meant ‘styling’ ? </li></ul><ul><ul><li>How HTML elements are to be displayed </li></ul></ul><ul><li>HTML meant to define content, not format – the <font> nightmare! </li></ul><ul><li>Multiple styles cascade into one </li></ul><ul><li>Multiple ways of specifying style </li></ul><ul><ul><li>Inside an HTML element </li></ul></ul><ul><ul><li>Inside the <head> section </li></ul></ul><ul><ul><li>In an external file </li></ul></ul><ul><li>What order of priority – 1. browser default, 2. External stylesheet, 3. Internal stylesheet, 4. Inline style </li></ul><ul><ul><li>P 4 > P 1 </li></ul></ul>
  11. 11. Defining S T Y L E S H E E T S <ul><li>CSS syntax – </li></ul><ul><ul><li>selector { property : value; } </li></ul></ul><ul><ul><li>body { color : black; } </li></ul></ul><ul><li>Class selector – defines different stylesheets for same HTML element [can be different too!] </li></ul><ul><ul><li>p.right { text-align: right; } </li></ul></ul><ul><ul><li>.left { text-align: left; } </li></ul></ul><ul><li>Id selector – style applies to elements with particular ‘id’ attribute value </li></ul><ul><ul><li>#someStyle { color: red; } - applies to all elements with id = “someStyle” </li></ul></ul><ul><li>Inline – style properties specified within tag </li></ul><ul><ul><li>< div style=“border: 1px solid;”> </li></ul></ul>
  12. 12. More on S T Y L E S H E E T S <ul><li>Linking external stylesheets – </li></ul><ul><ul><li>< link rel=“stylesheet” type=“text/css” href=“style.css”/> </li></ul></ul><ul><li>Internal stylesheets – when a single document has a unique style </li></ul><ul><ul><li>Within <head> tags </li></ul></ul><ul><ul><li><style type=“text/css”> hr { color: green; } </style> </li></ul></ul><ul><li>A whole set of stylesheet properties can be found here - </li></ul>
  13. 13. J A V A S C R I P T <ul><li>~ 1995 – Developed by Brendan Eich as Mocha -> LiveScript -> JavaScript </li></ul><ul><li>No relation to Java! </li></ul><ul><li>Name’s a co-marketing deal between Netscape and Sun </li></ul><ul><li>Structurally a lot is borrowed from C </li></ul><ul><li>Similar naming constructs as that in Java </li></ul><ul><li>Microsoft came up with ‘JScript’ for IE </li></ul><ul><li>The very genesis of cross-browser conflicts! </li></ul><ul><li>Finally handed over to ECMA International for standardisation </li></ul>
  14. 14. J A V A S C R I P T - Features <ul><li>Supports dynamic typing – types associated with values not variables! </li></ul><ul><li>Arrays and associative arrays </li></ul><ul><li>Run-time evaluation using eval </li></ul><ul><li>Object Oriented Programming concepts! </li></ul><ul><li>DOM based traversal of HTML document </li></ul>
  15. 15. J A V A S C R I P T - Accessing Page Elements <ul><li>window > document > form > … </li></ul><ul><li>getElementById() – allows you to access any particular element/node using ‘id’ </li></ul><ul><ul><li>Supported only by the document object </li></ul></ul><ul><li>getElementByTagName(‘name’) </li></ul><ul><li>Node based methods and properties like – childNodes, firstChild, lastChild, etc </li></ul><ul><li>By retrieving the ‘form’ element – most commonly used way </li></ul><ul><ul><li>document.<formName> </li></ul></ul><ul><ul><li>document.forms[n] </li></ul></ul>
  16. 16. J A V A S C R I P T - Variables, Arrays, Functions, Objects <ul><li>var variableName – declaring a variable </li></ul><ul><ul><li>var a = 23 // a is int </li></ul></ul><ul><ul><li>a = ‘text’ // a is string </li></ul></ul><ul><li>var arr = new Array(“a”, “b”), or, [“a”, “b”] – declaring an array </li></ul><ul><ul><li>length, indexOf(), join(param), pop(), push(param,…), slice(start, end) </li></ul></ul><ul><li>function someMethod() – declaring a function </li></ul><ul><ul><li>Even var a = function() is valid </li></ul></ul><ul><li>Objects can be declared using Object, JSON or functions ! </li></ul>
  17. 17. J A V A S C R I P T - O B J E C T S <ul><li>var obj = new Object() // using JavaScript’s inbuilt Object class </li></ul><ul><li>var obj = {a : “”} // JSON representation of an object </li></ul><ul><li>var method() { … } var obj = new method(); // strange but true!! </li></ul>
  18. 18. J A V A S C R I P T - Debugging <ul><li>A big pain!!! </li></ul><ul><li>Things changed dramatically with Firebug – Firefox addon </li></ul><ul><li>Google’s Chrome comes with a JavaScript console </li></ul><ul><li>Both allow element inspection </li></ul><ul><li>Breakpoint oriented debugging </li></ul><ul><li>Still evolving, but debugging’s simplified a great deal! </li></ul>
  19. 19. All about E V E N T S <ul><li>Almost all HTML elements can generate events </li></ul><ul><li>HTML provides multiple ‘hooks’ to capture events through attributes </li></ul><ul><ul><li>onBlur, onFocus, onClick, onKeyDown, onKeyPress, … </li></ul></ul><ul><li>Typical events – moving the mouse, typing, clicking, etc </li></ul><ul><li>JavaScript allows meaningful work to be done upon event generation </li></ul><ul><li>2 models of Event propagation exist – </li></ul><ul><ul><li>Capturing – W3C model </li></ul></ul><ul><ul><li>Bubbling – Microsoft model </li></ul></ul>Element 1 Element 2 Capture Bubble
  20. 20. D Y N A M I C HTML <ul><li>Altering the contents of a page dynamically </li></ul><ul><li>Primarily achieved through JavaScript </li></ul><ul><li>Used for on-screen validation, alerts, rich interface experience </li></ul><ul><li>A crucial role in Web 2.0 </li></ul>
  21. 21. R E F E R E N C E S <ul><li>Eloquent JavaScript – Marijn Haverbeke </li></ul><ul><li>Quirksmode </li></ul><ul><li>W3Schools </li></ul><ul><li>Wikipedia </li></ul>

×