Your SlideShare is downloading. ×
Client Side Technologies
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Client Side Technologies

4,372

Published on

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

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
4,372
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×