With Javascript support:

This story is just to test integration of a Flash animation into my blog.

• http://freedownloads.last.fm/download/29453608/Morning Sunlight.mp3
• morningsunlight.mp3 (mp3, 4,111 KB)
• read-think-learn.swf (swf, 7 KB)

Bei Accessability Prüfungen wie etwa mit WAVE - web accessibility evaluation tool ist eine Fehlermeldung ähnlich 'ERROR: Form label missing::A form <input>, <select>, or <textarea> does not have a corresponding label' gekommen. Der Grund dafür ist, wie die Meldung sagt, das fehlen eine <label> Elements für jedes Formular-Element wie Eingabefelder oder Checkboxes

Zur Korrektur des Problems muss man einfach das label tag in das Formular einfügen. In vielen Fällen wird das zu bezeichnende Formular-Element bereits eine Beschriftung besitzen, nur ist diese eben nicht von einem label tag eingeschlossen. Wichtig beim Hinzufügen des label tags:

• Das label tag muss das Attribut for="id des zu bezeichnenden elements" gesetzt haben
• Das zu bezeichnende Element muss das Attribut id, und nicht nur das Attribut name, gesetzt haben (zB. id="username"). Die id muss eindeutig sein auf der Seite.

Beispiel:

<label for="loginform_username">Username:</label><input name="username" id="loginform_username" type="text" /><

I added a feature that allows a user to quickly add a comment to a story by simply double-clicking anywhere within the story text. This is done with the help of a javascript library thats allows to open a popup with a comment edit form.

It was not so easy to add the proper javascript to the skins, especially to hand over the html code to be displayed in the popup. I added custom story and site skins for popup comment form and popup caption

Resources: http://www.bosrup.com/web/overlib/

I am trying to create a blog header image according to my idea. I searched for black and white images of books, thinker of rodin and chess in http://www.google.at. At first I wanted to add big-lettered single words for "read", "think", "learn" overlapping the image of books, thinker and chess respectively. But when I searched for ways to make text transparent or a similar effect, I found a page explaining how to create image that is outlined by text: http://www.drweb.de/photoshop/bild-aus-schrift.shtml

I decided to go for that and made a few versions of the header image, with gaps between the 3 parts and without, with more or less transparency and so on. Lacking experience as designer and as well as the tool I used (Adobe Photoshop CS 3) I finally took the image I liked best so far.

It has a special property to make it suitable for different layouts: There is no 100% background color, only a 50% white fill layer. So by setting the background-color css style for the image, you can basically give the image a slight hue in a color matching your layout. In my case, its the layout.titlecolor.

Download link for zipped header-image project: /9756179/getfile?name=header-image_read-think-learn

Like me you might have recognized that editing the default site skin 'Main page of a single day' does not have an effect. This seems to be a problem of antville.org default layout. The link in the site skin list refers to skin 'day.main' while the id is in fact 'Day.main'. So if you want to edit the skin, simple select 'Main page of a single day' and change 'key=day.main' to 'key=Day.main' in the browser url.

I try to add icons to my layout for action-links, menu-items, etc.
Resource:
http://www.freeiconsweb.com/

Experimentally I tried to add OpenSearch and Sherlock search engine support to my blog.

OpenSearch

OpenSearch is supported by Firefox 2+ and IE 7. Resources:

• http://en.wikipedia.org/wiki/OpenSearch
• http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document

I created an OpenSearch description file and uploaded it on my blog: opensearch.xml (xml, 1 KB)

Sadly I cannot add the file to the layout itself, so there is a bit of dependency between the layout used and the files in the blog the layout is applied to.

A reference to the OpenSearch description file must be added to the HTML head by updating your layout's main page:
<link rel="search" type="application/opensearchdescription+xml" href="<% site.url %>getfile?name=opensearch.xml" title="OpenSearch <% site.title %>" />

Browsing my blog should add a search engine option to Firefox and IE.

Sherlock

Sherlock is a searching tool developed by Apple.
Resources:

• http://en.wikipedia.org/wiki/Sherlock_(software)
• http://developer.apple.com/technotes/tn/tn1141.html

Sherlock plugin description file: sherlock.src (src, 1 KB)

Sherlock untested yet.

Update: No success adding sherlock support, probably already outdated? Will stop trying

Internet Explorer and Firefox (and probably other browsers as well) support an RSS feed icon being activated/displayed if a webpage offers a rss feed. The default antville.org layout already provides a link but due to a false mime-type its not recognized by Firefox or IE. Add the following link tag to your HTML headers in main page layout:
<link rel="alternate" type="application/rss+xml" title="<% site.title %>" href="<% site.url %>rss">

cf. http://en.wikipedia.org/wiki/RSS#Including_in_XHTML