Client Side Technologies

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    Client Side Technologies - Presentation 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.  
    SlideShare Zeitgeist 2009

    + anirvan.majumdaranirvan.majumdar Nominate

    custom

    235 views, 0 favs, 0 embeds more stats

    Explores 3 aspects of developing user interfaces fo more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 235
      • 235 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.