front_end

LevSelector.com

New York

home > Front End (Browser)

Will Code For Food Front End (Browser)
Look also at Javascript and Graphics pages.

On this page:

• HTML
• books
• more&moreHTML
• DHTML • CSS
• Layers
• DOM
• detect the browser • tools
• using templates
• XHTML

HTML Tutorials and references home - top of the page -

HTML (Hypertext Markup Language) is the set of markup symbols or codes intended to display a web page on the browser.

Browser Interface:
• developer.netscape.com/docs/manuals/htmlguid/index.htm - HTML Tag Reference (right-click to open in a new window)
• www.webhelp.com/ - searhable help for HTML
• www.htmlgoodies.com/home.html/ - tutorials
• w3.org/MarkUp/ (w3.org/TR/html4/) - HTML scpecifications (also www.w3.org/TR/REC-html40/cover.html#minitoc)
• www.webreview.com/style/css1/charts/mastergrid.shtml - browser compatibility

NETSCAPE: (often will not work in a frame - requires separate window. Use mouse right-click on the link to open a new window)
• developer.netscape.com/docs/index.html - many manuals from Netscape
• developer.netscape.com/docs/manuals/ - many manuals from Netscape
• developer.netscape.com JavaScript (on Netscape site)
• developer.netscape.com/docs/manuals/js/client/jsref/index.htm - main JavaScript reference
• developer.netscape.com/tech/javascript/resources.html - JavaScript resources

MICROSOFT:
• msdn.microsoft.com/workshop/default.asp - excellent references (HTML, JavaScript, etc.)
• msdn.microsoft.com/workshop/c-frame.htm#/workshop/author/default.asp - same thing, but only can viewed using Internet Explorer
• Microsoft Scripting Technologies -
• Site Builder Network Workshop -
• http://officeupdate.microsoft.com/2000/downloadDetails/Msohtmf2.htm - Office 2000 HTML Filter 2.0 (to create HTML files from Office 2000 !! Important when you want to "Save As html from MS Word, because Office 2000 creates xml files which are not readable by Netscape browser).

Books home - top of the page -

BOOKS:
• HTML 4 for the World Wide Web (Visual Quickstart Guide) by Elizabeth Castro 2000 (4rd ed.)
• Javascript for the World Wide Web (Visual Quickstart Guide) by Tom Negrino, Dori Smith, 1999 (3rd ed.)
• DHTML and CSS for the World Wide Web (Visual QuickStart Guide) by Jason Cranford Teague 2001 (2nd ed.)
• HTML & XHTML : The Definitive Guide by Chuck Musciano, Bill Kennedy 2000 (4rd ed.)
• JavaScript Bible by Danny Goodman et al, 1998
• Javascript : The Definitive Guide (Dave Flanagan) - One of the most popular books on Javascript. It's more of a reference than a tutorial, but Flanagan is an excellent technical writer.
     ( code examples from ftp://ftp.oreilly.com/pub/examples/nutshell/javascript/ )
• Dynamic Html : The Definitive Reference by Danny Goodman, 1998
     ( code examples from ftp://ftp.oreilly.com/pub/examples/nutshell/dynamic_html/ )
• JavaScript Application Cookbook by Jerry Bradenbaugh, 1999
     ( code examples from ftp://ftp.oreilly.com/examples/misc/jscook/ )
• Cascading Style Sheets: The Definitive Guide by Eric A. Meyer
• Web Design in a Nutshell : A Desktop Quick Reference by Jennifer Niederst, Richard Koman, 1998
• Webmaster in a Nutshell, 2nd Edition, 1999
• Designing with JavaScript By Nick Heinle, 1997
     (code examples - ftp://ftp.oreilly.com/examples/misc/designjs/ )

More HTML Tutorials and references home - top of the page -

• WebTutor
• HTML Tutorial
• Introduction To HTML: A very good intro guide to HTML
• Introduction to frames: Excellent guide to frames.
• D.J. Quad's Ultimate HTML tutorial: A very good tutorial on entry to advance level of html.
• HTML Goodies: Perhaps one of the most popular html sites in cyberspace.
• Developer Zone Advance HTML Guide: HTM Tag ReferenceL, Advanced HTML, Graphics & Presentation, JavaScript, XML, DHTML, Audio.
• Professional WebDesign: Perhaps one of the best written html tutorials on the net. Also includes downloadable file!
• Crash Course in HTML: A darn fast loading, concise intro guide to HTML. No fuss, no slow loading graphics, just a lot of useful stuff..
• BigNoseBird.com: The name may be funny, but the great html tutorials are no laughing matter.
• Wrox Web Developer:A great general web resource for webmasters of all stages.
• NSCA Beginner's guide to HTML: a very popular site with quite a lot of text, all pertaining to HTML. (Thank God.)
• The Bare Bone Guide To HTML: The uniqueness of this site is that it offers its HTML tutorials in 20 languages! (and the tutorial itself is not bad either)
• Webmastery HTML forum: Forums, from my experience, are one of the absolute best ways to get good answers when you're in a pit. This is a super duper HTML help forum, dedicated to learner like you and me! (Be warned though, it'll definitely take quite a while to load upon your first visit due to the large volume of messages.)
• GeoCities GeoHelp: A smaller, yet more organized forum for help ranging from HTML, JavaScript, to any miscellaneous questions regarding webpages. (Recommended.)
• Framing the Web: Webreference's professional guide to creating frames.
• An interactive Tutorial for Beginners: This is a html tutorial where people can actually try out typing html themselves!
• The Homepage Helper: A friendly html help center.
• Webmaster's Corner: A fine collection of links to web tutorials on the net
• FlamingoLingo: E-letter which focusses on HTML4
• Object Fusion: A well-rounded html learning center.

More HTML Tutorials and references home - top of the page -

OTHER:
• directory.google.com/Top/Computers/Programming/Internet/ - google directory
• www.irt.org/ - Internet Related Technologies (very good site)
• rummelplatz.uni-mannheim.de/~skoch/js/script.htm - JavaScript tutorial
• www.hudziak.com/haznet/ - more JavaScripts
• www.zdnet.com/devhead/resources/scriptlibrary/index.html - more JavaScripts
• www.javagoodies.com - Javascript, etc.
• www.w3-tech.com/crash/CrashCourse.html - crash courses in HTML, Java, JavaScript
• www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html - HTML for beginners

DHTML home - top of the page -

DHTML - Dynamic HTML
DHTML (Dynamic HTML) is a collective term. It includes:
   • DOM (Document Object Model) - an object-oriented view of a Web page and its elements.
   • Using styles (CSS - Cascading Style Sheets) and layers (<DIV> or <LAYER>)
   • Programming of the page elements (DOM objects) - JavaScript, Java applet, and ActiveX
DHTML can make page more Dynamic by changing its look or content after the page was completely interpreted by the browser. This can be in response to user activity (onmoseover, etc.) or automatically. Typical examples - roll-overs (changing SRC property of an image object), using layers to show and hide menus, etc.

• Google directory for DHTML
• http://www.htmlcenter.com/tutorials/tutorials.cfm/119 - good tutorials

Dan Steinman's tutorial and API (not updated after October 1999):
•www.dansteinman.com/dynduo/ - CrossBrowser DHTML Tutorial and API
• dansteinman.com
     • /dynduo/en/links.html - Dan's DHTML links
     • /dynapi/js/ - collection of javascripts,
     • ddart.pe.kr/dhtml/dynduo/ - mirror site
      Download the tutorial and API:
     • /downloads/dynduo/dynduo-19991024.zip - tutorial in HTML
        (local basics and DynLayer API as txt to copy into editor for printing)
     • /downloads/dynapi/dynapi-19991024.zip - APIs
     • /downloads/dynduo/pdf/dynduo-19991024.pdf - 123 page printable tutorial
See (and download) next generation API here (frequently updated):
• dynapi.sourceforge.net/index.php - DynAPI - library and tutorials

• DynamicDrive - very good examples and convenient to use

• www.brainjar.com - Javascript

Read more at the javascript page.

CSS home - top of the page -

CSS (Cascading Style Sheets) - is a way to define styles for all or some of document elements.

Cascade means that styles will be applied following object inheritance in the document.
- You can define styles for all pages in your web site in an external css file.
- You can override some of these styles in the header of the page
- you can override styles defined in the header by specifying the style in the body of the document ( for example in the tag of the element where it should be applied).

You can define styles for all tags of particular type:

<STYLE TYPE="text/css">
H1 {marginLeft:20px}
TD {FONT-FAMILY: arial, geneva, helvetica; FONT-SIZE: 9pt;}
</STYLE>

You can define style classes for different tags using ".":

<STYLE TYPE="text/css">
.myclass1 {
   font-family: arial,helvetica,sans-serif;
   font-size: 12px;
   font-weight: bold;
   text-decoration: none;
   line-height: 1.5em;
   color: #ffffff;
}

<P class="myclass1">

You can define styles for elements with particular ID using "#":

<STYLE TYPE="text/css">
#item1 {position:absolute; top:50px; left:100px}
</STYLE>
<DIV ID="item1"> something </DIV>

You can do some interesting things with links:

<STYLE TYPE="text/css">
body { color: #000000; font-family: "ms sans serif,geneva"; font-size: small }
A:link { COLOR: #000000; TEXT-DECORATION: none }
A:visited { COLOR: #000000; TEXT-DECORATION: none }
A:hover { COLOR: #FF0000; background: #FFA; TEXT-DECORATION: underline }
</STYLE>

You can even use downloadable fonts:

<STYLE TYPE="text/css">
@font-face {
font-family: familname;
font-style:normal;
font-weight:normal;
src:url("someFont.eot")
}
</STYLE>

How to use styles defined in an external file:

<head>
<link REL="stylesheet" TYPE="text/css" HREF="bvt.css" >
</head>

Here is an example of simple style sheet philg.css used by Phil Greenspun in his book:

P { margin-top: 0pt; text-indent : 0.2in }
P.stb { margin-top: 12pt }
P.mtb { margin-top: 24pt; text-indent : 0in}
P.ltb { margin-top: 36pt; text-indent : 0in}
p.marginnote { background-color: #E0E0E0 }
p.bodynote { background-color: #E0E0E0 }
p.paperonly { background-color: #E0E0E0 }
li.separate { margin-top: 12pt }

Here is style from www.msn.com:

<style>

</style>

Here the details:

• www.w3.org/TR/REC-CSS1.html - CSS documentation
• www.teaink.com/netscapehover.htm - how to make HOVER links in Netscape (using Javascript)
( local copy of description is here )
• www.projectcool.com/developer - ProjectCool Developer Zone
• www.webcoder.com -
• www.useit.com/alertbox/9707a.html - Jakob Nielsen "Effective Use of Style Sheets" (1997)

Layers home - top of the page -

We can create layer using a content block with a <DIV> tag.
For example:

<DIV ID="mailblock"
STYLE="position:absolute; width:auto; height:auto; left:400px; top:50px; background-color:white">
<A HREF="http://www.yahoo.com">yahoo</A><BR>
<IMG SRC="some_graph.gif" width=30 height=15>
</DIV>

In Netscape's DOM, each <DIV> block takes the form of a Layer Object (<LAYER>).
In Microsoft, each <DIV> block is exposed as a DIV object,which in turn possesses a STYLE object.

Here how to work with layers from 2 browsers:

Netscape: Microsoft:

document.layers["mylayer"]
or
document.mylayer document.all["mylayer"]
or
document.all("mylayer")
or
document.all.mylayer

document.layers["mylayer"].bgColor="green"; document.all["mylayer"].style.backgroundColor="green";

document.layers["mylayer"].left=0; document.all["mylayer"].style.left="0px";
OR
document.all["mylayer"].style.pixelLeft=0;

document.mylayer.document.write("some_text");
document.mylayer.document.close(); document.all("mylayer").innerHTML="some_text";

CSS Property Netscape Layer Object Property Microsoft currentStyle Object Property

position none position
Note: read-only, cannot modify via script

width none pixelWidth

height none pixelHeight

left left
Note: Accepts either an integer (assumed pixel units) or a percentage string.
Examples: left=10 or left="20%" left or pixelLeft
Note: pixelLeft accepts a string which specifies measurement units; e.g. pixelLeft="10px"whereas left accepts an integer and assumes pixel units; e.g. left=10.

top top
Note: Accepts either an integer (assumed pixel units) or a percentage string.
Examples: top=10 or top="20%" top or pixelTop
Note: pixelTop accepts a string which specifies measurement units; e.g. pixelTop="10px" whereas top accepts an integer and assumes pixel units; e.g. top=10.

clip clip.top
clip.left
clip.right
clip.bottom
clip.width
clip.height
Each dimension of the clipping coordinates is its own property, as seen here. Changing any property immediately causes the on-screen clip to change. "rect(top right bottom left)"
To change the clip in MSIE you must redefine all clipping coordinates. The syntax can be a bit confusing.
Example:
document.all.blockname.style.clip
="rect(0 25 25 0)"< /FONT>

visibility visibility
May contain any of "inherit", "show", or "hide" visibility
May contain any of "inherit", "visible", or "hidden"

z-index zIndex
Any non-negative integer. zIndex
MSIE allows negative integers, but you may as well stick with positive for the sake of Netscape.

background
color bgColor
Accepts string containing pre-defined color name or hex RGB triplet.
Examples:
document.layers["blockname"].bgColor
="black"
document.layers["blockname"].bgColor
="#000000"< /FONT> backgroundColor
Accepts string containing pre-defined color name or hex RGB triplet.
Examples:
document.all.blockname.style.backgroundColor
="black"
document.all.blockname.style.backgroundColor
="#000000"< /FONT>

background
image background.src
Example:
document.layers["blockname"].background.src
="images/tile.jpg"< /FONT> backgroundImage
Example:
document.all.blockname.backgroundImage
="images/tile.jpg"< /FONT>

Don't take this table too seriously, though. In real life some things don't work or syntax should be different. Also there are usually several ways to express similar things. For example, in the table above you can see "bgColor" and "backgroundColor". But if you define background using style, then you should use "background-color" and "layer-background-color" attributes, for example:

<DIV ID="blockDiv"
       STYLE="position:absolute;
                  left:50px;    top:100px;
                  width:30px; height:30px;
                  clip:rect(0px 30px 30px 0px);
                  background-color:red;
                  layer-background-color:red;">
</DIV>

The best approach is to copy working examples. Many ready-to-use solutions are collected on those 4 sites:

• DynamicDrive - very good examples and convenient to use
• dansteinman.com• ( /dynduo/ - CrossBrowser DHTML, /dynapi/js/ - collection of javascripts )
• dynapi.sourceforge.net/index.php - DynAPI - library and tutorials
• www.brainjar.com - Javascript

Example of Netscape-specific code using <LAYER> tag:
<layer id="mylayer" width=100px height=70px bgColor="yellow"><h3>A layer</h3></layer>
document.mylayer.bgColor="blue"
document.mylayer.document.write("some_text");
document.mylayer.document.close();

Below is an example of cross-browser code:
Note, how we treat layer differently in different browsers.

Example 1

<html>
<head>
<STYLE TYPE="text/css">
BODY {OVERFLOW:scroll;OVERFLOW-X:hidden}
.DEK {POSITION:absolute;VISIBILITY:hidden;Z-INDEX:200;}
</STYLE>
</head>
<body>
<DIV ID="dek" CLASS="dek"></DIV>
<SCRIPT>
/*---------------------------------------------------*/
Xoffset=-10; Yoffset= 20;   // modify these values
var nav; if (navigator.appName=="Netscape") nav=true;
var skn=(nav)? document.dek : dek.style;
if (nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=get_mouse;
/*---------------------------------------------------*/
function popup(msg,bak) {
var content="<table width=150 border=1 bordercolor=black " +
"cellpadding=2 cellspacing=0 bgcolor=" +bak+">" +
"<td><font color=black size=2>"+msg+"</font></td>"+
"</table>";
if(nav){
    skn.document.write(content);
    skn.document.close();
}
else {
    document.all("dek").innerHTML=content;
}
skn.visibility="visible"
}
/*---------------------------------------------------*/
function get_mouse(e){
var x=(nav)? e.pageX : event.x+document.body.scrollLeft;
var y=(nav)? e.pageY : event.y+document.body.scrollTop;
skn.left=x+Xoffset;
skn.top=y+Yoffset;
}
/*---------------------------------------------------*/
function kill(){
    skn.visibility="hidden";
}
/*---------------------------------------------------*/
</SCRIPT>

<a href="http://www.yahoo.com"
    ONMOUSEOVER="popup('co-o-o co-co','lightgreen')"
    ONMOUSEOUT="kill()">Yahoo</a>
<br>
<a href="http://webmonkey.com"
    ONMOUSEOVER="popup('text1<br>text2<br>text3','lightyellow')"
    ONMOUSEOUT="kill()">WebMonkey</a>
</body>
</html>

Below are links to 3 examples (the one above and 2 more):
• Example1 - comments on mouseover
• Example2 - variation of 1st example which I use while debuging complicated menus
• Example3 - simple example of moving a layer (small red square)

NOTE: be careful using layers inside layers in Netscape. Netscape browser doesn't support this correctly and gives strange errors.

DOM and browser differences home - top of the page -

Browsers have different Object model - and many other differences.

Netscape: document.elementName.styleProperty document.elementName.left=120;

Internet Explorer document.all.elementName.style.styleProperty document.all.elementName.style.right=120;

When designing Front End, remember to check
- on different browsers (IE, Netscape, AOL)
- on different platforms (IBM PC, Macintosh, Unix) :
• hotwired.lycos.com/webmonkey/reference/browser_chart/

The following table shows some differences between DHTML in Netscape and Microsoft browsers:

Netscape Communicator Microsoft Internet Explorer

Document
Object
Model - Many HTML objects scriptable
- Event capturing
- Some elements modifiable after page load
- Page text not modifiable (only replaceable) after page load - All HTML objects scriptable
- Event bubbling
- All elements and style modifiable after page load
- Text fully modifiable after page load

Absolute
Positioning - CSS Positionning
- Layers - CSS Positionning

Dynamic
Fonts - TrueDoc - Open type

Multimedia Plug-ins: LiveAudio, LiveVideo, etc. Controls: Transitions, Filters, and Animations

Data Binding - - TDC (Tabular Data Control)
- RDS (Remote Data Services)

Detect the browser home - top of the page -

Detect the browser from Javascript:

A simple way:

var nav; if (navigator.appName=="Netscape") nav=true;
// now use it:
var skn=(nav)? document.dek : dek.style;

Another simple example:

ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
// now use it
if (ns4) { .. }
if (ie4) { .. }

More sophisticated method (www.dansteinman.com):

function BrowserCheck() {
var b = navigator.appName
if (b=="Netscape") this.b = "ns"
else if (b=="Microsoft Internet Explorer") this.b = "ie"
else this.b = b
this.v = parseInt(navigator.appVersion)
this.ns = (this.b=="ns" && this.v>=4)
this.ns4 = (this.b=="ns" && this.v==4)
this.ns5 = (this.b=="ns" && this.v==5)
this.ie = (this.b=="ie" && this.v>=4)
this.ie4 = (navigator.userAgent.indexOf('MSIE 4')>0)
this.ie5 = (navigator.userAgent.indexOf('MSIE 5')>0)
if (this.ie5) this.v = 5
this.min = (this.ns||this.ie)
}
// automatically create the "is" object
is = new BrowserCheck()
// not you can use it
if (is.ns) {..}

Tools home - top of the page -

Designing Front End you can use either WYSIWYG editor (Netscape Communicator, Dreamweaver, MS FrontPage) or a simple text editor with HTML highlighting (NoteTab, Ultraedit). There are many tools available - check them out from www.tucows.com.

You will also need Adobe Photoshop to work with images (GIFs, JPGs, PNGs).

For debugging Javascript you may use a javascript console (built into Netscape Composer), or Interdev.

You can use other specialized tools to add java applets, Flash (dynamic vector graphivcs), music, etc.

See more at my software tools page.

Using Templates home - top of the page -

What to do:
- to insert HTML in the server-side script (print HTML from a CGI script or a servlet) ?
- to embed server-side scripts into HTML pages ?
(• ASP (active server pages),• JSP (java server pages ),• PHP (PHP: Hypertext Preprocessor, www.php.net),• etc.)

If you don't want to debug your scripts every time when designer changes HTML - you want

to separate HTML (presentation) and business logic (server-side scripts).

You may consider using HTML-Template module for Perl-CGI scripts. It is a free download from CPAN. Together with Apache mod_perl and caching facilites, this module provides extremely fast operation, as well as fast and robust development.

For Java Servlets there is a similar tool tool helping to keep graphic design separate from application logic:
• freemarker.sourceforge.net/ (see more at my java page: java.html#jsp).

On the other side you can use servlets for bus.logic and JSP for output formatting:
JSP
• http://www.javaworld.com/javaworld/jw-12-1999/jw-12-ssj-jspmvc_p.html - Understanding JavaServer Pages Model 2 architecture. Very good article.
• http://www.servlets.com/soapbox/problems-jsp.html - "The Problems with JSP" (by Jason Hunter).
• http://www.servlets.com/soapbox/problems-jsp-reaction.html - follow-up on "The Problems with JSP"

XHTML home - top of the page -

XHTML: XHTML is a recasting of HTML 4.01 into XML.
XHTML document is a well-formed XML document, all elements and attributes are in lower case, attribute values must be quoted, elements require end tags (or termination for empty tags: <hr width="75%" />).
• 1-page explanation
(and its original - www.webreference.com/xml/column6/)
• builder.cnet.com/Authoring/Xhtml/ss01.html
• www.w3.org/TR/xhtml1/

Netscape:	Microsoft:
document.layers["mylayer"] or document.mylayer	document.all["mylayer"] or document.all("mylayer") or document.all.mylayer
document.layers["mylayer"].bgColor="green";	document.all["mylayer"].style.backgroundColor="green";
document.layers["mylayer"].left=0;	document.all["mylayer"].style.left="0px"; OR document.all["mylayer"].style.pixelLeft=0;
document.mylayer.document.write("some_text"); document.mylayer.document.close();	document.all("mylayer").innerHTML="some_text";

CSS Property	Netscape Layer Object Property	Microsoft currentStyle Object Property
position	none	*position* Note: read-only, cannot modify via script
width	none	*pixelWidth*
height	none	*pixelHeight*
left	*left* Note: Accepts either an integer (assumed pixel units) or a percentage string. Examples: left=10 or left="20%"	*left* or *pixelLeft* Note: pixelLeft accepts a string which specifies measurement units; e.g. pixelLeft="10px"whereas left accepts an integer and assumes pixel units; e.g. left=10.
top	*top* Note: Accepts either an integer (assumed pixel units) or a percentage string. Examples: top=10 or top="20%"	*top* or pixelTop Note: pixelTop accepts a string which specifies measurement units; e.g. pixelTop="10px" whereas top accepts an integer and assumes pixel units; e.g. top=10.
clip	*clip.top* *clip.left* *clip.right* *clip.bottom* *clip.width* *clip.height* Each dimension of the clipping coordinates is its own property, as seen here. Changing any property immediately causes the on-screen clip to change.	*"rect(top right bottom left)"* To change the clip in MSIE you must redefine all clipping coordinates. The syntax can be a bit confusing. Example: document.all.blockname.style.clip ="rect(0 25 25 0)"< /FONT>
visibility	*visibility* May contain any of "inherit", "show", or "hide"	*visibility* May contain any of "inherit", "visible", or "hidden"
z-index	*zIndex* Any non-negative integer.	*zIndex* MSIE allows negative integers, but you may as well stick with positive for the sake of Netscape.
background color	*bgColor* Accepts string containing pre-defined color name or hex RGB triplet. Examples: document.layers["blockname"].bgColor ="black" document.layers["blockname"].bgColor ="#000000"< /FONT>	*backgroundColor* Accepts string containing pre-defined color name or hex RGB triplet. Examples: document.all.blockname.style.backgroundColor ="black" document.all.blockname.style.backgroundColor ="#000000"< /FONT>
background image	*background.src* Example: document.layers["blockname"].background.src ="images/tile.jpg"< /FONT>	*backgroundImage* Example: document.all.blockname.backgroundImage ="images/tile.jpg"< /FONT>

Netscape:	document.elementName.styleProperty	document.elementName.left=120;
Internet Explorer	document.all.elementName.style.styleProperty	document.all.elementName.style.right=120;

	Netscape Communicator	Microsoft Internet Explorer
Document Object Model	- Many HTML objects scriptable - Event capturing - Some elements modifiable after page load - Page text not modifiable (only replaceable) after page load	- All HTML objects scriptable - Event bubbling - All elements and style modifiable after page load - Text fully modifiable after page load
Absolute Positioning	- CSS Positionning - Layers	- CSS Positionning
Dynamic Fonts	- TrueDoc	- Open type
Multimedia	Plug-ins: LiveAudio, LiveVideo, etc.	Controls: Transitions, Filters, and Animations
Data Binding	-	- TDC (Tabular Data Control) - RDS (Remote Data Services)