E-Business Technologies 1

Chapter 4

Web Site Development Tools

E-Business Technologies 2

Objectives

In this chapter, you will learn to:

• Consider the importance of planning when developing an e-business Web site

• Describe the markup languages used to create Web-based documents

• Identify Web development applications

• Describe the multimedia tools available for Web pages

• Discuss ways to add interactivity to Web pages

E-Business Technologies 3

Planning an EffectiveE-Business Site

Before creating a Web site for youre-business:

• Define Web site’s goals, objectives, and overall purpose

• Be aware of customers’ needs, such as site navigation, customer service, etc.

• Utilize state-of-art graphics, video, audio to keep visitors’ interest

Valued Gateway Client:

Valued Gateway Client:

E-Business Technologies 4

Markup Languages

• The basic technology used for displaying Web pages in a Web browser

• Markup languages define how Web applications display documents

• Languages used for processing data on the World Wide Web include:

– Standard Generalized Markup Language (SGML)

– Hypertext Markup Language (HTML)

– Dynamic Hypertext Markup Language (DHTML)

– Extensible Markup Language (XML)

E-Business Technologies 5

Standard GeneralizedMarkup Language (SGML)

• Specifies “descriptive markup” within a document to define document structure

• Portable

• Uses Document Type Definition files to define types

• Uses tags to define different elements of the document

• If you are familiar with early, basic word processing software you see similarities

E-Business Technologies 6

Hypertext MarkupLanguage (HTML)

• The most widely used markup language on the Web

• SGML-based • Tags tell your Web browser how to display the

page• Web browser uses tag to parse documents• HTML Tutorial (also accessible vie the Web-

accessible Resources link of the course Web page)

E-Business Technologies 7

HTML Parsing

• Web browser reads document and interprets tags, like painter interprets landscape

• The 'head' and the 'body' are passed separately• Web browser reads the HTML document from

top to bottom, picks out elements such as title or blocks of text

• The Web browser displays the elements appropriately in the Web browser window

E-Business Technologies 8

E-Business Technologies 9

HTML Tag Types

• Standalone tags– Define individual Web page elements or contain

information about the whole Web page<img src=“pic.gif”>

• Container tags– Surround and modify a Web page element– Used in pairs to mark the beginning and ending of Web

page elements<b>bold text</b>

• Some Web browsers are "forgiving" when they parse tags, they try to correct simple mistakes in tag construction

E-Business Technologies 10

Dynamic Hypertext Markup Language (DHTML)

• Adapts content “on the fly”• Changes the content to accommodate different

screen sizes (the screen size, type of browser, operating system, and other characteristics can be read from your computer so that the display is customized to your needs)

• Changes Web page objects based on viewer input• DHTML is used in advertising banners that

appear on Web pages

E-Business Technologies 11

DHTML Display Detection/Response

• Two examples of menu positioning using DHTML

• DHTML adjusts the size of menus, text, and other HTML objects to preserve perspective

• Top display uses 640 x 480 screen resolution

• Bottom display uses1024 x 768 screen resolution

E-Business Technologies 12

Extensible Markup Language (XML)

• XML tags are used to provide information about the content itself

• Tags are customizable, both sender and receiver of the XML document must agree on tag definitions

E-Business Technologies 13

Web Development Applications

• Present WYSIWYG (What You See Is What You Get) view of a Web page

• Include tools such as templates and wizards for creating Web pages

• Automatically generate the appropriate HTML tags as the Web author creates the Web page content

E-Business Technologies 14

Microsoft FrontPage

• Works well with Microsoft Internet Information Server (IIS)

• Includes wizards and templates to simplify Web page design

• Implements HTML code and features specific to Microsoft IIS that are not compatible with other Web servers and browsers - note that the pages still display but the additional features (such as blinking text) display in a static environment (i.e. the text does not blink)

E-Business Technologies 15

Microsoft Visual InterDev

• Microsoft’s high-end Web development application

• Incorporates Web site management tools with templates and wizards for Web page creation

E-Business Technologies 16

Macromedia HomeSite

• Displays either HTML or WYSIWYG • Includes some Web site administration

tools• Doesn’t contain the breadth of templates

and wizards that FrontPage includes• Requires better understanding of markup

languages• HomeSite home page

E-Business Technologies 17

Macromedia Dreamweaver

• Offers broader selection of templates and online wizards, it is very popular

• Online help and feature-rich environment provide simplified work environment for new Web authors

E-Business Technologies 18

Macromedia UltraDev

• Macromedia’s most full-featured Web development application

• Similar to Visual InterDev• Creates HTML code that is displayed properly by

major Web browsers

E-Business Technologies 19

Adobe GoLive

• Displays either HTML or WYSIWYG simultaneously

• Excellent learning tool for beginners• GoLive web page

E-Business Technologies 20

Multimedia Tools

• Add sophisticated multimedia features such as animated graphics, video clips, and sound to Web site

• Require enhancements to:– Web browsers, (plug-ins)

– Web servers to process media

– Graphics programs to create more professional looking and appealing graphics

E-Business Technologies 21

Web Browser Plug-ins

• Plug-in software adds special features to a Web browser, such as the ability to play sound and video files that are transmitted over the Internet

• Plug-in software is generally provided free to end-users

• E-businesses must purchase server software to deliver audio or video over the Internet

• Providers of streaming media applications included Apple Computer, Inc., Microsoft, and RealNetworks, Inc.

E-Business Technologies 22

Macromedia Flash and Flash Player

• Flash is used to create high-quality graphics and sound for delivery over low-speed (modem) connections

• Requires installation of the Macromedia Flash Player plug-in

E-Business Technologies 23

Streaming Media

• Refers to sound and video files that are transmitted continuously, similar to a television signal, across the Internet

• Plug-ins that play downloaded video files as well as streaming video and sound files include:

– Quicktime (Apple Computer, Inc.)

– Windows Media Player (Microsoft)

– RealOne (RealNetworks, Inc.)

• Each plug-in uses its own proprietary video format

E-Business Technologies 24

Compression Techniques

• Compression techniques are used to shrink sound or video clips for easy transmission across the Internet without degrading quality

• ISO Motion Picture Experts Group develops the standards for multimedia compression:– MPEG-1 provides a resolution of 352x240 at 30 fps with

24-bit color– MPEG-2 provides a resolution of 720x480 at 30 fps with

24-bit color– MPEG-3 combines MPEG-1 video with MP3 (MPEG

Layer-3) audio

E-Business Technologies 25

Adobe Acrobat and Acrobat Reader

• Creates/displays documents in portable document format (PDF)

• Enables portability of documents• Acrobat Reader offered as freeware by Adobe• Purchase of Adobe Acrobat required to

convert documents created by other applications

E-Business Technologies 26

Adobe PhotoshopGraphic Editor

• Create Web page designs using sophisticated graphics

• Provides tools for:

– Selecting image compression

– Positioning and alignment of Web page images

E-Business Technologies 27

Interactive Web Sites

• Involves customers in the online experience:

– Search for product or service information

– Select and custom-configure products

– Purchase products directly from the Web site

– Get online customer support

• Interactive Web sites become “sticky,” meaning that viewers spend more time at the site

E-Business Technologies 28

HTML Forms

• Similar to paper form• Used to collect data from Web page viewers• Forms may contain:

– Text entry boxes– Check boxes– Option buttons– Drop-down lists

• Collected data sent to Web server

E-Business Technologies 29

Server-Side Technologies

• Operate on the server side of a Web browser/Web server relationship

• Permit creation of customized Web pages for viewers

• Pages are generated by:– Using a Web page template to define the layout of

information– Populating the template with variable, or dynamic data

in response to the request received from the Web browser

E-Business Technologies 30

Database Driven Web Sites

• Use information stored in a database on a Web server to respond to requests received from a Web browser

• Databases organize data into records and tables containing related information

• Using search criteria received from the Web browser, server-side technologies retrieve, format, and send data to the Web browser

E-Business Technologies 31

Macromedia ColdFusion

• Use to retrieve and format information from database

• ColdFusion Studio is used to create Web templates that the Web server completes on the fly to create the Web pages

• ColdFusion Server runs on the Web server itself, formatting data and sending Web pages to users

E-Business Technologies 32

ColdFusion Markup Language

• Embeds tags used in templates for processing data before sending to Web browser

• Processed on the server by ColdFusion server

• Used to create forms for collecting data and writing database queries

E-Business Technologies 33

E-Business Technologies 34

Microsoft Active Server Pages (ASP)

• Similar to an HTML document• Contains small programs called scripts

that retrieve and process information before sending it to the Web browser

• The result is that the viewer sees only the results, not how the results were created

• ASP scripts are usually written in VBScript, which is similar to Visual Basic

E-Business Technologies 35

Personal Home Page (PHP) Tools

• Used to extract data out of a database and present it on the Web page

• Uses syntax from C, Java, and Perl - but is not any of these

• Embedded within HTML pages for server-side execution

• Widely used with the mySQL database • Available as public domain software - don't be

fooled, some very large commercial sites use mySQL and PERL

E-Business Technologies 36

Client-Side Technologies

• Operate on the client-side of a Web browser/Web server relationship

• Manipulate data received with Web pages• Usually downloaded as part of the Web page• Performs limited functions, such as:

– “listening” for data

– performing calculations, etc.

• Less secure that server-side technologies

E-Business Technologies 37

Client-Side Technologies

• Applets are small applications, such as a utility or limited-function program, and run from the Web browser

• A “sandbox” is a virtual environment used to run applets, providing security and portability

• Unfortunately, applets have been known to get outside of the sandbox

• JavaScript is used by the Web browser to add interactive functions to HTML pages

E-Business Technologies 38

Java and the Virtual Sandbox

• Java is an interpreted language• The source code of a Java program is compiled

into an intermediate language called bytecode which must be converted (interpreted) into machine code at runtime

• Java Virtual Machine (JVM) interprets bytecode into machine code and runs it

• Java programs are not dependent on any specific hardware and will run in any computer with the Java Virtual Machine software

E-Business Technologies 39

ActiveX

• Provides external Internet access, internal intranet services, and management of Internet-related technologies such as Web servers, Web browsers, and Internet-based e-mail

• Used to establish and manage external business Web sites to sell products and services, provide customer support, and gather information about potential customers and the marketspace

• Internet-based e-mail allows businesses to maintain contact with customers and suppliers