Working with XHTML

1
Working with XHTML

• cis311

2
SGML

• SGML (Standard Generalized Markup Language)
• used with almost any type of document stored in
  almost any format
• Device and system independent
• Introduced in the 1980s (used in government)
• Metalanguage used to created other languages
• Costly, complex
• HTML
• Specialized application of SGML for specific
  types of docs
• standards get confusing among browsers
• can be applied inconsistently

3
XML

• XML (Extensible Markup Language)
• a minor version of SGML
• used to design markup languages for different
  types of structured documents
• XML documents must be evaluated with an XML
  parser.
• An XML document with correct syntax is a
  well-formed document.
• A well-formed document with correct content and
  structure is a valid document.
• DTD specifies correct content and structure.

4
Introducing XHTML

• XHTML is a reformulation of HTML, written in XML.

Versions of XHTML
5
Creating a Well-Formed Document

• Rules for well-formed XHTML documents

6
Creating a Well-Formed Document

• XHTML documents must also include a single root
  element that contains all other elements.
• For XHTML, that root element is the html element.
• Attribute minimization is when some attributes
  lack attribute values.
• XHTML doesnt allow attribute minimization.

7
Attribute minimization in HTML and XHTML
8
Creating a Valid Document

• The DTD used depends on the content of the
  document and the needs of your users.
• To support old browsers, use the transitional
  DTD.
• To support old browsers in a framed Web site, use
  the frameset DTD.
• To support more current browsers and want to weed
  out any use of deprecated features, use the
  strict DTD.

9
Creating an XHTML Document

• The first line of an XTHML document should
  contain a declaration indicating that the
  document adheres to the rules and syntax of XML.
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /transitional.dtd"gt
• XML (and thus XHTML) documents are based on a
  character set.
• A character set is a set of abstract symbols
  matched to code numbers (e.g., A 65 in
  ASCII char. set)
• ltmeta http-equiv"Content-Type"
  content"text/html charsetiso-8859-1" /gt

10
Testing an XHTML Document

• To test your document, you need to send the file
  to an XML parser or an XHTML validator.
• Sometimes the same mistake results in several
  errors are noted in the report.
• - fixing one mistake can solve several errors.

11
Report showing a successful validation under
XHTML 1.0 transitional
12
Multimedia Objects on the Web

• cis311

13
Special Demands of Multimedia

• Color - what kind? How much?
• Resolution - 72 dpi maximum you see
• Size --
• Effects of compression on images sounds
• What does viewer do while they load?
• Are multimedia objects consistent with purpose of
  site?
• Are they distracting? Animated gifs?
• Standards Compatibility with browsers?

14
Potential New Uses for Multimedia

• Desktop videoconferencing
• Multimedia databases
• Travel agencies
• Real Estate collections of houses
• Multimedia documentation
• Factory floor how-to demos
• Maintenance information
• Interactive training materials

15
Why Use Multimedia on web?

• Fast to create alter
• Cheaper than alternatives
• Easier to set up interactive sites
• Makes concepts easier to understand
• More fun for viewer
• Impresses others

16
Multimedia Objects for Web

• Photos
• Audio
• Graphics, including Text
• Animation
• Video
• Clickable Maps
• Any others?

17
External Media

• the sound or video file is accessed through a
  hypertext link.
• users have a choice as to whether to retrieve the
  multimedia clip.
• useful in low-bandwidth connections
• Improves usability of site if user is warned of
  sizes of multimedia files before opening them

18
Inline and Embedded Media

• Inline media clips are placed into the Web page
  itself as embedded objects.
• Disadvantage the user is forced to wait for the
  clip to be retrieved by the browser
• intended for users with access to the Web page
  using a high-speed connection
• An embedded media clip works like an inline image
  and can be played within the Web page itself.
• Uses embed tags

19
Web only Displays 72 dpi

• In Photoshop, ImagegtImage Size
• Lets you set dpi 72
• Rescale image to physical dimensions
• Smaller dimensions ? less memory
• Insert Image in XHTML
• ltimg src"book.gif" height30 width36 altbook
  /gt

20
Streaming Audio and Video

• popular format
• streaming media file plays as it downloads
• User doesnt have to wait before viewing the
  media clip
• different streaming audio and video formats.
• Audio
• NetShow, Stream Works, and RealAudio
• Video and/or Audio
• RealG2 Streaming, QuickTime Streaming, Windows
  Media Streaming

21
Embedding Sound Files

• Sound Files are downloaded played
• lta href"frankly.au"gtinsert audio lt/Agt
• lta href"ilikeit.wav"gtinsert .wav fileslt/Agt
• Insert background music
• ltbgsound srcfrankly.wavgt
• To keep playing, can set loops
• ltbgsound src frankly.wav loop5gt

22
Sound File formats

• ?-law - Unix -older format .au
• AIFF - Audio Interchange File Format
  Apple .aif
• WMF Windows Media Format .wmf
• WAV - Microsoft IBM .wav
• MPEG - high quality requires browser plugin
  .mpg
• MPEG3 very popular .mp3
• MIDIMusical Instrument Digital Interface -
  requires
• midi pluginmusic algorithm is saved replayed
  on synthesizer in the client computer .mid
• RealAudio - streaming audio - requires plugin
  .rm
• See Prof Grasniks Web Site on Sound
• http//www.csupomona.edu/dmgrasmick/computer
  /index.html

23
MP3 Format

• Very popular for music
• version of MPEG format that compresses audio
  files with minor impact on sound quality
• uses an open standard.
• allows greater innovation from developers
  creating MP3-related software
• no security features-- easier for users to share
  MP3 files attach them to e-mail messages.
• MP3 is readily available in portable music
  players and car stereos.
• Users can convert their MP3 files into WAV format
  files and burn them onto CDs.

24
Embedding a Sound File

• A sound clip is one example of an embedded
  object.
• An embedded object is any media clip, file,
  program, or other object that can be run or
  viewed from within the Web page.
• To use embedded objects, the browser must support
  them and must have access to the appropriate
  plug-in applications.

25
Syntax of the ltembedgt Tag

• ltembed srcURL widthvalue heightvalue
  alignvalue autostartstartvaluegt
• URL is the filename and location of the embedded
  object
• height and width attributes define the size of
  the embedded object on the Web page
• align attribute defines how text wraps around the
  embedded clip
• autostart attribute is used to determine whether
  or not the browser starts the embedded clip
  automatically when the Web page is loaded

26
Using the ltbgsoundgt Tag

• IE 3.0 introduced bgsound tag
• syntax of the ltbgsoundgt tag is
• ltbgsound srcURL balancevalue loopvalue
  volumevaluegt
• URL is the filename and location of the sound
  file
• balance attribute defines how the sound should be
  balanced between the computers left and right
  speakers
• loop attribute defines how many times the sound
  clip is played in the background
• volume attribute indicates the volume of the
  background sound

27
Using the ltbgsoundgt Tag

• The ltbgsoundgt tag should be used with caution
• . Background sound displays no control or object
  on a Web page.
• A user cannot stop the background sound from
  playing, pause it, or rewind it.
• The ltbgsoundgt tag is not supported by Netscape.
• To insert a background sound clip with Netscape,
  use the following HTML tag
• ltembed srcfile width0 height0
  autostarttruegt

28
Working with Video Files

• Video a popular use of the Web.
• can be exciting and provide lots of information.
• Video files are large and difficult to work with.
• Use a video capture board to record images from a
  camcorder, television, or VCR.
• To create video clips use computer animation
  software.
• Creating a video file can be a time-consuming
  process but it can also be fun!

29
Rules of Thumb for Graphics

• Use gif compression for flat graphics
• Use jpg for photos
• Minimize color range in your graphics -- can
  compress with better results
• Try different compression levels choose most
  compressed that looks ok
• Reuse graphics

• Try to keep file size of entire web page 30K or
  less
• Crop or resize images
• Use thumbnails of larger images
• Dont put too many on one page
• Dont enlarge dimensions of graphics unless you
  reduce dpi

30
Video Editing Software

• Adobe Premiere 6.0 best version for Web
• Premiere Pro for DVD movies -- 30 day trial
  http//www.adobe.com/support/downloads/product.jsp
  ?product98platformWindows
• iMovie comes with newer Macs
• Ulead Video Studio -- 99.95 http//www.ulead.com/
  
• Pinnacle Studio 9 99.95
• http//www.pinnaclesys.com/ProductPage_n.asp?Produ
  ct_ID1501Langue_ID7

31
What affects Video File Size?

• Frames per second
• Compression Codecs compression /decompression)
  used.
• Codecs available in your video editor depend on
  the video card in you computer
• Some codecs are better suited to the Web
• How much you choose to compress the video and/or
  audio
• Type of audio (music more than words)
• Type of video (more or less movement on screen)
  define how often it needs to be repainted
• Dimensions of video (length X width).
• Color (grayscale smaller)
• Video resolution.

32
Web Video File Formats

• .MOV Apple QuickTime Movies need QuickTime Movie
  plug-in --Widely used for movie previews
• Microsofts Video formats
• .AVI
• .WMF new format
• ASF forthcoming streaming format
• .SWF shocked Flash movies, embed MOV
• .RM RealMedia
• MPEG great compression, no standard MPEG,
  requires technology most people dont have.
• Streaming media available in most file formats
  starts playing before completely downloads

33
Linking to a Video File let user know how big
it is

• A sample code for linking to mrim.avi and
  mrim.mov video files is
• ltpgtPreview a clip from the Mount Rainier
  Interactive Map.lt/pgt
• ltblockquotegt
• lta hrefmrim.avigtSummit Flyby (187K
  AVI)lt/agtltbrgt
• lta hrefmrim.movgtSummit Flyby (215K
  QuickTime)lt/agt
• lt/blockquotegt

34
Linked movies

• lta href"Movies/Export00_288.mov"gt ltbgt28.8klt/bgt
  lt/agt ltfont size"2"gt(1.15MB)lt/fontgt
• lta href"Movies/Export00_56k.mov"gtltbgtltbrgt
• 56 klt/bgtlt/agt ltfont size"2"gt(2.13MB) lt/fontgt
  ltbrgt
• lta href"Movies/Export00_ISDN.mov"gt ltbgtBroadband
  lt/bgtlt/agtltfont size"2"gt(3.69 MB)
• Movie linked to page
• http//cismm.cisdept.csupomona.edu/past421soe/421f
  2003/01/ktnuarin/movies.htm
• Flash version of movie
• http//cismm.cisdept.csupomona.edu/past421soe/421f
  2003/01/ktnuarin/movies.htm

35
Inserting an Embedded Video Clip

• ltembed src"final_movie_320_240_wmv_28K.wmv"
  width"199" height"189"gtlt/embedgt

Example with both linked and embedded movie
clips http//cismm.cisdept.csupomona.edu/past421s
oe/421f2003/01/gasantamaria/Movies/movies.htm
36
Introducing Java Applets

• Java computing language was developed to allow
  users to run programs from within their Web
  browsers rather than on the Web server.
• Each Java program is called an applet.
• examples of Java applets are stock market
  tickers, games, animations, and other utilities.
• Unlike JavaScript, a Java applet is not inserted
  into your HTML file, but it is an external file
  that is downloaded and executed by the browser.
• The applet itself is displayed as an embedded
  object on a Web page in an applet window.

37
Java Applet Archives on the Web
38
Java Applet

• To write your own Java applet, you need a Java
  Developers Kit (JDK).
• commercial JDKs provide easy-to-use graphical
  tools and menus to help create Java applets
  quickly and easily.
• JDK is similar to JavaScript, however, it is a
  more complicated, and powerful language.

39
.class File

• save the source code as a file with the
  four-letter extension .java.
• The file compiled into an executable file that
  can run by itself without the JDK.
• The executable filename has the four-letter
  extension .class and is called a .class file.
• Some Java applets may require several .class
  files.
• A class file can be run only from within a Java
  interpreter.
• In most cases, the Java interpreter is the Web
  browser.

40
Working with the ltappletgtand ltparamgt Tags

• The ltappletgt tag inserted on Web page
• identifies the .class file used by the applet
• allows you to specify any parameters required by
  the applet.
• The general syntax of the ltappletgt tag is
• ltapplet codefilegt
• ltparamgt
• ltparamgt
• . . .
• ltparamgt
• lt/appletgt

41
Working with the ltappletgtand ltparamgt Tags

• file is the filename of the Java applet
• the ltparamgt tags are used for any parameters
  required by the applet
• The syntax of the ltparamgt tag is
• ltparam nametext valuevaluegt
• name attribute identifies the name of the
  parameter required by the applet
• value attribute is the value youll give the
  parameter

42
Attributes of the ltappletgt Tag
43
Insert Other HTML Tags and Text

• Older browsers ignore the ltappletgt and ltparamgt
  tags and instead display the text specified.
• New browsers that support Java applets ignore
  that text.
• Use HTML code to have the browsers display the
  applet, or if its an older browser, the message
  to upgrade.

44
Inserting an Appletand Parameter Values
how to insert an applet and parameter values for
weather information. With the large number of
embedded objects and the Java applet, this Web
page may take a while to load.
filename of Java applet
dimensions of Java applet
applet parameters
45
The Applet in Action
If the browser has trouble accessing the applet,
check the ltappletgt and ltparamgt tags for any
errors or misspellings.
46
Using the Internet Explorer ltmarqueegt Tag

• Use the ltmarqueegt tag to create a theatre-style
  marquee -- syntax.
• ltmarquee attributesgtMarquee Textlt/marqueegt
• Marquee Text is the text that appears in the
  marquee box
• Disadvantages of marquees
• only supported by Internet Explorer.
• Text displayed in other Browsers
• Lots of people find marquees disturbing
  distracting

47
Attributes of the ltmarqueegt Tag
48
Using the ltmarqueegt Tag

• To control the appearance size of the marquee,
  insert the following attributes into ltmarqueegt
  tag
• bgcolorcolor widthvalue heightvalue
• bgcolor attribute controls the background color
  of the marquee box
• width and height attributes define the dimensions
  of the box
• To control the placement of the marquee with the
  surrounding text, use the attributes
• hspacevalue vspacevalue
• hspace and vspace attributes define the amount of
  horizontal and vertical space in pixels around
  the box

49
Using the ltmarqueegt Tag

• To control the behavior of text within the
  marquee, use the attributes
• Behaviortype directiontype loopvalue
• behavior is either scroll (to scroll the text
  across the box), slide (to slide the text
  across the box and stop), or alternate (to
  bounce the text back and forth across the box)
• direction attribute defines the direction the
  text moves, is left (the default), right,
  down, or up
• loop attribute determines how often the text
  moves across the box and is either an integer or
  infinite
• To control the speed of the text within marquee,
  use the attributes
• Scrollamountvalue scrolldelayvalue
• scrollamount is the amount of space, in pixels,
  that the text moves each time it advances across
  the page
• scrolldelay is the amount of time, in
  milliseconds, between text advances