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:
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.
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:
FONT { color : blue; }
Every HTML tag that fit a sector’s specifications gets
its declarations: Cookie Monster
FONT is known as the sector and color : blue
{within braces} is a declaration
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:
H3.BIGBIRD { color : yellow; } /* CLASS */
Big Bird
See cssFormatting.htm
Declaring a font-family
A font-family declaration specifies a specific font you
want to use in your site:
.COOKIEM {
font-family:"Sesame Street", "Kidprint", sans-serif;
/* Try these fonts, in order */
font-size: 24pt;
font-weight: bold;
text-transform: uppercase;
}
Cookie Monster
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:
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?
.COOLBACK {
background-color: blue;
background-image: url(greenbox.jpg);
font-size: 14pt;
font-weight: bold;
}
Look at how cool this text is!
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 text at absolute coordinates (pixels
from top left corner) and size (width and height)
Inline styles, ,
Of course, you probably don't want all your
elements to appear in the same spot
Instead, this code positions only the contents of
a particular element:
A red 200-by-200-pixel box, 300 pixels from top
and 100 from left edges of window.
See cssPositioning.htm
Relative positioning
Relative positioning places elements into flow
of the document--offsetting them from
previous element in the HTML code:
This text will flow normally across the page, while the next line
of text will be offset from the end of this line.
This text is offset from the above line--50
pixels on top and 25 pixels on the left.
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 }
This text is positioned 20 pixels
from the left and 165 pixels from the top of the
window.
This text is positioned just below
the above text, and would usually be placed on top
because of its order on the page.
Analyzing a document
Simple DOM Demo
This is the document body
This is paragraph 1.
Paragraph 2
From the root 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 tags with a unique ID: p1Node.nextSibling accesses
p2Node
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
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
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
More DHTML examples
Jeff Lutz’s example (note animated butterfly)
Dreamweaver generates timeline functions
Timeline interface similar to Flash
Drag-and-drop map puzzle
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
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
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
Classic Web Application Model
(Synchronous)
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
AJAX Web Application Model
(Asynchronous)
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
Is AJAX better than Flash?
Yahoo Maps
http://maps.yahoo.com/
Google Maps
http://maps.google.com/
What do you think?
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
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
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/categor
yFeedReport/
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
Wrap up
Asynchronous JavaScript And XML
Combines several existing technologies
Can create rich and dynamic web pages
Improves responsiveness of web based
applications
AJAX References
http://www.adaptivepath.com/publications/essays/ar
chives/000385.php
http://tool-man.org/
http://www.knownow.com/products/docs/whitepaper
s/KN-Beyond-AJAX.pdf
http://weblogs.macromedia.com/cantrell/archives/20
06/01/flash_and_AJAX_1.cfm
http://radar.oreilly.com/archives/2005/05/flash_is_AJ
AX_o.html
http://www.designitsimple.de/wordpress/?p=23
http://searchwebservices.techtarget.com/originalCont
ent/0,289142,sid26_gci1150930,00.html