html
Running WEB tests as JUnit tests
The test records clicks, userInput and can be replayed. Furthermore JUnit tests are performed and recorded.
Make the Navigation Menu user specific
For a workflow application serveral user types are defined. In general, depending on their roles, users have different rights. In particular the navigation menu must be user specific (e.g. some users may have write access, others only read access ).
Generating html pages with xslt template
Regions and parts all pages have in common should be separated from page-specific information (We will refer to the latter simply as content).
The idea is to split them up as follows:
- create an XSL template with the basic layout of the pages,
- and for each page a file containing only the content.
So common elements and page specific content can be maintained separatly.
Every time changes have been applied, the final HTML files can be generated via xsl transformation.
-
Step by Step:
- Create an HTML file with the desired layout (including all regions like, footer, header, ..., menu)
- Create one XML file per specific page, containing the elements
<root><content></content></root>and put the content between the two content tags. - Now create an XSLT file (with output method xml)
- Add one template rule which matches /root/content, and insert the layout defined in the HTML file above
- Finally the content has to be inserted into the output. Add the following rule to the desired location:
<xsl:copy-of select="/root/content/*"/>
Xalan could be used to transform the pages. Then the invokation would look like:java -cp ./xalan/xalan.jar org.apache.xalan.xslt.Process -in content/index.xml -xsl templates/template.xslt -out index.html
Hint: Time saver: Put these calls into a makefile, so only modified pages get transformed.
Use the hCard microformat
hCard is a simple, open microformat standard, suitable for embedding in HTML. Technically it's a 1:1 representation of the popular vCard format for electronic business cards. It resembles the properties and values of the vCard format through elements of HTML.
An address, which has the following markup using the HTML address tag
<address>
Max Mustermann
Musterstraße 10
1010 Wien
0664/333666
</address>
would have the following markup in hCard
<div id="hcard-max-mustermann" class="vcard">
<span class="fn">max mustermann</span>
<div class="adr">
<div class="street-address">Musterstraße 10</div>
<span class="postal-code">1010</span> <span class="locality">Wien</span>
</div>
<div class="tel">0664/666333</div>
</div>
This still is plain old HTML, but provides much more semantic details through all the class annotations. hCard pretty much looks like the way to go for now, this is also supported by the fact that Google Maps is using it for the annotation of addresses.
Much more details on hCard can be found at http://microformats.org/wiki/hcard.
Semantic contact information in HTML
When writing HTML-documents, it’s quite common to provide some contact information in the document. The same is true for whole websites, where you typically have some dedicated page containing detailed contact information. People nowadays understand that it can be vital for their businesses to use structued ways to describe their offerings and profiles and „beeing found“ is a key aspect to success in electronic business. One aspect of this, clearly is contacting information. To my knowledge, the usual way of providing this information is the addess-tag of HTML. The address tag was originally dedicated to specifiy the owner of single document but in real life it’s often used for the markup of the „virtual phonebook entry“ of a whole site. While Dublin Core (and meta tags like DC.creator and DC.subject) is more and more used to provide metadata concerning the copyright of individual documents, I look for a future-proof and simple way for the markup of contact information for a whole website. The requirements are rather simple: It should provide far more semantical meaning as the old address tag (which has no further refinement of contacting information then beeing an address) but it should be as simple and straight-forward as the address tag.
Geasemonkey, a firefox addon
The firefox add-on Greasemonkey enables the firefox user to modify web content locally. It does this by running a user javascript file after the page has been rendered. The user script has to be installed and the pages for which it is intended have to be defined (this can also be done in the script file).
Tutorial
-Install the add-on Greasemonkey.
-create the javascript file, but name it *.user.js
-make sure the greasemonkey addon is active (the icon on the browsers lower right corner is in color).
-right-click on the icon (or click Extras->Greasemonkey), install and activate the script and define the pages after which the script should be run.
-open a page for which the script was written and observe the effect!
There is a repository for greasemonkey scripts here
P.S.: You can also install the script by simply opening it with firefox.
How to automatically modify web content locally
Web pages do not always provide the design we want them to. There are web pages which one visits very frequently and which one would like to modify slightly. Such modifications would be for example: a different font, to resize a part of the page or to eliminate a part of the page.
Easy maintainable static website
A static website shall be built, where all pages use the same layout.
The layout may divide a page into several regions, like: footer, header, a menu, and maybe a region for displaying news.
There may be other parts which all of the pages have in common (e.g. included resources like css, ...)
The goal is that information shared by all pages shall not be duplicated, as this would complicate the maintainance of the website.
Taggings:
Adding generated pages to a website which uses relative paths and a layout template
There is website for a conference using relative paths to reference resources.
The content of existing pages are maintained as XML files (containing HTML formatted text)
There is one main template that defines the basic layout: header, footer, and a menu. Links defined here use relative paths.
This template, an XSL file, is applied to all content pages to transform them into HTML-files. Until now all pages of the website have been located in the same folder.
The challenge:
A foto gallery shall be integrated into the website.
It was generated with an arbitrary tool (e.g. Adobe Lightroom) that organises images and referencing pages in a folder hierarchy of multiple levels.
An example: A foto gallery with an album overview, and two alums: Reception and Dinner
- Album Overview
| . index.html :with a link to each album, thumbnail
L Reception
| . index.html (with thumbnails of all fotos, linked to detailed view)
| L detailed
| | . IMG_001.html
| | . IMG_012.html
| | . IMG_...
| L fotos
| | . IMG_001.jpg
| | . IMG_012.jpg
| | . IMG_...
L Dinner
| . index.html (with thumbnails of all fotos, linked to detailed view)
| L detailed
| | . IMG_011.html
| | . IMG_015.html
| | . IMG_...
| L fotos
| | . IMG_011.jpg
| | . IMG_015.jpg
| | . IMG_...
<ul>
Problems:
<li>These pages should follow the general layout</li>
<li>These pages depend on the generated folder structure, so they can't be moved</li>
<li>When the layout template is applied to the files of the gallery, the links (menu!) defined in there are <em>broken</em> (as they are relative references)</li>
</ul>
Find a way to integrate these pages, so they use the same layout template, and links with relative paths are still working.
Taggings:
Embedding Google Maps into a website
Google provides a simple way to embed maps into a web site using Google maps. You can embed a simple map, a set of driving directions, a local search, or maps created by other users. Here's how:
- Ensure that the map you'd like to embed appears in the current map display.
- Click Link to this page in the top-right corner of the map.
- In the box that pops up, copy the HTML under 'Paste HTML to embed in website,' and paste it into the source code of your website or blog.
- If you'd like to adjust the size of the map before you embed it, just click Customize and preview embedded map, select your preferred size, and take a look at the preview map. Once you're happy with what you see, copy the HTML that appears in the box at the bottom of the window
Pages
