HTML Made Easy: The XTND HTML Translator

7/28/2019 HTML Made Easy: The XTND HTML Translator

1/8

HTML Made Easy: The XTND HTML Translator

Jonathan Ryan Day and Brian A. SullivanComputer Science & Engineering

Jeff SpitulnikSchool of Education

Elliot SolowayProfessor of Electrical Engineering and Computer ScienceProfessor of Education

Highly Interactive Computing Group (HI-C)Department of Electrical Engineering and Computer ScienceUniversity of Michigan1101 Beal AvenueAnn Arbor, MI 48109

Abstract

Accessing documents on the World-Wide Web using NCSA Mosaic as an interface provides an unparalleled on-lineeducational information resource. Enabling users to present their compositions on the Web is as important as accessingexisting information. To facilitate this, it is necessary for users to be able to easily compose documents to be accessed othe Web.At the Highly Interactive Computing group (HI-C) at the University of Michigan, we have created a tool whichsimplifies the publishing process. By developing a translator which allows users to create documents in a familiarapplication and save as an HTML file, we have eliminated the need to know how to compose HTML documents. Thetranslator also allows importation of any HTML document for modification. We chose to target ClarisWorks forMacintosh as the document composition application. It is a popular application in the educational market as well as theindustry in general.Our translator allows the users to create their documents and presentations containing text styles, and pictures as theynormally would in ClarisWorks, and save their compositions as HTML files. To do so, the users simply select theHTML file format option in the 'Save As...' Standard File dialog. The translator is useful in converting existingClarisWorks documents to HTML format as well. It provides WYSIWYG conversion and allows the user to specifylinks to other files. Once saved, the HTML files can be made accessible by uploading them to a WWW server.

Introduction

The Highly Interactive Computing Group at the University of Michigan consists of undergraduate and graduate studenin both education and in computer science as well as professors from both fields and professionals. We work closelywith schools to research ways in which computers can aid in, and further stimulate the educational process. Throughinteraction with students, educators, and administrators at Community High School in Ann Arbor, we are trying todetermine which types of applications and tools are beneficial for educators and students. We then develop theapplications or tools and test them in the classroom with the high school students. This gives us information about whictypes of software tools are useful and which are inappropriate or ineffective.

Importance of the World-Wide Web and Mosaic in the classroom

The World-Wide Web provides accessibility in finding information on virtually every subject from sources around theworld. For students, this type of resource is a tremendous asset in the learning process. Not only does the Web provide


2/8

information on topics which cannot be found anywhere else; with an HTML browser such as Mosaic, it also presents thdata in a form which is new, and interesting to students and other users. From this point on, we will assume NCSAMosaic 1.0.3 or newer for Macintosh in all discussions of an HTML browser. As the world of information continues toincrease in size, the Web provides a standard, easy to navigate information structure while Mosaic adds functionality anan inviting graphical interface [1]. All of this is very important when targeting students as users. The easier it is for themto find the resources they need, the more likely they will be to use and benefit from them. It is also important to realizethat publishing information in the form of HyperText Markup Language (HTML) documents placed on a Web server fworldwide browsing is crucial in the educational process as well. It is relatively easy to get started browsing the Web tfind a plethora of information, even as a novice computer user. However, this constitutes only half of the two-wayinformation sharing path that the Web provides. Users need to be able to publish such documents for others to view.This, however, requires individuals to have some knowledge of the HyperText Markup Language to compose even themost basic documents.

The HTML barrier to document composition

The HyperText Markup Language is a markup language which is a Document Type Definition (DTD) written using thStandard Generalized Markup Language (SGML) model [2]. It is the standard format for hypertext documents beingserved by World-Wide Web servers. HTML itself has a framework which consists of tags within a text document whicdictate the style of the body of text they surround, or they may indicate links to other documents and other types of

resources available on the Web such as movie clips and audio clips.Several stumbling blocks exist for novice users trying to begin composing HTML documents. There is the task offinding information on HTML itself. Many on-line references and primers are easily accessible on the Web, butcurrency, completeness and clarity in documentation are some factors that complicate the process. For users not familiawith a markup language, the whole framework may be unfamiliar as well. Even when armed with documentation and idea of how HTML is structured, it is often necessary to expend considerable time reformatting a document to achievethe desired result. Overall, it is very time consuming to compose documents when compared with composition throughuse of a familiar page layout or word processing application.

Motivation to develop the translator

The desire to allow users to compose HTML documents without having to learn HTML was sparked by research in thHighly Interactive Computing Group involving K-12 curricula. We realize how important it is to open the door to theWeb for students, but at the same time, not to overwhelm them with the task of learning HTML. We found that, in ordto make the procedure of creating HTML documents seamless to the students when using ClarisWorks for Macintosh, was necessary to develop a translator which provided transparent translation to HTML format. It would not have beenenough to simply develop an application which would allow drag and drop conversion or as a separate translationapplication entirely. Rather, a translation option accessible to the user through the 'Save As...' dialog box from within thapplication was exactly the desired solution. This was our primary motivation to develop the translator. We have realizethe potential for application outside of the educational world as well, however.

Implementation

The XTND System

Developed by the Claris Corporation, the XTND System allows an application to use a virtually unlimited number offile formats. The XTND System itself is a document which contains several routines which are called by XTND-capabapplications. The job of the XTND System is to present a list of all available translators to the Standard File dialog forthe user to select and indicate which document to read from or write to [3]. The XTND System then loads the selectedtranslator. From this point the translator does the remaining work. That is, it uses the available data either from the


3/8

application on export or from the input file on import and performs the translation. The translator is, then, theintermediate piece in the model that determines which information gets passed from the application to a destination filevice versa.The modularity of the XTND System allows each translator to be developed independently of other translators. Theability to create import and export translators for a specific file format without being concerned with other file formats otranslators adds much flexibility in development. For these reasons, we chose to develop using the XTND System.

XTND HTML Translator

During the export process, the translator has access to data structures which contain data from the application. This datcomes in different phases. If the data is text, it comes in the form oftext runs, or continuous streams of text of like style[3]. Each text run may have any number of the available style characteristics associated with it. These characteristicsinclude font type, size, style, color, and other formatting characteristics. They are important during export as the basis fowhich tags to write when exporting data to the destination HTML text file. The translator also has access to informatioabout images contained in documents. If an image is encountered during export, it is denoted by an image flag which ttranslator checks at the beginning of each phase. If an image exists, the translator receives a pointer to the image [3]which it uses to write the image to a file. A more detailed description of how images are handled appears in the sectionon functionality mapping. As explained above, the translator receives information about a document being exported,then writes the data to the destination file as described in the mapping between ClarisWorks and HTML in the section functionality mapping.The import process is very similar to the export process. During the import process, the translator reads data from thesource file which is an HTML text file. As expected, nearly the reverse of the export process occurs. The text is read inby the translator and the tags are interpreted to determine what information is to be sent to the application. The translatosends information regarding the input data by using similar data structures as were used as information sources duringexport. The appropriate characteristics are set for the incoming text, and then passed to the application to be displayed fthe user. Since the input file must be a text file, there are only text runs to process, however, depending on the tags readit may be necessary to open an image which is linked to within the HTML document. The method followed in suchcases is described in the section on functionality mapping.

The user interface

There are several pieces which make up the translation package for use with ClarisWorks. First, there is the XTNDSystem itself, which comes with all Claris XTND-capable applications and resides in the Claris folder in the SystemFolder on a Macintosh. Then, the XTND HTML Translator is located in the Claris Translators folder in the Clarisfolder. Finally, to add ClarisWorks-specific functionality for handling links and styles, there is HTML Documentstationery for ClarisWorks. This stationery document is a template which is used to aid in composing HTML documentIt has styles specific to HTML headers, preformatted text, and literal HTML commands listed in the Style menu asshown in Figure 1. This is done to provide a method for the user to specify headers and styles from the familiarClarisWorks Style menu. Also included in the stationery is a macro with an associated shortcut button. When theshortcut palette is displayed, the 'Link' button appears as in Figure 2. When the user clicks on the macro button, a link i

created in the manner described in the next section.


4/8

The style menu additions and the shortcut macro mentioned above are the only noticeable differences in ClarisWorksusing the HTML Document stationery as opposed to using no stationery at all. As mentioned above, the translation isinitiated in the Standard File dialog by selecting the translator from the pop-up list of available translators. The dialogsare very similar for both export and import as shown in Figure 3. Therefore, without breaking from familiar userinterface guidelines on the Macintosh [5], we have added functionality not inherent in ClarisWorks, enabling usersfamiliar with ClarisWorks to translate their documents to HTML format easily.


5/8

Mapping ClarisWorks and HTML functionality

Due to the differences in the types of styles and document formatting supported by ClarisWorks and HTML it wasnecessary to evaluate how to map styles and formatting between the two representations of a document. This mappingwas the model on which the translator code structure was based. The main issues to consider in the export mapping froClarisWorks to HTML were document formatting, font type, size, and style, and support for links to other resources ordocuments. When looking at import functionality mapping from HTML to ClarisWorks, the issues are identical buthandled very differently due to the nature of importing versus exporting.In exporting, since margins, multiple columns, page breaks, footnotes, document headers, and footers do not have direccounterparts in HTML files, these characteristics were ignored. We assumed the user created the document in a singlecolumn and that footnotes would be used for a special purpose other than as footnotes, which is described later in thissection. Since the type of font used to display an HTML document is dependent only on the browser, the font type is

irrelevant and is ignored. The remaining text export issues deal with font attributes.Font style and size are important issues in both ClarisWorks and HTML. In ClarisWorks any size font can be used, butthe only method for specifying differences in font sizes in HTML is to tag the selected text with header level tags orother style tags, then specify different font sizes for each header or other tag type in the preferences of the HTMLbrowser. This assumes use of a browser which allows users to specify such preferences, as is true in the case of NCSA

Mosaic but may not necessarily be true for other browsers. In order to maintain a certain level of uniformity in font sizemapping we divided font sizes into six different groups, each to be tagged as a different header. Table 1 shows themapping between font sizes in ClarisWorks and their corresponding header tags in HTML. Provided that the font sizerepresentations of the different headers scale down in the HTML browser from largest font for to smallest for, the relative font sizes will look similar, if not identical, in an HTML browser and ClarisWorks.


6/8

In terms of font styles, the translator supports bold, italics and underline. ClarisWorks also allows strike through, outlinshadow, condensed, extended, superscript, subscript, and text colors, however, these styles do not have equivalent tags

in HTML. With the exception of superscript numbers and text colors which are used by the translator as link flags andliteral HTML text flags, which will be explained later in this section, the unmatched styles are ignored, and the translatotreats the run as plain text.Export translation of images within documents occurs as follows. When the XTND System notifies the translator of animage during the export process, a file is created in the current folder in the Macintosh file system which is titledfilename.gif, wherefilename is the name specified in the Save dialog by the user, then the image information is stored ithe new file as a GIF image. An tag is written to the HTML export text file which is alink tofilename.gif so that the image can be inlined when viewed with an HTML browser. This inline image link isgenerated assuming that the image file will be located in the same directory as the HTML file itself which is true duringexport since the translator assures this.Even though ClarisWorks does not provide a method for users to add certain media such as sound files to documents,which would be suitable in HTML, there is support for user specified links to facilitate this. We realize that there arelimitations to ClarisWorks in terms of being able to display all possible types of media, but, with the ability to specifylinks explicitly, the user still has full control to add different media and to specify links to other HTML documents. The'Link' macro described in The user interface section above enables users to specify links. Clicking on the macro buttonwhile highlighting a selection of text to be the link text, causes the text selection to be changed to blue colored,underlined text and tagged with a superscripted footnote number. Footnote text is then created in association with theparticular footnote number at the bottom of the page in ClarisWorks. Initially the footnote text is 'INSERT URL HEREThis method is for use in specifying links to other documents on the Web by typing the Uniform Resource Locator(URL) as the footnote text. There is also functionality through the Style menu associated with the HTML Documentstationery as described above, to insert literal HTML text which will not be translated, but rather echoed to the HTMLexport text file. A selection of text with 'Literal HTML Text' style associated with it appears in red. This can be any valHTML text including plain text, tags, links to other resources, or anchors. This functionality makes it possible to createHTML documents in ClarisWorks which support all possible HTML tags. We based the translator on Level 1 HTMLspecifications, but with the literal HTML text option, any currently valid tags may be used.

When importing HTML documents into ClarisWorks using the translator, the process is fairly straight forward. The texis read from the HTML file and the translator checks for valid tags. Header tags, logical and physical styles, and normatext are all handled at the time they are read. The appropriate style flags are set, and the particular styles are applied to thtext read in, then passed to the application. Any list tags read are simulated with tabs in ClarisWorks since it has no builin functionality for displaying lists. If the tag read is a link to another document, it is displayed as a numbered footnote the bottom of the page with blue link text in the body above. If the text read is a reference to an inlined image, an attemto find the image is made. Upon a successful search, the image is inserted into the document being displayed inClarisWorks. If the image file is not found, the link text is displayed in red. This is true for all tags which are read that anot understood by the translator. After importation, what the user sees is text with possibly different styles, footnotesdenoting links if any exist, and red text displaying any information read which was not understood by the translator sucas bad HTML code or unsupported tags.

Use and effectiveness

The XTND HTML Translator was developed to make composition of documents as easy as possible, however, somebasic knowledge is required. Knowledge of the Macintosh operating system and file system structure are imperative, atleast at a working knowledge level. Also assumed, is that the user is familiar with ClarisWorks for Macintosh, Clarisstationery, use of macros in ClarisWorks, and ClarisWorks tools and menus. It is also important to understand how theStandard File dialogs for saving and opening documents operate. These are reasonable requirements. The group of higschool students we conduct research with have all been introduced to these concepts through classroom instruction andhave been able to use the HTML translator successfully.


7/8

Building knowledge

The method by which the translator functions is very conducive to gradually learning more about HTML documents anhow to compose them. Initially, it is easy to create flat documents, that is, documents with text styles and images, but nlinks to other documents or resources. Without much instruction about URLs and Web navigation, users can becomefamiliar with and start including links to other documents in their own compositions by using the provided shortcut

macro in ClarisWorks. Eventually, the ability to include any HTML text will enable users to be able to go beyond thebasics to incorporate other resources by specifying them in literal HTML text which is written directly to the output filewithout translation. This is helpful in exploring new resources supported by HTML while still being able to benefit frothe simplicity of composing in a familiar, user-friendly environment.

Future directions

The XTND HTML Translator is currently being further developed to add even more flexibility in composing HTMLdocuments. One such development is support for QuickTime movies. ClarisWorks does allow for inclusion ofQuickTime movies in documents, however this is not currently supported by the translator. Future versions will

accommodate movies.As mentioned earlier, Level 1 HTML specifications [6] were used to model the current version of the translator. SinceLevel 2 HTML documents are proliferating and support is being added for Level 2 functionality in HTML browserssuch as NCSA Mosaic, future versions of the XTND HTML Translator will also handle Level 2 compliant documentsAs Level 3 HTML or HTML+ is further developed, it will be considered for support in future versions of the translatoras well.We will continue testing use of the translator in the educational environment to find ways to further increase itsbeneficiality and ease of use. As possible improvements in the translator and the included HTML Document stationeryare recognized, such changes will be implemented in subsequent releases.

Conclusion

Using the XTND HTML Translator greatly decreases the amount of time required to compose HTML documents whialso decreasing the level of knowledge necessary to begin. It is a valuable tool for users at all levels of HTMLknowledge for increasing document composition efficiency, while still allowing as much flexibility in manipulating texand images as ClarisWorks allows, and also providing a means for support of future developments in the HTMLstandard. It also makes simpler the task of progressing through learning different aspects of Web publishing. It is possibto publish documents on the Web with little or no knowledge of HTML, thus enabling anyone with access to aMacintosh, ClarisWorks and the XTND HTML Translator to create HTML documents. The translator allows morepeople to participate in the growth of the Web, and move away from being merely observers.

Acknowledgements

Recognition of the need for the translator and its application in educational curricula is due in total to Jeff Spitulnik,School of Education, University of Michigan, and Professor Elliot Soloway, Professor of Electrical Engineering andComputer Science, Professor of Education, University of Michigan. Sean DeMonner, School of Education, Universityof Michigan, collected data and instructed a group of high school students about how to use Mosaic, what the World-Wide Web is, and how to use the XTND HTML Translator to compose documents to be viewed in Mosaic. He is alsocurrently using the translator as a key tool in forming a model for bringing schools up as Web sites. Mike Farr, formerlyof Claris Corporation, now with Helios, Inc., gave us help in resolving several issues specific to ClarisWorks during thdevelopment process. Kathy Brade, University of Michigan, supplied information on Macintosh Toolbox routines. Theentire HI-C Group gave us hardware and software support during development of the translator. Special thanks to theCommunity High School students who tested the translator.


8/8

References

Software Development Group, National Center for Supercomputing Applications,NCSA Mosaic for Macintosh User'sGuide Version 1.0, University of Illinois at Urbana-Champaign, Champaign, IL, 1994.

National Center for Supercomputing Applications,A Beginner's Guide to HTML, University of Illinois at Urbana-Champaign, 1994.URL: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Developer Technical Publications,XTND Programmer's Guide For XTND 1.3 version 1.3, Apple Computer, Inc.,Cupertino, CA, 1991.

Claris Corporation, ClarisWorks for Macintosh Handbook, Claris Corporation, Santa Clara, CA, 1993.

Apple Computer, Inc.,Macintosh Human Interface Guidelines (Apple Technical Library), Addison-Wesley, New Yo1992.

Berners-Lee, Tim and Connolly, Dan,A specification in hypertext, CERN, Geneva, Switzerland, 1994.URL: http://info.cern.ch/hypertext/WWW/MarkUp/HTML.html

Authors

Jonathan Ryan Day is a senior undergraduate Computer Science student at the University of Michigan. He has workedwith the University of Michigan Libraries Recon group maintaining data integrity in the on-line catalog searching

system. He has also worked with Learning Center, Ltd, a computer networking and service company, developing in-house applications. Recently, he has been working with the Highly Interactive Computing group at the University ofMichigan on several research projects.Brian Sullivan is a senior undergraduate Computer Engineering student at the University of Michigan. He has workedwith Chase Manhattan Bank as a systems engineer, at Northern Telecom as a system administrator, and the ComputerAided Engineering Network (University of Michigan) as a network specialist. Recently, he has been working with theHighly Interactive Computing group at the University of Michigan on several research projects.Jeff Spitulnik is a doctoral student in the School of Education, University of Michigan. He has been one of the primarylinks in the project involving the University of Michigan School of Education, the Highly Interactive Computing groupand Community High School, Ann Arbor, MI.Elliot Soloway is a Professor in the Department of Electrical Engineering and Computer Science, College ofEngineering, University of Michigan. He is also a Professor in the School of Education. Previously he was an AssociaProfessor at Yale University, Department of Computer Science. His area of research is currently interactive learningenvironments. In particular, he is concerned with how learners of all ages will routinely manipulate computational medin pursuit of their learning and workplace goals. Soloway's research group has produced MediaText, a multimediacomposition environment, that is available commercially and is being used in hundreds of classrooms around thecountry. Soloway is Editor-in-Chief of the Interactive Learning Environments journal, published by Ablex, Inc. He waa Keynote Speaker at the ACM Conference on Computer-Human Interfaces in 1989, and has given numerous tutorialsand presentations at other CHI conferences.

_________________This project was supported, in part, by a grant from the National Science Foundation[RED 9353481].

_________________Contact: Jonathan Ryan Day, [email protected]