About web
This webpage (not the contents, but the "skeleton") was developed as my project in Lenguajes para internet subject, at E.U.I.T.I.O., and also for my Computer Science studies final project. As it was already done, well, I just reused it for this project :) (Some improvements were made since then, though).
All the pages are XHTML 1.1, CSS 2.1 and WAI-A valid. An Atom valid feed is provided for news.
Four ECMAScript scripts are used: one to round the corners of specified elements, one to create a screenshots gallery from the screenshots list, one to enable folding an unfolding nested lists and one to replace ogg video links with embedded players. There is a fifth script, the true video player, not developed by me but got from GNU webpage. Anyway, it is licensed also as GPL 2 (or newer) ;)
All the pages are created from a template using XML and XSLT. Other information (news and screenshots lists) is also stored as XML and transformed through XSLT. XML pages and news list have their own XML Schema to validate against. Screenshots list uses a DTD.
All the pages are created from XML files containing its contents (not taking into account common fixed content as header or footer which are part of the XSLT). Each XML document under pages is transformed into an XHTML page using XSLT. The XML source files for the pages can be seen under pages directory.
transformers/menu.xml contains an XHTML list with all the pages that are linked through the menu in all pages.
screenshotsList.xml contains an XHTML list with all the screenshots that are shown in Screenshots gallery section. This list has a fixed structure so it can be used with Gallery Generator script. The list of screenshots in pages/screenshotsGallery.xml is updated through an XSLT (updateScreenshotsInPage.xsl) using the XHTML source for screenshots list.
newsList.xml contains an XML list with news. The Atom feed is generated using the information stored in this XML file. The list of news in pages/index.xml and pages/news.xml is updated through an XSLT (updateNewsInPage.xsl) using the outputted XHTML file (news-html.xml) by news-toHTML.xsl applied to newsList.xml.
screenshotsList.xml conforms to screenshotsList.dtd. It's an XHTML document fragment containing some elements in a fixed structure to create the screenshots list.
newsList.xml conforms to newsList.xsd. This is a list of news. Each new contains a title, a summary which contains only XHTML block elements and a date in a slightly modified version of the default date and time type data. Target namespace is http://lusi.berlios.de/namespaces/news (I just keep it instead of using one specific for this project).
All the XML files under pages conforms to pages/page.xsd. Those XML files contain the data that changes from the template to generate the pages. That is, the true content of the page (not the header, nor the menu, nor the footer, only contents) and also some variables to customize some of the common elements in the templates (for example, the title of the page). Content can be anything suitable in a body XHTML element, and some variables also use XHTML elements. Target namespace is http://lusi.berlios.de/namespaces/page (the same as the other namespace).
Further information about each XML Schema can be found in their annotations.
news-toAtom.xsl creates an Atom feed from a news list. Dates in Atom feeds must conform to RFC 3339, so input dates are modified to conform to this. Links are also modified if needed to adjust them to a full URL if they were relative. Several parameters can be set to customize the transformation.
news-toHTML.xsl creates the XHTML representation of the News XML source file. Its output is used to update index.xml and news.xml files. Date and time are modified to a friendlier format for the user. The full list of news is generated.
updateScreenshotsInPage.xsl substitutes the ul element with "screenshotsList" id in the page the XSLT was applied over with the screenshots list. The screenshots list is got from an XHTML file which conforms to screenshotsList.dtd.
updateNewsInPage.xsl substitutes the div element with "news" id in the page the XSLT was applied over with the news list and the specified number of news. The news list is got from the XHTML file outputted when newsList.xml is transformed using updateNewsInPage.xsl.
All the XHTML pages are created from XML source files. They're transformed using transformers/optimusPrime.xsl (named after the Autobot leader, one of the most important Transformer :) ). This XSLT copies the contents of the XML source file to the contents part of the XHTML page, and calls templates provided by other stylesheets to create the head, the header, the menu and the footer of the page. All the pages have the same structure, and some little details can also be customized using special elements in the XML source file. Let see the other XSLT used by optimusPrime.xsl
transformers/head.xsl creates the head element in XHTML pages. New links and scripts can be added using special elements in the XML source file. Also, ECMAScript code can be added to the window.onload function.
transformers/header.xsl creates the header in XHTML pages. It simply contains the logo of the project.
transformers/footer.xsl creates the footer in XHTML pages. It contains all the validation buttons, and also new validation buttons can be added using special elements in the XML source file (like the Atom validation button in news page).
transformers/menu.xsl creates the menu in XHTML pages. Menu items are got from transformers/menu.xml. When the menu for a page that can be accessed from the menu is created, its menu item is made as a paragraph instead of a link.
Further information about each XSLT can be found in their main and templates documentation.
All the scripts made by me conform (or at least I hope so) to ECMAScript Language Specification and the following bindings are needed (not all the bindings are needed by all the scripts): Level 2 Document Object Model Core, Level 2 Document Object Model Events, Level 2 Document Object Model Style and Level 2 Document Object Model HTML.
The only known element used which isn't ECMAScript is onresize event handling for the window (used in the gallery generator to resize the screenshots when the window is resized, and also used to load the scripts on window load). As far as I know, it's Javascript, because the Window Object specification is still a Working draft and doesn't have ECMAScript bindings defined. I haven't found an equivalent way to do it with pure ECMAScript.
The four scripts are: script/roundedCorners.js, script/galleryGenerator.js, script/foldableList.js and script/videoEmbedder.js. Further information about each script can be found in the documentation in their header and functions documentation.
Those scripts only adds some optional features. Their lack doesn't ruin the use of the website, and, as desirable, it's perfectly usable in not ECMAScript enabled browsers. Each script is guarded against not conformant browsers using the hasFeature(feature, version) method of the DOMImplementation interface.
In fact, script/galleryGenerator.js is currently disabled until I can get some time to fix it, as the screenshots are resized over their natural size when the page size is too large. Better no gallery than an ugly gallery :P
Sadly, the fifth script, the one that contains the true video player, wasn't developed by me and I don't know whether it conforms to ECMAScript or not. I hope that it does, anyway ;)
The website was tested successfully in Mozilla Firefox 1.0.6 to 3.5.7, Konqueror 3.4.2 to 4.3.2, Mozilla Suite 1.7.11 and Lynx 2.8.5.
It's expected to fully work in any browser based either in Gecko or KHTML layout engine.
Lynx is a text browser and has no support for ECMAScript, but all the pages can be viewed without any problem on it.
Internet Explorer doesn't support any of the scripts, but the page can be viewed without problem apart of this and some minor appearance glitches. This is due to the lack of support in Internet Explorer for some ECMAScript bindings. At least, version 6, I don't know about version 7, but neither I care :P
It's not a big problem, however, because being the website of a free project for GNU/Linux, hardly any of the visits to the page will be from Internet Explorer users. Most of the potential visitors will use one of the fully supported browsers.
Most of the source files of the web can be downloaded in a packed tar.gz file. However, that file doesn't contain data/apidocs, data/doc and data/files directories to save space, and because they are not true source files of the web.
The sources can be built to a real website using the Bash script cybertron.sh. It needs the following programs: xsltproc, xmllint (both part of libxml project) and, if a different encoding than the default (UTF-8) is used, recode and sed.
Further information about the script can be found in the documentation in its header and functions documentation.
The script is only a convenience build system. The website can also be built doing manually the steps made by the script:
-
Prepare pages: pages/index.xml, pages/news.xml and pages/screenshotsGallery.xml files should be updated with the latest news and screenshots.
For pages/index.xml and pages/news.xml a temporal file must be created. This file will contain the XHTML fragment with the news list, and is created using news-toHTML.xsl XSLT applied over newsList.xml. pages/index.xml and pages/news.xml are transformed by updateNewsInPage.xsl, which reads the temporal file to get the news.
In the case of pages/screenshotsGallery.xml, it is transformed with updateScreenshotsInPage.xsl, which gets the screenshots from screenshotsList.xml. There's no need of temporal files, as screenshotsList.xml contains the screenshots list in an XHTML document fragment.
-
Create pages: all the XML files under pages directory are transformed in the final XHTML pages using transformers/optimusPrime.xsl XSLT. They are copied to the output directory and reformatted (because even using indent="yes" the XML output may be messed up).
If they need to be recoded the other encoding than UTF-8, also the UTF-8 (in lower case!) string in the XHTML documents must be substituted with the new encoding.
- Create feeds: copy the output file of applying news-toAtom.xsl on newsList.xml to feed/atom/news.xml in the output directory.
- Copy data dirs: copy all the contents of the data directory to the output directory.
- Copy source dir: copy all the contents of the src directory to the src subdirectory of the output directory.
Last updated: 2010-03-24
