• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Client Side Technologies
 

Client Side Technologies

on

  • 4,771 views

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.

Statistics

Views

Total Views
4,771
Views on SlideShare
4,763
Embed Views
8

Actions

Likes
0
Downloads
0
Comments
1

2 Embeds 8

http://www.slideshare.net 4
http://www.linkedin.com 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Client Side Technologies Client Side Technologies Presentation Transcript

    • Web Technologies - Clients
    • 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
    • What’s in store…
      • Basic HTML
      • Defining with CSS
      • Powering up with JavaScript
      • Events firing everywhere!
      • Dynamic and not-so basic HTML
    • 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
    • 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!
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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;”>
    • 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 -
    • 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
    • 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
    • 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]
    • 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 !
    • 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!!
    • 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!
    • 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
    • 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
    • R E F E R E N C E S
      • Eloquent JavaScript – Marijn Haverbeke
      • Quirksmode
      • W3Schools
      • Wikipedia
    •