Add Site or Add Page to Favorites
>   Internet > Web > Web Design > Markup Languages > XML >

 Using XSL Templates 
 
Affiliates Domain Names Internet Marketing ISPs Podcasts TCP/IP Web XML
Summary Intro XSL Templates
sample.xml sample.xsl screen.css handheld.css .htaccess

Preview DRM-free music
Play clips of the most popular DRM-Free music in MP3 format
Legal Music .com

Get information on your favorite TV Shows at TV Series .com

Clarify the meaning of the acronyms on your web site.

Acronym Dictionary

Acronym Finder

Social Networking Web Sites

Register your own domain name at A to Z Domains.

or buy domains at Domain Names For Sale .net

Printer-friendly PDF* format:

How To Guides for XML

This Section

"How To" Guides for XML

How to repurpose mobile content for traditional web browsers

When content needs to be delivered to both traditional web browsers and smaller mobile devices, one technique for producing content for both channels from the same source is to code the content for one channel and repurpose it for the other channel. In most cases, the content for traditional web browsers already exists, so the tendency is to try to repurpose that content for smaller devices.

However, it's much easier to design the content for the smaller portable devices and use XSL templates to repurpose the content for larger displays by wrapping it with additional markup code.

This technique is particularly useful for sites using a ".mobi" domain name managed by the dotMobi registry, since the registry requires sites to be designed for mobile devices. For an example see the Sample .mobi site

Sample XHTML file

The XHTML file contains the page-specific content that is delivered to all types of browsers. No site-wide common elements are included, since those are put into separate templates.

Sample XHTML file

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/sample.xsl"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Copyright (c) 2006 Accilent Corp. (http://www.Accilent.com/) for How To Guides (http://www.HowToGuides.com/). Provided AS IS; no warranties are expressed or implied. Permission is hereby granted to use and/or modify. -->
<head>
<link rel="stylesheet" type="text/css" href="/screen.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/handheld.css" media="handheld"/>
<title>Sample .mobi site</title>
</head>
<body>
<h1></h1>
<h2>Home Page</h2>
<p>This is the actual content that shows up on small mobile devices. The content can include <a href="http://www.Acronyms.net/terms/h/Hypertext-Transfer-Protocol/" title="Hypertext Transfer Protocol"><abbr>HTTP</abbr></a> links to other web pages, such as:</p>
<p><a href="/detect.cgi?test" accesskey="d">Detect browser type</a></p>
<p>as well as specialized links for mobile devices with phone functions, such as:</p>
<p><a href="wtai://wp/mc;14123373113" accesskey="w">Call the webmaster</a></p>
</body>
</html>

See .mobi sites in Internet Explorer for issues displaying ".mobi" web sites in an IE browser.

Sample XSL templates

Common elements that need to appear on every page throughout the site would be put into templates in an XSL file referenced by the XHTML pages.

sample.xsl

<?xml version="1.0" encoding="UTF-8"?>
<!-- uncomment to validate XSLT
<!DOCTYPE xsl:transform SYSTEM "http://www.sample.mobi/dtd/xslt.dtd">
-->
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="html">
<!-- Copyright (c) 2006 Accilent Corp. (http://www.Accilent.com/) for How To Guides (http://www.HowToGuides.com/). Provided AS IS; no warranties are expressed or implied. Permission is hereby granted to use and/or modify. -->
<xsl:output method="xml" version="1.0" omit-xml-declaration="no" indent="yes" doctype-system="http://www.sample.mobi/dtd/xhtml1-strict.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"/>

<xsl:template match="/">
<xsl:apply-templates select="*"/>
</xsl:template>

<xsl:template match="html:head">
<xsl:copy>
<xsl:apply-templates select="@*"/>
<link rel="stylesheet" type="text/css" href="/screen.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/handheld.css" media="handheld"/>
<xsl:apply-templates select="node()"/>
</xsl:copy>
</xsl:template>

<xsl:template match="html:body">
<xsl:copy>
<xsl:apply-templates select="@*"/>
<h1 style="display:inline">Sample .mobi site</h1>
&#160;a working example of repurposing mobile content as explained by&#160;
<a href="http://www.HowToGuides.com/internet/xml/templates.xml#mobile"><img src="/images/howtoguides.jpg" width="143" height="27" alt="How To Guides logo"/></a>
<p style="color: gray">This is a sample showing how templates can be used to make a web site that has been designed for mobile devices look good in a normal web browser. The important content, which you can do "View Source" to see, is put into <a href="http://www.Acronyms.net/terms/e/Extensible-Hypertext-Markup-Language/" title="Extensible Hypertext Markup Language"><abbr>XHTML</abbr></a> pages that are delivered to mobile devices, and any additional layout and styling for traditional browsers is put into templates and style sheets. Since the templates and style sheets can be reused for all pages on the site and are cached separately, this has the added advantage of reducing bandwidth requirements by as much as one half or more.</p>
<hr/>
<xsl:apply-templates select="node()"/>
<hr/>
<p>Click on the following link to verify that this page conforms to the <a href="http://www.Acronyms.net/terms/e/Extensible-Hypertext-Markup-Language/" title="Extensible Hypertext Markup Language"><abbr>XHTML</abbr></a> Mobile Profile as required by the dotMobi registry Switch On! guidelines:</p>
<p>
<a href="http://validator.w3.org/check/referer" target="w3cvalidator">
<img src="/images/valid-xhtml10.png" alt="Valid XHTML 1.0!" height="31" width="88"/></a>
&#160;
<a href="http://ready.mobi/start.jsp?uri=sample.mobi">MobiReady Report</a>
</p>
<p>The "Mandatory Registrant Rules" for .mobi domains states:</p>
<p style="margin: 0 3em">The "Mandatory Registrant Rules" for .mobi domains states that "Requests for URIs consisting only of "example.mobi" or "www.example.mobi" must result in a response that is encoded in a format the device supports or valid <a href="http://www.Acronyms.net/terms/e/Extensible-Hypertext-Markup-Language/" title="Extensible Hypertext Markup Language"><abbr>XHTML</abbr></a>-Mobile Profile 1.0 or later released version, where "example" stands for any domain name.</p>
<p>For a site that satisfies these registration requirements for a .mobi domain, the W3C Validator will display:</p>
<p style="margin: 0 3em; background-color: #55b05a; color: white; text-align: center; font-family: Bitstream Vera Sans, sans-serif; font-size-adjust: .53; font-size: 1.5em; font-weight: 500">This Page Is Valid -//WAPFORUM//DTD XHTML Mobile 1.0//EN!</p>
<p>Copyright &#169; 2006 Sample .mobi. All rights reserved.</p>
</xsl:copy>
</xsl:template>

<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>

</xsl:transform>

More sophisticated sites could have various groups of pages which are similar to each other, but are different from the pages in other groups. In this case, more than one level of templates would be used. For each group of similar pages, a separate template would be created for the common elements on the pages within that group. Those templates would all import a single site-wide template containing the common elements that would appear on all pages across the entire site.

Style sheet for traditional web browsers

screen.css

img {
border: 0;
}

Style sheet for handheld devices

handheld.css

img {
border: 0;
}

.htaccess file

To deliver the XHTML and WML pages with the correct MIME types, you will need an .htaccess file will the following directives, or their equivalent for the web server software you are using:

.htaccess

DirectoryIndex index.xml
ErrorDocument 404 /pagenotfound.xml

AddType application/xhtml+xml;charset=utf-8 xml xhtml
AddType text/vnd.wap.wml;charset=iso-8859-1 wml

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} \(compatible;[[:space:]]*MSIE[[:space:]]+[[:digit:]]+\.[[:digit:]][[:alnum:]]*;
RewriteRule ^$ http://%{HTTP_HOST}/index.xml [L,R=temp]

Contrary to the HTTP standards, Internet Explorer pays more attention to the file extension than to the MIME types specified by the server. Therefore, the default DirectoryIndex document has a .xml extension. See .mobi sites in Internet Explorer for more information on the issues with displaying the default DirectoryIndex document in IE.

back to top

Last updated Sunday March 25, 2007

You are currently viewing this page in XHTML 1* format (* see Clicklets for more infomation). This document is also available in XHTML 1 Style Sheet*XML* HTML 4*HTML 5 Style Sheet*HTML 5 XML*HTML 5 non-XML* XHTML 2* XHTML Mobile* WML Mobile* and printer-friendly PDF* formats. This is accomplished with Single Source Publishing, a content management system that uses templates in XSLT style sheets provided by XML Styles .com to transform the source content for various content delivery channels. There is also RDF* metadata that describes the content of this document.

Copyright © 2007 How To Guides .com. Alteration of content, including addition of any function such as hypertext links or pop-up advertising, or interference with the hypertext links or other functions of this site is expressly prohibited.

DISCLAIMER: All information, links, forms, applications and other items on this site or obtained from it are provided AS IS, WITHOUT WARRANTY OF ANY KIND EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.