CSci 220 - Lecture 30

Web Page Design

© Morris Firebaugh

Introduction

The Future of WWW Markup Languages

 


A. XML vs. HTML

To select the appropriate Markup Language for your WWW Page project, you need to understand the differences between the major contenders

HTML

XML

Defines Page Layout Defines Page Content
Concerned with appearance of Web Pages Concerned with meaning of Web objects
Data for display only Abstract data concepts given form and structure
Analogous to Spreadsheet Analogous to DataBase
Uses fixed set of Tags (theoretically) Uses customized set of author-defined Tags
Tag attributes specify appearance of objects Tag attributes specify behavior of objects
Appearance of elements can be modified by CSSs Appearance of elements can be modified by CSSs
Tag functionality is fixed Tag functionality is defined by DTD and modifiable
Supported by All Browsers Supported only by IE 4.0, 5.0
Requires bloated browser to parce bad HTML code Requires lean & mean parcer for strict syntax

Additional Problems with XML

Authoring Tools:


B. XML Related Languages

DHTML

Dynamic HTML (DHTML) is any conbination of Style Sheets, JavaScript, Layering, Positioning, and Page Division at the 4.0 Browser level intended to create movement or user interactivity.

The Problem with DHTML

NetScape and Internet Explorer implement DHTML differently


XHTML

http://www.w3.org/People/Raggett/tidy


C. Internationalizing the HTML Character Set

These three Chapters speculate on Trends in WWW Page Design

Trend 1: Internationalization of the WWW

The Problem:


Solutions:

N-Bits
# of Characters

Represented

Name of

Encoding Scheme

International

Standard

7
128
7-Bit ASCII
ISO 646
8
256
8-Bit ASCII
ISO 8859-1

(Latin-1)

ISO 8859-7

(Greek)

16
65,536
Unicode
Unicode Consortium

ISO 10646 BMP

32
4.295 x 109
Universal Multiple-

Octet Coded

Character Set (UCS)

ISO 10646


MIME --> Multipurpose Internet Mail Extensions

In 1992, the Network Working Group published RFC 1341 extending the ability of Internet e-mail to handle various non-text file formats

Examples of MIME Types and corresponding Extensions include:

Content-Type Extensions
application/octet-stream bin exe
txt/html html htm
text/plain txt
text/richtext rtx
video/mpeg mpeg mpg mpe
video/quicktime qt mov
video/x-msvideo avi


Language Identification & Markup

HTML 4.0 introduced the LANG attribute:

<P LANG="fr">Ce paragraphe est en Français</P>

Consider:

The code:

<P LANG="en"> The English language always uses quotes <Q>like this</Q>,
French has <Q LANG="fr">comme &ccedil;a</Q>
and German prefers <Q LANG="de">wie hier</Q>.</P>

produces:

So HTML 4.0 does not seem to be implemented.

Reaching the Summit by Martin Murphy


D.  Evolution of other ***ML Web Languages

Perhaps the greatest contribution of XML to date has been the emergence of XML-based special application languages. Among these are:


MathML

The representation of mathematical expression has been one of the weakest features of HTML. Our attempts to do so:

(from Computer Graphics by M. Firebaugh)

have benn to compose the equations with MS-Word, SNAP the image, and save it as a transparent GIF. The results may look nice (see Chapter 10), but are static images, with no access to the symbols for editing, and no mathematical meaning or content.

Now there is an XML-based markup language called MathML.

Incoherent Thompson Scattering Theory

from

Implementation of MathML in Mozilla

MathML is an XML application for describing mathematical notation and capturing both its structure and content. The goal of MathML is to enable mathematics to be served, received, and processed on the Web, just as HTML has enabled this functionality for text.

MathML is formally specified by the W3C at Mathematical Markup Language (MathML™) 1.01 Specification

Display Problems. Consider the equation . This equation is sized to match the surrounding line in 14pt type on the system where it was authored. Of course, on other systems, or for other font sizes, the equation is too small or too large. A second point to observe is that the equation image was generated against a white background. Thus, if a reader or browser resets the page background to another color, the anti-aliasing in the image results in white "halos." Next, consider the equation . This equation has a descender which places the baseline for the equation at a point about a third of the way from the bottom of the image. One can pad the image like this: , so that the centerline of the image and the baseline of the equation coincide, but this causes problems with the inter-line spacing, which also makes the equation difficult to read. Moreover, center alignment of images is handled in slightly different ways by different browsers, making it impossible to guarantee proper alignment for different clients.


Design Goals of MathML

In order to meet the diverse needs of the scientific community, MathML has been designed with the following ultimate goals in mind.

MathML should:

A = x y z w x 0 t 1 x 0 t x x

An extensive set of MathML test documents are available.


MathML Example 1:

MathML Code:

<math>
<mrow>
  <mfrac linethickness='0.2 cm'><mn>1</mn>
     <mrow><mi>y</mi><mo>+</mo>
     <mn>3</mn></mrow></mfrac>
  <mfrac linethickness='0.3 ex'><mn>1</mn>
     <mrow><mi>y</mi><mo>+</mo>
     <mn>3</mn></mrow></mfrac>
</mrow>
</math>

produces:

Try it:

1 y+ 3 1 y+ 3


MathML Example 2:

MathML Code:

<math>
  <mstyle background='#88cc88'>
    <mfenced>
      <mrow>
        <mi>a</mi>
        <mo>+</mo>
        <mi>b</mi>
      </mrow> 
    </mfenced>
  </mstyle>
  <mo>=</mo>
  <mstyle fontweight='bold'>
    <mfenced>
      <mfrac>
        <mi>&alpha;</mi>
        <mi>&beta;</mi>
      </mfrac>
    </mfenced>
    </mstyle>
  <mo>=</mo>
  <mstyle fontfamily='Helvetica'>  
    <mfenced open='['>
      <mrow>
        <mi>a</mi>
        <mo>+</mo>
        <mi>b</mi>
      </mrow>
    </mfenced>
  </mstyle>
</math>

produces:

Let's link to the HTML description.


The Problem with MathML:

Neither browser supports it.

Sw1.jpg by Shrameyer White


E.  HTML Beyond the Web

The key point is: HTML is a Universal Language

  • The essential role of computers has shifted from calculation to communication
  • Information Technology (IT) is getting easier and less expensive
  • The distinction between an individual computer, a local network, and the WWW is blurring [cf. Sherlock]
  • Physical location is no longer the primary factor in the market, education, commerce, or the workplace.

HTML has become the New User Interface - the Lingua Franca

  • It provides a painless route to integrating text, graphics, sound, video, and interactive programs
  • It provides the natural route to digital, electronic communication - video teleconferencing
  • It provides the generality and abstraction of programming languages - Java

HTML Applications of the Future

  • Kiosks with HTML-based interactive content
  • Sucking up content from CD-ROMs - Encyclopedia Britannica
  • Delivery of Academic Journals and Proto-TextBooks
  • Corporate Intranet applications - Newsletters
  • Delivery of Education - Remote and Distance Learning
  • Vehicle for conducting E-Commerce
  • Interactive, VR Game Delivery
  • Medium for creation, presentation, and dissemination of Art (see above)


F. Lab Exercise Assignment # 15



  

 Updated 5/1/2001