Dynamic Web Pages

Jin WuINF 385E Information Architecture

School of Information11/2/2006

OverviewOverview

• Background• Java Script (definition, usage,

application, pros & cons)• Flash (definition, usage,

application, pros & cons)• Conclusion• Resources & References• Questions

• Background• Java Script (definition, usage,

application, pros & cons)• Flash (definition, usage,

application, pros & cons)• Conclusion• Resources & References• Questions

BackgroundBackground

• Definition (custom content based)• Invented and patented in 1994• Client-side dynamic content (user’s

computer)• Server-side dynamic content

(server)

• Definition (custom content based)• Invented and patented in 1994• Client-side dynamic content (user’s

computer)• Server-side dynamic content

(server)

JavaScript

BackgroundBackground

• Developed by Brendan Eich of Netscape Corporation in 1995

• Java and JavaScript• Created for non-programmer• Simple to comprehend, easy to use

for non-programmer

• Developed by Brendan Eich of Netscape Corporation in 1995

• Java and JavaScript• Created for non-programmer• Simple to comprehend, easy to use

for non-programmer

What is JavaScript?What is JavaScript?

• Scripting language• Consists of executable computer

code• Embedded directly into HTML code• Adds interactivity to HTML pages• Everyone can use

• Scripting language• Consists of executable computer

code• Embedded directly into HTML code• Adds interactivity to HTML pages• Everyone can use

JavaScript UsageJavaScript Usage

• Gives designers a programming tool• Puts dynamic text into an HTML

page• Reacts to events• Reads and writes HTML elements• Validates data• Detects the visitor’s browser• Creates cookies

• Gives designers a programming tool• Puts dynamic text into an HTML

page• Reacts to events• Reads and writes HTML elements• Validates data• Detects the visitor’s browser• Creates cookies

JavaScript ApplicationJavaScript Application

• JavaScript Alert• JavaScript MouseOver Effect• JavaScript Cookie• JavaScript Pull Down Menu• JavaScript Automatic Pop-up window• … …

• JavaScript Alert• JavaScript MouseOver Effect• JavaScript Cookie• JavaScript Pull Down Menu• JavaScript Automatic Pop-up window• … …

Sample ScriptSample Script

ProsPros

• Speed• Simplicity• Versatility• Server load

• Speed• Simplicity• Versatility• Server load

Cons

•Security•Reliance on end user.

Flash

BackgroundBackground

• Created by Macromedia in 1996, current Flash Version 8.0

• Combines text, pictures, audio and video

• .swf and .fla format• Software: Adobe Flash, Swift 3D,

Koolmoves, Flash Optimizer …

• Created by Macromedia in 1996, current Flash Version 8.0

• Combines text, pictures, audio and video

• .swf and .fla format• Software: Adobe Flash, Swift 3D,

Koolmoves, Flash Optimizer …

What is Flash?What is Flash?

• Multimedia graphic program• Create interactive animation on

the Web• Use vector graphics• Easy to learn

• Multimedia graphic program• Create interactive animation on

the Web• Use vector graphics• Easy to learn

Flash ApplicationFlash Application

• Flash Website• Flash Navigation• Photo Gallery• Flash Game• Flash Advertisement• … …

• Flash Website• Flash Navigation• Photo Gallery• Flash Game• Flash Advertisement• … …

Embedded with HTMEmbedded with HTM

ProsPros

• Catchy• Widely used.• Supports audio, animation and

advanced interactivity• Integrates well with other Web

technologies• No programming skill required

• Catchy• Widely used.• Supports audio, animation and

advanced interactivity• Integrates well with other Web

technologies• No programming skill required

ConsCons

• Increases file size• Usability Constrains• Search engine constrains• Encourages design abuse• Distracts from a site’s core values

• Increases file size• Usability Constrains• Search engine constrains• Encourages design abuse• Distracts from a site’s core values

ConclusionConclusion

• Content is important• Make the website usable and

useful• Not the be-all end-all of the

internet• Just because you can do it, doesn’t

mean you should do it.

• Content is important• Make the website usable and

useful• Not the be-all end-all of the

internet• Just because you can do it, doesn’t

mean you should do it.

ResourcesResources• JavaScript Tutorialhttp://www.w3schools.com/js/default.asphttp://www.webteacher.com/javascript/• JavaScript Examplehttp://www.bodo.com/javacool.htm• Flash Tutorialhttp://www.w3schools.com/flash/default.asphttp://www.echoecho.com/flash.htm• Flash Examplehttp://www.bestflashanimationsite.com/

• JavaScript Tutorialhttp://www.w3schools.com/js/default.asphttp://www.webteacher.com/javascript/• JavaScript Examplehttp://www.bodo.com/javacool.htm• Flash Tutorialhttp://www.w3schools.com/flash/default.asphttp://www.echoecho.com/flash.htm• Flash Examplehttp://www.bestflashanimationsite.com/

ReferencesReferences• http://www.answers.com/topic/dynamic-web-page• http://en.wikipedia.org/wiki/Java_script• http://en.wikipedia.org/wiki/Adobe_Flash• http://www.w3schools.com/js/default.asp• http://www.w3schools.com/flash/default.asp• http://www.bodo.com/j3.htm• http://www.bodo.com/j5.htm• http://www.bodo.com/j15a.htm• http://www.bodo.com/j18.htm• http://www.bodo.com/j20.htm

• http://www.answers.com/topic/dynamic-web-page• http://en.wikipedia.org/wiki/Java_script• http://en.wikipedia.org/wiki/Adobe_Flash• http://www.w3schools.com/js/default.asp• http://www.w3schools.com/flash/default.asp• http://www.bodo.com/j3.htm• http://www.bodo.com/j5.htm• http://www.bodo.com/j15a.htm• http://www.bodo.com/j18.htm• http://www.bodo.com/j20.htm

• http://www.evolve-capital.com/• http://www.750mph.com/main.php• http://www.artcoup.com/movie.html• http://www.novelgames.com/flashgames/game.php?

id=22• http://www.target.com/gp/homepage.html• http://www.mediacollege.com/internet/javascript/pros-c

ons.html• http://www.webpronews.com/webdevelopment/sitedesig

n/wpn-26-20040219FlashWebDesignProsandCons.html• http://

www.hyperwrite.com/aspscripts/framer.asp?target=features/flashproscons.htm

• http://www.evolve-capital.com/• http://www.750mph.com/main.php• http://www.artcoup.com/movie.html• http://www.novelgames.com/flashgames/game.php?

id=22• http://www.target.com/gp/homepage.html• http://www.mediacollege.com/internet/javascript/pros-c

ons.html• http://www.webpronews.com/webdevelopment/sitedesig

n/wpn-26-20040219FlashWebDesignProsandCons.html• http://

www.hyperwrite.com/aspscripts/framer.asp?target=features/flashproscons.htm

Questions?

Thank you!