Your SlideShare is downloading. ×
0
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
12DHTML.ppt
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

12DHTML.ppt

445

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
445
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
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. Dynamic HTML (DHTML) combines 3 technologies: <ul><li>Cascading Style Sheets (CSS) refines HTML formatting and provides better control over positioning and layering content </li></ul><ul><li>JavaScript (not Java), a scripting language for web browsers </li></ul><ul><ul><li>SCRIPT tag in HTML indicates language: &lt;SCRIPT LANGUAGE=“JavaScript”&gt; </li></ul></ul><ul><li>Document Object Model (DOM) exposes all the attributes of HTML and Style Sheets to JavaScript control </li></ul><ul><ul><li>DOM lets JavaScript programmers view and modify the properties of web pages, dynamically. </li></ul></ul>
  • 2. Cascading Style Sheets (CSS) <ul><li>World Wide Web Consortium (W3C), 1996 </li></ul><ul><ul><li>First supported in Netscape 4 and IE 4 </li></ul></ul><ul><li>Style sheets are groups of rules, defining how an HTML element appears in a browser </li></ul><ul><li>Following sets color of all FONT tags to blue: </li></ul><ul><ul><li>&lt;STYLE TYPE=&amp;quot;text/css&amp;quot;&gt; FONT { color : blue; } </li></ul></ul><ul><ul><li>&lt;/STYLE&gt; </li></ul></ul><ul><ul><li>Every HTML tag that fit a sector’s specifications gets its declarations : &lt;FONT&gt;Cookie Monster&lt;/FONT&gt; </li></ul></ul><ul><ul><li>FONT is known as the sector and color : blue {within braces} is a declaration </li></ul></ul>
  • 3. Classes control scope <ul><li>It can get a little tricky to distinguish between all the FONT tags you might want to declare </li></ul><ul><li>Following snippet uses dot notation to define a class BIGBIRD within as a subclass of H3: </li></ul><ul><ul><li>&lt;STYLE TYPE=&amp;quot;text/css&amp;quot;&gt;   H3.BIGBIRD { color : yellow; }     /* CLASS */ &lt;/STYLE&gt; &lt;H3 class=&amp;quot;BIGBIRD&amp;quot;&gt;Big Bird&lt;/H3&gt; </li></ul></ul><ul><li>See cssFormatting.htm </li></ul>
  • 4. Declaring a font-family <ul><li>A font-family declaration specifies a specific font you want to use in your site: </li></ul><ul><li>&lt;STYLE TYPE=&amp;quot;text/css&amp;quot;&gt;   .COOKIEM {        font-family:&amp;quot;Sesame Street&amp;quot;, &amp;quot;Kidprint&amp;quot;, sans-serif; /* Try these fonts, in order */          font-size: 24pt;          font-weight: bold;          text-transform: uppercase; } &lt;/STYLE&gt; </li></ul><ul><li>&lt;font class=&amp;quot;COOKIEM&amp;quot;&gt;Cookie Monster&lt;/font&gt; </li></ul>
  • 5. Site basis integration <ul><li>Lets you create a .css file, then load it into each page in your site: </li></ul><ul><li>Put your style sheet (like the code above) in a file, e.g., mystylesheet.css </li></ul><ul><li>Put the following code in the HEAD of all your HTML pages: </li></ul><ul><li>&lt;LINK REL=&amp;quot;STYLESHEET&amp;quot; TYPE=&amp;quot;text/css&amp;quot; HREF=&amp;quot;mystylesheet.css&amp;quot;&gt; </li></ul>
  • 6. Background images <ul><li>Declarations for a background image of a page: </li></ul><ul><li>background-image: url(yourbackground.gif) || none; background-repeat: repeat-x || repeat-y || repeat; background-attachment: fixed || scroll; </li></ul><ul><li>background-image: sets a background image from file </li></ul><ul><li>background-repeat: repeat X-ward (right) or Y (down) </li></ul><ul><li>background-attachment: background scrolls with text? </li></ul><ul><li>&lt;STYLE TYPE=&amp;quot;text/css&amp;quot;&gt;   .COOLBACK {          background-color: blue;          background-image: url(greenbox.jpg);          font-size: 14pt;          font-weight: bold;   } &lt;/STYLE&gt; &lt;font class=&amp;quot;COOLBACK&amp;quot;&gt;Look at how cool this text is! &lt;/font&gt; </li></ul>
  • 7. CSS level 2 positioning <ul><li>Introduces positioning, providing direct of control over Web page layout </li></ul><ul><li>How do HTML developers typically arrange objects on a page? </li></ul><ul><li>Tables to arrange objects can be awkward </li></ul><ul><li>Instead you can place each object exactly: </li></ul><ul><ul><li>H1 { position:absolute; top:150px; left:300px; width:200px; height:200px } </li></ul></ul><ul><ul><li>Places &lt;H1&gt; text at absolute coordinates (pixels from top left corner) and size (width and height) </li></ul></ul>
  • 8. Inline styles, &lt;DIV&gt;, &lt;SPAN&gt; <ul><li>Of course, you probably don&apos;t want all your &lt;H1&gt; elements to appear in the same spot </li></ul><ul><li>Instead, this code positions only the contents of a particular &lt;DIV&gt; element: </li></ul><ul><li>&lt;DIV style=&amp;quot;position:absolute; top:300px; left:100px; width:200px; height:200px; background-color:red&amp;quot;&gt; A red 200-by-200-pixel box, 300 pixels from top and 100 from left edges of window.&lt;/DIV&gt; </li></ul><ul><li>See cssPositioning.htm </li></ul>
  • 9. Relative positioning <ul><li>Relative positioning places elements into flow of the document--offsetting them from previous element in the HTML code: </li></ul><ul><li>&lt;STYLE type=&amp;quot;text/css&amp;quot;&gt; &lt;!-- #offset { position:relative; top:50px; left: 25px } --&gt; &lt;/STYLE&gt; This text will flow normally across the page, while the next line of text will be offset from the end of this line. </li></ul><ul><li>&lt;SPAN id=&amp;quot;offset&amp;quot;&gt;This text is offset from the above line--50 pixels on top and 25 pixels on the left.&lt;/SPAN&gt; &lt;/BODY&gt; &lt;/HTML&gt; </li></ul>
  • 10. Z-layering of objects <ul><li>Layering lets object overlap each other </li></ul><ul><li>In addition to x- and y-coodinates, add z-index: </li></ul><ul><li>.over { position:absolute; top:500px; left:50px;      z-index: 2 ; background-color:green } </li></ul><ul><li>.under { position:absolute; top:510px; left:50px;      z-index: 1 ; background-color:blue } </li></ul><ul><li>&lt;SPAN class=&amp;quot;over&amp;quot;&gt;This text is positioned 20 pixels from the left and 165 pixels from the top of the window.&lt;/SPAN&gt; </li></ul><ul><li>&lt;SPAN class=&amp;quot;under&amp;quot;&gt;This text is positioned just below the above text, and would usually be placed on top because of its order on the page.&lt;/SPAN&gt; </li></ul>
  • 11. Analyzing a document <ul><li>&lt;HTML&gt; </li></ul><ul><li>&lt;HEAD&gt;&lt;TITLE&gt; Simple DOM Demo &lt;/TITLE&gt;&lt;/HEAD&gt; </li></ul><ul><li>&lt;BODY ID=&amp;quot;bodyNode&amp;quot;&gt;This is the document body </li></ul><ul><li>&lt;P ID = &amp;quot;p1Node&amp;quot;&gt;This is paragraph 1.&lt;/P&gt; </li></ul><ul><li>&lt;P ID = &amp;quot;p2Node&amp;quot;&gt;Paragraph 2&lt;/P&gt; </li></ul><ul><li>&lt;/BODY&gt; </li></ul><ul><li>&lt;/HTML&gt; </li></ul><ul><li>From the root &lt;BODY&gt; you can go to one of its four children </li></ul><ul><ul><li>Reach first child using bodyNode.firstChild or bodyNode.childNodes[0] </li></ul></ul><ul><ul><li>Access third (and last) child by bodyNode.childNodes[2] or bodyNode.lastChild </li></ul></ul><ul><ul><li>Or use &lt;P&gt; tags with a unique ID : p1Node.nextSibling accesses p2Node </li></ul></ul>
  • 12. Dynamic HTML <ul><li>Supports animations &amp; rollover effects </li></ul><ul><li>No plug-ins: it’s part of HTML 4.0 </li></ul><ul><ul><li>Different browsers provide different support for HTML 4.0 </li></ul></ul><ul><li>JavaScript programs dynamic behaviors </li></ul><ul><ul><li>JavaScript functions manipulate DOM objects </li></ul></ul><ul><ul><li>Dreamweaver provides high level interface generating JavaScript code for a few common dynamic behaviors </li></ul></ul>
  • 13. Rollover effect in DHTML <ul><li>Preview in comingDone.html </li></ul><ul><ul><li>Effect achieved by swapping images from files into memory </li></ul></ul><ul><li>In Dreamweaver, open coming.htm : </li></ul><ul><ul><li>choose Insert &gt; Image &amp; select redlite.gif </li></ul></ul><ul><ul><li>In Property Inspector , enter: “redlight” </li></ul></ul><ul><ul><li>Set Border to 0 (no border around image) </li></ul></ul><ul><ul><li>Select image, then windows &gt; Behaviors </li></ul></ul><ul><ul><li>Hold down + button and select the Swap image </li></ul></ul><ul><ul><li>Select grnlite.gif as swap image </li></ul></ul><ul><ul><li>Leave Preload Images and Restore Images onMouseOut on </li></ul></ul><ul><li>Why is pre-storing in array crucial to rollover effect? </li></ul><ul><li>Dreamweaver makes it even easier: Insert&gt;Image Objects&gt;Rollover Image </li></ul>
  • 14. Rollover effect in Javascript <ul><li>Look at source code view in DW </li></ul><ul><li>function MM_preloadImages() : </li></ul><ul><ul><li>sets local variable d to document : why? </li></ul></ul><ul><ul><li>creates new Array called d.MM_p </li></ul></ul><ul><ul><li>MM_preloadImages.arguments reads onLoad=&amp;quot;MM_preloadImages(&apos;grnlite.gif&apos;)&amp;quot; </li></ul></ul><ul><li>function MM_swapImage() : </li></ul><ul><ul><li>stores MM_swapImage.arguments </li></ul></ul><ul><ul><li>findObj locates the other image </li></ul></ul>
  • 15. More DHTML examples <ul><li>Jeff Lutz’s example (note animated butterfly) </li></ul><ul><ul><li>Dreamweaver generates timeline functions </li></ul></ul><ul><ul><li>Timeline interface similar to Flash </li></ul></ul><ul><ul><li>Drag-and-drop map puzzle </li></ul></ul>
  • 16. What is AJAX? See an example <ul><li>Asynchronous JAvaScript And XML </li></ul><ul><li>Developed by Adaptive Path </li></ul><ul><li>Combines several established technologies: </li></ul><ul><ul><ul><li>Standards based display </li></ul></ul></ul><ul><ul><ul><ul><li>CSS – Cascading style sheets </li></ul></ul></ul></ul><ul><ul><ul><ul><li>XHTML – Extensible Hyper Text Markup Language </li></ul></ul></ul></ul><ul><ul><ul><li>Dynamic display manipulation with DOM </li></ul></ul></ul><ul><ul><ul><li>Data interchange and manipulation with XML </li></ul></ul></ul><ul><ul><ul><li>Asynchronous data retrieval with XMLHttpRequest </li></ul></ul></ul><ul><ul><ul><li>JavaScript functions to bind everything together </li></ul></ul></ul>
  • 17. XMLHttpRequest <ul><li>Can transfer and manipulate XML data between a client and server </li></ul><ul><li>Originally an ActiveX object developed by Microsoft accessible by scripting languages, such as VBScript </li></ul><ul><li>Mozilla 1.0 included a compatible native version, XMLHttpRequest </li></ul>
  • 18. Classic Web Application Model <ul><li>Disadvantages? </li></ul><ul><ul><li>What is the user doing? </li></ul></ul><ul><ul><li>WAITING </li></ul></ul><ul><ul><li>Application does not allow user interaction while the information is being processed </li></ul></ul><ul><ul><li>While user interacting with the browser, the server is not processing information for that user </li></ul></ul>
  • 19. Classic Web Application Model (Synchronous)
  • 20. The AJAX Engine <ul><li>Intermediary layer between user and server </li></ul><ul><li>Instead of just loading a webpage, browser loads the AJAX Engine </li></ul><ul><ul><li>Written in JavaScript </li></ul></ul><ul><ul><li>Usually located in a hidden frame </li></ul></ul><ul><ul><li>Responsible for displaying the user interface and communicating with the server </li></ul></ul><ul><ul><li>Allows the user to interact asynchronously – independent of communication with the server </li></ul></ul><ul><ul><li>Communicates with the server, usually with XML </li></ul></ul>
  • 21. AJAX Web Application Model (Asynchronous)
  • 22. AJAX Web Application Model <ul><li>Advantages? </li></ul><ul><ul><li>Application is more responsive </li></ul></ul><ul><ul><ul><li>Any action that does not require the information from the server is handled by the engine </li></ul></ul></ul><ul><ul><li>User interaction and data processing can occur concurrently </li></ul></ul><ul><li>Disadvantages? </li></ul><ul><ul><li>Added technical complexity </li></ul></ul><ul><ul><li>Potential security issues </li></ul></ul>
  • 23. Is AJAX better than Flash? <ul><li>Yahoo Maps </li></ul><ul><ul><li>http:// maps.yahoo.com / </li></ul></ul><ul><li>Google Maps </li></ul><ul><ul><li>http://maps.google.com/ </li></ul></ul><ul><li>What do you think? </li></ul>
  • 24. AJAX advantages vs. Flash <ul><li>Searchablitity: text pages are more visible to search engines than Flash </li></ul><ul><li>Open source vs. Flash licensing </li></ul><ul><li>AJAX does not require plug-ins </li></ul><ul><ul><li>However, users must have JavaScript enabled </li></ul></ul><ul><li>Cost: Adobe has driven up cost of Flash development </li></ul><ul><li>Accessibility </li></ul><ul><ul><li>Font and color settings in AJAX default to those of the environment </li></ul></ul><ul><ul><li>Flash applications use developer specified settings which may be more difficult for disabled users </li></ul></ul><ul><ul><li>Screen readers or acceleration keys may not be available in Flash </li></ul></ul><ul><li>Security--Flash sites may not be as trusted as an HTML site </li></ul><ul><ul><li>Can be used to avoid pop-up blockers </li></ul></ul><ul><ul><li>Can be used to create immortal cookies </li></ul></ul>
  • 25. Flash pros vs. AJAX <ul><li>Media Handling? </li></ul><ul><ul><li>Better handling of sound and graphics </li></ul></ul><ul><li>Vector Graphics </li></ul><ul><ul><li>May take up less space than bitmaps and are easily scalable </li></ul></ul><ul><ul><li>While available in most web browsers, either native or as a plug-in, vector graphics are more commonly used in Flash </li></ul></ul><ul><li>Compatibility </li></ul><ul><ul><li>No discrepancy between browsers (just one distributor) </li></ul></ul><ul><li>Machine Access </li></ul><ul><ul><li>Flash apps have better access to resources of user’s computer </li></ul></ul>
  • 26. AJAX versus Flash <ul><li>So which is better? </li></ul><ul><ul><li>Both have certain strengths </li></ul></ul><ul><ul><li>Two solutions: </li></ul></ul><ul><ul><ul><li>Analyze needs and choose accordingly </li></ul></ul></ul><ul><ul><ul><li>Make Flash and AJAX can work together: </li></ul></ul></ul><ul><ul><ul><ul><li>http://weblogs.macromedia.com/mxna/reports/categoryFeedReport/ </li></ul></ul></ul></ul>
  • 27. How to Code <ul><li>“ By hand” </li></ul><ul><li>Use a framework </li></ul><ul><ul><li>prototype ( http:// www.prototypejs.org / ) </li></ul></ul><ul><ul><li>script.aculo.us (add-on to prototype.js, cross-browser user interface JS libraries </li></ul></ul>
  • 28. Wrap up <ul><li>Asynchronous JavaScript And XML </li></ul><ul><ul><li>Combines several existing technologies </li></ul></ul><ul><ul><li>Can create rich and dynamic web pages </li></ul></ul><ul><ul><li>Improves responsiveness of web based applications </li></ul></ul>
  • 29. AJAX References <ul><li>http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul><ul><li>http://tool-man.org/ </li></ul><ul><li>http://www.knownow.com/products/docs/whitepapers/KN-Beyond-AJAX.pdf </li></ul><ul><li>http://weblogs.macromedia.com/cantrell/archives/2006/01/flash_and_AJAX_1.cfm </li></ul><ul><li>http://radar.oreilly.com/archives/2005/05/flash_is_AJAX_o.html </li></ul><ul><li>http://www.designitsimple.de/wordpress/?p=23 </li></ul><ul><li>http://searchwebservices.techtarget.com/originalContent/0,289142,sid26_gci1150930,00.html </li></ul>

×