Dynamic HTML (DHTML) combines 3 technologies:

1. Dynamic HTML (DHTML) combines 3 technologies: • Cascading Style Sheets (CSS) refines HTML formatting and provides better control over positioning and layering content • JavaScript (not Java), a scripting language for web browsers • SCRIPT tag in HTML indicates language: <SCRIPT LANGUAGE=“JavaScript”> • Document Object Model (DOM) exposes all the attributes of HTML and Style Sheets to JavaScript control • DOM lets JavaScript programmers view and modify the properties of web pages, dynamically.

2. Cascading Style Sheets (CSS) • World Wide Web Consortium (W3C), 1996 • First supported in Netscape 4 and IE 4 • Style sheets are groups of rules, defining how an HTML element appears in a browser • Following sets color of all FONT tags to blue: <STYLE TYPE="text/css">FONT { color : blue; } </STYLE> • Every HTML tag that fit a sector’s specifications gets its declarations: <FONT>Cookie Monster</FONT> • FONT is known as the sector and color : blue {within braces} is a declaration

3. Classes control scope • It can get a little tricky to distinguish between all the FONT tags you might want to declare • Following snippet uses dot notation to define a class BIGBIRD within as a subclass of H3: <STYLE TYPE="text/css">  H3.BIGBIRD { color : yellow; }     /* CLASS */</STYLE><H3 class="BIGBIRD">Big Bird</H3> • See cssFormatting.htm

4. Declaring a font-family • A font-family declaration specifies a specific font you want to use in your site: <STYLE TYPE="text/css">  .COOKIEM {        font-family:"Sesame Street", "Kidprint", sans-serif; /* Try these fonts, in order */         font-size: 24pt;         font-weight: bold;         text-transform: uppercase;}</STYLE> <font class="COOKIEM">Cookie Monster</font>

5. Site basis integration • Lets you create a .css file, then load it into each page in your site: • Put your style sheet (like the code above) in a file, e.g., mystylesheet.css • Put the following code in the HEAD of all your HTML pages: <LINK REL="STYLESHEET" TYPE="text/css" HREF="mystylesheet.css">

6. Background images • Declarations for a background image of a page: • background-image: url(yourbackground.gif) || none;background-repeat: repeat-x || repeat-y || repeat;background-attachment: fixed || scroll; • background-image: sets a background image from file • background-repeat: repeat X-ward (right) or Y (down) • background-attachment: background scrolls with text? <STYLE TYPE="text/css">  .COOLBACK {         background-color: blue;         background-image: url(greenbox.jpg);         font-size: 14pt;         font-weight: bold;  }</STYLE><font class="COOLBACK">Look at how cool this text is! </font>

7. CSS level 2 positioning • Introduces positioning, providing direct of control over Web page layout • How do HTML developers typically arrange objects on a page? • Tables to arrange objects can be awkward • Instead you can place each object exactly: H1 { position:absolute; top:150px; left:300px; width:200px; height:200px } • Places <H1> text at absolute coordinates (pixels from top left corner) and size (width and height)

8. Inline styles, <DIV>, <SPAN> • Of course, you probably don't want all your <H1> elements to appear in the same spot • Instead, this code positions only the contents of a particular <DIV> element: <DIV style="position:absolute; top:300px; left:100px; width:200px; height:200px; background-color:red">A red 200-by-200-pixel box, 300 pixels from top and 100 from left edges of window.</DIV> See cssPositioning.htm

9. Relative positioning • Relative positioning places elements into flow of the document--offsetting them from previous element in the HTML code: <STYLE type="text/css"><!--#offset { position:relative; top:50px; left: 25px }--></STYLE>This text will flow normally across the page, while the next line of text will be offset from the end of this line. <SPAN id="offset">This text is offset from the above line--50 pixels on top and 25 pixels on the left.</SPAN></BODY></HTML>

10. Z-layering of objects • Layering lets object overlap each other • In addition to x- and y-coodinates, add z-index: .over { position:absolute; top:500px; left:50px;     z-index:2; background-color:green } .under { position:absolute; top:510px; left:50px;     z-index:1; background-color:blue } <SPAN class="over">This text is positioned 20 pixels from the left and 165 pixels from the top of the window.</SPAN> <SPAN class="under">This text is positioned just below the above text, and would usually be placed on top because of its order on the page.</SPAN>

11. Analyzing a document <HTML> <HEAD><TITLE> Simple DOM Demo </TITLE></HEAD> <BODY ID="bodyNode">This is the document body <P ID = "p1Node">This is paragraph 1.</P> <P ID = "p2Node">Paragraph 2</P> </BODY> </HTML> • From the root <BODY> you can go to one of its four children • Reach first child using bodyNode.firstChild or bodyNode.childNodes[0] • Access third (and last) child by bodyNode.childNodes[2] or bodyNode.lastChild • Or use <P> tags with a unique ID: p1Node.nextSibling accesses p2Node

12. Dynamic HTML • Supports animations & rollover effects • No plug-ins: it’s part of HTML 4.0 • Different browsers provide different support for HTML 4.0 • JavaScript programs dynamic behaviors • JavaScript functions manipulate DOM objects • Dreamweaver provides high level interface generating JavaScript code for a few common dynamic behaviors

13. Rollover effect in DHTML • Preview in comingDone.html • Effect achieved by swapping images from files into memory • In Dreamweaver, open coming.htm: • choose Insert > Image & select redlite.gif • In Property Inspector, enter: “redlight” • Set Border to 0 (no border around image) • Select image, then windows > Behaviors • Hold down + button and select the Swap image • Select grnlite.gif as swap image • Leave Preload Images and Restore Images onMouseOut on • Why is pre-storing in array crucial to rollover effect? • Dreamweaver makes it even easier: Insert>Image Objects>Rollover Image

14. Rollover effect in Javascript • Look at source code view in DW • function MM_preloadImages(): • sets local variable d to document: why? • creates new Array called d.MM_p • MM_preloadImages.arguments reads onLoad="MM_preloadImages('grnlite.gif')" • function MM_swapImage(): • stores MM_swapImage.arguments • findObj locates the other image

15. More DHTML examples • Jeff Lutz’s example (note animated butterfly) • Dreamweaver generates timeline functions • Timeline interface similar to Flash • Drag-and-drop map puzzle

16. What is AJAX? See an example • Asynchronous JAvaScript And XML • Developed by Adaptive Path • Combines several established technologies: • Standards based display • CSS – Cascading style sheets • XHTML – Extensible Hyper Text Markup Language • Dynamic display manipulation with DOM • Data interchange and manipulation with XML • Asynchronous data retrieval with XMLHttpRequest • JavaScript functions to bind everything together

17. XMLHttpRequest • Can transfer and manipulate XML data between a client and server • Originally an ActiveX object developed by Microsoft accessible by scripting languages, such as VBScript • Mozilla 1.0 included a compatible native version, XMLHttpRequest

18. Classic Web Application Model • Disadvantages? • What is the user doing? • WAITING • Application does not allow user interaction while the information is being processed • While user interacting with the browser, the server is not processing information for that user

19. Classic Web Application Model(Synchronous)

20. The AJAX Engine • Intermediary layer between user and server • Instead of just loading a webpage, browser loads the AJAX Engine • Written in JavaScript • Usually located in a hidden frame • Responsible for displaying the user interface and communicating with the server • Allows the user to interact asynchronously – independent of communication with the server • Communicates with the server, usually with XML

21. AJAX Web Application Model(Asynchronous)

22. AJAX Web Application Model • Advantages? • Application is more responsive • Any action that does not require the information from the server is handled by the engine • User interaction and data processing can occur concurrently • Disadvantages? • Added technical complexity • Potential security issues

23. Is AJAX better than Flash? • Yahoo Maps • http://maps.yahoo.com/ • Google Maps • http://maps.google.com/ • What do you think?

24. AJAX advantages vs. Flash • Searchablitity: text pages are more visible to search engines than Flash • Open source vs. Flash licensing • AJAX does not require plug-ins • However, users must have JavaScript enabled • Cost: Adobe has driven up cost of Flash development • Accessibility • Font and color settings in AJAX default to those of the environment • Flash applications use developer specified settings which may be more difficult for disabled users • Screen readers or acceleration keys may not be available in Flash • Security--Flash sites may not be as trusted as an HTML site • Can be used to avoid pop-up blockers • Can be used to create immortal cookies

25. Flash pros vs. AJAX • Media Handling? • Better handling of sound and graphics • Vector Graphics • May take up less space than bitmaps and are easily scalable • While available in most web browsers, either native or as a plug-in, vector graphics are more commonly used in Flash • Compatibility • No discrepancy between browsers (just one distributor) • Machine Access • Flash apps have better access to resources of user’s computer

26. AJAX versus Flash • So which is better? • Both have certain strengths • Two solutions: • Analyze needs and choose accordingly • Make Flash and AJAX can work together: • http://weblogs.macromedia.com/mxna/reports/categoryFeedReport/

27. How to Code • “By hand” • Use a framework • prototype (http://www.prototypejs.org/) • script.aculo.us (add-on to prototype.js, cross-browser user interface JS libraries

28. Wrap up • Asynchronous JavaScript And XML • Combines several existing technologies • Can create rich and dynamic web pages • Improves responsiveness of web based applications

29. AJAX References • http://www.adaptivepath.com/publications/essays/archives/000385.php • http://tool-man.org/ • http://www.knownow.com/products/docs/whitepapers/KN-Beyond-AJAX.pdf • http://weblogs.macromedia.com/cantrell/archives/2006/01/flash_and_AJAX_1.cfm • http://radar.oreilly.com/archives/2005/05/flash_is_AJAX_o.html • http://www.designitsimple.de/wordpress/?p=23 • http://searchwebservices.techtarget.com/originalContent/0,289142,sid26_gci1150930,00.html