天天看點

XPOINT:基于XML、CSS 和 HTML的示範圖形系統研究

作者:司馬說科普
圖形 Power Point 示範文稿具有定義的圖形格式,但不能移植到其他浏覽器。

Xpoint是一個簡單的表示圖形系統,示範文稿以可擴充标記語言(XML)指定并轉換為可導航的HTML進行浏覽,使用級聯樣式表(CSS)控制外觀。

并且還可以轉換為可移植文檔格式(PDF)格式,進而提供更大的靈活性。該項目将擴充現有Xpoint圖形表示系統的樣式和功能,XML 表示将以各種布局呈現,具體取決于應用的樣式模闆。

Xpoint是一個簡單的示範圖形系統,示範文稿以 XML 格式指定,并轉換為 HTML 以供浏覽。示範文稿的外觀由CSS控制,用于示範的XML資料也将轉換為PDF(便攜式文檔格式),以便列印/檢視示範文稿資料,Xpoint是為簡單的示範圖形生成良好導航并可移植HTML的最佳方法之一。

目前人們使用Microsoft Power Point來生成HTML示範文稿,将圖形示範文稿轉換為HTML格式不會産生所需的輸出。生成的HTML示範文稿僅限于初始設計布局,在轉換過程中,使用者無法選擇任何其他模闆。

Xpoint将側重于從圖形Powerpoint示範文稿的XML源生成可移植且易于導航的HTML幻燈片,将根據所選的CSS從同一XML 源生成多個輸出。PDF文檔将從示範文稿的同一來源生成,将對HTML輸出進行比較研究,以研究各種浏覽器中的可移植性問題。

Xpoint描述

XML允許建立自己的自定義标簽,進而可以在應用程式之間群組織之間定義、傳輸、驗證和解釋資料。Xpoint表示的資料以XML格式存儲,示範部分将有兩種輸入資料的方法,具體取決于視窗和非視窗平台。

對于Windows平台,示範文稿将使用真實形式(附錄C)進行,并儲存為Xpoint XML格式(附錄A)。将使用樣式表設計表單,該樣式表将引用Xpoint格式,此表單将驗證XML架構,并允許儲存架構中指定的XML檔案,Xpoint項目的XML模式可在附錄 B 中找到。

XPOINT:基于XML、CSS 和 HTML的示範圖形系統研究

圖 1: Xpoint XML模式的示意圖表示

對于非Windows平台,JEdit将用于定義示範文稿,并将儲存為Xpoint XML格式。

JEdit 還将驗證 XML 架構,并允許儲存架構中指定的XML檔案,JEdit是一個用Java編寫的跨平台程式員的文本編輯器。

Xpoint包含資訊、标題頁、正文和部分,每個部分都包含一個标題頁和一些主題。每個主題都有一個标題和一個或多個正文,正文可以包含任意 XHTML 标記。如圖 1 所示,主體可以有粗體、斜體、下劃線和連結。

XML架構定義可以出現在文檔中的元素、子元素和屬性,還可以定義順序、子元素的數量、元素和屬性的資料類型,架構的完整描述将在項目的技術報告中指定。

Xpoint架構

對于Windows平台,Altova Authentic将用作所見即所得(Rich Text Editor,RTE)編輯器,并使用Altova樣式表設計一個表單,該樣式表将驗證XML模式以獲得有效的Xpoint XML格式。此表單可以在真實的編輯器中檢視,并且使用者可以在其中輸入有關示範文稿的資訊,使用者将能夠在一個部分中選擇多個部分或多個主題。

對于非Windows平台,JEdit将用作編輯器,JEdit将使用各種插件(XML,JTidy)進行定制,并将驗證Xpoint XML模式。理想情況下,JEdit可以在任何平台(Windows或非Windows)中使用,但使用者将不得不妥協使用Authentic中提供的所見即所得功能。

從真實表單中獲得的Xpoint XML将被處理以獲得可導航的HTML和PDF文檔,Cocoon 将用于生成可導航的HTML和PDF文檔,Cocoon是Apache Cocoon項目下的一個開源項目,它是一個 XML 釋出架構,它提供了一個基于管道概念的靈活環境,該項目的配置檔案(“sitemap.xmap”)允許動态設定由生成器、多個變壓器和序列化程式組成的管道。

附錄D解釋了目前在項目中使用的配置檔案,它包含有關比對,發電機,變壓器,序列化器,處理管道清單等的資訊。序列化程式将輸入XML結構轉換為某種其他格式(不是必需的 XML),各種序列化程式有HTML序列化程式,FOP序列化程式等。各種樣式表将應用于源 Xpoint XML 格式,并将生成可導航的HTML。可擴充樣式表語言轉換(XSLT)将用于從源代碼生成XHTML / HTML,将建立各種CSS格式以顯示此項目中輸出的靈活性。

可擴充樣式表語言-格式化對象(XSL-FO)将用于擷取PDF(可移植文檔格式)。XSL-FO(格式化對象)是一種用于格式化XML資料以輸出為螢幕、紙張或其他格式的語言。附錄E顯示一個示例XSL-FO檔案以擷取PDF文檔,完整的設計和解釋将在項目的技術報告中讨論。

XPOINT:基于XML、CSS 和 HTML的示範圖形系統研究

該項目還比較了HTML在各種浏覽器中的可移植性,這些 HTML 示範文稿可以有效地用于示範幻燈片,并根據所選CSS或所選模闆以多種模式獲得示範文稿。

Xpoint的工具和技術

1.Altova Authentic:建議作為所見即所得的編輯器來擷取指定示範文稿的XML格式,Authentic是一個免費的内容編輯器,允許修改XML文檔和資料庫中的内容。

2.JEdit:建議作為XML編輯器用于非Windows環境,JEdit是開源軟體,可以用作XML編輯器。

3.Altova Style Vision:用于設計使用者輸入XML的表單,表單通常同意DTD或XML模式。在這個項目中,Xpoint示範形式将使用風格視覺進行設計,表單将與 XML架構一緻。

4.Eclipse:Eclipse是一個開源社群,其項目專注于為建構軟體提供可擴充的開發平台和應用程式架構,建議用于項目開發,XML,XSLT和CSS。

5.Cocoon:建議用于處理、開發和生成HTML和PDF檔案,将cocoon.war檔案包含在webapps目錄中将使cocoon在Tomcat伺服器中正常運作,是以XSLT和XSLFO處理被制作成一個簡單的過程,可以建立映射檔案以指定将 XML 文檔轉換為所需格式。

6.XSLT(可擴充樣式表語言轉換):一種将XML文檔轉換為XHTML/HTML文檔或其他XML文檔的語言。

7.XSL-FO(可擴充樣式表語言 – 格式化對象):一種基于XML的标記語言,描述輸出到螢幕、紙張或其他媒體的 XML 資料的格式。

附表

以下是建議的裡程碑日期

日期 拟議工作 狀态
2005年9月26日 預提案 完成
第一階段(設定)
2005年9月30日星期二 開發網站以維護項目狀态 完成
2005年10月2日星期二 确定項目所需的軟體和解析器。為項目設定工作環境(xpoint設定和運作示例),重做提案更改并确定項目團隊成員。 完成
第4階段( 學習曲線 )
2005年10月15日 XSLT、XPath、DTD 示例、Xpoint 的可行知識 完成
2005年11月15日 XSL-FO 開發,示例。 完成
第 3 階段(開發工作)
2005年11月30日 所見即所得編輯器,用于 XPint 表示 XML 資料。 完成
2005年12月15日 為 xml 資料生成示例 PDF 文檔 完成
2006年1月15日 使用繭生成示例 html 幻燈片 完成
2006年1月19日 送出項目建議書 完成
2006年2月15日 開發表單/XML 架構 完成
2006年2月28日 從 xpoint xml 開發多個 html 幻燈片 完成
2006年3月2日 修改了 CSS 以擷取多個輸出 完成
2006年3月17日 使用 XSL-FO 生成的 PDF 文檔 完成
2006年3月25日 在一個保護傘下配置整個項目 完成
2006年4月30日 将 JEdit 配置為 Xpoint 環境 完成
第 4 階段(文檔)
2006年5月10日星期二 編寫技術報告并研究可移植性問題。
2006年5月26日 拟議的辯護日期

1. 附錄

附錄A

XPOINT:基于XML、CSS 和 HTML的示範圖形系統研究

描述:

<?xml version="1.0" encoding="UTF-8"?> <?xmlspysps xpoint.sps?>
<xpoint>
<title> XPoint
</title> <body>
<bold>XPoint</bold> is a simple <italic>presentation graphics </italic> system. In which presentation is specified in <link>XML</link> and converted to HTML for browsing. <underline> Appearance </underline> is controlled using CSS.
</body>
<section>
<title> Text
</title>
<body>
A presentation can be created as a text table and converted with <bold>awk </bold> into XPoint format
</body>
<topic>
<title>
Markup
</title>
<body>
Paragraph styles XPoint, Section and Topic introduce structure and titles, Body can be used to subdivide a topic.
Character styles File and CSS allow to prescribe output and style sheet file name stems. Style can be used to define properties to be inherited by the page body.
Paragraph style P identifies running text, Pre marks verbatim code segments.
Character styles B, I, and TT indicate emphasis and code references.
</body>
</topic>
</section>
<section>
<title> DTD
</title>
<body>
A presentation must conform to a <italic>Document Type Definition.</italic>XHTML markup is permitted. </body>
<topic>
<title> Elements
</title>
<body> xpoint contains the title page and the sections.<bold>Each section contains a title page and some topics.</bold> Each topic has a title and one or more pages.
</body>
</topic>
<topic>
<title> Content
</title>
<body> title and body can <src> C:\cocoon-
2.1.7\build\webapp\html-pdf\image01.jpg</src> contain <bold> arbitrary XHTML markup.</bold>
</body>
</topic>
<topic>
<title> Links
</title>
<body> body can prescribe the stem of the style sheet and output file name and add properties to the style sheet.The file name stem should not start with an underscore.The generated file name is slides<italic>/file.html </italic>
</body>
</topic>
</section>
<information>
<author>
<name>
Sudhanshu Sood
</name>
<contact>
12501 Laurel Grove Pl. Germantown, MD 20874
</contact>
<email> [email protected]
</email>
</author>
</information> </xpoint>           

附錄B

檔案:描述用于驗證 Xpoint 文檔的 XML 架構。

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="xpoint">
<xs:annotation>
<xs:documentation>
Comment describing your root element
</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:sequence>
<xs:element ref="information"/>
<xs:element ref="title"/>
<xs:element ref="body"/>
<xs:element ref="section" maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="author">
<xs:complexType>
<xs:sequence>
<xs:element name="name"/>
<xs:element name="contact"/>
<xs:element name="email"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="body" type="formatType"/>
<xs:element name="section">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="body" type="formatType"/>
<xs:element ref="topic" minOccurs="0" maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="topic">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="body" type="formatType" maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="title" type="xs:string"/>
<xs:complexType name="formatType" mixed="true">
<xs:choice minOccurs="0" maxOccurs="unbounded">
<xs:element name="bold" type="formatType"/>
<xs:element name="italic" type="formatType"/>
<xs:element name="underline" type="formatType"/>
<xs:element name="link" type="formatType"/>
</xs:choice>
</xs:complexType>
<xs:element name="information">
<xs:complexType>
<xs:sequence>
<xs:element ref="author" maxOccurs="unbounded"/>
<xs:element name="date" type="xs:date"/>
<xs:element name="time" type="xs:dateTime"/>
<xs:element name="location"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>           

附錄C

檔案:描述示範文稿的表單。

表單的來源是一個 xml 文檔,它由相應的 XML 架構驗證。

XPOINT:基于XML、CSS 和 HTML的示範圖形系統研究

附錄D

源檔案:sitemap.xmap

<!—Configuration file used to generate navigable html for Xpoint xml document. @Sudhanshu Sood -->
<?xml version="1.0" encoding="iso-8859-1"?>
<map:sitemap xmlns:map="http://apache.org/cocoon/sitemap/1.0">
<!-- define the Cocoon processing pipelines --> <map:pipelines>
<map:pipeline>
<!- to process CSS file specified for the presentation 
<map:match pattern="css/*">
<map:read src="css/{1}" mime-type="text/css"/>
</map:match>
</map:pipeline>
<map:pipeline>
<!—browser matched presentation to output xsl 
<map:match pattern="presentation">
<map:generate src="xml/xpoint.xml"/>
<map:transform src="xslt/xpointsection.xsl"/>
<map:transform src="xslt/section2html.xsl"/>
<map:serialize type="xhtml"/>
</map:match>
<!—matches all the sections specified-->
<map:match pattern="section/*">
<map:generate src="xml/xpoint.xml"/>
<map:transform src="xslt/xpointtopic.xsl">
<map:parameter name="section" value="{1}"/>
</map:transform>
<map:transform src="xslt/sectionhtml.xsl"/>
<map:serialize type="xhtml"/>
</map:match>
<!—matches all the sections specified in a section-->
<map:match pattern="section/*/topic/*">
<map:generate src="xml/xpoint.xml"/>
<map:transform src="xslt/topicbody.xsl">
<map:parameter name="section" value="{1}"/>
<map:parameter name="topic" value="{2}"/>
</map:transform>
<map:transform src="xslt/sectionhtml.xsl"/>
<map:serialize type="xhtml"/>
</map:match>
</map:pipeline>
</map:pipelines>
</map:sitemap>           

附錄E

用于生成 xpoint 格式的 PDF 文檔的示例 XSL-FO 檔案。

檔案名:Xpoint2pdf

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<!-- generate PDF page structure -->
<xsl:template match="/">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="intropage" page-height="29.7cm" page-width="21cm" margin-top="1in" margin-bottom="2in" margin-left="2.5cm" margin-right="2.5cm">
<fo:region-body padding-start="1cm" padding-end="1cm" margin-top=".6in" margin-bottom=".6in" margin-left="0.7in" margin-right=".5in" />
</fo:simple-page-master>
<fo:simple-page-master master-name="contents" page-height="29.7cm" page-width="21cm" margin-top="1in" margin-bottom="1.5in" margin-left="2.5cm" margin-right="2.5cm">
<fo:region-body padding-start="1cm" padding-end="1cm" margin-top=".6in" margin-bottom=".6in" margin-left="0.7in" margin-right=".5in" />
<fo:region-before extent="0.5in" />
<fo:region-after extent="0.5in" />
</fo:simple-page-master>
<fo:simple-page-master master-name="desc" page-height="29.7cm" page-width="21cm" margin-top="1in" margin-bottom="0.7in" margin-left="1.5cm" margin-right="2.5cm">
<fo:region-body padding-start="1mm" padding-end="3mm" margin-top="1in" margin-bottom=".5in" margin-left="15mm" margin-right="15mm" />
<fo:region-before extent="0.7in" />
<fo:region-after extent="0.4in" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="intropage">
<fo:flow flow-name="xsl-region-body">
<xsl:call-template name="IntroPage"/>
</fo:flow>
</fo:page-sequence>
<fo:page-sequence master-reference="contents" >
<fo:flow flow-name="xsl-region-body">
<xsl:apply-templates select="/" mode="toc" />
</fo:flow>
</fo:page-sequence>
<fo:page-sequence master-reference="desc" >
<fo:flow flow-name="xsl-region-body">
<xsl:call-template name="presentation" />
</fo:flow>
</fo:page-sequence>
</fo:root>
</xsl:template>
<xsl:template name="IntroPage">
<fo:block>
<fo:block text-align="center" font-size='26pt' space-before = '20mm' space-after = '25mm' >
<xsl:value-of select='/xpoint/title'/>
</fo:block>
<fo:block text-align="center" font-size='18pt' space-before = '25mm' space-after = '12mm'>by
</fo:block>
<fo:block text-align="center" font-size='18pt' space-before = '25mm' space-after = '12mm'>
<xsl:for-each select="/xpoint/information/author">
<xsl:value-of select="name"/>,
<xsl:value-of select="email"/>
</xsl:for-each>
</fo:block>
</fo:block>
<fo:block text-align='center' font-size='10pt' space-before = '15mm'> Date: <xsl:value-of select="/xpoint/information/date"/>
</fo:block>
<fo:block text-align='center' font-size='10pt'>
Time:<xsl:value-of select="/xpoint/information/time"/> </fo:block>
</xsl:template>
<xsl:template name ="presentation">
<fo:block>
<fo:block text-align="center" font-weight="bold" > <xsl:value-of select='/xpoint/title'/>
</fo:block>
<fo:block text-align="justify">
<xsl:value-of select='/xpoint/body'/>
</fo:block>
<xsl:apply-templates select="xpoint/section"/>
</fo:block>
</xsl:template>
<xsl:template match="section">
<fo:block space-before="1.5mm">
<fo:block font-weight="bold">
<xsl:value-of select="title"/>
</fo:block>
<fo:block text-align="justify">
<xsl:value-of select="body"/>
</fo:block>
<xsl:apply-templates select="topic"/>
</fo:block>
</xsl:template>
<xsl:template match="topic">
<fo:block margin-left=".75cm"> <fo:block font-weight="bold">
<xsl:value-of select="title"/>
</fo:block>
<fo:block text-align="justify" font-size="10" margin-left=".75cm"> <xsl:value-of select="body"/>
</fo:block>
<fo:block>
<xsl:element name="fo:external-graphic">
<xsl:attribute name="src"><xsl:value-of select="src"/>
</xsl:attribute>
</xsl:element>
</fo:block>
</fo:block>
</xsl:template>
<xsl:template match="/" mode="toc">
<fo:block >
<fo:block text-align="center" font-size="16pt" spaceafter=" 10mm">
</fo:block>
<xsl:apply-templates select="/xpoint/section" mode="toc"/> </fo:block>
</xsl:template>
<xsl:template match="section" mode="toc">
<fo:block>
<fo:inline>
<xsl:value-of select="title"/>
<xsl:apply-templates select="topic" mode="toc"/>
</fo:inline>
</fo:block>
</xsl:template>
<xsl:template match="topic" mode="toc">
<fo:block font-size="12pt" text-align-last="justify" margin-left="1.0cm">
<fo:inline>
<xsl:value-of select="title"/>
<fo:leader leader-pattern="dots"/>
</fo:inline>
</fo:block>
</xsl:template>
</xsl:stylesheet>           

繼續閱讀