Web Site Development Tools

1
Chapter 4

• Web Site Development Tools

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

3
Planning an EffectiveE-Business Site
Valued Gateway Client

• Before creating a Web site for youre-business
• Define Web sites 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

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)

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

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)

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

8
(No Transcript)
9
HTML Tag Types

• Standalone tags
• Define individual Web page elements or contain
  information about the whole Web page ltimg
  srcpic.gifgt
• Container tags
• Surround and modify a Web page element
• Used in pairs to mark the beginning and ending of
  Web page elements ltbgtbold textlt/bgt
• Some Web browsers are "forgiving" when they parse
  tags, they try to correct simple mistakes in tag
  construction

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

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

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

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

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)

15
Microsoft Visual InterDev

• Microsofts high-end Web development application
• Incorporates Web site management tools with
  templates and wizards for Web page creation

16
Macromedia HomeSite

• Displays either HTML or WYSIWYG
• Includes some Web site administration tools
• Doesnt contain the breadth of templates and
  wizards that FrontPage includes
• Requires better understanding of markup languages
• HomeSite home page

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

18
Macromedia UltraDev

• Macromedias most full-featured Web development
  application
• Similar to Visual InterDev
• Creates HTML code that is displayed properly by
  major Web browsers

19
Adobe GoLive

• Displays either HTML or WYSIWYG simultaneously
• Excellent learning tool for beginners
• GoLive web page

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

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.

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

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

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

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

26
Adobe PhotoshopGraphic Editor

• Create Web page designs using sophisticated
  graphics
• Provides tools for
• Selecting image compression
• Positioning and alignment of Web page images

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

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

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

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

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

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

33
(No Transcript)
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

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

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

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

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

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